/* ============================================================= Bespoke marketing site — REFRESH EFFECTS (2026) Additive, fully gated layer over styles.css. Every rule keys off a data-fx-* attribute on , set by Effects.jsx from the Tweaks panel. Turn them all off and the page is byte-for- byte the original flat editorial layout — nothing here fires. Scope: whole page. Tone: visual richness, minimal motion. Never touches copy, the theme picker, or the "you" gradient. ============================================================= */ /* ---- per-theme glow colors (match each element's own color) -- */ body[data-fx-glow="on"] { --fx-eyebrow-glow: var(--bsd-glow); --fx-num-glow: var(--bsd-glow); --fx-cta-glow: var(--bsd-glow); } body[data-theme="cyberpunk"][data-fx-glow="on"] { --fx-eyebrow-glow: rgba(252, 238, 9, 0.50); /* yellow eyebrow */ --fx-num-glow: rgba(0, 229, 255, 0.60); /* cyan numbers / dots */ --fx-cta-glow: rgba(255, 0, 144, 0.55); /* magenta CTA */ } /* ---- 1. NEON GLOW ON ACCENTS -------------------------------- */ body[data-fx-glow="on"] .hero-eyebrow { text-shadow: 0 0 18px var(--fx-eyebrow-glow), 0 0 5px var(--fx-eyebrow-glow); } body[data-fx-glow="on"] .step-num { text-shadow: 0 0 14px var(--fx-num-glow), 0 0 4px var(--fx-num-glow); } body[data-fx-glow="on"] .included-ic { box-shadow: 0 8px 20px -6px var(--fx-cta-glow); } body[data-fx-glow="on"] .btn-primary { box-shadow: 0 6px 22px -6px var(--fx-cta-glow); } body[data-fx-glow="on"] .btn-primary:hover { box-shadow: 0 8px 30px -6px var(--fx-cta-glow), 0 0 0 1px var(--fx-cta-glow); } body[data-fx-glow="on"] .price-card.featured .amount { text-shadow: 0 0 12px color-mix(in srgb, var(--fx-cta-glow) 50%, transparent); } body[data-fx-glow="on"] .work-link:hover, body[data-fx-glow="on"] .site-footer a:hover, body[data-fx-glow="on"] .picker-footnote span { text-shadow: 0 0 12px var(--fx-cta-glow); } /* ---- 2. GRADIENT BLOOM behind the "you" --------------------- */ body[data-fx-bloom="on"] .hero-content h1 em { filter: drop-shadow(0 0 22px var(--bsd-glow)); } body[data-theme="cyberpunk"][data-fx-bloom="on"] .hero-content h1 em { filter: drop-shadow(0 0 26px rgba(255, 0, 144, 0.30)) drop-shadow(0 0 44px rgba(252, 238, 9, 0.14)); } /* ---- 3. GLASSY DEPTH + RICHER HOVER ------------------------- */ /* Light-section cards: resting depth + inner highlight, accent lift on hover */ body[data-fx-glass="on"] .work-card, body[data-fx-glass="on"] .price-card { background: linear-gradient(180deg, #ffffff 0%, #fcfcfb 100%); box-shadow: 0 1px 2px rgba(13, 13, 16, 0.04), 0 12px 32px -16px rgba(13, 13, 16, 0.14); } body[data-fx-glass="on"] .work-card:hover { border-color: color-mix(in srgb, var(--bsd-accent) 55%, var(--bsd-border)); box-shadow: 0 1px 2px rgba(13, 13, 16, 0.05), 0 22px 46px -18px var(--bsd-glow), 0 0 0 1px color-mix(in srgb, var(--bsd-accent) 30%, transparent); transform: translateY(-4px); } body[data-fx-glass="on"] .price-card.featured { box-shadow: 0 1px 2px rgba(13, 13, 16, 0.04), 0 18px 48px -18px var(--bsd-glow); } body[data-fx-glass="on"] .included-item { transition: background var(--bsd-t-med); } body[data-fx-glass="on"] .included-item:hover { background: color-mix(in srgb, var(--bsd-accent) 6%, var(--bsd-offwhite)); } /* Dark-section glass: the theme picker buttons */ body[data-fx-glass="on"] .theme-btn { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.035); } body[data-fx-glass="on"] .theme-btn:hover { background: rgba(255, 255, 255, 0.065); } /* ---- 4. AMBIENT HERO GLOW (atmosphere, no motion) ----------- */ body[data-fx-ambient="on"] .hero-dark { position: relative; overflow: hidden; } body[data-fx-ambient="on"] .hero-dark > * { position: relative; z-index: 1; } body[data-fx-ambient="on"] .hero-dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(58% 50% at 86% -5%, var(--bsd-glow), transparent 70%); } body[data-theme="cyberpunk"][data-fx-ambient="on"] .hero-dark::before { background: radial-gradient(60% 78% at 80% 14%, rgba(255, 0, 144, 0.26), transparent 62%), radial-gradient(52% 70% at 3% 110%, rgba(252, 238, 9, 0.14), transparent 64%), radial-gradient(52% 46% at 94% -8%, rgba(0, 229, 255, 0.12), transparent 70%); } /* ---- 5. MAGNETIC / CURSOR-AWARE BUTTONS --------------------- */ /* JS in Effects.jsx sets --mx / --my (px) and the magnetic translate. */ body[data-fx-magnetic="on"] .btn-primary { position: relative; overflow: hidden; transition: transform 0.18s ease, box-shadow var(--bsd-t-med), opacity var(--bsd-t-fast); } body[data-fx-magnetic="on"] .btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--bsd-t-med); background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.45), transparent 60%); } body[data-fx-magnetic="on"] .btn-primary:hover::after { opacity: 1; } body[data-fx-magnetic="on"] .work-card { position: relative; } body[data-fx-magnetic="on"] .work-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.25s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--bsd-glow), transparent 62%); } body[data-fx-magnetic="on"] .work-card:hover::after { opacity: 1; } /* Respect reduced-motion: drop the magnetic translate (JS checks too) */ @media (prefers-reduced-motion: reduce) { body[data-fx-magnetic="on"] .btn-primary { transition: box-shadow var(--bsd-t-med), opacity var(--bsd-t-fast); } } /* ---- 7. GRADIENT ACCENTS ------------------------------------ */ /* The brand signature applied as small structural marks: a tick above each light-section header, a top edge on the featured price card, and a faded gradient on the section dividers. Light sections only — the dark Security strip is a .security-strip div, not a

. */ /* 7a — section-header kicker (real element: .section-kick) */ .section-kick { display: none; } body[data-fx-accents="on"] .section-kick { display: block; width: 2.5rem; height: 3px; border-radius: 2px; margin-bottom: 0.95rem; background: var(--bsd-accent); } body[data-theme="cyberpunk"][data-fx-accents="on"] .section-kick { background: linear-gradient(90deg, var(--bsd-cp-yellow) 0%, var(--bsd-cp-magenta) 100%); } /* 7b — featured price card top edge (real element: .price-edge) */ .price-edge { display: none; } body[data-fx-accents="on"] .price-card.featured { position: relative; overflow: hidden; } body[data-fx-accents="on"] .price-card.featured .price-edge { display: block; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--bsd-accent); } body[data-theme="cyberpunk"][data-fx-accents="on"] .price-card.featured .price-edge { background: linear-gradient(90deg, var(--bsd-cp-yellow) 0%, var(--bsd-cp-magenta) 100%); } /* 7c — gradient-faded section dividers */ body[data-fx-accents="on"] section + section { border-top-color: transparent; border-image: linear-gradient(90deg, transparent 0%, var(--bsd-border) 16%, var(--bsd-border) 84%, transparent 100%) 1; } body[data-theme="cyberpunk"][data-fx-accents="on"] section + section { border-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--bsd-cp-magenta) 28%, var(--bsd-border)) 50%, transparent 100%) 1; }