/* ============================================================ LSANY — Redesign Gamified, playful-but-premium, dark+gold ============================================================ */ /* wraps for WebP fallback. display:contents makes the wrapper transparent in layout so existing img selectors (percentages, centering, filters) keep applying as if the wrapper were not there. */ picture { display: contents; } /* Self-hosted Arabic fonts. Amiri for hero display, Montserrat Arabic elsewhere. */ @font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Amiri-Regular-Arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Amiri-Bold-Arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Montserrat Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/MontserratArabic-Regular.woff2') format('woff2'), url('fonts/MontserratArabic-Regular.woff') format('woff'); } @font-face { font-family: 'Montserrat Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/MontserratArabic-Bold.woff2') format('woff2'), url('fonts/MontserratArabic-Bold.woff') format('woff'); } /* Tajawal: clean geometric Arabic for the alphabet trace letters. Montserrat Arabic Bold draws sad/dad with a notch in the bowl corner; Tajawal renders the full, smooth letter while keeping the same bold modern look. */ @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Tajawal-Bold.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* Self-hosted Latin fonts. Each family ships as one variable woff2 per subset (latin / latin-ext); the same file backs every weight via font-weight ranges. font-display: optional avoids the swap-jitter that was hurting mobile CLS. */ @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('fonts/Unbounded-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('fonts/Unbounded-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: optional; src: url('fonts/InstrumentSans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: optional; src: url('fonts/InstrumentSans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('fonts/JetBrainsMono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: optional; src: url('fonts/JetBrainsMono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Core palette — deeper, richer, more confident than original */ --bg: #0B1917; --bg-2: #10221F; --bg-3: #163029; --surface: #1B3831; --surface-2: #214339; /* Top stop of every card-face gradient. Split out from --surface-2 so the Light theme can make card faces flat white while wells, hovers and tracks keep the faint grey they need to read as recessed (Ali, 2026-07-29). */ --card-top: #214339; --stroke: rgba(230, 184, 97, 0.14); --stroke-strong: rgba(230, 184, 97, 0.32); --cream: #FAF5E8; --cream-muted: #E8DFC8; --secondary: #B8B2A0; /* WCAG AA (4.5:1) against the LIGHTEST surface muted text ever sits on, which is --card-top, not --bg. Measured 2026-08-02 at the old #7E8981: 4.96 on --bg (fine), 3.49 on --surface, 3.00 on --card-top. Every real failure was a 9-11px label on a card, which is the worst case twice over -- smallest type on the lightest ground. #A1A9A3 is the same hue and saturation lifted in lightness only, landing at 4.53 on --card-top. Consequence worth knowing before nudging this again: at L*65 it now sits close to --secondary (#B8B2A0, L*67), so the gap between the two recessed tiers is narrow. --secondary already passes AA at 5.15, so it was left alone rather than lifted to re-open the gap -- that is a design call, not an accessibility one. */ --muted: #A1A9A3; /* Accents */ --gold: #E6B861; --gold-2: #F5D08C; --gold-deep: #B88838; --gold-glow: rgba(230, 184, 97, 0.35); /* --gold-glow is a HALO value: right for a box-shadow thrown off a gold button, wrong as a background under body copy. Four panels were using it that way -- .cn-guarantee, .cn-bizfoot, .cn-packs-note and .eb-set--hero -- and because their radial gradients are centred on an edge, the text starts roughly 25px from the hot spot and sits on close to the full 35%. Measured 2026-08-02 on the resulting ground: --secondary 3.07, --muted 2.70, gold 3.53, all under the 4.5 AA needs. 0.09 is the most gold that keeps all three of those tokens passing on --surface. It cannot be pushed further: --muted is calibrated to 4.53 on --card-top, so it has almost no headroom for a tint of any kind. Use --gold-glow for shadows, --gold-wash for anything that paints behind text. */ --gold-wash: rgba(230, 184, 97, 0.09); /* Gold used as INK rather than as a fill. On the two dark themes that is just --gold; on white it cannot be, because --gold there is #A87B2E and measures 3.79:1, under the 4.5 body copy needs. --gold-deep is 6.24 on white. This exists because eight footer brand marks and the cookie bar's links set their colour in an inline style attribute or in a stylesheet injected by cookie-consent.js, and neither can be reached by a html[data-theme="light"] selector. A token is the only mechanism that works in both places, so it is the mechanism new gold TEXT should use. The retrofit for gold text that IS reachable by a selector lives in courses/preview/design-1.css under "LIGHT THEME - gold that has to be read"; those rules do the same job by overriding the declaration instead. Do not remove one in favour of the other without re-measuring both. */ --gold-ink: var(--gold); /* THREE fill stops, THREE ink stops. --gold / --gold-2 / --gold-deep are the stops of a gold GRADIENT and are read by roughly 150 fills; --gold-ink / --gold-ink-2 / --gold-ink-deep are the same three roles used as TEXT. On the two dark themes the two sets are identical, so those themes cannot move when a fill value changes -- that is why the ink tokens are declared as var() of their fill rather than as literals. Light is the theme where the two genuinely diverge, because a gold bright enough to be a pretty button fill is nowhere near readable as text on white, and a gold dark enough to read on white makes a muddy, olive button. Trying to serve both with one value is what made light mode look the way Ali described it. Which one to reach for: painting a surface -> the fill set. Setting `color:` -> the ink set. Third case, settled 2026-08-02: a FOCUS RING takes the ink set too. WCAG 1.4.11 asks a focus indicator for 3:1 against what it is drawn on, an outline-offset ring lands on the page rather than on the control, and the fill measures 1.84 on white -- so all 67 gold focus rings across the site are on --gold-ink now. Neither dark theme moved, because ink and fill are the same value there. */ --gold-ink-2: var(--gold-2); --gold-ink-deep: var(--gold-deep); /* The un-gilded half of a .scroll-gold heading, before the scroll fills it in. Per theme, because the resting state of a gilded heading is real text that has to clear the 3:1 large-text bar on whatever it is sitting on, and one value cannot do that on both a near-black green and pure white. Dark: 5.47 on --bg, 3.85 on --surface, 3.31 on --card-top. */ --gild-off: #948D7E; /* The ink that sits ON a gold fill. Deliberately NOT re-declared per theme: every theme's gold is a light gold, so the ink stays this near-black brown. It was retyped as a literal at ~130 call sites, and one of them had drifted to #1a1206, which is why it is a token now. The trap this token exists to close, found in 18 more places 2026-08-02: writing `color: var(--bg)` on a gold-filled control. It reads as "the page colour on gold", which is true on a dark theme and inverts on a light one, where --bg is white. Every one of them -- the Reference tabs, the Pronounce tabs and filters, the Saqr Call mic, the book covers, the combo multiplier, the game start button, the mic orbs, the word-forms chips, the tour's Next button -- rendered white on gold at 1.47 to 1.84 in light mode. If a control is filled with gold, its ink is --on-gold. Never --bg. */ --on-gold: #1A0F00; /* ONE radius scale for the whole site. These lived on .page in courses.css, so any page that does not use .page (the Emirati at Work dashboard, the industry dictionary) could not reach them and re-invented its own pair, which is how the site ended up with radii from 10px to 22px. */ --r-panel: 22px; /* big panels: hero, Ramsa, upsell, featured tile */ --r-card: 16px; /* inner cards: tool tiles, node-cards, result cards */ --r-pill: 999px; /* subtle chip fill + progress-track fill — darken-on-dark here, overridden to a light ink tint on the light/sage themes so chip text stays legible */ --chip-bg: rgba(0, 0, 0, 0.16); --track-bg: rgba(0, 0, 0, 0.25); --green: #4DBF8E; --green-deep: #2E7D5C; /* The ink for anything FILLED with --green, and the one token on this list whose light value is white rather than near-black. --gold stays light on every theme, so --on-gold is near-black everywhere. --green does not: it is #4DBF8E on dark and #D4A03A on desert, both light, but #1F7A52 on light, which is dark. Ink that is correct on two themes is therefore wrong on the third, and there is no single literal that works. Found by the Wordle keyboard: .wd-key.correct was near-black on --green and measured 3.40 in light at 15px bold, which needs 4.5 (the 3:1 large-text allowance starts at 18.66px for bold). The 30px tiles above it use the same pair and pass on that allowance, which is why it only showed on the keys. `color: var(--bg)` happens to give the right answer on a green fill in all three themes today, because --green flips light-to-dark exactly when --bg flips dark-to-light. That is a coincidence of the current palette, not a rule, and it is one letter away from the gold trap described under --on-gold. Prefer this token. (.ss-word .w-mark on pronounce.html still uses --bg deliberately, because the same element also carries a coral state; the note there explains it.) */ --on-green: #0B1917; /* Green as INK on a green TINT, the sibling of --coral-ink and the last gap in that family. Without it the two auth pages wrote a literal #c8f0dd for dark and overrode light to --green-deep, and --green-deep is a FILL colour: pixel-sampled on /auth/reset 2026-08-02, the "we sent a new link" message measured 3.95 on the rendered 12% green tint, where 13.5px needs 4.5. --green (#1F7A52 on light) is no better at 4.19. #1B6845 measures 5.33 on the same pixel. Dark and desert keep the mint that already worked. */ --green-ink: #C8F0DD; --coral: #E8614A; --coral-deep: #B8442F; /* Coral as INK, the same split --gold / --gold-ink makes and for the same reason: #E8614A is a good warning FILL and is not readable as small text. Pixel-sampled on the dashboard 2026-08-02, the "UNIT TEST" status and the "Punch in" badge measured 3.26 and 3.13 against the rendered card, both under the 4.5 that 9.5px and 10px need. #F49E8B is the same hue lifted until it clears every dark ground the coral text lands on: 5.07 on the unit-test card, 4.68 on the desert version of it, 8.67 on plain --bg. Light re-declares it downward, because there the problem inverts. Untouched: .m-timer b at 26px and .game-clock b at 22px bold. Those are large text, the 3:1 bar, and the fill is the design there. */ --coral-ink: #F49E8B; /* a cool turquoise accent for variety (the Tabby installment line). Desert theme overrides this to its native coral so it stays warm on brown. */ --accent-cool: #43CDBD; /* Type */ --f-display: "Unbounded", "Outfit", system-ui, sans-serif; --f-body: "Instrument Sans", "DM Sans", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; --f-arabic: "Montserrat Arabic", "Amiri", "Noto Naskh Arabic", sans-serif; --f-arabic-hero: "Amiri", "Montserrat Arabic", "Noto Naskh Arabic", serif; /* Motion */ --ease-bounce: cubic-bezier(.34,1.56,.64,1); --ease-smooth: cubic-bezier(.22,.8,.36,1); --ease-spring-soft: cubic-bezier(.34,1.28,.64,1); /* gentle settle — restrained, never bouncy */ --ease-pop: cubic-bezier(.22,1,.36,1); /* fast-start, soft-land — the premium "everything reacts" curve (Stripe/Duolingo) */ --dur-fast: .18s; --dur-base: .42s; --dur-slow: .62s; } /* ========================================================= LIGHT THEME — clean white. Modern, neutral, a single gold accent (not gold-on-cream). Triggered by html[data-theme="light"]. ========================================================= */ html[data-theme="light"] { /* Clean white theme — BOLD neutral near-black ink (no navy/cool cast) and pure neutral SOFT shadows (subtle lift). A faint neutral off-white canvas lets pure-white surfaces pop. */ --bg: #FFFFFF; /* plain white canvas; surfaces read by their shadow and hairline (Ali, 2026-07-29) */ --bg-2: #F4F4F5; --bg-3: #ECECEE; --surface: #FFFFFF; --surface-2: #F4F4F5; /* wells, hovers, tracks — NOT card faces */ --card-top: #FFFFFF; /* card faces are flat white on the light theme */ /* The three FILL stops. These were #C99A3F / #A87B2E / #7E5A18 -- text values doing a fill's job, and the result was the olive-mud button Ali rejected on 2026-08-02: "such a dull gold with black text, it's so ugly". The old stops also failed on their own terms. Every gold gradient on the site runs --gold-2 -> --gold or --gold-2 -> --gold-deep and carries --on-gold (#1A0F00) ink, and the old light values measured 7.35 / 4.98 / 3.02 against that ink -- the bottom of every two-stop gradient was failing AA outright. The new stops measure 12.84 / 10.24 / 8.39, so near-black now clears 4.5 at EVERY point along EVERY gold gradient in this theme with enormous margin, and the buttons read as brand gold instead of olive. --gold and --gold-2 are literally the dark theme's brand golds. That is the point: gold is gold, and the reason light mode had its own duller pair was never a design decision, it was the text-contrast constraint leaking into the fill set. With the ink split out below, the constraint is gone and the fills can just be the brand. --gold-deep is the one that is NOT shared: the dark theme's #B88838 is a shading stop against near-black and reads as a dirty bottom edge on white, so this is the same hue kept bright. What this costs: a bright fill is only ~2.0:1 against the white page, so the button's own edge no longer carries itself. That is paid for below with a real light-theme shadow on .btn-primary rather than the gold halo, which is invisible on white. A filled pill with 9:1 ink inside it is not ambiguous; a 3.79 olive smear with black text was legible and ugly. Measured 2026-08-02. */ --gold: #E6B861; --gold-2: #F5D08C; --gold-deep: #D9A441; --gold-glow: rgba(230, 184, 97, 0.32); --gold-wash: rgba(230, 184, 97, 0.10); /* The three INK stops. This is the one theme where they diverge from the fill set; see the note on --gold-ink-2 in :root. --gold-ink #96650A 5.04 on white, 4.59 on --surface-2 --gold-ink-2 #8A5A00 5.93 on white, 5.39 on --surface-2 --gold-ink-deep #7E5A18 6.24 on white, 5.68 on --surface-2 --gold-ink was var(--gold-deep) (#7E5A18). It passed, but it is a 67% saturation brown and it is what Ali meant by "the word Lsany just looks dull". #96650A is fully saturated at the same lightness band: still AA on both grounds, visibly gold rather than brown. --gold-ink-2 is the real bug fix. --gold-2 is text in 110 places -- every Arabic line in the course runner, .saqr-ar on the homepage -- and at #C99A3F on a white card it measured 3.06, failing AA everywhere it appeared. Deeper is more emphatic on white, which is the correct inversion: on the dark themes --gold-2 is the BRIGHTER gold, and brighter-than-normal on white means darker-than-normal. --gold-ink-deep holds #7E5A18, the value --gold-deep used to carry, so the 11 `color: var(--gold-ink-deep)` sites do not move in any theme. It exists so --gold-deep itself was free to become a fill stop. */ --gold-ink: #96650A; --gold-ink-2: #8A5A00; --gold-ink-deep: #7E5A18; /* The dark themes' #948D7E is only 3.30 on white and 2.97 on --surface-2, which is where the gilded headings on the storefront actually land, so it missed the 3:1 bar in this theme. #6B655A is the same hue taken down instead of up: 5.78 on white, 5.26 on --surface-2. Measured 2026-08-02. */ --gild-off: #6B655A; /* supporting status colors tuned for contrast on white */ --green: #1F7A52; /* White, not the near-black the other two themes use. This is the theme where --green is a DARK fill; white on #1F7A52 measures 6.37. See the note on the :root declaration for why this token cannot be one literal. */ --on-green: #FFFFFF; /* Green as ink, deeper here rather than lighter, exactly like --coral-ink below. On the 12% green tint this theme renders at #DDE7E2, --green-deep is 3.95 and --green is 4.19; this is 5.33. */ --green-ink: #1B6845; --coral: #C8432B; /* Coral as ink, deeper here rather than lighter. The coral text on this theme lands on the coral's own 10-14% wash, not on plain white: pixel-sampled at #F6E0DC, where the fill measures 3.87 and the 10px badge needs 4.5. #B03A24 is 4.78 on that wash and 6.04 on white. */ --coral-ink: #B03A24; /* Was #138B86, under a comment claiming it was "deeper turquoise for contrast on the white theme". It was deeper than the dark theme's #43CDBD, but not deep enough: 4.15:1 on white, and its only consumer is .pv-tabby at 12.5px, which needs 4.5. #0F7A75 is 5.17 on white and 4.70 on --surface-2, the two grounds it actually lands on. Measured 2026-08-02. Nothing fills with this token -- .pv-tabby is the single use in the whole site -- so deepening it cannot darken a background anywhere. */ --accent-cool: #0F7A75; /* neutral ink tints — chips/tracks read clean on white, not gold-muddy */ --chip-bg: rgba(0, 0, 0, 0.05); --track-bg: rgba(0, 0, 0, 0.08); /* ---- bold neutral ink (no navy) + neutral hairline strokes ---- */ --cream: #18181B; --cream-muted: #3F3F46; --secondary: #52525B; /* Calibrated against --surface-2 and --bg-3, not against --bg. The dark theme already works this way ("AA against --card-top, not --bg") and light did not: #71717A is 4.83 on white but only 4.40 on --surface-2 #F4F4F5 and 4.10 on --bg-3, so every --muted label standing in a well or on a card face that is not pure white was under AA. .pk-meta on the eleven Emirati at Work cards is where it was caught, at 10px. #696972 is 5.43 / 4.94 / 4.61 on white / --surface-2 / --bg-3. Measured 2026-08-02. Safe to darken: --muted is ink everywhere in the site except two 6px typing-indicator dots (courses.css 491 and 907), which only gain from it. */ --muted: #696972; --stroke: rgba(0, 0, 0, 0.08); --stroke-strong: rgba(0, 0, 0, 0.13); /* ---- elevation tokens (Soft — subtle, neutral; the chosen strength) ---- */ --card-border: rgba(0, 0, 0, 0.07); --shadow-pill: 0 1px 2px rgba(0,0,0,0.05); --shadow-card: 0 1px 2px rgba(0,0,0,0.05), 0 6px 14px -8px rgba(0,0,0,0.09); --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.06), 0 14px 28px -12px rgba(0,0,0,0.14); --shadow-hover-lift: 0 16px 32px -14px rgba(0,0,0,0.16); } html[data-theme="light"] body { background: var(--bg); } /* ========================================================= DESERT DUNES — warm brown. A dark-family theme (dark warm bg, cream text, amber gold), ported from the app's desert-dunes palette. Inherits only :root (no light base), so it sets the full token set itself. Kept on [data-theme="default"] so the theme id stays stable across theme.js / sidebar.js. ========================================================= */ html[data-theme="default"] { --bg: #1F140A; --bg-2: #2A1B0F; --bg-3: #352314; --surface: #3F2B19; --surface-2: #4A341F; --card-top: #4A341F; --stroke: rgba(230, 184, 77, 0.14); --stroke-strong: rgba(230, 184, 77, 0.32); --cream: #F5E6CC; --cream-muted: #D4C094; /* --secondary and --muted were #B89E73 and #B19F81, landing on 4.54 and 4.52 against plain --card-top. Both were calibrated ONTO the 4.5 bar rather than past it, which meant any tint at all put them under: on the featured plan card, whose gold radial is real and deliberate, a screenshot of the rendered pixels under .pv-promise measured grounds from #41311E to #4E3C26 and the ink fell to 4.08. Desert has the least ink headroom of the three themes, so it is the one that has to be calibrated against a TINTED ground, not a flat one. On that worst rendered ground these read 4.84 and 4.73, and on plain --card-top 5.37 and 5.24. Measured 2026-08-02 from a 390px screenshot, not from a model of the gradient. */ --secondary: #C4AD86; --muted: #BCAC91; --gold: #E6B84D; --gold-2: #F0CA6E; --gold-deep: #B88838; --gold-glow: rgba(230, 184, 77, 0.40); /* 0.06, where dark gets 0.09. Desert is the theme with the least ink headroom, and this is the belt to the ink lift's braces: with the OLD ink a 0.10 wash put --muted at 4.19, --secondary at 4.20 and --accent-cool at 4.41, all under AA. The ink tokens above have since been recalibrated, which alone would carry a 0.10 wash on --surface (4.71 / 4.82) -- but only just, and it would still fail on --card-top (4.26 / 4.36). Keeping the wash at 0.06 as well means a future panel that washes a card face instead of the page surface does not quietly reopen this. Measured 2026-08-02. */ --gold-wash: rgba(230, 184, 77, 0.06); --green: #D4A03A; /* Desert reads --green as gold, so this is a light fill and takes near-black ink, the same as the dark theme. Declared rather than inherited so that all three theme blocks state it and none of them can be read as an oversight. */ --on-green: #0B1917; /* Desert's "green" tint is gold, so the ink over it stays the same mint the dark theme uses. Declared rather than inherited for the reason above. */ --green-ink: #C8F0DD; --coral: #E8614A; /* Same lifted coral the base theme uses as ink; 4.68 on this theme's version of the unit-test card. See the note in :root. */ --coral-ink: #F49E8B; /* Desert uses the native coral rather than turquoise, which reads off on warm brown. It used to be a bare var(--coral), and --coral is a FILL value: #E8614A measures 3.46 on --card-top and 3.97 on --surface, and the only thing this token inks is .pv-tabby at 12.5px, which needs 4.5. #F08A72 is the same hue lifted until it clears on both (4.76 and 5.46). --coral itself is untouched: it is correct as a fill and this was the only place using it as text. Measured 2026-08-02, same pass that deepened the light value. #F49B85 rather than the #F08A72 that first cleared --card-top: .pv-tabby also appears on the featured plan card, where the rendered ground reaches #4E3C26 and #F08A72 falls to 4.30. #F49B85 is 4.94 there and 5.48 on plain --card-top. */ --accent-cool: #F49B85; /* #948D7E is a cool grey and reads dirty on warm brown. Same lightness, warmed to the theme: 3.48 on --card-top, 3.99 on --surface and 5.40 on --bg, clearing the 3:1 these 22-27px bold headings need on all three. Measured 2026-08-02. */ --gild-off: #978B77; --chip-bg: rgba(230, 184, 77, 0.15); --track-bg: rgba(212, 160, 58, 0.18); } html[data-theme="default"] body { background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(230,184,77,0.10) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(184,136,56,0.06) 0%, transparent 60%), var(--bg); } /* Dark-only atmospheric layers — hide in light mode */ html[data-theme="light"] .hero-stars, html[data-theme="light"] .hero-aura, html[data-theme="light"] .hero-dunes { display: none; } /* Hardcoded dark surfaces — flip per theme (the base .nav is the deep-green brand glass) */ html[data-theme="light"] .nav { background: rgba(255,255,255,0.78); /* Neutral, not gold-tinted: a gold shadow on white reads as a stain. */ box-shadow: 0 20px 50px -20px rgba(0,0,0,0.16), 0 1px 0 rgba(255,255,255,0.6) inset; } /* Desert dunes: warm-brown glass, not the green nav (matches --bg #1F140A) */ html[data-theme="default"] .nav { background: rgba(31,20,10,0.78); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6), 0 1px 0 rgba(230,184,77,0.05) inset; } /* The phone nav panel is OPAQUE on all three themes. It used to carry `rgba(255,255,255,0.92)` here, copied from the .nav glass three rules up -- but .nav is a 64px strip with a backdrop-filter behind it, and this is a 432px panel with none. Eight percent of a full-height pricing card read straight through it: on /courses the words Home / Course / Kids / E-books sat on top of a legible "AED 1,999", the whole feature checklist and the six-book cover fan at once. Nothing here fails a contrast ratio -- the panel still measures clean, which is exactly why the sweep only caught it once the auditor started reporting occlusion -- it is simply unreadable as a menu. The base rule's --bg-2 -> --bg gradient is #F4F4F5 -> #FFFFFF on this theme, which is the same soft top-to-bottom lift dark and desert already get, so there is nothing to replace it with. */ /* Neutral washes. A gold film over white is the exact "gold-on-cream" muddiness this theme exists to avoid, and it was still here on every hover. */ html[data-theme="light"] .nav-link:hover, html[data-theme="light"] .nav-mute:hover, html[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,0.05); } html[data-theme="light"] .btn-ghost { background: rgba(0,0,0,0.04); } html[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.07); } /* Theme toggle stays visible at all widths — overrides the .nav-cta mobile hide rule */ @media (max-width: 820px) { .nav .theme-toggle.nav-cta { display: inline-flex; } } /* Light-mode legibility patches — readability fixes Ali flagged on first preview */ /* .btn-primary used to be in this rule taking `color: #FAF5E8`, cream on a gradient whose top stop it measured 2.35 against. It then briefly carried a light-only narrowed gradient, because with the OLD light fill stops (#C99A3F -> #A87B2E -> #7E5A18) no single ink worked end to end: near-black ran 7.41 down to 3.03, cream ran 2.35 up to 5.74. Both patches are gone because the cause is gone. The light fill stops are now 11.94 / 9.22 / 6.27 against near-black, so the BASE rule's full-range --gold-2 -> --gold-deep gradient clears AA along its whole height and the button gets its depth back instead of being flattened to keep it legible. What light still needs is an EDGE. A bright gold is only ~2.0:1 against a white page, and the base box-shadow is a gold halo -- invisible on white, it was only ever doing work on the dark themes. This replaces it with a real shadow plus a hairline of the gradient's own bottom stop, so the pill has a defined boundary without a bevel. Measured 2026-08-02. */ html[data-theme="light"] .btn-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px -12px rgba(120, 84, 20, 0.55), 0 0 0 1px rgba(120, 84, 20, 0.22) inset; } html[data-theme="light"] .btn-primary:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07), 0 18px 34px -14px rgba(120, 84, 20, 0.6), 0 0 0 1px rgba(120, 84, 20, 0.22) inset; } html[data-theme="light"] .btn-primary:active { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 14px -10px rgba(120, 84, 20, 0.5), 0 0 0 1px rgba(120, 84, 20, 0.22) inset; } /* Dead as of 2026-08-02: `.tier-cta` appears in no HTML and no JS on the site. Left in place rather than deleted with the rest of this pass, but do not build on it. `.tier-gold .tier-cta` (styles.css, near the tier block) is a different component -- a near-black button with gold text. */ html[data-theme="light"] .tier-cta { color: #FAF5E8; } /* Tracing card — the canvas pad needs a light surface, not the dark rgba(0,0,0,0.2) overlay */ html[data-theme="light"] .trace-demo .trace-letter-pad { background: linear-gradient(rgba(184,136,56,0.10) 1px, transparent 1px) 0 0 / 25% 25%, linear-gradient(90deg, rgba(184,136,56,0.10) 1px, transparent 1px) 0 0 / 25% 25%, rgba(184,136,56,0.05); } html[data-theme="light"] .trace-letter { color: rgba(140, 100, 41, 0.32); } /* Demo cards / orbit cards / tier cards — white + the active personality's card elevation */ html[data-theme="light"] .demo-card, html[data-theme="light"] .orbit-card, html[data-theme="light"] .tier { background: var(--surface); border-color: var(--card-border); box-shadow: var(--shadow-card); } /* Demo inner panels — clean WHITE surface + real shadow (grey tint was unreadable) */ html[data-theme="light"] .lesson-body, html[data-theme="light"] .chat-input, html[data-theme="light"] .pron-demo .pron-stage { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-card); } /* Flatten the gold atmospheric washes on white (homepage / storefront) — keep them for dark + brown */ html[data-theme="light"] .hero-halo { display: none; } html[data-theme="light"] .journey::before { background: none; } html[data-theme="light"] .map-bg { background-image: none; } html[data-theme="light"] .gold-section, html[data-theme="light"] .finale-card, html[data-theme="light"] .legal-page { background: var(--bg); } /* ============================================================ LIGHT THEME · storefront contrast pass (Ali, 2026-06-26) On white, grey fills (--chip-bg/--surface-2) read muddy, gold prices/ labels wash out, dark-on-gold text loses contrast on the darker light-gold (#A87B2E), and thin checks/crosses vanish. Fix: white surfaces + shadow, black prices, cream ink on gold, bold high-contrast marks. ============================================================ */ /* Pricing cards → clean white + shadow (kills the grey gradient + gold haze that made the "best for most learners" feature card text faint) */ html[data-theme="light"] .pv-card, html[data-theme="light"] .pv-card.feat { background: var(--surface); box-shadow: var(--shadow-card); } /* Prices → black, not gold (override the feat card's gold gradient text too) */ html[data-theme="light"] .pv-price .now, html[data-theme="light"] .pv-card.feat .pv-price .now { color: var(--cream); background: none; -webkit-text-fill-color: var(--cream); } /* Carousel pills + arrows → white + pill shadow + a real ring, never grey (shadow follows the active personality). The Personal/Business toggle track used to be in this list; the toggle was deleted 2026-08-02. */ html[data-theme="light"] .cn-show-tab:not(.is-on), html[data-theme="light"] .cn-show-arrow { background: var(--surface); border-color: var(--card-border); box-shadow: var(--shadow-pill); } /* This rule used to force cream #FAF5E8 onto six gold surfaces in light, under the header "dark text is unreadable on #A87B2E". That is measurably backwards. On the two golds these surfaces are actually filled with, cream measures 3.48 (#A87B2E) and 2.36 (#C99A3F); near-black --on-gold measures 5.00 and 7.41. Cream only works on --gold-deep (5.74), which none of them use. Every one of the six was under AA, three of them badly. Measured on the storefront and the homepage at 390px, 2026-08-02: .pv-ribbon 2.36, .cn-show-tab.is-on 2.36, .chat-send 3.48. The remaining three (.lesson-check-btn, .trace-check, .billing-btn.active) live inside the course app and the tracing pad, which this sweep could not reach signed out; they are given the same ink because they take the same fill from the same tokens, and leaving them cream would mean knowingly shipping the one value already disproved on their three siblings. Re-measure them in the app. .btn-primary was in this family too and is corrected separately above: its fill is a gradient wide enough that no single ink works end to end, so the gradient was narrowed instead. */ html[data-theme="light"] .lesson-check-btn, html[data-theme="light"] .chat-send, html[data-theme="light"] .trace-check, html[data-theme="light"] .cn-show-tab.is-on, html[data-theme="light"] .billing-btn.active, html[data-theme="light"] .pv-ribbon { color: var(--on-gold); } /* ---- Gilded text: a gold gradient clipped to the glyphs ---------------- A background clipped to text IS the ink, so the gradient has to clear a text contrast bar along its whole length, not just at one stop. On the two dark themes it does easily -- pixel-sampled on the homepage hero in dark, 2026-08-02: ground #1C241C to #242B20, stops measuring 10.03, 7.90 and 4.63 top to bottom. Light is the problem, and now more so than before: the fill stops there are deliberately bright (2.05 and 1.58 on white) because they have to look like gold buttons. Clipped to text on a white page they would be a pale smear. Rather than rewrite fourteen gradient declarations spread over nine files -- each with its own angle and stop structure -- this re-points the three fill tokens to the three ink values ON THE CLIPPED ELEMENT ITSELF. Every existing `linear-gradient(..., var(--gold-2), var(--gold-deep))` keeps working verbatim and simply resolves to readable ink here. Adding a new gilded heading means adding its selector to this list and nothing else. The values are LITERALS on purpose, not var(--gold-ink...). On the dark themes --gold-ink is declared as var(--gold), so writing --gold: var(--gold-ink) would be a custom-property cycle: both sides go invalid, the gradient declaration drops, and with -webkit-text-fill-color: transparent still in force the heading renders as nothing at all. Literals cannot do that. This rule is scoped to light for the same reason. Ordering matches the dark themes' lightness order, so gradients written --gold-2 -> --gold -> --gold-deep still run light-to-dark: --gold-2 #B8801A 3.42 on white --gold #A87400 4.07 --gold-deep #96650A 5.04 These are BRIGHTER than the ink tokens on purpose. Every element in the list below was measured on 2026-08-02 and is 24-58px, all of it bold: 35.2px for the section headings, 37.6px for the hero, 24px for the checkout price. That is large text, where the bar is 3:1 rather than 4.5, and the top stop clears it by 14 percent. Pinning these to the 4.5-calibrated ink values instead would be needlessly dark -- that is what made the light theme's headings read brown rather than gold. The bar is 3:1 ONLY because of those sizes. Anything added to this list has to be re-measured; a gilded heading that turns out to be 14px needs the ink tokens, not these. The compare table's "Lsany" is exactly that case: 14px bold, so it stays on --gold-ink at 5.04 and is deliberately not here. */ html[data-theme="light"] .hero-title .gold, html[data-theme="light"] .section-title .gold, html[data-theme="light"] .is-mastered .ti, html[data-theme="light"] .m-letters .ml-glyph, html[data-theme="light"] .price-now, html[data-theme="light"] .pv-card.feat .pv-price .now, html[data-theme="light"] .ach-hero h1 .gold, html[data-theme="light"] .cert-title .gold, html[data-theme="light"] .lb-hero h1 .gold, html[data-theme="light"] .wd-title, html[data-theme="light"] .sd-title, html[data-theme="light"] .wm-title, html[data-theme="light"] .ga-title { --gold-2: #B8801A; --gold: #A87400; --gold-deep: #96650A; } /* .scroll-gold is the same job done a different way: a horizontal wipe whose gilded half is a flat var(--gold-ink) rather than a vertical gradient. Same sizes (35.2px bold, measured), so the same 3:1 bar and the same brighter gold. Overriding --gold-ink here rather than globally because --gold-ink also inks 12-16px body text, which needs the 4.5 value. */ html[data-theme="light"] .scroll-gold { --gold-ink: #B8801A; } /* segmented-control inactive label → readable dark on the now-white track (its base color is hardcoded light cream, invisible on white) */ html[data-theme="light"] .billing-btn { color: var(--secondary); } /* keep the gold-tier's inverted dark badge — don't let the grey-kill whiten it */ html[data-theme="light"] .tier-gold .tier-label { background: #1A0F00; border-color: transparent; box-shadow: none; } /* "Lsany vs the usual way" — bold, full-contrast checks + crosses */ html[data-theme="light"] .cn-vs { background: var(--surface); } html[data-theme="light"] .cn-vs .vs-ic-no { color: var(--coral-ink); opacity: 1; } html[data-theme="light"] .cn-vs .vs-ic svg { stroke-width: 3.4; } /* cn-trust green-circle checkmarks → white check (was near-black, invisible on green) */ html[data-theme="light"] .cn-trust li::before { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat; } /* ============================================================ LIGHT THEME · kill ALL grey, site-wide (Ali: "grey is shit on white"; shadows = modern). Every pill / chip / row that used a grey fill (--chip-bg / --track-bg / dark translucent) → white + hairline ring + a subtle elevation, all driven by the active personality's tokens so the Elevation toggle restyles them consistently. Colored BEM variants (.hud-chip--live/--new/--rank, .pill.live/.lvl) are left untouched. 2026-06-26 ============================================================ */ html[data-theme="light"] .tier-label, html[data-theme="light"] .billing-toggle, html[data-theme="light"] .pill.soon, html[data-theme="light"] .unit-prog, html[data-theme="light"] .cf-tools span, html[data-theme="light"] .hud-chip:not(.hud-chip--live):not(.hud-chip--new):not(.hud-chip--rank), html[data-theme="light"] .combo-banner, html[data-theme="light"] .cn-book-price, html[data-theme="light"] .cn-work-chips li, html[data-theme="light"] .stat, html[data-theme="light"] .build-answer, html[data-theme="light"] .grammar-ex .row, html[data-theme="light"] .load-fail, html[data-theme="light"] .kit-fq { background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow-pill); } /* Hover lift — interactive pills gently rise for a modern, tactile feel; the pricing card keeps its loved lift but on the active personality's deeper shadow. Gated on real hover + motion-allowed. (Never the loved Library / journey-lesson hovers — those are untouched.) */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { html[data-theme="light"] .cn-show-tab:not(.is-on), html[data-theme="light"] .pill.soon, html[data-theme="light"] .hud-chip:not(.hud-chip--live):not(.hud-chip--new):not(.hud-chip--rank) { transition: transform .18s var(--ease-pop), box-shadow .18s var(--ease-pop), color .2s, border-color .16s, background .16s; } html[data-theme="light"] .cn-show-tab:not(.is-on):hover, html[data-theme="light"] .pill.soon:hover, html[data-theme="light"] .hud-chip:not(.hud-chip--live):not(.hud-chip--new):not(.hud-chip--rank):hover { transform: translateY(-1px); box-shadow: var(--shadow-card); } html[data-theme="light"] .pv-card:hover { box-shadow: var(--shadow-card-hover); } } /* Hero stat labels — bump to near-body-text color so they're truly readable, not ghosted */ html[data-theme="light"] .hero-stat-label { color: var(--cream-muted); font-weight: 600; } /* Smooth theme transition + premium press feedback baseline. transform is added to the curve so the snappy press scale eases (research: the leaders transition transform broadly on one easeOut). */ html, body, .btn, .nav, .nav-link, .theme-toggle, .nav-mute { transition: background-color .35s ease, color .25s ease, border-color .25s ease, transform .16s var(--ease-pop); } @media (prefers-reduced-motion: no-preference) { .btn:active { transform: scale(.96); } } /* Theme toggle button — mirrors .nav-mute so the icon cluster looks unified */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; min-width: 36px; height: 36px; padding: 0 9px; background: transparent; border: 1px solid var(--stroke); border-radius: 999px; color: var(--secondary); cursor: pointer; transition: color .2s, background .2s, border-color .2s; } .theme-toggle:hover { color: var(--cream); background: rgba(250,245,232,0.04); border-color: var(--stroke-strong); } /* three themes, three icons: moon = dark green, sand = desert dunes (default), sun = white/light */ .theme-toggle-moon, .theme-toggle-sun, .theme-toggle-sand { display: none; } html[data-theme="dark"] .theme-toggle-moon { display: block; } html[data-theme="default"] .theme-toggle-sand { display: block; } html[data-theme="light"] .theme-toggle-sun { display: block; } html[data-theme="light"] .theme-toggle:hover { background: rgba(156,111,38,0.10); } /* ===== Theme picker — caret affordance + popover menu (all 3 themes, labeled) ===== */ .theme-toggle-caret { opacity: .6; transition: transform .2s var(--ease-pop), opacity .2s; } .theme-toggle:hover .theme-toggle-caret { opacity: 1; } .theme-toggle[aria-expanded="true"] .theme-toggle-caret { transform: rotate(180deg); } .tp-wrap { position: relative; display: inline-flex; } .tp-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 200; min-width: 178px; padding: 6px; background: var(--surface); border: 1px solid var(--stroke-strong); border-radius: 14px; box-shadow: var(--shadow-card, 0 18px 44px -16px rgba(0,0,0,0.55), 0 2px 8px -3px rgba(0,0,0,0.4)); opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right; pointer-events: none; transition: opacity .16s var(--ease-smooth), transform .18s var(--ease-pop); } .tp-menu.is-open { opacity: 1; transform: none; pointer-events: auto; } .tp-head { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 4px 10px 7px; } .tp-opt { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--cream); font-family: var(--f-body); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s var(--ease-smooth); } .tp-opt:hover { background: var(--chip-bg); } .tp-opt:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: -2px; } .tp-sw { flex: none; width: 18px; height: 18px; border-radius: 999px; } .tp-sw--dark { background: #0B1917; box-shadow: inset 0 0 0 2px #E6B861, 0 0 0 1px var(--stroke-strong); } /* #C08B2C, the light theme's own deep fill stop, not its bright one. This ring is a UI component boundary on white, so the bar is WCAG 1.4.11's 3:1 rather than a text bar: the bright stop is 2.05 and would leave the swatch looking like a plain white circle, the deep stop is 3.01 and clears it. The other two swatches carry their theme's --gold literally because they sit on near-black and have contrast to spare. */ .tp-sw--light { background: #FFFFFF; box-shadow: inset 0 0 0 2px #C08B2C, 0 0 0 1px var(--stroke-strong); } .tp-sw--desert { background: #1F140A; box-shadow: inset 0 0 0 2px #E6B84D, 0 0 0 1px var(--stroke-strong); } .tp-name { flex: 1; text-align: left; } .tp-check { flex: none; color: var(--gold-ink); opacity: 0; transition: opacity .15s; } html[data-theme="dark"] .tp-opt[data-theme-id="dark"] .tp-check, html[data-theme="light"] .tp-opt[data-theme-id="light"] .tp-check, html[data-theme="default"] .tp-opt[data-theme-id="default"] .tp-check { opacity: 1; } html[data-theme="light"] .tp-opt:hover { background: rgba(0,0,0,0.05); } /* ===== Flip vocab cards — the "Flashcards" demo (tap/hover to reveal) ===== */ .flip-demo { padding: 20px; } .flip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .flip-card { appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; perspective: 1000px; min-height: 156px; border-radius: 16px; } .flip-card:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; } .flip-inner { position: relative; display: block; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; transition: transform .55s var(--ease-pop); } .flip-card.is-flipped .flip-inner { transform: rotateY(180deg); } @media (hover: hover) and (pointer: fine) { .flip-card:hover:not(.is-flipped) .flip-inner { transform: rotateY(180deg); } } .flip-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--stroke-strong); background: var(--surface); box-shadow: var(--shadow-card, 0 14px 30px -18px rgba(0,0,0,0.45)); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-back { transform: rotateY(180deg); background: var(--surface-2); } .flip-ar { font-family: var(--f-arabic); font-size: 36px; line-height: 1; color: var(--cream); } .flip-hint { font-family: var(--f-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .flip-tr { font-family: var(--f-body); font-weight: 700; font-size: 19px; color: var(--gold-ink); } .flip-en { font-family: var(--f-body); font-size: 13px; color: var(--cream-muted); } @media (max-width: 520px) { .flip-ar { font-size: 30px; } .flip-card { min-height: 140px; } } /* ===== Watch it written — ghost-pen draws the real Montserrat-Arabic letterform ===== */ .trace-letter-pad[data-watch-write] { position: relative; } .ww-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; } .ww-ink { fill: none; stroke: var(--gold); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px var(--gold-glow)); } /* faint guide = the EXACT same outline the pen traces, so the letter you see and the letter being written are pixel-identical (no ghosting/size drift) */ .ww-guide { fill: var(--gold); fill-opacity: 0.15; stroke: none; } .ww-pen { fill: var(--gold-2); stroke: #1A0F00; stroke-width: 4; } .ww-svg.is-done .ww-ink { fill: var(--gold); fill-opacity: 0.16; transition: fill-opacity .4s ease; } .ww-btn { font-family: var(--f-body); font-weight: 700; font-size: 13px; color: var(--gold-ink); background: transparent; border: 1px solid var(--stroke-strong); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .18s var(--ease-pop), color .18s var(--ease-pop), border-color .18s var(--ease-pop), transform .16s var(--ease-pop); } .ww-btn:hover { background: var(--gold); color: #1A0F00; border-color: var(--gold); } .ww-btn:active { transform: scale(.96); } /* Mid-page Start Journey button container — between hero stats and divider-ornate */ .hero-bridge { display: flex; justify-content: center; padding: 8px 28px 0; position: relative; z-index: 2; } /* In-flow waitlist CTA — fills empty gaps between sections so scrollers get touchpoints */ .cta-bridge { display: flex; justify-content: center; padding: 8px 28px 48px; position: relative; z-index: 2; } .cta-bridge .btn { font-weight: 700; } @media (max-width: 820px) { .cta-bridge { padding: 30px 20px 32px; } } /* Collapse the host section's bottom padding when a CTA bridge sits directly after it, so the cumulative "section pad-bottom + bridge pad-top" doesn't leave a giant dead zone. */ .journey:has(+ .cta-bridge), .gold-section:has(+ .cta-bridge) { padding-bottom: 16px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Form-control reset. Chrome's default