/* GuideStar Board - the parts of GuideStar Tutoring Helper's app.css the Board uses, in the same order. Made by stage 0 of docs/PLAN.md; each part is marked with where it came from. Edit freely from here on. */ /* ═══ the look: palettes, type packs, styles, glass, texture, the shell, type, cards (GuideStar app.css 1–1041) ═══ */ /* GuideStar Tutoring Helper — brand: Cormorant Garamond + Jost, ink on paper. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600&display=swap'); /* ── Palettes ────────────────────────────────────────────────────────── Both are declared once here; the theme blocks below just point the working variables at one set or the other. Change a colour in one place. */ :root { /* light — ink on paper, straight off the business card. Toned down from the original near-white: the page was #fcfbf7 and cards were the same value, so a screenful was one flat sheet at 99% luminance with nothing to rest on. The page is now a shade darker than the cards, which both takes the glare off and lets a card read as a card. */ --l-ink: #201e1a; --l-paper: #f1eee6; /* page */ --l-surface-lit: #faf8f3; /* cards, masthead, dialogs — lifted off the page */ --l-paper-2: #e7e3d8; /* hovers, inputs, code */ --l-muted: #6f6a61; --l-faint: #757066; --l-rule: #ddd8cb; --l-rule-strong: #c7c1b3; --l-accent: #7d6234; --l-accent-soft: #efe7d7; --l-accent-2: #4a6785; /* measurements — progress, charts, scores */ --l-green: #4f7a52; /* Darkened from #b07d2a, which sat at 3.41:1 on its own badge background — below AA, and had been since long before any of the glass work. */ --l-amber: #946923; --l-red: #a4443c; --l-blue: #4a6785; --l-green-bg: #f3f8f3; --l-green-br: #cdddce; --l-amber-bg: #fdf8ee; --l-amber-br: #ecdcbe; --l-red-bg: #fdf3f2; --l-red-br: #e8cfcd; --l-blue-bg: #f3f6fa; --l-blue-br: #cfd9e4; /* An elevation scale, not one shadow. Every level is built the same way — a tight contact shadow plus a wider ambient one, both pulled in with a negative spread so they stay under the element instead of haloing out past it. Before this each component invented its own: cards carried a 32px 50%-black cloud with no spread while buttons had a tight 8px one, which is why some things looked far heavier than others. */ --l-shadow-1: 0 1px 1px rgb(32 30 26 / .04), 0 4px 10px -4px rgb(32 30 26 / .10); --l-shadow-2: 0 2px 3px -1px rgb(32 30 26 / .06), 0 10px 20px -8px rgb(32 30 26 / .14); --l-shadow-3: 0 4px 6px -2px rgb(32 30 26 / .08), 0 18px 36px -12px rgb(32 30 26 / .20); --l-shadow: var(--l-shadow-1); --l-logo-filter: none; --l-backdrop: rgba(32,30,26,.34); --l-surface: var(--l-surface-lit); /* dark — neutral graphite, not a dimmed version of the paper. Tinting the background warm turns it muddy brown, so the base stays a clean near-neutral and the brand warmth is carried entirely by the gold accent and the off-white text. */ --d-ink: #eae8e3; --d-paper: #121216; /* page */ --d-surface: #2c2c32; /* cards, masthead, dialogs — raised off the page */ --d-paper-2: #37373e; /* hovers, inputs, code */ --d-muted: #adabac; /* 4.7:1 on the card surface — clears AA */ --d-faint: #918f97; --d-rule: #45454b; --d-rule-strong: #3b3b45; --d-accent: #dcb877; --d-accent-soft: #22222b; /* highlight panels stay neutral; the accent shows through the border and the text instead */ --d-accent-2: #93b3d6; --d-green: #85c08d; --d-amber: #ddb46a; --d-red: #e0918a; --d-blue: #93b3d6; --d-green-bg: #182018; --d-green-br: #2f4433; --d-amber-bg: #221e17; --d-amber-br: #453a26; --d-red-bg: #241a1a; --d-red-br: #4a302e; --d-blue-bg: #181d24; --d-blue-br: #2d3b4c; /* Dark needs more alpha to register at all, but tighter — a wide soft shadow on a dark ground just muddies the page around the element. */ --d-shadow-1: 0 1px 1px rgb(0 0 0 / .30), 0 4px 10px -4px rgb(0 0 0 / .45); --d-shadow-2: 0 2px 3px -1px rgb(0 0 0 / .35), 0 10px 20px -8px rgb(0 0 0 / .55); --d-shadow-3: 0 4px 6px -2px rgb(0 0 0 / .40), 0 18px 36px -12px rgb(0 0 0 / .65); --d-shadow: var(--d-shadow-1); --d-logo-filter: invert(1) hue-rotate(180deg) brightness(1.06) saturate(.7); --d-backdrop: rgba(0,0,0,.62); --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Jost', 'Segoe UI', system-ui, sans-serif; --radius: 3px; /* ── Working variables ──────────────────────────────────────────────── Declared ONCE. light-dark() picks a side from `color-scheme`, so there is no second copy of this list to fall out of step — an earlier version kept the dark values in a duplicate block and a variable added to one and not the other made every card render light-on-light. */ color-scheme: light dark; /* follow the OS by default */ --ink: light-dark(var(--l-ink), var(--d-ink)); --paper: light-dark(var(--l-paper), var(--d-paper)); --surface: light-dark(var(--l-surface), var(--d-surface)); --paper-2: light-dark(var(--l-paper-2), var(--d-paper-2)); --muted: light-dark(var(--l-muted), var(--d-muted)); --faint: light-dark(var(--l-faint), var(--d-faint)); --rule: light-dark(var(--l-rule), var(--d-rule)); --rule-strong: light-dark(var(--l-rule-strong), var(--d-rule-strong)); --accent: light-dark(var(--l-accent), var(--d-accent)); --accent-soft: light-dark(var(--l-accent-soft), var(--d-accent-soft)); /* A second hue, with a job of its own. --accent means "you can act on this" — links, focus rings, today, the primary button. --accent-2 means "this is a measurement" — progress bars, score lines, the earnings chart. Splitting them is what lets a palette read as a palette instead of one tinted dot, and it stops a progress bar looking like something you can click. */ --accent-2: light-dark(var(--l-accent-2), var(--d-accent-2)); --backdrop: light-dark(var(--l-backdrop), var(--d-backdrop)); --green: light-dark(var(--l-green), var(--d-green)); --green-bg: light-dark(var(--l-green-bg), var(--d-green-bg)); --green-br: light-dark(var(--l-green-br), var(--d-green-br)); --amber: light-dark(var(--l-amber), var(--d-amber)); --amber-bg: light-dark(var(--l-amber-bg), var(--d-amber-bg)); --amber-br: light-dark(var(--l-amber-br), var(--d-amber-br)); --red: light-dark(var(--l-red), var(--d-red)); --red-bg: light-dark(var(--l-red-bg), var(--d-red-bg)); --red-br: light-dark(var(--l-red-br), var(--d-red-br)); --blue: light-dark(var(--l-blue), var(--d-blue)); --blue-bg: light-dark(var(--l-blue-bg), var(--d-blue-bg)); --blue-br: light-dark(var(--l-blue-br), var(--d-blue-br)); /* A solid near-black button disappears on a dark page, so the primary action becomes gold there. Fields lift off the panel to stay findable. */ --btn-bg: light-dark(var(--l-ink), var(--d-accent)); --btn-fg: light-dark(var(--l-paper), #16150f); /* A field is a hole, not a tile: it sits BELOW the surface it's cut into, which is the opposite of a card and is what stops a form reading as a stack of little panels. Mixed rather than set to the page colour flat, because plenty of fields sit directly on the page and would otherwise vanish into it. */ --field-bg: light-dark(var(--l-paper), color-mix(in srgb, var(--d-paper) 62%, var(--d-surface))); /* NOT light-dark(). That is a function, so a shadow list inside it is invalid — and an invalid custom property takes the whole declaration with it, so `box-shadow: var(--field-inset)` computed to `none` and every input, select and textarea in the app rendered flat. Nothing announced it; the sunken look the rest of the design leans on simply was not there. Measured: CSS.supports('box-shadow', 'light-dark(inset 0 1px 2px rgb(0 0 0 / .06), …)') is false, and getComputedStyle on any field returned boxShadow "none". Per-theme pair instead, selected with the other shadows below — which is what every other shadow token here already does. */ --l-field-inset: inset 0 1px 2px rgb(0 0 0 / .06); --d-field-inset: inset 0 1px 3px rgb(0 0 0 / .32); --track: light-dark(var(--l-rule), var(--d-paper-2)); } /* light-dark() in Safari. Safari before 17.5 - an iPad on iPadOS 16.4 to 17.4, a Mac's Safari as old - has none, and every colour above was invalid wherever it was used: pages, panes, dialogs and buttons with no colour, no border and no shadow, Glass with no glass, the words in the browser's own black, the Pen buttons' pen drawn solid black. So each rule in this file with a light-dark() in it is followed by its twin for a browser without one (held to it by tests/test_safari.py): light-dark(A, B) written `var(--not-light, A) var(--not-dark, B)`. On the light side --not-light is unset (its var() is A) and --not-dark a blank (its var() is nothing), on the dark side the other way round, by the theme's three branches as the shadows' below - so of the two only the side's own colour is left. A browser with light-dark() reads none of it (7 Oct 2026, the owner: "make sure it all works on safari too"). */ @supports not (color: light-dark(#000, #fff)) { :root { --ink: var(--not-light, var(--l-ink)) var(--not-dark, var(--d-ink)); --paper: var(--not-light, var(--l-paper)) var(--not-dark, var(--d-paper)); --surface: var(--not-light, var(--l-surface)) var(--not-dark, var(--d-surface)); --paper-2: var(--not-light, var(--l-paper-2)) var(--not-dark, var(--d-paper-2)); --muted: var(--not-light, var(--l-muted)) var(--not-dark, var(--d-muted)); --faint: var(--not-light, var(--l-faint)) var(--not-dark, var(--d-faint)); --rule: var(--not-light, var(--l-rule)) var(--not-dark, var(--d-rule)); --rule-strong: var(--not-light, var(--l-rule-strong)) var(--not-dark, var(--d-rule-strong)); --accent: var(--not-light, var(--l-accent)) var(--not-dark, var(--d-accent)); --accent-soft: var(--not-light, var(--l-accent-soft)) var(--not-dark, var(--d-accent-soft)); --accent-2: var(--not-light, var(--l-accent-2)) var(--not-dark, var(--d-accent-2)); --backdrop: var(--not-light, var(--l-backdrop)) var(--not-dark, var(--d-backdrop)); --green: var(--not-light, var(--l-green)) var(--not-dark, var(--d-green)); --green-bg: var(--not-light, var(--l-green-bg)) var(--not-dark, var(--d-green-bg)); --green-br: var(--not-light, var(--l-green-br)) var(--not-dark, var(--d-green-br)); --amber: var(--not-light, var(--l-amber)) var(--not-dark, var(--d-amber)); --amber-bg: var(--not-light, var(--l-amber-bg)) var(--not-dark, var(--d-amber-bg)); --amber-br: var(--not-light, var(--l-amber-br)) var(--not-dark, var(--d-amber-br)); --red: var(--not-light, var(--l-red)) var(--not-dark, var(--d-red)); --red-bg: var(--not-light, var(--l-red-bg)) var(--not-dark, var(--d-red-bg)); --red-br: var(--not-light, var(--l-red-br)) var(--not-dark, var(--d-red-br)); --blue: var(--not-light, var(--l-blue)) var(--not-dark, var(--d-blue)); --blue-bg: var(--not-light, var(--l-blue-bg)) var(--not-dark, var(--d-blue-bg)); --blue-br: var(--not-light, var(--l-blue-br)) var(--not-dark, var(--d-blue-br)); --btn-bg: var(--not-light, var(--l-ink)) var(--not-dark, var(--d-accent)); --btn-fg: var(--not-light, var(--l-paper)) var(--not-dark, #16150f); --field-bg: var(--not-light, var(--l-paper)) var(--not-dark, color-mix(in srgb, var(--d-paper) 62%, var(--d-surface))); --track: var(--not-light, var(--l-rule)) var(--not-dark, var(--d-paper-2)); } } @supports not (color: light-dark(#000, #fff)) { :root { --not-light: initial; --not-dark: ; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --not-light: ; --not-dark: initial; } } :root[data-theme="dark"] { --not-light: ; --not-dark: initial; } } /* ── Type packs ──────────────────────────────────────────────────────── A fourth appearance axis: which two families the whole app is set in. Everything already goes through --serif (headings, figures, the wordmark) and --sans (everything else), so a pack is nothing but a pair of stacks — no rule anywhere else has to know a pack exists. The webfonts these need are NOT in the @import at the top of this file. They are fetched by the boot script in base.html, and only when a pack is actually chosen, so the default set stays two families rather than seven. Each stack therefore ends in something already on the machine: if the request never lands, the app is set in a near neighbour instead of falling all the way back to Times. */ /* Vista-era Frutiger, which is where the glass style comes from in the first place. Segoe UI is already on every Windows machine, so on this one the pack costs no download at all. */ :root[data-font="aero"] { --serif: 'Segoe UI Semibold', 'Segoe UI', 'Source Sans 3', system-ui, sans-serif; --sans: 'Segoe UI', 'Source Sans 3', system-ui, sans-serif; } /* Angular Y2K. Chakra Petch rather than something wider like Orbitron: the headings here run to 34px and the figures to 30px, and a genuinely wide face at those sizes wraps the stat cards and the masthead. */ :root[data-font="techno"] { --serif: 'Chakra Petch', 'Rajdhani', 'Segoe UI', system-ui, sans-serif; --sans: 'Chakra Petch', 'Rajdhani', 'Segoe UI', system-ui, sans-serif; letter-spacing: .005em; } /* The media-player console: everything monospaced. Share Tech Mono rather than a true bitmap face like VT323 — the pixel fonts have a tiny x-height and this app is read at 13px for hours at a time. */ :root[data-font="terminal"] { --serif: 'Share Tech Mono', ui-monospace, Consolas, monospace; --sans: 'Share Tech Mono', ui-monospace, Consolas, monospace; } /* Monospace runs wide, so the two places with the least room to give get a little back rather than wrapping. */ :root[data-font="terminal"] h1 { font-size: 29px; letter-spacing: 0; } /* The toggle pins a side by switching color-scheme; every light-dark() above follows automatically. */ /* The hand that moves things, open and held (28 Oct 2026, the owner: "the dragging hand is invisible, white on white"): the system's grab and grabbing are drawn by inverting what is under them in places - Windows with HDR on, for one - and showed as plain white on a white page, as its crosshair and text pointer did (--bd-cross, 7 Oct; Docs' I-beam, 27 Oct). Dark lines with a white edge, seen on paper, on slate and on glass; the system's hands only as the fallback. Every grab and grabbing in this file is one of these. */ :root { --cur-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 12.5V6a1.25 1.25 0 0 1 2.5 0v5.5M11 11V4.75a1.25 1.25 0 0 1 2.5 0V11M13.5 11V5.75a1.25 1.25 0 0 1 2.5 0V11.5M16 11.5V8.25a1.25 1.25 0 0 1 2.5 0v5.25c0 3.6-2.6 6.5-6.2 6.5h-.8c-2.4 0-3.9-1-5.2-2.9l-2.6-3.8a1.3 1.3 0 0 1 2.1-1.5l1.7 2.2' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12.5V6a1.25 1.25 0 0 1 2.5 0v5.5M11 11V4.75a1.25 1.25 0 0 1 2.5 0V11M13.5 11V5.75a1.25 1.25 0 0 1 2.5 0V11.5M16 11.5V8.25a1.25 1.25 0 0 1 2.5 0v5.25c0 3.6-2.6 6.5-6.2 6.5h-.8c-2.4 0-3.9-1-5.2-2.9l-2.6-3.8a1.3 1.3 0 0 1 2.1-1.5l1.7 2.2' fill='none' stroke='%231c1f24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, grab; --cur-grabbing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 12.5V10a1.25 1.25 0 0 1 2.5 0v1.5M11 11.5V9a1.25 1.25 0 0 1 2.5 0v2.5M13.5 11.5V9.5a1.25 1.25 0 0 1 2.5 0v2M16 12v-1.25a1.25 1.25 0 0 1 2.5 0v2.75c0 3.6-2.6 6.5-6.2 6.5h-.8c-2.4 0-3.9-1-5.2-2.9l-1.4-2.3a1.3 1.3 0 0 1 2.1-1.5l1.5 1.7' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12.5V10a1.25 1.25 0 0 1 2.5 0v1.5M11 11.5V9a1.25 1.25 0 0 1 2.5 0v2.5M13.5 11.5V9.5a1.25 1.25 0 0 1 2.5 0v2M16 12v-1.25a1.25 1.25 0 0 1 2.5 0v2.75c0 3.6-2.6 6.5-6.2 6.5h-.8c-2.4 0-3.9-1-5.2-2.9l-1.4-2.3a1.3 1.3 0 0 1 2.1-1.5l1.5 1.7' fill='none' stroke='%231c1f24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, grabbing; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* light-dark() is colours only, so these two non-colour properties still need a branch each. Keep this list at exactly these two. */ /* The top-edge highlight. Barely there on paper, where a raised card is already obvious from its shadow; a real catch of light on dark, where it is doing most of the work of separating a panel from the page. */ :root { --l-edge-light: rgb(255 255 255 / .55); --d-edge-light: rgb(255 255 255 / .07); } :root { --shadow: var(--l-shadow); --logo-filter: var(--l-logo-filter); --edge-light: var(--l-edge-light); --field-inset: var(--l-field-inset); --shadow-1: var(--l-shadow-1); --shadow-2: var(--l-shadow-2); --shadow-3: var(--l-shadow-3); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: var(--d-shadow); --logo-filter: var(--d-logo-filter); --edge-light: var(--d-edge-light); --field-inset: var(--d-field-inset); --shadow-1: var(--d-shadow-1); --shadow-2: var(--d-shadow-2); --shadow-3: var(--d-shadow-3); } } :root[data-theme="dark"] { --shadow: var(--d-shadow); --logo-filter: var(--d-logo-filter); --edge-light: var(--d-edge-light); --field-inset: var(--d-field-inset); --shadow-1: var(--d-shadow-1); --shadow-2: var(--d-shadow-2); --shadow-3: var(--d-shadow-3); } :root[data-theme="light"] { --shadow: var(--l-shadow); --logo-filter: var(--l-logo-filter); --edge-light: var(--l-edge-light); --field-inset: var(--l-field-inset); --shadow-1: var(--l-shadow-1); --shadow-2: var(--l-shadow-2); --shadow-3: var(--l-shadow-3); } /* ── Palettes ────────────────────────────────────────────────────────── Colour and brightness are separate choices. A palette re-points the --l-* and --d-* inputs above; light-dark() then picks a side exactly as before, so every palette works in light AND dark without a second set of rules. Only the neutrals and the accent move. Green/amber/red/blue carry meaning — paid, overdue, needs review — and a palette that recoloured those would be changing what the interface says, not how it looks. */ /* Each palette below is built from the reference swatches, not invented near- greys with one tinted dot. Where a supplied colour is dark enough to be a page or light enough to be a card, it IS the page or the card — Meadow's dark ground is literally Onyx, Blossom's is Space Indigo. The saturated ones become the two accents; anything too light to sit on white becomes a soft panel instead of being darkened past recognition. */ /* Ghost White · Antique White · Peach Fuzz · Periwinkle · Soft Periwinkle */ :root[data-palette="periwinkle"] { --l-ink:#221f36; --l-paper:#eeebfa; --l-surface-lit:#f8f7ff; --l-paper-2:#ffeedd; --l-muted:#645e83; --l-faint:#726b95; --l-rule:#ddd7f2; --l-rule-strong:#c3bbe4; --l-accent:#5a45cc; --l-accent-soft:#ffeedd; --l-accent-2:#a4601e; --d-ink:#eceaff; --d-paper:#17132b; --d-surface:#2f2a49; --d-paper-2:#3b335a; --d-muted:#b2aad6; --d-faint:#948db8; --d-rule:#4b426f; --d-rule-strong:#4d4180; --d-accent:#b8b8ff; --d-accent-soft:#1e1836; --d-accent-2:#ffd8be; } /* Honeydew · Light Cyan · Frosted Blue · Wisteria Blue · Medium Slate Blue */ :root[data-palette="frost"] { --l-ink:#152630; --l-paper:#dff1f6; --l-surface-lit:#e0faff; --l-paper-2:#eaf7ed; --l-muted:#4f6f7d; --l-faint:#58727d; --l-rule:#c6e2ea; --l-rule-strong:#a3ccd8; --l-accent:#5a54a8; --l-accent-soft:#eaf7ed; --l-accent-2:#17788a; --d-ink:#e2f4f9; --d-paper:#0b1d29; --d-surface:#1f3646; --d-paper-2:#234155; --d-muted:#a6c2d0; --d-faint:#8aa7b6; --d-rule:#2f5166; --d-rule-strong:#33627d; --d-accent:#9fe2ee; --d-accent-soft:#102434; --d-accent-2:#80a4d4; } /* Lavender · Amethyst Smoke · Light Green · Dark Slate Grey · Onyx */ :root[data-palette="meadow"] { --l-ink:#0e2119; --l-paper:#e5efe8; --l-surface-lit:#f4faf6; --l-paper-2:#d8e4ff; --l-muted:#4e6b62; --l-faint:#5d766d; --l-rule:#cbdfd3; --l-rule-strong:#a8c6b5; --l-accent:#35605a; --l-accent-soft:#d8e4ff; --l-accent-2:#8e5a8d; --d-ink:#e2f2e7; --d-paper:#00120b; --d-surface:#192f24; --d-paper-2:#1d3b30; --d-muted:#9dbcaa; --d-faint:#80a08e; --d-rule:#2a4b3c; --d-rule-strong:#2a5a44; --d-accent:#59ee99; --d-accent-soft:#0b291c; --d-accent-2:#c79bc6; } /* Ivory · Powder Blush · Bubblegum Pink · Dark Magenta · Space Indigo */ :root[data-palette="blossom"] { --l-ink:#17183b; --l-paper:#eef1e4; --l-surface-lit:#f8faf1; --l-paper-2:#ffe4d9; --l-muted:#5f5f7d; --l-faint:#6f6e8d; --l-rule:#ddddcb; --l-rule-strong:#c0c0ab; --l-accent:#a11692; --l-accent-soft:#ffe4d9; --l-accent-2:#c22a52; --d-ink:#efeaf6; --d-paper:#17183b; --d-surface:#2b2c5f; --d-paper-2:#343571; --d-muted:#aeacd2; --d-faint:#918fb8; --d-rule:#444577; --d-rule-strong:#43448c; --d-accent:#ff6b8e; --d-accent-soft:#1f2050; --d-accent-2:#ffb49a; } /* Canary Yellow · Lemon Lime · Green Yellow · Forest Green · Ebony */ :root[data-palette="citrus"] { --l-ink:#22301c; --l-paper:#eef2dd; --l-surface-lit:#f9fbee; --l-paper-2:#e3ebc4; --l-muted:#5c6a4c; --l-faint:#6a765a; --l-rule:#d8e0bd; --l-rule-strong:#bcc79b; --l-accent:#487d34; --l-accent-soft:#e9f2d4; --l-accent-2:#8a6d12; --d-ink:#eaf2dd; --d-paper:#171e11; --d-surface:#2c3623; --d-paper-2:#344128; --d-muted:#abb999; --d-faint:#8d9b7c; --d-rule:#425035; --d-rule-strong:#4c5f38; --d-accent:#afff3e; --d-accent-soft:#1d2615; --d-accent-2:#fffa70; } /* Grapefruit Pink · Cinnabar · Atomic Tangerine · Clay Soil · Deep Mocha */ :root[data-palette="ember"] { --l-ink:#33201c; --l-paper:#f7e9e3; --l-surface-lit:#fef8f4; --l-paper-2:#f2d9cd; --l-muted:#7a5a51; --l-faint:#886a60; --l-rule:#ecd2c5; --l-rule-strong:#d7b3a3; --l-accent:#b8392a; --l-accent-soft:#fae2d6; --l-accent-2:#4c3535; --d-ink:#f6e6df; --d-paper:#201513; --d-surface:#3b2d2b; --d-paper-2:#4a3834; --d-muted:#c3a79d; --d-faint:#a58a81; --d-rule:#5a4541; --d-rule-strong:#61443c; --d-accent:#ff783e; --d-accent-soft:#281a17; --d-accent-2:#ffa39f; } /* ── Styles ───────────────────────────────────────────────────────────── A third axis, and a different kind of one. A palette answers "which colours"; brightness answers "how dark". A style answers "what are these surfaces MADE of" — and that is a question about gradients, blur, rim light and corner radius, none of which a colour token can express. Every style reads its colour from whichever palette is set, so the two combine rather than competing: Glass over Harbour and Glass over Dusk are the same material in different light. Everything below is expressed as overrides of a handful of surface variables, so a style never has to restate a component's layout — only what it is made of. */ /* ── Glass ────────────────────────────────────────────────────────────── Frutiger Aero, in the specific sense: things are panes, not cards. Light comes from above and catches the top edge, the panel is faintly transparent so the page glows through it, and every corner is generously round. The gloss is a real top-half highlight rather than a border trick, because that is what actually reads as glass. */ :root[data-style="glass"] { --radius: 18px; /* Panes let a little of the page through and blur what's behind. Kept at 82% rather than something more dramatic: below about 75% the text contrast measured on the card stops holding against a busy backdrop. */ /* 86%, not lower. Measured against the strongest point of the aurora behind it: below 85% the secondary text on Frost and GuideStar in light mode drops under 4.5:1. Glass you can't read is just a window. */ --pane: color-mix(in srgb, var(--surface) 86%, transparent); /* Glass gets its own light, not the hairline's. --edge-light is tuned to be almost invisible because it draws a single pixel; a specular sheen across the top third of a pane has to be several times stronger before it reads as a highlight at all rather than as a slightly paler edge. */ --sheen: light-dark(rgb(255 255 255 / .78), rgb(255 255 255 / .16)); --sheen-soft: light-dark(rgb(255 255 255 / .30), rgb(255 255 255 / .05)); /* The Aqua signature is a hard stop, not a fade. A gloss that dissolves smoothly reads as "slightly lighter at the top"; one that ends in a crisp line halfway down reads as a curved, lacquered surface with a reflection on it. That single edge is most of the look. */ --gloss: linear-gradient(180deg, var(--sheen) 0, var(--sheen-soft) 48%, transparent 48.5%, transparent 100%); /* Panels get the softer version — a full hard-stop across a whole card is too much lacquer; it belongs on things you press. */ --gloss-soft: linear-gradient(180deg, var(--sheen) 0, var(--sheen-soft) 26%, transparent 58%), radial-gradient(120% 60% at 50% -12%, light-dark(rgb(255 255 255 / .55), rgb(255 255 255 / .10)), transparent 70%); /* Bevel: lit from above, shaded below, the way a moulded plastic control was drawn for about a decade. */ --bevel: inset 0 1px 0 light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .34)), inset 0 -2px 3px light-dark(rgb(10 60 80 / .10), rgb(0 0 0 / .28)); /* A thicker, luminous edge. In the reference the panels read as slabs of glass with a genuinely lit rim all the way round and a soft bloom spilling outside them — not a 1px hairline. Four layers: a bright top highlight, a full inner outline, a wide inner glow that fades toward the middle, and an outer bloom in the accent. */ --rim: inset 0 1px 0 light-dark(rgb(255 255 255 / 1), rgb(255 255 255 / .42)), inset 0 -1px 0 light-dark(rgb(255 255 255 / .45), rgb(255 255 255 / .10)), inset 0 0 0 1px light-dark(rgb(255 255 255 / .70), rgb(255 255 255 / .16)), inset 0 0 26px -6px light-dark(rgb(255 255 255 / .70), rgb(255 255 255 / .12)), 0 0 30px -12px color-mix(in srgb, var(--accent) 65%, transparent); --glass-blur: blur(18px) saturate(1.4); /* How strongly the wash behind the glass is tinted. A palette may raise it as far as its own text contrast allows — Aero is built for a vivid sky and has the headroom; the muted palettes do not and keep the default. */ --aurora: 42%; } @supports not (color: light-dark(#000, #fff)) { :root[data-style="glass"] { --sheen: var(--not-light, rgb(255 255 255 / .78)) var(--not-dark, rgb(255 255 255 / .16)); --sheen-soft: var(--not-light, rgb(255 255 255 / .30)) var(--not-dark, rgb(255 255 255 / .05)); --gloss-soft: linear-gradient(180deg, var(--sheen) 0, var(--sheen-soft) 26%, transparent 58%), radial-gradient(120% 60% at 50% -12%, var(--not-light, rgb(255 255 255 / .55)) var(--not-dark, rgb(255 255 255 / .10)), transparent 70%); --bevel: inset 0 1px 0 var(--not-light, rgb(255 255 255 / .95)) var(--not-dark, rgb(255 255 255 / .34)), inset 0 -2px 3px var(--not-light, rgb(10 60 80 / .10)) var(--not-dark, rgb(0 0 0 / .28)); --rim: inset 0 1px 0 var(--not-light, rgb(255 255 255 / 1)) var(--not-dark, rgb(255 255 255 / .42)), inset 0 -1px 0 var(--not-light, rgb(255 255 255 / .45)) var(--not-dark, rgb(255 255 255 / .10)), inset 0 0 0 1px var(--not-light, rgb(255 255 255 / .70)) var(--not-dark, rgb(255 255 255 / .16)), inset 0 0 26px -6px var(--not-light, rgb(255 255 255 / .70)) var(--not-dark, rgb(255 255 255 / .12)), 0 0 30px -12px color-mix(in srgb, var(--accent) 65%, transparent); } } /* An aurora behind everything — two soft washes of the palette's own two accents. This is what stops a glass panel looking like a grey box: glass needs something behind it to be glass ABOUT. Fixed and non-interactive, and it sits under all content. */ :root[data-style="glass"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Promoted to its own compositing layer. Without this the fixed aurora and the many backdrop-filtered panels above it share a layer, and Chromium repaints only the strip it thinks changed while scrolling — which is the horizontal tear across the page. Forcing the layer makes the backdrop a texture the compositor can just re-sample. */ transform: translateZ(0); will-change: transform; background: radial-gradient(56% 42% at 10% -4%, color-mix(in srgb, var(--accent) calc(var(--aurora) * 1.00), transparent), transparent 68%), radial-gradient(50% 38% at 94% 4%, color-mix(in srgb, var(--accent-2) calc(var(--aurora) * 0.90), transparent), transparent 66%), radial-gradient(64% 44% at 74% 52%, color-mix(in srgb, var(--accent-2) calc(var(--aurora) * 0.48), transparent), transparent 70%), radial-gradient(80% 56% at 40% 106%, color-mix(in srgb, var(--accent) calc(var(--aurora) * 0.62), transparent), transparent 72%); } /* Bubbles. Real elements, one per sphere, because the point is that they drift independently — a single element carrying nine gradients can only move as one sheet, and reads as a texture sliding about rather than as bubbles rising. Also, the gradient version lived on body::after, which the grain texture had already claimed: whichever rule lost simply vanished, so picking Grain silently deleted the bubbles. Hidden entirely unless the Glass style is on, so every other style pays nothing for them. */ .aero-bubbles { display: none; } :root[data-style="glass"] .aero-bubbles { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; transform: translateZ(0); /* same reason as the aurora above */ opacity: var(--bubble-opacity, .55); } /* Each bubble is two layers. The span is WHERE it is: the rise animation owns its `transform`, and the pointer (a mouse, a pen, a finger) nudges it about on `translate` (which composes with the animation rather than replacing it). The ::before is its skin — the paint, and WHAT SHAPE it is: the pointer squashes it through --squish, a 2-D matrix set from app.js (bubblesInTheWater; the two inline on the span, and taken off again once it is at rest), and a slow keyframe on `scale` keeps it faintly wobbling even when nothing has touched it, the way a bubble rising through water never is quite round. Left behind when app.js was cut down for the Board (stage 0), so for a while the bubbles only drifted; back 1 Oct 2026. */ :root[data-style="glass"] .aero-bubbles span { position: absolute; animation: aero-rise var(--dur, 34s) ease-in-out var(--delay, 0s) infinite; will-change: transform; } :root[data-style="glass"] .aero-bubbles span::before { content: ""; position: absolute; inset: 0; border-radius: 50%; /* Rim bright, body barely there, plus an off-centre specular dot. That dot is what makes a circle read as a sphere rather than a disc. */ background: radial-gradient(circle at 32% 28%, light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .55)) 0 7%, transparent 8%), radial-gradient(circle at 68% 74%, light-dark(rgb(255 255 255 / .40), rgb(255 255 255 / .16)) 0 4%, transparent 5%), radial-gradient(circle at 50% 50%, transparent 58%, color-mix(in srgb, var(--accent) 45%, transparent) 76%, color-mix(in srgb, var(--accent) 18%, transparent) 88%, transparent 92%); box-shadow: 0 0 24px -6px color-mix(in srgb, var(--accent) 40%, transparent); transform: var(--squish, none); /* Smaller bubbles wobble quicker: the pace is tied to the rise, which is already quicker for the small ones. `alternate` with ease-in-out comes to rest at each end, so the reversal is a soft turn, not a bounce. */ animation: aero-wobble calc(var(--dur, 34s) / 16) ease-in-out calc(var(--delay, 0s) / 3) infinite alternate; will-change: transform; } @supports not (color: light-dark(#000, #fff)) { :root[data-style="glass"] .aero-bubbles span::before { background: radial-gradient(circle at 32% 28%, var(--not-light, rgb(255 255 255 / .95)) var(--not-dark, rgb(255 255 255 / .55)) 0 7%, transparent 8%), radial-gradient(circle at 68% 74%, var(--not-light, rgb(255 255 255 / .40)) var(--not-dark, rgb(255 255 255 / .16)) 0 4%, transparent 5%), radial-gradient(circle at 50% 50%, transparent 58%, color-mix(in srgb, var(--accent) 45%, transparent) 76%, color-mix(in srgb, var(--accent) 18%, transparent) 88%, transparent 92%); } } /* Each bubble gets its own size, lane and pace. Written out rather than generated so the spread is deliberate — a few big slow ones at the back, smaller quicker ones in front, none of them in step with each other. */ :root[data-style="glass"] .aero-bubbles span:nth-child(1) { width: 190px; height: 190px; left: 6%; top: 68%; --dur: 41s; --delay: -3s; } :root[data-style="glass"] .aero-bubbles span:nth-child(2) { width: 110px; height: 110px; left: 22%; top: 84%; --dur: 33s; --delay: -12s; } :root[data-style="glass"] .aero-bubbles span:nth-child(3) { width: 64px; height: 64px; left: 38%; top: 76%; --dur: 26s; --delay: -7s; } :root[data-style="glass"] .aero-bubbles span:nth-child(4) { width: 148px; height: 148px; left: 55%; top: 90%; --dur: 46s; --delay: -19s; } :root[data-style="glass"] .aero-bubbles span:nth-child(5) { width: 86px; height: 86px; left: 71%; top: 72%; --dur: 30s; --delay: -1s; } :root[data-style="glass"] .aero-bubbles span:nth-child(6) { width: 220px; height: 220px; left: 83%; top: 88%; --dur: 52s; --delay: -25s; } :root[data-style="glass"] .aero-bubbles span:nth-child(7) { width: 48px; height: 48px; left: 14%; top: 58%; --dur: 22s; --delay: -14s; } :root[data-style="glass"] .aero-bubbles span:nth-child(8) { width: 128px; height: 128px; left: 46%; top: 64%; --dur: 38s; --delay: -30s; } :root[data-style="glass"] .aero-bubbles span:nth-child(9) { width: 72px; height: 72px; left: 92%; top: 60%; --dur: 28s; --delay: -9s; } /* Rising, with a lazy sideways wander so they don't travel in straight lines. Ends where it starts so the loop never jumps. In lvh, the window's height with its toolbars put away (7 Oct 2026, "make sure it all works on safari too"): the height a bubble rises through is then one number whether Safari's toolbar is folded away or not, so none of them jumps as it folds. */ @keyframes aero-rise { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate3d(26px, -46lvh, 0) scale(1.06); } 92% { opacity: 1; } 100% { transform: translate3d(-12px, -94lvh, 0) scale(.94); opacity: 0; } } @keyframes aero-wobble { from { scale: 1.035 .965; } to { scale: .965 1.035; } } /* Held where they are while the page has the pen (app.js bubblesInTheWater, 19 Oct 2026): nothing else on the screen moves while writing, so the browser has the ink alone to draw. Paused, not stopped - they go on from there. The mark is on the bubbles' own box since 21 Oct 2026: on it restyled the whole page at every pen down and up. */ :root[data-style="glass"] .aero-bubbles[data-inking] span, :root[data-style="glass"] .aero-bubbles[data-inking] span::before { animation-play-state: paused; } :root[data-motion="reduce"][data-style="glass"] .aero-bubbles span { animation: none; /* Still there, just still — the look survives without the motion. The pointer leaves them be as well: bubblesInTheWater does nothing at all. */ transform: translate3d(0, -40vh, 0); } :root[data-motion="reduce"][data-style="glass"] .aero-bubbles span::before { animation: none; } /* Held still while a whiteboard's page is moved about (board.js gives it .bd-panning: the middle button, a right-drag, a finger), and rising again from where they stopped once it is let go. Rising, every bubble was painted afresh at every frame the page was drawn - nine of them, behind paper that hides them - and that was eight times all the rest of the painting a pan did, measured in Chromium drawing without a graphics card (2 Oct 2026: "when holding middle mouse button to move around it jitters a bit"). They rise a few px a second: held for the length of a pan, nobody sees them stop. */ :root[data-style="glass"]:has(.bd-panning) .aero-bubbles span, :root[data-style="glass"]:has(.bd-panning) .aero-bubbles span::before { animation-play-state: paused; } /* Bubbles switched off (Settings → Look → Bubbles: data-bubbles="off" on , lane L19). Not drawn at all rather than faded out: display: none stops the rise and the wobble outright, the animations are dropped as well so none is even computed, and bubblesInTheWater in app.js puts its loop to sleep while they are away. Same specificity as the Glass rules above, so it wins by coming after. (Until 1 Oct 2026 this said it was for GuideStar's desktop "see-through window", which the Board never had.) */ :root[data-bubbles="off"] .aero-bubbles { display: none; } :root[data-bubbles="off"] .aero-bubbles span, :root[data-bubbles="off"] .aero-bubbles span::before { animation: none; will-change: auto; } :root[data-style="glass"] .card, :root[data-style="glass"] .ctxmenu, :root[data-style="glass"] dialog { background-color: var(--pane); background-image: var(--gloss-soft); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: color-mix(in srgb, var(--edge-light) 55%, var(--rule)); box-shadow: var(--rim), var(--shadow-2); } /* The card's own top hairline would double up with the rim, and two highlights a pixel apart looks like a rendering fault rather than light. */ /* Iridescence. Real glass — a jewel case, a MiniDisc shell, a soap film — splits light at its edges into faint rainbow bands, and it is that, not the transparency, that stops it reading as grey plastic. A conic gradient round the panel, masked to the border only so the interior stays clean and the text on it stays legible, at an opacity low enough to register as a sheen rather than as a rainbow. */ :root[data-style="glass"][data-iridescent="on"] .card::before { content: ''; position: absolute; inset: 0; z-index: 0; /* height and background must both be reset: the plain-style rule above makes this pseudo-element a 1px hairline pinned to the top edge, and inheriting that turned the ring into a stripe across the top. */ height: auto; border-radius: inherit; pointer-events: none; padding: 1.5px; background: conic-gradient(from 210deg, #ff8fd0, #ffd08f, #b6ff9b, #8ff0ff, #a99bff, #ff8fd0); /* Mask to the ring: paint the whole box, then punch out everything but the border. Two masks intersected via xor. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; /* Not light-dark(): that is a function, so in `opacity` the whole declaration is dropped and the ring has been painting at full strength rather than .42. Swapped per theme like --grain-strength instead. */ opacity: var(--iris-ring-a); display: block; } /* The card's contents must sit above the ring. */ :root[data-style="glass"][data-iridescent="on"] .card > * { position: relative; z-index: 1; } /* With iridescence off the hairline is unwanted here too — the glass rim already lights the top edge, and two highlights a pixel apart reads as a rendering fault rather than as light. */ :root[data-style="glass"]:not([data-iridescent="on"]) .card::before { display: none; } :root[data-style="glass"] .masthead { /* A sticky element with a backdrop-filter has to re-read what is behind it on every scroll frame, and it is the one that tears first. Its own layer, so the compositor moves it rather than repainting it. */ transform: translateZ(0); will-change: transform; background-color: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom-color: color-mix(in srgb, var(--edge-light) 40%, var(--rule)); } /* The settings search bar, which on glass was the one obvious flaw left: a sticky strip filled with an opaque, square-cornered var(--paper). Over a flat page that is invisible and correct — it is the page colour on the page colour, hiding whatever scrolls under it. Over the aurora it is a pale slab with hard corners pasted across the wash, which is the "weird square". So on this style it becomes what every other surface here already is: a translucent pane that blurs what passes behind it. The negative margin is what keeps the field and the buttons aligned with the cards below while the pane itself sits a little wider, the way a floating toolbar should. */ :root[data-style="glass"] .settings-bar { /* Sticky plus backdrop-filter is the combination that tears — the same one the masthead above had to be promoted for. */ transform: translateZ(0); will-change: transform; padding: 10px 14px 12px; margin-left: -14px; margin-right: -14px; border-radius: var(--radius); background-color: var(--pane); background-image: var(--gloss-soft); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--rim), var(--shadow-1); } /* Buttons are little panes too — same light, same curve. */ /* Buttons get their OWN gloss, weaker than a panel's. The panel sheen is 78% white, which is right over pale translucent glass and completely wrong over a saturated fill — it bleached a deep teal button into a muddy two-tone band. An Aqua button's highlight sits nearer 40%: enough to look lacquered, not enough to lose the colour underneath. */ :root[data-style="glass"] .btn { border-radius: 999px; /* Translucent, like everything else made of glass here. A solid fill was the last thing on the page still reading as painted plastic. Measured across every palette with the button sitting over the strongest part of the aurora: at 68% the worst label contrast is 4.91, so this is as far as it goes without the text starting to suffer. */ background-color: color-mix(in srgb, var(--btn-bg) 68%, transparent); border-color: color-mix(in srgb, var(--btn-bg) 68%, transparent); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); background-image: linear-gradient(180deg, rgb(255 255 255 / .42) 0, rgb(255 255 255 / .16) 48%, rgb(255 255 255 / .02) 48.5%, rgb(255 255 255 / .10) 100%); box-shadow: var(--bevel), var(--shadow-1); } /* The nav's current page is the same lozenge, so the bar reads as one set of controls rather than one solid tab among glass ones. Solid, though, and under a lighter gloss than .btn's: translucent at 68% under a 38% sheen, its light words in the light theme measured 2.9-3.2:1 in every palette (lane L19, tests/test_appearance.py). */ :root[data-style="glass"] nav.main a.on { border-radius: 999px; background-color: var(--btn-bg); background-image: linear-gradient(180deg, rgb(255 255 255 / .26) 0, rgb(255 255 255 / .08) 48%, transparent 48.5%); box-shadow: var(--bevel); } /* A ghost button is mostly transparent already, so it takes the pale treatment the panels use rather than the button one. */ :root[data-style="glass"] .btn.ghost { background-image: var(--gloss); } /* ── One rule for every tinted control ─────────────────────────────────── Danger buttons and the coloured badges were the last things still painted in flat semantic colour, and the generic .btn rule above was actively making it worse: it put the solid --btn-bg fill behind a danger button that is meant to be transparent, which is why Pause came out as a dark olive lozenge with red text on it. They all become the same material: their own colour, heavily thinned, over blur, with the same gloss and pill as everything else. The colour still means what it meant — this only changes what it is made of. */ :root[data-style="glass"] .btn.danger { background-color: color-mix(in srgb, var(--red-bg) 82%, transparent); border-color: color-mix(in srgb, var(--red) 40%, var(--red-br)); color: var(--red); box-shadow: var(--bevel), var(--shadow-1); } :root[data-style="glass"] .btn.danger:hover { background-color: var(--red-bg); } :root[data-style="glass"] .badge { border-radius: 999px; backdrop-filter: blur(8px) saturate(1.25); -webkit-backdrop-filter: blur(8px) saturate(1.25); background-image: linear-gradient(180deg, rgb(255 255 255 / .34) 0, rgb(255 255 255 / .10) 50%, transparent 50.5%); box-shadow: inset 0 1px 0 light-dark(rgb(255 255 255 / .85), rgb(255 255 255 / .22)); } @supports not (color: light-dark(#000, #fff)) { :root[data-style="glass"] .badge { box-shadow: inset 0 1px 0 var(--not-light, rgb(255 255 255 / .85)) var(--not-dark, rgb(255 255 255 / .22)); } } /* Built on each badge's OWN background colour rather than a thin wash of its foreground. Tinting with the strong colour looked right but measured badly — the dedicated -bg colours are pale for a reason, and thinning the foreground instead dropped every badge below AA. This keeps the existing colour relationship and only makes the material translucent. */ :root[data-style="glass"] .badge.green { background-color: color-mix(in srgb, var(--green-bg) 88%, transparent); border-color: color-mix(in srgb, var(--green) 40%, var(--green-br)); } :root[data-style="glass"] .badge.amber { background-color: color-mix(in srgb, var(--amber-bg) 88%, transparent); border-color: color-mix(in srgb, var(--amber) 40%, var(--amber-br)); } :root[data-style="glass"] .badge.red { background-color: color-mix(in srgb, var(--red-bg) 88%, transparent); border-color: color-mix(in srgb, var(--red) 40%, var(--red-br)); } :root[data-style="glass"] .badge.blue { background-color: color-mix(in srgb, var(--blue-bg) 88%, transparent); border-color: color-mix(in srgb, var(--blue) 40%, var(--blue-br)); } :root[data-style="glass"] .badge.ink { background-color: color-mix(in srgb, var(--btn-bg) 68%, transparent); border-color: color-mix(in srgb, var(--btn-bg) 68%, transparent); } /* The plain badge, which had no fill at all, gets a pane like the rest. */ :root[data-style="glass"] .badge:not(.green):not(.amber):not(.red):not(.blue):not(.ink) { background-color: color-mix(in srgb, var(--surface) 45%, transparent); border-color: color-mix(in srgb, var(--edge-light) 55%, var(--rule-strong)); } /* A press should look pressed: the gloss flips under, the bevel inverts. */ :root[data-style="glass"] .btn:active { background-image: linear-gradient(0deg, var(--sheen-soft) 0, transparent 55%); box-shadow: inset 0 2px 4px light-dark(rgb(10 60 80 / .22), rgb(0 0 0 / .40)); } @supports not (color: light-dark(#000, #fff)) { :root[data-style="glass"] .btn:active { box-shadow: inset 0 2px 4px var(--not-light, rgb(10 60 80 / .22)) var(--not-dark, rgb(0 0 0 / .40)); } } /* The primary button glows, because in 2007 everything important glowed. */ :root[data-style="glass"] .btn:not(.ghost):not(.danger) { box-shadow: var(--bevel), var(--shadow-1), 0 0 18px -6px color-mix(in srgb, var(--accent) 70%, transparent); } :root[data-style="glass"] .btn.ghost { background-color: color-mix(in srgb, var(--surface) 42%, transparent); border-color: color-mix(in srgb, var(--edge-light) 60%, var(--rule-strong)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } :root[data-style="glass"] .badge, :root[data-style="glass"] .pill { border-radius: 999px; } /* Fields stay recessed — a sunken pane is still sunken — but pick up the curve so they don't read as square holes in round furniture. */ :root[data-style="glass"] input, :root[data-style="glass"] select, :root[data-style="glass"] textarea { border-radius: 10px; } @media (prefers-reduced-transparency: reduce) { :root[data-style="glass"] .card, :root[data-style="glass"] .ctxmenu, :root[data-style="glass"] dialog, :root[data-style="glass"] .masthead { background-color: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-style="glass"] body::before { opacity: .35; } } /* ── Texture ──────────────────────────────────────────────────────────── A large flat fill of one colour is what makes a dark interface read as plastic. A fine grain over the whole page breaks that up: it is far too faint to see as dots, but the eye stops reading the background as a perfectly uniform sheet and the whole thing gains a bit of tooth. Fixed to the viewport rather than tiled per element, so it doesn't move independently of the page or stack up double on a card. pointer-events none so it never intercepts a click; aria-hidden isn't needed because a pseudo-element on is not in the accessibility tree. */ :root[data-texture="grain"] body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: var(--grain-strength); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Lighter touch on paper, where grain reads much more strongly than it does over a dark ground. */ :root { --iris-ring-a: .42; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --iris-ring-a: .30; } } :root[data-theme="dark"] { --iris-ring-a: .30; } :root[data-theme="light"] { --iris-ring-a: .42; } :root { --grain-strength: .035; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grain-strength: .055; } } :root[data-theme="dark"] { --grain-strength: .055; } :root[data-theme="light"] { --grain-strength: .035; } :root[data-motion="reduce"][data-texture="grain"] body::after { opacity: 0; } /* Sky · Grass · White — the 2007 desktop wallpaper, more or less. Made to sit under the Glass style, though it works plain too. */ :root[data-style="glass"][data-palette="aero"] { --bubble-opacity: .8; /* Measured: at 75% the worst text contrast through the glass is 4.62, still clear of 4.5. A sky is meant to be a colour, not a suggestion. */ --aurora: 75%; } :root[data-palette="aero"] { --l-ink:#0b2b38; --l-paper:#dff2fb; --l-surface-lit:#f7fdff; --l-paper-2:#e2f7e4; --l-muted:#40707f; --l-faint:#4d7e8c; --l-rule:#c4e6f2; --l-rule-strong:#98cfe2; --l-accent:#0a7ea8; --l-accent-soft:#e2f7e4; --l-accent-2:#3f8f3f; --d-ink:#e2f6fd; --d-paper:#04161f; --d-surface:#123a4c; --d-paper-2:#17495e; --d-muted:#9ccadb; --d-faint:#7fb2c6; --d-rule:#1f5d76; --d-rule-strong:#2b7b9b; --d-accent:#5fd8ff; --d-accent-soft:#0a2532; --d-accent-2:#7ae08a; } /* ── Complementary palettes ──────────────────────────────────────────── The six above are each built around a single hue, which is restful but goes flat across a whole screen: page, card, accent and text all sit in the same family, so nothing pulls the eye. These three are built the other way — the accent sits 90-150 degrees round the wheel from the ground it stands on, so there is a warm note against a cool field (or the reverse) on every page rather than only inside a chart. */ /* Deep Teal · Sea Glass · Warm Amber — cool ground, warm signal */ :root[data-palette="harbour"] { --l-ink:#10262b; --l-paper:#e3eff0; --l-surface-lit:#f5fbfb; --l-paper-2:#ffeedd; --l-muted:#4a6b70; --l-faint:#587a7f; --l-rule:#cfe3e4; --l-rule-strong:#a9c9cb; --l-accent:#186b74; --l-accent-soft:#ffeedd; --l-accent-2:#b3651a; --d-ink:#e4f3f4; --d-paper:#08191c; --d-surface:#16333a; --d-paper-2:#1d424a; --d-muted:#a3c4c8; --d-faint:#87acb1; --d-rule:#2b5b66; --d-rule-strong:#3a7885; --d-accent:#5fd3c4; --d-accent-soft:#0d2429; --d-accent-2:#ffb066; } /* Indigo Night · Coral · Cornflower — the contrast Blossom only hints at */ :root[data-palette="dusk"] { --l-ink:#1e1b33; --l-paper:#eceaf3; --l-surface-lit:#faf9ff; --l-paper-2:#ffe8e4; --l-muted:#5e5a7d; --l-faint:#6d6889; --l-rule:#dbd8e8; --l-rule-strong:#bfbad4; --l-accent:#c2413f; --l-accent-soft:#ffe8e4; --l-accent-2:#4d63b5; --d-ink:#ece9f7; --d-paper:#12111f; --d-surface:#282641; --d-paper-2:#33314f; --d-muted:#aca7c6; --d-faint:#8f8aad; --d-rule:#453f68; --d-rule-strong:#5a5382; --d-accent:#ff8f7a; --d-accent-soft:#1d1a2e; --d-accent-2:#9fb4ff; } /* Olive · Terracotta · Sage — earthy, and the only warm ground here */ :root[data-palette="sagebrush"] { --l-ink:#232619; --l-paper:#eceee2; --l-surface-lit:#f9faf3; --l-paper-2:#f7e3d5; --l-muted:#5e6450; --l-faint:#6d7360; --l-rule:#dcdfcd; --l-rule-strong:#bec2ab; --l-accent:#a1512a; --l-accent-soft:#f7e3d5; --l-accent-2:#4f6f52; --d-ink:#eef0e4; --d-paper:#14170f; --d-surface:#2b2f22; --d-paper-2:#373c2c; --d-muted:#b3b9a2; --d-faint:#959c84; --d-rule:#454b36; --d-rule-strong:#5c6349; --d-accent:#f0a06a; --d-accent-soft:#1c2015; --d-accent-2:#9ecf9c; } * { box-sizing: border-box; margin: 0; padding: 0; } /* The `hidden` attribute has to actually hide things. The UA rule for it is `[hidden] { display: none }` — one class's worth of specificity, which any `.btn { display: inline-flex }` or `.row { display: flex }` in this file silently beats. That is why "Clear done" sat on the dashboard permanently with nothing to clear, and why .ctxmenu needed its own patch below. Fixed once, here, rather than per component. */ [hidden] { display: none !important; } /* Always reserve the scrollbar gutter. Without it a short page has no scrollbar and a long one does, so the whole masthead jumps 15px sideways every time you move between them. */ html { scrollbar-gutter: stable; } /* The scrollbar is part of the window, not a browser detail. Left alone it is drawn in the OS default — a hard dark slab down the edge of a pale glass page. Both syntaxes: the standard one for Firefox and modern Chromium, the -webkit- pseudo-elements for the rest, because the two overlap but neither covers everything. */ html { scrollbar-color: color-mix(in srgb, var(--rule-strong) 80%, transparent) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rule-strong) 70%, transparent); border-radius: 999px; /* Transparent border with background-clip is the trick that insets a thumb without a wrapper element. */ border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 60%, var(--rule-strong)); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Under glass the thumb becomes a little pane of its own. */ :root[data-style="glass"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, light-dark(rgb(255 255 255 / .75), rgb(255 255 255 / .30)), color-mix(in srgb, var(--accent) 45%, transparent)); background-clip: content-box; box-shadow: inset 0 1px 0 light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .3)); } @supports not (color: light-dark(#000, #fff)) { :root[data-style="glass"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--not-light, rgb(255 255 255 / .75)) var(--not-dark, rgb(255 255 255 / .30)), color-mix(in srgb, var(--accent) 45%, transparent)); box-shadow: inset 0 1px 0 var(--not-light, rgb(255 255 255 / .9)) var(--not-dark, rgb(255 255 255 / .3)); } } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--accent); } /* ── Shell ─────────────────────────────────────────────────────────── */ .masthead { border-bottom: 1px solid var(--rule); background: var(--surface); position: sticky; top: 0; z-index: 50; } .masthead-inner { max-width: 1240px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 28px; } .backbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: -6px; padding: 0; cursor: pointer; background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--muted); transition: background .12s, color .12s, border-color .12s; } .backbtn:hover { background: var(--paper-2); color: var(--ink); border-color: var(--muted); } .backbtn svg { width: 16px; height: 16px; } /* visibility, not display: the button keeps its place in the row either way, so a page with nowhere to go back to lays out identically to one that has somewhere. Hidden this way it is also out of the accessibility tree and can't be tabbed to, which display:none gave us and we shouldn't lose. */ .backbtn { visibility: hidden; } :root[data-back="1"] .backbtn { visibility: visible; } .brand { display: flex; align-items: center; gap: 11px; } /* The mark is near-black line art on transparency, so it has to flip in dark. */ /* width:auto is load-bearing — without it the width="731" attribute in the markup becomes the used width and the mark renders enormous. The attribute is there for the aspect ratio, not the size; aspect-ratio states the same thing to CSS so the box is reserved before the PNG arrives, instead of the masthead reflowing the moment it does. */ .brand img { height: 30px; width: auto; aspect-ratio: 731 / 1185; filter: var(--logo-filter); } .brand-text { line-height: 1; } .brand-name { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: .2em; text-transform: uppercase; padding-left: .2em; } /* --muted with a touch of ink, not --faint: at 8px --faint measured 3.6-4.5:1, and on Glass the aurora comes through the masthead - bare --muted still measured 4.37 on Aero's and Frost's vivid skies (lane L19, tests/test_appearance.py). */ .brand-sub { font-size: 8px; letter-spacing: .38em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 30%, var(--muted)); padding-left: .38em; margin-top: 3px; } nav.main { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; } /* --muted with a touch of ink, as .brand-sub: a page's link that is not the current one (People, beside Whiteboards - lane L3) measured 4.34-4.40:1 in bare --muted on Glass over the Aero, Frost and GuideStar skies. */ nav.main a { padding: 7px 13px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 30%, var(--muted)); border-radius: var(--radius); transition: background .12s, color .12s; } nav.main a:hover { background: var(--paper-2); color: var(--ink); } nav.main a.on { background: var(--btn-bg); color: var(--btn-fg); } /* "← Helper" (10 Oct 2026, templates/base.html): back to the Tutoring Helper's page, in a window its BOARD button opened. A lozenge like the name chip's, not a page's name: in words that are read, --ink, not the pages' muted ones (tests/test_helper_look.py measures it as drawn in all 44 looks), a little apart from them. */ nav.main a.helper-back { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 6px 13px 6px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); font-weight: 500; letter-spacing: .04em; text-transform: none; } nav.main a.helper-back:hover { background-color: var(--paper-2); color: var(--ink); } nav.main a.helper-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-style="glass"] nav.main a.helper-back { background-image: var(--gloss); box-shadow: var(--bevel); border-color: color-mix(in srgb, var(--edge-light) 55%, var(--rule-strong)); } main { max-width: 1240px; margin: 0 auto; padding: 30px 28px 90px; } /* ── Type ──────────────────────────────────────────────────────────── */ h1 { font-family: var(--serif); font-weight: 600; font-size: 34px; letter-spacing: -.01em; line-height: 1.1; } h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: .01em; } h3 { font-family: var(--serif); font-weight: 600; font-size: 17px; } .eyebrow { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); font-weight: 500; } .lede { color: var(--muted); font-size: 14px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; } .rule { height: 1px; background: var(--rule); margin: 22px 0; border: 0; } .rule-dot { display: flex; align-items: center; gap: 7px; margin: 26px 0; } .rule-dot::before, .rule-dot::after { content: ''; height: 1px; background: var(--rule); flex: 1; } .rule-dot span { width: 4px; height: 4px; background: var(--rule-strong); transform: rotate(45deg); } .mono { font-variant-numeric: tabular-nums; } /* The sum row in "Owed to you". It is the figure the box exists to give, so it is the largest thing in it — the two rows above are its workings. Lining tabular figures, so the digits line up with those rows and sit on one baseline. */ .owed-total { padding-top: 13px; } .owed-total > b { font-size: 19px; letter-spacing: -.01em; } .owed-total .small b { font-size: 13px; } /* ── Cards & grids ─────────────────────────────────────────────────── */ /* Raised, and made to look it. A panel only reads as sitting above the page if three things agree: it is lighter than the page, it casts a shadow, and its top edge catches a little light. The colours were carrying that on their own and only just — a card was 8-20% brighter than the page depending on palette, which is below the point at which the eye reads "separate object", so the whole screen collapsed into one flat field. */ .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); position: relative; } /* The hairline along the top edge. One pixel of the light the panel would catch if it really were tilted up out of the page — the cheapest honest depth cue there is, and it costs no contrast anywhere else. */ .card::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(to right, transparent, var(--edge-light) 18%, var(--edge-light) 82%, transparent); pointer-events: none; } .card + .card { margin-top: 16px; } /* ...but inside a grid the gap already does the spacing, and a stray margin on every card except the first knocks that column out of alignment. */ .grid > .card + .card { margin-top: 0; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } /* Cards sitting side by side stretch to the tallest in the row, so pin their closing block to the bottom and the rules and buttons line up across all. */ .card.stacked { display: flex; flex-direction: column; } .card.stacked .card-foot { margin-top: auto; } .card.stacked .card-foot > .rule:first-child { margin-top: 22px; } .grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .split { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(0,1fr); gap: 22px; align-items: start; } @media (max-width: 940px) { .split { grid-template-columns: 1fr; } } /* ═══ tables, buttons and forms, drop-down lists, badges, progress (GuideStar app.css 1108–1454) ═══ */ /* ── Tables ────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding: 0 10px 8px; border-bottom: 1px solid var(--rule-strong); } td { padding: 11px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; font-size: 14px; } tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--paper-2); } td.r, th.r { text-align: right; } .table-wrap { overflow-x: auto; } /* ── Buttons & forms ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 8px 15px; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--radius); /* Explicit, not `normal`. With normal line-height a button's height comes from the font's own metrics, so the same class rendered 32, 34 and 36px across this page depending on the family — most visibly on the type picker, where each button previews a different one. 18px reproduces the 36px every other button already was, and makes it font-independent. */ line-height: 18px; transition: opacity .12s, background .12s, color .12s; } .btn:hover { opacity: .84; color: var(--btn-fg); } .btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); } .btn.ghost:hover { background: var(--paper-2); color: var(--ink); opacity: 1; } .btn.sm { padding: 5px 10px; font-size: 10.5px; line-height: 16px; } .btn.danger { background: transparent; color: var(--red); border-color: var(--red-br); } .btn.danger:hover { background: var(--red-bg); } .btn[disabled] { opacity: .45; cursor: not-allowed; } label { display: block; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; font-weight: 500; } input, select, textarea { width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--field-bg); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 8px 10px; box-shadow: var(--field-inset); } option, optgroup { background: var(--surface); color: var(--ink); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } textarea { min-height: 84px; resize: vertical; line-height: 1.5; } .field { margin-bottom: 14px; } /* A field-shaped readout: the same sunken pane as an input, for a value the page is telling you rather than asking you for. It exists because hiding a control that cannot do anything also hid what it was reporting. With one model on the account there is nothing to pick — but you still need to know which model is writing your questions, and a missing row answers that with silence. Sunken, never raised: raised and glossy is this app's word for "press me". A softer edge than an input (--rule, not --rule-strong) and no focus ring is what separates "information" from "a field that won't let you type". */ .field-readout { width: 100%; font-size: 14px; color: var(--ink); background: var(--field-bg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; box-shadow: var(--field-inset); display: flex; align-items: center; gap: 8px; cursor: default; } /* One line, exactly as tall as the input beside it: a readout that wraps makes its field taller than the rest of the row, and a row aligned to its bottom edge then lifts that one label above the others. What will not fit is in the tooltip, which is where the detail lives anyway. */ .field-readout.one-line { display: block; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Drop-down lists, drawn by the page ───────────────────────────────── A native is Chromium's only, so a browser that can draw this list has them too (Safari draws its own). */ transform-origin: top center; transition: opacity var(--t-quick) var(--ease-out), transform var(--t-quick) var(--ease-out), display var(--t-quick) allow-discrete, overlay var(--t-quick) allow-discrete; } select::picker(select):not(:popover-open) { opacity: 0; transform: translateY(-6px); } @starting-style { select::picker(select):popover-open { opacity: 0; transform: translateY(-6px); } } :root[data-motion="reduce"] select::picker(select) { transition: none; } select option { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 5px; font-size: 13px; color: var(--ink); background: transparent; /* Reset what a group label sets on its optgroup (below), because the options inside inherit it. */ text-transform: none; letter-spacing: normal; font-weight: 400; cursor: pointer; } select option:hover, select option:focus-visible { background: var(--paper-2); outline: none; } select option:checked { font-weight: 600; } /* The tick. Accent-coloured, and reserved for every row whether checked or not, so the names line up down the list. */ select option::checkmark { color: var(--accent); width: 1em; flex: none; } /* A group's label (.menu-label, in the context menu). Chromium draws the label itself, inside the optgroup, from its `label` attribute — there is no legend and no ::before to style, and the label is reachable only through what the optgroup passes down. So the group carries the label's type, and each option resets it (above). Verified: neither `optgroup::before` nor `optgroup legend` matches anything. */ select optgroup { padding: 6px 9px 2px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } select optgroup option { margin: 0 -9px; } /* Glass: the list is a pane like the cards, not a painted box over them. */ :root[data-style="glass"] select::picker(select) { background-color: var(--pane); background-image: var(--gloss-soft); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: color-mix(in srgb, var(--edge-light) 55%, var(--rule)); box-shadow: var(--rim), var(--shadow-2); } @media (prefers-reduced-transparency: reduce) { :root[data-style="glass"] select::picker(select) { background-color: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } } } /* Sits under the minutes box rather than inside it — a number input's spinner already owns the right-hand edge. Hidden when empty so a blank field has no stray line under it. */ .dur-hint { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .dur-hint:empty { display: none; } .form-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .inline-form { display: inline; } .check { display: flex; align-items: center; gap: 8px; } .check input { width: auto; } .check label { margin: 0; text-transform: none; letter-spacing: .02em; font-size: 13.5px; color: var(--ink); } /* ── Badges ────────────────────────────────────────────────────────── */ .badge { display: inline-block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--rule-strong); color: var(--muted); background: transparent; white-space: nowrap; font-weight: 500; } .badge.green { color: var(--green); border-color: var(--green-br); background: var(--green-bg); } .badge.amber { color: var(--amber); border-color: var(--amber-br); background: var(--amber-bg); } .badge.red { color: var(--red); border-color: var(--red-br); background: var(--red-bg); } .badge.blue { color: var(--blue); border-color: var(--blue-br); background: var(--blue-bg); } .badge.ink { color: var(--btn-fg); background: var(--btn-bg); border-color: var(--btn-bg); } /* The yellow a pane is tinted with. Deliberately NOT --amber: that token is #946923, a dark brown-gold, chosen to be read as TEXT on a pale ground. Mixed into a pane it does not tint it yellow, it darkens it. A glass tint has to be a light, saturated version of the hue, so that adding it to the pane moves the colour without moving the brightness. (GuideStar's schedule chips, which it was made for, did not come to the Board.) */ :root { --amber-glass: #ffc83c; } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; } /* ── Progress ──────────────────────────────────────────────────────── */ .bar { height: 5px; background: var(--track); border-radius: 100px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent-2); border-radius: 100px; transition: width .25s; } .bar.tall { height: 7px; } .topic-tree { font-size: 14px; } .topic-group { border-top: 1px solid var(--rule); padding: 12px 0; } .topic-group:first-child { border-top: 0; } .topic-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; } .topic-group > summary::-webkit-details-marker { display: none; } .topic-group > summary::before { content: '›'; color: var(--faint); font-size: 17px; transition: transform .15s; line-height: 1; } .topic-group[open] > summary::before { transform: rotate(90deg); } .topic-title { font-family: var(--serif); font-size: 16.5px; font-weight: 600; flex: 1; } .topic-code { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .topic-list { margin: 10px 0 2px 22px; } .topic-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px dotted var(--rule); } /* A week of the teaching plan. Thirty-six of them on the page and all but three or four below the fold, so the ones out of view are not laid out until scrolled towards — the same arrangement as the Library's groups. The placeholder is a typical week's height; `auto` keeps the real height once a card has been rendered, so nothing jumps on the way back up. Anchors (#week-12, where "Move to" lands you) still work: the browser renders the target before scrolling to it. */ .week-card { content-visibility: auto; contain-intrinsic-size: auto 340px; } .topic-row:last-child { border-bottom: 0; } .topic-row .name { font-size: 13.5px; } .topic-row select { width: auto; font-size: 11.5px; padding: 3px 6px; color: var(--muted); } .topic-meta { font-size: 11px; color: var(--faint); } /* ═══ lists, flash, tabs, dialogs (GuideStar app.css 1577–1650) ═══ */ /* ── Lists ─────────────────────────────────────────────────────────── */ .list { list-style: none; } .list li { padding: 11px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 12px; align-items: center; } .list li:last-child { border-bottom: 0; } .list .grow { flex: 1; min-width: 0; } .list .sub { font-size: 12px; color: var(--muted); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empty { text-align: center; padding: 34px 20px; color: var(--faint); font-size: 13.5px; } .empty .serif { font-family: var(--serif); font-size: 18px; color: var(--muted); display: block; margin-bottom: 5px; } /* ── Flash ─────────────────────────────────────────────────────────── */ .flash { border: 1px solid var(--rule-strong); background: var(--accent-soft); padding: 11px 15px; border-radius: var(--radius); margin-bottom: 20px; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; } .flash.warn { background: var(--amber-bg); border-color: var(--amber-br); color: var(--amber); } .flash button { background: none; border: 0; cursor: pointer; color: inherit; font-size: 16px; line-height: 1; opacity: .5; } /* ── Tabs ──────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 24px; flex-wrap: wrap; } .tabs a { padding: 9px 15px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a.on { color: var(--ink); border-bottom-color: var(--ink); } /* ── Dialog ────────────────────────────────────────────────────────── */ /* `margin: auto` is what centres a modal , and the `*` reset above wipes it — without this every dialog pins to the top-left corner. --dx/--dy are the drag offset, so dragging never disturbs the centring. */ dialog { border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); max-width: 620px; width: calc(100% - 40px); margin: auto; --dx: 0px; --dy: 0px; transform: translate(var(--dx), var(--dy)); } /* (With its own fallback: Safari before 17.4 gives ::backdrop none of the page's custom properties, 7 Oct 2026.) And the copy of it a closed dialog leaves fading, .gs-backdrop, right after the dialog's own copy (app.js, copyOf): each dialog's tint is said once, for both (History came up with none on Safari before 17.4, the page bright and live behind it). */ dialog::backdrop, dialog + .gs-backdrop { background: var(--backdrop, rgb(0 0 0 / .3)); } dialog .dlg-head { padding: 18px 22px 12px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; cursor: move; } /* Buttons in the header stay clickable rather than becoming drag handles. */ dialog .dlg-head button, dialog .dlg-head a, dialog .dlg-head input, dialog .dlg-head select { cursor: pointer; } /* (-webkit-user-select beside every user-select: Safari, an iPad's too, knows only that one - a dialog dragged by its head selected the words it passed over, and a cropped picture or a video's poster could be selected as a picture. tests/test_safari.py holds every rule to it: 7 Oct 2026, the owner: "make sure it all works on safari too".) */ dialog.dragging { -webkit-user-select: none; user-select: none; } dialog.dragging .dlg-head { cursor: var(--cur-grabbing); } dialog .dlg-body { padding: 20px 22px; max-height: 68vh; overflow-y: auto; } dialog .dlg-foot { padding: 14px 22px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; gap: 10px; background: var(--paper-2); } /* Held for one frame while the palette changes: matches everything, which forces the restyle, and kills transitions so the page doesn't animate through an intermediate colour on the way. Transitions only, since 7 Oct 2026: `animation: none` as well stopped every animation for those two frames and started it again from nothing after - each bubble jumped back to the foot of its rise, and a menu blooming as the look changed bloomed twice. No keyframes on the page move a colour, so there is nothing for them to animate through. */ :root.theme-swap, :root.theme-swap * { transition: none !important; } /* Replaces the browser's confirm(). Narrower than a form dialog — it holds one question — and with no header bar, since there is nothing to title or drag. */ dialog.confirm { max-width: 420px; } dialog.confirm .dlg-body { padding: 22px 22px 18px; } .confirm-q { font-family: var(--serif); font-size: 18px; line-height: 1.35; font-weight: 400; margin: 0; color: var(--ink); } .confirm-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); white-space: pre-line; } /* ═══ utility (GuideStar app.css 1872–1890) ═══ */ /* ── Utility ───────────────────────────────────────────────────────── */ .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row.tight { gap: 6px; } .right { margin-left: auto; } .muted { color: var(--muted); } .faint { color: var(--faint); } .red { color: var(--red); } .small { font-size: 12px; } .tiny { font-size: 11px; } .serif { font-family: var(--serif); } .nowrap { white-space: nowrap; } .mt { margin-top: 16px; } .mt-lg { margin-top: 28px; } .mb { margin-bottom: 16px; } .pre { white-space: pre-wrap; } .code { font-family: 'DM Mono', ui-monospace, Consolas, monospace; font-size: 12px; background: var(--paper-2); padding: 2px 6px; border-radius: 2px; } .hide { display: none !important; } /* ═══ the right-click menu (GuideStar app.css 2455–2511) ═══ */ /* The right-click menu, and the editor's menus (⋯ among them). Fixed-position so nothing it opens over clips it. */ /* A fixed width, not a min-width: the menu is measured before it is moved into place, and a width that depends on where it sits would rewrap the labels and change its height, leaving the clamp that keeps it on screen working from a stale number. max-height covers the case where it is simply taller than the window — better a scrollable menu than a "Delete" you cannot reach. */ .ctxmenu { position: fixed; z-index: 200; width: 244px; padding: 5px; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: var(--shadow-3); } .ctxmenu[hidden] { display: none; } /* A heading's words: --muted with a touch of ink, as .brand-sub, not --faint - at 11.5px --faint measured 3.99-4.35:1 on the menu's own pane in the light theme, in every palette but Aero and Harbour (1 Oct 2026, measured for ⋯'s new "Full screen": tests/test_fullscreen.py). */ .menu-head { padding: 6px 9px 7px; font-size: 11.5px; color: color-mix(in srgb, var(--ink) 30%, var(--muted)); border-bottom: 1px solid var(--rule); margin-bottom: 4px; overflow: hidden; } /* Two lines now — who and when, then what. Each truncates on its own rather than the pair sharing one nowrap, which would have hidden the subjects entirely the moment the first line filled the width. */ .menu-head, .menu-head i { display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .menu-head i { margin-top: 1px; } .menu-item { display: block; width: 100%; text-align: left; padding: 6px 9px; border: 0; border-radius: 5px; background: transparent; font: inherit; font-size: 13px; color: var(--ink); text-decoration: none; cursor: pointer; } .menu-item:hover { background: var(--paper-2); } /* The shortcut, shown so the keyboard route is discoverable from the menu rather than being something you had to be told about. */ .menu-key { float: right; margin-left: 12px; font-size: 10.5px; font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; } /* A line that explains rather than does — no hover, no pointer. */ .menu-item.is-note { color: var(--faint); font-size: 12px; cursor: default; } .menu-item.is-note:hover { background: transparent; } .menu-head i { font-style: normal; color: var(--muted); } .menu-item.danger { color: var(--red); } .menu-rule { height: 1px; background: var(--rule); margin: 4px 0; } .menu-label { padding: 4px 9px 2px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } /* Subjects in the menu carry their own colour, so picking one is picking the colour too — the tag and the tint can't drift apart. */ .subject-item { display: flex; align-items: center; gap: 9px; } .subject-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .18); } .menu-item.on { background: var(--accent-soft); font-weight: 500; } .menu-item.on::after { content: "✓"; margin-left: auto; color: var(--accent); } /* ═══ the theme toggle (GuideStar app.css 2690–2714) ═══ */ /* ── Theme toggle ──────────────────────────────────────────────────── */ /* Sign out (templates/base.html, signed in) is the same small button beside it, and so are the Settings panel's gear before it and the panel's own close and "Play a sample" buttons. */ .theme-toggle, .signout-btn, .settings-btn, .st-close, .st-play { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; cursor: pointer; background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--muted); line-height: 1; transition: background .12s, color .12s, border-color .12s; } .theme-toggle:hover, .signout-btn:hover, .settings-btn:hover, .st-close:hover, .st-play:hover:not(:disabled) { background: var(--paper-2); color: var(--ink); border-color: var(--muted); } .theme-toggle svg, .signout-btn svg, .settings-btn svg, .st-close svg, .st-play svg { width: 15px; height: 15px; } .settings-btn svg { width: 17px; height: 17px; } /* Its form takes no room of its own: the button sits in the nav's row like the rest. */ nav.main form.signout { display: contents; } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } } :root[data-theme="dark"] .theme-toggle .sun { display: block; } :root[data-theme="dark"] .theme-toggle .moon { display: none; } :root[data-theme="light"] .theme-toggle .sun { display: none; } :root[data-theme="light"] .theme-toggle .moon { display: block; } /* No per-theme component overrides live here any more — the variables above already carry both sides. */ /* ═══ the Settings panel (1 Oct 2026: templates/settings.html, js/settings.js; lane L19's Appearance panel before) ═══ */ /* A dialog, so on Glass it is already a pane like the cards (the glass rules above): these only lay it out. It opens under the masthead at the right, where its gear is, and dims nothing - the page behind is what a change of the look is judged by, so it stays in full view (the backdrop is clear, and a click on it closes the panel). Its sections are listed down its left side and one is shown at a time, so the panel keeps one height whichever is open (nothing jumps as you go from one to the next). Each setting is a row: its name and a line saying what it does on the left, its control in a column of its own on the right - every control starts at the same place - or, for the palettes and the type, across the whole row under its words. On a phone the sections run across the top and every control goes under its words. Every word in it is --ink, --muted with 40% of --ink (--st-quiet), or --btn-fg on an opaque --btn-bg (the section shown, the choice made): each measured as drawn at 4.5:1 or more in every palette, light and dark, glass and plain (tests/test_settings.py, tests/test_appearance.py). Bare --muted is not enough here: the pane's own sheen (--gloss-soft) lightens its top half, and in the dark theme --muted there measured 3.4-4.4:1 (lane L19). The masthead's 30% of ink was not enough either: Ember's dark Glass put the descriptions at 4.39:1. No --faint at all: on the glass over the aurora it falls short. */ dialog.settings { --st-quiet: color-mix(in srgb, var(--ink) 40%, var(--muted)); width: min(700px, calc(100% - 24px)); max-width: none; height: min(620px, calc(100vh - 78px)); height: min(620px, calc(100dvh - 78px)); margin: 62px 16px auto auto; overflow: hidden; /* (Its column on the closed dialog too, since 7 Oct 2026. Under [open] alone, a dialog going - drawn on for its fade after [open] came off - was laid out again as a block for the whole of it, its foot jumping up the pane; [open] now only gives it its flex, and GSMotion keeps [open] on to the end of the fade besides.) */ flex-direction: column; } dialog.settings[open] { display: flex; } dialog.settings::backdrop, dialog.settings + .gs-backdrop { background: transparent; } /* Over a whiteboard, in the dark, the Glass pane is nearly solid (96%) and --st-quiet has more ink (75%, not 40%). What the pane lets through there is the page's paper - near white whatever the theme - not the dark aurora of the list of whiteboards, and 14% of near white under the sheen lifted it enough to put --st-quiet at 3.3-4.4:1 in every section, in every palette (measured as drawn, 1 Oct 2026; over the list it passed). More ink alone could not mend it - the descriptions would have had to be nearly --ink - and the pane alone left the lines highest in a section, under the sheen, at 4.2-4.5 (Ember's the lowest). 55% ink measured 4.6, until the names' lines and a phone's longer panel (main, later the same day) put some at 4.35-4.49; 65% measures 4.62 on a phone, 4.9 wider. 9 Oct 2026: a row more in Writing (the ring where the pen writes) brought a description to the top of a phone's screenful, under the sheen, at 4.35-4.47 (Ember's the lowest) - 75% measures 4.61 there, 5.26 wider. In the light both stay as they are (Glass's 86%, 40%): the paper behind is only lighter glass. Set as --pane, so that with less transparency asked for (prefers-reduced-transparency, the Glass rules) the pane is still the solid surface. */ :root[data-style="glass"] body:has(.bd) dialog.settings { --pane: light-dark(color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)); --st-quiet: light-dark(color-mix(in srgb, var(--ink) 40%, var(--muted)), color-mix(in srgb, var(--ink) 75%, var(--muted))); } @supports not (color: light-dark(#000, #fff)) { :root[data-style="glass"] body:has(.bd) dialog.settings { --pane: var(--not-light, color-mix(in srgb, var(--surface) 86%, transparent)) var(--not-dark, color-mix(in srgb, var(--surface) 96%, transparent)); --st-quiet: var(--not-light, color-mix(in srgb, var(--ink) 40%, var(--muted))) var(--not-dark, color-mix(in srgb, var(--ink) 75%, var(--muted))); } } /* New whiteboard (and Save as a template's sheet) over a whiteboard, in the dark: nearly solid too, as Settings (6 Oct 2026). Under the masthead it had the masthead's dark behind its top half; with one slim bar over the editor it is the page all the way up, its light paper through Glass's 86% - a template's sentence, --ns-soft, read 3.9:1 (GuideStar's) and the stronger ink alone still 4.4 (Ember's). */ :root[data-style="glass"] body:has(.bd) dialog:is(.bi-sheet, .tp-sheet) { --pane: light-dark(color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)); } @supports not (color: light-dark(#000, #fff)) { :root[data-style="glass"] body:has(.bd) dialog:is(.bi-sheet, .tp-sheet) { --pane: var(--not-light, color-mix(in srgb, var(--surface) 86%, transparent)) var(--not-dark, color-mix(in srgb, var(--surface) 96%, transparent)); } } /* Over the list of whiteboards, in the dark, --st-quiet with 65% ink, as over a whiteboard (2 Oct 2026): its New whiteboard is opaque now (app.css, "New whiteboard"), and a palette's button in the dark theme is pale - right under the panel's top right at a desktop's width, under its lines on a phone's. Through the pane it lifted the descriptions over it to 4.1-4.5:1 (Citrus the lowest), measured as drawn. A more solid pane (92%) was tried first: it mended the desktop and not the phone, where the dark aurora behind other lines is darker than the pane, so more pane is less contrast there; 55% left Citrus's type line at 4.48 on a phone. The light theme's button is dark, and leaves them be. */ :root[data-style="glass"] body:has(.bi-newbtn) dialog.settings { --st-quiet: light-dark(color-mix(in srgb, var(--ink) 40%, var(--muted)), color-mix(in srgb, var(--ink) 65%, var(--muted))); } @supports not (color: light-dark(#000, #fff)) { :root[data-style="glass"] body:has(.bi-newbtn) dialog.settings { --st-quiet: var(--not-light, color-mix(in srgb, var(--ink) 40%, var(--muted))) var(--not-dark, color-mix(in srgb, var(--ink) 65%, var(--muted))); } } /* A popped-out whiteboard has no masthead to sit under. */ body.bare dialog.settings { margin-top: 12px; height: min(620px, calc(100dvh - 24px)); } /* Nor has a whiteboard since 5 Oct 2026: the panel opens just under the editor's bar, whose gear is at its right end - 43 px high with a mouse (app.css, "The editor's bar"); a finger's 55 px bar leaves the 62 px above as it was. */ @media (pointer: fine) and (min-width: 601px) { body:not(.bare):has(.bd) dialog.settings { margin-top: 51px; height: min(620px, calc(100vh - 63px)); height: min(620px, calc(100dvh - 63px)); } } .st-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 12px; border-bottom: 1px solid var(--rule); } .st-head h2 { flex: 1; min-width: 0; font-size: 22px; line-height: 1.2; } /* A phone's way back from a section to the list (settings.js, back). */ .st-back { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; margin: -4px 0 -4px -8px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; } .st-back[hidden] { display: none; } .st-back svg { width: 20px; height: 20px; } .st-back:hover { background: var(--paper-2); } .st-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .st-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); } /* The sections: a column of names, the one shown in the primary button's colours (as a chosen choice is). */ .st-tabs { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--rule); overflow-y: auto; } .st-tab { display: block; width: 100%; padding: 8px 14px; cursor: pointer; text-align: left; border: 0; border-radius: var(--radius); background: transparent; font: inherit; font-size: 14px; line-height: 20px; color: var(--ink); transition: background .12s, color .12s; } .st-tab:hover { background: var(--paper-2); } .st-tabname { display: block; } /* What is in each, said only in the phone's list of them (below). */ .st-tabnote { display: none; } .st-tab[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-fg); font-weight: 500; } .st-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-style="glass"] .st-tab { border-radius: 999px; } :root[data-style="glass"] .st-tab[aria-selected="true"] { background-image: linear-gradient(180deg, rgb(255 255 255 / .26) 0, rgb(255 255 255 / .08) 48%, transparent 48.5%); box-shadow: var(--bevel); } .st-panels { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px 10px; } .st-panel:focus-visible { outline: none; } .st-heading { font-size: 19px; line-height: 1.25; padding: 16px 0 4px; } .st-intro { font-size: 13px; line-height: 1.45; color: var(--st-quiet); padding-bottom: 4px; } .st-row { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; align-items: center; gap: 8px 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); } .st-row:last-child { border-bottom: 0; } .st-wide { grid-template-columns: minmax(0, 1fr); } .st-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* (A