/* ========================================================== Hook2Lead — production site styles Palette themes + snap panels + auras + Roboto ========================================================== */ /* ---------- Palettes (themeable via [data-theme]) ---------- Default = Forest Monochromatic (matches current logo) */ :root, [data-theme="forest-mono"] { --brand-primary: #2D4A35; --brand-primary-deep: #1F3526; --brand-secondary: #7A9B7E; --brand-accent: #D9F25E; --brand-warmth: #E8D4B8; --brand-surface: #F9F7F1; --brand-surface-2: #EFEBE0; --brand-ink: #1A1A1A; --brand-muted: rgba(26, 26, 26, 0.6); --brand-border: rgba(26, 26, 26, 0.12); --brand-on-primary: #F9F7F1; --brand-on-accent: #2D4A35; --brand-on-secondary: #F9F7F1; /* Logo color slots (referenced by inline SVG fills) */ --logo-body: #2D4A35; --logo-tab: #D9F25E; --logo-tab-letter: #2D4A35; --logo-wordmark: #1A1A1A; --logo-accent: #D9F25E; --logo-tagline: #2D4A35; /* Aura colors (subtle blurred radial gradients) */ --aura-1: rgba(217, 242, 94, 0.55); /* citron */ --aura-2: rgba(122, 155, 126, 0.45); /* sage */ --aura-3: rgba(232, 212, 184, 0.55); /* sand */ } [data-theme="petrol"] { --brand-primary: #0E3D52; --brand-primary-deep: #082B3B; --brand-secondary: #B33A7E; --brand-accent: #D9F25E; --brand-warmth: #E8D4B8; --brand-surface: #FAF6ED; --brand-surface-2: #EFE9D9; --brand-ink: #1A1A1A; --brand-muted: rgba(26, 26, 26, 0.6); --brand-border: rgba(26, 26, 26, 0.12); --brand-on-primary: #FAF6ED; --brand-on-accent: #2C3D08; --brand-on-secondary: #FAF6ED; --logo-body: #0E3D52; --logo-tab: #B33A7E; --logo-tab-letter: #FAF6ED; --logo-wordmark: #1A1A1A; --logo-accent: #B33A7E; --logo-tagline: #0E3D52; --aura-1: rgba(179, 58, 126, 0.45); /* magenta */ --aura-2: rgba(217, 242, 94, 0.45); /* citron */ --aura-3: rgba(14, 61, 82, 0.30); /* petrol */ } [data-theme="forest-triadic"] { --brand-primary: #133D33; --brand-primary-deep: #0B2820; --brand-secondary: #8B5F14; --brand-accent: #6147A8; --brand-warmth: #E8D4B8; --brand-surface: #FAF6ED; --brand-surface-2: #EFE9D9; --brand-ink: #1A1A1A; --brand-muted: rgba(26, 26, 26, 0.6); --brand-border: rgba(26, 26, 26, 0.12); --brand-on-primary: #FAF6ED; --brand-on-accent: #FAF6ED; --brand-on-secondary: #FAF6ED; --logo-body: #133D33; --logo-tab: #8B5F14; --logo-tab-letter: #FAF6ED; --logo-wordmark: #1A1A1A; --logo-accent: #8B5F14; --logo-tagline: #133D33; --aura-1: rgba(139, 95, 20, 0.45); /* amber */ --aura-2: rgba(97, 71, 168, 0.40); /* violet */ --aura-3: rgba(232, 212, 184, 0.55); /* sand */ } [data-theme="forest-berry"] { --brand-primary: #133D33; --brand-primary-deep: #0B2820; --brand-secondary: #A8456C; --brand-accent: #C5DC9F; --brand-warmth: #E8D4B8; --brand-surface: #FAF6ED; --brand-surface-2: #EFE9D9; --brand-ink: #1A1A1A; --brand-muted: rgba(26, 26, 26, 0.6); --brand-border: rgba(26, 26, 26, 0.12); --brand-on-primary: #FAF6ED; --brand-on-accent: #27500A; --brand-on-secondary: #FAF6ED; --logo-body: #133D33; --logo-tab: #A8456C; --logo-tab-letter: #FAF6ED; --logo-wordmark: #1A1A1A; --logo-accent: #A8456C; --logo-tagline: #133D33; --aura-1: rgba(168, 69, 108, 0.45); /* berry */ --aura-2: rgba(197, 220, 159, 0.55); /* pistachio */ --aura-3: rgba(19, 61, 51, 0.30); /* forest */ } /* ========================================================== DARK MODE — applied via [data-mode="dark"] on Each palette gets a dark surface set; primary + accent stay. ========================================================== */ [data-theme="forest-mono"][data-mode="dark"] { --brand-surface: #1F3526; --brand-surface-2: #2D4A35; --brand-warmth: #3A4F42; --brand-ink: #F9F7F1; --brand-muted: rgba(249, 247, 241, 0.65); --brand-border: rgba(249, 247, 241, 0.15); /* Logo magnet body flips to cream so it's visible on the dark surface */ --logo-body: #F9F7F1; --logo-tagline: #F9F7F1; --logo-wordmark: #F9F7F1; } [data-theme="petrol"][data-mode="dark"] { --brand-surface: #082B3B; --brand-surface-2: #0E3D52; --brand-warmth: #1F4356; --brand-ink: #FAF6ED; --brand-muted: rgba(250, 246, 237, 0.65); --brand-border: rgba(250, 246, 237, 0.15); --logo-body: #FAF6ED; --logo-tagline: #FAF6ED; --logo-wordmark: #FAF6ED; } [data-theme="forest-triadic"][data-mode="dark"], [data-theme="forest-berry"][data-mode="dark"] { --brand-surface: #0B2820; --brand-surface-2: #133D33; --brand-warmth: #1F4337; --brand-ink: #FAF6ED; --brand-muted: rgba(250, 246, 237, 0.65); --brand-border: rgba(250, 246, 237, 0.15); --logo-body: #FAF6ED; --logo-tagline: #FAF6ED; --logo-wordmark: #FAF6ED; } /* Dark-mode global overrides for glass cards, fields, steps, eyebrow */ [data-mode="dark"] .card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: var(--brand-ink); } [data-mode="dark"] .card:hover { background: rgba(255, 255, 255, 0.08); } [data-mode="dark"] .bg-brand-warmth .card { background: rgba(255, 255, 255, 0.06); } [data-mode="dark"] .card-body { color: rgba(255, 255, 255, 0.7); } [data-mode="dark"] .field { background: rgba(255, 255, 255, 0.05); color: var(--brand-ink); border-color: rgba(255, 255, 255, 0.14); } [data-mode="dark"] .step { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: var(--brand-ink); } [data-mode="dark"] .step p { color: rgba(255, 255, 255, 0.7); } [data-mode="dark"] .eyebrow { color: rgba(255, 255, 255, 0.65); } [data-mode="dark"] .brand-mark, [data-mode="dark"] .header-tools { background: rgba(0, 0, 0, 0.45); border-color: rgba(255, 255, 255, 0.12); color: var(--brand-ink); } [data-mode="dark"] .tool-btn { color: var(--brand-ink); } [data-mode="dark"] .tool-btn:hover { background: rgba(255, 255, 255, 0.08); } [data-mode="dark"] .theme-menu { background: var(--brand-surface-2); border-color: rgba(255, 255, 255, 0.12); color: var(--brand-ink); } [data-mode="dark"] .theme-menu .opt:hover { background: rgba(255, 255, 255, 0.06); } [data-mode="dark"] .theme-menu .name { color: var(--brand-ink); } [data-mode="dark"] .footer-chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } [data-mode="dark"] .footer-chip:hover { background: rgba(255, 255, 255, 0.14); } [data-mode="dark"] #faq-list details { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: var(--brand-ink); } [data-mode="dark"] #faq-list details[open] { background: rgba(255, 255, 255, 0.08); border-color: var(--brand-accent); } [data-mode="dark"] #faq-list .text-brand-muted { color: rgba(255, 255, 255, 0.7); } [data-mode="dark"] .next-arrow { color: var(--brand-ink); background: rgba(255,255,255,0.06); } [data-mode="dark"] .bg-brand-surface .next-arrow, [data-mode="dark"] .bg-brand-surface-2 .next-arrow, [data-mode="dark"] .bg-brand-warmth .next-arrow { color: var(--brand-ink); background: rgba(255,255,255,0.08); } /* Wordmark in dark mode */ [data-mode="dark"] .h2l-mark { color: var(--brand-ink); } [data-mode="dark"] .h2l-mark .num { color: var(--brand-accent); } /* Text-color utilities in dark mode — primary/secondary as text become invisible on the new dark surfaces, so swap them to cream (ink) for readability. Accent stays as accent (it pops on dark). */ [data-mode="dark"] .text-brand-primary { color: var(--brand-ink); } [data-mode="dark"] .text-brand-secondary { color: var(--brand-ink); } [data-mode="dark"] .brand-mark { color: var(--brand-ink); } /* Even nested elements with an inline primary fill (e.g. stat numerals) */ [data-mode="dark"] [style*="color: var(--brand-primary)"] { color: var(--brand-ink) !important; } /* Secondary CTA (outlined button) on light-mode surface classes flips to cream in dark mode so the border + label stay visible. */ [data-mode="dark"] .bg-brand-surface .btn-secondary, [data-mode="dark"] .bg-brand-surface-2 .btn-secondary, [data-mode="dark"] .bg-brand-warmth .btn-secondary { color: var(--brand-ink); border-color: var(--brand-ink); } [data-mode="dark"] .bg-brand-surface .btn-secondary:hover, [data-mode="dark"] .bg-brand-surface-2 .btn-secondary:hover, [data-mode="dark"] .bg-brand-warmth .btn-secondary:hover { background: var(--brand-ink); color: var(--brand-surface); } /* Brand-options page link */ [data-mode="dark"] .bo-link { color: var(--brand-ink); } [data-mode="dark"] .bo-nav a { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: var(--brand-ink); } [data-mode="dark"] .bo-nav a:hover { border-color: var(--brand-accent); } [data-mode="dark"] .bo-topbar { background: color-mix(in srgb, var(--brand-surface) 88%, transparent); border-bottom-color: rgba(255,255,255,0.12); } /* Pillar pillar-number — was 14% opacity primary on cream; flip to ink in dark */ [data-mode="dark"] .pillar-number { color: var(--brand-ink) !important; opacity: 0.10; } /* FAQ details fully readable */ [data-mode="dark"] #faq-list details summary { color: var(--brand-ink); } /* Dots indicator: invert default in dark mode */ [data-mode="dark"] .panel-dots a { background: rgba(255, 255, 255, 0.32); } [data-mode="dark"] .panel-dots a.active { background: var(--brand-accent); } /* ---------- Base ---------- */ html, body { height: 100%; } body { font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--brand-surface); color: var(--brand-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 400ms ease, color 400ms ease; } * { -webkit-tap-highlight-color: transparent; } .font-display { font-family: 'Roboto', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; } .font-mono { font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------- Roboto wordmark ("HOOK2LEAD") ---------- */ .h2l-mark { font-family: 'Roboto', sans-serif; font-weight: 900; letter-spacing: -0.025em; line-height: 1; text-transform: uppercase; color: var(--brand-primary); white-space: nowrap; } .h2l-mark .num { color: var(--brand-secondary); display: inline-block; transition: color 400ms ease; } /* On dark surfaces, body text flips to cream; the "2" stays in accent for contrast */ .bg-brand-primary .h2l-mark, .bg-brand-primary-deep .h2l-mark, .bg-brand-ink .h2l-mark { color: var(--brand-on-primary); } .bg-brand-primary .h2l-mark .num, .bg-brand-primary-deep .h2l-mark .num, .bg-brand-ink .h2l-mark .num { color: var(--brand-accent); } /* ---------- Logo (inline SVG, themed via CSS vars) ---------- */ .h2l-svg .h2l-body { fill: var(--logo-body); transition: fill 400ms ease; } .h2l-svg .h2l-body-stroke { stroke: var(--logo-body); transition: stroke 400ms ease; } .h2l-svg .h2l-tab { fill: var(--logo-tab); transition: fill 400ms ease; } .h2l-svg .h2l-tab-letter { fill: var(--logo-tab-letter); transition: fill 400ms ease; } .h2l-svg .h2l-wordmark { fill: var(--logo-wordmark); transition: fill 400ms ease; } .h2l-svg .h2l-accent { fill: var(--logo-accent); transition: fill 400ms ease; } .h2l-svg .h2l-tagline { fill: var(--logo-tagline); transition: fill 400ms ease; } /* When logo sits on a dark surface, force light treatment on the body */ .bg-brand-primary .h2l-svg .h2l-body, .bg-brand-primary-deep .h2l-svg .h2l-body, .bg-brand-ink .h2l-svg .h2l-body, [data-on-dark="true"] .h2l-svg .h2l-body { fill: var(--brand-on-primary); } .bg-brand-primary .h2l-svg .h2l-body-stroke, .bg-brand-primary-deep .h2l-svg .h2l-body-stroke, .bg-brand-ink .h2l-svg .h2l-body-stroke, [data-on-dark="true"] .h2l-svg .h2l-body-stroke { stroke: var(--brand-on-primary); } .bg-brand-primary .h2l-svg .h2l-wordmark, .bg-brand-primary-deep .h2l-svg .h2l-wordmark, .bg-brand-ink .h2l-svg .h2l-wordmark { fill: var(--brand-on-primary); } .bg-brand-primary .h2l-svg .h2l-tagline, .bg-brand-primary-deep .h2l-svg .h2l-tagline, .bg-brand-ink .h2l-svg .h2l-tagline { fill: var(--brand-on-primary); opacity: 0.8; } /* ---------- Snap scroller ---------- */ .snap-scroller { height: 100vh; height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; overscroll-behavior-y: contain; } .snap-scroller::-webkit-scrollbar { width: 0; height: 0; } .snap-scroller { scrollbar-width: none; } .panel { min-height: 100vh; min-height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; position: relative; display: flex; flex-direction: column; overflow: hidden; /* Don't paint off-screen panels — huge mobile perf win */ content-visibility: auto; contain-intrinsic-size: 100vh; } /* But always paint the first panel so the hero is instant */ #hero { content-visibility: visible; } .panel-inner { flex: 1; display: flex; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 6rem 1.5rem 5rem; position: relative; z-index: 2; } @media (max-width: 768px) { .panel-inner { padding: 5rem 1.25rem 5rem; } } /* ---------- Theme-aware surfaces ---------- */ .bg-brand-primary { background-color: var(--brand-primary); color: var(--brand-on-primary); } .bg-brand-primary-deep { background-color: var(--brand-primary-deep); color: var(--brand-on-primary); } .bg-brand-secondary { background-color: var(--brand-secondary); color: var(--brand-on-secondary); } .bg-brand-accent { background-color: var(--brand-accent); color: var(--brand-on-accent); } .bg-brand-warmth { background-color: var(--brand-warmth); color: var(--brand-ink); } .bg-brand-surface { background-color: var(--brand-surface); color: var(--brand-ink); } .bg-brand-surface-2 { background-color: var(--brand-surface-2); color: var(--brand-ink); } .bg-brand-ink { background-color: var(--brand-ink); color: var(--brand-surface); } .text-brand-primary { color: var(--brand-primary); } .text-brand-secondary { color: var(--brand-secondary); } .text-brand-accent { color: var(--brand-accent); } .text-brand-ink { color: var(--brand-ink); } .text-brand-muted { color: var(--brand-muted); } .text-on-primary { color: var(--brand-on-primary); } .border-brand { border-color: var(--brand-border); } .border-brand-primary { border-color: var(--brand-primary); } .border-brand-accent { border-color: var(--brand-accent); } /* ---------- Auras (decorative radial blobs) ---------- */ .aura { position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none; opacity: 0.9; transition: background 600ms ease, opacity 600ms ease; /* Promote to its own layer so the rest of the panel paints cheaply */ will-change: opacity; } @media (max-width: 768px) { /* On mobile the GPU chokes on big blur radii — soften the effect cheaply */ .aura { filter: blur(28px); opacity: 0.7; } } .aura-tl { top: -20%; left: -10%; width: 60vmin; height: 60vmin; background: radial-gradient(closest-side, var(--aura-1), transparent 70%); } .aura-tr { top: -10%; right: -15%; width: 65vmin; height: 65vmin; background: radial-gradient(closest-side, var(--aura-2), transparent 70%); } .aura-bl { bottom: -20%; left: -10%; width: 55vmin; height: 55vmin; background: radial-gradient(closest-side, var(--aura-3), transparent 70%); } .aura-br { bottom: -15%; right: -10%; width: 50vmin; height: 50vmin; background: radial-gradient(closest-side, var(--aura-1), transparent 70%); } .aura-c { top: 50%; left: 50%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--aura-2), transparent 70%); } .aura-soft { opacity: 0.55; } .aura-strong { opacity: 1; } @media (prefers-reduced-motion: reduce) { .aura { animation: none !important; } } /* ---------- Eyebrow ---------- */ .eyebrow { display: inline-block; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: var(--brand-muted); } .bg-brand-primary .eyebrow, .bg-brand-primary-deep .eyebrow, .bg-brand-ink .eyebrow { color: rgba(255,255,255,0.7); } .eyebrow-accent { color: var(--brand-accent); } /* ---------- Display headings ---------- */ .display-xl { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: clamp(2.75rem, 7vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; } .display-lg { font-family: 'Roboto', sans-serif; font-weight: 800; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.025em; } .display-md { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -0.015em; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 0.6rem; font-weight: 500; font-size: 0.95rem; transition: transform 140ms ease, box-shadow 140ms ease, background-color 200ms ease, color 200ms ease; border: 1px solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--brand-accent); color: var(--brand-on-accent); box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .btn-primary:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.18); } .btn-secondary { background: transparent; color: var(--brand-on-primary); border-color: rgba(255,255,255,0.45); } .bg-brand-surface .btn-secondary, .bg-brand-surface-2 .btn-secondary, .bg-brand-warmth .btn-secondary { color: var(--brand-primary); border-color: var(--brand-primary); } .btn-secondary:hover { background: rgba(255,255,255,0.1); } .bg-brand-surface .btn-secondary:hover, .bg-brand-surface-2 .btn-secondary:hover, .bg-brand-warmth .btn-secondary:hover { background: var(--brand-primary); color: var(--brand-on-primary); } .btn-ghost { background: transparent; color: inherit; border-color: currentColor; opacity: 0.85; } .btn-ghost:hover { opacity: 1; background: rgba(0,0,0,0.05); } .btn-lg { padding: 1rem 1.75rem; font-size: 1rem; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; pointer-events: none; } .site-header > * { pointer-events: auto; } .brand-mark { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; border-radius: 0.65rem; background: rgba(255,255,255,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--brand-border); text-decoration: none; color: var(--brand-primary); } .brand-mark svg { height: 26px; width: auto; display: block; } .header-tools { display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(255,255,255,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.35rem; border-radius: 0.7rem; border: 1px solid var(--brand-border); position: relative; } .tool-btn { padding: 0.45rem 0.7rem; font-size: 0.85rem; border-radius: 0.45rem; color: var(--brand-ink); background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; } .tool-btn:hover { background: var(--brand-surface-2); } .tool-btn[aria-current="true"], .tool-btn[aria-pressed="true"] { background: var(--brand-primary); color: var(--brand-on-primary); } .tool-divider { width: 1px; height: 18px; background: var(--brand-border); margin: 0 0.15rem; } /* ---------- Theme menu ---------- */ .theme-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 280px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 0.7rem; padding: 0.5rem; box-shadow: 0 12px 40px rgba(0,0,0,0.14); display: none; z-index: 70; } .theme-menu.open { display: block; } .theme-menu .opt { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.7rem; border-radius: 0.45rem; cursor: pointer; border: 1px solid transparent; } .theme-menu .opt:hover { background: var(--brand-surface-2); } .theme-menu .opt[aria-current="true"] { border-color: var(--brand-primary); } .theme-menu .swatch-row { display: inline-flex; gap: 3px; flex-shrink: 0; } .theme-menu .dot { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--brand-border); } .theme-menu .name { font-size: 0.9rem; font-weight: 600; color: var(--brand-ink); display: block; } .theme-menu .desc { font-size: 0.72rem; color: var(--brand-muted); display: block; margin-top: 2px; } /* ---------- Panel dots indicator ---------- */ .panel-dots { position: fixed; right: 1rem; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 0.7rem; } .panel-dots a { width: 8px; height: 8px; border-radius: 999px; background: rgba(0,0,0,0.28); transition: all 240ms ease; display: block; } .panel-dots a:hover { background: var(--brand-primary); transform: scale(1.4); } .panel-dots a.active { background: var(--brand-primary); height: 24px; border-radius: 6px; } .panel-dots[data-on-dark="true"] a { background: rgba(255,255,255,0.35); } .panel-dots[data-on-dark="true"] a.active { background: var(--brand-accent); } /* ---------- Next-panel arrow ---------- */ .next-arrow { position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: 1px solid currentColor; color: inherit; text-decoration: none; animation: bob 2.4s ease-in-out infinite; z-index: 3; } .next-arrow:hover { background: rgba(255,255,255,0.18); } .bg-brand-surface .next-arrow, .bg-brand-surface-2 .next-arrow, .bg-brand-warmth .next-arrow { color: var(--brand-primary); background: rgba(255,255,255,0.55); } @keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } /* ---------- Magnet hero artwork ---------- */ .magnet-hero { width: clamp(220px, 36vw, 480px); height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.35)); } .magnet-tilt { transform: rotate(-8deg); transition: transform 600ms ease; } .magnet-tilt:hover { transform: rotate(-4deg) scale(1.02); } /* ---------- Pillar layout ---------- */ .pillar-number { font-family: 'Roboto', sans-serif; font-size: clamp(140px, 26vw, 320px); font-weight: 900; line-height: 0.82; letter-spacing: -0.05em; opacity: 0.14; user-select: none; } /* ---------- Bullet list ---------- */ .feature-list { list-style: none; padding: 0; margin: 0; } .feature-list li { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.55rem 0; font-size: 1rem; } .feature-list li i { color: var(--brand-accent); margin-top: 0.25rem; flex-shrink: 0; } /* ---------- Cards (glassmorphism) ---------- */ .card { background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 0.95rem; padding: 1.75rem; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease; position: relative; display: flex; flex-direction: column; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(0,0,0,0.04), 0 12px 28px -16px rgba(0,0,0,0.18); } .card:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 18px 40px -18px rgba(0,0,0,0.25); border-color: var(--brand-primary); } .bg-brand-primary .card, .bg-brand-primary-deep .card, .bg-brand-ink .card { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: var(--brand-on-primary); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 12px 28px -18px rgba(0,0,0,0.5); } .bg-brand-primary .card:hover { border-color: var(--brand-accent); background: rgba(255,255,255,0.10); } .bg-brand-warmth .card { background: rgba(255,255,255,0.55); } .card-icon { width: 48px; height: 48px; border-radius: 0.55rem; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-accent); color: var(--brand-on-accent); font-size: 1.2rem; margin-bottom: 1rem; flex-shrink: 0; } .card-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; } .card-body { color: var(--brand-muted); font-size: 0.95rem; line-height: 1.55; flex-grow: 1; } .bg-brand-primary .card-body { color: rgba(255,255,255,0.75); } /* Pricing-style program card */ .program-card .program-tier { font-family: 'Roboto Mono', monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-secondary); margin-bottom: 0.4rem; } .bg-brand-primary .program-card .program-tier { color: var(--brand-accent); } .program-card .program-cta { margin-top: 1.25rem; } /* ---------- Process steps ---------- */ .steps-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .steps-grid { grid-template-columns: 1fr; } } .step { position: relative; padding: 1.5rem 1.25rem 1.25rem; border-radius: 0.75rem; border: 1px solid var(--brand-border); background: var(--brand-surface); } .bg-brand-primary .step, .bg-brand-primary-deep .step { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: var(--brand-on-primary); } .step .num { display: inline-block; font-family: 'Roboto Mono', monospace; font-size: 0.75rem; letter-spacing: 0.12em; padding: 0.3rem 0.55rem; border-radius: 0.4rem; background: var(--brand-accent); color: var(--brand-on-accent); font-weight: 700; margin-bottom: 0.85rem; } .step h3 { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 0.4rem; } .step p { color: var(--brand-muted); font-size: 0.9rem; line-height: 1.5; } .bg-brand-primary .step p { color: rgba(255,255,255,0.75); } /* ---------- Form ---------- */ .field { display: block; width: 100%; padding: 0.85rem 1rem; font: inherit; color: var(--brand-ink); background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 0.55rem; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease; } .field:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent); } .field-label { font-size: 0.85rem; font-weight: 500; margin-bottom: 0.35rem; display: block; color: var(--brand-ink); } .bg-brand-primary .field, .bg-brand-primary-deep .field { background: rgba(255,255,255,0.95); color: var(--brand-ink); } .bg-brand-primary .field-label, .bg-brand-primary-deep .field-label { color: var(--brand-on-primary); } textarea.field { min-height: 130px; resize: vertical; } .form-status { padding: 0.85rem 1rem; border-radius: 0.55rem; font-size: 0.9rem; margin-top: 1rem; display: none; } .form-status.show { display: block; } .form-status.success { background: rgba(46, 139, 87, 0.15); color: #0f5132; border: 1px solid rgba(46,139,87,0.3); } .form-status.error { background: rgba(180, 35, 24, 0.12); color: #842029; border: 1px solid rgba(180,35,24,0.3); } /* ---------- Testimonial ---------- */ .quote-card { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 0.85rem; padding: 2rem; position: relative; } .bg-brand-primary .quote-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); color: var(--brand-on-primary); } .quote-mark { font-family: Georgia, 'Times New Roman', serif; font-size: 4rem; line-height: 0.5; color: var(--brand-accent); position: absolute; top: 1.25rem; left: 1.25rem; opacity: 0.5; } .quote-body { font-size: 1.05rem; line-height: 1.55; margin-top: 1.25rem; font-weight: 400; } .quote-attr { margin-top: 1rem; font-size: 0.85rem; color: var(--brand-muted); font-weight: 500; } .bg-brand-primary .quote-attr { color: rgba(255,255,255,0.7); } /* ---------- Footer (inside last panel) ---------- */ .site-footer { border-top: 1px solid var(--brand-border); padding-top: 2rem; margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--brand-muted); } .bg-brand-primary .site-footer, .bg-brand-primary-deep .site-footer { border-top-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.65); } .site-footer a { color: inherit; text-decoration: none; } .site-footer a:hover { color: var(--brand-accent); } /* ---------- Footer palette chip ---------- */ .footer-chip { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 0.55rem; border-radius: 0.55rem; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18); cursor: pointer; transition: all 180ms ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .footer-chip:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); } .footer-chip.is-active { background: var(--brand-accent); border-color: var(--brand-accent); } .footer-chip.is-active .dot { border-color: rgba(0,0,0,0.18); } .footer-chip .swatch-row { display: inline-flex; gap: 3px; } .footer-chip .dot { width: 14px; height: 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.4); } .bg-brand-surface .footer-chip, .bg-brand-surface-2 .footer-chip { background: rgba(0,0,0,0.04); border-color: var(--brand-border); } .bg-brand-surface .footer-chip .dot { border-color: rgba(0,0,0,0.12); } /* ---------- FAQ details polish ---------- */ #faq-list details { padding: 1.25rem 1.5rem; } #faq-list details summary::-webkit-details-marker, #faq-list details summary::marker { display: none; } #faq-list details summary { font-size: 1rem; } #faq-list details[open] { background: rgba(255,255,255,0.85); border-color: var(--brand-primary); } #faq-list details[open] summary i { transform: rotate(45deg); } /* ---------- Glass overlay on hero magnet ---------- */ .magnet-hero { position: relative; } /* ---------- Loading transition ---------- */ .loading-fade { opacity: 0; transition: opacity 500ms ease; } .loaded .loading-fade { opacity: 1; } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .panel-dots { display: none; } .site-header { padding: 0.75rem; } .brand-mark .full { display: none; } .header-tools .label-full { display: none; } .pillar-number { font-size: clamp(120px, 32vw, 220px); } .display-xl { font-size: clamp(2.5rem, 12vw, 4rem); } /* Drop expensive backdrop-filter on mobile — use solid translucent fills */ .card, .bg-brand-primary .card, .bg-brand-primary-deep .card, .bg-brand-ink .card, .brand-mark, .header-tools, .quote-card { backdrop-filter: none; -webkit-backdrop-filter: none; } .card { background: rgba(255, 255, 255, 0.92); } .bg-brand-primary .card, .bg-brand-primary-deep .card, .bg-brand-ink .card { background: rgba(0, 0, 0, 0.28); } [data-mode="dark"] .card { background: rgba(0, 0, 0, 0.32); } /* Subtler shadows on mobile so the GPU does less compositing */ .card { box-shadow: 0 6px 16px -10px rgba(0,0,0,0.25); } } /* ---------- Print ---------- */ @media print { .snap-scroller { height: auto; overflow: visible; } .panel { min-height: 0; page-break-inside: avoid; } .site-header, .panel-dots, .next-arrow, .aura { display: none; } } @media (prefers-reduced-motion: reduce) { .snap-scroller { scroll-behavior: auto; } .next-arrow { animation: none; } .card, .btn, body { transition: none; } }