/* 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)); } /* ── 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; } :root[data-font="terminal"] .stat-figure { font-size: 26px; } /* The toggle pins a side by switching color-scheme; every light-dark() above follows automatically. */ :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%; } /* 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 cursor 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 cursor squashes it through --squish, a 2-D matrix set from app.js (bubblesInTheWater), 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. */ :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; } /* 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. */ @keyframes aero-rise { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate3d(26px, -46vh, 0) scale(1.06); } 92% { opacity: 1; } 100% { transform: translate3d(-12px, -94vh, 0) scale(.94); opacity: 0; } } @keyframes aero-wobble { from { scale: 1.035 .965; } to { scale: .965 1.035; } } @media (prefers-reduced-motion: reduce) { :root[data-style="glass"] .aero-bubbles span { animation: none; /* Still there, just still — the look survives without the motion. */ transform: translate3d(0, -40vh, 0); } :root[data-style="glass"] .aero-bubbles span::before { animation: none; } } /* Bubbles switched off for the see-through window (Settings → Appearance → See-through), where they float over the desktop rather than over the page. data-bubbles="off" is only ever set on in that window, so every other window keeps the Glass style's own. 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. */ :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"] .stat, :root[data-style="glass"] .ctxmenu, :root[data-style="glass"] dialog, :root[data-style="glass"] .cal { 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, :root[data-style="glass"][data-iridescent="on"] .stat::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 > *, :root[data-style="glass"][data-iridescent="on"] .stat > * { 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, :root[data-style="glass"]:not([data-iridescent="on"]) .stat::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)); } /* 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)); } /* 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; } /* Lessons on the calendar get the same gloss, so the grid belongs to the same world as the chrome around it. */ :root[data-style="glass"] .ev { border-radius: 9px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--edge-light) 120%, transparent); } @media (prefers-reduced-transparency: reduce) { :root[data-style="glass"] .card, :root[data-style="glass"] .stat, :root[data-style="glass"] .ctxmenu, :root[data-style="glass"] dialog, :root[data-style="glass"] .cal, :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; } @media (prefers-reduced-motion: reduce) { :root[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)); } 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; } /* ── When the window has no title bar of its own ───────────────────────── With window-controls-overlay the OS draws only the three buttons, over the top-right of our page, and hands us the strip they sit in. These variables describe the space actually left: env(titlebar-area-width) is the page width minus the buttons. Outside that mode every one of them falls back to its second argument, so this costs nothing normally. -webkit-app-region: drag makes the masthead behave as the title bar it has replaced — you can pick the window up by it. Anything clickable inside has to opt back out with `no-drag`, or it becomes a drag handle and stops responding to clicks. */ @media (display-mode: window-controls-overlay) { .masthead { /* Sit in the overlay strip, and stop short of the system buttons. */ padding-left: env(titlebar-area-x, 0px); width: env(titlebar-area-width, 100%); -webkit-app-region: drag; app-region: drag; } .masthead a, .masthead button, .masthead select, .masthead input { -webkit-app-region: no-drag; app-region: no-drag; } /* The page starts below the overlay strip rather than under it. */ body { padding-top: env(titlebar-area-height, 0px); } } .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); } 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, .stat::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; } } .stat { border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; background: var(--surface); box-shadow: var(--shadow); position: relative; } .stat .label { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); } /* The brand serif's figures are old-style by default — no spur on the "1", varying baselines on 3/5/7/9 — which reads fine in a sentence but not as a number you're meant to take in at a glance. Same fix as the day-label dates: lining, tabular figures, still in the serif that makes the tile. */ .stat .value { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.15; margin-top: 5px; font-variant-numeric: lining-nums tabular-nums; } .stat .note { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: lining-nums tabular-nums; } /* The featured tile takes its emphasis from a gold edge and gold figure, which works on paper and on graphite without tinting the fill brown. */ /* The featured tile in the SECOND accent, not the first. Every palette carries two — one for "you can act on this", one for "this is a measurement" — but the second was only ever reaching charts and progress bars, so on a page of stat tiles and lists it never appeared at all and the screen came out in a single hue. Money is a measurement, so this is the colour it was always meant to be, and it gives every palette a warm note against a cool field (or the reverse) on the pages you actually look at. The figure is 30px bold — large text — so the 3.0:1 threshold applies to it, and the smallest margin across ten palettes is 3.87. */ .stat.hi { background: var(--accent-soft); border-color: var(--accent-2); } .stat.hi .value { color: var(--accent-2); } /* ═══ 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