/* ============================================================================ IT REVOLUTION — one stylesheet for the whole suite Library · Work Detail · Reader · Membership · Auth · My Library · AI Tutor ---------------------------------------------------------------------------- Fonts (put this in , before this sheet): Atkinson Hyperlegible + Lexend are reader-only; they may be lazily loaded on /read/* if you want lighter marketing pages. THEMING CONTRACT UI theme (cookie-persisted) AAA layer (composes on top) same layer, V3's name for it
reading palette (independent) Nav tokens (--nav-*) are NEVER re-themed: the bar is the constant across apps. TOKEN VOCABULARY — the design files ship two conflicting families. This sheet standardises on the "page" family. Translation table for anyone porting CSS out of Cover Card / Library Shelf / Work Detail / Site Footer: --text-strong -> --text --text -> --text2 --muted2 -> --faint --shadow -> --sh-md ========================================================================== */ /* ========================================================================== 1. TOKENS — light / default ========================================================================== */ :root { /* ---- surfaces ------------------------------------------------------- */ --paper: #ffffff; /* cards, sheets, base surface */ --card: #ffffff; /* floating card sitting on --bg */ --bg: #eef3f6; /* standalone screen field (auth, welcome-back)*/ --bg-app: #f4f7f9; /* tinted app page (tutor, learning path) */ --ink: #0c0c22; /* dark bands, heroes, path cards */ --surface: #f6fafb; /* inset blocks, tinted cards */ --surface-raise: #f6fafb; /* inset box that must lift off --card */ --panel: #f2f8fb; /* cover well / segmented-control track */ --field: #ffffff; /* input fill */ --hair: #e7edf0; /* every 1px / 1.5px border */ --hair-2: #f0f4f6; /* softer hairline */ /* ---- text ----------------------------------------------------------- */ --text: #141428; /* headings, strong */ --text2: #333a4c; /* body copy (document default) */ --muted: #5b6470; /* secondary */ --faint: #667085; /* captions, tertiary meta — V3 AA fix, was #9299a8 (2.86:1 on --paper). 4.97:1 now. */ /* ---- accents -------------------------------------------------------- */ --teal: #0f9fbe; --teal-soft: rgba(15,159,190,.10); /* citation chip fill */ --teal-12: rgba(15,159,190,.12); /* active tab badge */ --teal-08: rgba(15,159,190,.08); /* active include toggle */ --green: #22b083; --coral: #ee5d74; --gold: #c98a1a; /* legacy ownership ONLY */ --coming: #c98a1a; /* presale "Coming " — gold's hue under its own name, so the ownership reservation above stays enforceable by grep */ --amber: #e0a53a; /* "Light–Meaningful" budget tag */ --grad: linear-gradient(90deg,#0cabca 0%,#23b8b4 52%,#38c89b 100%); --grad-2: linear-gradient(90deg,#0cabca,#38c89b); /* nav pills */ --grad-chip: linear-gradient(135deg,#0cabca,#38c89b); /* ≤52px sq */ --on-grad: #06121a; /* ink that sits ON a gradient */ /* ---- text on --ink bands (literals, never themed) -------------------- */ --on-ink: #ffffff; --on-ink-2: #c7ccda; --on-ink-3: #8b93a6; --on-ink-4: #9aa2b4; --on-ink-accent: #3fc3dd; /* ---- controls ------------------------------------------------------- */ --btn: #0d0d22; --btn-t: #ffffff; --btn-hover: #23233f; --btn-disabled: #c9ccd6; --focus: var(--teal); /* ---- nav: ALWAYS dark, never re-themed ------------------------------ */ --nav-bg: #0b0b1c; --nav-line: rgba(255,255,255,.09); --nav-text: #ffffff; --nav-muted: #b9c0d0; --nav-dim: #8b93a6; --nav-panel: #15152f; --nav-green: #2fcf94; /* member dot — brighter than --green */ --nav-quiet: #d7dbe6; /* ---- typography ----------------------------------------------------- */ --f-display: 'Sora', system-ui, sans-serif; --f-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --f-read: 'Literata', Georgia, serif; --f-a11y: 'Atkinson Hyperlegible', sans-serif; --f-lexend: 'Lexend', sans-serif; --fs-display: 46px; --fs-display-m: 34px; --fs-h1: 32px; --fs-h2: 23px; --fs-h3: 17px; --fs-body: 16px; --fs-body-sm: 15px; --fs-small: 13px; --fs-xs: 12px; --fs-eyebrow: 11px; --fs-btn: 14px; --lh-display: 1.04; --lh-heading: 1.25; --lh-body: 1.55; --lh-loose: 1.62; --lh-read: 1.72; --ls-display: -.03em; --ls-heading: -.02em; --ls-tight: -.015em; --ls-eyebrow: .16em; --ls-eyebrow-sm: .11em; --ls-tag: .06em; /* ---- spacing (4px base) --------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 26px; --s7: 34px; --s8: 44px; --s9: 56px; /* ---- radii ---------------------------------------------------------- */ --r-xs: 3px; /* cover art inside a cover card */ --r-cover: 5px; /* large cover art */ --r-ctl: 8px; /* segmented thumb, small controls */ --r-sm: 9px; --r-md: 12px; /* buttons, inputs */ --r-lg: 16px; /* cards, sheets */ --r-xl: 20px; /* hero cards, modals */ --r-pill: 999px; /* ---- elevation ------------------------------------------------------ */ --sh-sm: 0 4px 14px rgba(12,12,34,.10); --sh-md: 0 12px 34px rgba(12,12,34,.12); --sh-lg: 0 24px 60px rgba(12,12,34,.18); --sh-xl: 0 34px 80px rgba(12,12,34,.22); --sh-menu: 0 16px 40px rgba(12,12,34,.16); /* V3 dropdown panel; sits between --sh-md and --sh-lg, hence its own token rather than a literal */ --sh-cover: 0 9px 24px rgba(12,12,34,.30); --sh-cover-lg: 0 20px 44px rgba(12,12,34,.34); --sh-thumb: 0 1px 3px rgba(12,12,34,.14); --shadow: var(--sh-md); /* ---- layout --------------------------------------------------------- */ --page-max: 1180px; --page-pad: 40px; --page-pad-m: 16px; --measure: 760px; --measure-wide: 820px; --measure-bio: 600px; --detail-rail: 360px; --detail-gap: 56px; --grid-min: 196px; /* -> 5-up at the designed 1240px content width */ --tap: 44px; /* ---- motion --------------------------------------------------------- */ --dur-fast: .15s; --dur: .2s; --ease: ease; } /* ========================================================================== 2. DARK THEME (attribute-driven; hand-tuned, NOT a mechanical inversion) ========================================================================== */ [data-theme="dark"] { --paper: #0a0a1c; --card: #12122a; --bg: #08081c; --bg-app: #08081c; --ink: #07071a; --surface: #101028; --surface-raise: #191937; --panel: #17173a; --field: #12122c; --hair: #25254e; --hair-2: #1a1a3c; --text: #f3f5fb; --text2: #c7ccda; --muted: #98a0b3; --faint: #6b7288; --teal: #3fc3dd; --teal-soft: rgba(63,195,221,.14); --teal-12: rgba(63,195,221,.14); --teal-08: rgba(63,195,221,.10); --green: #48d1a0; --coral: #ff6f84; --gold: #e3b45f; --coming: #e3b45f; --btn: #f4f6fb; --btn-t: #0a0a1c; --btn-hover: #ffffff; --sh-md: 0 16px 44px rgba(0,0,0,.55); --sh-lg: 0 24px 60px rgba(0,0,0,.6); --sh-menu: 0 16px 40px rgba(0,0,0,.6); /* V3 gave no dark value; the light rgba(12,12,34,…) would vanish on #0a0a1c, so this follows --sh-lg's dark treatment */ --shadow: 0 16px 44px rgba(0,0,0,.55); /* --grad, --grad-2, --grad-chip, --on-grad, --nav-* deliberately unchanged */ } /* ========================================================================== 3. READING THEMES — reader surface only, own --r* namespace Three palettes in their own right, not inversions. ========================================================================== */ .reader, [data-reading-theme="light"] { --rbg: #faf9f5; --rsurface: #ffffff; --rtext: #20242c; --rmuted: #6b7280; --rfaint: #9aa1ab; --rline: #e7e4dc; --rchrome: rgba(250,249,245,.92); --ricon: #3a3f48; --raccent: #0f9fbe; --rcoral: #ee5d74; /* reserved — unused in the design */ --rhl: rgba(255,206,84,.42); --rsel: rgba(15,159,190,.20); --rsheet: #ffffff; --rdim: rgba(20,20,34,.34); --rband: rgba(255,214,110,.30); --r-on-accent: #04222a; /* ink on --raccent, all three themes */ } [data-reading-theme="sepia"] { --rbg: #f3ead4; --rsurface: #faf3e1; --rtext: #463a28; --rmuted: #8a7a60; --rfaint: #b3a483; --rline: #e2d5b8; --rchrome: rgba(243,234,212,.93); --ricon: #5b4c37; --raccent: #2f9c8b; /* warmer green-teal, NOT the UI teal */ --rcoral: #c96a52; --rhl: rgba(210,150,40,.34); --rsel: rgba(47,156,139,.22); --rsheet: #faf3e1; --rdim: rgba(75,63,47,.32); --rband: rgba(210,160,60,.28); } [data-reading-theme="dark"] { --rbg: #14161c; /* warmer/softer than the UI dark */ --rsurface: #1c1f28; --rtext: #c9cdd6; /* deliberately not pure white */ --rmuted: #8b93a1; --rfaint: #5f6672; --rline: #2a2e38; --rchrome: rgba(18,20,26,.92); --ricon: #aeb4bf; --raccent: #3fc3dd; --rcoral: #ff6f84; --rhl: rgba(255,214,110,.20); --rsel: rgba(63,195,221,.22); --rsheet: #1c1f28; --rdim: rgba(0,0,0,.58); --rband: rgba(255,214,110,.14); } /* Annotation palette — canonical, ONE set everywhere (V3). The three families used to hold three different quartets on purpose; V3's spec card retitles the row "Annotation palette — canonical, one set everywhere" and captions it "Highlights, notes & the reading-ruler swatches all draw from this quartet", so the tints collapse onto --hl-*. The --sw-* / --ruler-* names are KEPT as aliases: ~a dozen call sites and the hiccup views name them, and keeping them documents the three contexts. KNOWN CONTRADICTION, not resolved here: design-v3/Reader Frame.dc.html:158 still paints the selection-menu swatches #ffd76e / #f2a0c0 — the old --sw-* values. The spec card and Reader Settings both say otherwise; this sheet follows the spec card. Flip --sw-* back if the designer meant the inline instance. Store the semantic name (yellow/green/blue/pink), not the hex. */ :root { --hl-yellow: #ffcf5c; --hl-green: #7ee0a6; --hl-blue: #8fb8ff; --hl-pink: #f2a0c8; --sw-yellow: var(--hl-yellow); --sw-green: var(--hl-green); /* selection */ --sw-blue: var(--hl-blue); --sw-pink: var(--hl-pink); --ruler-yellow: var(--hl-yellow); --ruler-green: var(--hl-green); /* ruler */ --ruler-blue: var(--hl-blue); --ruler-pink: var(--hl-pink); } /* ========================================================================== 4. HIGH CONTRAST — a separate layer, composes over any theme (WCAG AAA) ========================================================================== */ /* The app writes data-contrast="high" on (layout.clj). V3 names the same axis data-hc="on". Both are accepted so either markup drives the layer. */ /* ---- UI shell half ---- */ [data-contrast="high"], [data-hc="on"] { --paper: #ffffff; --card: #ffffff; --bg: #ffffff; --surface: #ffffff; --surface-raise: #ffffff; --panel: #ffffff; --field: #ffffff; --text: #000000; --text2: #000000; --muted: #000000; --faint: #000000; --hair: #000000; --teal: #0a5e73; --green: #0a5e3a; --coral: #a3122b; --btn: #000000; --btn-t: #ffffff; --btn-hover: #22222c; --hc-border: 2px; } [data-contrast="high"][data-theme="dark"], [data-hc="on"][data-theme="dark"] { --paper: #000000; --card: #000000; --bg: #000000; --surface: #000000; --surface-raise: #000000; --panel: #000000; --field: #000000; --text: #ffffff; --text2: #ffffff; --muted: #ffffff; --faint: #ffffff; --hair: #ffffff; --teal: #7fe3ff; --green: #7fffc4; --coral: #ff9aa8; --btn: #ffffff; --btn-t: #000000; --btn-hover: #e6e6ee; } /* ---- reader half (V3) ---------------------------------------------------- Fifteen --r* tokens per mode, from Reader Frame.dc.html's [data-hc="on"]. These MUST be declared on .reader itself, not on : section 3 sets the --r* family on the .reader element, and an element's own declaration beats an inherited one, so the previous html-level --r* entries here never landed in the light case. Specificity: (0,2,0) light / (0,3,0) dark, over section 3's (0,1,0). Unlike the old placeholders these do NOT flatten every text tier to pure black/white — muted and faint stay distinguishable and still clear AAA (light 13.21:1 / 9.77:1, dark 15.37:1 / 11.47:1). The reading-theme -> UI-theme coupling is unchanged from the previous rule: dark UI theme OR dark reading theme selects the dark reader HC palette. */ [data-contrast="high"] .reader, [data-contrast="high"] [data-reading-theme], [data-hc="on"] .reader, [data-hc="on"] [data-reading-theme] { --rbg: #ffffff; --rsurface: #ffffff; --rtext: #000000; --rmuted: #26313d; --rfaint: #3a4551; --rline: #000000; --rchrome: rgba(255,255,255,.98); --ricon: #000000; --raccent: #0a5e73; --rcoral: #a5122b; --rhl: rgba(10,94,115,.30); --rsel: rgba(10,94,115,.28); --rsheet: #ffffff; --rdim: rgba(0,0,0,.55); --rband: rgba(10,94,115,.20); } [data-contrast="high"][data-theme="dark"] .reader, [data-contrast="high"][data-theme="dark"] [data-reading-theme], [data-contrast="high"] .reader[data-reading-theme="dark"], [data-hc="on"][data-theme="dark"] .reader, [data-hc="on"][data-theme="dark"] [data-reading-theme], [data-hc="on"] .reader[data-reading-theme="dark"] { --rbg: #000000; --rsurface: #000000; --rtext: #ffffff; --rmuted: #d7dde6; --rfaint: #b9c0cc; --rline: #ffffff; --rchrome: rgba(0,0,0,.98); --ricon: #ffffff; --raccent: #7fe3ff; --rcoral: #ff9db0; --rhl: rgba(127,227,255,.32); --rsel: rgba(127,227,255,.30); --rsheet: #000000; --rdim: rgba(0,0,0,.7); --rband: rgba(127,227,255,.22); } /* V3 guard. This sheet ships no text-shadow today; kept as a standing rule so a later decorative shadow can't erode the contrast this layer buys. */ [data-contrast="high"] *, [data-hc="on"] * { text-shadow: none !important; } /* Shell rules below are a LOCAL addition with no V3 counterpart — the designer specified only the reader half. They still match the unchanged spec §07 prose ("Every control gets a visible border and a 3px focus ring"), so they stay. */ [data-contrast="high"] button, [data-hc="on"] button, [data-contrast="high"] input, [data-hc="on"] input, [data-contrast="high"] select, [data-hc="on"] select, [data-contrast="high"] .btn, [data-hc="on"] .btn, [data-contrast="high"] .chip, [data-hc="on"] .chip, [data-contrast="high"] .control, [data-hc="on"] .control { border: 2px solid currentColor; border-radius: var(--r-ctl); font-family: var(--f-display); font-weight: 700; } [data-contrast="high"] a, [data-hc="on"] a { text-decoration: underline; font-weight: 600; } [data-contrast="high"] :focus-visible, [data-hc="on"] :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } [data-contrast="high"] .cover-card__art, [data-hc="on"] .cover-card__art, [data-contrast="high"] .card, [data-hc="on"] .card, [data-contrast="high"] .plancard, [data-hc="on"] .plancard { border-width: 2px; } /* ========================================================================== 5. RESET + BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* NO scroll-behavior:smooth on the root: Chrome cancels the smooth scroll to a URL fragment during page load, so every server-round-trip #catalog anchor (chips, topic picks, search submits) landed at the TOP of the page and the filters looked broken. Instant-and-correct beats smooth-and-cancelled. */ html { scroll-behavior: auto; } body { margin: 0; font-family: var(--f-ui); font-size: var(--fs-body); line-height: var(--lh-body); background: var(--paper); color: var(--text2); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Links carry no global colour: the system uses teal for UI links and coral for in-product action links, and the design files disagree about the default. Use .link-teal / .link-coral explicitly. */ a { color: inherit; text-decoration: none; } img, svg, video { max-width: 100%; } img { display: block; } h1, h2, h3, h4 { font-family: var(--f-display); color: var(--text); margin: 0; letter-spacing: var(--ls-tight); font-weight: 700; } h1 { font-weight: 800; letter-spacing: var(--ls-display); } p { margin: 0; } ul, ol { margin: 0; padding: 0; } button { font: inherit; color: inherit; } hr.rule { height: 1px; background: var(--hair); border: 0; margin: 22px 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Global focus ring — the one the Design System specifies, made theme-safe. */ :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--focus); border-radius: var(--r-sm); } /* --- ONE focus ring per control ------------------------------------------- The rule above applies to everything, including a bare sitting inside a styled box. Wherever a control ALSO recoloured its own border on focus, the two stacked: teal border, 3px white gap, teal ring — which reads as two concentric rounded rectangles around one field. This has now been reported three times on three different fields, each time fixed locally, each time reappearing on the next field someone built. So the contract lives here, once, next to the rule that causes it: · the element the reader SEES as the control draws the ring · a bare input inside a styled wrapper draws nothing · nothing recolours its border on focus AND draws a ring The ring is canonical (it is what the Design System specifies); the border-recolour was the ad-hoc addition, so the borders went, not the ring. Adding a new wrapper-style field? Add its class to BOTH lists below and give it no focus rules of its own. `:focus-within` rather than `:has(:focus-visible)` deliberately: it needs no `:has()` support, and text inputs match :focus-visible on mouse click anyway, so the two are equivalent here. */ :is(.field, .hl-search, .filterbar__search, .tut-field, .gnav-sheet-search, .dl-input, .acct__savebar) :is(input, textarea, select):focus-visible { box-shadow: none; outline: none; } :is(.field, .hl-search, .filterbar__search, .tut-field, .gnav-sheet-search, .dl-input, .acct__savebar):focus-within { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--focus); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ========================================================================== 6. TYPOGRAPHY UTILITIES ========================================================================== */ .t-display { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); } .t-h1 { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: var(--ls-display); } .t-h2 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: var(--ls-heading); } .t-h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.28; letter-spacing: var(--ls-tight); } .t-body { font-size: 16px; line-height: 1.6; color: var(--text2); } .t-body-sm { font-size: 15px; line-height: 1.55; color: var(--muted); } .t-small { font-size: 13px; line-height: 1.55; color: var(--muted); font-weight: 600; } .t-caption { font-size: 12.5px; line-height: 1.5; color: var(--faint); font-weight: 500; } .t-num { font-family: var(--f-display); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--teal); margin: 0; } .eyebrow--wide { letter-spacing: .16em; font-size: 12px; } .eyebrow--sec { letter-spacing: .14em; font-size: 12px; } .eyebrow--card { letter-spacing: .1em; font-size: 12px; } .eyebrow--sm { letter-spacing: .11em; font-size: 10px; } .eyebrow--green { color: var(--green); letter-spacing: .08em; } .eyebrow--faint { color: var(--faint); } .eyebrow--on-ink{ color: var(--on-ink-accent); } .thead { font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .link-teal { color: var(--teal); font-weight: 600; cursor: pointer; } .link-coral { color: var(--coral); font-weight: 600; cursor: pointer; } .link-strong{ color: var(--text); font-family: var(--f-display); font-weight: 600; font-size: 14px; cursor: pointer; } .link-teal:hover, .link-coral:hover { opacity: .82; } @media (max-width: 859px) { .t-display { font-size: var(--fs-display-m); } } /* ========================================================================== 7. BUTTONS primary (ink pill) · secondary (outline) · gradient · ghost One primary action per surface. Gradient is reserved for the top-level membership offer — never an in-page primary. Prices live in text links. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-btn); line-height: 1.2; text-align: center; white-space: nowrap; border: none; background: none; cursor: pointer; } /* PRIMARY — ink pill */ /* A control that must be a