/* ============================================================ KAIS Homepage — Dark Sophisticated Theme ============================================================ */ /* 1. Custom Properties ------------------------------------------------------------ */ :root { --brand: #6aa8ff; --brand-2: #9b6dff; /* Solid, darker accent for white-on-accent TEXT. The --gradient-cta (brand -> brand-2) is too light for 4.5:1 white text (2.4-3.5:1); white on #7c3aed measures 5.7:1 (WCAG 2.2 AA, small text). */ --brand-accent-strong: #7c3aed; --ok: #2fd37a; --kais-green: #2fd37a; --kais-blue: #6aa8ff; --kais-purple: #9b6dff; --kais-orange: #FF9600; --kais-red: #FF4B4B; --kais-yellow: #FFC800; --bg-page: #0b1020; --bg-alt: #0e1429; --bg-card: #121939; --text-heading: #e7e9f3; --text-body: #b9bfd3; --text-muted: #7a83a0; /* Stronger muted for the SMALLEST legal/disclaimer copy: --text-muted on --bg-card is 4.56:1 (a razor-thin AA pass at <= 0.72rem); this measures 5.6:1 for comfortable margin on small text. */ --text-muted-strong: #8a93b2; --border-light: rgba(255, 255, 255, .1); --border-card: rgba(255, 255, 255, .08); --gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(155, 109, 255, .25), transparent), radial-gradient(900px 500px at -10% 10%, rgba(106, 168, 255, .25), transparent), var(--bg-page); --gradient-cta: linear-gradient(90deg, var(--brand), var(--brand-2)); --shadow-card: 0 10px 30px rgba(0, 0, 0, .35); --shadow-card-hover: 0 25px 60px rgba(31, 45, 92, .45); --shadow-btn: 0 4px 15px rgba(106, 168, 255, .3); /* ---- Design-system layer (2026-07 visual pass) ---------------- Depth, lighting and motion tokens. Everything below consumes these rather than re-declaring raw rgba(), so the whole page can be re-lit from one place. */ /* Easing. --ease-out is the "settle" curve (no overshoot) used for surfaces; --ease-spring keeps the existing playful overshoot for small elements that can afford to bounce. */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.175, .885, .32, 1.275); /* Strokes. Two weights so a card can carry a soft edge AND a brighter top-light seam without inventing new rgba values. */ --stroke-soft: rgba(255, 255, 255, .09); --stroke-strong: rgba(255, 255, 255, .16); /* The single most important trick in this pass: a 1px inner top highlight. Real materials catch light on their top edge; without it every dark card reads as a flat hole punched in the page. */ --inner-top-light: inset 0 1px 0 rgba(255, 255, 255, .11); /* Coloured elevation. Dark UIs read as premium when the shadow carries the accent hue rather than pure black. */ --glow-blue: 0 22px 60px -26px rgba(106, 168, 255, .75); --glow-purple: 0 22px 60px -26px rgba(155, 109, 255, .75); --glow-orange: 0 22px 60px -26px rgba(255, 150, 0, .55); /* Fine dot grid used as a texture wash on the hero + final CTA. Pure CSS — no image request, no data-URI, nothing to cache. */ --dot-grid: radial-gradient(circle at center, rgba(255, 255, 255, .07) 1px, transparent 1.2px); --dot-grid-size: 24px 24px; /* Diagonal specular sweep reused by buttons, the price card and the compare bars. */ --sheen: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .16) 47%, rgba(255, 255, 255, .06) 54%, transparent 68%); /* Consistent focus ring for the whole page. */ --focus-ring: 0 0 0 3px rgba(11, 16, 32, .9), 0 0 0 6px var(--brand); --radius-card: 20px; --radius-btn: 999px; --radius-pill: 999px; --card-radius: 16px; --card-radius-lg: 20px; --card-padding-y: 1.5rem; --card-padding-x: clamp(1rem, 2vw, 1.5rem); --container: 1140px; --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } /* 1b. Light palette ------------------------------------------------------------ The homepage is one of the "dark islands" theme.css section D2 names: base.html's chrome is themed, this page's palette was not, so D2 re-declares the dark values on `.kais-home` to stop a half-flip. This section is the migration D2's header calls "a deletion" — once it is here, `.kais-home` can come out of that selector list. TWO BLOCKS, ONE PAYLOAD, SPELLED TWICE. `:root[data-theme="light"]` is the explicit opt-in theme-init.js stamps; the `prefers-color-scheme` block below is `auto`, and it MUST stay scoped to `:root[data-theme="auto"]`. An unscoped `:root` there repaints this page for a light-OS visitor who explicitly chose DARK, which is a regression, not a feature (theme.css THEMING banner). The values cannot be shared through an indirection — the contrast sweep in tests/test_static/test_theme_pages_a.py resolves them to opaque hex — so KEEP THE TWO BLOCKS IN SYNC. A test does too. BOTH selectors are load-bearing. `:root[data-theme="light"]` (0,2,0) beats this file's own bare `:root` (0,1,0); `:root[data-theme="light"] .kais-home` (0,3,0) is what TIES theme.css D2 and wins on source order, because page sheets are linked from `{% block extra_head %}`, i.e. after theme.css. Drop the second selector and the whole palette below is inert. `@media` adds ZERO specificity, so the auto copy needs exactly the same treatment. Dark mode is untouched: every declaration here is ADDITIVE, and the tokens that theme literals are undefined in dark so their consumers fall back to the literal that was always there. ------------------------------------------------------------ */ :root[data-theme="light"], :root[data-theme="light"] .kais-home { color-scheme: light; accent-color: #2563eb; /* -- shared surface vocabulary ------------------------------------- The same token NAMES tailwind-main.css, theme.css, dashboard.css and note.css use for the same roles, so one block re-themes the page. */ --bg-page: #f1f5f9; --bg-primary: #f1f5f9; --bg-alt: #e8eef6; --bg-card: #ffffff; --surface: #ffffff; --hover-bg: #e2e8f0; --text-heading: #0f172a; --text-dark: #0f172a; --text-body: #334155; --text-light: #334155; --text-muted: #475569; --text-muted-strong: #47536b; --muted-text: rgba(15, 23, 42, .85); /* The white-alpha veils invert to black-alpha: a rgba(255,255,255,.1) hairline is invisible on a white card. */ --border-light: rgba(15, 23, 42, .12); --border-card: rgba(15, 23, 42, .10); --border-gray: rgba(15, 23, 42, .12); --stroke-soft: rgba(15, 23, 42, .09); --stroke-strong: rgba(15, 23, 42, .16); --accent-blue: #2563eb; --link-visited: #7c3aed; --shadow-card: 0 10px 30px rgba(15, 23, 42, .10); --shadow-card-hover: 0 25px 60px rgba(31, 45, 92, .18); --shadow-btn: 0 4px 15px rgba(29, 78, 216, .25); --inner-top-light: inset 0 1px 0 rgba(15, 23, 42, .04); --dot-grid: radial-gradient(circle at center, rgba(15, 23, 42, .07) 1px, transparent 1.2px); --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px #1d4ed8; --sheen: linear-gradient(115deg, transparent 32%, rgba(15, 23, 42, .07) 47%, rgba(15, 23, 42, .03) 54%, transparent 68%); --glow-blue: 0 22px 60px -26px rgba(29, 78, 216, .35); --glow-purple: 0 22px 60px -26px rgba(109, 40, 217, .35); --glow-orange: 0 22px 60px -26px rgba(154, 52, 18, .30); --gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(155, 109, 255, .10), transparent), radial-gradient(900px 500px at -10% 10%, rgba(106, 168, 255, .12), transparent), var(--bg-page); /* The `--kais-*` role tokens are NOT declared here. theme.css owns them (A1 dark / A2 explicit-light / A3 auto-light) and its section B is what routes this page's `.text-white`, `.text-gray-300|400` and `.bg-gray-800|900` utilities through them. This island is no longer listed in theme.css section D2, so the light values reach it by plain inheritance from `:root` and re-stating them here would only be a second copy of somebody else's value to keep in step. If this island is ever put BACK into D2 — which would mean "this page is not migrated, keep it dark" — D2's (0,3,0) beats that inheritance and the page needs its own copies again; test_theme_pages_a.py::test_island_block_covers_every_token_theme_css_re_declares fires exactly in that case. */ /* Accent INK — the six `--*-ink` tokens are declared ONCE, in theme.css sections A2/A3, and reset in D2 so a still-dark island cannot inherit light ink onto a dark surface. They are NOT re-declared here: two copies of one value have already drifted in this repo. Consumers stay `var(--accent-ink, var(--brand))`, so dark mode still falls back to the brand literal by construction. tests/test_static/test_theme_pages_a.py pins theme.css as the source, so a rename there fails a test instead of silently un-inking six pages. */ /* The brand gradient used as INK, for the `background-clip: text` sites only. --gradient-cta itself is NOT flipped: it is also the resting background of buttons and badges whose labels are white or near-black, and darkening it there breaks those pairings (theme.css section C makes the same argument for .text-white). COMPOSED from the ink tokens rather than restating their hexes, so #1d4ed8 / #6d28d9 have exactly one source (theme.css A2/A3) and this cannot drift from it. MEASURED degradation, because the rule here is not obvious: if theme.css ever stops publishing those tokens this value becomes guaranteed-invalid, the OUTER `var(--gradient-cta-ink, var(--gradient-cta))` at each call site takes ITS fallback, and the text paints with the brand gradient — the dark-mode appearance, not blank text. Verified in Chromium rather than reasoned about, because the opposite outcome (invisible headings) is the repo's worst failure class. */ --gradient-cta-ink: linear-gradient(90deg, var(--accent-ink), var(--accent-2-ink)); /* White-on-CTA. The brand gradient measures 2.6:1 under white text (home.css says so at --brand-accent-strong), which is site debt in BOTH themes — but a pale blue button on a white card is where it is most visible. Only the BUTTON reads this token; --gradient-cta itself stays put so accent stripes and badges are unaffected. Measured white-on: 6.7:1 and 7.1:1. */ --cta-surface: linear-gradient(90deg, #1d4ed8, #6d28d9); /* #school-os paints its OWN dark base under the brand radials, which no token could reach — MEASURED at 1.9:1 under the flipped body text by tests/visual/theme_contrast_check.py. This is the exact half-flip theme.css section D2 names. */ --school-os-surface: radial-gradient(65% 90% at 6% -22%, rgba(29, 78, 216, .10), transparent 58%), radial-gradient(60% 85% at 94% 122%, rgba(109, 40, 217, .10), transparent 58%), linear-gradient(180deg, #e8eef6, #f1f5f9); --hero-ink: #0f172a; --ghost-ink: rgba(15, 23, 42, .06); --ghost-ink-hover: rgba(15, 23, 42, .10); /* Gradient TEXT (background-clip: text) — BOTH stops are read as ink, so the pale second stop has to darken too. */ --highlight-green: linear-gradient(90deg, #14532d, #166534); --highlight-blue: linear-gradient(90deg, #1e40af, #1d4ed8); --highlight-purple: linear-gradient(90deg, #5b21b6, #6d28d9); --highlight-orange: linear-gradient(90deg, #78350f, #9a3412); /* -- surfaces that ship as hard literals ------------------------------ Each consumer is `var(--token, )`, so dark mode is byte-identical BY CONSTRUCTION rather than by my having retyped a value correctly. */ --card-surface: #ffffff; --section-alt-surface: #e8eef6; --hero-chip-surface: linear-gradient(180deg, rgba(29, 78, 216, .10), rgba(29, 78, 216, .04)), #ffffff; --hero-price-surface: linear-gradient(180deg, rgba(29, 78, 216, .08), rgba(109, 40, 217, .04) 60%), #ffffff; --media-surface: #e2e8f0; --track-surface: rgba(15, 23, 42, .10); --track-inset: rgba(15, 23, 42, .18); --cta-scrim: linear-gradient(180deg, rgba(241, 245, 249, .82) 0%, rgba(241, 245, 249, .94) 100%); --rule-veil: rgba(15, 23, 42, .14); --chip-veil: rgba(15, 23, 42, .05); --chip-veil-strong: rgba(15, 23, 42, .07); --panel-veil: rgba(15, 23, 42, .04); } @media (prefers-color-scheme: light) { :root[data-theme="auto"], :root[data-theme="auto"] .kais-home { color-scheme: light; accent-color: #2563eb; /* -- shared surface vocabulary ------------------------------------- The same token NAMES tailwind-main.css, theme.css, dashboard.css and note.css use for the same roles, so one block re-themes the page. */ --bg-page: #f1f5f9; --bg-primary: #f1f5f9; --bg-alt: #e8eef6; --bg-card: #ffffff; --surface: #ffffff; --hover-bg: #e2e8f0; --text-heading: #0f172a; --text-dark: #0f172a; --text-body: #334155; --text-light: #334155; --text-muted: #475569; --text-muted-strong: #47536b; --muted-text: rgba(15, 23, 42, .85); /* The white-alpha veils invert to black-alpha: a rgba(255,255,255,.1) hairline is invisible on a white card. */ --border-light: rgba(15, 23, 42, .12); --border-card: rgba(15, 23, 42, .10); --border-gray: rgba(15, 23, 42, .12); --stroke-soft: rgba(15, 23, 42, .09); --stroke-strong: rgba(15, 23, 42, .16); --accent-blue: #2563eb; --link-visited: #7c3aed; --shadow-card: 0 10px 30px rgba(15, 23, 42, .10); --shadow-card-hover: 0 25px 60px rgba(31, 45, 92, .18); --shadow-btn: 0 4px 15px rgba(29, 78, 216, .25); --inner-top-light: inset 0 1px 0 rgba(15, 23, 42, .04); --dot-grid: radial-gradient(circle at center, rgba(15, 23, 42, .07) 1px, transparent 1.2px); --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px #1d4ed8; --sheen: linear-gradient(115deg, transparent 32%, rgba(15, 23, 42, .07) 47%, rgba(15, 23, 42, .03) 54%, transparent 68%); --glow-blue: 0 22px 60px -26px rgba(29, 78, 216, .35); --glow-purple: 0 22px 60px -26px rgba(109, 40, 217, .35); --glow-orange: 0 22px 60px -26px rgba(154, 52, 18, .30); --gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(155, 109, 255, .10), transparent), radial-gradient(900px 500px at -10% 10%, rgba(106, 168, 255, .12), transparent), var(--bg-page); /* The `--kais-*` role tokens are NOT declared here. theme.css owns them (A1 dark / A2 explicit-light / A3 auto-light) and its section B is what routes this page's `.text-white`, `.text-gray-300|400` and `.bg-gray-800|900` utilities through them. This island is no longer listed in theme.css section D2, so the light values reach it by plain inheritance from `:root` and re-stating them here would only be a second copy of somebody else's value to keep in step. If this island is ever put BACK into D2 — which would mean "this page is not migrated, keep it dark" — D2's (0,3,0) beats that inheritance and the page needs its own copies again; test_theme_pages_a.py::test_island_block_covers_every_token_theme_css_re_declares fires exactly in that case. */ /* Accent INK — the six `--*-ink` tokens are declared ONCE, in theme.css sections A2/A3, and reset in D2 so a still-dark island cannot inherit light ink onto a dark surface. They are NOT re-declared here: two copies of one value have already drifted in this repo. Consumers stay `var(--accent-ink, var(--brand))`, so dark mode still falls back to the brand literal by construction. tests/test_static/test_theme_pages_a.py pins theme.css as the source, so a rename there fails a test instead of silently un-inking six pages. */ /* The brand gradient used as INK, for the `background-clip: text` sites only. --gradient-cta itself is NOT flipped: it is also the resting background of buttons and badges whose labels are white or near-black, and darkening it there breaks those pairings (theme.css section C makes the same argument for .text-white). COMPOSED from the ink tokens rather than restating their hexes, so #1d4ed8 / #6d28d9 have exactly one source (theme.css A2/A3) and this cannot drift from it. MEASURED degradation, because the rule here is not obvious: if theme.css ever stops publishing those tokens this value becomes guaranteed-invalid, the OUTER `var(--gradient-cta-ink, var(--gradient-cta))` at each call site takes ITS fallback, and the text paints with the brand gradient — the dark-mode appearance, not blank text. Verified in Chromium rather than reasoned about, because the opposite outcome (invisible headings) is the repo's worst failure class. */ --gradient-cta-ink: linear-gradient(90deg, var(--accent-ink), var(--accent-2-ink)); /* White-on-CTA. The brand gradient measures 2.6:1 under white text (home.css says so at --brand-accent-strong), which is site debt in BOTH themes — but a pale blue button on a white card is where it is most visible. Only the BUTTON reads this token; --gradient-cta itself stays put so accent stripes and badges are unaffected. Measured white-on: 6.7:1 and 7.1:1. */ --cta-surface: linear-gradient(90deg, #1d4ed8, #6d28d9); /* #school-os paints its OWN dark base under the brand radials, which no token could reach — MEASURED at 1.9:1 under the flipped body text by tests/visual/theme_contrast_check.py. This is the exact half-flip theme.css section D2 names. */ --school-os-surface: radial-gradient(65% 90% at 6% -22%, rgba(29, 78, 216, .10), transparent 58%), radial-gradient(60% 85% at 94% 122%, rgba(109, 40, 217, .10), transparent 58%), linear-gradient(180deg, #e8eef6, #f1f5f9); --hero-ink: #0f172a; --ghost-ink: rgba(15, 23, 42, .06); --ghost-ink-hover: rgba(15, 23, 42, .10); /* Gradient TEXT (background-clip: text) — BOTH stops are read as ink, so the pale second stop has to darken too. */ --highlight-green: linear-gradient(90deg, #14532d, #166534); --highlight-blue: linear-gradient(90deg, #1e40af, #1d4ed8); --highlight-purple: linear-gradient(90deg, #5b21b6, #6d28d9); --highlight-orange: linear-gradient(90deg, #78350f, #9a3412); /* -- surfaces that ship as hard literals ------------------------------ Each consumer is `var(--token, )`, so dark mode is byte-identical BY CONSTRUCTION rather than by my having retyped a value correctly. */ --card-surface: #ffffff; --section-alt-surface: #e8eef6; --hero-chip-surface: linear-gradient(180deg, rgba(29, 78, 216, .10), rgba(29, 78, 216, .04)), #ffffff; --hero-price-surface: linear-gradient(180deg, rgba(29, 78, 216, .08), rgba(109, 40, 217, .04) 60%), #ffffff; --media-surface: #e2e8f0; --track-surface: rgba(15, 23, 42, .10); --track-inset: rgba(15, 23, 42, .18); --cta-scrim: linear-gradient(180deg, rgba(241, 245, 249, .82) 0%, rgba(241, 245, 249, .94) 100%); --rule-veil: rgba(15, 23, 42, .14); --chip-veil: rgba(15, 23, 42, .05); --chip-veil-strong: rgba(15, 23, 42, .07); --panel-veil: rgba(15, 23, 42, .04); } } /* Shared card surface: use this for any KAIS card-style container. Consumers may override --card-radius-lg via a more specific rule. */ .kais-surface, .step-card, .school-os-card, .subject-card, .showcase-tile, .pricing-card-home, .faq-item, .hero-float-card { /* Two-stop glass wash + a 1px inner top light. The top light is what separates "a card" from "a lighter rectangle" on a dark page. */ /* --card-surface is declared in the LIGHT blocks only (section 1b), so an undefined property here falls back to the two-stop glass wash below and dark mode is byte-identical by construction. */ background: var(--card-surface, linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 55%), rgba(18, 25, 57, .55)); border: 1px solid var(--border-card); box-shadow: var(--shadow-card), var(--inner-top-light); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); border-radius: var(--card-radius-lg); } /* Browsers without backdrop-filter get an opaque surface instead of a washed-out translucent one. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .kais-surface, .step-card, .school-os-card, .subject-card, .showcase-tile, .pricing-card-home, .faq-item, .hero-float-card { background: var(--bg-card); } } /* 2. Scoped Homepage Overrides ------------------------------------------------------------ */ html { scroll-behavior: smooth; } .kais-home { /* Page-wide ambience: two very large, very soft accent washes that run BEHIND every section, so the page reads as one continuously lit space instead of a stack of flat slabs. Declared as background layers on
itself (not a pseudo-element) so there is no new stacking context to fight the subject-card tooltips at z-index 10. */ background: radial-gradient(1100px 700px at 92% 8%, rgba(155, 109, 255, .10), transparent 70%), radial-gradient(900px 620px at -5% 42%, rgba(106, 168, 255, .09), transparent 70%), var(--bg-page) !important; color: var(--text-body) !important; font-family: var(--font); /* Nothing on this page may cause a sideways scroll — decorative glows and oversized orbs are deliberately allowed to sit outside the layout box. */ overflow-x: clip; } .kais-home *, .kais-home *::before, .kais-home *::after { box-sizing: border-box; } /* Accessible skip link */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; background: var(--bg-card); color: var(--text-heading); padding: 0.75rem 1rem; border-radius: var(--radius-pill); border: 2px solid var(--brand); } .skip-link:focus { position: fixed; left: 50%; top: 1.25rem; transform: translateX(-50%); width: auto; height: auto; } /* 3. Layout Helpers ------------------------------------------------------------ */ .kais-container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } /* Large displays: the 1140px cap left 759px of empty margin on a 1899px screen (MEASURED), squeezing the hero text column to 434px — which is what pushed the h1 onto two lines and the subtitle onto four, and made the price card look like a footnote on a big monitor. Widen the measure in one step above the common 1536px laptop width so 13"/14"/1440p layouts are untouched. */ @media (min-width: 1600px) { :root { --container: 1320px; } } .kais-section { padding-block: clamp(4rem, 8vw, 7rem); position: relative; } .kais-section-alt { /* Semi-transparent so the page-wide ambient wash on .kais-home shows through — an opaque slab would cut the lighting into stripes. */ background: var(--section-alt-surface, rgba(14, 20, 41, .72)); } /* Hairline seams between sections. A 1px gradient line that fades out at both ends reads as a considered edge rather than a hard cut. */ .kais-section-alt::before, .kais-section-alt::after { content: ""; position: absolute; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rule-veil, rgba(255, 255, 255, .10)) 25%, var(--rule-veil, rgba(255, 255, 255, .10)) 75%, transparent); pointer-events: none; } .kais-section-alt::before { top: 0; } .kais-section-alt::after { bottom: 0; } .kais-section-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--text-heading); line-height: 1.15; /* Large display type set at default tracking looks loose; tightening it is most of what separates "big bold text" from "a headline". */ letter-spacing: -0.025em; text-wrap: balance; margin: 0; } .kais-section-subtitle { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-body); line-height: 1.6; margin: 0; max-width: 36rem; /* CSP-N05 follow-up: keep subtitle text centered without an inline ``style="text-align:center;"`` attribute. */ text-align: center; text-wrap: pretty; } /* Shared section-header rhythm ------------------------------------------------------------ Every section opened with a bare h2 + p, which gave the page no sense of arrival — each block just started. The eyebrow labels the section, the rule under the title provides a consistent optical anchor, and the fixed gap ladder makes the vertical rhythm identical from section to section. */ .section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; } .section-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); border: 1px solid var(--stroke-soft); background: var(--chip-veil, rgba(255, 255, 255, .04)); box-shadow: var(--inner-top-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-body); } /* Small accent dot so the eyebrow reads as a label, not a button. */ .section-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gradient-cta); flex: 0 0 auto; } /* Decorative gradient underline. Deliberately short and centred — it anchors the title without competing with it. */ .section-rule { display: block; width: 64px; height: 3px; border-radius: var(--radius-pill); background: var(--gradient-cta); opacity: 0.9; } .kais-section-alt .section-eyebrow { background: var(--chip-veil-strong, rgba(255, 255, 255, .05)); } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } /* Gradient-highlighted accent words */ .highlight-green { background: var(--highlight-green, linear-gradient(90deg, var(--ok), #5dffb0)); -webkit-background-clip: text; background-clip: text; color: transparent; } .highlight-blue { background: var(--highlight-blue, linear-gradient(90deg, var(--brand), #92c5ff)); -webkit-background-clip: text; background-clip: text; color: transparent; } .highlight-purple { /* Starts brighter than --brand-2: measured against the dark showcase background the raw token read noticeably dimmer than its blue and green siblings, so the three accent words looked inconsistent. */ background: var(--highlight-purple, linear-gradient(90deg, #b98cff, #dcc6ff)); -webkit-background-clip: text; background-clip: text; color: transparent; } .highlight-orange { background: var(--highlight-orange, linear-gradient(90deg, #FF9600, #FFB74D)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 4. Buttons ------------------------------------------------------------ */ .btn-kais-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--cta-surface, var(--gradient-cta)); color: #fff; border: none; border-radius: var(--radius-btn); padding: 0.9rem 2rem; font-weight: 700; font-size: 1.05rem; font-family: var(--font); cursor: pointer; text-decoration: none; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; box-shadow: var(--shadow-btn); position: relative; overflow: hidden; z-index: 1; } .btn-kais-primary::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, var(--brand-2), var(--brand)); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .btn-kais-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 34px -8px rgba(106, 168, 255, .55), var(--inner-top-light); } .btn-kais-primary:hover::before { opacity: 1; } .btn-kais-primary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } /* Specular sweep on hover. Scoped to `.hero-actions` on purpose: `animations.css` owns `.final-cta-section .btn-kais-primary::after` for the GSAP-driven shimmer, and two rules fighting over the same pseudo-element would merge into a half-applied hybrid. */ .hero-actions .btn-kais-primary::after { content: ""; position: absolute; inset: 0; background: var(--sheen); background-size: 250% 100%; background-position: 150% 0; opacity: 0; pointer-events: none; transition: background-position .75s var(--ease-out), opacity .25s ease; } .hero-actions .btn-kais-primary:hover::after, .hero-actions .btn-kais-primary:focus-visible::after { background-position: -50% 0; opacity: 1; } .btn-kais-primary.btn-large { padding: 1rem 2.5rem; font-size: 1.15rem; } .btn-kais-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: transparent; color: var(--text-heading); border: 1px solid var(--border-light); border-radius: var(--radius-btn); padding: 0.85rem 1.8rem; font-weight: 600; font-size: 1.05rem; font-family: var(--font); cursor: pointer; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .btn-kais-ghost { box-shadow: var(--inner-top-light); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .btn-kais-ghost:hover { border-color: rgba(106, 168, 255, .55); background: rgba(106, 168, 255, .10); transform: translateY(-2px); box-shadow: 0 10px 26px -12px rgba(106, 168, 255, .5), var(--inner-top-light); } .btn-kais-ghost:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } /* 5. Hero Section ------------------------------------------------------------ */ /* Hero height budget (MEASURED at 390x844 / 1280x800 / 1440x900, not computed — see the fold check under the session scratchpad). The hero must fit badge + h1 + subtitle + price block + CTA above the fold on a 1280x800 laptop, so padding, gaps and type maxima here are a budget, not free-form styling. Re-measure before growing any of them. */ .hero-section { /* Four-layer lighting rig, top-lit and cooling toward the fold: a warm purple key from top-right, a blue fill from the left, a tight highlight directly behind the headline so the type sits in its own pool of light, and a floor shadow that hands off to the next section. */ background: radial-gradient(900px 520px at 78% -12%, rgba(155, 109, 255, .30), transparent 72%), radial-gradient(760px 460px at -8% 6%, rgba(106, 168, 255, .26), transparent 72%), radial-gradient(520px 300px at 26% 24%, rgba(122, 150, 255, .14), transparent 70%), linear-gradient(180deg, transparent 55%, rgba(6, 9, 20, .55)), var(--bg-page); position: relative; overflow: hidden; isolation: isolate; padding-top: clamp(1.5rem, 3vw, 2.5rem); /* MEASURED at 1899px: hero bottom padding (80px) + wave divider (79px) + the next section's top padding (112px) stacked into a 261px empty band between the hero and "Explore N+ Subjects" — the page read as half-empty on a large monitor. The wave divider is already doing the separating work, so the hero does not need to pad against it too. */ padding-bottom: clamp(2rem, 3.5vw, 3rem); } /* The section immediately after the wave divider inherits the generic 7rem section padding, which double-counts the divider's own 79px. Pull just that one boundary in; every other section keeps the site rhythm. */ .wave-divider + .kais-section { padding-top: clamp(2rem, 4vw, 3.5rem); } /* Decorative orb shapes. Now larger, softer and slowly drifting so the hero breathes instead of sitting perfectly still. */ .hero-section::before, .hero-section::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(30px); opacity: 0.4; will-change: transform; } .hero-section::before { width: 340px; height: 340px; background: radial-gradient(circle, rgba(106, 168, 255, .38), transparent 70%); top: -120px; right: -110px; animation: orb-drift-a 19s ease-in-out infinite; } .hero-section::after { width: 280px; height: 280px; background: radial-gradient(circle, rgba(155, 109, 255, .34), transparent 70%); bottom: -90px; left: -70px; animation: orb-drift-b 23s ease-in-out infinite; } /* Transform-only drift: composited, so it costs no layout or paint. */ @keyframes orb-drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-26px, 22px, 0) scale(1.08); } } @keyframes orb-drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(24px, -20px, 0) scale(1.1); } } /* Hero FX layer ------------------------------------------------------------ Both hero pseudo-elements are already spent on the orbs, so the texture + aurora need their own element. Purely decorative: aria-hidden in the markup, `pointer-events: none` here (it spans the whole hero, including the CTA buttons — without it the primary call to action would silently stop being clickable). */ .hero-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* Fine dot texture, faded out toward the bottom so it never competes with the copy sitting on top of it. */ background-image: var(--dot-grid); background-size: var(--dot-grid-size); -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 25%, transparent 78%); mask-image: radial-gradient(120% 85% at 50% 0%, #000 25%, transparent 78%); } /* Slow aurora band sweeping across the top of the hero. */ .hero-fx::before { content: ""; position: absolute; inset-inline: -30%; top: -40%; height: 90%; pointer-events: none; background: conic-gradient(from 210deg at 50% 50%, rgba(106, 168, 255, 0) 0deg, rgba(106, 168, 255, .18) 70deg, rgba(155, 109, 255, .20) 150deg, rgba(255, 150, 0, .07) 210deg, rgba(106, 168, 255, 0) 320deg); filter: blur(60px); opacity: .55; animation: aurora-turn 34s linear infinite; } /* Horizon seam: a bright hairline where the hero meets the fold. */ .hero-fx::after { content: ""; position: absolute; inset-inline: 10%; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(155, 109, 255, .45), rgba(106, 168, 255, .45), transparent); opacity: .7; } @keyframes aurora-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hero-grid { display: grid; grid-template-columns: 1fr; /* Row and column gaps are declared SEPARATELY, and the breakpoints below tune only the COLUMN gap. The grid now carries a full-width `.hero-head` row, and the column gap that separates the copy from the photo (3.5-4rem) is far too much air under a headline — the badge/h1/subtitle used to be one flex stack with a 1rem gap. A `gap:` shorthand in either breakpoint would silently reset the row gap and put that 4rem back. */ column-gap: 3rem; row-gap: 2rem; align-items: center; position: relative; z-index: 1; } /* The headline row spans every column — this is what puts each hero line on ONE row instead of two. MEASURED: 434-511px inside `.hero-text` vs ~1076px here, against a 669px requirement. */ .hero-head { grid-column: 1 / -1; } /* The badge carries a `text-center` utility in the template. Inside the old narrow text column that centred it more or less over the headline; across the full-width head row it centres over ~1076px and floats away from the left-aligned h1. Anchor it to the same edge as the headline it introduces. */ .hero-head #site-hero-badge { text-align: left; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr 1fr; column-gap: 4rem; } } @media (min-width: 1024px) { .hero-grid { /* Was 1fr / 2fr — a ~356px text column at 1280px, which forced the h1 onto three lines and the subtitle onto three. Rebalanced so the copy that now carries the price gets room to breathe; the photo is still the larger half. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: 3.5rem; } } .hero-text { display: flex; flex-direction: column; gap: 1rem; } .hero-badge { display: inline-flex; align-items: center; gap: 0.45rem; /* Tinted glass + a top-light seam so the badge reads as a raised chip rather than a flat colour swatch. The rgba(11,16,32,.6) BASE is a contrast fix, not styling. Without it the tint is fully translucent, so the chip's background is whatever the hero happens to paint behind it — and the hero's blue key light is strongest exactly where the badge sits. MEASURED, the #a9cdff label came out at 4.48:1 (320px) and 4.56:1 (390px) against a 4.5:1 requirement, i.e. at or under the line on the two smallest phones. With its own base the chip carries its own contrast: 6.8:1 at 320px, 6.7:1 at 390px, 7.7:1 at 1440px, and it no longer moves when the lighting behind it does. */ background: var(--hero-chip-surface, linear-gradient(180deg, rgba(106, 168, 255, .20), rgba(106, 168, 255, .09)), rgba(11, 16, 32, .6)); border: 1px solid rgba(106, 168, 255, .30); box-shadow: var(--inner-top-light), 0 6px 20px -12px rgba(106, 168, 255, .8); color: var(--accent-ink, #a9cdff); padding: 0.4rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.25; text-transform: uppercase; width: fit-content; } .hero-badge .fas { color: var(--accent-ink, var(--brand)); /* Tiny glow on the cap icon — the one spot of "spark" at the very top of the page. */ filter: drop-shadow(0 0 6px rgba(106, 168, 255, .8)); } /* ────────────────────────────────────────────── Hero Badge — Cinematic animated pill ────────────────────────────────────────────── */ .hero-badge-animated { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1.2rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink, #a9cdff); width: fit-content; /* Tinted glass base */ background: var(--hero-chip-surface, linear-gradient(180deg, rgba(106, 168, 255, .20), rgba(106, 168, 255, .09)), rgba(11, 16, 32, .65)); border: 1px solid rgba(106, 168, 255, .35); /* Pulsing glow shadow */ box-shadow: var(--inner-top-light), 0 0 20px -4px rgba(106, 168, 255, .4), 0 0 60px -12px rgba(106, 168, 255, .2); /* Entrance: slide up + fade in */ opacity: 0; transform: translateY(12px) scale(0.97); animation: hero-badge-enter 0.8s cubic-bezier(.22,1,.36,1) 0.2s forwards, hero-badge-glow 4s ease-in-out 2s infinite; /* Shimmer overlay that sweeps across the badge border */ position: relative; overflow: hidden; } .hero-badge-animated::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 105deg, transparent 30%, rgba(106, 168, 255, .25) 48%, rgba(106, 168, 255, .35) 50%, rgba(106, 168, 255, .25) 52%, transparent 70% ); background-size: 250% 100%; background-position: 150% center; animation: badge-shimmer 5s ease-in-out 3s infinite; pointer-events: none; } /* Staggered letter reveal for the badge text */ .hero-badge-animated { animation: hero-badge-enter 0.8s cubic-bezier(.22,1,.36,1) 0.2s forwards, hero-badge-glow 4s ease-in-out 2s infinite; } @keyframes hero-badge-enter { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes hero-badge-glow { 0%, 100% { box-shadow: var(--inner-top-light), 0 0 20px -4px rgba(106, 168, 255, .4), 0 0 60px -12px rgba(106, 168, 255, .2); border-color: rgba(106, 168, 255, .35); } 50% { box-shadow: var(--inner-top-light), 0 0 28px -2px rgba(106, 168, 255, .6), 0 0 90px -8px rgba(106, 168, 255, .35); border-color: rgba(106, 168, 255, .6); } } @keyframes badge-shimmer { 0% { background-position: 150% center; } 40%, 100% { background-position: -50% center; } } /* ────────────────────────────────────────────── Hero Heading — Two-line staggered reveal ────────────────────────────────────────────── */ .hero-heading { /* Max capped at 3rem: the hero must leave room for the price block above a 1280x800 fold. MEASURED — 3.5rem put the heading on three rows and pushed the price to bottom=825 against an 800px fold. NOTE this cap does NOT control how many ROWS each line wraps to: at 1280-1920 the first line needs ~713px on one row against a 434-511px text column, and 3rem only brings that to ~668px. The wrap is a COLUMN-WIDTH property, not a font-size one. Pinned by test_home_hero_pricing.py:: test_hero_heading_max_size_stays_within_the_height_budget. */ font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--text-heading); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; margin: 0; } /* Each hero line enters independently */ .hero-line { display: block; opacity: 0; transform: translateY(18px); } /* NO `background-clip: text` ON THIS HEADING. It is the one construct that provably breaks here, and this is the LCP element. `home.js:splitWords()` re-wraps every word of the

in a `display: inline-block` span for the GSAP cascade, and GSAP leaves a real `transform: translate(0px, 0px)` + `will-change` on each one. Blink mispaints a text clip in that situation — BOTH placements were tried against the reporter's Chrome and BOTH failed: on the LINE the clip cannot reach its atomic inline-block words (headless Chromium painted the whole heading blank; their Chrome collapsed each line's wrapped rows into overlapping smears), and repainted on each `.gsap-word` the clip sits on the transformed element itself and smeared again. Firefox renders both correctly, so neither failure shows up locally and neither was reproducible here. Solid colours have ONE code path, cannot mis-clip in any engine, and at heading size read near-identically to the gradient. The shimmer went with it — it animated `background-position`, which needs the clip. If gradient text is ever wanted back, remove the word-splitting from this heading first; the two cannot coexist. Pinned by test_home_gsap_invisible_regression.py:: test_nothing_in_the_split_hero_heading_paints_via_a_text_clip. */ .hero-line--primary { color: var(--hero-ink, #ffffff); animation: hero-line-enter 0.9s cubic-bezier(.22,1,.36,1) 0.5s forwards; } .hero-line--secondary { font-style: italic; color: var(--accent-ink, #7db4ff); animation: hero-line-enter 0.9s cubic-bezier(.22,1,.36,1) 0.8s forwards; /* Soft blue glow behind the italic line. A `filter` is safe here — unlike a text clip it does not depend on where the glyphs live. */ filter: drop-shadow(0 0 18px rgba(106, 168, 255, .45)) drop-shadow(0 2px 8px rgba(106, 168, 255, .3)); } /* THE HERO LINES ARE SPLIT WORD-BY-WORD AT RUNTIME — and a gradient clip does not survive that on its own. `home.js:splitWords()` re-wraps every word of the `

` in a `display: inline-block` span so GSAP can cascade them in. An atomic inline-block descendant is NOT part of its parent's text clip, so the rules above are left clipping nothing: MEASURED in headless Chromium the heading painted zero glyphs, and in the reporter's Chrome the two wrapped rows of each line collapsed into overlapping smears. Firefox paints it correctly, so this ships looking fine locally. `animations.css` documents (and fixes) the identical hazard for `.highlight-orange`; the hero lines gained their gradient later and never got the companion rule. The parent rules stay exactly as they are — they are what paints when nothing splits the heading (reduced motion, GSAP blocked, JS off). Pinned by test_home_gsap_invisible_regression.py. */ /* ...and the parent must STOP painting, or the heading renders twice. Chrome does pull descendant text into the parent's clip mask — it just computes the offset wrong for an atomic inline-block, collapsing every wrapped row onto the first. With the companion rule below in place but this one absent, the hero showed FOUR rows: the correct per-word paint plus the parent's collapsed smear underneath. `background-image: none` leaves nothing to clip and nothing to paint, in any engine. Scoped with `:has()` so the parent keeps its own gradient whenever nothing splits it (reduced motion, GSAP blocked, JS off) — that is the fallback the rules above exist for. SPECIFICITY: `:has()` takes the specificity of its most specific argument, so `.hero-line:has(.gsap-word)` is (0,2,0) and beats `.hero-line--primary` (0,1,0) regardless of source order. Pre-`:has()` engines (Firefox < 121) keep both paints, but Firefox positions the parent paint CORRECTLY, so the two coincide and the degradation is invisible. */ .hero-line:has(.gsap-word) { /* GSAP owns the entrance now — stop the CSS keyframe from fighting it. Without opacity: 1 the line starts at base opacity: 0 and stays invisible until hero-line-enter fires 0.5s later, which compounds with every child's transform and produces overlapping smears on Chromium. transform is equally important: base state has translateY(18px) that never reaches the keyframe to-state when animation is suppressed. Pinned by test_home_hero_line_stops_css_when_gsap_ready.py.*/ opacity: 1; transform: none; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; animation: none; } /* The split words inherit their line's `color` and paint themselves. No background, no clip, nothing that cares about being transformed — which is the entire point. Kept as an explicit rule so the intent survives: this is where a text clip would be re-introduced, and it must not be. */ .hero-line .gsap-word { color: inherit; } @keyframes hero-line-enter { to { opacity: 1; transform: translateY(0); } } @keyframes hero-text-shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* The price word (".highlight-orange") is the single most important glyph run on the page — give it its own light source. `drop-shadow` (not text-shadow) because the word is painted with background-clip: text, where text-shadow would draw behind the transparent fill and show as a grey smear. */ .hero-heading .highlight-orange { filter: drop-shadow(0 4px 18px rgba(255, 150, 0, .38)); } .hero-subtitle { font-size: clamp(1rem, 1.6vw, 1.1rem); color: var(--text-body); line-height: 1.6; margin: 0; max-width: 34rem; text-wrap: pretty; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } /* Above-the-fold price block ------------------------------------------------------------ Answers "what does it cost?" without a scroll. Sits between the subtitle and the CTA row so the number lands before the buttons on a phone, where the hero stacks vertically. Height budget matters here — every pixel this block adds pushes the CTA row toward the fold. Kept to one tile row + one claim line, with the tile grid PINNED to 3 columns (never wrap) and the type scaled down below 640px. */ .hero-price { position: relative; isolation: isolate; overflow: hidden; margin-top: 0.25rem; padding: 0.9rem 1rem; border: 1px solid rgba(106, 168, 255, .30); border-radius: var(--card-radius); /* Lit glass: a cool wash over a dark base, a 1px top light, and a coloured drop shadow. This is the "premium" surface on the page — everything else is deliberately quieter than it. */ background: var(--hero-price-surface, linear-gradient(180deg, rgba(106, 168, 255, .16), rgba(155, 109, 255, .07) 60%), rgba(11, 16, 32, .5)); box-shadow: var(--inner-top-light), 0 18px 44px -24px rgba(106, 168, 255, .85); -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); max-width: 32rem; } /* One slow specular pass across the card, on a long loop. Enough to catch the eye on arrival; not enough to be a distraction while someone is reading the price. `pointer-events: none` is mandatory — this layer covers the "See the full comparison" link. */ .hero-price::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--sheen); background-size: 220% 100%; /* MANDATORY, and the whole reason this comment is long. `background-repeat` defaults to `repeat`. At `background-size: 220%` the sheen therefore TILES every 220% of the card width, so the "parked" position below never actually removed the highlight — the neighbouring tile wrapped a specular band straight back over the RIGHT THIRD of the card. MEASURED, `.hero-price-caption` on the third tile: repeat (as shipped) 3.61:1 p2 / 4.25:1 median @1440x900 3.56:1 p2 / 4.20:1 median @390x844 no-repeat 5.38:1 p2 / 5.54:1 median @1440x900 against a 4.5:1 requirement. And it was PERMANENT for reduced-motion users, because the reduce block sets `animation: none` and pins the element at exactly this rest position. */ background-repeat: no-repeat; /* Base position parks the highlight OFF the card — genuinely off, now that the tile cannot wrap. Load-bearing for reduced motion: with `animation: none` the element falls back to this declared position, and the default `0% 0` would leave a permanent white smear across the price. With no-repeat, 190% puts the image's right edge at -8% of the card, and the animated sweep to -60% still carries the band across exactly once. */ background-position: 190% 0; /* Dimmed. At full strength the band is rgba(255,255,255,.16) sweeping the FULL WIDTH of the card, and MEASURED across its whole animated range it dragged every caption to 2.8-3.7:1 once every 9 seconds, at every viewport — text that meets 1.4.3 only part of the time does not meet it. Masking the band to the top of the card was tried and rejected: at 320px the card is compact enough that any mask soft enough to still read as a glint still reached the caption row (best variant left cap1 at 3.80:1). Dimming plus the caption's own colour bump clears 4.5:1 at every position and viewport while keeping the pass visible. */ opacity: .6; animation: price-sheen 9s ease-in-out infinite; } @keyframes price-sheen { 0%, 62%, 100% { background-position: 190% 0; } 86% { background-position: -60% 0; } } .hero-price-tiles { /* Explicit 3-column grid, NOT flex-wrap: three tiles dropping to a second row on a narrow phone would push the CTA row below the fold — the exact regression this block exists to prevent. */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } .hero-price-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding-inline: 0.6rem; /* Logical property so the divider flips correctly under RTL. */ border-inline-start: 1px solid var(--border-light); } .hero-price-tile:first-child { padding-inline-start: 0; border-inline-start: 0; } /* The lead tile ($10/month) is the offer — everything else on the card is supporting evidence. A soft accent wash behind it does the ranking without adding a badge (which would cost vertical budget the above-the-fold contract cannot spare). */ .hero-price-tile--lead { border-radius: 12px; margin-inline-start: -0.35rem; padding-inline-start: 0.35rem; background: linear-gradient(180deg, rgba(106, 168, 255, .14), transparent 85%); } .hero-price-amount { font-size: clamp(1.35rem, 3.4vw, 1.85rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-heading); } .hero-price-tile--lead .hero-price-amount { background: var(--gradient-cta-ink, var(--gradient-cta)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 14px rgba(106, 168, 255, .45)); } .hero-price-unit { font-size: 0.78rem; font-weight: 600; color: var(--text-body); } .hero-price-caption { font-size: 0.7rem; line-height: 1.35; /* --text-body, not --text-muted-strong. This is the smallest copy on the page (0.7rem, shrinking to 0.6rem at <=359px) AND it sits on the one surface with a specular sweep passing over it, so the muted token had no headroom left: MEASURED across the sheen's full animated range it bottomed out at 2.81:1 (320px), 3.03:1 (390px), 4.02:1 (1440px) against a 4.5:1 requirement. Paired with the sheen dim on `.hero-price::after`, the same pixels now measure 5.7:1+ at every viewport and every sheen position. Hierarchy is carried by size and weight (0.7rem/400 against the unit's 0.78rem/600), which is enough at this scale — colour was not. */ color: var(--text-body); } .hero-price-claim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--border-light); font-size: 0.8rem; line-height: 1.45; color: var(--text-body); } .hero-price-claim strong { color: var(--text-heading); font-weight: 700; } .hero-price-claim .fa-circle-check { color: var(--ok-ink, var(--ok)); filter: drop-shadow(0 0 6px rgba(47, 211, 122, .55)); } .hero-price-link { position: relative; color: var(--accent-ink, var(--brand)); font-weight: 700; text-decoration: none; white-space: nowrap; } /* Target size (WCAG 2.2 SC 2.5.8, 24x24 minimum). MEASURED 181.4 x 18.1 CSS px at 390x844 — 6px short. The hero's above-the-fold budget forbids growing the element: padding here pushes `.hero-actions` toward the fold, which is the exact regression the price block exists to prevent. So the POINTER TARGET is expanded by an absolutely-positioned pseudo-element and the LAYOUT does not move by a pixel. `.hero-price::after` sits above this at z-index 2 but carries `pointer-events: none`, so it cannot steal the tap. */ .hero-price-link::before { content: ""; position: absolute; inset: -5px -4px; border-radius: 6px; } .hero-price-link:hover, .hero-price-link:focus-visible { text-decoration: underline; } .hero-price-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* Social proof strip */ .hero-proof { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-light); } .proof-item { display: flex; align-items: baseline; gap: 0.4rem; } .proof-number { font-size: 1.4rem; font-weight: 800; background: var(--gradient-cta-ink, var(--gradient-cta)); -webkit-background-clip: text; background-clip: text; color: transparent; } .proof-label { font-size: 0.85rem; color: var(--text-body); font-weight: 500; } /* Hero visual (decorative right side) */ .hero-visual { display: block; position: relative; /* On mobile let the photo's intrinsic 16:9 aspect drive height; cap width so the photo doesn't stretch full-bleed on phones. */ max-width: 540px; margin-left: auto; margin-right: auto; } @media (min-width: 900px) { .hero-visual { max-width: none; margin-left: 0; margin-right: 0; min-height: 320px; } } /* Floating subject cards decoration */ .hero-card-stack { position: relative; width: 100%; height: 100%; } @media (min-width: 900px) { .hero-card-stack { min-height: 320px; } } .hero-float-card { position: absolute; border-radius: var(--card-radius); padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.95rem; color: var(--text-heading); text-decoration: none; /* Heavier glass than the shared surface: these float over a bright photograph and need to hold their own edge. Contrast checked and left ALONE. The shared `.kais-surface` wash is only rgba(18,25,57,.55) over the hero photo, which looks like it should strand the label — but MEASURED over the actual glyph runs, all four cards sit between 8.6:1 and 12.6:1 at every viewport where they render (660 / 768 / 900 / 1024 / 1280 / 2560; they are display:none below 640). The bright pixels inside these cards belong to `.hero-float-icon`, which is painted the per-subject colour and carries no text. */ border-color: var(--stroke-strong); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9), var(--inner-top-light); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); transition: transform .35s var(--ease-spring), box-shadow .3s ease, border-color .3s ease; animation: float-card 6s ease-in-out infinite; } .hero-float-card:hover, .hero-float-card:focus-visible { border-color: rgba(106, 168, 255, .5); box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .9), var(--glow-blue), var(--inner-top-light); } .hero-float-card:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; } .hero-float-card:nth-child(2) { top: 35%; right: 5%; animation-delay: -1.5s; } .hero-float-card:nth-child(3) { bottom: 20%; left: 15%; animation-delay: -3s; } .hero-float-card:nth-child(4) { bottom: 5%; right: 10%; animation-delay: -4.5s; } .hero-float-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1; flex-shrink: 0; /* Gloss + rim light on the coloured tile. The per-subject colour is set as `background` by the nonced