/* Stardust tutorials theme: a space HUD after StarCraft II: Legacy of the Void. Frames are 96x96 SVGs in frames/, cut as 9-slices (border-image slice 24) so their chamfered corners keep their shape at any size. Michroma sets display type and HUD labels; Exo 2 sets everything else. Both are OFL licensed (fonts/*-OFL.txt). The /theme page shows every component. */ @font-face { font-family: "Michroma"; src: url("/assets/fonts/michroma-293991f2d789221189652d436a23918a6f18ced153b257fddda55bce970ceb25.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Code, terminals and data; its programming ligatures (=>, !=, ::) are on. */ @font-face { font-family: "Fira Code"; src: url("/assets/fonts/firacode-d1a7a65a3af91d30210a50920494dac01d56d453d2c0e2e57421251c2f084329.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* Datastar's brand face, for the wordmark on the team card. Self-hosted like every other face here: data-star.dev pulls it from Google Fonts, which would be a third-party request on a page that makes none. */ @font-face { font-family: "Audiowide"; src: url("/assets/fonts/audiowide-e21fd195dd9dcdafc5a0f162a8fc252703f3683179861afb057cd58f9d27dbe5.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Exo 2"; src: url("/assets/fonts/exo2-27fcd2040d80e4db71edce62bd3fbcb97e5253b62582f7ddd3960efd6c009406.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Exo 2"; src: url("/assets/fonts/exo2-italic-f882f28fd1536d21307b092a8b29e92ac18862cf7642194b89ad04647ea10e8e.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { color-scheme: dark; /* Every translucent tint in this sheet is rgb(var(--ch-*) / a%), so a theme redefines a channel once and each tint that uses it follows. The tokens below name colours; these name the channels those colours are mixed from. */ --ch-void: 2 5 11; --ch-ink: 2 9 19; --ch-deep: 6 17 38; --ch-surface: 6 20 42; --ch-edge: 47 140 255; --ch-glow: 92 200 255; --ch-info: 98 210 255; --ch-prompt: 125 255 154; --ch-success: 111 224 168; --ch-action: 214 162 91; --ch-action-high: 255 170 60; --ch-warning: 255 193 77; --ch-danger: 255 107 107; --ch-paper: 255 255 255; --ch-shadow: 0 0 0; /* Code colours the hl- classes use that are not interface colours. */ --color-code-string: #9fe6b8; --color-code-constant: #ff9f7a; --color-code-escape: #d7a6ff; --color-code-variable: #ff9d3c; --color-code-tag: #ff9fd0; /* VS Code's dark bracket colors, so DUST matches from editor to page. */ --color-code-rainbow-1: #ffd700; --color-code-rainbow-2: #da70d6; --color-code-rainbow-3: #87cefa; /* Frame art. A theme swaps the file; the 9-slice geometry never changes. */ --frame-src-modal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cdefs%3E %3ClinearGradient id='rim' x1='0' y1='0' x2='0' y2='1'%3E %3Cstop offset='0' stop-color='%238fdcff'/%3E %3Cstop offset='.5' stop-color='%232f8cff'/%3E %3Cstop offset='1' stop-color='%231b56a8'/%3E %3C/linearGradient%3E %3Cfilter id='glow' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E %3CfeGaussianBlur stdDeviation='2'/%3E %3C/filter%3E %3C/defs%3E %3Cpath fill='%23040b18' fill-opacity='.95' d='M16 6h64l10 10v64L80 90H16L6 80V16z'/%3E %3Cpath fill='none' stroke='%232f8cff' stroke-opacity='.75' stroke-width='5' filter='url(%23glow)' d='M16 6h64l10 10v64L80 90H16L6 80V16z'/%3E %3Cpath fill='none' stroke='%2301040a' stroke-width='3' d='M17 10h62l7 7v62l-7 7H17l-7-7V17z'/%3E %3Cpath fill='none' stroke='url(%23rim)' stroke-width='3' d='M16 6h64l10 10v64L80 90H16L6 80V16z'/%3E %3Cpath fill='none' stroke='%239fe0ff' stroke-opacity='.3' d='M18 13h60l5 5v60l-5 5H18l-5-5V18z'/%3E %3Cpath fill='%23bfe9ff' d='M6 16 16 6h6l-3 3h-2l-8 8v2l-3 3z'/%3E %3Cpath fill='%23bfe9ff' fill-opacity='.7' d='M90 80 80 90h-6l3-3h2l8-8v-2l3-3z'/%3E %3C/svg%3E") /* frames/modal.svg */; --frame-src-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cpath fill='%2306142a' fill-opacity='.86' d='M14 2h68l12 12v68L82 94H14L2 82V14z'/%3E %3Cpath fill='none' stroke='%231f5fae' stroke-width='2' d='M14 3h68l11 11v68L82 93H14L3 82V14z'/%3E %3Cpath fill='none' stroke='%235cc8ff' stroke-width='2' d='M3 22v-8L14 3h8M74 3h8l11 11v8M93 74v8L82 93h-8M22 93h-8L3 82v-8'/%3E %3C/svg%3E") /* frames/panel.svg */; --frame-src-code-brackets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- HUD targeting brackets at the corners, no edges between. The dim fill and its pattern come from pre.panel's background in style.css. --%3E %3Cpath fill='none' stroke='%235cc8ff' stroke-width='3' d='M2 20V2h18M76 2h18v18M94 76v18H76M20 94H2V76'/%3E %3Cpath fill='none' stroke='%232f8cff' stroke-opacity='.5' d='M9 14V9h5M82 9h5v5M87 82v5h-5M14 87H9v-5'/%3E %3C/svg%3E") /* frames/code-brackets.svg */; --frame-src-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cpath fill='%230a1a30' fill-opacity='.92' d='M10 4h76l6 6v76l-6 6H10l-6-6V10z'/%3E %3Cpath fill='none' stroke='%231f5fae' stroke-width='2' d='M10 5h76l5 5v76l-5 5H10l-5-5V10z'/%3E %3Cpath fill='%236f8399' d='M10 1h76l7 7v6h-3V9l-5-5H11L6 9v5H3V8z'/%3E %3Cpath fill='%23d7e3ee' fill-opacity='.55' d='M11 1h74v1H11z'/%3E %3Cpath fill='%232f8cff' fill-opacity='.35' d='M5 86v-8h1v8l4 4h8v1h-8z'/%3E %3C/svg%3E") /* frames/row.svg */; --frame-src-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cpath fill='%23030a14' d='M8 3h80l5 5v80l-5 5H8l-5-5V8z'/%3E %3Cpath fill='none' stroke='%23000' stroke-opacity='.6' stroke-width='4' d='M8 7h80l1 1v80l-1 1H8l-1-1V8z'/%3E %3Cpath fill='none' stroke='%232a73d6' stroke-width='3' d='M8 4h80l4 4v80l-4 4H8l-4-4V8z'/%3E %3Cpath fill='none' stroke='%238fdcff' stroke-opacity='.35' d='M9 2h78'/%3E %3C/svg%3E") /* frames/field.svg */; --frame-src-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- One diagonal cut, a lifted face and a hairline rim, after the mood boards. A vertical gradient survives the 9-slice, because every cell in a row stretches the same way. --%3E %3Cdefs%3E%3ClinearGradient id='default-face' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23061a33'/%3E%3Cstop offset='.45' stop-color='%230f3160'/%3E%3Cstop offset='.62' stop-color='%230f3160'/%3E%3Cstop offset='1' stop-color='%23061a33'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath fill='url(%23default-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%2301060d' stroke-width='14' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='url(%23default-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%239fd8ff' stroke-width='3.0' d='M23 7H89v66l-16 16H7V23z'/%3E %3C/svg%3E") /* frames/button.svg */; --frame-src-button-action: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- One diagonal cut, a lifted face and a hairline rim, after the mood boards. A vertical gradient survives the 9-slice, because every cell in a row stretches the same way. --%3E %3Cdefs%3E%3ClinearGradient id='action-face' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232a1708'/%3E%3Cstop offset='.45' stop-color='%236b3f17'/%3E%3Cstop offset='.62' stop-color='%236b3f17'/%3E%3Cstop offset='1' stop-color='%232a1708'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath fill='url(%23action-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23120a03' stroke-width='14' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='url(%23action-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23ffd08a' stroke-width='3.0' d='M23 7H89v66l-16 16H7V23z'/%3E %3C/svg%3E") /* frames/button-action.svg */; --frame-src-button-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- One diagonal cut, a lifted face and a hairline rim, after the mood boards. A vertical gradient survives the 9-slice, because every cell in a row stretches the same way. --%3E %3Cdefs%3E%3ClinearGradient id='success-face' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230d2b20'/%3E%3Cstop offset='.45' stop-color='%2317513a'/%3E%3Cstop offset='.62' stop-color='%2317513a'/%3E%3Cstop offset='1' stop-color='%230d2b20'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath fill='url(%23success-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%2304120c' stroke-width='14' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='url(%23success-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23a8ecd0' stroke-width='3.0' d='M23 7H89v66l-16 16H7V23z'/%3E %3C/svg%3E") /* frames/button-success.svg */; --frame-src-button-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- One diagonal cut, a lifted face and a hairline rim, after the mood boards. A vertical gradient survives the 9-slice, because every cell in a row stretches the same way. --%3E %3Cdefs%3E%3ClinearGradient id='danger-face' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23350d11'/%3E%3Cstop offset='.45' stop-color='%236b1a20'/%3E%3Cstop offset='.62' stop-color='%236b1a20'/%3E%3Cstop offset='1' stop-color='%23350d11'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath fill='url(%23danger-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23140507' stroke-width='14' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='url(%23danger-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23ffb0ab' stroke-width='3.0' d='M23 7H89v66l-16 16H7V23z'/%3E %3C/svg%3E") /* frames/button-danger.svg */; --frame-src-tabs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Tab strip: one frame around connected tabs, chamfered top-left and bottom-right like the LotV commander tabs. --%3E %3Cpath fill='%23040f20' fill-opacity='.92' d='M16 3h77v77L80 93H3V16z'/%3E %3Cpath fill='none' stroke='%232a73d6' stroke-width='2' d='M16 4h76v76L80 92H4V16z'/%3E %3Cpath fill='none' stroke='%238fdcff' stroke-opacity='.55' stroke-width='2' d='M4 22v-6L16 4h6M92 74v6L80 92h-6'/%3E %3C/svg%3E") /* frames/tabs.svg */; --color-void: #02050b; --color-deep: #061126; --color-line: #1f5fae; --color-line-low: rgb(var(--ch-edge) / 22%); --color-edge: #2f8cff; --color-glow: #5cc8ff; --color-text: #c9ddf2; --color-text-strong: #f2f8ff; --color-text-dim: #7d97b8; --color-sand: #fff4dc; --color-info: #62d2ff; /* The prototype site's action gold, which is also the Stardust logo's. */ --color-action: #d6a25b; --color-action-high: #ffc76a; --color-success: #6fe0a8; --color-danger: #ff6b6b; --color-warning: #ffc14d; --color-prompt: #7dff9a; /* A control's face comes from its frame, so these name what has to agree with it: the label on it, the selected tab's lit segment and its rim, and what a hover and a press do to it. */ --color-control-text: var(--color-text-strong); --color-action-label: var(--color-sand); /* The selected tab's face. Its lighter end is as light as it can be and still carry --color-control-text at WCAG AA: the label sits somewhere in the gradient, so the top of it, not the middle, is what has to pass. It used to start at #2f7fe0, which is 3.9:1 at that end. */ --color-tab-face: linear-gradient(#2a6cc0, #0d3a78); --color-tab-rim: #9fe2ff; /* A dark face lights up under the pointer and lights up more under a press. The whole filter is the token, not a number, because a light face answers with colour instead (see the light theme). */ --control-hover: brightness(1.3); --control-press: brightness(1.6); /* The unfilled part of a progress track, and the scanlines over an avatar: both sit under bright marks, so neither follows the surfaces. */ --color-track: rgb(var(--ch-ink) / 90%); --color-scanline: rgb(var(--ch-shadow) / 30%); --font-display: "Michroma", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --font-text: "Exo 2", system-ui, sans-serif; --font-data: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Rendered width of a frame's 24 unit slice. */ --frame-modal: 22px; --frame-panel: 18px; --frame-row: 14px; --frame-control: 10px; /* Buttons use the prototype's per-type frames, whose corner ornaments need a wider slice to read. */ --frame-button: 0.75rem; --content-wide: 78rem; /* Match the topbar's one/two-row thresholds so anchors and sticky rails stay below the controls. The extra language control needs the wider row. */ --topbar-height: 6.75rem; --motion-fast: 140ms; @media (min-width: 85rem) { --topbar-height: 3.5rem; } } :root:has(.topbar-two-toggles) { @media (max-width: 64rem) { --topbar-height: 10.5rem; } @media (min-width: 85rem) and (max-width: 111.99rem) { --topbar-height: 6.75rem; } } /* The light theme. The glass turns to paper and the controls turn with it: a button, a selected tab and a field take a pale face of their own hue, an ink label, and a rim dark enough to bound them against the page. The art stays, under a paper shade. Every pair here meets WCAG 2.1 AA for its job: 4.5:1 for text, 3:1 for a control's boundary and for large display type, and tests/browser/theme_switch.py measures that from the rendered pixels. (rocket/theme-switch.js) sets data-theme on : light, or dark for the dark theme, resolving "system" from prefers-color-scheme itself. The attribute is always present, so this file needs no media query, and a session without JavaScript keeps the dark theme it had before. */ :root[data-theme="light"] { color-scheme: light; --ch-void: 247 244 238; /* Surfaces that are near-black scrims in the dark theme. */ --ch-ink: 253 252 249; --ch-deep: 236 231 221; --ch-surface: 255 255 255; /* The one white inset highlight, which has to darken on paper. */ --ch-paper: 23 19 14; --ch-edge: 47 106 168; --ch-glow: 29 79 134; --ch-info: 20 83 143; --ch-prompt: 37 107 50; --ch-success: 28 100 59; --ch-action: 138 90 18; --ch-action-high: 122 74 0; --ch-warning: 122 82 0; --ch-danger: 163 34 24; --ch-shadow: 0 0 0; --color-void: #f7f4ee; --color-deep: #ece7dd; --color-line: #8a8377; --color-line-low: rgb(94 87 76 / 30%); --color-edge: #2f6aa8; --color-glow: #1d4f86; --color-text: #35302a; --color-text-strong: #17130e; --color-text-dim: #5e574c; --color-sand: #2a241b; --color-info: #14538f; --color-action: #8a5a12; --color-action-high: #7a4a00; /* Just dark enough to clear WCAG AA on the light code panel, which the previous green missed at 4.46. */ --color-success: #1c643b; --color-danger: #a32218; --color-warning: #7a5200; --color-prompt: #256b32; --color-code-string: #1a6538; /* The diagram's service colours, dark enough for their labels to clear WCAG AA on paper. */ --service-redis: #b83128; --service-postgres: #395cc5; --service-nats: #186b8e; --service-eventstore: #387133; --service-backblaze: #c61a24; --color-code-constant: #9a3d12; --color-code-escape: #6a34ad; --color-code-variable: #8a4a00; --color-code-tag: #9c2f6b; /* VS Code's light bracket colors, which hold AA on paper. */ --color-code-rainbow-1: #0431fa; --color-code-rainbow-2: #319331; --color-code-rainbow-3: #7b3814; /* The controls are light too: a pale face of the type's own hue (the frames in frames/paper/), an ink label on it, and a hover that darkens the face instead of brightening it. */ --color-control-text: #141b25; --color-action-label: #33220a; --color-tab-face: linear-gradient(#cfe1f6, #a6c6e8); --color-tab-rim: #1c5f9e; /* A light face has no room to brighten and must not darken under the hand: it deepens its colour instead, and the press adds a little light on top, so the control never reads as switched off while it is held. */ --control-hover: saturate(1.5); --control-press: saturate(1.9) brightness(1.04); --color-track: rgb(var(--ch-shadow) / 14%); --frame-src-modal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../modal.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3Cdefs%3E %3ClinearGradient id='rim' x1='0' y1='0' x2='0' y2='1'%3E %3Cstop offset='0' stop-color='%235e8fc4'/%3E %3Cstop offset='.5' stop-color='%232f6aa8'/%3E %3Cstop offset='1' stop-color='%2315406f'/%3E %3C/linearGradient%3E %3Cfilter id='glow' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E %3CfeGaussianBlur stdDeviation='2'/%3E %3C/filter%3E %3C/defs%3E %3Cpath fill='%23fffefb' fill-opacity='.95' d='M16 6h64l10 10v64L80 90H16L6 80V16z'/%3E %3Cpath fill='none' stroke='%232f6aa8' stroke-opacity='.75' stroke-width='5' filter='url(%23glow)' d='M16 6h64l10 10v64L80 90H16L6 80V16z'/%3E %3Cpath fill='none' stroke='%23cfc8bb' stroke-width='3' d='M17 10h62l7 7v62l-7 7H17l-7-7V17z'/%3E %3Cpath fill='none' stroke='url(%23rim)' stroke-width='3' d='M16 6h64l10 10v64L80 90H16L6 80V16z'/%3E %3Cpath fill='none' stroke='%232f6aa8' stroke-opacity='.3' d='M18 13h60l5 5v60l-5 5H18l-5-5V18z'/%3E %3Cpath fill='%232f6aa8' d='M6 16 16 6h6l-3 3h-2l-8 8v2l-3 3z'/%3E %3Cpath fill='%232f6aa8' fill-opacity='.7' d='M90 80 80 90h-6l3-3h2l8-8v-2l3-3z'/%3E %3C/svg%3E") /* frames/paper/modal.svg */; --frame-src-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../panel.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3Cpath fill='%23fffefb' fill-opacity='.86' d='M14 2h68l12 12v68L82 94H14L2 82V14z'/%3E %3Cpath fill='none' stroke='%238a8377' stroke-width='2' d='M14 3h68l11 11v68L82 93H14L3 82V14z'/%3E %3Cpath fill='none' stroke='%232f6aa8' stroke-width='2' d='M3 22v-8L14 3h8M74 3h8l11 11v8M93 74v8L82 93h-8M22 93h-8L3 82v-8'/%3E %3C/svg%3E") /* frames/paper/panel.svg */; --frame-src-code-brackets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../code-brackets.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3C!-- HUD targeting brackets at the corners, no edges between. The dim fill and its pattern come from pre.panel's background in style.css. --%3E %3Cpath fill='none' stroke='%232f6aa8' stroke-width='3' d='M2 20V2h18M76 2h18v18M94 76v18H76M20 94H2V76'/%3E %3Cpath fill='none' stroke='%235e574c' stroke-opacity='.5' d='M9 14V9h5M82 9h5v5M87 82v5h-5M14 87H9v-5'/%3E %3C/svg%3E") /* frames/paper/code-brackets.svg */; --frame-src-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../row.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3Cpath fill='%23fffefb' fill-opacity='.92' d='M10 4h76l6 6v76l-6 6H10l-6-6V10z'/%3E %3Cpath fill='none' stroke='%238a8377' stroke-width='2' d='M10 5h76l5 5v76l-5 5H10l-5-5V10z'/%3E %3Cpath fill='%23b9b2a4' d='M10 1h76l7 7v6h-3V9l-5-5H11L6 9v5H3V8z'/%3E %3Cpath fill='%23ffffff' fill-opacity='.55' d='M11 1h74v1H11z'/%3E %3Cpath fill='%232f6aa8' fill-opacity='.35' d='M5 86v-8h1v8l4 4h8v1h-8z'/%3E %3C/svg%3E") /* frames/paper/row.svg */; --frame-src-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../field.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3Cpath fill='%23ffffff' d='M8 3h80l5 5v80l-5 5H8l-5-5V8z'/%3E %3Cpath fill='none' stroke='%235e574c' stroke-opacity='.6' stroke-width='4' d='M8 7h80l1 1v80l-1 1H8l-1-1V8z'/%3E %3Cpath fill='none' stroke='%235e574c' stroke-width='3' d='M8 4h80l4 4v80l-4 4H8l-4-4V8z'/%3E %3Cpath fill='none' stroke='%232f6aa8' stroke-opacity='.35' d='M9 2h78'/%3E %3C/svg%3E") /* frames/paper/field.svg */; --frame-src-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../button.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3C!-- One diagonal cut, a lifted face and a hairline rim, after the mood boards. A vertical gradient survives the 9-slice, because every cell in a row stretches the same way. --%3E %3Cdefs%3E%3ClinearGradient id='default-face' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dfeaf8'/%3E%3Cstop offset='.45' stop-color='%23b7cfec'/%3E%3Cstop offset='.62' stop-color='%23b7cfec'/%3E%3Cstop offset='1' stop-color='%23dfeaf8'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath fill='url(%23default-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23f7f4ee' stroke-width='14' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='url(%23default-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%231c5f9e' stroke-width='3.0' d='M23 7H89v66l-16 16H7V23z'/%3E %3C/svg%3E") /* frames/paper/button.svg */; --frame-src-button-action: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../button-action.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3C!-- One diagonal cut, a lifted face and a hairline rim, after the mood boards. A vertical gradient survives the 9-slice, because every cell in a row stretches the same way. --%3E %3Cdefs%3E%3ClinearGradient id='action-face' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f8e7c8'/%3E%3Cstop offset='.45' stop-color='%23e3c288'/%3E%3Cstop offset='.62' stop-color='%23e3c288'/%3E%3Cstop offset='1' stop-color='%23f8e7c8'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath fill='url(%23action-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23f7f4ee' stroke-width='14' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='url(%23action-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%238a5a12' stroke-width='3.0' d='M23 7H89v66l-16 16H7V23z'/%3E %3C/svg%3E") /* frames/paper/button-action.svg */; --frame-src-button-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../button-success.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3C!-- One diagonal cut, a lifted face and a hairline rim, after the mood boards. A vertical gradient survives the 9-slice, because every cell in a row stretches the same way. --%3E %3Cdefs%3E%3ClinearGradient id='success-face' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23daf1e4'/%3E%3Cstop offset='.45' stop-color='%23a6dcc1'/%3E%3Cstop offset='.62' stop-color='%23a6dcc1'/%3E%3Cstop offset='1' stop-color='%23daf1e4'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath fill='url(%23success-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23f7f4ee' stroke-width='14' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='url(%23success-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%230c7245' stroke-width='3.0' d='M23 7H89v66l-16 16H7V23z'/%3E %3C/svg%3E") /* frames/paper/button-success.svg */; --frame-src-button-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../button-danger.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3C!-- One diagonal cut, a lifted face and a hairline rim, after the mood boards. A vertical gradient survives the 9-slice, because every cell in a row stretches the same way. --%3E %3Cdefs%3E%3ClinearGradient id='danger-face' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f9dcda'/%3E%3Cstop offset='.45' stop-color='%23eeb3ae'/%3E%3Cstop offset='.62' stop-color='%23eeb3ae'/%3E%3Cstop offset='1' stop-color='%23f9dcda'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath fill='url(%23danger-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23f7f4ee' stroke-width='14' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='url(%23danger-face)' d='M23 7H89v66l-16 16H7V23z'/%3E %3Cpath fill='none' stroke='%23a3221a' stroke-width='3.0' d='M23 7H89v66l-16 16H7V23z'/%3E %3C/svg%3E") /* frames/paper/button-danger.svg */; --frame-src-tabs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3C!-- Generated from ../tabs.svg for the light theme: see the frames/paper table in apps/web/DESIGN.md. Keep the geometry identical to the dark frame; only the colours differ. --%3E %3C!-- Tab strip: one frame around connected tabs, chamfered top-left and bottom-right like the LotV commander tabs. --%3E %3Cpath fill='%23fffefb' fill-opacity='.92' d='M16 3h77v77L80 93H3V16z'/%3E %3Cpath fill='none' stroke='%238a8377' stroke-width='2' d='M16 4h76v76L80 92H4V16z'/%3E %3Cpath fill='none' stroke='%232f6aa8' stroke-opacity='.55' stroke-width='2' d='M4 22v-6L16 4h6M92 74v6L80 92h-6'/%3E %3C/svg%3E") /* frames/paper/tabs.svg */; /* The art stays, under a paper shade instead of a black one: the same accretion behind the same glass, lit from the other side. It needs more of the shade than the dark theme does, because the art is dark and the text on it is not. The shade is rgb(var(--ch-void) / a%) in .page, so it already turned to paper with the channel; only the alphas change. */ .page { --page-shade: rgb(var(--ch-void) / 93%); &.art-desert { --page-shade: rgb(var(--ch-void) / 86%); } } /* On paper a heading needs no glow, and the blue one reads as a smear. */ h1 { text-shadow: none; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background-color: var(--color-void); color: var(--color-text); font-family: var(--font-text); font-size: 17px; line-height: 1.55; scrollbar-color: var(--color-line) var(--color-void); /* An anchor scrolls into view instead of jumping, and lands below the sticky top bar. A section link in the rail, a heading link, the browser's own history and a link from another page all follow this. */ scroll-behavior: smooth; scroll-padding-block-start: calc(var(--topbar-height) + var(--space-4)); } body { min-block-size: 100dvh; background: var(--color-void); } :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-glow); outline-offset: 3px; } a { color: var(--color-info); text-decoration-color: rgb(var(--ch-info) / 40%); text-underline-offset: 0.2em; &:hover { color: var(--color-text-strong); } } /* Display type: the face, the tracking and the uppercasing the HUD wears. Seventeen rules carried all three declarations. They are written once here, and each of those rules keeps only its own --track, beside its size and colour. The tracking stays with the rule because it is the part that varies -- with the component, and on the top bar with the viewport -- and a media query can set a custom property where it cannot read one. This is a selector list and not a class, because a class would have to be added to seventeen templates, which changes what the pages render. Inside a list each selector keeps its own specificity, so every rule that takes the treatment back off -- a label in a terminal caption, a file block's path, a Mermaid diagram's label group -- still wins exactly as it did. */ h1, h2, h3, h4, blockquote > p:last-child:has(> strong:only-child) strong, .kicker, .label, .topbar-brand, .topbar-nav a, .menu-summary, .button, .tab, .copy-popover, .briefing li, .tree-badge, .app-node, .site-footer a, .article-nav a, .article-nav span, .article-nav-category, .article-pagination a, .article-pagination span[aria-disabled], .toggle-label, th { font-family: var(--font-display); letter-spacing: var(--track); text-transform: uppercase; } h1, h2, h3, h4 { --track: 0.04em; color: var(--color-sand); font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; } h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); text-shadow: 0 0 18px rgb(var(--ch-glow) / 35%); } h2 { font-size: 1.2rem; } h3 { font-size: 0.9rem; } code, pre { font-family: var(--font-data); font-size: 0.9em; } ul { padding-inline-start: 1.1rem; } li::marker { color: var(--color-info); } /* A last paragraph that is only bold text is the quote's credit. */ blockquote { position: relative; display: grid; gap: var(--space-3); border-inline-start: 3px solid var(--color-info); padding: var(--space-4) var(--space-5) var(--space-4) var(--space-7); background: linear-gradient(90deg, rgb(var(--ch-info) / 8%), transparent); color: var(--color-text-strong); font-size: 1.1rem; font-style: italic; &::before { content: "\201C"; position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-3); color: var(--color-info); font-size: 3rem; font-style: normal; line-height: 1; opacity: 0.6; } > p:last-child:has(> strong:only-child) { text-align: end; strong { --track: 0.1em; color: var(--color-info); font-size: 0.7rem; font-style: normal; font-weight: 400; &::before { content: "\2014\00A0"; } } } } /* Type roles */ .kicker, .label { --track: 0.12em; font-size: 0.7rem; color: var(--color-info); } .label { color: var(--color-text-dim); } .dim { color: var(--color-text-dim); } .prompt { color: var(--color-prompt); font-family: var(--font-data); text-shadow: 0 0 6px rgb(var(--ch-prompt) / 45%); } /* The block cursor that blinks after a command, like a waiting terminal. Two places wear it: a .prompt line, and the last line of a live terminal. */ .prompt::after, .terminal.live .terminal-line:last-child::after { content: ""; display: inline-block; inline-size: 0.6em; block-size: 1.1em; margin-inline-start: 0.2em; vertical-align: text-bottom; background: var(--color-prompt); box-shadow: 0 0 6px rgb(var(--ch-prompt) / 45%); animation: prompt-cursor 1.1s steps(1) infinite; /* The global reduced-motion rule only shortens animations, which would make an infinite blink flicker; the cursor stays solid instead. */ @media (prefers-reduced-motion: reduce) { animation: none; } } @keyframes prompt-cursor { 50% { opacity: 0; } } .stat { color: var(--color-text-strong); font-family: var(--font-display); font-size: 1.8rem; line-height: 1; text-align: center; } /* Layout */ /* Pages sit on the prototype tutorials' accretion art, darkened by --page-shade so text and frames stay readable. The page picks its art with art-desert or art-closeup; the art itself, --page-art, is named in the backgrounds package's page-art.css, so a binary without it (apps/talks) gets a plain void instead. */ .page { --page-shade: rgb(var(--ch-void) / 88%); display: flex; flex-direction: column; min-block-size: 100dvh; background-color: var(--color-void); background-image: linear-gradient(var(--page-shade), var(--page-shade)), var(--page-art, none); background-position: center; background-size: cover; background-attachment: fixed; &.art-desert { --page-shade: rgb(var(--ch-void) / 64%); } } .content { display: flex; flex-direction: column; gap: var(--space-7); inline-size: min(100% - 2rem, var(--content-wide)); margin-inline: auto; padding-block: var(--space-7) var(--space-8); } /* The last control of a row, held against its far end: a row reads left to right until this, which belongs to the row but not to the group before it. */ .push-end { margin-inline-start: auto; } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } /* A label and the control it names are one thing. The row they sit in wraps between pairs and never inside one, so a narrow window cannot leave "To" on a line by itself with its toggle on the next. */ .control-pair { flex-wrap: nowrap; } /* The result controls stay together at the end of the row. The output format is last, even when the JSON layout selector appears. */ .control-group { justify-content: flex-end; } /* Keep the selected format or JSON layout visible on narrow screens, where the top bar hides its own toggle labels. */ .dustfmt-page .toggle-label { display: grid; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-5); } .section-title { display: flex; align-items: center; gap: var(--space-3); &::after { flex: 1; border-block-start: 1px solid var(--color-line-low); content: ""; } } /* Top bar */ /* The top bar stays in view; --topbar-height keeps sticky and anchored content below it. */ .topbar { position: sticky; inset-block-start: 0; z-index: 10; /* A narrow bar has two rows: the brand and the tools, then the links across the full width. The four-format bar needs 85rem for one row. */ display: grid; /* The brand takes the width it needs and the tools take the rest. An auto tools column sizes to the row unwrapped, which leaves nothing for the brand and spills the controls over the wordmark instead of wrapping them. */ grid-template-columns: auto minmax(0, 1fr); /* The first row grows past 3.5rem when it holds the format tabs, whose touch targets are taller on a narrow bar; --topbar-height covers both. */ grid-template-rows: minmax(3.5rem, auto) 2.75rem; grid-template-areas: "brand tools" "nav nav"; min-block-size: var(--topbar-height); border-block-end: 1px solid var(--color-line-low); /* Translucent glass: content scrolling under the bar is blurred, not hidden. */ background: linear-gradient(rgb(var(--ch-deep) / 72%), rgb(var(--ch-void) / 58%)); backdrop-filter: blur(8px) saturate(1.2); /* Six language marks and four format controls need 112rem for one row. Between the two it stays a grid, so the toggles keep the brand's row instead of wrapping under the links: a control that moves from below the links to above them as the window narrows is harder to find than one that never moves. */ &.topbar-two-toggles { @media (min-width: 85rem) and (max-width: 111.99rem) { display: grid; } } @media (min-width: 85rem) { display: flex; align-items: stretch; /* The cells do not shrink -- a label that wrapped or a link that scrolled would be worse than a second row -- so a bar that carries every part at once (/theme: four links, a More menu, the format selector, an action and the switch) takes one. Every real page's bar fits on one row and is unchanged. */ flex-wrap: wrap; } } .topbar-brand { grid-area: brand; display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-3); color: var(--color-text-strong); --track: 0.1em; text-decoration: none; @media (min-width: 75rem) { padding-inline: var(--space-5); } } /* On the narrowest screens the brand shows only the logo; the name stays for assistive technology. */ .topbar-name { @media (max-width: 30rem) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* The Stardust logo (assets/stardust-logo.svg, from the prototype tutorials) drawn as a mask in the action gold, before the brand name. */ .topbar-logo { flex: none; inline-size: 1.75rem; block-size: 1.75rem; background-color: var(--color-action); mask: url("/assets/stardust-logo-26d20ffecf9b4974380794fb1bf9ccc63b27030b23d1fd26479991681d5ce89a.svg") center / contain no-repeat; } /* Page-wide controls at the end of the top bar: the theme switch, the format selector, and the page's one action. */ .topbar-tools { grid-area: tools; display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; padding-inline: var(--space-3); /* Both are hosts around a control, so they lay it out in the bar rather than boxing it. */ theme-switch, .topbar-languages, .topbar-formats { display: flex; align-items: center; /* A toggle wraps whole. Squeezed instead, its strip would scroll its own options out of reach. */ flex: none; } /* An empty host has no width: the island renders the button on upgrade, and the bar must not jump when it does. */ theme-switch:not(:has(button)) { inline-size: 2.75rem; } /* A phone's bar holds the brand, the theme, the format selector and the page's action. The theme button is already as small as a touch target goes, so the action gives up its width first and wraps its label; if that is still not enough the tools wrap onto a second line, which the bar's first row (minmax(3.5rem, auto)) grows to hold. */ @media (max-width: 74.99rem) { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-2); /* On the narrowest bar the icon-only toggles, the logo and the theme switch are within a few pixels of one line. The gap closes rather than let them wrap, which would make the bar taller the narrower it gets. */ @media (max-width: 30rem) { column-gap: var(--space-2); padding-inline: var(--space-2); } .button { flex-shrink: 1; } } @media (min-width: 75rem) { padding-inline: var(--space-5); } /* A narrow bar gives the action button only the room its label needs, so the brand and the tools share the row instead of the button filling it. */ .button { min-inline-size: 0; font-size: 0.7rem; @media (min-width: 75rem) { min-inline-size: 9rem; font-size: 0.78rem; } } > .tabs { align-self: center; } } /* The two panes are one grid, not two stacks side by side. dochead | reshead auto doc | res 1fr The headings share the auto row and the bodies share the 1fr row, so the box being typed into and the panel beside it are the same height because they are the same grid row -- not because something under one of them was padded to match. An earlier version reserved a row under each pane for the document's status line, which cost both panes that height on every page view and left a band of nothing along the bottom. The status line lives beside its heading instead, where it costs no height at all and is still next to the thing it describes. One column on a phone, in reading order: heading, document, heading, result. */ .grid.panes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dochead" "doc" "reshead" "res"; gap: var(--space-3) var(--space-5); } .pane-head-document { grid-area: dochead; } .pane-body-document { grid-area: doc; } .pane-head-result { grid-area: reshead; } .pane-body-result { grid-area: res; } .pane-head { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; > .section-title { flex: 1; min-inline-size: 0; } } .pane-status:empty { display: none; } .pane-body { display: flex; flex-direction: column; min-inline-size: 0; } @media (min-width: 48rem) { .grid.panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "dochead reshead" "doc res"; } } /* dustfmt fills the window, and the panes scroll rather than the page. A tool is not an article: the document goes in one pane and comes out of the other, and a reader who scrolls the page to see the result loses sight of what they typed. So the page is exactly the window, the panes take the row that is left, and each scrolls its own content. Only where there is room for it. On a phone the panes are stacked, and a window one screen tall cannot hold a heading, the controls and two useful panes; there the page is an ordinary page and scrolls, which is the right answer on a phone. min-block-size: 0 on every box down the chain, because a flex or grid item will not shrink below its content without it, and one that will not shrink pushes the pane it is in off the bottom of the window. */ @media (min-width: 48rem) and (min-height: 40rem) { .dustfmt-page { block-size: 100dvb; min-block-size: 0; overflow: hidden; } /* The panes take the room that is left, with a hairline of space under them so they do not sit flush against the bottom of the window. It is padding for the eye only: the height it costs comes off the panes, which is why it is the smallest step rather than the page's usual one. */ .dustfmt-page > .content { flex: 1; min-block-size: 0; gap: var(--space-5); padding-block: var(--space-5) var(--space-3); } .dustfmt-page .tool-panes { flex: 1; min-block-size: 0; } /* The heading row takes what it needs; the bodies take the rest. */ .dustfmt-page .grid.panes { flex: 1; min-block-size: 0; grid-template-rows: auto minmax(0, 1fr); } .dustfmt-page .pane-body { min-block-size: 0; } /* The box the document is typed into fills its cell, and offers no drag handle that would fight the layout. */ .dustfmt-page textarea.field { flex: 1; /* The field caps itself at 60dvh, so that a box on an ordinary page cannot run away down the screen. Here the box IS the screen: its cell is the grid row, and the cap stopped it filling that row on any window taller than about 1200px -- 90px short at 1440, and the taller the window the worse, which is why it looked fine until it did not. */ max-block-size: none; min-block-size: 0; resize: none; } /* The result is a figure holding a panel, or an alert; whichever it is fills the cell, and the panel is what scrolls. */ .dustfmt-page .pane-body-result > * { flex: 1; min-block-size: 0; } .dustfmt-page .pane-body-result pre.panel { flex: 1; min-block-size: 0; overflow: auto; } } /* How the home page breaks its lines. Headings, labels and one-line statements balance: they are short, they are read at a glance, and one word alone on the last line of a heading reads as a mistake before it reads as a sentence. Paragraphs do not. Balance was tried on them and it looks wrong -- worst in the team card, where a column of three-line paragraphs each cut to an even width reads as a block of shapes rather than as prose. Evening the lines of running text draws attention to the shape of the paragraph, which is the opposite of what running text is for. So paragraphs get pretty instead, which leaves the ragging alone and only refuses to leave the last line a stub. Nothing here reaches a code panel: text-wrap has no effect where white-space is pre. */ .site-home { :is(h1, h2, h3, h4, figcaption, summary, .kicker, .label, .lede, .section-title, .team-lede) { text-wrap: balance; } p, li, blockquote { text-wrap: pretty; } } /* Moving between pages. Every page here is a document the server renders whole, and the format tabs, the article rail and the pagination are all ordinary links. That is the right model -- it works without JavaScript, every page has its own address, and a format can be sent to someone -- but it means a switch cuts hard from one document to the next. Cross-document view transitions let the browser animate between two ordinary page loads. No script, no single-page app, no second copy of the document in the markup: a browser that does not support it simply cuts, as it did before. What is named here holds still while the rest changes. The bar and the rail are the same object on both sides of a format switch, and cross-fading them against themselves is a flicker for no reason; naming them tells the browser they are the same thing in a new position. The article is deliberately not named, so it is the part that fades. */ @view-transition { navigation: auto; } .topbar { view-transition-name: site-bar; } .article-nav { view-transition-name: article-rail; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; } /* A reader who asked for less motion gets the cut they had before. */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* Text only for assistive technology, such as a role="status" announcement. */ .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* No scroll container here: it would clip the menu panel that drops out of the bar. A narrow bar wraps instead. */ .topbar-nav { grid-area: nav; display: flex; min-inline-size: 0; border-block-start: 1px solid var(--color-line-low); @media (min-width: 75rem) { border-block-start: 0; } a { display: flex; align-items: center; /* Four cells share a phone's bar: a tight gutter keeps every label, and the More caret, inside it. */ padding-inline: var(--space-1); border-inline-start: 1px solid var(--color-line-low); color: var(--color-text); /* No tracking and the smallest label on a phone. The bar carries four cells, and the longest set is the documentation's -- Tutorials, Theory, Reference, More -- which needs about 13px more than a 320px bar has at the sizes the shorter home set fits in. Tracking is the first thing to give up: it costs 0.04em on every character of every label, which is more than the shortfall, and nobody reads a bar label by its tracking. A clipped label is the alternative, and "Referen" is not a word. */ --track: 0; font-size: 0.62rem; text-decoration: none; white-space: nowrap; /* A 320px bar is the narrowest phone still sold, and the documentation's four labels do not fit it even without tracking. */ @media (max-width: 21.99rem) { font-size: 0.56rem; } /* Past the widest failing bar, the label gets its air back. */ @media (min-width: 34rem) { --track: 0.06em; font-size: 0.7rem; } @media (min-width: 75rem) { --track: 0.08em; padding-inline: var(--space-5); font-size: 0.8rem; } &:hover { background: rgb(var(--ch-edge) / 8%); color: var(--color-text-strong); } &[aria-current="page"] { background: linear-gradient(transparent 50%, rgb(var(--ch-edge) / 24%)); box-shadow: inset 0 -2px 0 var(--color-glow); color: var(--color-text-strong); } } /* On a narrow bar the top-level links share the row. */ & > a, & > .menu { flex: 1; min-inline-size: 0; @media (min-width: 75rem) { flex: none; } } & > a { justify-content: center; } & > :first-child, & > .menu:first-child > .menu-summary { border-inline-start: 0; @media (min-width: 75rem) { border-inline-start: 1px solid var(--color-line-low); } } & > .menu > .menu-summary { flex: 1; justify-content: center; gap: var(--space-1); padding-inline: var(--space-1); font-size: 0.66rem; letter-spacing: 0.04em; @media (min-width: 22rem) { font-size: 0.7rem; letter-spacing: 0.06em; } @media (min-width: 75rem) { flex: none; gap: var(--space-2); padding-inline: var(--space-5); font-size: 0.8rem; letter-spacing: 0.08em; } } } /* 9-slice frames */ .modal, .panel, .row, .field, .button { border-style: solid; border-color: transparent; background: none; } .modal { border-width: var(--frame-modal); border-image: var(--frame-src-modal) 24 fill / var(--frame-modal) stretch; padding: var(--space-3) var(--space-4); filter: drop-shadow(0 0 24px rgb(var(--ch-edge) / 22%)); } .panel { border-width: var(--frame-panel); border-image: var(--frame-src-panel) 24 fill / var(--frame-panel) stretch; padding: var(--space-2) var(--space-3); } /* Code panels are HUD targeting brackets over a faint hex grid on a translucent fill, not glass panels. */ /* A panel holding a sentence rather than code. Code earns a sideways scroll: a line of it is one whole thing, and breaking it changes what it says. A sentence earns nothing of the sort, and the result panel's empty state was one line of prose in a pre -- so the page opened with a scrollbar under a message that was itself cut off at the edge. It wraps. */ pre.panel.panel-note { white-space: pre-wrap; } pre.panel { font-variant-ligatures: common-ligatures contextual; overflow-x: auto; border-image: var(--frame-src-code-brackets) 24 / var(--frame-panel) stretch; /* The bracket border already insets the code; keep only a little more. */ padding: var(--space-1) var(--space-2); background: url("/assets/patterns/hex-c2c83d179d58aa11ca11bda559153a3287e40b548ec4d5ad47eba64de9bdb381.svg") 0 0 / 24px auto, rgb(var(--ch-ink) / 82%); color: var(--color-text-strong); font-size: 0.85rem; line-height: 1.6; } .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); border-width: var(--frame-row); border-image: var(--frame-src-row) 24 fill / var(--frame-row) stretch; padding: var(--space-2) var(--space-3); } /* A split is the theme's one two-column layout: something beside a sidecar -- an article beside its rail, an argument beside its diagram, a hero beside its console. It is one column on a narrow screen and two from 60rem. --split-side is the second column's track and --split-main the first's, so a split says what its columns are and nothing about when they appear. A track is either a cap (minmax(0, 28rem)) or a share (minmax(0, 1.3fr)); the first column starts at minmax(0, 1fr), which is what stops a long line of code from making the column, and the page, wider than the viewport. Every split turns at the same width because a media query cannot read a custom property -- there is no @media (min-width: var(--split)) -- so one utility has to pick one value, and it is 60rem. Before this the eight splits turned at 44rem, 60rem and 68rem; they all turn at 60rem now. The gap and the vertical alignment stay with each split, because those are what it looks like, not when it turns. It sits here, after .row, rather than with .stack and .cluster: a price row is both, taking its frame from .row and its columns from .split, and .row is a grid of its own. Neither class outweighs the other, so the later rule wins, and the later rule has to be this one. A component grid added below here and then combined with .split would take the columns back. */ .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); @media (min-width: 60rem) { grid-template-columns: var(--split-main, minmax(0, 1fr)) var(--split-side, minmax(0, 1fr)); } } .field { min-block-size: 2.6rem; border-width: var(--frame-control); border-image: var(--frame-src-field) 24 fill / var(--frame-control) stretch; padding: 0 var(--space-2); color: var(--color-text-strong); font: inherit; &::placeholder { color: var(--color-text-dim); } } /* A document the visitor writes: a field that holds code, so it takes the data font and grows with what is pasted into it, between a few lines and a screenful. */ textarea.field { display: block; inline-size: 100%; min-block-size: 8lh; max-block-size: 60dvh; padding: var(--space-2); font-family: var(--font-data); font-size: 0.9rem; line-height: 1.5; tab-size: 2; resize: vertical; } select.field { appearance: none; padding-inline-end: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--color-glow) 50%), linear-gradient(135deg, var(--color-glow) 50%, transparent 50%); background-position: calc(100% - 0.95rem) 50%, calc(100% - 0.55rem) 50%; background-size: 0.4rem 0.4rem; background-repeat: no-repeat; /* The option list is the browser's own popup: without these it keeps a light background under the field's light text. */ option { background-color: var(--color-deep); color: var(--color-text); } option:checked { background-color: var(--color-line); color: var(--color-text-strong); } } /* Each button type has its own frame, from the prototype tutorials: gold action with notched corner bars, blue default with double chevrons, green success with brackets and a check, red danger with brackets and diamonds. Buttons brighten and glow with CSS filters: more on hover, most while pressed. The action button glows gold, the rest blue. */ .button { --track: 0.08em; /* The glow a point turns on: a variant names its channel, how far the glow reaches and how strong it is, so the drop-shadow itself is written once. A press is the same distance and strength on every variant, so only the channel follows it. */ --button-glow: var(--ch-glow); --button-glow-size: 8px; --button-glow-alpha: 45%; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 2.75rem; /* A long label wraps inside the frame on a phone instead of pushing the button past its column; a button with room to spare is unchanged. */ min-inline-size: min(9rem, 100%); max-inline-size: 100%; border-width: var(--frame-button); border-image: var(--frame-src-button) 24 fill / var(--frame-button) stretch; padding: 0 var(--space-3); color: var(--color-control-text); font-size: 0.78rem; text-align: center; text-decoration: none; text-wrap: balance; /* A label on a control is not text to select, so a drag or a double click presses the button instead of highlighting its word. */ user-select: none; cursor: pointer; transition: filter var(--motion-fast), transform var(--motion-fast); &:hover:not(:disabled) { filter: var(--control-hover) drop-shadow(0 0 var(--button-glow-size) rgb(var(--button-glow) / var(--button-glow-alpha))); } &:active:not(:disabled) { filter: var(--control-press) drop-shadow(0 0 14px rgb(var(--button-glow) / 65%)); transform: translateY(1px); } &:disabled { cursor: not-allowed; filter: grayscale(0.85) brightness(0.65); } /* The theme button carries an icon and no words, so it is square: the frame's chamfers need the same room on both sides. */ &.theme-button { min-inline-size: 2.75rem; padding-inline: 0; .icon { inline-size: 1.35rem; block-size: 1.35rem; } } &.action { --button-glow: var(--ch-action-high); --button-glow-size: 10px; --button-glow-alpha: 50%; border-image-source: var(--frame-src-button-action); color: var(--color-action-label); } &.success { --button-glow: var(--ch-success); --button-glow-size: 10px; --button-glow-alpha: 50%; border-image-source: var(--frame-src-button-success); } &.danger { --button-glow: var(--ch-danger); --button-glow-size: 10px; --button-glow-alpha: 50%; border-image-source: var(--frame-src-button-danger); } /* A button that started a request keeps .loading until the next frame from the server draws the result: a dim label behind a sweeping scan line, and no second press. */ &.loading { position: relative; overflow: hidden; cursor: progress; filter: grayscale(0.4) brightness(0.8); pointer-events: none; &::after { position: absolute; inset-block: 0; inset-inline-start: 0; animation: button-loading 900ms linear infinite; background: linear-gradient(90deg, transparent, var(--color-info), transparent); content: ""; inline-size: 40%; opacity: 0.55; } } } @keyframes button-loading { from { transform: translateX(-100%); } to { transform: translateX(350%); } } /* Tabs are connected: one 9-slice strip (frames/tabs.svg) holds every tab, a slanted divider separates neighbours, and the selected tab lights a slanted segment that the strip clips at its ends. */ .tabs { display: inline-flex; align-self: flex-start; /* The lit segment of a tab is wider than the tab, because a skewed rectangle needs the room. The gap holds that width, so a selected tab stops short of the tab beside it. */ gap: 0.5rem; max-inline-size: 100%; border: var(--frame-control) solid transparent; border-image: var(--frame-src-tabs) 24 fill / var(--frame-control) stretch; /* More tabs than the strip can show scroll inside it: clipped tabs would be unreachable on a phone. The bar has no room for a scrollbar, and the strip still clips the lit segment at its ends. */ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; @media (min-width: 60rem) { overflow: hidden; } } /* A toggle is an icon strip with its label inside the frame, after the options. The options carry no text, so the label is what names the choice: it reads the chosen one rather than the control. */ .toggle { display: inline-flex; align-items: center; > .tabs { align-self: center; margin-block-end: 0; } /* An icon-only tab is square: without a label to set its width, the padding that a labelled tab uses would leave a lopsided box. It holds that one height at every width, unlike a tab in the page, which grows to a touch target below 60rem: this one lives in the bar, where growing as the window crossed that width would change the control's shape under the reader. */ .tab { justify-content: center; min-inline-size: 2.5rem; min-block-size: 2rem; padding-inline: var(--space-2); } } /* The label rides inside the strip's frame, after the last option. It is not a tab, so it takes the strip's padding but none of a tab's segment or divider. */ .toggle-label { --track: 0.12em; display: grid; align-self: center; padding-inline: var(--space-2); font-size: 0.7rem; color: var(--color-text-dim); /* Centred in the width the widest option reserves, so a short name sits under the middle of the label rather than adrift at its start. */ text-align: center; white-space: nowrap; /* The icons stand alone once the labelled toggles stop sharing a line. Two of them and the brand need about 53rem; below that they used to wrap, which doubled the height of the bar's tools and made the bar taller as the window narrowed. Dropping the label keeps them on one line instead, and the role="status" beside the toggle still announces the choice. */ @media (max-width: 52.99rem) { display: none; } /* The value and a hidden copy of the longest option share one cell, so the label is always as wide as the widest choice and switching cannot move the bar. The copy comes from the same registry the options do, so registering a longer language name widens the label with it. */ > * { grid-area: 1 / 1; } > .toggle-sizer { visibility: hidden; } } .tab { position: relative; /* A tab is a