/* ========================================================================== Theme: Aurora — deep-blue, gradient-forward. Dark by default, light variant. Ported from the approved "aurora" mockup. Same variable contract as the other themes (--bg/--surface/--ink/--muted/--line/--accent/--accent-ink), plus gradient tokens the components below consume. All text pairs are WCAG AA (ratios computed in the design spec). ========================================================================== */ :root { /* dark = default */ --bg: #0a0e1f; --surface: #141a38; --surface-2: #1a2145; --ink: #e9eefc; --muted: #9aa6c8; --line: #242c4e; --accent: #7b9cff; --accent-ink: #0a0e1f; --radius: 14px; --cta-radius: 999px; --cta-tracking: 0.04em; --cta-case: uppercase; --font-display: "Helvetica Neue", ui-sans-serif, Helvetica, Arial, sans-serif; --font-body: ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-label: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --logo-case: none; --logo-tracking: -0.01em; --logo-size: 0.92rem; --logo-weight: 700; --nav-case: uppercase; --nav-tracking: 0.02em; --nav-size: 0.76rem; --nav-weight: 500; --headline-weight: 800; --headline-lh: 1.05; --headline-tracking: -0.03em; /* gradient tokens (dark) */ --page-nebula: radial-gradient(120% 60% at 50% -6%, rgba(150,170,255,0.20), transparent 55%), radial-gradient(80% 44% at 50% -10%, rgba(206,192,255,0.16), transparent 60%), radial-gradient(52% 30% at 50% -12%, rgba(255,222,205,0.11), transparent 62%); --hero-glow: radial-gradient(90% 70% at 50% 4%, rgba(123,156,255,0.18), transparent 60%); --card-glow: 0 0 0 1px var(--line), 0 24px 60px -34px rgba(80,110,255,0.55); --grad-line: linear-gradient(90deg, var(--accent), transparent 80%); --grad-border: linear-gradient(140deg, var(--accent), #c9b8ff 55%, #ffd8c2); --stars: 1; } /* Aurora is DARK by default (the owner's requirement): the deep-blue nebula shows regardless of the visitor's system preference. Light is opt-in only, via the header toggle, which stamps data-color-mode="light" on . */ html[data-color-mode="light"] { --bg: #f6f8ff; --surface: #ffffff; --surface-2: #eef1ff; --ink: #0d1330; --muted: #4c5678; --line: #dce3f5; --accent: #2f45d6; --accent-ink: #ffffff; --page-nebula: radial-gradient(120% 60% at 50% -6%, rgba(120,150,255,0.16), transparent 55%), radial-gradient(80% 44% at 50% -10%, rgba(178,158,255,0.12), transparent 60%), radial-gradient(52% 30% at 50% -12%, rgba(255,206,180,0.10), transparent 62%); --hero-glow: radial-gradient(90% 70% at 50% 4%, rgba(90,120,235,0.10), transparent 60%); --card-glow: 0 0 0 1px var(--line), 0 20px 44px -30px rgba(60,90,220,0.30); --grad-border: linear-gradient(140deg, var(--accent), #6a49d8 55%, #c2582f); --stars: 0; } html[data-color-mode="dark"] { --bg: #0a0e1f; --surface: #141a38; --surface-2: #1a2145; --ink: #e9eefc; --muted: #9aa6c8; --line: #242c4e; --accent: #7b9cff; --accent-ink: #0a0e1f; --page-nebula: radial-gradient(120% 60% at 50% -6%, rgba(150,170,255,0.20), transparent 55%), radial-gradient(80% 44% at 50% -10%, rgba(206,192,255,0.16), transparent 60%), radial-gradient(52% 30% at 50% -12%, rgba(255,222,205,0.11), transparent 62%); --hero-glow: radial-gradient(90% 70% at 50% 4%, rgba(123,156,255,0.18), transparent 60%); --card-glow: 0 0 0 1px var(--line), 0 24px 60px -34px rgba(80,110,255,0.55); --grad-border: linear-gradient(140deg, var(--accent), #c9b8ff 55%, #ffd8c2); --stars: 1; } /* ---------- Immersive page nebula (whole site sits on the gradient) ------- */ body { background-color: var(--bg); background-image: var(--page-nebula); background-repeat: no-repeat; background-attachment: fixed; } /* logo accent ending */ .site-logo .logo-ia { color: var(--accent); } /* ---------- Hero ---------- */ .home .hero { position: relative; border-bottom: none; background: var(--hero-glow); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem); overflow: hidden; } /* CSS-only starfield, dark mode only (opacity token flips to 0 in light) */ .home .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--stars); background-image: radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,0.40), transparent), radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,0.35), transparent), radial-gradient(1px 1px at 62% 52%, rgba(255,255,255,0.30), transparent), radial-gradient(1.5px 1.5px at 88% 74%, rgba(255,255,255,0.30), transparent), radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,0.26), transparent), radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.20), transparent); } .home .hero > * { position: relative; z-index: 1; } /* Eyebrow rendered as a glowing pill */ .page p.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: 0.4rem 0.9rem; margin: 0 0 1.4rem; } .page p.hero-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px var(--accent); } .home .hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; } .home .hero > h1 + p { font-size: clamp(1rem, 1.5vw, 1.18rem); max-width: 50ch; color: var(--muted); } /* ---------- Primary CTA button: rounded pill with accent glow ---------- */ .page p > strong:first-child > a:only-child { box-shadow: 0 10px 30px -12px var(--accent); } .page p > strong:first-child > a:only-child:hover { opacity: 0.9; } /* ---------- Section headings become accent kickers ---------- */ .home section > h2 { font-family: var(--font-label); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin: 0 0 clamp(1.2rem, 2.5vw, 1.75rem); } /* ---------- Three-problems cards ---------- */ .home .problems-grid .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; position: relative; overflow: hidden; } .home .problems-grid { counter-reset: problem; } .home .problems-grid .card { counter-increment: problem; } .home .problems-grid .card::before { content: counter(problem, decimal-leading-zero); position: absolute; top: -0.35rem; right: 0.4rem; font-family: var(--font-display); font-weight: 800; font-size: 4rem; line-height: 1; color: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; } .home .problems-grid .card > * { position: relative; } /* ---------- Numbered step cards: glowing chip + gradient hairline ---------- */ .step-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; } .step-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-line); } .step-num { color: var(--accent); } .step-arrow { color: var(--accent); } /* ---------- Workflow graphic ---------- */ .wf-node { background: var(--surface); border-color: var(--line); } .wf-node--accent { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-border) border-box; box-shadow: var(--card-glow); } .wf-num, .wf-loop { color: var(--accent); } .wf-node::after { color: var(--accent); } /* ---------- Home claim + CTA bands ---------- */ .home .claim-band { border-block: 1px solid var(--line); padding-block: clamp(1.6rem, 3.5vw, 2.5rem); } .home .claim-band > p { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; max-width: 38ch; color: var(--ink); margin: 0; } .home .cta-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-glow); padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 2.5rem); margin-top: clamp(2.25rem, 5.5vw, 4rem); overflow: hidden; position: relative; } .home .cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--hero-glow); } .home .cta-band > * { position: relative; z-index: 1; } .home .cta-band h2 { font-family: var(--font-display); color: var(--ink); font-size: clamp(1.5rem, 2.7vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; text-transform: none; margin: 0 0 1rem; } .home .cta-band p { color: var(--muted); } /* ---------- Pricing page: tier headings + prominent prices ---------- */ .page.pricing h2 { border-top: 2px solid transparent; border-image: var(--grad-line) 1; padding-top: 1.1rem; margin-top: clamp(2rem, 4vw, 3rem); color: var(--ink); } /* the bold price / CTA lines already render via the shared button + strong rules */ /* ---------- Cards on inner pages (faq embed, etc.) keep the surface look --- */ .faq-embed { border-top-color: var(--line); }