/* ========================================================================== Conk Factor — design tokens ========================================================================== NOTHING HERE WAS INVENTED. Every value below was lifted from `../bogfactor-site/styles.css`, and the comment beside each one names the line it came from. When a value looks wrong, go and read that line: the original carries the reasoning, including the contrast ratios that decided the -deep variants. That provenance comment is the whole point of this file. It is what makes the two codebases legible to each other, and it is what makes this maintainable next September when somebody picks it up cold. The variable NAMES are kept verbatim too, `--bog-` prefix and all, even though this is a different site. A colour called `--bog-brown` in both places is one colour; a colour called `--conk-brown` here would be a fork waiting to happen. Conk Factor diverges from Bog Factor in COMPOSITION and TEXTURE — layout, density, the map's dominance of the page, the hand-drawn iconography, the animation. It does not diverge in primitives. That divergence lives in `styles.css`, not here. The one sanctioned exception is the `--conk-map-*` block at the foot of this file. Where the inherited palette meets the map, the map wins on legibility, and each deviation is written down with its reason. That block is scoped to map furniture — pins, markers, controls — and nothing else in the app is restyled around it. TYPEFACES load exactly as they do on bogfactor.co.uk — same faces, same mechanism, same preconnects. Copy this block into the of every page, before this stylesheet: Source: bogfactor-site/index.html:26-30. Linked from the page head rather than @import-ed here, deliberately — an @import would block this file's parse. Do not swap the self-hosted-by-CDN Morris Roman for a Google Fonts equivalent; it is Steffmann's revival of William Morris's Golden/Troy type and the substitutes are not the same lettering. ========================================================================== */ :root { /* ---- brand palette --------------------------------------------------- The brand hues are unchanged from Bog Factor. The -deep variants exist so small text and button fills clear WCAG AA (4.5:1); the originals stay for large type, fills and decoration, where they already pass. Contrast figures below are quoted from the source, not re-measured here. */ --bog-brown: rgb(135, 89, 33); /* bogfactor-site/styles.css:17 — primary. 4.71:1 on paper */ --bog-brown-soft: rgba(135, 89, 33, 0.45); /* :18 — field borders, hairline fills */ --bog-brown-hair: rgba(135, 89, 33, 0.2); /* :19 — the lightest rule that still reads */ --bog-red: rgb(218, 72, 72); /* :20 — accent, large + decorative only */ --bog-red-deep: rgb(166, 42, 42); /* :21 — accent for text/fills. 5.49:1 on paper */ --bog-green: rgb(20, 92, 40); /* :22 — the one green. 6.17:1 either way on wheat */ --bog-plum: rgb(130, 71, 81); /* :23 — visited links, meta. 5.52:1 on paper */ --bog-ink: rgb(54, 50, 41); /* :24 — body text. 9.96:1 on paper */ --bog-lime: #becd79; /* :27 — sampled out of the original artwork */ /* ---- surfaces -------------------------------------------------------- `--bog-paper-veil` is translucent because on bogfactor.co.uk it sits over a fixed cover photograph. Over map tiles it is not legible — see the `--conk-map-*` block at the foot of this file. */ --bog-wheat: wheat; /* bogfactor-site/styles.css:30 */ --bog-paper: #f7e0c1; /* :31 */ --bog-paper-veil: #f7e0c1be; /* :32 — translucent vellum plate */ --bog-paper-solid: #f7e0c1ee; /* :33 — near-opaque plate */ --bog-toolbar: rgba(245, 222, 179, 0.95); /* :34 */ /* Opaque field fill. Hardcoded in the source at the one place it is used; lifted to a token here because the submission form needs it repeatedly. "Opaque, so the field is legibly a field against the paper rather than a tint of it." */ --bog-field: #fffdf8; /* bogfactor-site/styles.css:1997 */ /* ---- spacing rhythm --------------------------------------------------- */ --space-1: 4px; /* bogfactor-site/styles.css:37 */ --space-2: 8px; /* :38 */ --space-3: 12px; /* :39 */ --space-4: 20px; /* :40 */ --space-5: 32px; /* :41 */ /* ---- radii: three steps, applied consistently ------------------------- */ --radius-edge: 0; /* bogfactor-site/styles.css:44 — paper edges, plates */ --radius-soft: 6px; /* :45 — cards, inputs, images, modals */ /* The radio dock's width on the phone, where it is a disc with the station's name under it in the masthead's corner. Two rules need this number and must agree: the dock's own width, and the padding the masthead reserves so the event line does not run under it. The disc sets it, not the label — "EHFM" is about 35px of type at --text-xs and the 36px disc with its padding and border is 46px, so the word tucks under something already wider than itself and costs the event line nothing. */ --conk-dock-w: 52px; --radius-pill: 999px; /* :46 — chips and interactive pills */ /* ---- type ------------------------------------------------------------- Morris Roman ships in one weight only (900), so anything asking for bold gets it already and a `font-weight` on display type is a no-op. MedievalSharp is the second display face, reserved for "hand-lettered sign" moments — it is not a general-purpose UI face, and on bogfactor.co.uk it was pulled back from buttons, labels and the toolbar all at once for exactly that reason. */ --font-display: 'Morris Roman', 'Luminari', 'Papyrus', fantasy; /* bogfactor-site/styles.css:54 */ --font-script: 'MedievalSharp', 'Morris Roman', cursive; /* :55 */ --font-body: 'Noto Serif Gurmukhi', Georgia, serif; /* :56 */ --text-xs: 0.82rem; /* bogfactor-site/styles.css:58 */ --text-sm: 0.9rem; /* :59 */ --text-base: 1rem; /* :60 */ --text-md: 1.15rem; /* :61 */ --text-lg: 1.4rem; /* :62 */ --text-xl: 1.9rem; /* :63 */ --text-2xl: 2.6rem; /* :64 */ /* Line heights, read off the heading rules rather than tokenised at source (bogfactor-site/styles.css:180-204). Named here so the map panels can hold the same rhythm without each one guessing. */ --leading-display: 1.1; /* h1 — decorative face, tight, with padding reserved for descenders */ --leading-heading: 1.2; /* h3 */ --leading-body: 1.5; /* ---- z-index ladder --------------------------------------------------- Bog Factor's ladder, renumbered for this app's furniture but keeping the same order of magnitude per step so the two are comparable. The source ladder (bogfactor-site/styles.css:71-78) counts suns, a toolbar, two players and a modal; ours counts a map, its controls, a detail panel and a modal. Kept in one place so nothing has to guess. */ --z-map: 1; /* the Leaflet canvas itself */ --z-overlay: 10; /* things drawn over the map but under its controls */ --z-control: 20; /* basemap toggle, locate-me, audio */ --z-panel: 100; /* tree detail — desktop rail / mobile bottom sheet */ --z-modal: 400; /* submission flow. Matches the source's --z-modal:400 */ /* The header sits ABOVE the modal, which is unusual and deliberate. Getting people to the tournament is job number one, and the brief asks for the venue and date to be visible on every screen in every state — including while a modal is open. Below the scrim they are still legible but dimmed, which is not the same thing. ONE EXCEPTION, added at the client's instruction: below 768px a modal covers this, at --z-header + 2. A form with the keyboard up has no screen to spare, and holding it clear of a masthead that has itself scrolled away spent the top of the form on a dimmed view of the page behind. See § the forms as a full page in styles.css, which carries the full reasoning. */ --z-header: 500; /* wordmark + event line. Covered only by a phone modal */ /* ---- inherited interaction ------------------------------------------- The focus ring is site-wide and consistent on bogfactor.co.uk: 3px solid, 2px offset, brown on paper and ink on a plate. It appears at :456, :538, :715, :862, :948, :1031 and :1123 — seven places, one shape. Tokenised here so it stays one shape. */ --focus-ring: 3px solid var(--bog-brown); /* bogfactor-site/styles.css:456 */ --focus-ring-ink: 3px solid var(--bog-ink); /* :1123 — on a plate, where brown is too close */ --focus-offset: 2px; /* :539 — 2px is the site-wide offset; the 3px at :457 is the toolbar logo alone */ /* Transitions, as used across the button family and footer links. */ --ease-colour: 0.3s ease; /* bogfactor-site/styles.css:1096 */ --ease-push: 0.12s ease; /* :1096 — the physical press on :active */ /* ---- breakpoints ----------------------------------------------------- Recorded as comments, not custom properties: CSS variables cannot be used in media queries. Matching the source's ladder keeps the two sites breaking at the same places. min-width: 769px desktop bogfactor-site/styles.css:435 max-width: 768px tablet and below :2051 max-width: 480px phone :2298 max-width: 359px small phone :2381 */ /* ---- map furniture: documented deviations ---------------------------- Where the inherited palette meets the map, the map wins on legibility. Every value below is a deviation with a reason, and every one of them is scoped to map furniture — pins, markers, controls. Nothing else in the app is restyled around them. The constraint driving all of it: a pin must read against a pale watercolour wash AND a busy brown OS engraving. If it is illegible on one of them, that is a bug, not a taste issue. */ /* DEVIATION 1 — plates over tiles are opaque, not veiled. `--bog-paper-veil` (#f7e0c1be) is translucent by design, because on bogfactor.co.uk it sits over one fixed photograph. Over moving map tiles the same veil turns text into soup, and the tiles underneath change as you pan. Map controls and the tree panel use the solid plate instead. Same colour, different alpha — the hue is not touched. */ --conk-map-plate: var(--bog-paper-solid); /* DEVIATION 2 — pins carry an opaque halo. Brown-on-brown is invisible over the OS engraving. Every pin gets a ring of the opaque field cream inside the SVG, which is what separates it from both basemaps. This is an inherited colour (:1997) doing a new job. */ --conk-pin-halo: var(--bog-field); --conk-pin-ink: var(--bog-ink); /* pin outline — the darkest inherited value */ --conk-pin-fill: var(--bog-brown); /* the conker itself */ --conk-pin-selected: var(--bog-red-deep); /* selected state. -deep, not --bog-red: the bright red is decorative-only at this size */ /* DEVIATION 3 — the venue marker is the loudest thing on the map. Getting people to the tournament is job number one, so the Ground Floor marker takes the accent red at full strength. --bog-red is flagged "large + decorative only" at :20, which is exactly what this is: a big marker, never small text. */ --conk-venue-fill: var(--bog-red); --conk-venue-ink: var(--bog-ink); /* DEVIATION 4 — a drop shadow under map furniture. Nothing on bogfactor.co.uk casts a shadow; the flat woodcut look is part of it. Over tiles, though, a hairline shadow is what stops a pin dissolving into a busy engraving. Kept tight and warm rather than a generic grey blur, so it reads as ink bleed rather than as material design. */ --conk-map-shadow: 0 1px 2px rgba(54, 50, 41, 0.45); /* ---- DEVIATION 5: the access light ----------------------------------- Green, amber, red beside the word "Access:" on the tree panel, in the order of how much cheek getting to the tree takes. `--bog-green` and `--bog-red-deep` are inherited unchanged. AMBER IS NEW and is the only colour in this file with no line number beside it: bogfactor.co.uk has nothing between "fine" and "careful" because nothing on it needed a middle state. Picked to sit between the two inherited hues at the same weight and to hold 3:1 against the paper as a filled shape, which is the WCAG minimum for a non-text indicator. The colour is never the only signal. The same sentence is the control's aria-label and its tooltip, because roughly one man in twelve cannot tell the first two of these apart. */ --conk-access-open: var(--bog-green); --conk-access-ask: rgb(191, 122, 26); --conk-access-cheek: var(--bog-red-deep); /* ---- DEVIATION 6: you are here --------------------------------------- The stick figure dropped where the browser says the user is standing. It is not a pin and must never be mistaken for one, so it takes the one inherited green — the only map-furniture colour that is neither the trees' brown nor the venue's red, which is the whole point of it. Green at this weight is legible over both basemaps as a stroked figure with the same opaque halo every pin carries (DEVIATION 2). */ --conk-me-ink: var(--bog-green); --conk-me-halo: var(--conk-pin-halo); } /* ========================================================================== Inherited surface + interaction rules ========================================================================== §2 of the brief asks for the link, button and focus states to be inherited, and for the existing texture and border treatments — "these carry most of the character and are the cheapest thing to inherit". Those are rules, not values, so they live here rather than being reassembled from tokens in `styles.css`. Composition and layout belong in `styles.css`; this is the shared material both sites are made of. ========================================================================== */ /* ---- the vellum plate --------------------------------------------------- The signature surface: translucent paper plus a noise texture. This is the single most recognisable thing about bogfactor.co.uk, carried over intact. The base64 PNG below is copied byte-for-byte from bogfactor-site/styles.css:244 (the `.textbox` rule at :234). `.plate` here is `.textbox` there (:234). Renamed because this site's plates are map furniture rather than an article measure, and because a 900px `--measure` default would be nonsense over a map. */ .plate { padding: var(--space-5) var(--space-4); background-color: var(--bog-paper-veil); border-radius: var(--radius-edge); background-image: url(data:image/png;base64,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); } /* Over map tiles the veil is not legible — see DEVIATION 1. Same plate, same texture, opaque fill. */ .plate--solid { background-color: var(--conk-map-plate); } /* A plate's padding is the only thing that should set the space inside its edges, and by default it is not: a plate opening with a heading carries the heading's top margin ON TOP of the padding, giving ~39px above against 20px below. Zeroing the outer margins of the first and last children hands the spacing back to the padding. `> *` rather than named elements, so a plate opening with a

or a

is balanced too. bogfactor-site/styles.css:259-265. */ .plate > :first-child { margin-top: 0; } .plate > :last-child { margin-bottom: 0; } /* ---- links -------------------------------------------------------------- Green resting, plum visited, deep red on hover with an underline appearing. bogfactor-site/styles.css:208-228 (`.banner a`). The visited state matters: the source carries a note about a version where visited links on paper were effectively invisible (:871). */ a { color: var(--bog-green); text-decoration: none; } a:visited { color: var(--bog-plum); } a:hover { color: var(--bog-red-deep); text-decoration: underline; } /* ---- focus -------------------------------------------------------------- One shape everywhere. Applied broadly here rather than enumerated per component, which is how the source ended up with the same three lines in seven places. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* On a plate, brown sits too close to the surface to read as a ring. */ .plate :focus-visible, .btn:focus-visible { outline: var(--focus-ring-ink); } /* ---- the button family -------------------------------------------------- One shape for every button that does something on a plate. Sharp corners like the plate it sits on, MedievalSharp as the lettering, brown resting, deep red on hover, and a one-pixel physical push on :active. bogfactor-site/styles.css:1082-1125, collapsed from five selectors to one class. */ .btn { display: inline-block; padding: var(--space-3) var(--space-4); border: none; border-radius: var(--radius-edge); background-color: var(--bog-brown); color: var(--bog-wheat); font-family: var(--font-script); font-size: var(--text-base); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; /* transform is listed so the :active push actually eases */ transition: background-color var(--ease-colour), transform var(--ease-push); /* CTA labels stay on one line at desktop */ white-space: nowrap; } .btn:hover { background-color: var(--bog-red-deep); color: var(--bog-wheat); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled='true'] { /* opacity rather than a lightened fill: the old rgba(135,89,33,0.5) put wheat text at roughly 2:1. bogfactor-site/styles.css:2027-2030. */ opacity: 0.6; cursor: not-allowed; } /* ---- form fields -------------------------------------------------------- bogfactor-site/styles.css:1978-2020. The submission form is the one place this site asks anything of anybody, so it uses the inherited field exactly. Note the explicit focus ring: the source records that an earlier version used `outline: none` with only a border colour change, which is a very weak focus signal. */ .field label { display: block; margin-bottom: var(--space-1); color: var(--bog-brown); font-family: var(--font-script); font-size: var(--text-base); } .field input, .field select, .field textarea { width: 100%; padding: var(--space-2) var(--space-3); border: 2px solid var(--bog-brown-soft); border-radius: var(--radius-soft); background-color: var(--bog-field); color: var(--bog-ink); font-family: var(--font-body); font-size: var(--text-base); box-sizing: border-box; transition: border-color var(--ease-colour); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: var(--focus-ring); outline-offset: 1px; border-color: var(--bog-brown); } .field textarea { resize: vertical; min-height: 100px; } /* ---- screen-reader-only ------------------------------------------------- bogfactor-site/styles.css:133-143. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }