/* =========================================================================== GYM JUNKSTERS — src/assets/styles.css Round four. Codename CLEARANCE. Implements DESIGN-PLAN.md, which REPLACES DESIGN-SYSTEM.md. Where the two disagree, DESIGN-PLAN.md wins. THREE IDEAS CARRY THIS ROUND. Every rule in this file serves one of them: 1. THE FOLD IS THE JOB. The home page opens on a full-bleed photograph you drag to clear. Not a headline about hauling — the hauling, under your thumb. §08. 2. THE PAGE CLEARS AS YOU SCROLL. Padding grows, rules thin, gaps open, the measure widens and — the mechanism nobody expects — the display letterforms get WIDER band by band, 105% to 125%. One six-step ladder, `.cl-1` … `.cl-6`, drives all of it. §07. 3. THE TYPE IS THE CLIENT'S. Teko for headlines, in SENTENCE CASE, never condensed, never uppercase. Its width axis IS the mechanism for (2), so the typographic decision and the structural one are one decision. READING ORDER 00 @property, @font-face 01 Tokens + field context 02 Reset 03 Base typography 04 Utilities 05 Controls — buttons 06 Chrome — header, nav, mobile panel, breadcrumbs 07 Band system + the clearance ladder 08 The fold + the .ba drag-to-compare slider <- the signature 09 Home bands 2–11 10 Inner pages — hero, quick answer, prose, tables, figures 11 Blog — post, aside, related, zips 12 Forms 13 Footer + call bar 14 Motion 15 Print AUTHORING RULES (DESIGN-PLAN §6.8) - Selector specificity stays flat: one class, optionally compounded with an `.is-*` state or a field / clearance modifier. - No element-type selectors for LAYOUT. Element selectors appear only for typography defaults, where any component class outranks them. - Band padding is set in exactly ONE place: `.band{padding-block:var(--pad)}`. No component sets its own band padding. That is how round three's paddings started cancelling each other out. - Mobile-first. Every media query is `min-width`, at 560 / 720 / 900 / 1100 / 1400 (plus the 821 complement of the call bar's ≤820). - Every animation and transition sits inside `@media (prefers-reduced-motion: no-preference)`. - PROGRESSIVE ENHANCEMENT IS ONE-DIRECTIONAL. The no-JS state is the DEFAULT here. Everything JS-dependent is nested under `html.js-ba`, `html.js-chrome` or `html.js-reveal` — flags set by a ~120-byte inline script (js-ba / js-chrome / is-top) and by site.js (js-reveal). Never the reverse: a stylesheet that hides content and waits for a script to reveal it is a stylesheet that can lose the page. THE PALETTE IS THE CLIENT'S AND IT IS LOCKED. tools/palette-audit.mjs fails the build on any hex outside §01. Because it is locked — and because near-black-plus-one-hot-accent is itself one of the three looks AI design defaults to — LAYOUT, TYPE and THE SIGNATURE carry 100% of the distinctiveness. Nothing below may lean on colour to be interesting. And the other two defaults, guarded explicitly: - Cream + high-contrast serif + terracotta: THERE IS NO SERIF IN THIS FILE. Not one fallback stack contains one. - Broadsheet hairlines, radius 0, dense columns: held off by a photographic full-bleed fold, expanded sentence-case display type, no prose ever set in newspaper columns (the measure never drops below 58ch and no prose block is multi-column), and a bottom third that is mostly empty space. =========================================================================== */ /* =========================================================================== 00 @property + @font-face =========================================================================== */ /* --ba-pos is the whole slider. ONE registered custom property drives the clip-path on .ba-clip AND the transform on .ba-seam, which is what lets the seam nudge (§14) interpolate it as a real percentage instead of stepping between two strings. `inherits:true` is required: the runtime writes it on .ba-frame and both consumers are descendants. Without @property the slider still works — clip-path and transform read the unregistered value fine. Only the nudge degrades, to a jump. */ @property --ba-pos { syntax: ''; inherits: true; initial-value: 50%; } /* --------------------------------------------------------------------------- FONTS — the client's three, self-hosted, latin subsets, all OFL. Headlines Teko, 700 h1, h2, .band-h, .fold-lede, .close-tel Subheadings Montserrat, 600 h3, h4, labels, eyebrows, buttons Body Inter, 400 everything that is a sentence These were specified by the client, not chosen here, and the previous Saira / Asap / Martian Mono set was replaced wholesale. 123KB for all three against 165KB for the outgoing set, so the swap is also lighter. THERE IS NO FOURTH FAMILY. The old sheet used a mono face for labels, eyebrows, data rails and BEFORE / AFTER. Montserrat at --t-micro, 600, with the letterspacing in --tr-mono does that job, and a fourth family nobody asked for would work against a three-face brief. The token is --ff-sub; it was called --ff-mono when a monospace actually filled the role. THE WIDTH LADDER IS GONE. Saira had a wdth axis and `font-stretch: var(--dw)` widened the display face from 105% to 125% down the clearance ladder, which made "the page opens up as you scroll" a typographic fact and not just a padding change. None of these three families has a width axis, so the declaration would be dead CSS pretending to work. The ladder still runs on padding, gap, rule weight and measure — see §07. TEKO STOPS AT 700. Its weight axis is 300..700, so a display rule asking for 800 silently clamps. Every --ff-display rule here sets 700 explicitly. ONE url() PER FACE. The round-three sheet listed a filename that did not exist first; a `src` list does fall through, so it resolved and looked fine while burning a real request on a 404 on every cold load and swapping the display face in late. These three strings must match PRELOAD_FONTS in layout.mjs character for character. ------------------------------------------------------------------------- */ @font-face { font-family: 'Teko'; src: url('/assets/fonts/teko-var.woff2') format('woff2-variations'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('/assets/fonts/montserrat-var.woff2') format('woff2-variations'); font-weight: 300 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-var.woff2') format('woff2-variations'); font-weight: 300 800; font-style: normal; font-display: swap; } /* CLS insurance. `swap` paints in the fallback on frame one; these two are metric-matched so the fold's headline does not reflow when the real face lands. The LCP element is a photograph, but a headline that jumps two lines 400ms in reads as broken whatever the metric says. MEASURED, NOT ESTIMATED — tools/font-metrics.mjs, run against the real files with this site's own h1 as the sample string, because what is being matched is where THAT headline wraps. size-adjust is the number that matters: every text element here carries a NUMERIC line-height, so the line box comes from the number and the ascent/descent overrides only shift the baseline inside it, but size-adjust changes glyph width and a changed wrap point relayouts everything under it. Arial is the target rather than a closer-but-rarer face. Machines that have Arial Narrow would already be near Teko; machines that do not fall through to Arial anyway, so Arial is the case that actually happens. Teko is 19% narrower than Arial at the same size, which is most of what makes it read as a display face. */ @font-face { font-family: 'Teko Fallback'; src: local('Arial'), local('Helvetica Neue'); size-adjust: 81.3%; ascent-override: 96.0%; descent-override: 48.0%; line-gap-override: 0%; } @font-face { font-family: 'Montserrat Fallback'; src: local('Arial'), local('Helvetica Neue'); size-adjust: 108.7%; ascent-override: 97.0%; descent-override: 25.0%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'); size-adjust: 96.7%; ascent-override: 97.0%; descent-override: 24.0%; line-gap-override: 0%; } /* THREE THINGS FONTS.MD MEASURED THAT THIS FILE HAS TO RESPECT — see src/assets/fonts/FONTS.md §4 for the measurements. 1. EVERY RULE THAT SETS --ff-display ALSO SETS font-weight. A variable font renders at its fvar default when no weight is given, which is not the weight anybody intends. Keep it that way. 2. TEKO'S NATURAL LINE BOX IS 1.440em (ascent 96% + descent 48%). Any element set in Teko that inherits `line-height: normal` opens up badly. Every rule here that sets --ff-display also sets an explicit line-height. 3. `→` (U+2192) AND `▸` (U+25B8) ARE NOT IN THE LATIN SUBSET of any of the three files. Nothing in this stylesheet types either one: the .ask marker and the .ba-grip chevrons are drawn from rotated borders, and the crumb separator is an ASCII slash. Templates filling .index-go and .band-more must use `›` (U+203A, present in all three), an inline SVG from ICON_PATHS, or nothing — a bare arrow falls back to a system font and renders as tofu on some Android builds. */ /* =========================================================================== 01 TOKENS + FIELD CONTEXT =========================================================================== */ :root { /* --- the client's five. LOCKED. May not be altered. --------------------- */ --ink: #000501; --orange: #FF713D; --cream: #FFF8EA; --grey: #6F6F6F; --peach: #FFAE82; /* --- derived, because three of the five fail contrast where they'd sit --- Measured, not estimated. Do not re-derive these. --orange on --cream is 2.59:1 -> --orange-ink 5.04:1 --grey on --ink is 4.09:1 -> --muted-ink 7.03:1 --grey on --cream is passable -> --muted-cream 5.51:1 and safer NEVER AS TEXT: orange on cream · peach on cream · cream on orange · grey on ink (large / UI only). Buttons are an orange fill with INK text. --orange-ink IS MEASURED AGAINST --cream-2, NOT --cream. There are two cream grounds, and the derived value only ever got checked against the lighter one. It was #BA522D: 4.59:1 on --cream, which passes, and 4.20:1 on --cream-2, which does not. Table headers are `color: var(--mark)` on `background: var(--panel)`, and --panel resolves to --cream-2 inside a .band-cream — so every table on the site shipped accent text below AA. Deriving against the DARKER ground makes the token safe on both: #B04D2A 5.04:1 on --cream · 4.62:1 on --cream-2 It is only ever text or a hairline on a cream field (--accent and --mark are defined nowhere else), so nothing sits on top of it and no fill ratio moves with it. */ --orange-ink: #B04D2A; --muted-ink: #979797; --muted-cream: #656565; /* --- surfaces and hairlines --------------------------------------------- */ --ink-2: #0A0F0B; --line-dark: #1C2320; --cream-2: #F6EEDD; --line-light: #E4DAC6; /* The thinned hairline the bottom of the page uses. Alpha rather than a new hex, because the rule has to disappear INTO whichever field it is drawn on, and at cl-5/cl-6 the point is that you can barely see it. */ --line-dark-soft: rgba(255, 248, 234, .10); --line-light-soft: rgba(0, 5, 1, .09); /* Two pre-computed fills. --orange-dim --orange at 14% over --ink. Ghost-button hover ground on ink; --orange reads off it at 6.52:1. --orange-flat the hover value for an orange fill on engines with no color-mix(). --ink on it is 5.68:1. Cream never is. */ --orange-dim: #241409; --orange-flat: #DB6235; --focus: #FF713D; /* rgb triplet of --ink, for the fold's gradient scrims (§08). */ --scrim: 0, 5, 1; /* --- families. NO SERIF ANYWHERE, including in the fallback stacks. ----- */ --ff-display: 'Teko', 'Teko Fallback', system-ui, sans-serif; --ff-sub: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif; --ff-body: 'Inter', 'Inter Fallback', system-ui, sans-serif; /* --- type scale — 9 steps, fluid 360 -> 1440 ---------------------------- */ --t-mega: clamp(2.75rem, 1.17rem + 7.04vw, 7.5rem); /* 44 -> 120px .close phone, 404 */ --t-fold: clamp(2.5rem, 1.4rem + 4.6vw, 6rem); /* 40 -> 96px home h1 ONLY */ --t-h1: clamp(1.75rem, 1.25rem + 2.22vw, 3.25rem); /* 28 -> 52px inner-page h1 */ --t-h2: clamp(1.5rem, 1.17rem + 1.48vw, 2.5rem); /* 24 -> 40px band headings */ --t-h3: clamp(1.1875rem, 1.08rem + 0.46vw, 1.5rem); /* 19 -> 24px row titles */ --t-lead: clamp(1.125rem, 1.04rem + 0.37vw, 1.375rem); /* 18 -> 22px band sub, quick answer */ --t-body: clamp(1.03rem, 1rem + 0.14vw, 1.125rem); /* 16.5 -> 18px paragraphs */ --t-small: 0.9375rem; /* 15px captions, meta, legal */ --t-micro: clamp(0.72rem, 0.7rem + 0.09vw, 0.78rem); /* 11.5 -> 12.5px mono labels */ --lh-display: .95; --lh-h2: 1.04; --lh-h3: 1.22; --lh-lead: 1.45; --lh-body: 1.62; --lh-micro: 1.2; /* Sentence case needs far less negative tracking than a wall of caps did. */ --tr-display: -0.015em; /* 0.14em is the label letterspacing and it applies from 560px up. Below that it is 0.10em, and the reason is measured rather than aesthetic: the shipped file is the SemiExpanded cut (requesting only the wght axis from the css2 endpoint pinned wdth at its 112.5% default, so there is no width axis to move and font-stretch does nothing to it). Its glyphs are Montserrat is a geometric face with wide round forms, so a long label like "Licensed & insured · free quotes on site" eats horizontal space fast on a 360px screen. FONTS.MD §4.2: THE LEVER IS letter-spacing, NOT font-size — --t-micro is already compensating for the cap height and must not be nudged. */ --tr-mono: 0.10em; /* --- the measure ladder — it WIDENS down the page (§07) ----------------- */ --measure-1: 58ch; --measure-2: 62ch; --measure-3: 66ch; --measure-4: 70ch; /* --- clearance defaults, for anything that lives outside a band --------- */ --pad: clamp(3rem, 2rem + 3.4vw, 4.5rem); --gap: 1.5rem; --rule-w: 1px; --measure: var(--measure-3); /* --- containers --------------------------------------------------------- */ --wrap: 1240px; --wrap-narrow: 720px; --wrap-wide: 1440px; --gut: clamp(1.25rem, 4vw, 3rem); --hdr-h: 64px; /* --- the slider -------------------------------------------------------- */ --ba-pos: 50%; --ba-grip-y: 50%; /* --- motion, declared once so §14 has one place to tune ---------------- */ --ease-out: cubic-bezier(.22, .75, .3, 1); --ease-rise: cubic-bezier(.2, .8, .25, 1); --ease-nudge: cubic-bezier(.4, 0, .2, 1); --t-color: 120ms; --t-move: 160ms; /* The page ground is near-black, so native UI — scrollbars, date pickers, the select caret we do not draw — should render dark. Light fields flip it back below. */ color-scheme: dark; } @media (min-width: 560px) { :root { --tr-mono: 0.14em; } } @media (min-width: 900px) { :root { --hdr-h: 76px; } } /* --------------------------------------------------------------------------- FIELD CONTEXT Components are written against these variables rather than against a colour, so identical markup rules itself correctly on any of the three fields. This is the only reason §09 and §10 contain no `.band-cream .index-row {}` overrides at all. ------------------------------------------------------------------------- */ .band-cream, .band-cream2, .crumbs { --bg: var(--cream); --fg: var(--ink); --muted: var(--muted-cream); --rule-strong: var(--line-light); --rule-soft: var(--line-light-soft); --panel: var(--cream-2); --accent: var(--orange-ink); --accent-fill: var(--orange); --mark: var(--orange-ink); /* An orange focus ring on cream is 2.59:1 against the band — invisible exactly when it matters. The declared rule in §03 is still literally `outline: 3px solid var(--focus)`; the field re-points the variable at something that clears 3:1 by a mile. */ --focus: var(--ink); --field-bg: transparent; --field-bd: var(--grey); color-scheme: light; } .band-cream2, .crumbs { --bg: var(--cream-2); --panel: var(--cream); } /* =========================================================================== 02 RESET Small and modern. Not normalize — the handful of defaults that are actively wrong for this layout. =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Anchors land below the header instead of under it. Not motion — this applies whatever the motion preference is. */ scroll-padding-top: calc(var(--hdr-h) + 1rem); } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset, legend { margin: 0; } ul[class], ol[class] { padding: 0; list-style: none; } /* Replaced content is block-level and never wider than its column. This one rule is what stops a 1536px job photo scrolling the page sideways. */ img, picture, svg, video, canvas, iframe { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; } table { border-collapse: collapse; border-spacing: 0; } summary::-webkit-details-marker { display: none; } [hidden] { display: none !important; } /* =========================================================================== 03 BASE TYPOGRAPHY =========================================================================== */ body { background: var(--ink); color: var(--cream); font-family: var(--ff-body); font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); /* Greyscale AA specifically because this site is dark-first: on a near-black ground subpixel AA fattens the stems and the page reads muddy. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Room for the fixed call bar. Cancelled at 821px in §13. */ padding-block-end: env(safe-area-inset-bottom, 0px); /* Belt and braces against a sideways scroll — every wide block already has its own overflow container. `clip`, not `hidden`: `hidden` makes the body a scroll container in some engines, which silently kills sticky inside. */ overflow-x: clip; } /* The header only becomes fixed once the chrome flag is set, so the offset it needs only exists then. With JS off the header is in normal flow and this padding would be a 64px hole at the top of every page. */ html.js-chrome body { padding-block-start: var(--hdr-h); } /* THE HOME PAGE KEEPS THE HEADER OFFSET. It used to be zeroed here, because the old fold was a full-bleed photograph that deliberately ran under the transparent header. The fold is now a contained carousel, so zeroing the offset just slid the h1 up underneath the header — "Same-day" was clipped at 390 and the whole first line overlapped at 768. Nothing bleeds to the top edge any more, so nothing needs the offset removed. */ /* --- display headings --------------------------------------------------- Teko, 700, SENTENCE CASE. There is no `text-transform: uppercase` on a heading anywhere in this file, at any size, on any page. The only uppercase on the site is Montserrat at --t-micro. The display face no longer widens down the page: --dw and font-stretch are gone with Saira, because none of the client's three families has a width axis. What is left of the ladder is padding, gap, rule weight and measure. For the record, --dw ran 105% in the fold and 125% in the last band, set once per band by the clearance ladder (§07) and inherited from there. Nobody will name the mechanism; they will say the page opens up. Sentence case is also what keeps a headline readable over photography — a wall of caps at 76px turns into a grey brick, while ascenders and descenders keep a silhouette the eye can still read shapes off. */ h1, h2, .band-h, .h2 { font-family: var(--ff-display); font-weight: 700; letter-spacing: var(--tr-display); line-height: var(--lh-h2); text-wrap: balance; color: var(--fg); } h1 { font-size: var(--t-h1); max-width: 20ch; line-height: var(--lh-display); } h2, .h2 { font-size: var(--t-h2); max-width: 26ch; } /* Subheadings. Montserrat SemiBold, per the client's type list. */ h3, h4, .h3 { font-family: var(--ff-sub); font-weight: 600; letter-spacing: -0.005em; } h3, .h3 { font-size: var(--t-h3); max-width: 30ch; line-height: var(--lh-h3); } h4 { font-size: 1.05rem; max-width: 32ch; line-height: var(--lh-h3); } /* h5 / h6 are the mono label level. Data and labels, never a sentence. */ h5, h6 { font-family: var(--ff-sub); font-size: var(--t-micro); font-weight: 600; line-height: var(--lh-micro); text-transform: uppercase; letter-spacing: var(--tr-mono); color: var(--muted); } p { text-wrap: pretty; } /* PROSE FLOW. The reset zeroes margin on everything, which is right for components that own their rhythm and wrong for running copy. Service sections and blog bodies put

,