/* ============================================================ FONTS — self-hosted, latin subset only. Previously loaded from fonts.googleapis.com on every page view, which cost two extra DNS+TLS round trips before any text could paint and sent every visitor's IP and referring page to Google. Districts ask about that. Eight faces are DECLARED; a browser downloads only the ones a page actually uses, so this is not eight requests. Files live in assets/fonts/ — a subdirectory, which build.py's fingerprint_assets() skips, so these keep stable names while style.css itself stays content-hashed. The url()s below are relative to this file, so they survive that hashing. font-display:swap matches the old Google behaviour: text paints immediately in the fallback, then swaps. Never invisible. Source: @fontsource/oswald and @fontsource/inter 5.3.0 (the same upstream files Google serves). unicode-range is Google's own latin subset — anything outside it falls back to the next family in the stack rather than loading a second file. ============================================================ */ @font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap; src:url(fonts/oswald-400.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap; src:url(fonts/oswald-500.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap; src:url(fonts/oswald-600.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap; src:url(fonts/oswald-700.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url(fonts/inter-400.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url(fonts/inter-500.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url(fonts/inter-600.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url(fonts/inter-700.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ============================================================ BRADFORD FITNESS — Chino, CA Tokens: complete light palette on :root; dark redefines tokens only. ============================================================ */ :root{ --ground:#EDE9DF; --surface:#F7F5F0; --surface-2:#E3DED1; --ink:#101A20; --ink-2:#4B5A63; --ink-3:#5E686E; --rule:#D3CCBB; --rule-strong:#B9AF98; --panel:#0B1C28; --panel-2:#14303F; --panel-ink:#EDE9DF; --panel-ink-2:#9FB0B9; --panel-rule:#1E3D4E; --gold:#80631D; --gold-bright:#C9A85C; --gold-soft:#EFE3C6; /* UNUSED as of 3 Sept 2026 -- kept as the defined gold wash */ /* Focus ring. Two values because no single one clears 3:1 on both the cream ground and the navy panels: --gold #80631D is 4.66:1 on cream and --gold-bright #C9A85C is 7.63:1 on the panel. Elements on a dark surface override below. */ --focus:var(--gold); --shadow:0 1px 2px rgba(11,28,40,.06), 0 12px 28px -14px rgba(11,28,40,.22); /* ---- Type scale ---- There were 33 distinct rendered sizes, eleven of them between 12.5 and 17.5px. Nobody can see 14.5 against 15, but every new page had to pick one and the set kept growing, because sizes were written inline per section rather than chosen from a scale. These are the steps. Use a token; do not invent a size. */ --fs-4xs:10.5px; /* the smallest caps -- .sub, micro labels */ --fs-3xs:11.5px; /* eyebrow labels */ --fs-2xs:12.5px; /* meta, captions */ --fs-xs:13px; /* nav, small UI */ --fs-sm:14.5px; /* secondary text */ --fs-md:15.5px; /* prose inside components -- cards, panels, captions */ --fs-lg:17.5px; /* THE BODY DEFAULT. `body{font-size:var(--fs-lg)}` -- this is what an unstyled paragraph renders at. --fs-md used to be commented as "the default", which it never was. */ --fs-xl:19px; /* small display -- stat labels, pull numbers */ --fs-input:16px; /* NOT a design choice: iOS Safari zooms the whole page when a focused input is under 16px. Form controls only. */ --fs-h5:clamp(17px,1.9vw,20px); --fs-h4:clamp(22px,2.6vw,30px); --fs-h3:clamp(28px,3.8vw,42px); --fs-h2:clamp(30px,4.4vw,52px); --fs-h1:clamp(38px,6.6vw,84px); --fs-display:clamp(48px,8.4vw,108px); --maxw:1180px; --step:clamp(64px,7vw,110px); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ground:#08161F; --surface:#0F2634; --surface-2:#16323F; --ink:#E9E5DA; --ink-2:#A2B1B9; --ink-3:#8B9BA4; --rule:#1E3947; --rule-strong:#2C5064; --panel:#0F2634; --panel-2:#173445; --panel-ink:#E9E5DA; --panel-ink-2:#9FB0B9; --panel-rule:#274A5C; --gold:#C9A85C; --gold-bright:#DCC183; --gold-soft:#2A2415; --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -16px rgba(0,0,0,.7); } } :root[data-theme="dark"]{ --ground:#08161F; --surface:#0F2634; --surface-2:#16323F; --ink:#E9E5DA; --ink-2:#A2B1B9; --ink-3:#8B9BA4; --rule:#1E3947; --rule-strong:#2C5064; --panel:#0F2634; --panel-2:#173445; --panel-ink:#E9E5DA; --panel-ink-2:#9FB0B9; --panel-rule:#274A5C; --gold:#C9A85C; --gold-bright:#DCC183; --gold-soft:#2A2415; --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -16px rgba(0,0,0,.7); } *{box-sizing:border-box} body{ margin:0; background:var(--ground); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-size:var(--fs-lg); line-height:1.62; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:Oswald,"Arial Narrow",Impact,sans-serif; font-weight:600; } /* 700 was used 15 times against 600's 558 -- effectively one bold, so the top of the hierarchy had nowhere to go. h1 now carries it everywhere, matching what .hero h1 already did, which gives page titles a real step above section heads. */ h1{font-weight:700} h1,h2,h3,h4{ text-transform:uppercase; letter-spacing:.012em; line-height:1.02; text-wrap:balance; margin:0; } p{margin:0 0 1.1em} a{color:inherit} img{max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)} /* ---- Eyebrow / label utility ---- */ .eyebrow{ font-family:Oswald,"Arial Narrow",sans-serif; font-size:var(--fs-3xs);font-weight:600;text-transform:uppercase; letter-spacing:.22em;color:var(--gold); display:flex;align-items:center;gap:12px;margin:0 0 18px; } .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px} .on-panel .eyebrow{color:var(--gold-bright)} .on-panel .eyebrow::after{background:var(--panel-rule)} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:Oswald,sans-serif;font-size:var(--fs-sm);font-weight:600; text-transform:uppercase;letter-spacing:.1em; padding:15px 26px;text-decoration:none;border:1.5px solid transparent; transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .btn-primary{background:var(--gold-bright);color:#0B1C28;border-color:var(--gold-bright)} .btn-primary:hover{transform:translateY(-2px);background:var(--gold);color:var(--ground);border-color:var(--gold)} .btn-ghost{border-color:currentColor;color:inherit} .btn-ghost:hover{transform:translateY(-2px);background:var(--gold-bright);color:#0B1C28;border-color:var(--gold-bright)} .btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px} /* Every focusable thing gets the brand ring. Half the tab stops previously fell back to the browser default `outline:auto 1px black`, which on the navy footer is all but invisible. Specific rules above and below still win on specificity; this only catches what nothing else styles. */ a:focus-visible,button:focus-visible,summary:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:3px} /* Dark surfaces inside a light page need the brighter gold to clear 3:1. */ .hero a:focus-visible,.phero a:focus-visible,.on-panel a:focus-visible, footer.site a:focus-visible,footer.site summary:focus-visible, .sched a:focus-visible,.panel a:focus-visible{outline-color:var(--gold-bright)} /* ============================ HEADER ============================ */ header.site{ position:sticky;top:0;z-index:60; background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); } /* Skip link — WCAG 2.4.1 Bypass Blocks. Off-screen until focused, then parks itself over the header so a keyboard user can jump the 19-item nav. */ .skip{position:absolute;left:-9999px;top:0;z-index:200; background:var(--gold-bright);color:#0B1C28;padding:12px 20px; font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em; font-size:var(--fs-xs);font-weight:600;text-decoration:none;border:0} .skip:focus{left:12px;top:12px} .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:14px} .mark{display:flex;align-items:center;gap:12px;text-decoration:none} .mark .name{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-sm);line-height:1.1} .mark .sub{font-size:var(--fs-4xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600} /* Seven top-level items no longer fit at 24px in the 1180px wrap — the bar spilled and pushed real page overflow in two width bands. Tightened here rather than dropping a destination out of the nav. */ nav.top{display:flex;align-items:center;gap:18px} nav.top a{ font-family:Oswald,sans-serif;font-size:var(--fs-xs);font-weight:500;text-transform:uppercase; letter-spacing:.07em;text-decoration:none;color:var(--ink-2);padding:4px 0; border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s; } nav.top a:hover{color:var(--ink);border-bottom-color:var(--gold-bright)} .tel{font-family:Oswald,sans-serif;letter-spacing:.06em;font-size:var(--fs-sm);font-weight:600;text-decoration:none;color:var(--ink)} /* Desktop nav needs 1019px of bar to fit all seven items with the real webfonts (measured live, not in a sandbox — fallback fonts are wider and lie). The breakpoint sits at 1060px, not 1020px, so there are ~40px of headroom rather than one pixel. Adding a nav item eats into that: re-measure before you do. */ @media (max-width:1060px){nav.top{display:none}} /* ---- Grouped nav menu ---- The trigger is a real link to the Programs page, so with JS disabled the group is still a working destination and every child is reachable from there and from the footer. JS upgrades it to a hover/focus disclosure. */ .navgrp{position:relative;display:flex;align-items:center} .navgrp-t{display:inline-flex;align-items:center;gap:6px} .navgrp-t .caret{transition:transform .2s ease;opacity:.75;flex:none} .navgrp[data-open="1"] .navgrp-t .caret{transform:rotate(180deg)} nav.top .navgrp-t[data-in-section="1"]{color:var(--ink);border-bottom-color:var(--gold-bright)} .navgrp-m{ position:absolute;top:100%;left:-14px;z-index:80;min-width:19rem; background:var(--surface);border:1px solid var(--rule); box-shadow:var(--shadow);padding:8px;margin-top:10px; } .navgrp-m[hidden]{display:none} nav.top .navgrp-m a{ display:block;padding:11px 13px;border-bottom:0;text-transform:none; font-family:Inter,sans-serif;letter-spacing:0;font-size:var(--fs-sm);color:var(--ink-2); } nav.top .navgrp-m a b{ display:block;font-family:Oswald,sans-serif;font-size:var(--fs-xs);font-weight:600; text-transform:uppercase;letter-spacing:.09em;color:var(--ink);margin-bottom:2px; } nav.top .navgrp-m a span{display:block;font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.45} nav.top .navgrp-m a:hover{background:var(--surface-2);border-bottom:0} nav.top .navgrp-m a:hover b{color:var(--gold)} nav.top .navgrp-m a[aria-current="page"]{background:var(--surface-2);border-bottom:0} nav.top .navgrp-m a[aria-current="page"] b{color:var(--gold)} nav.top .navgrp-m a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:-2px} /* a hit-area bridge so the pointer can cross the gap without the menu closing */ .navgrp[data-open="1"]::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px} /* ============================ HERO ============================ */ .hero{background:var(--panel);color:var(--panel-ink);position:relative;overflow:hidden} .hero::before{ content:"";position:absolute;inset:0; background: radial-gradient(120% 90% at 12% 0%, rgba(201,168,92,.16), transparent 58%), radial-gradient(80% 70% at 100% 100%, rgba(201,168,92,.07), transparent 60%); pointer-events:none; } .hero-grid{ position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px); align-items:end;padding-block:clamp(56px,7vw,104px) clamp(40px,5vw,64px); } @media (max-width:960px){.hero-grid{grid-template-columns:1fr;align-items:start}} .hero h1{ font-size:var(--fs-display);font-weight:700;letter-spacing:-.012em; color:var(--panel-ink);margin:0 0 26px;line-height:.94; } .hero h1 .gold{color:var(--gold-bright)} .hero .lede{font-size:var(--fs-h5);color:var(--panel-ink-2);max-width:34em;margin:0 0 30px} .hero .lede strong{color:var(--panel-ink);font-weight:600} .creds{ display:flex;flex-wrap:wrap;gap:0;margin:0 0 30px; border-top:1px solid var(--panel-rule);border-bottom:1px solid var(--panel-rule); } .cred{padding:16px 26px 16px 0;margin-right:26px;border-right:1px solid var(--panel-rule)} .cred:last-child{border-right:0;margin-right:0;padding-right:0} .cred b{ display:block;font-family:Oswald,sans-serif;font-size:23px;font-weight:600; color:var(--gold-bright);line-height:1;font-variant-numeric:tabular-nums; } .cred span{display:block;font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:.16em;color:var(--panel-ink-2);margin-top:7px;font-weight:600} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px} .addr-line{ font-size:var(--fs-sm);color:var(--panel-ink-2);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center; } .addr-line a{color:var(--gold-bright);text-decoration:none;border-bottom:1px solid transparent} .addr-line a:hover{border-bottom-color:var(--gold-bright)} /* schedule card in hero */ .sched{ background:var(--panel-2);border:1px solid var(--panel-rule);padding:26px 26px 20px; } .sched h2{font-size:var(--fs-md);letter-spacing:.16em;color:var(--panel-ink);margin:0 0 4px} .sched .note{font-size:var(--fs-2xs);color:var(--panel-ink-2);text-transform:uppercase;letter-spacing:.12em;margin:0 0 18px;font-weight:600} .srow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--panel-rule);font-size:var(--fs-sm)} .srow:first-of-type{border-top:0} .srow .g{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--panel-ink);font-weight:500} .srow .g small{display:block;font-family:Inter,sans-serif;text-transform:none;letter-spacing:0;color:var(--panel-ink-2);font-size:var(--fs-2xs);font-weight:400;margin-top:2px} .srow .t{text-align:right;color:var(--gold-bright);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:var(--fs-xs)} /* ============================ SECTIONS ============================ */ section{padding:var(--step) 0} .on-panel{background:var(--panel);color:var(--panel-ink)} .on-panel h2,.on-panel h3{color:var(--panel-ink)} .on-panel p{color:var(--panel-ink-2)} .sec-head{max-width:44rem;margin-bottom:clamp(34px,4vw,54px)} .sec-head h2{font-size:var(--fs-h2);margin-bottom:16px} .sec-head p{font-size:var(--fs-lg);color:var(--ink-2)} .on-panel .sec-head p{color:var(--panel-ink-2)} /* ---- Differentiator band ---- */ .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center} @media (max-width:900px){.two{grid-template-columns:1fr}} .pull{ font-family:Oswald,sans-serif;text-transform:uppercase;font-weight:600; font-size:var(--fs-h3);line-height:1.08;letter-spacing:.005em;color:var(--ink); border-left:3px solid var(--gold-bright);padding-left:22px;margin:0 0 22px; } .on-panel .pull{color:var(--panel-ink)} /* ---- Program cards (the binder) ---- */ .programs{display:grid;gap:2px;background:var(--rule)} .prog{ background:var(--surface);padding:clamp(26px,3.4vw,42px); display:grid;grid-template-columns:150px 1fr 230px;gap:clamp(20px,3vw,44px);align-items:start; transition:background .2s ease; } .prog:hover{background:var(--surface-2)} @media (max-width:900px){.prog{grid-template-columns:1fr;gap:18px}} .prog .band{ font-family:Oswald,sans-serif;font-weight:700;font-size:var(--fs-h3); line-height:.95;color:var(--gold);text-transform:uppercase;font-variant-numeric:tabular-nums; } .prog .band span{display:block;font-size:var(--fs-3xs);letter-spacing:.18em;color:var(--ink-3);font-weight:600;margin-top:9px;line-height:1.4} .prog h3{font-size:var(--fs-h4);margin:0 0 12px;color:var(--ink)} .prog p{color:var(--ink-2);font-size:var(--fs-md);margin-bottom:0} .spec{border-left:1px solid var(--rule);padding-left:clamp(18px,2.4vw,28px)} @media (max-width:900px){.spec{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:18px}} .spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:var(--fs-xs)} .spec dt{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:var(--fs-3xs);color:var(--ink-3);font-weight:600;padding-top:3px} .spec dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums} .spec dd b{font-family:Oswald,sans-serif;font-size:var(--fs-lg);font-weight:600;color:var(--gold)} /* ---- Season logic ---- */ .season{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--panel-rule);margin-top:8px} @media (max-width:820px){.season{grid-template-columns:1fr}} .scell{background:var(--panel-2);padding:26px 24px} .scell .k{font-family:Oswald,sans-serif;font-size:var(--fs-3xs);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);font-weight:600;margin-bottom:12px} .scell .v{font-family:Oswald,sans-serif;font-size:var(--fs-xl);text-transform:uppercase;color:var(--panel-ink);letter-spacing:.03em;margin-bottom:8px;line-height:1.15} .scell p{font-size:var(--fs-sm);margin:0;color:var(--panel-ink-2)} /* ---- Homeschool ---- */ .hs{background:var(--surface);border:1px solid var(--rule);padding:clamp(28px,4vw,54px)} .tiers{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--rule);margin-top:26px} @media (max-width:760px){.tiers{grid-template-columns:1fr}} .tier{background:var(--ground);padding:26px 24px} /* Three-up variant. .tiers is hardcoded to two columns and homeschool.html relies on that, so the third column is a modifier with its own breakpoint rather than a change to the base rule. */ .tiers.three{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){.tiers.three{grid-template-columns:1fr}} .tier .nm{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-xl);color:var(--ink);margin-bottom:6px} .tier .pr{font-family:Oswald,sans-serif;font-size:34px;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:10px} .tier .pr small{font-family:Inter,sans-serif;font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:0} .tier p{font-size:var(--fs-sm);color:var(--ink-2);margin:0} /* ---- Proof ---- */ .rating{display:flex;align-items:baseline;gap:14px;margin-bottom:8px} .rating .num{font-family:Oswald,sans-serif;font-size:64px;font-weight:700;line-height:.9;color:var(--gold-bright);font-variant-numeric:tabular-nums} .stars{color:var(--gold-bright);font-size:var(--fs-xl);letter-spacing:.14em} .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--panel-rule);margin-top:34px} @media (max-width:820px){.quotes{grid-template-columns:1fr}} .q{background:var(--panel-2);padding:28px 26px} .q blockquote{margin:0 0 14px;font-size:var(--fs-lg);color:var(--panel-ink);line-height:1.5} .q .src{font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:.16em;color:var(--panel-ink-2);font-weight:600} /* ---- CTA band ---- */ .cta-band{background:var(--gold-bright);color:#0B1C28} .cta-band h2{color:#0B1C28;font-size:var(--fs-h2);margin-bottom:14px} .cta-band p{color:rgba(11,28,40,.80);font-size:var(--fs-lg);max-width:38em} .cta-band .btn-dark{background:#0B1C28;color:#EDE9DF;border-color:#0B1C28} .cta-band .btn-dark:hover{transform:translateY(-2px);background:#14303F;border-color:#14303F} /* ---- Footer / NAP ---- */ footer.site{background:var(--panel);color:var(--panel-ink);padding:clamp(48px,6vw,76px) 0 34px} .fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(26px,4vw,52px)} @media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.fgrid{grid-template-columns:1fr}} footer.site h2{font-size:var(--fs-2xs);letter-spacing:.2em;color:var(--gold-bright);margin-bottom:16px} footer.site address{font-style:normal;font-size:var(--fs-md);color:var(--panel-ink-2);line-height:1.75} footer.site address a{color:var(--panel-ink);text-decoration:none;border-bottom:1px solid var(--panel-rule)} footer.site address a:hover{border-bottom-color:var(--gold-bright)} .hrs{font-size:var(--fs-sm);color:var(--panel-ink-2);line-height:1.9;font-variant-numeric:tabular-nums} .hrs b{color:var(--panel-ink);font-weight:600} .areas{font-size:var(--fs-xs);color:var(--panel-ink-2);line-height:1.8} .fbot{ margin-top:44px;padding-top:22px;border-top:1px solid var(--panel-rule); display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between; font-size:var(--fs-2xs);color:var(--panel-ink-2); } /* ---- Reveal animation ---- */ .rv{transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)} html.js .rv{opacity:0;transform:translateY(22px)} html.js .rv.in{opacity:1;transform:none} html.js .hero .rv{transform:translateY(16px)} /* ---- Line-mask headline reveal (the Awwwards move, done cheap) ---- */ .lines{display:block} .ln{display:block;overflow:hidden} .ln > span{display:block;transition:transform 1s cubic-bezier(.16,1,.3,1)} html.js .ln > span{transform:translateY(105%)} html.js .lines.in .ln > span{transform:translateY(0)} .lines.in .ln:nth-child(2) > span{transition-delay:.09s} .lines.in .ln:nth-child(3) > span{transition-delay:.18s} /* ---- Film grain: adds depth without an image ---- */ .grain::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; opacity:.055;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero > *{position:relative;z-index:2} /* ---- Hero photography layer ---- */ .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .hero-bg picture{display:block;width:100%;height:100%} .hero-bg img{ width:100%;height:100%;object-fit:cover;object-position:26% 46%; opacity:.42;filter:saturate(.82) contrast(1.04); } .hero-bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg, var(--panel) 0%, rgba(11,28,40,.92) 34%, rgba(11,28,40,.55) 62%, rgba(11,28,40,.72) 100%), linear-gradient(0deg, var(--panel) 2%, rgba(11,28,40,0) 42%); } /* On phones the hero column is several times taller than any photo's aspect ratio, so a full-bleed backdrop crops to a meaningless sliver and the schedule card covers what's left. Drop it — the first figure on the page sits immediately below and does the job properly. */ @media (max-width:960px){ .hero-bg{display:none} } /* ---- Phone hero: three graphic planes ---- On a phone `.hero-bg` is display:none, because a hero column several times taller than any photo's aspect ratio crops the photograph to a sliver. That left the phone hero as navy plus two gold washes plus grain, which reads as unfinished next to the desktop version. These three planes give it depth without a photograph -- so nothing here touches the media-consent question, and there is no new asset: the mark is one Carl already owns. All three sit at z-index 0. `.hero > *` sets z-index 2 on direct children, and `.hero .hplane` (0,2,0) out-specifies it (0,1,0) -- but ONLY because these rules are declared after it. Do not move this block above `.hero > *`. Paint order between the planes themselves is DOM order, since they share a z-index: glow, then mark, then base shade over the top of it. */ .hero .hplane{ position:absolute;z-index:0;pointer-events:none;display:none; transform:translate3d(0,0,0); } .hero .hp-glow{ inset:-8% -10% auto -10%;height:62%; background:radial-gradient(58% 74% at 76% 6%, rgba(41,86,110,.85), rgba(11,28,40,0) 72%); } .hero .hp-mark{right:-12%;top:1%;width:76%;opacity:.07} /* Sized so the 3 reads as the mark rather than as an abstract shape. At 122%/13% -- which looked right in a 300px mockup frame -- it filled the whole hero on a real 390px phone and read as a smudge behind the type. */ .hero .hp-mark img{width:100%;height:auto;display:block} .hero .hp-base{ left:-6%;right:-6%;bottom:-2%;height:34%; background:linear-gradient(0deg, rgba(11,28,40,.96) 22%, rgba(11,28,40,0) 100%); } @media (max-width:960px){ .hero .hplane{display:block} } /* Motion is a progressive enhancement on top of that. Scroll-driven animation means no scroll listener and no JavaScript at all; browsers without `animation-timeline` keep the three planes standing still, which still beats flat navy. The ranges are the mockup's ratios over 600px of scroll: 0.10x, 0.22x and -0.06x. */ @supports (animation-timeline: scroll()){ @media (max-width:960px) and (prefers-reduced-motion: no-preference){ .hero .hplane{ animation:linear both; animation-timeline:scroll(root block); animation-range:0 600px; will-change:transform; } .hero .hp-glow{animation-name:hpGlow} .hero .hp-mark{animation-name:hpMark} .hero .hp-base{animation-name:hpBase} } } @keyframes hpGlow{to{transform:translate3d(0,60px,0)}} @keyframes hpMark{to{transform:translate3d(0,132px,0)}} @keyframes hpBase{to{transform:translate3d(0,-36px,0)}} @media (prefers-reduced-motion:no-preference){ html.js .hero-bg img{animation:heroSettle 2.4s cubic-bezier(.16,1,.3,1) both} } @keyframes heroSettle{from{transform:scale(1.08)}to{transform:scale(1)}} /* ---- Sport ticker ---- */ .ticker{ background:var(--panel-2);color:var(--panel-ink); border-top:1px solid var(--panel-rule);border-bottom:1px solid var(--panel-rule); overflow:hidden;padding:15px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .ticker-track{display:flex;width:max-content;animation:slide 42s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} .ticker-seq{display:flex;align-items:center;flex:none} .ticker-seq span{ font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.14em; font-size:var(--fs-md);font-weight:500;color:var(--panel-ink-2);padding:0 26px;white-space:nowrap; } .ticker-seq i{color:var(--gold-bright);font-style:normal;font-size:9px;transform:translateY(-2px)} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---- Season cells light as they cross the viewport centre ---- */ .scell{transition:border-color .35s ease;border-left:2px solid transparent} .scell.lit{border-left-color:var(--gold-bright)} /* ---- Magnetic / spring buttons ---- */ .btn{will-change:transform} /* ---- Counter numerals hold their width ---- */ .cred b{min-width:2.6ch;display:inline-block} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .ln > span{transform:none !important;transition:none} .btn{transition:none} .ticker-track{animation:none} *{animation-duration:.001s !important;animation-iteration-count:1 !important} } /* ============================================================ MEDIA — photo treatment, added for the multi-page build ============================================================ */ .shot{position:relative;overflow:hidden;background:var(--panel-2);display:block} .shot::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(11,28,40,0) 45%,rgba(11,28,40,.55) 100%); } .shot img{ display:block;width:100%;height:100%;object-fit:cover; transform:scale(1.04);transition:transform 1.2s cubic-bezier(.16,1,.3,1); } .shot:hover img{transform:scale(1)} .shot.tall{aspect-ratio:4/5} .shot.wide{aspect-ratio:16/9} .shot.sq{aspect-ratio:1/1} /* curtain reveal on scroll */ .shot .curtain{ position:absolute;inset:0;background:var(--panel);z-index:2; transform:translateY(-101%);transition:transform 1.05s cubic-bezier(.16,1,.3,1); } html.js .shot .curtain{transform:translateY(0)} html.js .shot.in .curtain{transform:translateY(-101%)} .shot .cap{ position:absolute;left:0;bottom:0;z-index:3;padding:16px 18px; font-family:Oswald,sans-serif;font-size:var(--fs-3xs);letter-spacing:.18em; text-transform:uppercase;color:#EDE9DF;font-weight:600; } /* ---- Page hero (interior pages) ---- */ .phero{background:var(--panel);color:var(--panel-ink);position:relative;overflow:hidden} .phero .wrap{padding-block:clamp(52px,7vw,96px) clamp(34px,4vw,56px);position:relative;z-index:2} .phero h1{font-size:var(--fs-h1);color:var(--panel-ink);line-height:.96;letter-spacing:-.01em;margin:0 0 20px} .phero h1 .gold{color:var(--gold-bright)} .phero .lede{font-size:var(--fs-h5);color:var(--panel-ink-2);max-width:36em;margin:0} /* ---- Breadcrumb ---- */ .crumb{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--panel-ink-2);margin-bottom:20px;font-weight:600} .crumb a{color:var(--gold-bright);text-decoration:none} .crumb a:hover{text-decoration:underline} /* ---- Media + text split ---- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .split.rev > *:first-child{order:2} @media (max-width:900px){.split{grid-template-columns:1fr}.split.rev > *:first-child{order:0}} /* ---- FAQ ---- */ .faq{border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ cursor:pointer;list-style:none;padding:22px 0; font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em; font-size:var(--fs-h5);color:var(--ink); display:flex;justify-content:space-between;align-items:center;gap:20px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold);font-size:24px;line-height:1;flex:none;transition:transform .25s ease} .faq details[open] summary::after{transform:rotate(45deg)} .faq details > p{padding:0 0 22px;color:var(--ink-2);max-width:60ch;margin:0} .faq summary:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px} /* ---- Nav active state ---- */ nav.top a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold-bright)} /* ---- Mobile nav row ---- */ /* ---- Phone menu ---- A
element, not a JS toggle: it opens and closes with no script, so the nav still works with JavaScript off — the same rule the reveal animations follow. This replaced a flat horizontal scrolling row, which was fine at nine links but hid Visit and Contact off-screen once the site grew to fifteen pages. Never put the destinations back in a row that has to be swiped. */ .mmenu{display:none} @media (max-width:1060px){.mmenu{display:block}} /* The trigger now sits in the header bar beside the phone number, so the panel cannot sit in normal flow inside that row -- it would be squeezed to the width of the
. It is absolutely positioned against header.site (sticky is a positioned value, so it is the containing block) and spans the full header. Content underneath is overlaid rather than pushed down, which is the normal phone-menu behaviour and avoids the page jumping on open. max-height + overflow keeps a tall nav reachable on a short screen; 100dvh rather than 100vh so mobile browser chrome does not cut the last item off. */ .mmenu{position:static} header.site .mnav{ position:absolute;left:0;right:0;top:100%; background:var(--ground);border-bottom:1px solid var(--rule); box-shadow:var(--shadow); padding:0 clamp(20px,5vw,48px) 12px; max-height:calc(100dvh - 72px);overflow-y:auto; -webkit-overflow-scrolling:touch; } /* Right-aligned, and row-reverse so the icon sits outermost: it lines up under the phone number in the bar above, and lands under the thumb on a phone. The links inside stay left-aligned — a right-ragged list is harder to scan. */ .mmenu>summary{ list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent; display:flex;flex-direction:row-reverse;justify-content:flex-start; align-items:center;gap:11px;padding:15px 0; font-family:Oswald,sans-serif;font-size:var(--fs-xs);text-transform:uppercase; letter-spacing:.12em;color:var(--ink-2) } .mmenu>summary::-webkit-details-marker{display:none} .mmenu>summary::marker{content:""} .mmenu>summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .mmenu[open]>summary{color:var(--gold)} .mmenu .bars{flex:none} .mmenu .mlabel-open{display:none} .mmenu[open] .mlabel-shut{display:none} .mmenu[open] .mlabel-open{display:inline} .mnav{display:flex;flex-direction:column;padding:0 0 10px} .mnav a{ font-family:Oswald,sans-serif;font-size:var(--fs-sm);text-transform:uppercase; letter-spacing:.1em;color:var(--ink-2);text-decoration:none; padding:13px 2px;border-top:1px solid var(--rule) } .mnav a[aria-current="page"]{color:var(--gold)} /* ---- Grouped sections inside the phone menu ---- Generated from the same NAV_TOP as the desktop dropdown, so the phone gets the same labels and one-line descriptions rather than a bare list. A group holding the current page is rendered already open by the build. */ .mnav .msub{border-top:1px solid var(--rule)} .mnav .msub>summary{ list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:13px 2px;font-family:Oswald,sans-serif;font-size:var(--fs-sm); text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2); } .mnav .msub>summary::-webkit-details-marker{display:none} .mnav .msub>summary::marker{content:""} .mnav .msub>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .mnav .msub[open]>summary{color:var(--gold)} .mnav .msub .caret{transition:transform .2s ease;opacity:.7;flex:none} .mnav .msub[open] .caret{transform:rotate(180deg)} /* Out-specifies `.mnav a` above — the child rows are sentence case with a description, not another row of uppercase Oswald. */ /* The expanded panel is deliberately identical to the desktop dropdown (.navgrp-m and `nav.top .navgrp-m a` above) — same surface, border, shadow, padding and item treatment. If you restyle one, restyle the other; they are meant to be the same component at two sizes. */ .mnav .msub-m{ background:var(--surface);border:1px solid var(--rule); box-shadow:var(--shadow);padding:8px;margin:0 0 12px; } /* display:block is load-bearing. A tap-target rule further down sets `.mnav a{display:inline-flex}`, which turned the label and its description into two flex items sitting side by side instead of stacking. */ .mnav a.msub-i{ display:block;border-top:0;padding:11px 13px; font-family:Inter,sans-serif;text-transform:none;letter-spacing:0; font-size:var(--fs-sm);color:var(--ink-2); } .mnav a.msub-i b{ display:block;font-family:Oswald,sans-serif;font-size:var(--fs-xs);font-weight:600; text-transform:uppercase;letter-spacing:.09em;color:var(--ink);margin-bottom:2px; } .mnav a.msub-i span{display:block;font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.45} .mnav a.msub-i[aria-current="page"]{background:var(--surface-2)} .mnav a.msub-i[aria-current="page"] b{color:var(--gold)} /* ============================================================ FIXES — interior hero double padding + small-screen header ============================================================ */ /* .phero is a
, so it was inheriting section padding on top of its own .wrap padding, leaving a dead band under the sticky header. */ .phero{padding:0} .tel{white-space:nowrap} @media (max-width:560px){ /* DEAD RULE, and left dead deliberately. `.mark .name, .mark .sub{display:block}` further down the file (the fix that stopped the two lines running together) has the same specificity and is declared later, so it wins and the sub-line stays visible on every phone. That is the SIXTH time this cascade has bitten. Not simply fixed here because reviving it removes "Chino, California" from the header on every phone up to 560px -- a visible brand change that is Carl's call, not a silent tidy-up. Reviving it would free ~29px across the whole phone range. Flagged in Bradford-Open-Items.md. */ .mark .sub{display:none} .mark .name{font-size:var(--fs-xs);letter-spacing:.1em} .tel{font-size:var(--fs-xs)} .bar{padding-block:11px;gap:12px} } /* Flex items default to min-width:auto, so the wordmark refused to shrink and pushed the phone number past the wrap's gutter on phones. */ .mark{min-width:0} .mark .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tel{flex:none} /* Grid children also default to min-width:auto — the schedule card's nowrap times gave it a min-content wider than a 320px screen. */ .split > *, .two > *, .hero-grid > *{min-width:0} @media (max-width:420px){ .sched{padding:20px 16px 14px} .srow{gap:10px} .srow .t{font-size:var(--fs-2xs)} .creds{gap:0} .cred{padding-right:16px;margin-right:16px} } /* ============================================================ PRODUCT CARDS — "Also from Bradford" ============================================================ */ .prods{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--panel-rule);margin-top:8px} /* Three cards, so the old two-up breakpoint would leave an orphan third cell showing the rule colour through the gap. Go straight from 3 to 1. */ @media (max-width:1000px){.prods{grid-template-columns:1fr}} .prod{background:var(--panel-2);padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;min-width:0} .prod .k{font-family:Oswald,sans-serif;font-size:var(--fs-4xs);letter-spacing:.18em;text-transform:uppercase; color:var(--gold-bright);font-weight:600;margin-bottom:12px} .prod h3{font-size:var(--fs-h4);color:var(--panel-ink);margin-bottom:12px;letter-spacing:.01em} .prod p{font-size:var(--fs-md);color:var(--panel-ink-2);margin-bottom:18px} .prod .facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px} .prod .facts span{ font-family:Oswald,sans-serif;font-size:var(--fs-4xs);letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:var(--panel-ink-2);border:1px solid var(--panel-rule);padding:5px 10px; } .prod .go{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px} .prod .go a{ font-family:Oswald,sans-serif;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase; letter-spacing:.1em;text-decoration:none;color:var(--gold-bright); border-bottom:1.5px solid transparent;padding-bottom:2px;transition:border-color .15s; } .prod .go a:hover{border-bottom-color:var(--gold-bright)} .prod .go a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px} /* header sign-in */ .signin{ display:inline-block; font-family:Oswald,sans-serif;font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase; letter-spacing:.11em;text-decoration:none;color:var(--ink-3);white-space:nowrap; border:1px solid var(--rule);padding:7px 12px;transition:color .15s,border-color .15s; } .signin:hover{color:var(--ink);border-color:var(--gold-bright)} .signin:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px} .bar .right{display:flex;align-items:center;gap:14px;min-width:0} @media (max-width:700px){.signin{display:none}} /* Five top-level items (Training groups four of them) fit comfortably from 960px up. Below that the flat scrolling .mnav row takes over. The sign-in drops out first, before anything can crowd the wordmark. */ @media (max-width:1400px){ .bar .right{gap:10px} } /* Sign-in drops at 1200, not 1119: adding the "By Sport" group widened the top nav, and between 1120 and 1159 the bar no longer fitted — the phone number was pushed past the right edge and the whole document scrolled sideways. */ @media (max-width:1200px){ .signin{display:none} } @media (max-width:1060px){ .mnav .signin-m{display:inline} } /* The wordmark must never be squeezed under the nav — it shrinks last. */ .mark{flex:0 0 auto} .mnav .signin-m{color:var(--gold)} /* The wordmark's two lines were inline spans, so "Chino, California" ran on from the name and wrapped mid-phrase. Stack them properly. WARNING: this also silently revived the sub-line on phones -- it out-orders the `@media (max-width:560px){.mark .sub{display:none}}` above at equal specificity. If you ever want that hide back, qualify it as `header.site .mark .sub`; do not just move this line. */ .mark .name, .mark .sub{display:block} nav.top a{white-space:nowrap} /* ---- Logo ---- Measured contrast: the gold mark is 6.95:1 on the dark ground but only 2.18:1 on the light one; the navy badge is 1.11:1 on the dark footer. So each asset is used only where it actually reads. */ .mark .logo{flex:none;display:block;width:48px;height:48px;object-fit:contain} /* NB: these must out-specify `.mark .logo` (0,2,0) or the toggle never applies. */ .mark .logo-dark{display:none} /* gold mark: dark grounds only */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mark .logo-light{display:none} :root:not([data-theme="light"]) .mark .logo-dark{display:block} } :root[data-theme="dark"] .mark .logo-light{display:none} :root[data-theme="dark"] .mark .logo-dark{display:block} :root[data-theme="light"] .mark .logo-light{display:block} :root[data-theme="light"] .mark .logo-dark{display:none} @media (max-width:560px){ .mark .logo{width:40px;height:40px} } /* The footer is dark in BOTH themes, so it always takes the gold mark. */ .flogo{display:block;width:112px;height:auto;object-fit:contain;margin:0 0 22px} /* ---- Footer on a phone ---- Stacked into one column the footer ran to about three full screens, almost all of it whitespace: a 112px mark, 1.8–1.9 line-heights and 40–44px gaps between every block. Nothing is removed here — every link still matters for internal linking — the vertical air is just taken out of it. Tap targets and font sizes are left alone; shrinking those to save height is the wrong trade. */ footer.site h2.mt{margin-top:26px} /* The spacing squeeze starts at 860, where .fgrid drops to two columns — the 561–860 band was actually TALLER than a phone (1438px at 561) because it had the tall two-column stack without any of the compaction. */ @media (max-width:860px){ footer.site{padding:34px 0 22px} .flogo{width:60px;margin-bottom:14px} .fgrid{gap:26px} footer.site h2{margin-bottom:10px} footer.site h2.mt{margin-top:18px} footer.site address{line-height:1.6} .hrs{line-height:1.7} .areas{line-height:1.72} /* NB: .social and .slinks are declared LATER in this file, so these need the extra `footer.site` to out-specify them — equal specificity would lose. */ footer.site .social{margin-top:24px;padding-top:16px} footer.site .slinks a{padding:5px 0;line-height:18px;font-size:var(--fs-2xs)} .fbot{margin-top:20px;padding-top:13px;gap:6px} .fbot span{display:block} } /* Below 560 the grid is a single column, so there is room to pair things up. */ @media (max-width:560px){ /* Four short link groups stacked full-width were most of the footer's height. Paired 2-up they cost half as much and read no worse. */ .fcols{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start} .fgroup h2.mt{margin-top:18px} /* Four social labels are long enough to take a row each — 181px for four links. Two columns halve it without shortening the labels, which have to stay distinct (there are two Instagram accounts). */ footer.site .slinks{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} } /* ---- Tap targets ---- Header phone and the mobile nav are primary CTAs; they need a comfortable hit area, not just a comfortable font size. */ .tel{padding:11px 0;display:inline-flex;align-items:center;min-height:44px} .mnav a{padding:10px 0;display:inline-flex;align-items:center;min-height:40px} .signin{padding-block:10px} /* NB: never set display here — it would beat the hide-on-mobile media query */ .crumb a{padding:4px 0;display:inline-block} .prod .go a{padding:6px 0;display:inline-flex;align-items:center;min-height:34px} /* The address strip under the hero carries the three things a parent on a phone actually does — call, text, email — and they were 24px tall, about half the 44px minimum. They are text links by design (a row of buttons there would compete with the real CTA above), so the hit area is grown with padding rather than by making them look like buttons. */ .addr-line a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0} /* Contact page "direct lines" and the footer address. The type is already large (20-34px Oswald) but line-height:1 means the clickable box is only the glyph height, so a 34px number was a 34px target. Padding, not font size. */ .bigline a{display:inline-flex;align-items:center;min-height:44px;padding:5px 0} .hero-cta{margin:26px 0 0} footer.site address a{display:inline-flex;align-items:center;min-height:40px;padding:4px 0} /* The service-area list is 23 dense secondary links. 44px each would add ~700px of footer on a phone for links almost nobody taps, so these get 36px -- comfortably bigger than the 20px they were, without a wall of whitespace. */ footer.site .areas a{padding:8px 0;display:inline-flex;align-items:center;min-height:36px} @media (max-width:700px){ /* Stack them so two adjacent 44px targets never sit edge to edge on a thumb. */ .addr-line{display:flex;flex-wrap:wrap;gap:0 22px} } /* The phone header was 119px — 14% of an 844px screen, held there by sticky. The brand row and the MENU row each carried desktop-sized padding. Trimming both takes it to roughly 92px without touching the structure or the tap targets, which stay above 44px. A one-row header (MENU beside the wordmark) would save another ~30px but is a markup change, not a padding change. */ @media (max-width:1060px){ .bar{padding-block:9px} /* Shares the bar row now, so its vertical padding no longer sets header height -- the 48px logo does. Keeps a 44px square target without adding rows. */ .mmenu>summary{padding:0;min-height:44px;min-width:44px;justify-content:flex-end} .bar .right{gap:14px} } nav.top a{padding-block:9px} /* .hero and .phero sit on --panel but aren't .on-panel, so their eyebrow was rendering dark-gold on dark navy (3.63:1). Use the on-panel colours. */ .hero .eyebrow, .phero .eyebrow{color:var(--gold-bright)} .hero .eyebrow::after, .phero .eyebrow::after{background:var(--panel-rule)} /* ---- Footer social row ---- */ .social{margin-top:40px;padding-top:26px;border-top:1px solid var(--panel-rule)} .slinks{display:flex;flex-wrap:wrap;gap:10px 26px} /* inline-flex would stop the label text wrapping and blow past 320px. */ .slinks a{ font-family:Oswald,sans-serif;font-size:var(--fs-xs);font-weight:500;text-transform:uppercase; letter-spacing:.1em;color:var(--panel-ink-2);text-decoration:none; border-bottom:1px solid transparent;padding:8px 0;line-height:20px;display:inline-block; } .slinks{min-width:0} .slinks a{max-width:100%} .slinks a:hover{color:var(--gold-bright);border-bottom-color:var(--gold-bright)} .slinks a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px} @media (max-width:560px){ .crumb{font-size:var(--fs-2xs)} } /* Stat strip: flex leaves a ragged empty cell when it wraps on a phone. A two-up grid keeps the rows even. */ @media (max-width:560px){ .creds{display:grid;grid-template-columns:1fr 1fr;gap:0} .cred{padding:14px 16px 14px 0;margin-right:0;border-right:1px solid var(--panel-rule)} .cred:nth-child(2n){border-right:0;padding-right:0} .cred:nth-child(-n+2){border-bottom:1px solid var(--panel-rule)} .cred:last-child{border-right:0} } /* ---- Motto ---- */ .motto{font-family:Oswald,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);font-weight:600} .motto-line{ font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.13em; font-size:var(--fs-h5);font-weight:600;color:var(--gold-bright); margin:22px 0 0;display:flex;align-items:center;gap:16px; } .motto-line::before{content:"";width:38px;height:2px;background:var(--gold-bright);flex:none} /* ============================================================ PROGRAM SWITCHER (#programs) ============================================================ Three grade bands, one panel. Built on radio inputs rather than JS buttons for three reasons: it works with JS off (the reveal system is already gated behind html.js, and this section must not depend on a second gate); arrow keys move between radios natively, so keyboard support is the platform's rather than ours; and no ARIA roles are claimed that the markup cannot honour. The radios are direct children of .pswitch so a plain sibling combinator can reach both the labels and the panels. Do not move them inside .ptabs -- `~` cannot climb back out, and the whole thing silently stops working. Deliberately carries no grades-plus-price-plus-time block: the schedule panel in the hero already says that, and /programs says it a third time. This says what the training IS at each stage, which neither of those do. */ .pswitch{margin-top:clamp(26px,3vw,38px);position:relative} .pswitch > input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .ptabs{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--rule);padding-bottom:14px} .ptabs label{ display:flex;flex-direction:column;gap:2px;cursor:pointer; padding:10px 16px;min-height:44px;justify-content:center; border:1.5px solid var(--rule);background:var(--surface); font-family:Oswald,sans-serif;font-size:var(--fs-xs);font-weight:600; text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2); transition:background .18s ease,border-color .18s ease,color .18s ease; } .ptabs label small{ font-size:var(--fs-4xs);letter-spacing:.14em;color:var(--ink-3); font-weight:600;text-transform:uppercase; } .ptabs label:hover{border-color:var(--rule-strong);background:var(--surface-2)} .ppanel{display:none} .ppanel .lead{ font-family:Oswald,sans-serif;font-weight:500;font-size:var(--fs-h5); line-height:1.35;color:var(--ink);margin:0 0 16px;max-width:44rem; } .ppanel p{max-width:44rem} .prule{ margin:18px 0 0;padding-left:16px;border-left:2px solid var(--gold); color:var(--ink-2);font-size:var(--fs-sm);max-width:44rem; } .prule b{ display:block;font-family:Oswald,sans-serif;text-transform:uppercase; letter-spacing:.12em;font-size:var(--fs-4xs);color:var(--gold); margin-bottom:4px;font-weight:600; } .pgo{margin:20px 0 0} .pgo a{color:var(--gold);font-weight:600;text-decoration:none} .pgo a:hover{text-decoration:underline} /* Checked state and panel routing. One pair of rules per band. */ #pr-speed:checked ~ .ptabs label[for="pr-speed"], #pr-perf:checked ~ .ptabs label[for="pr-perf"], #pr-elite:checked ~ .ptabs label[for="pr-elite"]{ background:var(--panel);border-color:var(--panel);color:var(--panel-ink); } #pr-speed:checked ~ .ptabs label[for="pr-speed"] small, #pr-perf:checked ~ .ptabs label[for="pr-perf"] small, #pr-elite:checked ~ .ptabs label[for="pr-elite"] small{color:var(--gold-bright)} #pr-speed:checked ~ .ppanels .pp-speed, #pr-perf:checked ~ .ppanels .pp-perf, #pr-elite:checked ~ .ppanels .pp-elite{display:block} /* The radio is off-screen, so the ring has to be drawn on its label. */ #pr-speed:focus-visible ~ .ptabs label[for="pr-speed"], #pr-perf:focus-visible ~ .ptabs label[for="pr-perf"], #pr-elite:focus-visible ~ .ptabs label[for="pr-elite"]{ outline:2px solid var(--focus);outline-offset:3px; } .ppanels{padding-top:clamp(22px,2.6vw,30px)} @media (prefers-reduced-motion:reduce){ .ptabs label{transition:none} } @media (max-width:520px){ .ptabs{gap:6px} .ptabs label{flex:1 1 100%;padding:9px 14px} } /* ============================================================ NARROW PHONES (≤383px) — must stay LAST in this file ============================================================ The wordmark is flex:0 0 auto (it shrinks last, by design), so at 320px the phone number was pushed past the right edge and the whole document scrolled sideways. These rules shrink the bar's three pieces instead. This block lives at the end deliberately: `.mark .logo` and `.tel` are declared further down the file than the header section, so an equally specific override placed up there silently loses the cascade. That mistake was made twice while building the footer — don't make it a third time. RAISED 360 -> 383 on 3 Sept 2026. Moving the MENU trigger into the bar (c63) added 61px to a row that had no room for it. 360 was fixed at the time; 361-383 was not even looked at, and EVERY page scrolled sideways there — 9px at 375, which is the iPhone SE, mini, and 6/7/8. Measured, not guessed: the row wants 404px at full size, so the trigger spills out of `.right` at any width under about 384. Above 383 the spill stays inside the viewport and nothing scrolls. If you add anything to the bar, re-measure this number rather than assuming it still holds. */ @media (max-width:383px){ .mark .logo{width:36px;height:36px} .mark .name{font-size:var(--fs-3xs);letter-spacing:.07em} .tel{font-size:var(--fs-2xs)} .bar{gap:8px;padding-block:10px} .wrap{padding:0 14px} /* Moving the menu trigger into the bar row added ~61px to a row that already fitted at 360px with 3px to spare -- it tipped into horizontal overflow. The word is dropped and the icon carries it, which is the usual pattern at this width. Clipped rather than display:none so a screen reader still announces "Menu" / "Close"; the 44px target is unchanged. */ .mmenu>summary .mlabel-shut, .mmenu>summary .mlabel-open{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } .mmenu>summary{gap:0} .mark{min-width:0} } /* Below ~349px the row still does not fit even with the trigger reduced to its icon: 14 + wordmark 180 + 8 + (tel 90 + 14 + 44) + 14 = 364 against a 320px screen. This band (iPhone SE 1st gen, older Androids) was overflowing before the menu ever moved into the bar, so it is not a regression from c63 -- it is just the first time anyone measured below 360. Two more things go: the "Chino, California" sub-line, which is the widest part of the lockup and is repeated in the footer and the schema, and 6px of gap beside the phone number. The phone number itself never goes -- it is the primary action. */ @media (max-width:348px){ .mark .sub{display:none} .bar .right{gap:8px} } /* Anchor targets sit under a sticky header, so a jump to #by-sport landed with the heading hidden behind the bar. Offset the scroll position instead. */ :target{scroll-margin-top:96px} [id]{scroll-margin-top:96px} /* Two-up variant of the season strip, for any section with two cells rather than three — .season is otherwise a fixed three-column grid. */ .season.two{grid-template-columns:repeat(2,1fr)} @media (max-width:820px){.season.two{grid-template-columns:1fr}} /* ---- Footer sections, collapsible on a phone ---- Same bargain as the nav hamburger: identical content, mobile format. JS closes these below 560px; with JS off they stay open, so nothing is ever unreachable. On desktop the renders as the heading it wraps, which is why the desktop footer is unchanged — except "Explore", a label that only exists to give the collapsed group something to tap, so it is desktop-hidden. */ .fsec>summary{list-style:none;cursor:pointer;display:block;-webkit-tap-highlight-color:transparent} .fsec>summary::-webkit-details-marker{display:none} .fsec>summary::marker{content:""} .fsec>summary.mobile-only{display:none} .fsec>summary:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px} @media (max-width:560px){ .fsec>summary.mobile-only{display:block} /* 44px minimum hit area — these are the only way to reach the collapsed links, so they can't be the size of the text alone. */ .fsec>summary{ position:relative;padding:12px 24px 12px 0;min-height:44px; display:flex;align-items:center; } .fsec>summary h2{margin-bottom:0} .fsec[open]>summary h2{margin-bottom:0} .fsec>summary::after{ content:"";position:absolute;right:5px;top:18px;width:7px;height:7px; border-right:1.5px solid var(--gold-bright);border-bottom:1.5px solid var(--gold-bright); transform:rotate(45deg);transition:transform .2s ease; } .fsec[open]>summary::after{transform:rotate(-135deg);top:21px} } /* ---- Print ------------------------------------------------------------ /schools exists to be printed and carried into a principal's office, and without this every dark panel printed either as cream-on-white (1.2:1, unreadable) or as a full page of navy ink. Roughly 42% of that page's text was affected. Backgrounds are dropped and the ink is forced dark instead. */ @media print { @page { margin: 14mm 12mm; } html, body { background: #fff !important; color: #101A20 !important; } /* Every dark or colored band prints as plain paper with dark text. */ .on-panel, .phero, .hero, .cta-band, .sched, .q, .quotes, .prog, .scell, .panel, .word, .creds, .cred, .tier, .card, .prod, .prods, .rating, .hs, .spec { background: #fff !important; color: #101A20 !important; border-color: #9aa3a8 !important; } .on-panel *, .phero *, .hero *, .cta-band *, .sched *, .q *, .scell *, .creds *, .cred *, .word *, .prod *, .rating *, .hs * { color: #101A20 !important; } /* Gold and muted text still need to read as ink on paper. */ .gold, .eyebrow, .cred b, .srow .t, .scell .k, .prog .band, .q .src, .sched h2, .sched .note, .mini h4, .adapt .row b, .prod .k, .prod .go, .rating .num, .tier .pr, .pull { color: #4a3c12 !important; } /* Chrome and section rules that only made sense on screen. */ .grain::after, .hero-bg, .curtain, .ticker { display: none !important; } /* Navigation, the mobile menu, social and the sticky bar are all noise here. */ .bar, nav.top, .navgrp, .navgrp-m, .mmenu, .mnav, .skip, .social, .slinks, .signin, .hero-cta, .btn, .fbot, .follow, header { display: none !important; } /* Keep the address and phone — a printout has to be actionable. */ .fsec, .fgrid, footer { background: #fff !important; color: #101A20 !important; } footer * { color: #101A20 !important; } /* Don't split a card, a phase row or a testimonial across a page break. */ .prog, .scell, .q, .tier, .card, .srow, .cred, .creds, .two, figure, details { break-inside: avoid; page-break-inside: avoid; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; } section { break-inside: auto; padding-block: 10mm 0 !important; } /* The switcher shows one band on screen. On paper, print all three and drop the tab row -- a printed page cannot be clicked. */ .ptabs { display: none !important; } .ppanel { display: block !important; border-top: 1px solid #ccc; padding-top: 8pt; margin-top: 8pt; } /* Reveal-on-scroll blocks must not print blank. */ .rv { opacity: 1 !important; transform: none !important; } /* FAQ answers are content, not an interaction, once it is on paper. */ details > summary { font-weight: 600; } details > *:not(summary) { display: block !important; } /* Spell out link targets so a printed page stays usable. */ main a[href^="http"]::after, main a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #4a5157; } main a[href^="/"]::after { content: " (bradfordfit.com" attr(href) ")"; font-size: 9pt; color: #4a5157; } img { max-width: 100% !important; } body { font-size: 10.5pt; line-height: 1.45; } } /* ---- Booking form ----------------------------------------------------- Netlify Forms: the markup is the API. data-netlify + a hidden form-name is all the wiring; submissions land in the Netlify dashboard and email. Built because every path on the site previously ended in a phone call, at the hours Carl is coaching and cannot answer. */ .bf-form{margin-top:26px} .bf-form .hp{position:absolute;left:-9999px} .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} @media (max-width:640px){.frow{grid-template-columns:1fr}} .fld{margin:0 0 16px} .fld label{display:block;font-family:Oswald,sans-serif;text-transform:uppercase; letter-spacing:.12em;font-size:var(--fs-3xs);font-weight:600;color:var(--ink-2);margin-bottom:6px} /* The hint sits BESIDE the label, not inside it. Netlify builds the field names in the notification email from the label's text, so a hint inside