/* * MAARS component styles — Manhattan Area Amateur Radio Society, KSØMAN. * Visual direction: revision 3, "Tuned" (DESIGN.md, locked). * * THE IDEA * Amateur radio is a record-keeping culture. Every contact is logged: date, * time in UTC, callsign, frequency, mode. This Society's 48-year archive is a * logbook, so the site states what is true NOW, each fact carrying when it was * last checked, and then the record. The one bold element is the propagation * scene; everything else is deliberately quiet. * * WHAT REVISION 3 CHANGED, AND WHY. The owner's words, which win over every * guideline below them: scrap the top header and remake it with a new idea; * modern, for a ham radio club expecting something new; soft, and smooth. * * THE MASTHEAD IS A RECEIVER. Section 10. The analogue dial is gone and the * text masthead with it; the top of every page is now a slim live spectrum * and waterfall tuned to the club's own 147.255 MHz machine, with KSØMAN * resting in it. It is the one image that reads as "radio" to a * thirty-year-old and a ninety-year-old at the same time, and it is soft and * smooth by its nature rather than by decoration: a continuous heat map, * with no hard edge anywhere in it, dissolving into the page at both edges. * It is ambient, not bold — the propagation scene in section 9 is still the * page's one large moment and the band never competes with it. * * SOFT AND SMOOTH IS NOT THE CARD KIT. The failure mode of a soft-and-smooth * brief is a page chopped into identical rounded boxes, one radius * everywhere, the same grey shadow under each, a gradient wash on anything * that looked empty. This file answers it by varying with ROLE, and by * refusing far more often than it accepts: * · RADIUS IS A STATEMENT ABOUT WHAT A THING IS. 16px on a major surface, * 10px on a control, 999px on the one token whose shape is its whole * geometry, and ZERO on data. The archive log, the specification and the * facet lists are square, and section 5 says why in as many words. * · SHADOWS ARE NAVY-TINTED, NEVER GREY, AND ONLY ON THINGS GENUINELY * RAISED. Two things on this site qualify: the mobile navigation * overlay, which really does float over the page, and the buttons a * reader presses. A table is not raised. A row is not raised. A band is * not raised. The navigation row is not raised, and section 10c refuses * it there on purpose, at the point where a shadow was easiest to reach * for. * · GRADIENTS CARRY MEANING OR THEY DO NOT APPEAR. There are exactly two * in this file and both are signal strength: the waterfall itself, and * the masthead's fallback, whose bright column is where 147.255 sits in * the span. There is no decorative wash anywhere. * · MOTION IS 200ms ON ONE CURVE, ON USER-TRIGGERED CHANGES ONLY. No * scroll-triggered entrances. No hover lift on every block. * * THE PALETTE SOFTENED AND KEPT ITS IDENTITY. Section 1b is the brief's own * nine-name table, verbatim: ink #191933, ground #F4F5FA, the hairline * #DDE0EE, the old lavender calmed to --haze #E8EAF6, and a new --navy-soft * #3B3BA8 so a hover is a real value step instead of a thicker underline. * Dark mode redefines those nine names and nothing else. * * TEXT ON A SURFACE NOBODY CONTROLS. The identity sits on a waterfall, whose * pixels run from near-black to full white and change every 80ms. Contrast * against the average pixel is not a measurement, so section 10b computes * the scrim against the WORST pixel the map can emit — pure white — and the * alphas there are the output of that arithmetic, not a look. * * WHAT REVISION 2 CHANGED, AND WHY. Revision 1 shipped and was measured. * * NO SHOUTED LABELS. Every tracked-out capitalised eyebrow is gone — * STANDING FACTS, NEXT MEETING, MEETING, REPEATER, NET, COMPUTED, SOURCED, * THE RECORD. A label that earns its place is sentence case, quieter ink and * no letter-spacing, and it is never larger than the value it labels. Most * of them turned out not to earn it: the heading above a block already says * what the block is, so the label was deleted rather than restyled. * * RULES, NOT BOXES. A hairline between two rows says the same thing a border * round each of them says, in one line instead of eight, and it does not * nest. Revision 1 was a tinted panel holding white cards holding bordered * chips: three frames deep before a reader reached a fact. At most one * bordered container per screen now, and only where it genuinely holds * something apart (the archive's filter panel). No dashed edges anywhere: a * dash reads as unfinished, not as provisional. * * THE PROVENANCE LINE IS FURNITURE. One quiet line under the value — * "Sourced. Last checked January 12, 2024 — 977 days ago." — in the same * quiet ink as any other note. Colour only when the fact is genuinely stale, * and the grade word carries the meaning on its own, so nothing is lost in * greyscale or to a reader who cannot see the hue. * * THE DATA FACE IS FOR FIGURES. Fira Code goes on .maars-fig and on , * which is callsigns, frequencies, tones, offsets, counts and money. A prose * date is a sentence and stays in the reading face. * * ONE SPACING SCALE. Section 1b declares five steps and this file uses no * other vertical length. A component owns the space inside itself; the band * it sits in owns the space around it. Nothing pads a padded thing. * * ONE COLUMN. Section 3 is the whole layout: a centred column, one left * edge, one right edge, at every width. * * AUDIENCE * Licensed amateurs aged 30 to 90, read on phones in parking lots and on iPads * in a church basement, and shown to a professional club. Legibility beats * fashion every time. Body text never below 18px, line-height 1.65, measure * 66–72ch, every interactive target at least 48px, a 3px focus ring that is * never removed, and no weight below 400. * * INK POLICY — every ratio below is computed with the WCAG relative-luminance * formula, not estimated. * light navy #00008C on paper 15.23:1 · on ground 13.99:1 · on haze 12.72:1 * navy-soft #3B3BA8 on paper 8.83:1 · on ground 8.11:1 · on haze 7.37:1 * magenta #990066 on paper 8.25:1 · on ground 7.58:1 · on haze 6.88:1 * rust #8F2C00 on paper 8.31:1 · on ground 7.63:1 · on haze 6.94:1 * ink #191933 on ground 15.71:1 · on haze 14.27:1 · paper on ink 17.10:1 * meta #46496B on paper 8.66:1 · on ground 7.95:1 · on haze 7.23:1 * dark ink #EDEDF7 on ground 16.70:1 · on paper 15.52:1 * navy #9FA0F2 8.12:1 · navy-soft #C8C9FA 12.20:1 * magenta #F09FD0 9.78:1 · rust #F2A07A 9.33:1 * haze band #23234A carries ink at 12.80:1 * band white on the masthead scrim at its thinnest 7.97:1, readout 5.82:1, * both computed against a PURE WHITE waterfall pixel (section 10b) * * COLOUR IS NEVER THE SIGNAL. A freshness grade is carried by the WORD — * Measured, Sourced, Unverified — spelled out in the reading face at the head * of the provenance line. Revision 1 carried it in three drawn channels as * well (a fill, a frame, a marker box) and the result was a chip that shouted * at a reader about a fact nobody had re-measured. The word survives * greyscale, deuteranopia, a photocopier and a screen reader, and it is the * only channel this file relies on. Hue is used once, for the stale state, and * never alone: a stale line also says "Unverified", or prints a date years * old, or says "No check on record". * * CLASS VOCABULARY. Every selector here is a class something actually emits: * the render callbacks in maars-core/inc/blocks.php, the block templates in * ../../templates and ../../parts, or the log-line contract documented in * section 5. Nothing here styles a name no file writes. * * !important POLICY. Three places, in file order, each commented at the point * of use, and nowhere else. Every one of them is beating an !important or an * inline style that this file cannot reach on specificity: * 1. section 3's flush-left rule, because WordPress's constrained layout * centres a block with `margin-left: auto !important` and a reading * measure is a cap on a line, not an instruction to centre a column; * 2. the prefers-reduced-motion kill switch, which has to beat an inline * animation a block or the editor brought with it; * 3. the dark band at the end of this file, because WordPress prints its * preset colour utilities (.has-ink-background-color and friends) with * !important of its own, and there is no other way to keep a dark band * dark in both colour schemes without styling a component inside a media * query, which the brief forbids. * Everything else beats WordPress's `:root :where(...)` rules on specificity * alone — :where() counts as zero, so `:root body` and `:root :is(h1, h2, h3)` * are enough. */ /* --------------------------------------------------------------------------- * 0. The three faces, self-hosted, zero third-party requests. * * Verified by render, not assumed: Twenty Twenty-Five ships these files inside * the image, so they are served from the same origin as the page and no * request ever leaves the box. There is no @import, no Google Fonts and no CDN. * * Platypi display — a contemporary serif with real character. Professional * without being stuffy. * Manrope body — geometric sans, wide apertures, holds up at 18px for a * reader in their eighties. * Fira Code data — ITS ZERO IS NATIVELY SLASHED. That is the whole point: * it is how a ham writes KSØMAN. Manrope's zero is not, * so every callsign, frequency, tone, offset, date and * dollar amount renders in Fira Code. * * All three are variable fonts with a weight axis; the ranges below are the * axes the files actually carry, which is tighter than the 100–900 theme.json * declares for the same files. Nothing in this stylesheet asks for a weight * below 400. * * theme.json registers these faces too, and that registration is the canonical * one for the editor and the font library. These declarations are not a * duplicate of it for its own sake: the first src here is RELATIVE to this * stylesheet, so the faces still resolve when WordPress is installed in a * subdirectory, and they make the type correct in the standalone harnesses * (tests/test_contrast.py, tests/test_webgl.py) that load this file with no * WordPress around it at all. The absolute path follows as the second source. * ------------------------------------------------------------------------- */ @font-face { font-family: "Manrope"; src: url("../../../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2") format("woff2"), url("/wp-content/themes/twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Platypi"; src: url("../../../twentytwentyfive/assets/fonts/platypi/Platypi-VariableFont_wght.woff2") format("woff2"), url("/wp-content/themes/twentytwentyfive/assets/fonts/platypi/Platypi-VariableFont_wght.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; } @font-face { font-family: "Fira Code"; src: url("../../../twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2") format("woff2"), url("/wp-content/themes/twentytwentyfive/assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------------- * 1. Tokens. * * Every colour this stylesheet uses is a custom property declared in the base * (non-media) blocks below. The dark block at the end of this section * redefines the same names and nothing else — it never introduces a name that * exists only inside a media query, because a token born in a media query is a * token that is undefined for half the audience, and it never styles a * component, because a component styled inside a media query is a component * that drifts. * * 1a. The theme.json preset mirror, written at zero specificity with :where() * so a real WordPress global-styles block (`:root`, 0-1-0) still wins and the * site editor keeps control. On a bare harness page with no WordPress * stylesheet — which is how tests/test_contrast.py and tests/test_webgl.py * load these components — these are what everything resolves against. * ------------------------------------------------------------------------- */ :where(:root) { /* * The preset names, carrying revision 3's values. theme.json still holds * revision 1's hexes for ink, ground and lavender; section 1b-iv points * the presets at the table below so one palette reaches the page whether * or not theme.json has caught up, and names theme.json as the place to * make it permanent. */ --wp--preset--color--navy: #00008c; --wp--preset--color--magenta: #990066; --wp--preset--color--lavender: #e8eaf6; --wp--preset--color--ink: #191933; --wp--preset--color--paper: #ffffff; --wp--preset--color--ground: #f4f5fa; --wp--preset--color--alarm: #a5171b; /* The three faces, mirrored from theme.json (slugs display / body / data) so a bare page has the same type as the site. Each falls through to a same-genre system stack if a woff2 has not arrived yet. */ --wp--preset--font-family--display: "Platypi", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Century Schoolbook", Georgia, "Times New Roman", serif; --wp--preset--font-family--body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --wp--preset--font-family--data: "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; } /* 1b. The brief's own palette and scale. These are the names the rest of this * file is built from; a component never writes a hex. */ :root { color-scheme: light dark; /* --- 1b-i. THE BRIEF'S OWN TABLE, VERBATIM ---------------------------- * * DESIGN.md revision 3 prints nine colours in a table, one hex and one * role each. These are those nine names, in that order, with nothing * renamed and nothing added. They are the source. Every --maars-* colour * below is either an alias for one of them or a surface derived from them * and measured against them, and no component anywhere in this file * writes a hex. * * WHAT REVISION 3 MOVED, and why it is safe: * ink #14142B -> #191933 still 17.10:1 on paper, 15.71:1 on ground * ground #F6F6FB -> #F4F5FA a shade cooler; paper still lifts off it * rule #D7D7E4 -> #DDE0EE a calmer hairline, see --maars-rule-firm * lavender #DBDBFB -> --haze #E8EAF6 the same fill, quieted * --navy-soft #3B3BA8 is new: a second navy for hover and secondary * emphasis, 8.83:1 on paper, so a state change is carried by a real * value step and not by the underline alone. * * Navy is NOW. Magenta is THE RECORD. They are never swapped. */ --navy: #00008c; /* anchor, links, headings 15.23:1 paper · 13.99:1 ground */ --navy-soft: #3b3ba8; /* hover, secondary emphasis 8.83:1 paper · 8.11:1 ground */ --magenta: #990066; /* the archive, and only the archive */ --ink: #191933; /* body text 17.10:1 paper · 15.71:1 ground */ --paper: #ffffff; /* raised surfaces */ --ground: #f4f5fa; /* page ground, cool, softened off-white */ --haze: #e8eaf6; /* quiet fills, the old lavender, calmed */ --rust: #8f2c00; /* stale only 8.31:1 paper · 7.63:1 ground */ --rule: #dde0ee; /* hairlines */ /* --- 1b-ii. The working names. Aliases, not second opinions. ---------- */ --maars-navy: var(--navy); --maars-navy-soft: var(--navy-soft); --maars-magenta: var(--magenta); --maars-ink: var(--ink); --maars-paper: var(--paper); --maars-ground: var(--ground); --maars-haze: var(--haze); --maars-rust: var(--rust); --maars-rule: var(--rule); /* The name the 2,700 lines below were written against. Revision 3 renamed the fill, not the fill's job, so the old name is kept pointing at the new one rather than edited out of a hundred places. */ --maars-lavender: var(--haze); /* --- Derived surfaces and hairlines. Never load-bearing for text. ----- */ --maars-meta: #46496b; /* secondary prose 8.66:1 paper · 7.95:1 ground */ --maars-sunk: #eceef8; /* hover ground, sunken rows */ --maars-rust-wash: #fbf2ec; /* the stale dateline's ground rust 7.52:1 */ --maars-band: #191933; /* the one dark band (the hero) */ --maars-band-edge: transparent; /* the band needs no frame on a pale page */ --maars-on-band: #ffffff; /* text on the dark band 17.10:1 */ --maars-on-band-link: #dbdbfb; /* links on the dark band 12.66:1 */ /* The quiet ink on the dark band. --maars-meta there measures 2.08:1 and rust 2.17:1, so a provenance line printed in either would be the same class of failure this file exists to keep out. */ --maars-on-band-meta: #b9bdd8; /* notes on the dark band 9.23:1 */ --maars-space: #05050f; /* letterbox behind the WebGL2 canvas */ /* * A SECOND HAIRLINE, and the one place this file argues with the table. * --rule #DDE0EE measures 1.21:1 against the page ground. That is right * for a separator whose job is to be felt rather than seen — between two * paragraphs of a footer, under a facet row. It is not enough for the * lines that hold the archive's columns in register, which a reader in * their eighties runs a finger down: those need to be visible, not * implied. --maars-rule-firm is the same hue, one step down, at 1.45:1, * and it is used ONLY where a rule is structure. Nothing here is a box. */ --maars-rule-firm: #ccd1e6; /* --- 1b-iii. THE MASTHEAD BAND — the receiver. ------------------------ * * The band is an instrument face and stays dark in both colour schemes, * the way the hero does, so these are tokens rather than a component rule * inside a media query. * * --maars-scope-floor is the noise floor the waterfall is painted on and * the colour the band falls back to if the canvas never arrives. * --maars-scope-veil is the scrim colour. Its ALPHA is the load-bearing * number: at 0.72 over a PURE WHITE pixel — the brightest thing a * waterfall can possibly emit — the composited background measures * L=0.0817, so white text on it is 7.97:1 and the quiet readout * #D7DBF4 is 5.82:1. Both clear 4.5:1 against the worst case rather than * against the average, which is the only way a scrim can be claimed to * work on a surface whose pixels nobody controls. */ --maars-scope-floor: #05081f; --maars-scope-veil: 5, 8, 31; /* the veil's RGB; the alphas live in §10 */ /* * THE IDENTITY SITS ON ITS OWN PLATE, so its contrast is a constant rather * than a bet on what the waterfall happens to paint. Revision 3's first cut * put white text over a hole the script erased in the band; the hole showed * the light page ground, so the wordmark came out white-on-near-white at a * measured 1.13:1 -- the very failure this rebuild exists to fix, rebuilt. * Navy on the plate is 13.99:1 and cannot drift, with canvas or without. */ --maars-scope-plate: rgba(244, 245, 250, 0.94); --maars-on-scope: #00008c; /* 13.99:1 on the plate */ --maars-on-scope-meta: #191933; /* 15.70:1 on the plate */ /* --- Focus. 3px navy, 2px offset, never removed. The halo is a second ring in the opposite value so the outline is still visible when the element itself is navy — a navy ring on a navy button is not a ring. -- */ --maars-focus: var(--maars-navy); --maars-focus-halo: var(--maars-paper); /* --- Type ------------------------------------------------------------- The reading face is asked for by both slugs theme.json has used for it, newest first, before falling through to the mirror above: a face this whole design depends on must not vanish because a preset was renamed. */ --maars-font-display: var(--wp--preset--font-family--display); --maars-font-text: var(--wp--preset--font-family--body, var(--wp--preset--font-family--text)); --maars-font-data: var(--wp--preset--font-family--data); /* 18px floor at 320px, 20px by 1100px. Not 16. The reader is 78. */ --maars-text-body: clamp(1.125rem, 1.085rem + 0.2vw, 1.25rem); --maars-text-data: clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem); --maars-text-lede: clamp(1.25rem, 1.18rem + 0.36vw, 1.5rem); --maars-text-h3: clamp(1.3125rem, 1.22rem + 0.46vw, 1.625rem); --maars-text-h2: clamp(1.5rem, 1.33rem + 0.86vw, 2.125rem); --maars-text-h1: clamp(1.875rem, 1.56rem + 1.6vw, 3rem); /* Secondary prose — a caption, a provenance line, a footnote. Flat 18px: it is the floor, and it is never allowed to drift under it to make room. */ --maars-text-note: 1.125rem; /* * A field label: "Date", "Callsign", "Next meeting". Also 18px, because the * floor is the floor and a label is text a 78-year-old has to read. It is * made quiet by CASE, WEIGHT and INK — sentence case, 600, meta — and never * by shrinking it under the floor or tracking it out into capitals. It is * always smaller than the value it labels, because the value is 20px body * or larger. */ --maars-text-label: 1.125rem; --maars-leading: 1.65; --maars-measure: 68ch; /* 66–72ch */ /* --- Space. ONE scale, and the only vertical lengths in this file. ---- * * Revision 1 had no scale: a band padded 2.75rem held a card padded 1.35rem * holding a chip padded 0.45rem, and every one of those was a clamp() of * its own. The homepage came out 6,363px tall for about a screen and a half * of information. The rule now is that a component owns the space INSIDE * itself and nothing else, the band it sits in owns the space AROUND it, * and both of them spend it out of these five steps. */ --maars-space-1: 0.35rem; /* a line and the line under it */ --maars-space-2: 0.6rem; /* inside a row */ --maars-space-3: 1rem; /* between rows */ --maars-space-4: 1.5rem; /* between a block and the next block */ --maars-space-5: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* between bands */ /* --- Shape: A RADIUS SCALE BY ROLE, NOT ONE NUMBER EVERYWHERE --------- * * The owner asked for soft and smooth. The failure mode that request * produces is the generic card kit: every block chopped into an identical * rounded box with one radius and the same grey shadow under it. The * brief's answer, and this file's, is that the radius is a statement about * WHAT A THING IS: * * 16px a major surface — something a reader could imagine picking up: * the scene's canvas, a document image, the original-file panel. * 10px a control — a button, a search field, a band selector. Smaller, * because a control is smaller and a 16px corner on a 48px button * eats a third of its edge. * 999px a pill — a thing whose shape IS its whole geometry: the current * page number. There are very few of these and none of them was * invented to use the value up. * 0 DATA. A table is not a surface and a row is not a card. The * archive log, the specification list and the facet lists are set * square, because a column of records that curves at the corners * stops reading as a column of records. */ --maars-radius-surface: 16px; --maars-radius-control: 10px; --maars-radius-pill: 999px; --maars-radius-data: 0; /* The name the older rules were written against, pointed at the control step: everything that carried it was a control or a focus ring. */ --maars-radius: var(--maars-radius-control); /* --- Shadow: NAVY-TINTED, AND ONLY ON THINGS GENUINELY RAISED -------- * * Straight off the brief, and grey is not in it: a grey shadow under a * navy-and-white page is the one that reads as a template. The list of * things that carry it is deliberately three items long — the mobile * navigation overlay, which really does float over the page, and the two * buttons a reader presses. A table is not raised. A row is not raised. A * band is not raised. A fact is not raised. Section 10c says so again at * the point where it would have been easiest to reach for one. */ --maars-shadow: 0 1px 2px rgba(10, 10, 60, 0.05), 0 10px 30px rgba(10, 10, 60, 0.07); --maars-shadow-lifted: 0 2px 6px rgba(10, 10, 60, 0.10), 0 18px 48px rgba(10, 10, 60, 0.16); --maars-gutter: clamp(1rem, 0.6rem + 2vw, 2rem); --maars-column: 72rem; /* the one column; see section 3 */ --maars-target: 48px; --maars-hairline: 1px; /* --- Motion: ONE curve, one duration, user-triggered changes only. ---- * 200ms and cubic-bezier(.2,.7,.3,1), the brief's own numbers: a curve * that leaves quickly and arrives slowly, which is what "smooth" means * when it is not a synonym for "slow". Nothing on this site animates on * load, nothing animates on scroll, and no block lifts on hover. The one * ambient motion on the page is the waterfall in the masthead. */ --maars-motion: 200ms; --maars-ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* 1b-iv. ONE PALETTE ON THE PAGE. * * WordPress prints theme.json's palette as `:root{--wp--preset--color--*}`, * and theme.json is pinned by the interface contract to revision 1's hexes — * ink #14142B, ground #FBFBFD, lavender #DBDBFB. Revision 3 softened all * three. Left alone, a page would carry two inks: #191933 wherever this file * names a token and #14142B wherever a template carries `has-ink-color`. * * Two inks eight tenths of a percent apart is not a visible defect, and that * is exactly why it would survive for years. So the presets are re-pointed at * the table, at `:root:root` (0-2-0), which outranks the `:root` block * WordPress prints whichever order the two stylesheets load in — the same * device section 3 uses for the layout sizes and section 1c for dark mode. * * This is a bridge, not a home. The palette belongs in theme.json, where the * site editor can see it; when theme.json is updated to the revision 3 table * this block becomes a no-op and can go. It sets colour names and nothing * else, so it cannot drift into styling a component. */ :root:root { --wp--preset--color--navy: var(--navy); --wp--preset--color--magenta: var(--magenta); --wp--preset--color--lavender: var(--haze); --wp--preset--color--ink: var(--ink); --wp--preset--color--paper: var(--paper); --wp--preset--color--ground: var(--ground); } /* 1c. Dark scheme. TOKENS ONLY. No component may be styled in here. * * `:root:root` (and the body twin) outrank whatever selector WordPress printed * its preset block with, whichever order the two stylesheets load in. Every * name set here is also set above, so nothing is undefined in light. The * preset variants are the ones the contract pins; ink and paper genuinely * trade places, which is what keeps has-ink-color text and * has-paper-background-color cards correct in both schemes without a single * component rule. */ @media (prefers-color-scheme: dark) { :root:root, :root:root body { /* * THE BRIEF'S NINE NAMES, REDEFINED AND NOTHING ELSE. This is the * whole of dark mode: the same table, the same roles, different * values. No selector in this media query names a component, so * nothing can drift between the two schemes. */ --navy: #9fa0f2; /* 8.12:1 on ground */ --navy-soft: #c8c9fa; /* hover goes brighter on a dark page. 12.20:1 */ --magenta: #f09fd0; /* 9.78:1 on ground */ --ink: #ededf7; /* 16.70:1 on ground */ --paper: #14142a; --ground: #0c0c18; --haze: #23234a; /* ink on it 12.80:1 */ --rust: #f2a07a; /* 9.33:1 on ground, still far from magenta */ --rule: #3d3d63; /* The preset mirror follows the table, so has-ink-color text and has-paper-background-color surfaces stay correct with no component rule anywhere. Ink and paper genuinely trade places. */ --wp--preset--color--navy: var(--navy); --wp--preset--color--magenta: var(--magenta); --wp--preset--color--ink: var(--ink); --wp--preset--color--paper: var(--paper); --wp--preset--color--ground: var(--ground); /* The old lavender preset points at the calmed fill, lifted to sit on #0C0C18 instead of the 1.2:1 disaster a naive inversion produces. */ --wp--preset--color--lavender: var(--haze); --wp--preset--color--alarm: #ff9e7a; /* Derived surfaces. Every one of them is measured against the table above, not inverted from the light value and hoped for. */ --maars-rule-firm: #4c4c78; /* structure, not decoration. 1.53:1 on ground */ --maars-meta: #b9bfd8; /* 10.64:1 on ground */ --maars-sunk: #1b1b38; --maars-rust-wash: #26130c; /* rust on it 8.54:1 */ /* The band is lifted off the ground rather than sunk into it: on a dark page "a darker slab" is not a band, it is nothing. Ink on it is 15.52:1, and the edge token draws the frame the value alone cannot. */ --maars-band: #14142a; --maars-band-edge: #3d3d63; --maars-on-band: #ededf7; /* 15.52:1 on the band */ --maars-on-band-link: #dbdbfb; /* 13.36:1 — the light lavender, not the band */ --maars-on-band-meta: #b9bdd8; /* 9.74:1 on the band */ --maars-space: #05050f; /* * THE MASTHEAD DOES NOT INVERT. A receiver's screen is dark in a lit * room and dark in a dark one; the band is the same instrument face in * both schemes, and saying so here — as a token — is what keeps it out * of a component rule inside a media query. The floor drops a shade so * the band still separates from a #0C0C18 page. */ --maars-scope-floor: #04061a; --maars-scope-veil: 4, 6, 26; --maars-scope-plate: rgba(233, 235, 245, 0.95); --maars-on-scope: #00008c; --maars-on-scope-meta: #191933; /* * A navy-tinted shadow is invisible on a dark page, because a shadow * is a value step and there is no value below #0C0C18 to step to. On * dark, the same raised things are separated by a deeper, wider one. */ --maars-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.55); --maars-shadow-lifted: 0 2px 6px rgba(0, 0, 0, 0.6), 0 18px 48px rgba(0, 0, 0, 0.65); --maars-focus: #9fa0f2; /* still navy — the dark variant. 8.12:1 on ground */ --maars-focus-halo: #0c0c18; } } /* --------------------------------------------------------------------------- * 2. Document floors. * * Written with :where() — zero specificity — so theme.json, the site editor * and a block's own settings still win. These are what a bare page falls back * to, and they are the accessibility floor the brief makes non-negotiable. * ------------------------------------------------------------------------- */ :where(*, *::before, *::after) { box-sizing: border-box; } :where(html) { /* clip, not hidden: nothing scrolls sideways at 390px, sticky still works. */ overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* * `:root body` scores 0-1-1, which beats the `:root :where(body)` rule * WordPress prints for styles.color and styles.typography — :where() counts as * zero, so one element name on top of :root is enough and no !important is * needed. The body background is an explicit token, never inherited from the * host: a transparent body borrows whatever ground is behind it. */ :root body { background-color: var(--maars-ground); color: var(--maars-ink); font-family: var(--maars-font-text); font-size: var(--maars-text-body); font-weight: 400; line-height: var(--maars-leading); -webkit-font-smoothing: antialiased; } /* Headings. Display serif for the three that carry a section; the small three are field labels and stay in the text face, which is how theme.json has them. 0-1-1 again, for the same reason as body. */ :root :is(h1, h2, h3) { font-family: var(--maars-font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; } :root :is(h4, h5, h6) { font-family: var(--maars-font-text); font-weight: 700; line-height: 1.25; } :where(h1) { font-size: var(--maars-text-h1); } :where(h2) { font-size: var(--maars-text-h2); } :where(h3) { font-size: var(--maars-text-h3); } /* Prose. A long line is the commonest reason an older reader loses their place, so the measure is capped wherever text runs. */ :where(p, li, dd, blockquote) { overflow-wrap: break-word; text-wrap: pretty; } :where(.maars-main) :where(p, li, blockquote) { max-width: var(--maars-measure); } :where(strong, b) { font-weight: 700; } :where(img, svg, video, iframe, canvas) { max-width: 100%; } /* * The visually-hidden class. maars-core/inc/blocks.php names this as "the * theme's visually-hidden class" and puts the label a screen reader is still * owed inside it — "Next meeting: " before the computed date, now that the * printed eyebrow is gone. WordPress ships a .screen-reader-text of its own in * the block library, but a theme whose markup depends on a class must define * it: if that stylesheet is ever dequeued, the label must go quiet, not land * in the middle of the page. * * clip-path, not display:none and not width:0 — the text has to stay in the * accessibility tree and stay reachable to a screen reader's cursor. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } /* A table or a code block may be wider than the page; it gets its own scroller so the document body never does. */ :where(.maars-main) :where(pre, table) { display: block; max-width: 100%; overflow-x: auto; } /* Links. Navy is NOW, and an underline is not decoration — it is the second channel, for a reader who cannot see the hue at all. */ :where(a) { text-underline-offset: 0.18em; text-decoration-thickness: max(1px, 0.06em); } :where(.maars-main, .maars-header, .maars-footer) :where(a:hover) { text-decoration-thickness: max(2px, 0.11em); } /* * FOCUS. 3px solid navy, 2px offset, on every interactive element, never * removed and never reduced to a colour change. The halo is a second ring in * the opposite value that fills the offset gap, so the outline is still a ring * when the element itself is navy. */ :where(a, button, summary, input, select, textarea, [tabindex], [role="button"]):focus-visible { border-radius: var(--maars-radius-control); outline: 3px solid var(--maars-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--maars-focus-halo); } /* A browser without :focus-visible still gets the ring. */ @supports not selector(:focus-visible) { :where(a, button, summary, input, select, textarea, [tabindex]):focus { outline: 3px solid var(--maars-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--maars-focus-halo); } } /* * 48px targets wherever a finger is expected. The brief's floor, and the * reason it is 48 and not 44: a 70-year-old thumb on a bus. * * A LINK INSIDE A SENTENCE IS NOT IN THIS LIST. "Check meetings and * events before you rely on it" is prose, and giving that anchor a 48px * box would open a hole in the line it sits in and push the sentence apart. * WCAG 2.5.5 exempts an inline link for exactly that reason. What is in the * list is everything a reader aims at: navigation, buttons, pagination, a term * in a facet list, an entry's title, the masthead, a breadcrumb. */ :where(.wp-block-navigation) :where(a, button), .maars-skywave__control, :where(.maars-main, .maars-footer) :where(.wp-block-button__link, .wp-element-button), :where(.maars-dateline, .maars-next-meeting, .maars-fact, .maars-skywave) :where(button, [role="button"], summary) { align-items: center; display: inline-flex; justify-content: center; min-height: var(--maars-target); min-width: var(--maars-target); padding-inline: 0.9rem; } /* * And the targets that are text rather than controls: the masthead, an entry's * title in a list, a term, a breadcrumb, the link out of a log row. These get * the 48px height and nothing else — no centring, no minimum width and no side * padding, because each one is a line of type that has to start where the type * around it starts. The height is what a finger needs; the rest would move the * words. */ .maars-masthead__wordmark a, .maars-entry__title a, .maars-index__title a, .maars-log__title a, .maars-log__kind a, .maars-doc-record__kind a, .maars-doc-record__yearterm a, .maars-breadcrumb a, .maars-doc-record__back a, .maars-doc-nav a, .maars-news__more a, /* The one link out of the on-the-air section. Measured at 1440px before it was added here: 565 x 27px, the only control on the front page under the 48px floor — everything else on that page already cleared it. It is a standalone line of type, so it belongs in this list rather than in the control list above. */ .maars-onair__more a, .maars-termlist a { align-items: center; display: inline-flex; min-height: var(--maars-target); } /* Form controls in the archive filters are targets too, and a 16px input is what makes iOS zoom the page on focus. */ :where(.maars-main) :where(input[type="search"], input[type="text"], select, button) { font-family: var(--maars-font-text); font-size: var(--maars-text-body); min-height: var(--maars-target); } /* --------------------------------------------------------------------------- * 3. THE COLUMN. One centred column, one left edge, one right edge, at every * width. This section is the whole layout. * * THE BUG THIS FIXES. Revision 1's archive page sat left of centre with a dead * gutter down the right-hand side, and the cause was two column widths on one * page. WordPress's constrained layout gives a band's children * `max-width: var(--wp--style--global--content-size)` with auto side margins, * while a band marked alignwide gets the much larger wide-size. So the * masthead's text was centred inside a 68ch column starting 241px in, and the * filter panel and the log beneath it started at 64px and ran to 1216px. Two * left edges, 177px apart, and a right-hand gutter that belonged to neither. * * Worse, content-size was declared in `ch`, which resolves against each * element's OWN font size: the 18px eyebrow measured 735px and the 20px lede * measured 797px, so even the centred column had a ragged right edge. * * THE FIX. Both layout sizes become 100%, so every band and every child of a * band fills the one column that .maars-main establishes, and WordPress's auto * side margins resolve to zero because nothing is narrower than its parent any * more. Text is held to a reading measure by section 2 instead — a cap on the * paragraph, not a centring of it, so a paragraph starts at the same left edge * as the heading above it. `:root:root` is 0-2-0 and beats the `:root` block * WordPress prints these in, whichever order the two stylesheets load in. * * functions.php passes this file to add_editor_style(), so these two lines also * take effect inside the block editor. That is intended: the editor then lays a * band out the way a visitor will see it. Anyone who wants the editor's content * width back changes it here, in one place, and gets the front end with it. * ------------------------------------------------------------------------- */ :root:root { --wp--style--global--content-size: 100%; --wp--style--global--wide-size: 100%; } /* * THE SIDE INSET. The header and footer bands are full-bleed, so the hairline * that closes each of them runs the width of the window; main is the column * itself. Each of the three is inset by one gutter, and nothing inside them * adds a second one. */ .maars-main > *, .maars-footer { padding-inline: var(--maars-gutter); } /* * THE HEADER IS NOT IN THAT LIST ANY MORE, AND THAT IS REVISION 3. * * The masthead band is a receiver face and has to reach both edges of the * window: an instrument that stops 32px short of the glass is a picture of an * instrument. A padded header cannot hold one — the band would either inherit * the inset or have to fight its way out of it with a negative margin against * WordPress's `margin-left: auto !important`, which is a fight nobody wins * cleanly. * * So the region stops being padded and each ROW inside it carries its own * inset instead: the navigation gets the gutter and the column cap below, the * band opts out of both, and the identity inside the band re-applies them so * the callsign still starts on the one left edge that every heading, every log * row and the colophon start on. Measured at 1440px: 176px, all of them. */ .maars-main { margin-inline: auto; max-width: var(--maars-column); width: 100%; } /* * And the cap, which is the part revision 1 had wrong. The content of the * header and of the footer is capped to the COLUMN MINUS ITS GUTTERS — that * is, to exactly the width of main's content — so the masthead, every band on * the page and the colophon share one left edge and one right edge at every * viewport width. Capping them to the full column instead, as revision 1 did, * put the footer's columns a whole gutter to the left of everything above * them: a 32px step at the bottom of every page. * * `width: 100%` matters: without it a grid or flex parent can size one of * these to its content and the auto margins then centre a column narrower than * the page, which is the defect at the head of this section in miniature. */ .maars-footer > * { margin-inline: auto; max-width: calc(var(--maars-column) - 2 * var(--maars-gutter)); width: 100%; } /* * A row of the header. Same content width as main — the full column, padded by * one gutter — rather than main's width with the gutter already subtracted, * because this element now carries the padding itself. Below about 1150px both * resolve to the viewport minus two gutters, which is why the navigation keeps * its inset at 390px where revision 2's rule would have left it flush against * the glass the moment the header stopped being padded. */ .maars-header > * { margin-inline: auto; max-width: var(--maars-column); padding-inline: var(--maars-gutter); width: 100%; } /* And the one row that is not a row: the band. It opts out of both. */ .maars-header > .maars-masthead { /* The masthead stays in the page column so the identity lines up with every other heading on the site. Only the two painted layers below bleed. */ margin-inline: 0; max-width: none; padding-inline: 0; width: auto; } /* * A band's own content also fills the band. This repeats the fix above for the * case where WordPress's layout stylesheet is not present at all — the * standalone harnesses in tests/ load this file with no WordPress around it — * and it is written with :where() so that any component rule below, and any * reading measure, still wins. */ :where(.maars-main, .maars-header, .maars-footer) :where(.is-layout-constrained, .is-layout-flow, .wp-block-column) > :where(div, section, aside, figure, form, ul, ol, nav, h1, h2, h3, h4, hr) { max-width: 100%; } /* * AND THE LEFT EDGE ITSELF. The first of this file's three !important * declarations, and the one that finishes the defect described above. * * WordPress's constrained layout does not only cap a child's width, it centres * it: `margin-left: auto !important; margin-right: auto !important`, with the * !important in core, where it has been since 5.9. So the moment a paragraph * carries a reading measure of its own — which every paragraph on this site * does, because a 1,088px line is unreadable — that paragraph is centred * inside its band while the heading above it is not, and the page grows a * second left edge and a dead gutter down the right. That is precisely the * defect: on the archive the heading sat at 112px, the lede at 207px and the * document list at 80px. Three left edges on one page. * * A measure is a CAP on a line of text, not an instruction to centre a block, * and there is no way to say so over an !important except with one. So: inside * the three page regions, a child of a constrained container is flush. Its * measure still holds, because this touches margins and nothing else. */ .maars-main > *, :is(.maars-main, .maars-header, .maars-footer) :where(.is-layout-constrained) > * { margin-inline: 0 !important; } /* --------------------------------------------------------------------------- * 4. Motion. ONE curve and ONE duration: 200ms on cubic-bezier(.2,.7,.3,1), * and only on a change the reader asked for — a hover, a focus, a press. * * Nothing animates on load. Nothing animates on scroll: there are no fade-ups * here, because a page that withholds its own content until the reader scrolls * far enough is a page that is slower to read than a static one, and on a phone * in a parking lot it is a page that never finishes. No block lifts on hover, * because a hover lift on everything is a page where nothing is raised. * * The single ambient motion on the site is the waterfall in the masthead, and * it is decorative, aria-hidden and slow — one frame every 80ms, not sixty a * second. Under prefers-reduced-motion it draws one still frame and stops, and * everything else here stops too, including anything a block or the editor * brought with it. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-delay: -1ms !important; /* beats an inline/animated block style */ animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-delay: 0ms !important; transition-duration: 0ms !important; } } /* =========================================================================== * 5. THE LOG LINE. * * One recurring row in real logbook conventions: fixed columns, tabular * figures, slashed zeros, a hairline between entries. It carries the archive * index and the record strip on a single document. It encodes that this * Society keeps records, and it does it with rules and alignment rather than * with boxes. The one bold element on the site is the propagation scene in * section 9; a log row that competed with it would be a log row calmed. * * It no longer carries the computed meeting or the freshness chip. Both were * facts dressed as table rows, under labels in capitals, and neither is a row * in a list of anything. See sections 6 and 8. * * --------------------------------------------------------------------------- * THE VOCABULARY, which is shared with maars-core/inc/blocks.php (which * documents the same names at the top of that file) and with the block * templates. Two shapes, because a log has two: * * A COLUMNED LOG — many entries, the same fields in the same order. * .maars-log the group. Sets --maars-log-columns for everything * inside it. * .maars-log__head the ruled column head. Hidden below the breakpoint, * where each field labels itself instead. * .maars-log__col one heading in that head (+ --col-date, --col-type, * --col-title). * .maars-log__entries the list the rows sit in. * .maars-log__row one entry. Grid, aligned to the head above it. * .maars-log__date, __kind, __title the three fields. * .maars-log__pagination the numbered control under the list. * * A LABELLED LINE — one record, a field at a time. Usable standalone: the * skywave band list is a group of these with no .maars-log__row anywhere, so * NONE of the line rules are scoped under .maars-log. * .maars-log__line one line. The field name inside it is a * .maars-fieldname; the value is whatever the template * puts there. * .maars-log__header a strip of such lines above a document. * .maars-log__cell one label-over-value pair inside that strip. * * Column widths are a custom property, so a template sets its own shape * without a new class: --maars-log-columns on the .maars-log element. The * default is the archive's — date, type, document. * * The figure span, .maars-fig, is emitted by the plugin around every callsign, * frequency, tone, offset, date, day count and dollar amount. It is what puts * a figure in the data face wherever it appears, including inside a sentence. * ======================================================================== */ /* * THE FIGURE, and the whole of the data face. * * Fira Code, because its zero is natively slashed — the Society writes its * callsign KSØMAN and the type honours it — and tabular, because a column of * figures that does not line up is a column nobody checks. * * A FIGURE IS A CALLSIGN, A FREQUENCY, A TONE, AN OFFSET, A GRID SQUARE, A * COUNT OR AN AMOUNT OF MONEY. It is nothing else. Revision 1 put the data * face on whole elements — the archive's Date and Type columns, the news date, * the band list, the computed meeting — and the result was prose set in a * monospace: "Friday, October 9, 2026 at 6:30 P.M." reading like a part * number, and the word "Minutes" reading like a file name. A date written out * in words is a sentence. * * So the face is applied to two things and no others: .maars-fig, the span the * plugin wraps a figure in, and , which is what a template writes round * a figure inside a sentence.