/* Generated by `vgarun valheim cms create stylesheet` — do not change by hand. */ @layer tokens, base, elements, widgets, slices, layouts, templates; /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The token set — measures from the golden ratio, colours in OKLCH. Everything else derives from here. No package sets a number of its own where a token already carries it: a size that stands in only one place is a size that does not move along at the next pass. */ @layer tokens { :root { /* **Dark, and always.** `dark light` meant: the browser may choose by the system setting — and on a light Windows it chose light, whereupon every dark face turned almost white and the text on it unreadable (reported on 3 September 2026). A light theme is thought ahead, not decided: the light values in `light-dark()` stay, so that they can be found some day without searching, but served is the dark version. One word here turns that around ({T0026S12}). */ color-scheme: dark; /* Measure ladder — the step is √φ = 1.272, two steps are φ. Type takes every point, spacing every second. */ /* The base grows with the width: 14 px on the phone, 15 from tablet, 17 from screen. Measured on the running text of the design in all three versions — it scales the type instead of setting it the same everywhere, and without that the page looks a fifth too large on the phone. The ladder itself stays: 17 by √φ is 13.4; times √φ is 21.6; times φ is 27.5 — the design hits 13, 22 and 28. The steps below stand at the breakpoints. */ --scale-base: 0.875rem; /* Two sizes do not follow the ladder and therefore stand per width: The stage — 23, 30, 44 px. It is the game name and should fill the bar, which looks different at 430 px than at 1440. The page heading — 19, 22, 28 px. Its ratio to the base grows with the width (1.36 · 1.47 · 1.65 instead of a constant φ), and that is no carelessness of the design: a heading that carried the same multiple on the phone as on the desk would take half the height of the viewport there. Where there is little room, it moves closer to the text. */ --text-stage: 1.4375rem; --text-head: 1.1875rem; /* Labels in capitals — card titles, metric labels. 10, 11, 12 px: they grow more slowly than the base, because capitals build wider at the same size and would otherwise wrap in a tight card. */ --text-label: 0.625rem; --text-micro: calc(var(--scale-base) / 1.618); /* 10.5 → labels */ --text-small: calc(var(--scale-base) / 1.272); /* 13.4 → tags, card titles */ --text: var(--scale-base); /* 17 → running text */ --text-large: calc(var(--scale-base) * 1.272); /* 21.6 → metrics */ --text-title: calc(var(--scale-base) * 2.058); /* 35 → the stage */ --space-hair: calc(var(--scale-base) * 0.146); --space-tight: calc(var(--scale-base) * 0.236); --space-snug: calc(var(--scale-base) * 0.382); --space-close: calc(var(--scale-base) * 0.618); --space: var(--scale-base); --space-open: calc(var(--scale-base) * 1.618); /* The height of every control — field, button, and whatever comes. It stood in the seed_form widget before, which stretched field and button in one grid row. On extracting into elements it got lost: on the landing page the button stretched over label **and** field, on the item page it shrank to its content. Two pages, two heights, one thing. The landing page is the model, and this number is measured from there: 0.9375rem of padding top and bottom plus 0.8125rem of type. */ --control-height: 2.6875rem; /* The height of the sticky head ({T0097}). Measured on the running page: 68 points — two times 1rem of padding, 30 points of mark, 5 points of progress bar, 1 point of border. It stands here because something floating under the head has to know it and cannot ask: `position: fixed` refers to the window, and CSS cannot write a measured height into a property. **Whoever changes the head changes this number.** That is the price; the alternative would be script that reads a height and writes it back — more mobility for more parts. */ --head-height: 4.25rem; --space-wide: calc(var(--scale-base) * 2.618); /* The sheet — the measures of every popover that opens ({T0084}). They stood in the item_sheet widget, measured by the owner on 1 September 2026. When the map got its own sheet, I copied the same six numbers a second time, and with that there were two truths about one thing: whoever changes the width changes it in one place and sees the next day that the other stayed. Exactly the case {K0054} describes — only that the shell is no markup one could lift into an element, but measure. And measure lives here — like `--control-height` above. Whoever builds a sheet writes these tokens and no numbers. */ --sheet-inline-size: min(400px, calc(100vw - 2rem)); --sheet-max-block-size: min(900px, calc(100vh - 2rem)); /* **The edge of everything that lies on the page** — sheets and bands. The name says »sheet«, because the first one was there; meant is every element that floats above the content and therefore has to set itself off from it ({T0097}). Whoever builds one writes this token and no number. Until 12 September 2026 it did not stand in two places: the map's favourites sheet carried its 3px written out, and the notice band a single one — and a band with a hairline beside a sheet with three points looks like two house orders. */ --sheet-edge: 3px; --sheet-shadow: 0 24px 64px oklch(0% 0 0 / 0.55); --sheet-scrim: oklch(0% 0 0 / 0.6); /* Belt and braces: in the top layer a popover needs no z-index, but on closing it drops out, and then it decides after all (Owner, 1 September 2026). */ --sheet-layer: 9999; /* Output width. A single cap: the slice's track bounds itself by min\(\), hence the width needs no four steps — the gutter grows, not the cap. */ /* The design leaves the content about 40 px of edge at 1440 px, so uses almost the full width. 84rem hits that and at the same time caps what would otherwise run boundless on a very wide screen — the running text stays at 66ch anyway \(see prose\). */ --measure: 90rem; --gutter: 2.5rem; /* Grid of the pixel font. Its glyphs are eight font pixels wide; for an edge to fall on a whole device pixel, size by eight times device resolution must be a whole number — at resolution 1 and 3 a multiple of 8, at 2 one of 4 \({K0044}\). The ladder stays the same; rounding happens at the place of use with round\(\). */ --pixel-grid: 8px; /* Surface and type are two scales, not one. The design sets the surfaces close together — 12 to 21 percent, five steps on nine points — and the type far above. A shared scale would have to serve both and would hit neither. The values for dark are measured from the design, those for light mirrored on them. light-dark() takes the first value in the light scheme. */ --hue-surface: 260; --c-surface: 0.010; --surface-0: light-dark(oklch(99% var(--c-surface) var(--hue-surface)), oklch(12% var(--c-surface) var(--hue-surface))); --surface-1: light-dark(oklch(97% var(--c-surface) var(--hue-surface)), oklch(15% var(--c-surface) var(--hue-surface))); --surface-2: light-dark(oklch(94% var(--c-surface) var(--hue-surface)), oklch(17% var(--c-surface) var(--hue-surface))); --surface-3: light-dark(oklch(91% var(--c-surface) var(--hue-surface)), oklch(18% var(--c-surface) var(--hue-surface))); --surface-4: light-dark(oklch(86% var(--c-surface) var(--hue-surface)), oklch(21% var(--c-surface) var(--hue-surface))); /* Type: three steps, measured from the design. 65 carries the text, 58 the trimmings, 55 the quietest — mirrored in the light scheme. */ /* Three steps, all measured from the export. The lightest carries another hue — 90 instead of 260 —, because a heading on dark ground should look warm and not blue. There were four. The quietest, --ink-faint, lay at 48 percent in dark mode and gave only 3.02 to 1 on --surface-0 — under AA, at all five places where it stood. Measured, 58 percent are needed there, and that is exactly --ink-quiet: below this step there is no text colour on this ground any more that holds the limit. A step that is nowhere usable within the rules is no step. */ --ink-bright: light-dark(oklch(20% 0.005 90), oklch(95% 0.005 90)); --ink: light-dark(oklch(28% 0.008 var(--hue-surface)), oklch(70% 0.008 var(--hue-surface))); /* The quiet step stood at 58 percent and held AA only on --surface-0 — on the raised faces it fell to 4.43 and 4.36, measured at nine places. The ground is lighter there, so the type has to be too. 61 percent carries on all three with reserve; 60 would have sufficed, but at 4.74 would again lie close to the edge. */ --ink-quiet: light-dark(oklch(42% 0.008 var(--hue-surface)), oklch(61% 0.008 var(--hue-surface))); --ground: var(--surface-0); --ground-up: var(--surface-2); /* **Three role colours, and there were always three** (Owner, 12 September 2026: »es gibt folgende Grünwerte und das von Anbeginn … es gab niemals ein weiteres Grün oder ähnliches«). | Primary Green | oklch(76% 0.17 130) | what leads, what triggers | | Secondary Gold | oklch(80% 0.13 85) | what shows more | | Tertiary Orange| oklch(68% 0.18 35) | the mark, sparingly | Until then a fourth token stood here, `--action` with `oklch(72% 0.20 145)`, and beside it an `--on-action` nobody ever used. The sentence that justified both — »Verweis führt weg, Aktion löst aus« — described a division that never existed: the action button carried `--link` all along, and `--action` stood in twenty places almost only in focus rings. Two greens, one pixel apart in meaning and clearly so to the eye ({K0233}, {T0096}). **That holds for the roles of the surface, not for data.** The biome colours of the map and the rank ladder white-green-blue- magenta follow the game and stay where they are. */ --brand: oklch(68% 0.18 35); --link: oklch(76% 0.17 130); /* Golden yellow, the third role beside the two greens: it says neither »leads away« nor »triggers« but »shows more«. The chevron on the map button carries it \(Owner, 1 September 2026\). */ --gold: oklch(80% 0.13 85); /* Red, the fourth role: »takes away«. The button in the target's sheet so leads out of the building plan back to the item page \(Owner, 8 September 2026, {T0073S13}\). Measured on --surface-4 with dark type: 6.1 to 1. */ --danger: oklch(66% 0.19 28); /* The rank ladder of quality: white, green, blue, magenta — the sequence World of Warcraft and Elder Scrolls Online taught every player, chosen by the owner \({T0023S4}, 02-valheim.md\). It says **how good** a piece is; the biome colours say **when** in the game. Two systems, two questions — and hence no biome tone here. Green and magenta are measured from the design: rgb\(0,255,28\) and rgb\(255,0,252\). The design's blue, rgb\(11,97,172\), holds only 2.8 to 1 on surface-4 — under AA even for large type. It therefore stands at 65 percent lightness in the same hue: 5.5 to 1, and still the blue of the ladder. The deviation is measured and named \(AW22\). White is the light ink the name carries anyway. */ --rank-1: var(--ink-bright); --rank-2: oklch(86.7% 0.291 143); --rank-3: oklch(65% 0.14 252); --rank-4: oklch(70% 0.321 329); /* The scanline grid. One dark line in three, at 14 percent — on average 4.7 percent of darkening. **Where a picture gets a raster, it comes from here.** Not copied out, not adjusted by eye: the values are tight, and lying beside them does not look like »somewhat different« but like another effect. The biome bar stood at one line in two at 28 percent — three times as dark, and because line and gap run into each other on a double-resolution screen, nothing of the grid was left to see. Only a dark picture \({K0097}\). `linear-gradient` with `background-size` and not `repeating-linear-gradient`: a tile the browser does not compute itself does not let one drop out every few lines. To be used as a background layer, not as an overlay in a pseudo-element — the layer lies in the same `background` as the picture and cannot deviate from it. */ --interlace: linear-gradient(180deg, oklch(0% 0 0 / 0.14) 0 1px, transparent 1px 3px); --interlace-size: 100% 3px; } /* The ladder has five steps — base · phone 16.25rem · tablet 35rem · screen 60rem · widescreen 78.75rem. The gutter grows at two of them; at the others deliberately nothing stands, because nothing changes there. Only deltas, only min-width. */ /* On the phone the gutter is narrower, otherwise nothing is left of the content. From tablet on it stands at the design's 40 px and grows no further — what room there is beyond, the cap measure takes. Only deltas, only min-width: every step names what changes, and nothing else. */ :root { --gutter: var(--space); } @media (min-width: 35rem) { :root { --gutter: 2.5rem; --scale-base: 0.9375rem; --text-stage: 1.875rem; --text-head: 1.375rem; --text-label: 0.6875rem; } } @media (min-width: 60rem) { :root { --scale-base: 1.0625rem; --text-stage: 2.75rem; --text-head: 1.75rem; --text-label: 0.75rem; } } @media (resolution >= 2x) { :root { --pixel-grid: 4px; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The foundation — box model, base type, and the tracks of every slice. */ @layer base { *, *::before, *::after { box-sizing: border-box; } :where(body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd) { margin: 0; } :where(ul[role="list"], ol[role="list"]) { padding: 0; list-style: none; } html { font-size: 100%; -webkit-text-size-adjust: none; } body { font-family: "Oxanium", "Oxanium Fallback", system-ui, sans-serif; font-size: var(--text); line-height: 1.5; color: var(--ink); background: var(--ground); } :where(img, picture, svg) { display: block; max-inline-size: 100%; } :where(input, button, select, textarea) { font: inherit; color: inherit; } /* A slice is a row across the full width \({K0031}\). The bounding is carried by the named track, not a wrapper: children land in `content`, and what should run edge to edge says `grid-column: full`. Expressly no width statement — the slice is a child of the single-column grid and fills its track. `width: 100vw` would include the scrollbar and give about 15 px of horizontal overflow on the desk, which does not occur on the phone and is therefore noticed late. */ [data-slice] { display: grid; /* The edge is computed and stands ready as a variable. That is the difference that counts: a band that wants to share inside only replaces the content track and inherits the same edge. As minmax\(gutter, 1fr\) the gutter would fight with every inner fr track over the room, and every band would come to another edge — measured 40, 63, 77 and 110 px on four bands of the same page \({K0057}\). */ --edge: max(var(--gutter), (100% - var(--measure)) / 2); grid-template-columns: [full-start] var(--edge) [content-start] minmax(0, 1fr) [content-end] var(--edge) [full-end]; } [data-slice] > * { grid-column: content; } } /* As long as a sheet stands in the top layer, the page beneath does not move. A popover does **not** lock scrolling by itself — unlike a in the modal state. `:has()` does it without script, and the rule holds for every popover, not only for this one \(Owner, 1 September 2026\). `scrollbar-gutter: stable` stands beside it, so that the vanishing of the scrollbar does not let the page jump by its width. */ /* **The scrollbar's room is always reserved, not only once it is gone.** Exactly here `scrollbar-gutter: stable` stood at first — in the rule below, so valid only once the sheet was open. That is too late: the bar vanishes at the same moment the reservation takes hold, and the page jumps by its width. It has to be there beforehand. */ :root { scrollbar-gutter: stable; } /* As long as a sheet stands in the top layer, the page beneath does not move. A popover does **not** lock scrolling by itself — unlike a in the modal state. Both elements, because depending on the browser the one or the other scrolls. */ :root:has([popover]:popover-open), :root:has([popover]:popover-open) body { overflow: hidden; } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The theme for Valheim — the four things that change per game. Structure is general, colours are specific. A second game lays a file beside it and changes nothing else; that is the whole theme capability ({K0029}). What stands here is the palette — icons, map and biome colours come from the game data and not from the stylesheet. */ @layer tokens { [data-theme="valheim"] { /* The stage bar — copper, like the first ore one smelts in the game. Eight bands with hard edges, symmetrical around the middle: measured from the design, not imitated. The hue moves from 38 at the edges to 55 in the middle, which gives the metal its shimmer — a gradient on a single tone would look like a colour area, not like light. */ /* The scanlines lie above the gradient: one pixel of black at 28 percent, two pixels of gap. That is the screen the type means — without them the bar is a colour area with stripes, with them it is a monitor. Measured from the design. As a second background layer instead of an absolutely positioned pseudo-element: saves a node and cannot slip. A plain gradient with a fixed tile size, not repeating: a continuous gradient stretches over the whole area and rounds its periods against the device pixel grid — every few lines one drops out. With `background-size: 100% 3px` the tile is exactly three pixels tall and repeats cleanly. */ --stage-scan: linear-gradient(180deg, oklch(0% 0 0 / 0.28) 0 1px, transparent 1px 3px); /* The peak stood at 74 percent and was the lightest spot of the bar — exactly where the title stands. Measured that gave 2.19 to 1 against the title colour, needed are 3.0 for large type. The row only crossed the limit from 64 percent on; 62 gives reserve, so that a later type size does not tear it again at once. The bar so becomes somewhat richer and less glaring. That is a deviation from the design, it stands here, and it is measured — as AW22 demands. The design meets no AA at this point. */ --stage-bar: linear-gradient(180deg, oklch(30% 0.09 40) 0 14%, oklch(45% 0.14 42) 0 28%, oklch(58% 0.18 45) 0 42%, oklch(62% 0.17 55) 0 50%, oklch(58% 0.18 45) 0 58%, oklch(45% 0.14 42) 0 72%, oklch(28% 0.08 38) 0 86%, oklch(16% 0.05 35) 0 100%); --stage-ink: oklch(97% 0.02 40); /* The ten biomes. The order is that of the game's progress, not of the alphabet — whoever reads them reads the way. */ --biome-meadows: oklch(74% 0.14 130); --biome-forest: oklch(52% 0.10 150); --biome-swamp: oklch(44% 0.07 95); --biome-mountain: oklch(88% 0.03 230); --biome-plains: oklch(80% 0.13 85); --biome-mistlands: oklch(46% 0.05 280); --biome-ashlands: oklch(58% 0.19 35); --biome-deepnorth: oklch(84% 0.05 210); --biome-ocean: oklch(56% 0.10 235); --biome-edge: oklch(38% 0.02 260); } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The beta mark — a Workbench gadget in red. */ @layer elements.beta_badge { @scope ([data-type="beta-badge"]) { /* The three reds stand here and not in tokens.css. The sentence above once read »waechst daraus eine zweite Stelle, wandern sie hoch«, and with the status window \({T0097}\) the second place came — the move into `:root` was wrong all the same. **AW10 and {K0004} forbid derivations in `:root`**: a computed tone stands at every context that sets the base colour, so that it follows when that changes. The status window computes the same line itself. The same calculation in two places is the price, and it is smaller than a value that freezes. Chosen after the Amiga: the face is the palette's red darkened, the light edge lies above it, the shadow edge below. White on the ground measures 6.66 to 1 and so carries even the smallest step. */ :scope { /* **Computed from the palette, not written beside it** ({T0096}, AW10). Three red values of their own stood here, and the sentence above called them »das satte Rot der Palette« — they were not: `--danger` stands at 66 % lightness, here stood 50, and the hue differed by a degree. No design intent, a copying error. The face is darker than `--danger`, and that stays: it carries white type, and for that it needs the distance. The two edges compute symmetrically from it — thirteen points lighter above, thirteen darker below. */ --badge-face: oklch(from var(--danger) 0.50 c h); --badge-light: oklch(from var(--badge-face) calc(l + 0.13) c h); --badge-shadow: oklch(from var(--badge-face) calc(l - 0.13) c h); display: inline-block; padding: 0.375rem 0.5rem 0.3125rem; background: var(--badge-face); color: oklch(100% 0 0); /* The Workbench box: a black line outside, the two edges inside. Both without a radius — there is no rounded corner on a device with 320 by 256 points. */ border: 1px solid oklch(0% 0 0); box-shadow: inset 2px 2px 0 0 var(--badge-light), inset -2px -2px 0 0 var(--badge-shadow); font-family: "Press Start 2P", monospace; font-weight: 400; font-size: 0.5rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; /* The baseline of the pixel font sits low; without the correction the mark hangs under the word mark instead of beside it. */ translate: 0 -0.0625rem; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: A button — the pixel edge from the design. */ @layer elements.button { @scope ([data-type="button"]) { :scope { display: grid; place-items: center; block-size: var(--control-height); padding-inline: 0.625rem; background: var(--link); border: 0; color: oklch(20% 0.05 130); font-family: "Press Start 2P", monospace; font-size: 0.8125rem; line-height: 1; text-transform: uppercase; cursor: pointer; /* The edge is the whole button: two inner shadows, light top left and dark bottom right, two pixels wide. That is the form a button had in a game of that time — no frame, no rounding, no query. Measured from the design, values unchanged. */ box-shadow: inset 2px 2px 0 oklch(88% 0.12 130), inset -2px -2px 0 oklch(52% 0.14 130); } /* **Locked: the same form, only without colour and without edge.** A button that cannot act yet does not vanish and does not move — it stands where it will stand, and only says that it is not ready yet. Otherwise the line below jumps at the moment one looks. The pixel edge drops, because it says »press me«; the face becomes the sheet's, the type loses its contrast. `cursor` does not stay on `pointer`, because nothing happens (Owner, 11 September 2026: the button only turns green once the picture is done). */ :scope:disabled { background: var(--surface-1, oklch(32% 0.01 260)); color: var(--ink-muted, oklch(62% 0.01 260)); box-shadow: none; cursor: default; } /* Gold instead of green: the same shape, another role. The edges follow the tone, otherwise a green setting would sit around a golden face. */ :scope[data-tone="gold"] { background: var(--gold); color: oklch(24% 0.06 85); box-shadow: inset 2px 2px 0 oklch(90% 0.09 85), inset -2px -2px 0 oklch(58% 0.11 85); } :scope[data-tone="gold"]:where(:hover, :focus-visible) { background: oklch(from var(--gold) calc(l + 0.05) c h); } /* Red: the button takes something away ({T0073S13}) - in the target's sheet the way out of the building plan back to the item page. The same shape, the edges follow the tone. */ :scope[data-tone="red"] { background: var(--danger); color: oklch(18% 0.05 28); box-shadow: inset 2px 2px 0 oklch(82% 0.14 28), inset -2px -2px 0 oklch(46% 0.17 28); } :scope[data-tone="red"]:where(:hover, :focus-visible) { background: oklch(from var(--danger) calc(l + 0.05) c h); } /* As a link: the browser's text decoration off, the button's shape stays. */ a:scope { text-decoration: none; } /* The button carries the action colour, the link the link colour — the two greens and their roles stand in {K0032}. */ :scope:where(:hover, :focus-visible) { background: oklch(from var(--link) calc(l + 0.05) c h); } /* **The sign** ({T2001S6}, the seed form in the map options drawer after the design of 28 September 2026): the same button, square - as wide as every control is tall - with one symbol on the face instead of a word. Face, pixel edge, tone and the answer on pointing are the word form's and stand above; a first cut framed the symbol in the tone's colour on dark ground, and the owner sent it back the same day: »wie auch vorher zu vollfarbigen Buttons mit schwarzem Symbol«. The symbol stands in the page's type and not in the pixel face, which has no ✓ and no ↻ and would fall back glyph by glyph. */ :scope[data-shape="sign"] { inline-size: var(--control-height); padding-inline: 0; font-family: inherit; font-size: var(--text-large); text-transform: none; /* Twice the stroke ({T2011S2}, the owner on 1 October 2026: »wir haben eine seite in pixelart und diese elemente wirken hauchdünn«). Oxanium carries neither ✓ nor ↻, so they come from the system's face, whose weight a font-weight does not reach. A contour in the symbol's own colour does: it lies on the outline, half outside and half in, so a contour as wide as the stroke doubles it. Measured: the ring of the ↻ is 1.63 points at 21.6, 0.075 em - and in em it grows with the size at every width. */ -webkit-text-stroke: 0.075em currentColor; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: A switch in mixing-desk form — slider in the track, knob on it. */ @layer elements.checkbox { @scope ([data-type="checkbox"]) { :scope { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); cursor: pointer; user-select: none; } /* Drawn ourselves and not `accent-color`. Before, the opposite stood here, with good reason: the browser draws a box in its own form and knows every state. But this form does not exist as a box — a slider whose knob protrudes over the track, as on a mixing desk. Whoever wants a shape that does not exist has to draw it. What is kept: it is still an ``. Keyboard, screen reader and form submission notice nothing of it looking different. */ input { appearance: none; margin: 0; position: relative; inline-size: 2.25rem; /* The track is narrow — the knob above it is the thing. */ block-size: 0.5rem; background: oklch(18% 0.008 260); cursor: pointer; /* The track lies recessed: dark top left, light bottom right. The same direction as with the input field, and for the same reason — the light falls from the same corner for everything. */ box-shadow: inset 1.5px 1.5px 0 oklch(9% 0.008 260), inset -1.5px -1.5px 0 oklch(30% 0.010 260); } /* The knob: taller than the track, so that it sits on it instead of in it. Off it stands on the left and is dark metal, on it stands on the right and carries the action colour — the same as the search button, because both say the same: here something is live. */ input::before { content: ""; position: absolute; inset-block: -0.3125rem; inset-inline-start: 0; inline-size: 1.125rem; background: oklch(32% 0.010 260); box-shadow: inset 2px 2px 0 oklch(46% 0.012 260), inset -2px -2px 0 oklch(16% 0.008 260); transition: inset-inline-start 90ms steps(3), background 90ms; } input:checked::before { inset-inline-start: calc(100% - 1.125rem); background: var(--link); box-shadow: inset 2px 2px 0 oklch(88% 0.12 130), inset -2px -2px 0 oklch(52% 0.14 130); } /* No soft gliding: `steps(3)` snaps in three steps, like a slider running over detents. Whoever reports reduced motion gets none at all. */ @media (prefers-reduced-motion: reduce) { input::before { transition: none; } } input:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: 4px; } /* Gold instead of green where two rows side by side switch different things ({T0093}): on the map the layers in green, the biomes in gold. Only the knob changes colour — form, way and snapping stay, because it is the same control form and not a second one. The highlights are computed from the base colour and not written beside it ({K0004}), with the same distances as with the green: twelve points lighter top left, twenty-four darker bottom right. A tone that stands there twice differs the third time. */ :scope[data-tone="gold"] input:checked::before { background: var(--gold); box-shadow: inset 2px 2px 0 oklch(from var(--gold) calc(l + 0.12) c h), inset -2px -2px 0 oklch(from var(--gold) calc(l - 0.24) c h); } /* The switched-on state colours the label too: whoever looks across the row sees without comparing what is on. */ input:checked ~ span { color: var(--ink-bright); } /* A switch that has no effect accepts no pointer either. What it looks like then is decided by the page that disables it — here stands only that it rests. The screen reader says so anyway. */ :scope:has(input:disabled) { cursor: default; } input:disabled { cursor: default; } /* Two more forms of the same switch ({T2001S5}): the owner drew the map options' marks as pictures, cut from the design round by `render marks` without a change of pixel. A form is a drawing - the input, the label and the keyboard are the mixing desk's. **`mark`**: the black box with the grey rim, the green tick when on. The box is 27 by 27 on the picture; here it stands at `--mark`, a step of the scale, and the picture scales with it. */ :scope[data-shape="mark"] input { inline-size: var(--mark, 0.875rem); block-size: var(--mark, 0.875rem); background: url("/icons/switch-off.webp") center / contain no-repeat; box-shadow: none; /* The mark keeps its size whatever the name beside it does: a flex item gives way by default, and a long name that wrapped squeezed the box to a sliver (owner, 28 September 2026: »die Checkboxen dürfen sich nicht kleiner skalieren, weil sie gedrängt werden«). */ flex: none; } :scope[data-shape="mark"] input::before { content: none; } :scope[data-shape="mark"] input:checked { background-image: url("/icons/switch-on.webp"); } /* **`knob`**: the square knob on its short track - left and grey when none of the group is on, right with a green rim when some, right and filled when all. Three pictures of one frame, 46 by 32, so the knob never moves on screen: the picture changes. Which one stands is the group's to say - it sets `--knob-picture` by :has() over its switches - and the knob does not know its group; without a container it shows none. The width is `--knob`, the height follows from the frame. */ :scope[data-shape="knob"] input { inline-size: var(--knob, 1.375rem); block-size: calc(var(--knob, 1.375rem) * 32 / 46); background: var(--knob-picture, url("/icons/group-none.webp")) center / contain no-repeat; box-shadow: none; } :scope[data-shape="knob"] input::before { content: none; } :scope[data-shape="knob"] input:checked ~ span, :scope[data-shape="mark"] input:checked ~ span { color: var(--ink-bright); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Short labels — without a frame, the colour carries the statement. */ @layer elements.chip { @scope ([data-type="chip"]) { :scope { font-family: ui-monospace, monospace; font-size: var(--text-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--link); /* No frame and no face. A label that already stands out of the text through type, colour and capitals needs no second carrier — the frame costs room and carries nothing. */ } /* Gold instead of green, as on the button and the switch ({K0032}, {T0093}). On the map it separates the switch group that asks for the place from the one that asks for the kind: the label carries the same tone as the switches below. Only the colour changes — type, tracking and capitals stay, because it is the same label. */ :scope[data-tone="gold"] { color: var(--gold); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: A button in the corner of a card — flat, thin grey frame. */ @layer elements.corner_button { @scope ([data-type="corner-button"]) { /* As large as the symbol of the mark in the head line: 1.875 rem. The owner named that as the measure so that the symbols stay recognisable — below it a chevron becomes a stroke. */ :scope { display: grid; place-items: center; inline-size: 1.875rem; aspect-ratio: 1; padding: 0; background: none; /* Flat, with a thin grey frame. No face and no colour on the button itself: two coloured tiles side by side in the corner of a card that already carries a biome colour would be one colour too many. The frame says »here is something to press«, the symbol says what. */ border: 1px solid oklch(from var(--ink-quiet) l c h / 0.45); color: var(--ink-quiet); font-size: 1.0625rem; line-height: 1; cursor: pointer; } /* The colour is carried by the symbol, not the button. */ :scope[data-tone="action"] { color: var(--link); } :scope[data-tone="gold"] { color: var(--gold); } /* On pointing the frame approaches the colour of the symbol — the only movement that is none: nothing jumps, nothing grows. */ :scope:where(:hover, :focus-visible) { border-color: currentColor; background: oklch(from currentColor l c h / 0.12); } :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; } /* The chevron points right as long as it is closed, and turns down on opening — the usual unfold pointer. The rotation sits on the symbol and not on the button, so that the frame stays put. */ :scope[data-part="toggle"] span { display: block; transition: rotate 120ms ease; } @media (prefers-reduced-motion: reduce) { :scope[data-part="toggle"] span { transition: none; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The donate button — white, rounded, the cup in front. */ @layer elements.donate_button { @scope ([data-type="donate-button"]) { :scope { /* The measure comes from the context, the form the button computes from it: rounding, padding and cup grow with the height. Without a value it is as tall as every control; the map's footer strip gives it a lower one. */ --height: var(--donate-height, var(--control-height)); /* Symbol beside text: the one row for which flex is allowed. */ display: inline-flex; align-items: center; gap: calc(var(--height) * 0.22); block-size: var(--height); padding-inline: calc(var(--height) * 0.3) calc(var(--height) * 0.42); /* White and Ko-fi's dark, 32 32 32 in RGB — measured 16 to 1. */ background: oklch(100% 0 0); color: oklch(24.4% 0 0); border-radius: calc(var(--height) * 0.3); font-size: var(--donate-font, var(--text-small)); font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; } img { block-size: calc(var(--height) * 0.52); inline-size: auto; } /* On pointing the face steps back a touch and the cup wobbles, as on Ko-fi itself. The face jumps, the cup moves only through transform ({K0036}). */ :scope:where(:hover, :focus-visible) { background: oklch(93% 0 0); } :scope:where(:hover, :focus-visible) img { animation: cup-wobble 600ms ease-in-out; } /* The focus ring reads the one green like every other ({K0234}). */ :scope:focus-visible { outline: 2px solid var(--link); outline-offset: var(--space-tight); } @media (prefers-reduced-motion: reduce) { :scope:where(:hover, :focus-visible) img { animation: none; } } } /* `@keyframes` knows no scope and therefore stands beside it, with a name that says whom it belongs to. */ @keyframes cup-wobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The handle bar at the lower edge of a card. */ @layer elements.drawer_handle { @scope ([data-type="drawer-handle"]) { /* The handle bar at the lower edge — sixteen pixels, darkened, and it lies deeper than the card. »Deeper« is no colour here but an edge: the shadow sits at the top and inside, as with everything recessed in this design. The light falls from the same corner for field, track and bar, and whoever swaps the direction turns the recess into a rise. Across the whole width and not as a button in the corner: a strip is a larger target, and its position says where the card opens to. */ :scope { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; place-items: center; /* The height comes from what carries the handle — the card reckons with it when it centres its content. The fallback stands beside it so that the element stands alone too: a component that collapses without its caller is none. */ block-size: var(--handle, 16px); padding: 0; border: 0; background: oklch(0% 0 0 / 0.30); box-shadow: inset 0 2px 0 oklch(0% 0 0 / 0.38), inset 0 -1px 0 oklch(100% 0 0 / 0.05); cursor: pointer; } /* The chevron drawn, not set: an angle of two edges on a rotated square. A glyph would work too, but »stretched wide« would then mean distorting a glyph — and a distorted glyph looks like an error, while a drawn line is simply wide. `transform` and not the single properties `rotate`/`scale`: there the order is fixed, and `scale` would come after the rotation, so stretch the diagonal instead of the width. Here `scaleX` stands first and so acts from outside. */ :scope::before { content: ""; inline-size: 5px; block-size: 5px; /* Light green, not grey (Owner, 1 September 2026). On the darkened bar it is the only coloured thing, and so the eye finds the handle without it needing a face. The primary colour — there is only one ({T0096}). */ border-inline-end: 2px solid var(--link); border-block-end: 2px solid var(--link); transform: translateY(-2px) scaleX(2.4) rotate(45deg); } /* On pointing it gets lighter rather than different: a second colour would mean the handle did something else. */ :scope:where(:hover, :focus-visible)::before { border-color: oklch(from var(--link) calc(l + 0.08) c h); } :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: -2px; } @media (prefers-reduced-motion: no-preference) { :scope::before { transition: transform 140ms ease; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: An input field — recessed, with its label above. */ @layer elements.field { @scope ([data-type="field"]) { :scope { display: grid; gap: 0.4375rem; min-inline-size: 0; } /* The chip otherwise carries the link colour — here it is a field label and no statement, so muted and 10 px. Measured from the design. */ [data-type="chip"] { font-size: 0.625rem; letter-spacing: 0.12em; color: var(--ink); } input { min-inline-size: 0; /* The height comes from the token and not from the padding: so it is the same as the button's, even if a typeface falls differently. The padding only aligns horizontally now. */ block-size: var(--control-height); padding: 0 0.75rem; background: var(--surface-0); border: 0; color: oklch(90% 0.005 90); font-family: ui-monospace, monospace; font-size: 0.8125rem; letter-spacing: 0.04em; /* The edge lies the other way round from the button: dark top left, light bottom right. That is no ornament but the statement — a button stands out, a field is recessed, and the light falls from the same direction for both. Whoever swaps the order turns the field into a button nobody can press. Measured from the design. */ box-shadow: inset 1.5px 1.5px 0 oklch(9% 0.008 var(--hue-surface)), inset -1.5px -1.5px 0 oklch(32% 0.014 var(--hue-surface)); } /* min-inline-size: 0 on the field is no ornament: an input field brings a preset minimum width that overrides a 1fr track and pushes the line out of the grid on the phone. */ input::placeholder { color: var(--ink-quiet); } /* The focus ring lies inside, so that it does not cover the edge: the field keeps its recess and gets a setting. In the colour of the button beside it, not in the action colour: field and button are a pair, and a field that carries another green in focus than the button that submits it looks like two components (Owner, 2 September 2026). The same token as `button`, so that it is and stays exactly the same green. */ input:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: -2px; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Item icons from the game. */ @layer elements.game_icon { @scope ([data-type="game-icon"]) { :scope { inline-size: var(--space-wide); block-size: auto; /* The sources are pixel graphics. Without this line the browser interpolates when scaling up and turns hard edges into mush — the same problem as with the pixel font, only without rounding as a way out \({K0044}\). */ image-rendering: pixelated; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The fonts — served ourselves, with a metric fallback. No element in the document head is rendered, hence no scope stands here: what this package contributes in CSS is the font declarations themselves. */ @layer tokens { @font-face { font-family: "Oxanium"; src: url("/fonts/oxanium.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Press Start 2P"; src: url("/fonts/press-start-2p.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* The metric fallback: it takes the jump out of the font swap without hiding the text ({K0039}). The values are measured on Oxanium — ascent 790, descent 210, line gap 250 of 1000 units. */ @font-face { font-family: "Oxanium Fallback"; src: local("Helvetica Neue"), local("Arial"); ascent-override: 79%; descent-override: 21%; line-gap-override: 25%; size-adjust: 99%; } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Headings — pixel font, rounded onto its grid. */ @layer elements.heading { @scope ([data-type="heading"]) { :scope { font-family: "Press Start 2P", monospace; font-weight: 400; color: var(--ink-bright); text-wrap: pretty; /* The pixel font has no descender in the metric sense, hence the line height always stands written out here \({K0044}\). 1.4 leaves exactly half a glyph height between two lines. */ line-height: 1.55; } /* NO rounding onto the pixel grid. It was intended here and is wrong here: the design sets 28, 22 and 13 px, and round\(\) shifts each of these values to the next multiple — 27.5 would become 24, 13 would become 16. Where the design sets a size, it holds; the rounding stays reserved for what we choose ourselves ({K0059}). The ladder hits the values almost exactly anyway: 27.5 against 28, 21.6 against 22, 13.4 against 13. */ :scope:is(h1) { font-size: var(--text-head); } :scope:is(h2) { font-size: var(--text-head); } :scope:is(h3) { font-size: var(--text-large); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: A button that carries only a symbol. */ @layer elements.icon_button { @scope ([data-type="icon-button"]) { :scope { display: grid; place-items: center; inline-size: var(--space-open); aspect-ratio: 1; background: none; border: 0; color: var(--ink-quiet); font-size: var(--text-large); line-height: 1; cursor: pointer; } /* No face, no frame: the colour is the whole feedback. A button without a face that got one on pointing would jump — and the action colour says the same without touching the layout. */ :scope:where(:hover, :focus-visible) { color: var(--link); } /* **The × in the head of a sheet** ({T0084}, Owner on 11 September 2026: »der schliessen button im popover für download und für share entspricht nicht dem was im item popover zu sehen ist«). It is twice as large as an ordinary symbol, because it stands as the only control in a head line that otherwise carries only text — and because a sheet must let itself be closed before one looks for where. Golden on pointing and not green: green is the action colour, and closing is no action but its end. The colour of the sheet frame says »this sheet« instead. The measures stood in the item sheet and nowhere else, which is why the map sheets carried a smaller ×. Here they stand once, and every sheet gets the same; **where** it sits, the sheet still decides. */ :scope[data-role="close"] { inline-size: calc(var(--space-open) * 2); font-size: calc(var(--text-large) * 2); } :scope[data-role="close"]:where(:hover, :focus-visible) { color: var(--gold); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Links — one place where colour, focus and state are fixed. */ @layer elements.link { @scope ([data-type="link"]) { :scope { color: var(--link); text-decoration: none; } /* The focus ring stands here and only here. That is the real gain of the element: one place instead of four, and no chance that one of them is forgotten. :focus-visible instead of :focus, so that it does not appear with the mouse — whoever clicks sees where they clicked. */ :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: var(--space-tight); } :scope:where(:hover) { text-decoration: underline; text-underline-offset: var(--space-tight); } /* The current page is read from the state, not from a class: aria-current tells the screen reader anyway, and a second carrier of the same statement could differ from it \({K0005}\). */ :scope[aria-current] { text-decoration: underline; text-underline-offset: var(--space-tight); } /* The chevron moves on hovering, not the whole link: a movement through transform that does not touch the layout \({K0036}\). */ > span { display: inline-block; margin-inline-start: 0.35em; transition: transform 120ms ease-out; } :scope:where(:hover, :focus-visible) > span { transform: translateX(0.15em); } @media (prefers-reduced-motion: reduce) { > span { transition: none; } :scope:where(:hover, :focus-visible) > span { transform: none; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The symbol of the mark — face plus mask, both colours from the theme. */ @layer elements.logo_picture { @scope ([data-type="logo-picture"]) { :scope { display: grid; place-items: center; inline-size: 1.875rem; aspect-ratio: 1; background: var(--brand); /* The same edge as the start button, only narrower: one and a half pixels. It turns the field into an object instead of a colour area. Measured from the design. */ box-shadow: inset 1.5px 1.5px 0 oklch(from var(--brand) calc(l + 0.14) c h), inset -1.5px -1.5px 0 oklch(from var(--brand) calc(l - 0.16) c h); } /* The signet as a mask on a face in the base colour. No extra node, and a theme change alters two variables. */ /* 62 percent. The value was never the problem — the symbol's viewBox was: it lay on the advance instead of on the ink, and the last 125 units of that are the distance to the next letter. The symbol so sat on the left in the field, and enlarging covered the error instead of fixing it. Since the viewBox lies on the ink, it sits centred, and 62 percent give it air again. */ :scope::before { content: ""; inline-size: 62%; aspect-ratio: 1; background: var(--ground); mask-image: url("/brand/signet.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The word mark. */ @layer elements.logo_text { @scope ([data-type="logo-text"]) { :scope { font-family: "Press Start 2P", monospace; font-weight: 400; font-size: 0.875rem; line-height: 1; letter-spacing: 0.04em; color: var(--ink); } /* b and i carry no emphasis here but markup without a voice — exactly what the two elements are meant for since HTML5. The italic is taken back, because the pixel font has none and the browser would otherwise slant it. */ > i { font-style: normal; color: var(--brand); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Metric above label. */ @layer elements.metric { @scope ([data-type="metric"]) { :scope { display: grid; gap: var(--space-tight); } /* The value stands in the markup before the label, because it is the statement — the label explains it. In the grid they stand in the same order; there is no reason to swap them visually. */ > dd { margin: 0; font-family: ui-monospace, monospace; font-size: var(--text-large); color: var(--link); } > dt { font-family: ui-monospace, monospace; /* 12 px lies between two steps of the ladder — 10.5 and 13.4. The design sets it so, and AW22 agrees: a label under a number needs weight without competing with it. */ font-size: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-quiet); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The picture follows its track and keeps its aspect ratio. */ @layer elements.picture { @scope ([data-type="picture"]) { :scope { display: block; max-inline-size: 100%; block-size: auto; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: A pill — radio button with rank colour, the golden triangle above the chosen one. */ @layer elements.pill { @scope ([data-type="pill"]) { :scope { /* The rank as colour. White is the resting value and at the same time the first rank — hence the colour cannot also say active against inactive: it would do so twice. Active is said by the form. */ --pill: var(--rank-1); position: relative; display: inline-grid; /* Room for the triangle above the pill, in its own box and not as a negative offset (AW5). */ padding-block-start: var(--space-snug); cursor: pointer; } :scope[data-rank="2"] { --pill: var(--rank-2); } :scope[data-rank="3"] { --pill: var(--rank-3); } :scope[data-rank="4"] { --pill: var(--rank-4); } /* The radio button stays a radio button — keyboard, screen reader and group notice nothing —, but lies invisibly over the whole pill, so that every hit counts. */ input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } /* The pill itself: an outline in the rank colour, the digit in it. Measured from the design — outlined, not filled, with a slightly broken corner; the one and a half pixels are the edge of mark and field ({K0062}). */ span { display: grid; place-items: center; min-inline-size: 2.4em; block-size: 1.6em; padding-inline: 0.4em; border: 1.5px solid var(--pill); border-radius: 0.2em; color: var(--pill); font-family: ui-monospace, monospace; font-size: var(--text-micro); line-height: 1; font-variant-numeric: tabular-nums; } /* The golden triangle above the chosen pill, centred, with the point downwards (Owner, 2 September 2026). Gold in the sheet means »belongs here« — corner, frame, places —, and the chosen level belongs to it. Two edges without a face give the form; an SVG would be a file for three strokes. */ :scope::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; margin-inline: auto; inline-size: 0; block-size: 0; border-inline: 0.3em solid transparent; border-block-start: 0.35em solid var(--gold); opacity: 0; } :scope:has(:checked)::before { opacity: 1; } /* The focus ring in the action colour, outside around the pill — distinguished from the triangle above by form, place and colour. */ input:where(:focus-visible) ~ span { outline: 2px solid var(--link); outline-offset: 2px; } /* On pointing a touch of its own colour on the face: says »this one is meant« without changing the rank. */ :scope:hover span { background: color-mix(in oklab, var(--pill) 12%, transparent); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The progress bar — frame, fill, size. */ @layer elements.progress { @scope ([data-type="progress"]) { /* A hundred by fifteen pixels: one percent per pixel, as the owner fixed it. That is the one place where a pixel number is right — it is the statement, not the measure. */ :scope { inline-size: 100px; block-size: 15px; appearance: none; border: 1px solid oklch(72% 0.13 85); background: oklch(20% 0.02 260 / 0.8); } /* Two spellings for the same thing: WebKit and Firefox name the fill differently, and a selector a browser does not know throws the whole rule away in some versions. */ :scope::-webkit-progress-bar { background: oklch(20% 0.02 260 / 0.8); } :scope::-webkit-progress-value { background: var(--gold, oklch(80% 0.15 85)); transition: inline-size 0.2s linear; } :scope::-moz-progress-bar { background: var(--gold, oklch(80% 0.15 85)); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Running text. */ @layer elements.prose { @scope ([data-type="prose"]) { :scope { font-size: var(--text); line-height: 1.6; color: var(--ink); /* In ch, not in rem: the line length is a question of characters per line and not of width in pixels. 66 is the upper edge of what still reads comfortably. */ max-inline-size: 58ch; text-wrap: pretty; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: A square button with a face for a picture or a symbol ({T0106}). */ @layer elements.quick_button { @scope ([data-type="quick-button"]) { /* **It looks like `button`, only square and without a word** (Owner, 14 September 2026: »der goldene button sieht exakt genauso aus wie der zufall-button im geoeffneten, nur eben mit dem wuerfel darauf«). So the same pixel edge: two inner shadows, light top left and dark bottom right, two pixels wide, the values from button.css unchanged. The size is said by the caller through `--quick-size`; the resting value is the height of a button, so that it could stand beside one. In the panel's strip it is as wide as the strip minus the edge. */ :scope { display: grid; place-items: center; inline-size: var(--quick-size, var(--control-height)); /* Square as long as the caller gives no height; in the panel's strip two buttons share the height (Owner, 14 September 2026: »vertikal im grid mit gap, aber beide den platz nutzend«), there the caller sets --quick-block. */ block-size: var(--quick-block, var(--quick-size, var(--control-height))); padding: 0; border: 0; text-decoration: none; line-height: 1; cursor: pointer; /* The quiet tone: dark grey on which the edge stays visible (Owner: »mit einem dunklen grau, das die erhabenheit gut sichtbar macht«). The edges follow the tone as with every button: light out of the face, dark into it. */ background: oklch(34% 0.012 260); color: var(--gold); box-shadow: inset 2px 2px 0 oklch(52% 0.012 260), inset -2px -2px 0 oklch(20% 0.012 260); } :scope:where(:hover, :focus-visible) { background: oklch(39% 0.012 260); } /* Gold: face, type and edges as on the random button (button.css, tone gold) - values unchanged, so that both carry the same setting. */ :scope[data-tone="gold"] { background: var(--gold); color: oklch(24% 0.06 85); box-shadow: inset 2px 2px 0 oklch(90% 0.09 85), inset -2px -2px 0 oklch(58% 0.11 85); } :scope[data-tone="gold"]:where(:hover, :focus-visible) { background: oklch(from var(--gold) calc(l + 0.05) c h); } :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; } /* The picture leaves face all around, otherwise the button looks like a picture with a border. Seven tenths are measured from the owner's design: about 56 on 80. */ :scope > [data-type="picture"] { inline-size: 70%; block-size: 70%; object-fit: contain; } /* The golden star of the favourites button: empty as long as nothing is remembered, filled afterwards - the same state as on the star of the title row, set by the script through data-remembered. The size follows the button, not the type of the page. */ :scope > span { font-size: calc(var(--quick-size, var(--control-height)) * 0.55); } /* The dice arrow is black on gold (Owner: »einen schwarzen reroll pfeil«) - the same dark type as the word ZUFALL. */ :scope[data-tone="gold"] > span { color: oklch(24% 0.06 85); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: A picture strip as the background of a bar. */ @layer elements.strip { @scope ([data-type="strip"]) { :scope { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; /* Muted, because text stands above it: the picture is mood and not content. */ opacity: 0.55; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: A golden category of the map options — caption, rule, chevron, the grid of its groups ({T2001S5}). */ @layer widgets.category_accordion { @scope ([data-type="category-accordion"]) { :scope { /* A container, so the groups answer to the category's width and not to the window's: on the phone the drawer sets `--columns` to one and the groups stand in one column ({T2001S5}). */ container-type: inline-size; container-name: category; } /* The caption line: the chip on the left, the chevron on the right, the golden rule beneath - drawn, not a glyph. The marker of the browser is put away; the chevron says what it said. */ > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; padding-block: var(--space-snug) var(--space-tight); border-block-end: 2px solid var(--gold); cursor: pointer; list-style: none; user-select: none; } > summary::-webkit-details-marker { display: none; } /* The note under the caption ({T2004}), in the drawer's quiet micro type, as the line above the categories. */ > [data-part="note"] { margin: var(--space-tight) 0 0; font-size: var(--text-micro); color: var(--ink-quiet); } > summary::after { content: ""; inline-size: 0.5rem; block-size: 0.5rem; margin-inline-end: var(--space-tight); border-inline-end: 2px solid var(--gold); border-block-end: 2px solid var(--gold); /* Points down while folded, up while open: the chevron of the picture, turned by the state and by nothing else. */ transform: translateY(-25%) rotate(45deg); transition: transform 90ms steps(3); } :scope[open] > summary::after { transform: translateY(25%) rotate(225deg); } @media (prefers-reduced-motion: reduce) { > summary::after { transition: none; } } > summary:where(:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; } /* Two stacks side by side, each stacking its groups on its own. A grid put the groups in rows and left a hole under every short group; text columns filled the holes but moved a group from left to right the moment another one opened - nothing may jump for room (owner, 28 September 2026). Which group stands in which stack is the caller's, as the picture has it. Two stacks by default; `--columns` is the container's to set - the drawer sets 1 at every width since the owner saw the two stacks and chose one column - and below 18 rem of the category's own width the stacks stand one under the other whatever it says. */ > [data-part="groups"] { display: grid; grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr)); column-gap: var(--space-snug); row-gap: var(--space-tight); padding-block: var(--space-snug); } > [data-part="groups"] > [data-part="stack"] { display: grid; align-content: start; row-gap: var(--space-tight); } @container category (inline-size < 18rem) { > [data-part="groups"] { grid-template-columns: minmax(0, 1fr); } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The control strip — arrangement, face and the type on it. */ @layer widgets.control_bar { @scope ([data-type="control-bar"]) { /* `flex-wrap` instead of a breakpoint — when it gets tight, the switches slip under the search. The row gap is larger than the column gap, so that the two then stay readable as two things instead of one crowded one. The same construction as a grid with `auto-fill`: no media query guessing a width that flex knows anyway. `space-between` and no `margin-inline-start: auto` on the switches. Both push them to the right as long as the line is shared — but after the wrap they stand alone, and then `auto` sets them at the right edge, where there is nothing left to be flush with. */ :scope { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 2rem; padding: 1rem 1.25rem; /* The strip is a container: the switches answer to its width, not to the window (how-we-build.md). */ container-type: inline-size; /* Ten percent opacity: the strip sets itself off without becoming a face of its own. It stays a lightened cut of the page ground, and the page keeps its dark. Symmetrical in both modes — in the light the same ten percent in black. The statement is »somewhat closer to the viewer«, and that holds in both directions. */ background: light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.1)); /* The pixel edge of a raised face: light top left, dark bottom right, like region block and card. */ box-shadow: inset 2px 2px 0 oklch(33% 0.014 var(--hue-surface)), inset -2px -2px 0 oklch(12% 0.010 var(--hue-surface)); /* The three ink steps one step stronger, in both directions. The strip lies at about 26 percent lightness in dark mode and so above --surface-4; the ladder in tokens.css is checked up to --surface-2. --ink-quiet would stand at 3.5 to 1 there and fail. On a lightened face the type has to be lightened too. Set on the container and not overridden in the elements: field, button and checkbox keep reading the same tokens they always read — they say something else here. An element added tomorrow is right without doing anything. The reasoning stands in manual/web/03-tokens.md. */ --ink: light-dark(oklch(24% 0.008 var(--hue-surface)), oklch(82% 0.008 var(--hue-surface))); --ink-quiet: light-dark(oklch(36% 0.008 var(--hue-surface)), oklch(72% 0.008 var(--hue-surface))); --ink-bright: light-dark(oklch(16% 0.005 90), oklch(95% 0.005 90)); } /* The search does not grow into the free space: a field of nine hundred pixels beside six switches does not look like two controls but like a botched one. It takes 26 rem and gives of that when it gets tight. */ [data-type="search-form"] { flex: 0 1 26rem; } /* The switches, mobile first: a grid with two exactly equal columns and an 8 px gap, across the whole width of the strip, so that the six switches line up one under the other (Owner, 2 September 2026). `minmax(0, 1fr)` and not `1fr`: a column may not grow wider because its word is longer — otherwise the switches of the right column would no longer stand on one line. The switch row sits at the height of the field, not at the height of its label: the strip aligns at the bottom edge, and without the minimum height the switches would stand at the foot of the label. */ /* The line under the switches ({T0052}) takes a row of the strip of its own — otherwise it would stand beside them as soon as the strip runs in one row. What it says belongs to the page. */ [data-part="options-note"] { flex: 1 1 100%; /* Centred under the switches and sixteen points below (Owner, 7 September 2026): it belongs to them but does not stand in their row. */ margin: 16px 0 0; text-align: center; } /* The container of the groups carries their spacing ({T0093}, Owner, 11 September 2026). **A grid with `gap` and no margins on the groups themselves**: a `margin` on the second form would hold even where there is no first, and would then have to be ruled away again. The `gap` holds only between two — if there is only one, there is nothing to separate. It stands here and not on the strip, because the strip carries `display: block` on the map page: there is no search there to lay something beside, and a block knows no `gap`. Exactly hence the two groups stacked there without any spacing, although a row gap stood on the strip. `--space-open` is the step above the base step, factor 1.618: 22.6 to 27.5 points depending on width. It has to be clearly larger than the spacing **within** a group — otherwise the label visually belongs to the row above instead of its own. */ [data-part="switches"] { display: grid; gap: var(--space-open); flex: 1 1 100%; } /* The form carries nothing more than its semantics; the width comes from the grid above, the arrangement from the
in it. */ [data-part="switch-group"] { /* A
brings frame, padding and a minimum width from the browser, and all three stand in the grid's way. `min-inline-size: 0` is the least known of them: without it a fieldset takes `min-content` as the lower bound and cannot be computed narrower in a flex or grid child than its longest word. */ border: 0; padding: 0; margin: 0; min-inline-size: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 0.5rem; min-block-size: var(--control-height); } /* The section marker (Owner, 11 September 2026): the label in the type of every other — monospace, capitals, tracked — and under it the line across the full width. **The line takes `currentcolor`.** So it never stands in another colour than its label without the tone being written twice ({K0004}); whoever recolours the group colours both. The spacings come from the ladder and not as a number: `tight` holds label and line together as one sign, `close` sets the distance to the switches. `close` carries the factor 0.618 and is so the step of the golden ratio itself — it lies at 8.7, 9.3 and 10.5 points depending on width, on the narrow one almost exactly at the named eight. */ [data-part="switch-group"] > legend { inline-size: 100%; padding-block-end: var(--space-tight); margin-block-end: var(--space-close); border-block-end: 1px solid currentcolor; } /* From 35 rem of strip width — the tablet step of the ladder, here as a container query — the row again, which wraps when it gets tight; the row gap stays at 8 px. */ @container (min-width: 35rem) { [data-part="switches"] { flex: 0 1 auto; } [data-part="switch-group"] { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; } /* If two groups stand there, the container takes the full width ({T0093}) — otherwise it would slip beside the search and the two would be as narrow together as one. Without an upper row nothing changes: `:has` then does not apply. */ :scope:has([data-row="lead"]) [data-part="switches"] { flex: 1 1 100%; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The legal notice — quiet, but readable. */ @layer widgets.footer_legal { @scope ([data-type="footer-legal"]) { :scope { display: grid; gap: var(--space-tight); justify-items: center; text-align: center; /* 80 characters — the width at which a line is still taken in at one glance. Measured in ch and not in rem: the limit is a number of characters, no length, and it stays right when somebody sets the type larger. */ max-inline-size: 80ch; margin-inline: auto; /* Spacing upwards: the notice belongs to the footer but does not stand on one level with name and game list. */ margin-block-start: var(--space-open); } /* Smaller than the running text, but not smaller than what still reads comfortably. A legal notice nobody can decipher does not serve its purpose — it should be quiet, not hidden. */ :scope :where([data-type="prose"], small) { font-size: var(--text-small); color: var(--ink-quiet); max-inline-size: none; } > p { margin: 0; } /* The compulsory links stand above the notice and side by side: they are two targets and no list, and a ul with two entries is an enumeration that is none \(AW2\). The spacing separates them from the sentences above without drawing a line. */ [data-part="links"] { display: flex; gap: var(--space-open); justify-content: center; flex-wrap: wrap; margin-block-start: var(--space-tight); } /* Tabular figures, so that the year does not flicker. **No more capitals.** They stood here as long as the line was a signature — Vioxide // Vivian Voss // Anno MMXXVI. The owner set the spelling themselves on 9 September 2026 \({T0077}\), and the display does not rewrite it: a legal notice shows what stands there. The marks carry their capitals in the text \(VGA.RUN, VIOXIDE SARL\), the name of the person beside them does not. Incidentally, a screen reader often reads continuous capitals as an abbreviation. */ small { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* The carrier line stands under the notice and quieter than it: it names the company, the complete statement stands in the imprint. One step smaller suffices for that — below begins what nobody reads any more, and a notice nobody deciphers does not serve its purpose. */ [data-part="carrier"] small { font-size: 0.8125rem; letter-spacing: 0.01em; } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: A group of kind switches — the three-state knob and the label in the summary, the switches with their tree lines beneath ({T2001S5}). */ @layer widgets.group_accordion { @scope ([data-type="group-accordion"]) { /* **The three states are the group's to say.** It sets the knob's picture by :has() over its own switches, and the knob reads `--knob-picture` with none as its default - the container sets a property, the object reads it (how-we-build). No class, no script: the state is the switches' state. */ :scope { --knob-picture: url("/icons/group-none.webp"); } :scope:has([data-part="kinds"] input:checked) { --knob-picture: url("/icons/group-some.webp"); } :scope:not(:has([data-part="kinds"] input:not(:checked))) { --knob-picture: url("/icons/group-all.webp"); } /* The summary line: the knob with its label on the left, the chevron on the right. The knob's own label is the group's label - the checkbox carries the text, the widget writes no word of its own. */ > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; padding-block: var(--space-tight); cursor: pointer; list-style: none; user-select: none; } > summary::-webkit-details-marker { display: none; } > summary::after { content: ""; inline-size: 0.375rem; block-size: 0.375rem; margin-inline-end: var(--space-tight); border-inline-end: 2px solid var(--link); border-block-end: 2px solid var(--link); transform: translateY(-25%) rotate(45deg); transition: transform 90ms steps(3); } :scope[open] > summary::after { transform: translateY(25%) rotate(225deg); } @media (prefers-reduced-motion: reduce) { > summary::after { transition: none; } } > summary:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: 4px; } /* The kinds, one under the other, set in from the knob by the tree's width; every row carries its line - the └ of the picture, drawn: a stem down the left and a branch to the mark. The last row's stem stops at its branch. */ > [data-part="kinds"] { display: grid; row-gap: 0.125rem; margin: 0; padding-inline-start: var(--space-snug); padding-block-end: var(--space-tight); list-style: none; } > [data-part="kinds"] > li { position: relative; padding-inline-start: var(--space-snug); } > [data-part="kinds"] > li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: -0.125rem; inset-block-end: 50%; inline-size: 0.625rem; border-inline-start: 1px solid var(--ink-quiet); border-block-end: 1px solid var(--ink-quiet); } > [data-part="kinds"] > li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; inset-block-end: -0.125rem; border-inline-start: 1px solid var(--ink-quiet); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The stage bar — stripes across the full width, title on them. */ @layer widgets.header_banner { @scope ([data-type="header-banner"]) { :scope { display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--space-close); padding-block: 2.125rem 1.875rem; padding-inline: max(var(--gutter), (100% - var(--measure)) / 2); border-block-end: 1px solid oklch(30% 0.014 260); color: var(--stage-ink); /* The stripes come from a repeated gradient, not from a picture: no request, no file, and the colours come from the theme. A second game changes three variables and gets its own bar. The gradient stands in the theme and not here: it is what changes per game. The bar itself stays the same form. */ background: var(--stage-scan), var(--stage-bar); background-size: 100% 3px, auto; background-repeat: repeat, no-repeat; } /* The title stands on the stripes and needs a hold against them. A shadow in the deepest colour of the bar itself, not in black: it so sits in the same family and acts as an edge, not as dirt. */ /* 44 px — the largest type of the site and the only one not on the ladder. It is the stage itself: the game name, and it should fill the bar, not stand in it. Measured from the design. The shadow is hard and offset, three pixels to the bottom right — no soft glow. That is how screens of that time cast their type, and it is the same reason the bar carries a scanline grid. */ [data-type="heading"] { font-size: var(--text-stage); line-height: 1.2; color: oklch(99% 0.01 90); text-shadow: 3px 3px 0 oklch(22% 0.06 34); } /* The date line: 13 px, widely tracked, in the light stage colour. The chip brings its own size and is overridden here, because it stands on the bar and not in the text. */ [data-type="chip"] { font-size: 0.8125rem; letter-spacing: 0.12em; color: oklch(97% 0.02 70); padding-block-end: 0.5rem; } /* The expansion, under the name. Smaller and set back: it says which content holds, and that is information and no announcement. The type cut stays the same as the title's — it is the same thing, only one level deeper. No grid place of its own: the line stands in the flow under the title and is conditional. A game without an expansion does not show it, and the bar may not jump because of that. */ [data-type="edition"] { margin: 0; font-size: var(--text-head); line-height: 1.1; letter-spacing: 0.02em; color: oklch(88% 0.06 70); } /* From tablet on the note stands beside the title instead of under it. Only the difference, and only upwards — the base is the narrow form. */ /* From tablet on two columns: title and expansion one under the other on the left, the note on the right. The expansion belongs under the name and not beside it — it says which content holds, and one reads that as a continuation of the title, not as a second statement at the other end. Named areas instead of counting: with three children and two columns the third otherwise lands in a place nobody chose — exactly that happened here. */ @media (min-width: 35rem) { :scope { grid-template-columns: 1fr auto; grid-template-areas: "title note" "edition note"; align-items: end; } [data-type="heading"] { grid-area: title; } [data-type="edition"] { grid-area: edition; } [data-type="chip"] { grid-area: note; } } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: Symbol and word mark side by side. */ @layer widgets.header_logo { @scope ([data-type="header-logo"]) { :scope { display: grid; grid-auto-flow: column; align-items: center; gap: 0.75rem; text-decoration: none; /* The link does not fill its cell — it is as wide as its content. Without that the stretch of the head grid would come through and the clickable area would reach up to the navigation. */ justify-self: start; } :scope:where(:focus-visible) { outline: 2px solid var(--link); outline-offset: var(--space-tight); } } } /* Copyright 2026 Vivian Voss. Code by Vivian Voss. Licensed under the BSD-3-Clause. SPDX-License-Identifier: BSD-3-Clause Scope: The navigation — a switch on the phone, an open list from screen on. */ @layer widgets.header_menu { @scope ([data-type="header-menu"]) { /* The nav passes its two children through to the head grid instead of enclosing them. Otherwise switch and list would have to share one area, and the switch would stand on the phone where the list begins from screen on — so in the middle instead of outside. */ :scope { display: contents; } /* The button is no bare