/* =========================================================================== Cortex University — CLASSIC REGISTER, full-portal skin ("antiquarian"). Loaded on every page from base.html, LAST, and every rule in it is scoped to `body.reg-classic`. On the default (modern) register not one selector here matches, so the modern portal renders byte-identical with or without this file. Switch registers with the nav's style toggle (lynx_ui cookie) — that toggle IS the kill switch this change ships behind (CLAUDE.md §0.7). WHY A SKIN AND NOT A SECOND SET OF PAGES. The portal already has a UI-register axis (i18n.resolve_ui / SUPPORTED_UIS / ui_asset / body.reg-), orthogonal to light-dark, and portal.css is written almost entirely against the shared --bg/--fg/--border/--accent tokens. So the whole institution can change register by repointing about a dozen custom properties on — every page, every menu, every table follows, and there is exactly one copy of the content and the markup. Duplicating 200-odd templates under /old would have produced the same picture and a second portal to maintain. THE DESIGN. A university prospectus printed in 1890: laid cream paper, Oxford blue ink, an oxblood second ink, gold leaf on the arms only, Cinzel (Roman inscriptional capitals) for anything engraved and EB Garamond for anything read. Square corners, hairline rules, no gradient used as decoration, no glow, and no shadow a sheet of paper could not cast. ART. Nothing new is drawn. Heraldry resolves through ui_asset(), which prefers /static/ui/classic/* and falls back to a sibling register only when the classic plate does not exist — so the classic heralds, badges, seals and frames already shipped are what the register wears, and no modern mark ever appears on it. ORDER OF BUSINESS BELOW §1 tokens — the dozen properties that re-skin most of the portal §2 the sheet — paper ground, grain, type §3 chrome — top nav, brandline, footer, boot splash §4 primitives — headings, links, buttons, inputs, badges, tables §5 containers — cards → ruled entries, panels, heroes §6 the doors — the login/vault HUD, redrawn as a sealed letter §7 set pieces — landing, catalogue, gamification, the manifesto =========================================================================== */ /* ═══ §0 · The reading face ═══════════════════════════════════════════════ Cinzel (the engraving face) is already declared globally in tokens-classic.css. EB Garamond is declared here because it is new with this skin and nothing outside the classic register uses it — a browser on the modern register parses these four rules and downloads none of the files, since no element ever asks for the family. Self-hosted OFL, latin subset; see /static/fonts/README.txt and /static/fonts/LICENSES/ebgaramond-OFL.txt. */ @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/classic/ebgaramond-400.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/classic/ebgaramond-400i.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/classic/ebgaramond-500.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/classic/ebgaramond-600.woff2") format("woff2"); } /* ═══ §1 · Tokens ═════════════════════════════════════════════════════════ Custom properties inherit, so redefining them ON beats the :root[data-theme] block in base.html for the entire document — including light mode, which is why the classic register looks the same in both themes. That is deliberate: "dark mode" is not a thing a printed prospectus has. */ body.reg-classic { /* Inks */ --o-navy: #10243F; --o-navy-deep: #0A1729; --o-navy-soft: #37506F; --o-oxblood: #6E1622; --o-oxblood-lt: #8C2531; --o-gold-ink: #A9873C; /* THE GOLD AT TEXT WEIGHT. --o-gold-ink is the register's gold for STROKES and RULES — hairlines, keylines, the boot rule, the crest outline — where contrast is decorative and 3:1 never applies. Measured as an INK it is 3.05:1 on --o-paper and 3.21:1 on --o-paper-hi: under AA for every one of the kickers, eyebrows and crest labels that were set in it (all of them small, none of them "large text" at any dial setting). This is the same gold taken down to 31% lightness — 4.84:1 on --o-paper, 5.10:1 on --o-paper-hi — which is still recognisably antique gold and not a brown. Use it wherever gold is being READ; keep --o-gold-ink for what is drawn. */ --o-gold-text: #856618; --o-gold-pale: #CBAE72; --o-paper: #F7F3E8; --o-paper-hi: #FCF9F1; --o-rule: #BCAE8B; --o-rule-faint: #D8CDB2; /* …repointed onto the tokens portal.css actually consumes. */ color-scheme: light; --bg: var(--o-paper); --bg-elev: var(--o-paper-hi); --fg: #1E1A14; --muted: var(--o-navy-soft); --border: var(--o-rule); --accent: #7A5E18; /* deep gold-bronze: raw gold fails AA on cream */ --accent-strong: var(--o-oxblood); --danger: var(--o-oxblood); --ok: #1F4D2E; --warn: #8A5A12; /* base.html defines --gold-text per THEME (#e0b341 dark / #856618 light). This register is cream in both themes (see §"The Theme toggle is not offered in this register"), so on the live site — served `data-theme="dark" data-ui="classic"` — the surface came from the lines above and the gold did NOT: #e0b341 landed on --o-paper-hi at 1.87:1. pa11y flagged it on `.about-pillar dt`; the same miss reached all thirteen `var(--gold-text)` rules in portal.css. The token belongs in this repointed list like every other one portal.css consumes. */ --gold-text: var(--o-gold-text); /* Nothing on a printed page has a radius. */ --radius: 0px; --radius-lg: 0px; --radius-pill: 0px; /* ── The spacing scale, re-cut in --reg-unit (see §1a) ─────────────────── portal.css declares its whole rhythm in PX on :root — --space-*, --nav-h — so raising the type alone grows the words and leaves every gutter, pad and gap at its modern size: the page comes out cramped, text crowding rules it used to clear. Browser zoom does not have this problem because it scales the pixel itself. So the register restates the rhythm in --reg-unit — "one pixel, as this register measures it" — and the page enlarges as one object. Each number below is portal.css's own px value with the unit taken off it, so the two files stay legibly in step. `:root` is (0,1,0); `body.reg-classic` is (0,1,1), so these win without !important and lose to nothing except an author override here. */ --space-xs: calc(4 * var(--reg-unit, 1px)); --space-sm: calc(8 * var(--reg-unit, 1px)); --space: calc(14 * var(--reg-unit, 1px)); --space-md: calc(20 * var(--reg-unit, 1px)); --space-lg: calc(28 * var(--reg-unit, 1px)); --space-xl: calc(44 * var(--reg-unit, 1px)); --nav-h: calc(49 * var(--reg-unit, 1px)); /* Paper casts a short, warm shadow — not a black one. */ --shadow-sm: 0 1px 0 rgba(90, 72, 34, 0.10); --shadow-md: 0 2px 8px rgba(90, 72, 34, 0.14); --shadow-lg: 0 6px 20px rgba(90, 72, 34, 0.16); --ring: 0 0 0 2px var(--o-oxblood); --font-body: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-display: "Cinzel", "Trajan Pro", Optima, "Palatino Linotype", Georgia, serif; --transition: 130ms linear; } /* The one thing that cannot be fixed on . portal.css paints `html, body { background: var(--bg) }`, and sits OUTSIDE the element the tokens above are declared on, so it keeps the dark theme's --bg — which shows through wherever the body box is shorter than the viewport (short pages, overscroll, the gap under a footer). Rather than raise the token block's specificity over base.html's inline `:root[data-theme]` style — which loses on source order, being in after this file — is given the paper colour directly. `[data-ui="classic"]` is the register attribute base.html stamps on and portal.js keeps in sync, so this tracks the toggle. */ html[data-ui="classic"] { background: #F7F3E8; color-scheme: light; } /* ═══ §1a · THE DIAL ══════════════════════════════════════════════════════ ┌──────────────────────────────────────────────────────────────────────┐ │ --reg-dial is the ONE number that sets how large the classic │ │ register is set. 1 = exactly today's modern sizing. 1.32 = the │ │ shipped value, which puts the reading face at 20.5px and is what │ │ "reads like a book at 100% zoom" came out to when looked at. │ │ Nudge it here and nowhere else: type, gutters, padding, nav height │ │ and every rem in every sheet move together, exactly as browser zoom │ │ moves them. │ │ Sensible range 1.15 (restrained) … 1.45 (large-print prospectus). │ │ Do not raise it past 1.32 without re-checking the three-up card │ │ columns: 1.44 was measured strangling them. │ │ --reg-unit is the dial as *applied* — ONE PIXEL, as this register │ │ measures it — and is what the rest of the sheet reads. │ └──────────────────────────────────────────────────────────────────────┘ WHY IT LIVES ON AND NOT ON . `rem` resolves against the ROOT font size, and portal.css sets it with `html, body { font-size: 15.5px }`. The register's old `body.reg-classic { font-size: 17px }` therefore moved only the text that inherits — every `rem` in portal.css, gamification.css and in this very sheet (`.auth-label { font-size: 0.64rem }`, the button plates, the kickers) kept measuring against 15.5px and stayed modern-sized. Setting the root instead makes one dial move all of it. `html, body` is (0,0,1) and `html[data-ui="classic"]` is (0,1,1), so this wins on specificity, not on source order. The dial deliberately does NOT scale the *viewport* breakpoints, because those are properties of the device, not of the register — a phone must still get the phone layout. That is the one way this differs from zoom, and it is the correct difference. WHY IT RAMPS, AND WHY IT USED TO JUMP. A phone has no room to spend on a prospectus's generosity, so the dial is eased back on a narrow window. That easing was first written as a media query — full dial above 640px, ×0.88 at or below — which is a step function: dragging a window across 641px resized the whole page by 13.6% in one frame. /old's sheet had already argued the other way and ramped with clamp(), on the grounds that a page should never jump as it is resized, and it is right; this is the same shape applied to the live pages. None of the easing below 400px of window (a phone is a phone), all of the dial by 1280px (the width the "reads like a book" judgement was made at), a straight line in between, and the two endpoints are exactly the two values the step function used, so nothing got bigger or smaller at either end — only the middle stopped snapping. WHY A LENGTH AND NOT A NUMBER. The ramp has to be driven by 100vw, and CSS calc() cannot divide a length by a length, so there is no way to arrive at a plain unitless factor. --reg-unit is therefore the ramp expressed as the thing it is used for: one scaled pixel. `N * var(--reg-unit)` is a length (number × length), which is what every consumer wanted anyway. The `/ 880` is the ramp's run in px — 1280 − 400 — carried as a bare number so the division stays length ÷ number, which calc() does allow. */ html[data-ui="classic"] { --reg-dial: 1.32; /* ←── NUDGE THIS AND NOTHING ELSE */ --reg-phone: 0.88; /* the fraction of the dial a ≤400px window is set at */ --reg-unit: clamp( calc(var(--reg-dial) * var(--reg-phone) * 1px), calc(var(--reg-dial) * var(--reg-phone) * 1px + var(--reg-dial) * (1 - var(--reg-phone)) * (100vw - 400px) / 880), calc(var(--reg-dial) * 1px) ); font-size: calc(15.5 * var(--reg-unit, 1px)); } /* ═══ §2 · The sheet ══════════════════════════════════════════════════════ */ /* portal.css paints two accent-coloured radial washes on . On paper they read as a stain. Replace with the printer's vignette + a faint parchment grain, big and pale enough that the tile's repeat is not readable. */ body.reg-classic { background: radial-gradient(120% 85% at 50% -15%, rgba(255, 254, 249, 0.85), transparent 66%), radial-gradient(100% 100% at 50% 125%, rgba(120, 100, 60, 0.05), transparent 60%), var(--o-paper); background-attachment: fixed; /* EB Garamond has a small x-height, so even at parity with a sans it reads undersized. The size now comes from the root (§1a) — this only has to stop portal.css's `html, body { font-size: 15.5px }` from pinning back to the absolute modern value, which `1rem` does by definition. */ font-size: 1rem; line-height: 1.62; font-kerning: normal; font-variant-ligatures: common-ligatures; font-variant-numeric: oldstyle-nums proportional-nums; } body.reg-classic::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("/static/ui/classic/patterns/parchment.png") repeat; /* The tile was re-cut seamless and SQUARE on 2026-08-10 (256×256, was 108×160) and is lighter and less amber than the plate this opacity was first tuned against, so the grain now reads subtler at the same 0.13. If the paper ever looks flat, this is the number — not the image. */ background-size: 460px auto; opacity: 0.13; mix-blend-mode: multiply; } /* Tabular data and money want lining figures — old-style numerals in a column do not line up, which is the one place they are wrong. */ body.reg-classic table, body.reg-classic .cat-price, body.reg-classic .ust-tile-value, body.reg-classic .marks-score, body.reg-classic code, body.reg-classic pre, body.reg-classic .mono { font-variant-numeric: lining-nums tabular-nums; } /* ═══ §3 · Chrome ═════════════════════════════════════════════════════════ */ /* Top nav: a ruled running head, not a floating bar. */ body.reg-classic .topnav { background: transparent; backdrop-filter: none; border-bottom: 1px solid var(--o-navy); box-shadow: none; } body.reg-classic .topnav-brandline { border-bottom: 1px solid var(--o-rule-faint); } body.reg-classic .brand-text, body.reg-classic .nl-wordmark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--o-navy); } body.reg-classic .brand-text-accent, body.reg-classic .nl-wordmark-accent { color: var(--o-oxblood); } /* `/newsletter` at 390 laid out a 423px document — classic only. Three things compound: `.nl-masthead-text` is a flex/grid item with the default `min-width: auto`, so it cannot shrink below its own min-content; the wordmark is two adjacent spans with NO whitespace between them, so "CortexUniversity" is a single unbreakable word and therefore that min-content; and the rule above sets it uppercase at 0.14em, which is what pushes the one word past the viewport. Modern renders the same markup at 238px and never overflows, so the whole repair is scoped here and modern is left untouched. `min-width: 0` ALONE does not fix it — measured: the item shrinks 307→224px and the wordmark still overflows it at 307px. A break opportunity is required. It is a U+200B ZERO WIDTH SPACE at the seam between the two spans, i.e. at the real word boundary, so the masthead stacks CORTEX / UNIVERSITY the way a printed one does. NOT `overflow-wrap: anywhere` on `.nl-wordmark`, which was the obvious reach and is the banned kind of fix: measured, it chops the wordmark mid-word — two fragments at 390 and three at 320 — because with one unbreakable word it can only break wherever the line happens to run out. */ body.reg-classic .nl-masthead-text { min-width: 0; } body.reg-classic .nl-wordmark-accent::before { content: "\200B"; } /* …and the seam itself. portal.css now gives the accent the header's 2px, but 2px is a gap this register cannot see: it tracks the masthead at 0.14em, which computes to 3.72px BETWEEN EVERY LETTER, so a 2px word space is narrower than the letter spacing and the masthead read "CORTEXUNIVERSITY". The gap has to beat the tracking, so it is stated in em and tracks the dial. */ body.reg-classic .nl-wordmark-accent { margin-left: 0.34em; } /* Menu items in small caps, underlined on hover — a table of contents. */ body.reg-classic .nav-link, body.reg-classic .nav-dd-toggle, body.reg-classic .nav-control { font-variant-caps: small-caps; letter-spacing: 0.09em; font-weight: 500; border-radius: 0; background: transparent; border-color: transparent; color: var(--o-navy); } body.reg-classic .nav-link:hover, body.reg-classic .nav-dd-toggle:hover, body.reg-classic .nav-control:hover { color: var(--o-oxblood); background: transparent; border-bottom: 1px solid var(--o-oxblood); } body.reg-classic .nav-link[aria-current="page"], body.reg-classic .nav-link.is-active { color: var(--o-oxblood); border-bottom: 1px solid var(--o-gold-ink); background: transparent; } body.reg-classic .nav-dd-menu { background: var(--o-paper-hi); border: 1px solid var(--o-navy); border-radius: 0; box-shadow: var(--shadow-md); } /* ── The Theme toggle is not offered in this register ───────────────────── §1 repoints --bg/--bg-elev/--fg onto cream ON BODY, which beats base.html's `:root[data-theme]` block for the whole document — so the classic register is the same paper in `data-theme="dark"` as in `"light"`. That is the register's premise, stated at §1 ("dark mode is not a thing a printed prospectus has"), and other rules now DEPEND on it: portal.css gates the ivory cut of the heraldic marks on "dark theme AND a register that is not the always-cream one", precisely because the theme alone is the wrong test. The bug the 2026-08-13 QA pass found is therefore not the palette. It is that #theme-toggle was still offered here: clicking it flipped `data-theme` between dark and light and changed nothing a visitor could see — measured identical in both states (html #F7F3E8, card #FCF9F1, body ink #1E1A14). A control that does nothing is worse than an absent one, so the register that has no themes does not advertise a theme switch. `display: none` (not `disabled`, not `visibility`) because a greyed-out switch still asks to be understood, and because it takes the button out of the accessibility tree and the tab order along with the layout — the Classic/Modern toggle beside it stays, and is one tap from a register that DOES have both themes. Nothing is lost: the `lynx_theme` cookie is untouched here, so a visitor who set light or dark in the modern register still finds it there. The rule is keyed on the body class portal.js swaps client-side, so the control reappears the moment the register is toggled back, with no reload. */ body.reg-classic #theme-toggle { display: none; } /* Footer: the colophon. */ body.reg-classic .site-footer { border-top: 1px solid var(--o-navy); background: rgba(16, 36, 63, 0.03); } body.reg-classic .site-footer-brand > strong { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.16em; } body.reg-classic .site-footer-motto { font-style: italic; color: var(--o-oxblood); } body.reg-classic .site-footer-links { font-variant-caps: small-caps; letter-spacing: 0.08em; } /* Boot splash: a title page, not a HUD. The SVG crest strokes and the wordmark are re-inked; the art backdrop is dimmed to a paper wash. */ body.reg-classic .boot-splash { background: var(--o-paper); } body.reg-classic .boot-splash-art { opacity: 0.10; filter: sepia(0.65) saturate(0.5); } body.reg-classic .boot-splash-scrim { background: linear-gradient(180deg, rgba(247, 243, 232, 0.7), var(--o-paper)); } body.reg-classic .boot-crest-ring, body.reg-classic .boot-crest-shield, body.reg-classic .boot-crest-glyph { stroke: var(--o-gold-ink); fill: none; } body.reg-classic .boot-wordmark { color: var(--o-navy); text-transform: uppercase; letter-spacing: 0.18em; } body.reg-classic .boot-wordmark-accent { color: var(--o-oxblood); } /* The same repair as `.nl-wordmark-accent` in §2, for the same reason, on the FIRST thing a mobile visitor sees. The wordmark is two adjacent spans with no whitespace between them, so "CortexUniversity" is one unbreakable word; the rule above sets it uppercase at 0.18em on top of the register's dial, and at 390px that one word measured 428px inside a 342px column. It could not wrap, and `.boot-splash-inner` was a grid item sized to max-content, so instead of shrinking it overflowed to a 476px box — off centre, the wordmark clipped to "CORTEX UNIVERS" and the motto to "VERITAS · INGENIUM · PROGRE". portal.css now caps the box at the viewport; this is the break opportunity that lets it stack CORTEX / UNIVERSITY, at full size, the way a title page would set it. A U+200B ZERO WIDTH SPACE at the real word boundary — never `overflow-wrap: anywhere`, which breaks wherever the line runs out. */ body.reg-classic .boot-wordmark-accent::before { content: "\200B"; } body.reg-classic .boot-rule { background: var(--o-gold-ink); box-shadow: none; } body.reg-classic .boot-motto { color: var(--o-oxblood); font-style: italic; } /* ═══ §4 · Primitives ═════════════════════════════════════════════════════ */ body.reg-classic h1, body.reg-classic h2, body.reg-classic h3, body.reg-classic .cat-title, body.reg-classic .guide-title, body.reg-classic .ov-title, body.reg-classic .page-header h1 { font-family: var(--font-display); font-weight: 700; color: var(--o-navy); letter-spacing: 0.08em; line-height: 1.24; } body.reg-classic h1, body.reg-classic .cat-title, body.reg-classic .guide-title, body.reg-classic .ov-title { text-transform: uppercase; letter-spacing: 0.13em; } body.reg-classic h2 { text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.2rem; } body.reg-classic a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--o-rule); } body.reg-classic a:hover { color: var(--o-oxblood); text-decoration-color: var(--o-oxblood-lt); } /* Buttons: struck plates. Overrides the P21 red→gold gradient in portal.css, which was a colour patch on the modern button shape; this is the shape. ┌── A PAGE BUTTON IS NOT A CHROME CONTROL. Read this before widening the │ selector back to a bare `button`. ───────────────────────────────────── │ A PAGE BUTTON is an action in the document: Submit, Apply, Save, Enrol, │ the dashboard's one call to action. It is read as a phrase, it is sized │ by its own text, and it is the thing this plate was designed for — │ Cinzel caps, 0.14em of tracking, 1.4em of padding a side. │ A CHROME CONTROL is an affordance in the shell around the document: the │ nav's theme/register/locale pills, the logout link-button, the chat │ dock's 26px icon buttons. Those are sized in FIXED PIXELS by the │ component that owns them, they are usually a glyph rather than a word, │ and they sit in rows that are already at their width budget. │ The rule used to say `body.reg-classic button` and hit both. With the │ dial at 1.32 that dressed every 26px icon as an engraved plate — │ 0.76rem is 15.5px and 1.4em of padding is ~22px a side — which cost │ the chat dock its Close button (the head is a nowrap row: the actions │ grew 182px → 240px and the last button was clipped past the panel │ edge) and pushed the nav cluster's min-content to 430px, pinning │ scrollWidth at 446 and scrolling every signed-in page sideways on a │ phone. Both from one selector, so both are fixed in one place. │ THE EXEMPTION, and why it is a container test and not a list of classes. │ Chrome is not a property of a button, it is a property of WHERE the │ button lives — `.topnav` and `.cchat` are the two shells that persist │ across every page, and everything inside them is by definition an │ affordance of the shell. A container test also covers the controls │ those shells have not grown yet, which a class list would not. │ `button.link` is the third case and the only class-based one: it is a │ button that has explicitly asked to be typography rather than a │ control, so a plate is exactly what it is opting out of. │ :where() keeps the exemption at ZERO specificity, so this selector still │ weighs (0,1,2) — the same as the bare `button` it replaces. That │ matters: several rules below (.btn-link, .auth-submit, .cchat-send) │ are (0,2,1) and are meant to win over it. Raising this to (0,2,2) │ would silently invert all of them. The three :not()s are chained │ rather than written as one comma-separated list because the scope │ checker in design/ANTIQUARIAN_REGISTER.md splits selectors on commas; │ a list inside :not() would read to it as three unscoped selectors. └──────────────────────────────────────────────────────────────────────── */ body.reg-classic button:not(:where(.topnav *)):not(:where(.cchat *)):not(:where(.link)), body.reg-classic .btn-primary, body.reg-classic .btn-secondary, body.reg-classic .btn-tertiary, body.reg-classic .landing-btn, body.reg-classic .cat-apply-btn, body.reg-classic .auth-submit { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; border-radius: 0; border: 1px solid var(--o-navy); background: transparent; background-image: none; color: var(--o-navy); box-shadow: none; padding: 0.72em 1.4em; } body.reg-classic button.primary, body.reg-classic .btn-primary, body.reg-classic .landing-btn-primary { background: var(--o-navy); background-image: none; color: var(--o-paper-hi); border-color: var(--o-navy); box-shadow: inset 0 0 0 1px var(--o-paper-hi), inset 0 0 0 2px var(--o-navy); } /* Same exemption on the hover state, for the same reason: a chrome control that fills solid navy on hover is a plate again, just later. */ body.reg-classic button:not(:where(.topnav *)):not(:where(.cchat *)):not(:where(.link)):hover, body.reg-classic .btn-secondary:hover, body.reg-classic .btn-tertiary:hover { background: var(--o-navy); color: var(--o-paper-hi); border-color: var(--o-navy); filter: none; } body.reg-classic button.primary:hover, body.reg-classic .btn-primary:hover, body.reg-classic .landing-btn-primary:hover { background: var(--o-oxblood); border-color: var(--o-oxblood); filter: none; box-shadow: inset 0 0 0 1px var(--o-paper-hi), inset 0 0 0 2px var(--o-oxblood); } body.reg-classic .btn-link, body.reg-classic .primary-link { font-family: var(--font-body); text-transform: none; letter-spacing: 0; } /* Fields: ruled lines to be written on. */ body.reg-classic input[type="text"], body.reg-classic input[type="email"], body.reg-classic input[type="password"], body.reg-classic input[type="search"], body.reg-classic input[type="tel"], body.reg-classic input[type="url"], body.reg-classic input[type="number"], body.reg-classic input[type="date"], body.reg-classic select, body.reg-classic textarea { font-family: var(--font-body); font-size: 1rem; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--o-navy-soft); border-radius: 0; box-shadow: none; } /* The login/verify HUDs are a FIXED dark scheme, register-independent (see .auth-screen / .verify-screen). The classic field restyle above must NOT reach them: it repainted the typed text with the classic register's dark ink (--fg = #1E1A14) on the HUD's dark-navy input shell, so the username you typed was invisible (BL visual-fix #2). Their own light-on-dark rules in portal.css (color: var(--auth-fg)) are the right ones in every register, so they are deliberately excluded from the list above. */ body.reg-classic textarea { border: 1px solid var(--o-navy-soft); } body.reg-classic input:focus, body.reg-classic select:focus, body.reg-classic textarea:focus { outline: none; border-bottom-color: var(--o-oxblood); box-shadow: 0 1px 0 0 var(--o-oxblood); } body.reg-classic label { font-variant-caps: small-caps; letter-spacing: 0.07em; } /* …but ONLY on the label's own text. `font-variant-caps` INHERITS, and every form on this portal (register, set-password, reset) wraps its control in its