/* ===== Wideplate — shared site styles ===== Loaded by every page. Holds the three things all four pages genuinely share: the palette/type base, the subpage header, and the footer. This file is the fix for the old hand-copy problem: the footer used to be the same inline-styled markup pasted into four files, so a change to one silently drifted from the other three. The MARKUP is still duplicated — fixing that needs includes or a build step, which this site deliberately does not have — but the styling now lives in one place. NOT here, on purpose: the preloader's critical CSS, which stays inline in each page's so it paints before anything else can. */ /* ---- Base ---- */ /* ===== General Sans, self-hosted ===== Was loaded from api.fontshare.com. That host resolves to two IPs and one of them is a blackhole: curl timed out 3/3 at 20s with the connection never completing, and Chrome (which races both) took 285ms / 1184ms / 300ms / 339ms / 4235ms across five cold loads, against 40-105ms for Google Fonts on the same connection. Since General Sans is the body and UI face on every page, that is the whole site's text sitting in Arial for up to four seconds, and indefinitely on any client that does not retry the dead IP. Same origin now, so it cannot stall independently of the page itself, and it costs one fewer DNS + TLS handshake. Four weights, 90KB total, already Latin subsets from Fontshare's own webfont kit — no further subsetting needed. Licence: ITF Free Font License. Free for commercial use, self-hosting is an explicitly supported distribution route; reselling or redistributing the font files is not. We do neither. The .woff format is deliberately not carried: every browser that supports :focus-visible and 100lvh, which this site already requires, supports woff2. */ @font-face { font-family: 'General Sans'; src: url('../fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('../fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('../fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('../fonts/general-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --gold: #D9A441; --gutter: clamp(24px, 4vw, 96px); } html { background: #081F17; } body { margin: 0; background: #F4EEE1; color: #14241D; font-family: 'General Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; } a { color: #0F362C; } /* Amber is the hover colour for a TEXT link. Pill buttons are elements too, and they own their label colour: repainting a gold pill's label amber put amber on gold, which is roughly 1.6:1 and effectively unreadable. The :not() is what keeps a global text-link rule from reaching into buttons — without it, every filled button ever added has to remember to override this one declaration, and the first one that forgets ships an invisible label. */ /* --wl-link-hover, not a literal, because ONE amber cannot serve both backgrounds: measured, #C9862B is 5.69:1 on the dark green but only 2.62:1 on the cream, and darkening it far enough to pass on cream (#8F5E1E, 4.80:1) drops it to 2.85:1 on the dark. So the cream value is the default and the dark sections re-declare the lighter one, exactly the way --wl-ring already works two rules down. Both are text-link hover colours only; the pills own their label colour. Re-measure before changing either. */ :root { --wl-link-hover: #8F5E1E; } .wl-foot, .wl-pp-head, #top, .wl-visit, .wl-nav, .wl-mobpanel, #combos { --wl-link-hover: #C9862B; } a:not([class*="wl-btn"]):not([class*="-dir"]):hover { color: var(--wl-link-hover); } /*