/* ============================================================ GENERATED FILE — DO NOT EDIT. Copied verbatim from src/styles/redesign.css by scripts/copy-design-tokens.js, which runs on prestart, prebuild and prebuild:ci. Edit the source, not this file; anything you change here is overwritten by the next build. Consumed by the static pages in public/ (knowledge/, guides/, how-it-works.html), which put class="evrd" on and so pick up the same tokens, nav, buttons, cards and footer as the React app. ============================================================ */ /* ============================================================ Veracue — redesign tokens & primitives Ported from Claude Design's styles.css, scoped under .evrd so it doesn't clobber the existing App.css tokens used by PracticePage / CalibratePage / SettingsPage / AuthPage. Usage: wrap any redesigned page's root in which adds the .evrd class. Anything outside .evrd uses old App.css. ============================================================ */ .evrd { /* ── Channel triplets ── The single source of truth for the accent and neutral ramps. Every tint, hairline and glow below is an alpha of one of these, and the solid --gold / --text are rgb() of them, so the whole ramp moves from one edit instead of ~70 hand-kept copies of the same digits. Bare triplets (not colours) because rgba() needs the components separately; that is also why they can't be written as hex. */ --gold-rgb: 233, 185, 73; /* #e9b949 — canonical brand gold (decided 25 Aug 2026 after rendering both; #E8C468 retired) */ --text-rgb: 245, 241, 232; /* #F5F1E8 — the card cream. Page-level writing is the same value the cards are made of, so the page reads as one material with the paper it carries. The old warm grey #D3CCBD is retired: it was a fourth colour. */ /* ============================================================ THE PALETTE IS THREE COLOURS. There is no fourth. green #162F24 -- the page, the icon chips, and ALL text on cream cream #F5F1E8 -- card surfaces only gold #e9b949 -- one shade, only on green, or as a button fill carrying green text The rule that does the most work: gold measures 1.62:1 on cream, so it can never be text or a line on a card. Anything that wants to be an accent on paper is the green at full weight instead -- emphasis survives through weight, not hue. Anything gold on a card is a green-filled shape with the gold inside it. Retired here, deliberately, so they cannot drift back: bronze #836320 and #5C4516, rust #B23F33, and the darker inset #12291F. If you find yourself reaching for a fourth value, the answer is weight or a green fill, not a new hex. ============================================================ */ /* Ground B (#0C1A14 x1.8, hue and saturation held exactly). The elevated pair sit at the same L* deltas above it that they always did -- +7.7 and +11.9 -- so the ramp order never inverts. */ --bg: #162F24; --bg-elev: #1F4232; --bg-elev-2: #244C3A; /* Cards are paper, not green. Every green card fill this system has had separated from --bg by at most 1.29:1, and three rounds of lifting it never answered the real complaint: green-on-green is the wrong axis. Cream is 15.88:1 against --bg, so the panel edge stops being a judgement call. This inverts every ink on those surfaces, which is why it cannot be a lone value change. The "Card ink context" block further down this file re-points --text-rgb and --gold-rgb per card, so the ~200 descendant rules reading var(--text-dim) / var(--gold-soft) / etc. re-derive against paper without being touched individually. Edit that block, not the individual pages. --bg-card-hover is now LIGHTER than the card (paper catching light, +4.8 L*) where it used to be darker. Same gesture, opposite sign. */ --bg-card: #F5F1E8; --bg-card-hover: #FFFFFF; /* The ink a paper card is written in: the page green, and only the page green. 12.71:1 on the cream at full strength. Solid rather than an alpha of --text-rgb because that triplet is the cream and means the opposite on this surface. --card-chip is the same green again, named separately only because it is a FILL rather than ink -- it is what an icon chip or a pill becomes on paper, and the brand gold rides on it at 7.84:1. That is the one route by which the real gold reaches a card at all. */ --card-ink: #162F24; --card-chip: #162F24; /* ---- the surface ink SET ---- The ink context further down does not hardcode any of these; it assigns --text-dim: var(--surface-text-dim) and so on. A var() in a custom property resolves at the element DECLARING it, using values inherited from above -- so a card picks up whichever --surface-* set its nearest ancestor defines. That indirection is what lets a whole PAGE opt out of paper without the card list being repeated: see the .practice-page / .results-page override below. Without it, pinning --bg-card back to green on those pages restored the fill and left the ink alone, which is dark ink on a dark card. */ --surface-text-rgb: 22, 47, 36; --surface-text-strong: var(--card-ink); --surface-text: rgba(22, 47, 36, 0.92); --surface-text-dim: rgba(22, 47, 36, 0.80); --surface-text-faint: rgba(22, 47, 36, 0.70); --surface-line: rgba(22, 47, 36, 0.14); --surface-line-strong: rgba(22, 47, 36, 0.26); /* Green at 1.0 / .92 / .80 / .70 measures 12.71 / 10.13 / 7.00 / 5.14 on the cream. The faint floor is 0.655 for AA, so 0.70 keeps a margin and still reads as the quietest of the four. */ /* Every gold token collapses to the ink on paper. This is the whole rule in four lines: gold is 1.62:1 on cream, so a card's "gold" accent is the green at full weight. Emphasis is carried by weight and size, which is why nothing here needs a second hue. The real gold is not lost -- it comes back on the chips below, sitting on a green fill, and on button fills. */ --surface-gold-rgb: 22, 47, 36; --surface-gold: var(--card-ink); --surface-gold-bright: var(--card-ink); --surface-gold-deep: var(--card-ink); --surface-gold-line: rgba(22, 47, 36, 0.26); --surface-gold-soft: rgba(22, 47, 36, 0.10); --surface-gold-soft-2: rgba(22, 47, 36, 0.06); --surface-shadow-glow: 0 0 0 1px rgba(22, 47, 36, 0.22), 0 18px 60px -18px rgba(22, 47, 36, 0.18); /* The status trio goes the same way, and this is the one real casualty of the three-colour rule -- see the note in the ink context below. On paper there is no coral, no warm, no emerald: a score band is the green, and the number itself carries the meaning. */ --surface-coral: var(--card-ink); --surface-warm: var(--card-ink); --surface-emerald: var(--card-ink); --surface-emerald-soft: rgba(22, 47, 36, 0.10); --surface-emerald-line: rgba(22, 47, 36, 0.26); --surface-shadow-lift: 0 1px 0 rgba(255,255,255,0.5) inset, 0 18px 40px -22px rgba(22,47,36,0.28); /* Hairlines carry the other half of the panel definition: a lifted fill alone reads as a smudge, a defined edge reads as a panel. 0.10 -> 0.14 measured as the point where the edge is legible on a 1366-wide viewport without becoming a drawn box. */ --line: rgba(var(--text-rgb), 0.14); --line-strong: rgba(var(--text-rgb), 0.22); /* Text */ --text: rgb(var(--text-rgb)); --text-strong: #F5F1E8; /* Was 0.62. Two things forced this up. (1) The card lift above: 0.62 measured 4.68:1 on the old --bg-card and would have fallen to 4.31:1 on the new one. (2) More importantly, 0.62 was ALREADY under AA on the gold-tinted feature panels, which are the lightest surfaces in the system — .price.is-feature's blurb/cur/per measured 4.23-4.30:1 and .final-cta's paragraph 4.48:1 before any change here. Those were pre-existing failures, not new ones. 0.72 is the minimum alpha clearing 4.5:1 on the WORST of those surfaces (the ~0.083 gold tint at the top of .price.is-feature, where it measures 4.64:1); on a plain --bg-card it reads 5.28:1. Reducing the gold tints instead does NOT fix it — at gold 0.04 the ratio is still only 4.43:1, because the text alpha dominates, not the tint. Derive from the tinted panels, not from --bg. */ --text-dim: rgba(var(--text-rgb), 0.72); /* 0.38 composited to ~2.7:1 on --bg — under WCAG AA across ~132 usages including form placeholders. Was 0.58, the minimum clearing 4.5:1 on --bg (4.54 measured) — but that only ever cleared AA on --bg itself; on the OLD card surface it was already failing at 4.28:1, and the card lift would have taken it to 3.96:1. 0.645 restores 4.54:1 on the new --bg-card, so it now clears AA on the card surfaces too rather than only on the page background. Note this sits close under --text-dim (0.66) — the faint/dim distinction is subtle by necessity; that constraint predates the lift. */ --text-faint: rgba(var(--text-rgb), 0.645); /* Accent — gold. ONE shade. --gold-bright and --gold-deep were a second and third: #f5cf6e and #b8902f, hand-held off the triplet at +9.6 and -14.7 L. Both now alias --gold. The names survive because --gold-bright has 97 consumers across eleven sheets and collapsing the value is a one-line change where renaming all 97 is not; they are aliases, not shades, and a future hex here reopens the rule. --gold-deep had no consumer at all. */ --gold: rgb(var(--gold-rgb)); --gold-bright: var(--gold); --gold-deep: var(--gold); --gold-soft: rgba(var(--gold-rgb), 0.14); --gold-soft-2: rgba(var(--gold-rgb), 0.08); --gold-line: rgba(var(--gold-rgb), 0.32); /* Status — the four score bands. THESE ARE DARK-PAGE ONLY. On every cream card they resolve to the green (see --surface-coral and friends above), so the three-colour rule holds everywhere the paper reaches. The values below survive for exactly two surfaces: .practice-page and .results-page, which are still on the old green card and whose rules were explicitly left alone this round. Do not read these as a fourth, fifth and sixth colour in the palette. They are the pre-existing scoring vocabulary of two pages that have not been converted yet, and they go when those pages do. Nothing on a cream surface may reference them. */ --warm: #e89a4b; --coral: #d97064; --emerald: #6cc18d; --warm-soft: rgba(232, 154, 75, 0.14); --coral-soft: rgba(217, 112, 100, 0.14); --emerald-soft: rgba(108, 193, 141, 0.10); --emerald-line: rgba(108, 193, 141, 0.40); /* Type */ --font-display: "Fraunces", "Times New Roman", serif; --font-body: "Geist", "Inter", system-ui, sans-serif; --font-mono: "DM Mono", "JetBrains Mono", ui-monospace, monospace; /* Accent phrase — the gold inside a heading — and its host. Was Fraunces italic 500 inside a Fraunces 500 heading; now the accent AND the heading that carries it render in the body sans at 700 ("all bold" — picked from the three-variant demo). Retune app-wide from these four tokens plus the accent + accent-host rules further down this file — do not restyle or its heading per page. */ --font-accent: var(--font-body); --accent-style: normal; --accent-weight: 700; --accent-tracking: -0.025em; /* Geist's lowercase runs ~23% taller than Fraunces's at the same px (x-height ratio 0.815; cap heights are near-identical at 0.986), so equal px made accent headings render visibly larger and wrap onto extra lines. Hosts multiply their --host-size by this factor to restore the rendered size Fraunces 500 gave. 0.86 ≈ 0.7×x-ratio + 0.3×cap-ratio, verified against the live render. */ --accent-optical: 0.86; /* Display scale - one knob for every page hero. The landing hero, FAQ h1, upgrade hero and practice h1 all resolve their size from this token (directly or via .h-display). Sized to sit comfortably above a 1366×768 fold with the subhead and CTA, not maximally. Accent hosts still multiply by --accent-optical, keeping the serif and sans renderings optically equal. */ --display-hero: clamp(36px, 4.2vw, 58px); /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Shadows */ --shadow-lift: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px -20px rgba(0,0,0,0.6); --shadow-pill: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px -12px rgba(0,0,0,0.5); --shadow-glow: 0 0 0 1px rgba(var(--gold-rgb),0.35), 0 18px 60px -18px rgba(var(--gold-rgb),0.30); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Cards are paper: the ink context ---------- ONE list, every card surface in the app. Each entry re-points the two channel triplets plus the solid text and accent tokens for its own subtree. Because custom properties inherit, any rule anywhere reading var(--text-dim) inside one of these resolves against paper automatically -- which is the only reason this change is ~50 lines rather than ~200 hand edits across ten stylesheets. MIND THE SUBSTITUTION RULE. A var() inside a custom property is resolved AT THE ELEMENT THAT DECLARES IT, and what inherits is the resolved colour. So re-pointing --gold-rgb here does NOT re-derive --gold-soft / --gold-line / --shadow-glow: those were already resolved on .evrd against the brand gold, and they inherit as brand gold. Every such token therefore has to be redeclared BY NAME below. What the triplet does reach is the ~25 component rules that write rgba(var(--gold-rgb), a) / rgba(var(--text-rgb), a) inline, because those substitute at the component element, inside this context. Getting this backwards leaves gold-on-gold chips that look fine in the token file and wrong in the browser. Adding a card? Add its selector here. Don't re-declare inks locally: a card that sets its own literal stops following this block and will silently keep paper inks when anything here next moves. Cross-sheet selectors live in this file on purpose, for the same reason .site-footer does -- the static pages in public/ receive this file verbatim via copy-design-tokens.js, so their cards invert too. */ .evrd .miss, .evrd .feat, .evrd .step, .evrd .price, .evrd .sprint-feature, .evrd .guarantee-details, .evrd .student-banner, .evrd .final-cta, .evrd .stat-card, .evrd .mistake, .evrd .cta-band, .evrd .card, .evrd .calibration-prompt-card, .evrd .tip, .evrd .sum-card, .evrd .session, .evrd .settings-card, .evrd .settings-modal-card, .evrd .upgrade-card, .evrd .refund-form, .evrd .refund-success, .evrd .auth-card, .evrd .example, .evrd .related, .evrd .k-card, .evrd .static-cta { /* Every line here reads the --surface-* set rather than naming a colour, so the values arrive from whichever ancestor last defined that set: .evrd for paper, or one of the opted-out pages below. Do not inline a literal into this block -- that is exactly what re-introduces dark ink on a green card. */ --text-rgb: var(--surface-text-rgb); --text-strong: var(--surface-text-strong); --text: var(--surface-text); --text-dim: var(--surface-text-dim); --text-faint: var(--surface-text-faint); --line: var(--surface-line); --line-strong: var(--surface-line-strong); /* On paper --gold-bright resolves DARKER than --gold, not lighter. "Bright" means "more emphatic", and on paper more emphatic is more ink; the inversion is the point, not an error. */ --gold-rgb: var(--surface-gold-rgb); --gold: var(--surface-gold); --gold-bright: var(--surface-gold-bright); --gold-deep: var(--surface-gold-deep); /* Named, not inherited -- see the substitution note above. On paper the hairline at the inherited .32 alpha would be 1.54:1, which is not a line; the two washes stay washes at 1.20:1, carrying bronze-deep at 6.71:1. */ --gold-line: var(--surface-gold-line); --gold-soft: var(--surface-gold-soft); --gold-soft-2: var(--surface-gold-soft-2); --shadow-glow: var(--surface-shadow-glow); --coral: var(--surface-coral); --warm: var(--surface-warm); /* Emerald was the only status colour that had to move far. The score badge it paints is 24px, so it answers to the 3:1 large-text bar, and #6cc18d misses even that on paper at 1.81:1. #2F7A4C reads 4.36 on its own wash and 4.65 on bare cream. The other three cleared 3:1 once --coral and --warm re-pointed (gold 7.26, warm 4.72, coral 4.45), so they carry no paper-specific value. */ --emerald: var(--surface-emerald); --emerald-soft: var(--surface-emerald-soft); --emerald-line: var(--surface-emerald-line); /* the lift shadow's white inset highlight is invisible on paper and its drop was tuned against a dark ground; both re-aimed. */ --shadow-lift: var(--surface-shadow-lift); color: var(--text); } /* Buttons keep the BRAND gold wherever they sit. Inside a paper card --gold resolves to the green, so without this a .btn-primary would render as a green pill carrying a green label. Declaring the triplet on .btn re-pins it for the button's own subtree only, so this one rule covers every button on every card in the app. A gold FILL is the one shape gold may take on a card, and its label is the green at 7.84:1 -- which is why --gold-bright and --gold-deep are aliases here too, not the old #f5cf6e / #b8902f. A gradient between two gold shades was the last place a second gold survived. */ .evrd .btn { --gold-rgb: 233, 185, 73; --gold: #e9b949; --gold-bright: var(--gold); --gold-deep: var(--gold); --gold-line: rgba(233, 185, 73, 0.32); } /* ...but a gold pill measures 1.62:1 on cream, so on paper it needs an edge of its own or it dissolves into the card. The button's base border was a white alpha, which is a fourth colour and only ever read on the dark ground anyway; it is the green everywhere now, so this rule and the base agree. */ .evrd .miss .btn-primary, .evrd .feat .btn-primary, .evrd .step .btn-primary, .evrd .price .btn-primary, .evrd .sprint-feature .btn-primary, .evrd .final-cta .btn-primary, .evrd .student-banner .btn-primary, .evrd .cta-band .btn-primary, .evrd .card .btn-primary, .evrd .upgrade-card .btn-primary, .evrd .auth-card .btn-primary, .evrd .settings-card .btn-primary, .evrd .static-cta .btn-primary, .evrd .price .btn-premium, .evrd .upgrade-card .btn-premium, .evrd .card .btn-premium { border-color: rgba(22, 47, 36, 0.30); } /* The gold CHIPS -- icon squares, pills, tick circles -- are the ONLY place the real #e9b949 reaches a card, and they earn it by putting a green fill underneath first: gold on --card-chip is 7.84:1 where gold on bare cream is 1.62:1. The chip is the same green as the page, so it reads as a window cut through the paper onto the ground behind it. Those overrides live beside the rules they replace in landing.css and research.css. They cannot live here: they would carry the same specificity as the originals, and every page sheet loads after this file, so this file would always lose. */ /* ---------- The two pages that opt out ---------- Neither /practice nor /results was in scope for this round, so they keep the green card -- which means restoring BOTH halves: the fill AND the ink set. Pinning --bg-card alone was the first version of this rule and it was wrong: the cards went back to green while the ink context above carried on painting them in ink, i.e. dark on dark. The --surface-* indirection exists so this override is ~20 lines here rather than the 26-selector card list written out a second time. These values are the pre-change palette verbatim. Delete this whole block in the same commit that converts those two pages; there is no halfway state in which keeping it is correct. */ .evrd .practice-page, .evrd .results-page { --bg-card: #1b3124; --bg-card-hover: #1f382a; --surface-text-rgb: 211, 204, 189; --surface-text-strong: #F5F1E8; --surface-text: rgb(211, 204, 189); --surface-text-dim: rgba(211, 204, 189, 0.72); --surface-text-faint: rgba(211, 204, 189, 0.645); --surface-line: rgba(211, 204, 189, 0.14); --surface-line-strong: rgba(211, 204, 189, 0.22); --surface-gold-rgb: 233, 185, 73; --surface-gold: #e9b949; /* aliases, not shades -- one gold holds on these two pages too. They restore the dark CARD, not a wider palette. */ --surface-gold-bright: #e9b949; --surface-gold-deep: #e9b949; --surface-gold-line: rgba(233, 185, 73, 0.32); --surface-gold-soft: rgba(233, 185, 73, 0.14); --surface-gold-soft-2: rgba(233, 185, 73, 0.08); --surface-shadow-glow: 0 0 0 1px rgba(233, 185, 73, 0.35), 0 18px 60px -18px rgba(233, 185, 73, 0.30); --surface-coral: #d97064; --surface-warm: #e89a4b; --surface-emerald: #6cc18d; --surface-emerald-soft: rgba(108, 193, 141, 0.10); --surface-emerald-line: rgba(108, 193, 141, 0.40); --surface-shadow-lift: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px -20px rgba(0,0,0,0.6); } /* The chip overrides in landing.css and research.css are keyed on card classes that only ever appear on marketing pages, so they never reach inside these two. Nothing to undo there. */ /* When a redesigned page is mounted, set body bg + overflow. The body class is toggled by SiteFrame. */ body.evrd-page { margin: 0; background: #162F24; /* mirror of --bg — tokens live on .evrd, a child, so this needs the hand edit (see 5a892bc) */ min-height: 100vh; overflow-x: hidden; } .evrd a { color: inherit; text-decoration: none; } /* Native checkboxes paint themselves in the platform's colours -- black tick, black rule -- which is the one place a fourth colour reaches the page without any stylesheet asking for it. accent-color hands the control the ink of whatever surface it sits on, so the 18+ box on the cream auth card checks green. */ .evrd input[type="checkbox"], .evrd input[type="radio"] { accent-color: var(--text-strong); } .evrd button { font-family: inherit; } .evrd * { box-sizing: border-box; } /* Media never forces horizontal overflow on small screens. */ .evrd img, .evrd video, .evrd canvas { max-width: 100%; height: auto; } /* ---------- Ambient orbs (decorative bg) ---------- */ /* ---------- Ambient orbs: removed ---------- Three fixed, 120-140px-blurred radials used to wash the whole viewport: gold at 0.18 and 0.10, and a green at rgba(20,90,55,0.45). Two reasons they are gone, and the second is the one that matters. (1) The icon chips are the page green, and the point of them is that they read as a hole cut through the card onto the ground. That only works if the ground IS that green. Measured, these orbs lifted it by up to dL* 6.4 and the .lit section washes below by a further 5.2 -- dL* 8.8 stacked, which is a whole surface step. The chip was matching a colour the page no longer was. (2) rgba(20,90,55) is a saturated emerald and simply not in the palette. It survived the three-colour audit because that pass reads backgroundColor, and a gradient lives in background-image where backgroundColor computes to transparent. A real gap; the auditor now reads background-image too. The hero keeps its band and its single warm glow -- it carries no cards, and it is the one deliberate light source on the page. The .ambient element is left in the DOM (SiteFrame renders it) but paints nothing, so no component needs changing. */ .evrd .ambient { display: none; } .evrd .ambient--retired { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .evrd .ambient--retired::before, .evrd .ambient--retired::after { content: ""; position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.55; } .evrd .ambient--retired::before { width: 720px; height: 720px; left: -180px; top: -200px; background: radial-gradient(circle, rgba(var(--gold-rgb),0.18), rgba(var(--gold-rgb),0) 70%); } .evrd .ambient--retired::after { width: 880px; height: 880px; right: -260px; top: 200px; background: radial-gradient(circle, rgba(var(--gold-rgb),0.10), rgba(var(--gold-rgb),0) 65%); } .evrd .ambient--retired .orb-3 { position: absolute; width: 600px; height: 600px; left: 30%; bottom: -300px; background: radial-gradient(circle, rgba(20,90,55,0.45), rgba(20,90,55,0) 70%); filter: blur(140px); border-radius: 50%; } /* Grain overlay */ .evrd .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } .evrd main, .evrd .nav-wrap { position: relative; z-index: 2; } /* ---------- Navigation (floating pill) ---------- */ .evrd .nav-wrap { position: sticky; top: 0; /* was 22px — pulled down ~half so the pill anchors near the viewport top */ padding: 12px 32px 0; display: flex; justify-content: center; z-index: 50; } .evrd .nav { width: 100%; max-width: 1320px; background: rgba(22, 47, 36, 0.78); backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 12px 16px 12px 22px; display: flex; align-items: center; gap: 18px; box-shadow: var(--shadow-pill); transition: background 0.25s ease, border-color 0.25s ease; /* Positioning context for the mobile dropdown panel (.nav-collapse). */ position: relative; } .evrd .nav.is-scrolled { background: rgba(22, 47, 36, 0.72); border-color: rgba(var(--text-rgb),0.22); } .evrd .brand { display: flex; align-items: center; padding-right: 12px; /* Wordmark-as-home affordance: the is already there, but without a hover state nothing tells the user it's clickable. Subtle opacity shift on hover is the industry-standard pattern. */ text-decoration: none; transition: opacity 0.15s ease; } .evrd .brand:hover { opacity: 0.82; } .evrd .brand-name { font-family: var(--font-display); font-weight: 600; /* 32px, up from 24px. Deliberately a step rather than a nudge — the wordmark is the only route to / on the signed-in nav besides the new Home link, and at 24px it read as a label rather than a brand. Capped here: the nav's height is set by the .btn-xl CTA (~44px at this breakpoint), and a display face above ~34px starts to exceed that and would grow the whole bar. */ font-size: 32px; letter-spacing: -0.01em; color: var(--gold); } .evrd .nav-pill-group { display: flex; align-items: center; gap: 4px; margin: 0 auto; background: rgba(22, 47, 36, 0.55); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; } .evrd .nav-link { font-size: 16px; font-weight: 600; color: var(--text-dim); padding: 8px 16px; border-radius: var(--r-pill); transition: color 0.18s ease, background 0.18s ease; white-space: nowrap; background: none; border: none; cursor: pointer; font-family: inherit; } .evrd .nav-link:hover { color: var(--text-strong); } .evrd .nav-link.is-active { color: var(--bg); background: var(--gold-bright); font-weight: 600; } /* ---------- Nav layout: collapsible group + always-on end group ---------- Desktop: `.nav-collapse` is display:contents, so its children (the pill group + the secondary actions) lay out directly inside the nav flex row — pill group centred (margin:auto), secondary actions to the right. Below 1080px `.nav-collapse` becomes a dropdown panel (see responsive block). */ .evrd .nav-collapse { display: contents; } .evrd .nav-secondary { display: flex; align-items: center; gap: 10px; } .evrd .nav-end { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } /* Hamburger — hidden on desktop, shown once the menu collapses. */ .evrd .nav-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--r-md); background: transparent; border: 1px solid var(--line-strong); color: var(--text-strong); cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; } .evrd .nav-burger:hover { border-color: var(--gold-line); background: rgba(255,255,255,0.03); } /* Free-tier upgrade affordance in the signed-in nav (Nav.js). The counter is a muted mono readout; Upgrade Now is a compact gold pill (smaller than the xl primary CTA so the two gold buttons don't read as equals). Both render only for free-tier users. */ .evrd .nav-free-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap; } .evrd .nav-upgrade-btn { font-size: 14px; padding: 9px 16px; } /* ---------- Account dropdown (desktop) ---------- */ /* A compact gear ▾ button at the right of the bar that opens a small menu with Settings + Sign Out — keeps those two out of the main row so nothing overflows. On mobile this is hidden and the items live in the hamburger panel (.nav-account-items) instead. */ .evrd .nav-account { position: relative; flex: 0 0 auto; } .evrd .nav-account-trigger { display: inline-flex; align-items: center; gap: 5px; height: 42px; padding: 0 12px; border-radius: var(--r-pill); background: transparent; border: 1px solid var(--line-strong); color: var(--text); cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } .evrd .nav-account-trigger:hover { border-color: var(--gold-line); color: var(--text-strong); background: rgba(255,255,255,0.03); } .evrd .nav-account-caret { opacity: 0.7; } .evrd .nav-account-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 184px; display: flex; flex-direction: column; gap: 2px; background: rgba(22, 47, 36, 0.97); backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 8px; box-shadow: var(--shadow-lift); z-index: 10; } .evrd .nav-account-menu a, .evrd .nav-account-menu button { display: flex; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-sm); background: none; border: none; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; } .evrd .nav-account-menu a:hover, .evrd .nav-account-menu button:hover { background: rgba(255,255,255,0.04); color: var(--text-strong); } /* Mobile-only account items (Settings + Sign Out) inside the hamburger panel — hidden on desktop where the gear dropdown carries them. */ .evrd .nav-account-items { display: none; } /* ---------- Buttons ---------- */ .evrd .btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; border: 1px solid transparent; border-radius: var(--r-pill); padding: 10px 18px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; white-space: nowrap; text-decoration: none; } .evrd .btn:active { transform: translateY(1px); } .evrd .btn-primary { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #162F24; border-color: rgba(22, 47, 36, 0.30); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 10px 24px -12px rgba(var(--gold-rgb),0.55); } .evrd .btn-primary:hover { filter: brightness(1.05); } /* Premium variant — same visual WEIGHT as .btn-primary (gold pill, dark text, identical sizing) but signals "elevated / featured tier" via an emerald sheen overlay and a stronger gold glow + the gold-line inner ring used by .price.is-feature on the landing page. Use this wherever Premium is the CTA so the upsell hierarchy reads correctly: Pro → .btn-primary (standard gold pill) Premium → .btn-premium (elevated gold pill with emerald tint) The emerald rgba is the same value used in pills/alerts elsewhere — no new colour values introduced. */ .evrd .btn-premium { background: linear-gradient(135deg, rgba(22, 47, 36, 0.22), rgba(22, 47, 36, 0) 55%), linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #162F24; border-color: rgba(var(--gold-rgb), 0.55); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 0 0 1px var(--gold-line) inset, 0 14px 32px -10px rgba(var(--gold-rgb), 0.6); } .evrd .btn-premium:hover { filter: brightness(1.06); } .evrd .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); } .evrd .btn-ghost:hover { border-color: rgba(var(--text-rgb),0.30); background: rgba(255,255,255,0.03); } .evrd .btn-xl { font-size: 16px; padding: 14px 26px; font-weight: 600; letter-spacing: 0.01em; } .evrd .btn .badge-admin { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.18); color: #162F24; letter-spacing: 0.04em; } /* ---------- Page chrome ---------- */ .evrd .page { max-width: 1200px; margin: 0 auto; padding: 112px 32px 96px; } .evrd .page-narrow { max-width: 880px; } .evrd .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 500; } .evrd .h-display { font-family: var(--font-display); font-weight: 500; --host-size: var(--display-hero); font-size: var(--host-size); line-height: 1.04; letter-spacing: -0.02em; color: var(--text-strong); margin: 12px 0 0; } .evrd .h-section { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.015em; color: var(--text-strong); margin: 8px 0 0; } .evrd .h-card { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.005em; color: var(--text-strong); margin: 0; } /* ── Accent phrase — single source of truth ──────────────────────────── Every gold accent in the app is styled here and nowhere else. Headings carry it by default; the handful of accent phrases that live in a

or

rather than a heading are named explicitly. Deliberately NOT matched: in body prose (FaqPage, PrivacyPolicyPage) where the italic is real emphasis — "the Privacy Act 1988" — and must stay italic and stay the surrounding text colour. Those all sit in paragraphs, which is why this rule is scoped to headings plus a named list rather than to a bare .evrd em. */ .evrd h1 em, .evrd h2 em, .evrd h3 em, .evrd .student-banner .ttl em, .evrd .sprint-band .ttl em, .evrd .price .guarantee-card .head em, .evrd .score-summary .verdict em { font-family: var(--font-accent); font-style: var(--accent-style); font-weight: var(--accent-weight); letter-spacing: var(--accent-tracking); color: var(--gold-bright); } /* ── Accent host — the heading AROUND the accent ─────────────────────── Direction picked from the three-variant demo ("B — all bold"): a heading that carries a gold accent renders WHOLE in the accent face — Geist 700 at the accent tracking — white words staying white, gold staying gold. Mixing Fraunces 500 white with Geist 700 gold in one headline made the gold line read far heavier than its neighbour. Scoped with :has(em) for two reasons: it only fires on headings that actually contain an accent — the serif system elsewhere (.h-display on Settings/History/FAQ, .h-section, .h-card, finding h3s) is untouched — and the extra pseudo-class outranks each page's own heading rule by exactly one class, so this wins regardless of CSS bundle order without !important. The selectors mirror the per-page host rules; add new hosts here, not in page CSS. */ .evrd .hero h1:has(em), .evrd .land-head h2:has(em), .evrd .final-cta h2:has(em), .evrd .guarantee-details .lead h3:has(em), .evrd .sprint-feature__title:has(em), .evrd .h-display:has(em), .evrd .practice-page .practice-head h1:has(em), .evrd .auth-title:has(em), .evrd .calibration-prompt-title:has(em), .evrd .student-banner .ttl:has(em), .evrd .sprint-band .ttl:has(em), .evrd .price .guarantee-card .head:has(em), .evrd .score-summary .verdict:has(em), /* The closing CTA on the static pages in public/ (knowledge/, guides/, how-it-works.html). Registered here rather than in static-pages.css because this list is the single source of truth for accent hosts. */ .evrd .static-cta h2:has(em) { font-family: var(--font-accent); font-style: var(--accent-style); font-weight: var(--accent-weight); letter-spacing: var(--accent-tracking); /* Optical size compensation: each host's page rule declares its size as --host-size (font-size: var(--host-size) for the serif path); this line shrinks the sans rendering back to the serif's optical size. A host missing --host-size falls back to 1em = no change. */ font-size: calc(var(--host-size, 1em) * var(--accent-optical)); } .evrd .lede { font-size: 16px; line-height: 1.55; color: var(--text-dim); max-width: 60ch; margin: 16px 0 0; } .evrd .hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); margin: 64px 0; } /* ---------- Cards ---------- */ .evrd .card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; position: relative; } /* ---------- Site footer ---------- Lives here rather than in landing.css because it is no longer only the landing page's footer: the static pages in public/ (knowledge/, guides/, how-it-works.html) render the same markup and pick these rules up via scripts/copy-design-tokens.js. One copy is the whole point — a second, hand-maintained footer would drift the way public/pricing.html did. Only LandingPage and those static pages use these classes and nothing else styled them, so the move is order-safe. */ /* ---------- Footer ---------- */ .evrd .site-footer { margin-top: 96px; padding: 36px 32px 56px; border-top: 1px solid var(--line); color: var(--text-dim); font-size: 13.5px; position: relative; z-index: 2; } .evrd .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; } .evrd .footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 36ch; } /* Slogan under the wordmark. Serif and gold so it reads as brand voice rather than as another line of body copy — it sits between the wordmark and the positioning line, and must not compete with either. The tighter gap ties it to the wordmark above it instead of floating between the two. */ .evrd .footer-slogan { font-family: var(--font-display); font-size: 17px; font-weight: 500; font-style: italic; color: var(--gold); margin: -8px 0 0; letter-spacing: -0.01em; } .evrd .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; } .evrd .footer-col a { display: block; padding: 4px 0; color: var(--text); font-size: 14px; transition: color 0.15s ease; } .evrd .footer-col a:hover { color: var(--gold-bright); } .evrd .footer-bottom { max-width: 1200px; margin: 32px auto 0; display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); letter-spacing: 0.06em; flex-wrap: wrap; gap: 12px; } @media (max-width: 1080px) { .evrd .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .evrd .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; } .evrd .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ---------- Reveal animation ---------- */ .evrd .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; } .evrd .reveal.is-in { opacity: 1; transform: none; } /* ---------- Responsive nav ---------- >1080px: inline; these breakpoints shrink spacing gracefully so the bar never overflows (Settings + Sign Out live in the account dropdown, keeping the row short). <=1080px: the link group + secondary actions — including Settings + Sign Out via .nav-account-items — collapse into a hamburger dropdown; the desktop account gear is hidden. */ @media (max-width: 1500px) { .evrd .nav { gap: 14px; padding: 10px 14px 10px 20px; } .evrd .nav-link { padding: 8px 13px; font-size: 15px; } .evrd .btn-xl { padding: 12px 20px; font-size: 15px; } .evrd .nav-secondary { gap: 8px; } } @media (max-width: 1280px) { /* The free-tier counter is the widest optional item — drop it first so the Upgrade + Start Practising + account cluster always keeps room. */ .evrd .nav-free-count { display: none; } } @media (max-width: 1240px) { .evrd .nav { gap: 10px; padding: 10px 12px 10px 16px; } .evrd .brand { padding-right: 4px; } .evrd .nav-link { padding: 7px 10px; font-size: 14px; } .evrd .btn-xl { padding: 10px 14px; font-size: 14px; } .evrd .btn .badge-admin { display: none; } } @media (max-width: 1160px) { /* Final inline zone before the hamburger — tighten so free-tier (still showing Upgrade) can't crowd the bar. */ .evrd .nav-link { padding: 6px 9px; font-size: 13.5px; } .evrd .nav-pill-group { gap: 2px; } .evrd .nav-end .btn-xl { padding: 9px 13px; font-size: 13.5px; } .evrd .nav-upgrade-btn { padding: 8px 12px; font-size: 13px; } } /* ===== Collapse to hamburger dropdown ===== */ @media (max-width: 1080px) { .evrd .nav-burger { display: inline-flex; } .evrd .nav-account { display: none; } /* desktop account gear hidden */ /* Collapse panel is out of flow (absolute), leaving logo + end group in the flex row — push the end group (CTA + burger) to the right edge. */ .evrd .nav-end { margin-left: auto; } /* The collapsible group becomes a dropdown panel anchored under the nav. */ .evrd .nav-collapse { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 6px; background: rgba(22, 47, 36, 0.97); backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-lift); max-height: calc(100vh - 120px); overflow-y: auto; } .evrd .nav-collapse.is-open { display: flex; } /* Links stack full-width; drop the pill chrome. */ .evrd .nav-pill-group { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; background: none; border: none; } .evrd .nav-link { width: 100%; text-align: left; padding: 12px 14px; font-size: 16px; border-radius: var(--r-md); } /* Secondary actions stack full-width below a divider. */ .evrd .nav-secondary { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); } .evrd .nav-secondary .btn { width: 100%; justify-content: center; } .evrd .nav-free-count { display: block; text-align: center; padding: 4px 0; } /* Settings + Sign Out show inline in the panel (the gear is hidden). */ .evrd .nav-account-items { display: flex; flex-direction: column; gap: 8px; } /* Primary CTA stays visible and comfortably sized beside the burger. */ .evrd .nav-end .btn-xl { padding: 11px 18px; font-size: 15px; } } @media (max-width: 720px) { .evrd .nav-wrap { padding: 14px 16px 0; } .evrd .nav { padding: 9px 10px 9px 14px; gap: 8px; } .evrd .brand-name { font-size: 26px; } /* 26px, up from 20px — same step as desktop */ .evrd .page { padding: 80px 18px 64px; } } @media (max-width: 460px) { /* Very narrow: the primary CTA shrinks to its icon so logo + CTA + burger always fit on one line. The aria-label keeps it accessible. */ .evrd .nav-cta-text { display: none; } .evrd .nav-end .btn-xl { padding: 11px 13px; } } /* Site-wide refund-link footer was removed — see SiteFrame.js comment. Refund access lives under /settings → Subscription. */ /* ── Calibration review page ── */ .evrd .calibration-review { min-height: 100vh; padding: 64px 24px 80px; background: var(--bg, #07100b); } .evrd .calibration-review-inner { max-width: 900px; margin: 0 auto; } /* ── Calibration consent modal ── Dark emerald + gold. Same primitives as the auth and settings modals (.bg-card surface, .gold-line accent, .btn-primary CTA). */ .evrd .calibration-prompt-overlay { position: fixed; inset: 0; background: rgba(7, 16, 11, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; padding: 32px 20px; z-index: 200; overflow-y: auto; } .evrd .calibration-prompt-card { background: var(--bg-card); border: 1px solid var(--gold-line); border-radius: var(--r-xl); width: 100%; max-width: 560px; padding: 40px 44px 32px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); position: relative; } .evrd .calibration-prompt-head { margin-bottom: 24px; } .evrd .calibration-prompt-head .kicker { color: var(--gold); margin-bottom: 10px; } .evrd .calibration-prompt-title { font-family: var(--font-display); font-weight: 500; --host-size: 30px; font-size: var(--host-size); line-height: 1.2; letter-spacing: -0.012em; color: var(--text-strong); margin: 0 0 14px; } .evrd .calibration-prompt-lede { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0; } .evrd .calibration-prompt-consents { display: grid; gap: 14px; margin: 0 0 20px; } .evrd .calibration-consent-row { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: flex-start; padding: 14px 16px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color 0.15s; } .evrd .calibration-consent-row:hover { border-color: var(--line-strong); } .evrd .calibration-consent-row.is-required { background: rgba(var(--gold-rgb), 0.04); border-color: var(--gold-line); cursor: default; } .evrd .calibration-consent-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold-bright); cursor: pointer; } .evrd .calibration-consent-row.is-required input[type="checkbox"] { cursor: not-allowed; opacity: 0.9; } .evrd .calibration-consent-label { font-size: 14.5px; font-weight: 500; color: var(--text-strong); display: flex; align-items: center; gap: 10px; } .evrd .calibration-consent-required-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(var(--gold-rgb), 0.18); color: var(--gold-bright); padding: 2px 8px; border-radius: 999px; font-weight: 500; } .evrd .calibration-consent-body { margin-top: 4px; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; } .evrd .calibration-consent-tooltip { margin-top: 10px; padding: 10px 12px; background: rgba(var(--gold-rgb), 0.08); border: 1px solid var(--gold-line); border-radius: var(--r-md); color: var(--gold-bright); font-size: 12.5px; line-height: 1.55; } .evrd .calibration-prompt-subline { font-size: 13px; color: var(--text-faint); text-align: center; margin: 0 0 8px; font-style: italic; } .evrd .calibration-prompt-policy { text-align: center; font-size: 12.5px; color: var(--text-faint); margin: 0 0 22px; } .evrd .calibration-prompt-policy a { color: var(--gold-bright); text-decoration: none; } .evrd .calibration-prompt-policy a:hover { text-decoration: underline; } .evrd .calibration-prompt-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .evrd .calibration-prompt-actions .btn-primary { min-width: 180px; justify-content: center; } @media (max-width: 600px) { .evrd .calibration-prompt-card { padding: 28px 22px 24px; } .evrd .calibration-prompt-title { --host-size: 24px; font-size: var(--host-size); } } /* ---------- Mobile compositing budget ---------- MUST stay at the end of this file: it overrides the ambient / grain / nav rules above at equal specificity, so source order is what makes it win. iOS Safari allocates a GPU surface ~3x the blur radius LARGER than the element for every filter: blur() layer, at device pixel ratio 3. The three ambient orbs cost roughly 240MB of GPU memory on an iPhone before any page content — combined with the grain's mix-blend-mode (whole-page offscreen composite) and the nav's backdrop-filter (re-filters the backdrop every scrolled frame), WebKit kills the tab ("a problem repeatedly occurred"). Phones get the same palette from the unblurred radial gradients, which already fade to transparent — the blur is nearly invisible on them. */ @media (max-width: 768px) { .evrd .ambient::before, .evrd .ambient::after, .evrd .ambient--retired .orb-3 { filter: none; } .evrd .grain { display: none; } .evrd .nav, .evrd .nav-collapse, .evrd .nav-account-menu { backdrop-filter: none; -webkit-backdrop-filter: none; } .evrd .nav { background: rgba(22, 47, 36, 0.96); } .evrd .nav.is-scrolled { background: rgba(22, 47, 36, 0.96); } }