/* ============================================================================ Apex Minds — "The Ruled Page" system layer. See DESIGN.md. Loaded AFTER styles.v2.css. Two jobs: 1. Remap the existing v2 token names onto the system palette so the whole app (list / detail) adopts it with no per-component edits. 2. Add the landing-hero + search-page components. A working instrument, not a campaign. The зошит у клітинку concept survives as ACCENT, not wallpaper: the faint grid rules only surfaces that carry mathematics, the red pencil appears only where the archive corrects its own printed source, and nothing else borrows the metaphor. Neutrals and typefaces are inherited from Apex Talent (indigo/bone, plus Unbounded / Inter / Caveat); the accent is NOT. #5BF55B is a poster colour and unreadable across 162 pages of results, so cobalt — the blue pen the зошит is written in — stays the single action colour. Themes are NOT colour-coded. ============================================================================ */ :root { /* ── Neutrals (inherited: Apex Talent indigo / bone) ──────────────────── */ --ground:#F6F6EE; /* the page — bone-100 */ --card:#FBFBF2; /* any raised surface — bone-50 */ --ink:#191E36; /* all primary text — indigo-900 */ --ink-2:#4A5170; /* secondary text — 6.9:1 on ground */ --line:#D8D6CA; /* rules and dividers — never text */ --grid:#DDE2F2; /* the 23px клітинка ruling — decorative only */ /* THE INK-MUTED FLOOR. #6A6F7E is the lightest colour permitted to set text anywhere, at any size: 4.60:1 on --ground, 4.93:1 on --card. The retired --ink-3 (#8A8F9C) measured 2.97:1 and was the single cause of every contrast failure in the 2026-09-20 audit. It survives ONLY as a hairline / icon stroke and must never be given to a text node. */ --ink-muted:#6A6F7E; --ink-3:#8A8F9C; /* DEPRECATED for text — strokes + hairlines only */ /* ── Accent: the blue pen (action) ────────────────────────────────────── */ --cobalt:#2C46D8; /* fills, borders, focus ring, selected state */ --cobalt-deep:#1E2E9A; /* cobalt as TEXT — 10.8:1 on ground */ --cobalt-wash:#ECEEFB; /* hover beds, chip fills, selected rows */ --cobalt-hover:#243AB4; /* ── Accent: the red pencil (editorial correction ONLY) ───────────────── */ /* Not an error colour and not a destructive colour. If red shows up for any other reason the metaphor is spent and real corrections stop reading. */ --red:#D6453D; --red-ink:#B3241C; --red-wash:#FBE9E7; /* ── Accent: sprout (inherited) — the handwritten voice + confirmation ── */ /* #5BF55B never sets text; --sprout-ink does (5.2:1 on ground). */ --sprout:#5BF55B; --sprout-ink:#007E0D; --sprout-wash:#DAF6D8; /* ── Type ─────────────────────────────────────────────────────────────── */ /* Every face here sets Ukrainian in its own glyphs. Fraunces and DM Sans were removed 2026-09-20: both are Latin-only upstream, so the 59px hero rendered in Georgia and all Cyrillic body text fell to the OS default. The --font-serif alias (it pointed at Unbounded) was retired 2026-09-27, when a real serif arrived: a rule naming "serif" and getting a geometric sans was a trap. The display face is --font-display; the one serif is --font-math. */ --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display:'Unbounded', system-ui, sans-serif; --font-script:'Caveat', cursive; /* A problem's own text — statement, answer, solution — is set in the face its mathematics is drawn in, so prose and formulas are one typeface. KaTeX_Main next: the same design, and it carries the ≤ ≥ ⇒ that the CMU subset leaves out. */ --font-math:'CMU Serif', KaTeX_Main, 'Times New Roman', serif; /* ── THE SIZE RAMP. Seven steps, every one a whole pixel. ────────────── This replaces 26 fractional rem values (.6 / .62 / .7 / .72 / .74 / .75 / .78 / .8 / .82 / .83 / .84 / .85 / .855 / .86 / .875 / .88 / .9 / .92 / .95 / .96 / .98 / 1 / 1.02 / 1.05 / 1.06 / 1.08 …), of which EIGHT rendered below the 13px floor this system claims to hold and eight more landed inside a 1.6px band — 13.12 / 13.6 / 13.68 / 13.76 / 14.08 / 14.4 / 14.72 — where no reader can perceive a step. A ramp whose neighbours differ by half a pixel is not a hierarchy; it is noise that also refuses to align. Sizes are px, not rem, because a ramp built on hundredths of a root is how the fractions got here. Two sizes carry prose, and the split is deliberate: --fs-body is the SCANNING voice (a three-line snippet in a result card, an input), and --fs-read is the READING voice (a statement or solution the student stays inside for an hour). They never appear on the same surface, so the 1px difference is never asked to signal hierarchy. */ --fs-micro:13px; /* the floor — counts, captions, chips, eyebrows */ --fs-label:14px; /* facet rows, metadata, nav, buttons, tabs */ --fs-body:16px; /* inputs, result snippets, UI prose */ --fs-read:17px; /* statement + solution: the mathematics, and the largest body text on the site by intent */ --fs-lead:20px; /* hero subtitle, dialog + section titles */ /* Problem text in --font-math. NOT a new step: it is the 20px step. Computer Modern's x-height is 0.43em to Inter's 0.55em, so CMU at 17px reads a size smaller than the Inter it replaces; at 20px it matches Inter at 16–17px, and it is where KaTeX already drew the formulas (1.21em of 17px ≈ 20.6px) — the math keeps its size, the words join it. */ --fs-math:var(--fs-lead); --fs-title:clamp(26px, 3.2vw, 34px); /* problem title */ --fs-display:clamp(34px, 5.2vw, 58px); /* the landing hero, and nothing else */ /* ── Remap v2 tokens onto the system palette (one source of truth) ────── */ --bg-primary:#F6F6EE; --bg-secondary:#FBFBF2; --text-primary:#191E36; --text-secondary:#4A5170; --border-color:#D8D6CA; --color-primary-50:#ECEEFB; --color-primary-100:#DDE2F8; --color-primary-200:#C2C9F0; --color-primary-500:#2C46D8; --color-primary-600:#243AB4; --color-primary-700:#1E2E9A; --color-primary-800:#172478; --brand-blue:#2C46D8; --brand-navy:#191E36; --brand-blue-50:#ECEEFB; --brand-blue-700:#1E2E9A; --color-gray-50:#F6F6EE; --color-gray-100:#F1EFE5; --color-gray-200:#D8D6CA; --color-gray-300:#C6C3B4; /* ── Depth: FLAT AT REST ──────────────────────────────────────────────── */ /* Nothing that sits still casts a shadow. Separation is the ground→card tonal step, a 1px hairline, and the grid. Hover changes colour and border; it never lifts. The retired --shadow-lg was a 40px cobalt bloom under a 1px border — the exact combination this rule exists to prevent. --shadow-sm/-md are kept as no-ops so v2 rules that still reference them resolve to nothing instead of to a stale glow. */ --shadow-sm:none; --shadow-md:none; --shadow-lg:none; /* The one real shadow: a surface that has taken over the screen. */ --shadow-overlay:0 8px 32px -12px rgba(25,30,54,.28); /* ── Shape ──────────────────────────────────────────────────────────── Four steps and a pill, and every corner in the sheet is one of them. The old scale (4 / 8 / 16) described the DOC; the CODE shipped eleven radii — 3, 4, 5, 7, 8, 9, 10, 12, 13, 14, 16 — which is the type ramp's disease in another property: one composition on the landing carried a 13px field, a 9px button inside it and a 4px button beside it. Where the two disagreed, the code was closer to right: this is a tool schoolchildren use, and the shipped corners are softer than «4px for nearly everything» claimed. So the scale follows the shipped intent, regularised, and the tiers are nested — a control inside a card is one step down, which is what makes a corner look drawn rather than applied. */ --radius-xs:4px; /* marks, inline bits, a chip inside a control */ --radius-sm:8px; /* controls: buttons, inputs, chips, facet rows */ --radius-md:12px; /* cards: result, featured, the search field */ --radius-lg:16px; /* the problem panel, dialogs, the filter sheet */ --radius-xl:16px; /* alias, kept for styles.v2.css rules */ --radius-full:999px; /* pills only */ /* ── Space ──────────────────────────────────────────────────────────── The inherited Apex Talent scale, now with 20 and 40 in it. The claim that "nothing uses a value off it" was false in about thirty places, and the off-scale values were not random: 18 / 20 / 22 / 26 / 28 / 36 / 38 clustered in exactly the two gaps the scale left open (16→24 and 32→48). Components kept reaching there because a card's inner padding and a section's top rule genuinely want a value between 16 and 24. Add the two rungs, snap the literals, and the rule becomes true instead of aspirational. */ --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-sm:16px; --space-ms:20px; --space-md:24px; --space-lg:32px; --space-ml:40px; --space-xl:48px; --space-2xl:64px; --space-3xl:96px; /* The page gutter. It was a flat 28px at every width, which on a 375px phone spent 15% of the screen before the panel's own padding took another 15%: 30% of the primary device's viewport was chrome. It now opens with the viewport. */ --gutter:clamp(16px, 4vw, 32px); /* ── Motion ───────────────────────────────────────────────────────────── */ --ease:cubic-bezier(.2,0,0,1); --dur-fast:120ms; --dur-sheet:220ms; --header-h:65px; /* matches .site-header height */ --content-max:1200px; /* The result column is sized so the CARD is the measure: 256px rail + 768px results, less the column's 24px padding and the card's own 20px, leaves a 680px snippet line — about 75 Ukrainian characters. At the old 1120 it was 87, and capping the text inside a 1120-wide card only moved the problem into 180px of empty card. */ --search-max:992px; /* Drawn checkmark, used as a mask by every checkbox on the site. */ --tick:url("data:image/svg+xml;utf8,"); /* ── The legacy --at-* family (Apex Talent v1) ──────────────────────── styles.v2.css still styles the footer and a few chrome pieces from these. They were never remapped, which is why the footer survived every earlier palette pass at 3.16:1 with a 1.11:1 separator dot. Remap rather than chase the rules: one source of truth, same as the v2 tokens above. */ --at-navy:#191E36; --at-ink:#343D70; /* link ink — 8.9:1 on --ground */ --at-muted:#6A6F7E; /* was #7880b0 at 3.16:1 */ --at-cream:#F6F6EE; --at-warm:#D8D6CA; --at-green:#5BF55B; accent-color:var(--cobalt); color-scheme:light; } /* Tabular data lines up: counts, years, problem numbers, pagination. */ .facet-count, .search-count, .cs b, .rcard-meta, .search-pager, .coll-stats b, .fp-meta { font-variant-numeric:tabular-nums; } /* Surfaces the browser draws, not us — themed so they belong to the page. */ ::selection { background:var(--cobalt-wash); color:var(--cobalt-deep); } input, textarea { caret-color:var(--cobalt); } body { background:var(--ground); color:var(--ink); } /* Sticky footer: keep