/* ============================================================ Lake District Mountaineering - main stylesheet Order: fonts > design tokens > reset > base typography > layout > sections + section header > carousel dots > buttons > arrow link > eyebrow > icons > utilities ============================================================ */ /* Component CSS lives in components/ - one file per component, enqueued individually AFTER this file with filemtime versions (inc/enqueue.php). Do NOT @import them here: imported URLs carry no cache-busting version, and loading components after main.css lets component overrides win. */ /* ============================================================ Fonts - self-hosted woff2, Latin subset (assets/fonts/, OFL licences alongside). Self-hosted rather than Google Fonts links for UK GDPR and performance. Koulen = display, one weight only, always uppercase; Poppins = UI + body. No italics in the designs. Koulen, Poppins 400 and 600 are preloaded (inc/enqueue.php). ============================================================ */ @font-face { font-family: "Koulen"; src: url("../fonts/koulen-v30-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins-v24-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins-v24-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins-v24-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("../fonts/poppins-v24-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ============================================================ Design tokens (docs/design-system.md section 8) Palette hex values verbatim from the brand guidelines; the rest measured from the v4 designs. Components use the SEMANTIC tokens, never raw values. Markers: [decided] Brand value or agreed decision [working] build default until the named question is answered [measured] from the designs; may be normalised under QH7 [proposal] not in any source Breakpoints (comments only, vars can't be used in @media): designs are 402px mobile + 1440px desktop; mobile-first with tablet 768px and desktop 1024px. clamp() tokens interpolate between the two artboards, so 768-1023 gets middle values; every section still gets a deliberate tablet check at 834px. ============================================================ */ :root { /* ---------- Palette: core [decided] ---------- */ --color-navy: #101f46; /* Primary Navy - deep contrast zones, primary backgrounds */ --color-navy-secondary: #2b3757; /* Secondary Navy - secondary panels, dark cards, dropdowns */ --color-orange: #de8b4d; /* Light Orange - core interactive elements, primary CTAs, active links */ --color-orange-dark: #cc7029; /* Dark Orange - secondary accent, button hover, status cues */ --color-cream: #fff6ef; /* Cream - primary warm page backgrounds */ --color-white: #ffffff; /* ---------- Level and Leadership labels [decided]. In the UI "Pathway" means the disciplines (Rock / Mountain / Winter / Leadership) and "Level" means Foundation / Progression / Development; Leadership has no level. ---------- */ --color-level-foundation: #55a56c; /* Foundation Green */ --color-level-progression: #4f90cc; /* Progression Blue */ --color-level-development: #d8af45; /* Development Gold */ --color-leadership: #b64f4b; /* Leadership Red */ /* ---------- Neutrals [measured] ---------- */ --color-border-warm: #e7e0de; /* Border Warm */ --color-grey-dark: #6b6f78; /* Grey Dark */ --color-grey-light: #d9d9d9; /* Grey Light */ --color-grey-mid: #b1b1b1; /* Grey Mid */ /* ---------- Off-palette: button hover [proposal; direction decided by Miles 2026-10-05 - "a bit darker orange", label kept; the value is for Emma to confirm, Open: QH4] ---------- */ --color-orange-deep: #aa5d22; /* Dark Orange's hue and saturation at 40% lightness (the brand colour is 48%); Cream on it 4.58:1, White 4.89:1 */ /* ---------- Off-palette values the designs use [working, Open: QH7] ---------- */ --color-grey-faint: #f2f2f2; /* dates-table header + zebra, mobile date cards */ --color-icon-tile: #444254; /* Why icon tiles (= Light Orange 14% over Secondary Navy) */ --color-navy-deep: #001c47; /* mobile hero gradient (= logo navy) */ /* ---------- Surfaces ---------- */ --color-bg: var(--color-cream); /* [working, Open: QH7] sections set their own */ --color-surface: var(--color-white); --color-surface-warm: var(--color-cream); --color-surface-dark: var(--color-navy); /* header, footer, navy sections, mobile menu */ --color-surface-dark-alt: var(--color-navy-secondary); /* newsletter field, dark cards */ --color-menu-panel: var(--color-white); /* [working, Open: QH18] Brand says Secondary Navy */ --color-surface-frosted: rgb(255 255 255 / 0.6); /* [measured, Open: QH9] location panels: White 60%, no blur */ /* ---------- Text ---------- */ --color-text: var(--color-navy); --color-text-muted: var(--color-grey-dark); --color-text-on-dark: var(--color-cream); --color-heading: var(--color-navy); --color-heading-on-dark: var(--color-white); /* [working, Open: QH7] */ --color-accent: var(--color-orange); /* rules, icons, chevrons, stars; text on navy */ --color-arrow-hover-on-light: var(--color-orange-dark); /* [proposal] arrows on White / Cream when hovered or focused (3.55 / 3.33:1, passes 3:1 for non-text; Light Orange would be 2.66 / 2.49) */ --color-eyebrow: var(--color-orange); /* [working, Open: QH7] one eyebrow colour */ --color-rating: var(--color-orange); /* [working, Open: QH6] Brand rule names "Gold (#E8B04B)" */ --color-text-on-photo: var(--color-white); /* [measured, Open: QH7] CTA paragraph, pathway descriptions (body on navy is Cream) */ --color-accent-text-light: var(--color-orange); /* [working, Open: QH5] small orange text on White / Cream (course category, meta): 2.66 / 2.49:1 as designed */ --color-badge-text: var(--color-navy); /* [working, Open: QH5] level badges: Navy on Foundation 5.35, Progression 4.74, Development 7.76:1 (designs: White) */ --color-badge-text-leadership: var(--color-white); /* White on Leadership Red 4.99:1 */ /* ---------- Links ---------- */ --color-link: var(--color-navy); --color-link-on-dark: var(--color-cream); --color-link-hover-on-dark: var(--color-orange); /* [proposal] link hover colour on navy; on photos (hero, CTA band) only the arrow takes it (text contrast); the large mega-menu card labels change too */ --color-link-on-card-dark: var(--color-white); /* [measured] progression card links are drawn White (other links on navy are Cream) */ /* ---------- Buttons [Open: QH4] Designs: Dark Orange at rest with a Cream label (3.33:1, fails AA). Brand: Light Orange for primary CTAs, Dark Orange for hover. Rest: the designed colours until Emma decides. Hover and focus: a deeper orange with the label unchanged (Cream 4.58:1) - Miles's direction, 2026-10-05; the exact shade is a proposal for Emma. The button itself never moves, scales or gains or loses a shadow (an arrow inside it slides like every arrow, see Arrow link). ---------- */ --btn-primary-bg: var(--color-orange-dark); --btn-primary-fg: var(--color-cream); --btn-primary-border: var(--color-cream); --btn-primary-bg-hover: var(--color-orange-deep); --btn-primary-fg-hover: var(--color-cream); --btn-primary-border-hover: var(--color-cream); /* ---------- Lines, focus ---------- */ --color-border: var(--color-border-warm); /* cards, inputs, rating pill */ --color-divider: var(--color-grey-light); /* in-card, accordion, trust strip */ --color-divider-on-dark: var(--color-grey-dark); /* utility bar, footer, mobile menu */ --color-focus: var(--color-orange); /* [proposal, Open: QH4, QH10] on navy 6.05:1 */ --color-focus-light: var(--color-orange-dark); /* [proposal] on White / Cream */ --color-focus-on-button: var(--color-cream); /* [proposal] a ring drawn inside a button fill (the mega menu bar): 4.58:1 on the hover orange */ --color-forced-backplate: Canvas; /* Windows High Contrast only: the user's page colour, behind arrows inside links */ /* ---------- Carousel dots [measured, Open: QH7]: desktop reviews pair on light backgrounds, mobile progression pair on navy ---------- */ --color-dot: var(--color-grey-light); --color-dot-hover: var(--color-grey-dark); /* [proposal] colour-only hover */ --color-dot-active: var(--color-navy-secondary); --color-dot-on-dark: var(--color-grey-mid); --color-dot-hover-on-dark: var(--color-cream); /* [proposal] */ --color-dot-active-on-dark: var(--color-orange); /* ---------- Type: families and weights [decided] ---------- */ --font-display: "Koulen", "Poppins", "Arial Narrow", sans-serif; /* uppercase display only; Poppins fills glyphs Koulen lacks */ --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --fw-display: 400; /* Koulen has one weight; never bold */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Type: display sizes [measured, Open: QH8]; clamp() [proposal] ---------- */ --fs-hero: clamp(36px, 25.16px + 2.6975vw, 64px); /* Home hero H1: 36 / 64 (Brand says 48 on mobile) */ --fs-h1: clamp(48px, 43.35px + 1.1561vw, 60px); /* inner-hero H1, CTA band */ --fs-error-code: clamp(56px, 52.9px + 0.7707vw, 64px); /* [measured] the 404 page's "404": Koulen 64 at 1440; 56 on phones (not designed) */ --fs-h2: clamp(36px, 31.35px + 1.1561vw, 48px); /* section headings */ --fs-h3: clamp(30px, 27.68px + 0.5780vw, 36px); --fs-h3-static: 36px; /* split-card H2 (Mountain Leadership, Meet Sam) at every width */ --fs-step-number: clamp(30px, 29.23px + 0.1927vw, 32px); /* progression numbers "01"-"03": 30 phones, 32 desktop */ --fs-location: 32px; /* location panel titles (off the Brand mobile scale, QH8) */ --fs-card-title-lg: 24px; /* pathway / progression card titles, mega-menu headings, mobile menu rows */ --fs-card-title: 20px; /* course titles, "FOLLOW US" */ /* ---------- Type: UI sizes [measured] ---------- */ --fs-lead: clamp(16px, 14.45px + 0.3854vw, 20px); /* Home hero lead */ --fs-ui-lg: 18px; /* large button labels, hero / CTA links */ --fs-body: 16px; /* [working, Open: QH7] Brand specimen says 14 */ --fs-small: 14px; --fs-label: 12px; --fs-badge: 11px; /* ---------- Type: line heights and tracking [measured] ---------- */ --lh-body: 1.5; /* 16/24, 20/30, 18/27, 14/21, 12/18 */ --lh-hero: 1.111; /* 36/40 mobile; 1.125 (64/72) from 1024 */ --lh-display: 1.125; --lh-h2: 1.111; /* 36/40 mobile; 1.25 (48/60) from 1024 */ --lh-card-title: 1.4; --lh-eyebrow: 1.333; --ls-eyebrow: 0.18em; /* exact (2.16px at 12px) */ --ls-tag: 0.025em; /* ---------- Layout and spacing ---------- */ --container-max: 80rem; /* [working, Open: QH7] 1280px of content (X78) */ --gutter: clamp(14px, -11.56px + 6.3584vw, 80px); /* 80 desktop, 14 mobile [working/proposal, Open: QH7] */ --inset-card-mobile: 42px; /* [measured, Open: QH7] mobile card stacks, footer */ --section-pad-y: clamp(80px, 67.61px + 3.0829vw, 112px); /* 112 desktop, 80 mobile [working, Open: QH7] */ --gap-cards: 36px; --gap-grid: 20px; --card-pad: 18px; /* course card text inset from the card's outer edge */ --eyebrow-rule-w: 32px; --eyebrow-rule-h: 1px; --eyebrow-gap: 10px; --header-utility-h: 33px; --header-bar-h: 92px; /* 104 from 1024 (designed 95; Miles 2026-10-11: slightly taller) */ --mega-gap: 6px; /* [measured] header bar to a mega panel */ --toolbar-fixed-h: 0px; /* [decided] the WordPress toolbar where it stays fixed (from 601px, below) */ --header-focus-clearance: 8px; /* [proposal] room between the floating header and a focused element */ /* ---------- Radii [measured]; button rule [decided] ---------- */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; /* cards, rows, mega-menu image cards (about 15) */ --radius-lg: 20px; --radius-xl: 24px; /* split feature cards */ --radius-button: 30px; /* [decided] Brand rule; mega-menu panel */ --radius-pill: 999px; /* [decided] */ /* ---------- Borders [measured] ---------- */ --border-hairline: 1px; --border-button: 2px; /* large buttons; the header Book pill uses 1px (Open: QH4) */ --border-accent: 3px; /* ---------- Shadows ---------- */ --shadow-header: 0 1px 6px rgb(0 0 0 / 0.2); /* [measured: about 19% at the edge, gone within about 7px] */ --shadow-button: 0 0 10px rgb(0 0 0 / 0.25); /* [proposal] photo-backed buttons; kept on hover and focus (buttons never gain or lose a shadow) */ --shadow-menu: 0 3px 9px rgb(0 0 0 / 0.2); /* [proposal] mega-menu panel */ --text-shadow-hero: 0 0 10px rgb(0 0 0 / 0.6); /* [measured: the PDF's shadow raster is black, reaching about 10px] */ --text-shadow-hero-lead: 0 0 7px rgb(0 0 0 / 0.45); /* [measured: lead shadow raster, black, about 7px] */ /* ---------- Overlays [measured from the PDFs' vector fills] ---------- */ --overlay-hero: linear-gradient(to bottom, rgb(0 28 71 / 0), rgb(0 28 71 / 0.6)), linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)); /* phones: black 20% + the mobile file's navy fade */ --overlay-hero-desktop: linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.2)); /* desktop file: one black layer at 20%, no gradient */ --overlay-card-photo: linear-gradient(to top, rgb(16 31 70 / 0.5), rgb(16 31 70 / 0.2) 50%, rgb(16 31 70 / 0)); --overlay-card-photo-strong: linear-gradient(to top, rgb(16 31 70 / 0.98), rgb(16 31 70 / 0.8) 25%, rgb(16 31 70 / 0.5) 50%, rgb(16 31 70 / 0.26)); /* [measured, Open: QH9] pathway card hover/focus, from the drawn Winter card */ --overlay-cta: linear-gradient(to bottom, rgb(16 31 70 / 0.23), rgb(16 31 70 / 0.6) 86%); /* [measured] both files: navy 23% at the top to 60% at 86% of the band (QH9) */ --overlay-locations: linear-gradient(186deg, rgb(255 246 239 / 0.6) 65%, rgb(255 246 239 / 0) 93%); /* [measured] mobile file, exact; tablets too */ --overlay-locations-desktop: linear-gradient(90deg, rgb(255 246 239 / 0.6) calc(50% + 42px), rgb(255 246 239 / 0) calc(50% + 345px)); /* [measured] desktop render: 60% to x 762, clear by x 1065 at 1440 */ /* ---------- Sizes [measured] ---------- */ --submit-size: 40px; /* newsletter submit */ --tap-target: 44px; /* hamburger and other icon-only controls */ --icon-check: 24px; /* checklist tick circles (split card, phones) */ /* ---------- Motion ---------- */ --transition: 0.25s ease; /* no source sets timing (QH10) */ --arrow-nudge: 4px; /* [proposal] how far arrows slide right on hover / keyboard focus - Miles asked for "a slight arrow movement" (2026-10-05) */ --image-zoom: 1.06; /* [proposal] photo scale on image cards on hover / keyboard focus - Miles asked for "a nice slow zoom" (2026-10-05) */ --transition-zoom: 1.2s ease; /* [proposal] slow and even (an ease-out curve did half the zoom in the first 0.2s); the photo eases back at the same speed */ --color-card-title-underline: var(--color-arrow-hover-on-light); /* [proposal] course card titles on hover / keyboard focus (Miles 2026-10-11): Dark Orange like the card's arrow; var(--color-heading) for a navy line */ --card-title-underline-h: 2px; /* [proposal] its thickness */ --transition-underline: 0.4s var(--ease-out-cubic); /* [proposal] the line draws in from the left, and back */ --transition-quick: 0.15s ease-out; /* [proposal] nav labels: colour changes that should feel instant */ --reviews-reveal-duration: 0.5s; /* [proposal] the reviews grid growing or shrinking by a row set, and its cards fading in / out (Miles 2026-11-01: not "abrupt"); read by assets/js/reviews.js */ --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); /* [proposal] fast start, gentle landing (Northumberland Cheese's menu curve) */ --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0); /* [proposal] gentle start, quick finish (a panel handing over) */ --menu-in-duration: 0.22s; /* [proposal] mega menu fade-in - Miles: "smoother but elegant and quick", "just smoothly appear" (2026-10-07) */ --menu-out-duration: 0.16s; /* [proposal] fade-out, quicker than the fade-in (navigation.js FADE_OUT matches) */ --header-slide-duration: 0.35s; /* [proposal] the floating header's slide in and out - Northumberland Cheese's 0.35s (navigation.js SLIDE matches) */ /* ---------- Listing: courses and workshops (archive-ldm_offering.php, template-parts/listing/, listing*.css) and the inner-page hero (page-hero.css). Measured on List v2 (docs/notes/listing-pages.md) unless marked; sizes live in the component files. ---------- */ --fs-intro: clamp(18px, 17.23px + 0.1927vw, 20px); /* inner-hero intro: 18 phones, 20 desktop (design-system 7) */ --color-surface-hero: var(--color-navy-secondary); /* inner-page hero, flat */ --color-text-on-hero-muted: color-mix(in srgb, var(--color-cream) 90%, var(--color-navy-secondary)); /* [measured, Open: QH7] the 404 page's text, drawn about #E9E2DF: Cream at 90% over Secondary Navy, about 9.9:1 */ --color-eyebrow-on-hero: var(--color-orange); /* [working, Open: QH5] inner-hero eyebrow as designed: 4.42:1 on Secondary Navy at 12px, just under AA's 4.5:1; a slightly lighter orange, #e39456, would give 4.83:1 */ --color-breadcrumb: var(--color-grey-mid); /* trail links and separators: 5.48:1 on Secondary Navy */ --color-breadcrumb-current: var(--color-cream); /* current page on desktop (phones draw it Grey Mid) */ --color-surface-sidebar: var(--color-cream); /* filter sidebar and the filter panel */ --color-rule-filter: var(--color-grey-dark); /* 1px rules between filter groups */ --color-reset: var(--color-grey-dark); /* "Reset" and "Clear all": 4.72:1 on Cream, 5.04:1 on White */ --color-control-border: var(--color-grey-dark); /* checkbox outline (drawn thin, dark grey): 4.72:1 on Cream */ --color-control-checked: var(--color-navy); /* [proposal] checked box fill (not designed) */ --color-control-mark: var(--color-white); /* [proposal] the tick in a checked box */ --color-control-hover: var(--color-orange-dark); /* [proposal] hover cue on the listing's icon buttons, checkboxes and price handles (3.55:1 on White, 3.33:1 on Cream) */ --color-scrollbar: var(--color-grey-mid); /* [proposal] the sticky sidebar's thin scrollbar, when it needs one */ --color-input-muted: var(--color-grey-dark); /* search placeholder and magnifier: 5.04:1 on White */ --color-level-pill: var(--color-navy); /* level pill fill; the level colours on it pass (5.35 / 4.74 / 7.76:1) */ --color-level-pill-pressed-text: var(--color-navy); /* [proposal] a pressed pill: level-colour fill, navy text and tick (same ratios) */ --color-tooltip-bg: var(--color-grey-light); /* level "?" bubbles */ --color-tooltip-text: var(--color-navy); /* 11.6:1 on Grey Light */ --filter-tooltip-shadow: drop-shadow(0 2px 4px rgb(0 0 0 / 0.22)); /* [measured: soft grey, about 6px] a filter, so the tail casts it too */ --color-pagination: var(--color-grey-dark); /* other pages: 5.04:1 on White */ --color-pagination-current: var(--color-navy); /* current page, its underline, arrows and the ellipsis */ --color-pagination-disabled: var(--color-grey-mid); /* [proposal] no previous / next page (decorative) */ --color-pagination-rule: var(--color-grey-mid); /* the band's top and bottom rules */ --color-backdrop: rgb(16 31 70 / 0.6); /* [proposal] Primary Navy 60% behind the filter panel on tablets */ --shadow-panel-foot: 0 -2px 8px rgb(16 31 70 / 0.08); /* [proposal] the filter panel's sticky footer */ --transition-panel: 0.25s; /* [proposal] the filter panel's open and close */ /* ---------- Why choose band (template-parts/components/why-band.php, why-band.css). The overlay is read from the PDFs' vector data, the same in the listing and course designs, desktop and mobile: Primary Navy at 80% layer opacity, its gradient 60% from 9.25% of its length to 0 at its end, drawn up from the band's foot over 153% of the band's height - so in the band 18.3% at the top to 48% at 85.85%, then 48% to the foot (a rebuild over the placeholder matches the renders within 2 levels). [measured, Open: QH9] ---------- */ --overlay-why: linear-gradient(rgb(16 31 70 / 0.6), rgb(16 31 70 / 0.6)); /* Emma 2026-10-18 ("not that readable"): flat navy 60%, every line of White text at 4.85:1 or more over Sam's photo at 1440 / 1024 / 834 / 402; the file's 18% > 48% gradient left 3.2:1 (1.9:1 for the phone heading) */ --color-check-disc: var(--color-orange); /* [measured] 24px tick discs on photos and navy (Why choose band; the course page's info cards) */ --color-check-tick: var(--color-white); /* [measured] the tick inside them (decorative; the list carries the meaning) */ --fs-why-reason: clamp(18px, 13.08px + 0.4808vw, 20px); /* [measured] 18 on phones (and up to 1024), 20 at 1440: one line per reason from 1024 */ /* ---------- Course and workshop page (stage 2, 2026-10-08; template-parts/offering/, offering-*.css). Measured on CW v2 (docs/notes/course-page.md) unless marked. ---------- */ --offering-hero-dot-active: var(--color-white); /* [measured] the hero gallery's active dot is drawn White (inactive Grey Mid, as --color-dot-on-dark) */ --offering-hero-dot-hover: var(--color-orange); /* [proposal] hover cue on an inactive hero dot: the usual Cream would read as the White active dot */ --offering-hero-arrow-hover: var(--color-orange); /* [proposal] gallery previous / next arrows on hover and keyboard focus (Cream at rest as drawn, 11:1 on Secondary Navy; Light Orange 4.42:1, non-text needs 3:1) */ --offering-hero-arrow-disabled: var(--color-grey-dark); /* [proposal] an arrow at the first / last photo: dimmed (2.34:1; inactive controls are exempt from contrast) */ --offering-hero-forced-line: CanvasText; /* Windows High Contrast only: the badge outline (its fill is dropped there) */ --offering-hero-forced-disabled: GrayText; /* Windows High Contrast only: an arrow at the first / last photo */ --itinerary-label-size: clamp(24px, 20.9px + 0.7707vw, 32px); /* [measured] stage label ("Days 1 and 2"): Koulen 24 on phones, 32 at 1440 (design-system 8's --fs-day-label) */ --itinerary-label-color: var(--color-accent-text-light); /* [working, Open: QH5] stage label, Light Orange as drawn: 2.65:1 on White, under the 3:1 large text needs; var(--color-orange-dark) gives 3.55:1 */ --dates-surface-alt: var(--color-grey-faint); /* [measured] the dates table's header and even rows, the date cards, the no-dates box (#F2F2F2) */ --dates-rule: var(--color-border); /* [measured] the dates table's outline and row rules, the cards' and the selects' borders (Border Warm) */ --dates-status-full: color-mix(in srgb, var(--color-leadership) 94%, var(--color-navy)); /* [proposal] "Full": Leadership Red with 6% Primary Navy, about 4.8:1 on #F2F2F2 and 5.4:1 on White (the brand red: 4.46:1 on #F2F2F2, under AA) */ --dates-icon: var(--color-navy); /* [measured] the date cards' calendar and pin icons */ --dates-notice-rule: var(--color-heading); /* [proposal] why a booking could not be made (not designed): the box's left rule; an error's is --color-error */ --faqs-tab-bg-hover: color-mix(in srgb, var(--color-navy-secondary) 86%, var(--color-cream)); /* [proposal] an FAQ tab's hover fill (not designed): Secondary Navy lightened with Cream; the Cream label stays above 7:1 */ --faqs-light-tab-border: var(--color-navy-secondary); /* [measured] FAQ page (White): an unselected tab's 1px outline */ --faqs-light-tab-selected-border: var(--color-navy); /* [measured] FAQ page: the selected tab's 1px outline, on its Secondary Navy fill with the Cream label */ --faqs-light-tab-bg-hover: color-mix(in srgb, var(--color-navy-secondary) 10%, var(--color-white)); /* [proposal] FAQ page: an unselected tab's hover fill (not designed); the Navy label stays above 13:1 */ --faqs-light-question-hover: var(--color-orange-deep); /* [proposal] FAQ page: a question's and an answer link's hover colour on White, 4.89:1 (Dark Orange would be 3.55:1, under AA for this text) */ --faqs-forced-selected: Highlight; /* Windows High Contrast only: the selected FAQ tab's fill and border */ --faqs-forced-selected-text: HighlightText; /* Windows High Contrast only: its label */ --color-forced-active: Highlight; /* Windows High Contrast only: the current carousel dot (dots are backgrounds, which that mode drops) */ --color-forced-line: CanvasText; /* Windows High Contrast only: lines drawn as backgrounds that must stay (the eyebrow rule) */ /* The course request form (Register interest / waiting list; stage 4, not designed: offering-request.css). */ --color-error: var(--dates-status-full); /* [proposal] error text, alert rule and invalid fields: the dates' "Full" red, 5.4:1 on White */ --color-field-border: var(--color-control-border); /* [proposal] form field outlines (request form, checkout): Grey Dark, 5.0:1 on White (inputs need 3:1; Border Warm would be 1.3:1) */ --field-height: 48px; /* [proposal] text inputs and selects */ --field-radius: var(--radius-xs); /* [measured] the Contact form's fields: about 8px */ /* The preview lock's username and password page (2026-11-01, inc/preview-lock.php; assets/css/preview-lock.css). */ --preview-lock-bg: var(--color-surface-dark-alt); --preview-lock-card: var(--color-surface-dark); --preview-lock-heading: var(--color-heading-on-dark); --preview-lock-text: var(--color-text-on-dark); --preview-lock-error: var(--color-accent); /* Light Orange on Primary Navy, 6:1 */ --preview-lock-field-bg: var(--color-white); --preview-lock-field-text: var(--color-navy); /* The Contact page (2026-10-11). */ --contact-heading: var(--color-navy-secondary); /* [measured] "Other ways to reach us" (Secondary Navy) */ --contact-icon: var(--color-orange-dark); /* [measured, mobile file] the details' icons: Dark Orange, 3.33:1 on Cream (desktop drew Light Orange, 2.49:1, under the 3:1 icons need) */ --contact-social-bg: var(--color-navy); /* [measured] the 40px social circles */ --contact-social-fg: var(--color-white); --contact-social-bg-hover: var(--color-orange-deep); /* [proposal] a social circle's hover and focus fill (not designed); White on it 4.89:1 */ --color-link-accent: var(--color-orange-deep); /* [proposal] the consent line's "privacy policy" link, drawn Dark Orange (3.33:1 on Cream, under AA): deepened to 4.58:1 */ --request-field-border: var(--color-field-border); --request-field-height: var(--field-height); --checkout-summary-width: 400px; /* [proposal] the booking summary column from 1024px (checkout not designed, QB33) */ --request-panel-width: 640px; /* [proposal] the dialog from 600px wide, and the inline form's card */ /* The About page (2026-10-17): the team cards on Primary Navy. */ --team-card-bg: var(--color-surface-dark-alt); /* [measured] Secondary Navy cards */ --team-card-edge: var(--color-accent); /* [measured] the 3px Light Orange bottom edge */ --team-name: var(--color-text-on-dark); /* [measured] names in Cream (the section's H3s are White elsewhere) */ --team-role: var(--color-accent); /* [measured, Open: QH5] "- Core Team Instructor" as drawn: Light Orange on Secondary Navy is 4.42:1, just under AA's 4.5:1 for this size; #e39456 would give 4.83:1 (as --color-eyebrow-on-hero) */ --fs-team-role: clamp(16px, 14.45px + 0.3854vw, 20px); /* [measured] the cards' role: 16 phones, 20 desktop (the lead card's is --fs-intro, 18 / 20) */ --fs-team-quals: clamp(16px, 15.23px + 0.1927vw, 18px); /* [measured] "WMCI / RCI": 16 phones, 18 desktop */ /* The Bespoke page (2026-10-24): the service cards (the homepage's split card). */ --bespoke-cards-gap: clamp(30px, -1.76px + 7.9vw, 112px); /* [measured] between the cards: 30 phones (402), 112 desktop (1440, the section's own padding) */ /* The Coaching page (2026-10-24). */ --coaching-band-pad-y: clamp(48px, 44.9px + 0.7707vw, 56px); /* [measured] "When coaching becomes mentoring": 56 above and below at 1440 (the other sections take --section-pad-y); 48 on phones (not designed) */ --hero-course-logo-h: 48px; /* [working] the Mountain Training logo beside the hero's button on ML Training / Assessment (Sam 2026-11-03; not designed): about 144px wide */ --hero-course-logo-rule: color-mix(in srgb, var(--color-cream) 35%, transparent); /* [working] the thin rule between the button and that logo */ --coaching-price-season: var(--color-text-on-hero-muted); /* [working] the programme cards' "SUMMER" / "WINTER" (Sam 2026-11-03; not designed): Cream 90% on Primary Navy, about 12:1 */ --coaching-price-rule: color-mix(in srgb, var(--color-cream) 25%, transparent); /* [working] the hairline under them */ /* The Book page (2026-10-24): the dates table's "Course / Workshop" column, the title over "Workshop · Foundation · Rock". The level is drawn in its brand colour, too light for 13px text on the grey rows and cards (#F2F2F2): each is darkened with Primary Navy to pass AA on them (about 4.6:1 there, 5.2:1 on White). */ --fs-dates-title: 18px; /* [measured] the course title on a card (phones); the table's is --fs-body, as drawn */ --fs-dates-meta: 13px; /* [measured] the line under it */ --dates-title: var(--color-heading); /* [measured] Navy SemiBold */ --dates-meta: color-mix(in srgb, var(--color-grey-dark) 98%, var(--color-navy)); /* [measured, adjusted] drawn Grey Dark, 4.49:1 on #F2F2F2: with 2% Primary Navy 4.63:1 */ --dates-level-foundation: color-mix(in srgb, var(--color-level-foundation) 66%, var(--color-navy)); /* [proposal] drawn Foundation Green (2.69:1 on #F2F2F2): 4.68:1 */ --dates-level-progression: color-mix(in srgb, var(--color-level-progression) 72%, var(--color-navy)); /* [proposal] drawn Progression Blue (3.03:1): 4.61:1 */ --dates-level-development: color-mix(in srgb, var(--color-level-development) 53%, var(--color-navy)); /* [proposal] drawn Development Gold (1.85:1): 4.67:1, a darker gold */ --dates-level-leadership: var(--dates-status-full); /* [proposal] Leadership, in a level's place: the "Full" red, 4.8:1 */ /* Mountain Leader Development (2026-10-24): the ML Development page's calendar, the listing's callout card and the course pages' pathway (designs/ML Development, designs/Course page for ML Training). */ --ml-calendar-card-bg: var(--color-surface-dark-alt); /* [measured] the season cards on Primary Navy (Secondary Navy) */ --ml-calendar-rule: color-mix(in srgb, var(--color-white) 10%, var(--color-navy-secondary)); /* [measured] the rules between the dates (drawn #404965) */ --ml-calendar-months: var(--color-text-on-hero-muted); /* [measured] "Mar - May" (drawn about #E2DCDA) */ --ml-calendar-type: var(--color-eyebrow-on-hero); /* [working, Open: QH5] "20-21 Mar · Development Workshop" as drawn: Light Orange, 4.42:1 on Secondary Navy */ --ml-calendar-assessment: color-mix(in srgb, var(--color-leadership) 62%, var(--color-white)); /* [proposal] an assessment's (and a mock assessment's) line: drawn Leadership Red, 2.36:1 on Secondary Navy; lightened with White, #D2928F, 4.6:1 */ --fs-ml-season: 28px; /* [measured] "SPRING" (Koulen) */ --fs-ml-date-meta: 13px; /* [measured] the date and kind of a calendar row (SemiBold) */ --fs-ml-date-title: 15px; /* [measured] its course or workshop (SemiBold, White) */ --ml-points-rule: var(--color-border); /* [measured] the hairline over the journey's ticked points (Border Warm) */ --ml-callout-bg: var(--color-surface-dark-alt); /* [measured] the listing's "Mountain Leader Development" card (Secondary Navy) */ --fs-ml-callout-title: 32px; /* [measured] its title (Koulen 32/38) */ --ml-step-bg: var(--color-surface-dark); /* [measured] the course page's pathway cards (Primary Navy on Secondary Navy) */ --ml-here-border: var(--color-white); /* [measured] the "You are here" pill's outline and label */ --ml-help-pad-y: clamp(32px, 27.35px + 1.1561vw, 44px); /* [measured] "Not sure where to focus?": the band 44px above and below its panel at 1440; 32 on phones (not designed) */ /* Guiding (2026-10-17): the guided day pages, their enquiry form and the guiding list page. */ --color-link-hover-on-light: var(--color-orange-deep); /* [proposal] an inline text link's hover and focus colour on White / Cream (the Key Information AMI link): 4.58:1 on Cream, 4.89:1 on White (Dark Orange would be 3.33 / 3.55:1, under AA for text) */ --enquiry-column-gap: 32px; /* [measured] the enquiry form's two columns, 32px apart (desktop file) */ --enquiry-header-gap: 20px; /* [measured] the intro's last line to the first label: about 20px (desktop file; 12 on mobile) */ --enquiry-area-pad: 11px; /* [proposal] the objective box: one 24px line in the 48px field */ --enquiry-select-pad-end: 44px; /* [proposal] a select's text stops clear of its chevron */ --enquiry-caret-inset: 17px; /* [measured] the chevron's ink about 21px in from the field's right edge (the 20px icon has 4px of room each side) */ --color-season-pill-text: var(--color-white); /* [measured] season pill labels, numbers and "?" (White on Primary Navy, 16.1:1; the level pills draw theirs in the level colours) */ --color-season-pill-pressed: var(--color-accent); /* [proposal] a pressed season pill's fill and the hover ring (not designed): Light Orange, its Navy text and tick 6.05:1 */ --color-season-separator: var(--color-accent); /* [measured] the "//" between the two season pills (decorative) */ --color-badge-summer: var(--color-orange); /* [measured] guided day cards: the SUMMER badge's fill */ --color-badge-summer-text: var(--color-navy); /* [working, Open: QH5] its text: Navy on Light Orange 6.05:1 (drawn White, 2.66:1, under AA; the level badges' working value) */ --color-badge-winter: var(--color-navy); /* [measured] the WINTER badge's fill */ --color-badge-winter-text: var(--color-white); /* [measured] its text: White on Primary Navy 16.1:1 */ --color-card-guiding-bg: var(--color-grey-faint); /* [measured] a guided day card's fill on the guiding list (#F2F2F2; course cards are White): var(--color-surface) for White */ /* Buttons for light backgrounds: the dates' "Book now" and Enquire (solid) and the date cards' outline button (Buttons, below) [Open: QH4]. */ --btn-solid-border: var(--btn-primary-bg); /* [measured] the Book page's "Book now" (and the course pages' since 2026-10-25): the primary button on White, its edge Dark Orange (the primary's Cream edge is for dark backgrounds) */ --btn-solid-border-hover: var(--btn-primary-bg-hover); --btn-outline-bg: var(--color-white); /* [measured] the mobile date cards' "Join the waiting list" */ --btn-outline-fg: var(--color-navy); --btn-outline-border: var(--color-navy); --btn-outline-bg-hover: var(--color-navy); /* [proposal] hover and focus fill navy, label White (16.07:1) */ --btn-outline-fg-hover: var(--color-white); --btn-outline-border-hover: var(--color-navy); --btn-outline-light-fg: var(--color-white); /* [measured] the ML calendar's "Book" / "Request" on Secondary Navy: no fill, a 1px White outline and label */ --btn-outline-light-border: var(--color-white); --btn-outline-light-bg-hover: var(--color-white); /* [proposal] hover and focus filled White, label Navy (16.07:1) */ --btn-outline-light-fg-hover: var(--color-navy); /* The account (2026-10-25, account-*-v1; inc/account.php, account.css). Not drawn: the payment and joining boxes, the login card, the stage rows' states (measured in the files otherwise). Badge text Navy, as the site's other badges (the files draw White on the light fills: QH5). */ --account-sidebar-w: 338px; /* [measured] the menu's column: x 80-418 at 1440 */ --account-sidebar-bg: var(--color-navy-secondary); --account-menu-current-bg: var(--color-navy); --account-menu-icon: var(--color-accent); --fs-account-menu: 20px; /* [measured] Poppins Medium 20 */ --account-bar-bg: var(--color-navy-secondary); /* phones and tablets: the bottom bar */ --account-bar-h: 74px; --shadow-account-bar: 0 -2px 12px rgb(0 0 0 / 0.18); /* [proposal] the bottom bar's edge over the page */ --account-card-upcoming: var(--color-cream); --account-card-past: var(--color-grey-faint); --account-badge-booked-bg: var(--color-orange); --account-badge-booked-fg: var(--color-navy); --account-badge-attended-bg: var(--color-navy); --account-badge-attended-fg: var(--color-white); --account-details-bg: var(--color-grey-faint); --account-link: var(--color-link-accent); /* "View Booking & Resources", "Contact Us" on light: drawn Light Orange (2.5:1), deep orange 4.9:1 */ --account-link-hover: var(--color-link); /* [proposal] their hover / keyboard focus: Navy (Emma 2026-10-26: "change colour on hover"), as the menu's "See the full ML pathway" */ --account-row-link-hover: var(--color-accent); /* [proposal] the course library's View / Download on Primary Navy: Light Orange (6.05:1) */ --account-row-rule: color-mix(in srgb, var(--color-cream) 55%, var(--color-navy)); /* the course library's rules on Primary Navy */ --account-done: var(--color-accent); /* a done row's text on Primary Navy (6.05:1) */ --pathway-card-bg: var(--color-grey-faint); --pathway-column-bg: var(--color-cream); --pathway-step-bg: var(--color-white); --pathway-here: var(--color-navy); --pathway-mark: var(--color-link-accent); /* "RECOMMENDED NEXT STEP", "RELEVANT WORKSHOP": drawn Light Orange 11px (2.4:1 on White) */ --account-stat-figure: var(--color-accent); --account-services-bg: var(--color-navy-secondary); /* [measured] My Progression's "Private & Bespoke Services": the band Secondary Navy, */ --account-services-row-bg: var(--color-navy); /* [measured] its rows Primary Navy (the homepage's the other way round), apart from the footer */ --account-faqs-bg: var(--color-surface-dark-alt); /* [measured] one booking's FAQs: Secondary Navy, as drawn, apart from the footer (Emma 2026-10-26) */ --account-faqs-tab-bg: var(--color-surface-dark); /* [measured] and their tabs Primary Navy (the course page's the other way round) */ /* The Medical, Emergency & Consent Form (2026-10-26, not designed; inc/health-forms.php): the form's page (its rows in the course library use the library's own colours). */ --health-done: var(--color-heading); /* [proposal] "Completed ..." and its tick: Navy */ --health-error: var(--color-error); --health-statement-bg: var(--color-grey-faint); /* [proposal] the medical form's panels: the course shown, the parent or guardian's parts, notes */ --health-form-max: 52rem; /* [proposal] the form's measure */ /* The password fields' show / hide eye (account.css): masks, drawn in the button's own colour (the black here is only the mask's opacity). */ --mask-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.6 5 2.8 9.2 1.4 12c1.4 2.8 5.2 7 10.6 7s9.2-4.2 10.6-7C21.2 9.2 17.4 5 12 5zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.4a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2z' fill='black'/%3E%3C/svg%3E"); --mask-eye-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.6 5 2.8 9.2 1.4 12c1.4 2.8 5.2 7 10.6 7s9.2-4.2 10.6-7C21.2 9.2 17.4 5 12 5zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2.4a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2z' fill='black'/%3E%3Cpath d='M3.5 3.5l17 17' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); /* Knowledge Hub (2026-10-17): the Hub, the article page and the article card (Knowledge hub v1, article page v1, course v3; measured in the build spec, Open: QH5 for the small orange text and badge text). The card's own sizes are in article-card.css. */ --color-badge-all-levels: var(--color-orange); /* [measured] the "ALL LEVELS" badge's fill (Light Orange) */ --color-badge-all-levels-text: var(--color-navy); /* [working, Open: QH5] its text: Navy on Light Orange 6.05:1 (drawn White, 2.66:1, under AA; as --color-badge-summer-text) */ --color-badge-featured: var(--color-navy); /* [measured] the "FEATURED" pill's fill (Primary Navy) */ --color-badge-featured-text: var(--color-white); /* [measured] its text: White on Primary Navy 16.07:1 */ --article-card-photo-ratio: 389 / 271; /* [measured] the card photo inside the border (all three desktop files; the phones' cards are a scaled copy) */ --article-card-pad-x: 19px; /* [measured] the card's text inset inside its border (drawn 19 left, 21 right: made even) */ --featured-photo-ratio: 486 / 369; /* [measured] the featured card's photo, left of its text from 768px */ --gap-article-cards: 36px; /* [proposal] article card grids below 1024px, as the course cards' stack (the phone files draw 22 on the Hub, 45 elsewhere) */ --gap-article-cards-wide: 46px; /* [measured] three across from 1024px: 45-46 between the cards' outer edges */ --kh-panels-bg: var(--color-surface-dark-alt); /* [measured] the Hub's band behind the course resources and newsletter panels (Secondary Navy) */ --color-placeholder-on-dark: var(--color-grey-mid); /* [measured] the newsletter panel's "Email" placeholder: Grey Mid on Secondary Navy 5.48:1 (the footer's is Cream) */ --article-sidebar-bg: var(--color-surface-dark-alt); /* [measured] "On This Page" and "Put it into practice" (Secondary Navy) */ --article-sidebar-text: var(--color-text-on-dark); /* [measured] their headings and links in Cream (11.01:1; panel headings elsewhere are White) */ --article-sidebar-w: 367px; /* [measured] the sidebar's width at 1440 */ --article-practice-link: var(--color-accent); /* [working, Open: QH5] the arrow of "See recommended learning" (Light Orange); its label is Cream (the drawn Dark Orange text is 3.31:1 on Secondary Navy, under AA) */ --article-measure: 50rem; /* [proposal] the article text's line length (drawn 794-851px boxes; images and the author box take the full 866px column) */ --article-figure-gap: clamp(48px, 44.9px + 0.7707vw, 56px); /* [proposal] space above and below a body image: 48 on phones, 56 at 1440 (drawn 34-77) */ --article-next-bg: var(--color-grey-faint); /* [measured] the "Where to go from here" band (#F2F2F2) */ --author-box-bg: var(--color-surface-warm); /* [measured] the author box (Cream, Border Warm outline) */ --pathway-ring: var(--color-accent); /* [measured, mobile file] "Relevant workshop" ring round a pathway card, and the hover ring (decorative) */ --pathway-column-radius: 10px; /* [measured] a pathway's level column */ --pathway-card-radius: 5px; /* [measured] a pathway's course card */ --fs-panel-title-sm: 32px; /* [measured] "ON THIS PAGE", "PUT IT INTO PRACTICE" (Koulen 32) */ --fs-toc-link: var(--fs-body); /* [Emma 2026-10-18] the "On This Page" and "Put it into practice" links: 16px (drawn Poppins SemiBold 20/30) */ --article-table-head-bg: var(--color-grey-faint); /* [proposal] a table's header row in an article (not designed; Navy on it 14.36:1) */ --article-quote-rule: var(--color-accent); /* [proposal] a quote's left rule in an article (not designed; decorative) */ /* Course resources (2026-11-02): Sam's resource pages (the article's body; single-ldm_resource.php, the account's resource page). */ --article-note-bg: var(--color-surface-warm); /* [proposal] a Note paragraph (is-style-note: "Before you pack", "Open the map"): Cream (Navy text on it 15.6:1) */ --article-note-edge: var(--color-accent); /* [proposal] its 3px left edge, Light Orange (decorative) */ --article-note-edge-w: 3px; /* [proposal] as the team cards' and pathway edges */ } /* Logged in, the WordPress toolbar is fixed above the page from 601px (its own breakpoint); on phones it scrolls away with the page. */ @media (min-width: 601px) { :root { --toolbar-fixed-h: var(--wp-admin--admin-bar--height, 0px); } } @media (min-width: 1024px) { :root { --header-bar-h: 104px; /* [decided] Miles 2026-10-11: slightly taller than the designed 95 */ --lh-hero: 1.125; /* 64/72 */ --lh-h2: 1.25; /* 48/60 */ } } /* ============================================================ Reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* In-page links (the hero's "Browse Pathways" to #progression) glide unless the visitor prefers reduced motion. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Until the page has loaded (header.php), nothing transitions: on a cold load the browser can paint a component before its styles settle (size containers especially), which would then animate in. */ html.is-preload *, html.is-preload *::before, html.is-preload *::after { transition: none !important; } /* Room for the WordPress toolbar only where it stays fixed (core pads by its height at every width, also on phones where it scrolls away). */ :root { scroll-padding-top: var(--toolbar-fixed-h); } /* Keyboard focus moving back up the page lands clear of the floating header (navigation.js 3, header.css "On scroll"): the browser scrolls a focused element just to the top edge, where the header comes back over it (WCAG 2.2 2.4.11); the toolbar is the scroll padding above. Focus only - a non-focusable anchor target still lands at the top, and scrolling down to one sends the header away. A target that scripts focus (tabindex="-1") keeps no room either: focus it once the scroll has ended, or at once with { preventScroll: true }. */ html.has-js :focus { scroll-margin-top: calc(var(--header-bar-h) + var(--header-focus-clearance)); } html.has-js [tabindex="-1"]:focus { scroll-margin-top: 0; } body { margin: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { display: block; max-width: 100%; height: auto; } svg { max-width: 100%; } h1, h2, h3, h4, h5, h6, p, figure { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* ============================================================ Base typography Koulen is display-only and always uppercase (Brand). It has one weight, so never let the browser fake bold or italic. ============================================================ */ h1, h2, .display { font-family: var(--font-display); font-weight: var(--fw-display); font-synthesis: none; text-transform: uppercase; color: inherit; } h1 { font-size: var(--fs-h1); line-height: var(--lh-display); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } /* Focus: always visible for keyboard users, Light Orange on dark backgrounds by default (components on light backgrounds can switch to --color-focus-light). */ :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* ============================================================ Layout ============================================================ */ /* 1280px of content at 80px gutters on desktop (box-sizing includes the padding, hence the calc), 14px gutters on phones. */ .container { width: 100%; max-width: calc(var(--container-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } /* Tablet rule (littledale lesson, made automatic): between 768 and 1023px media in a BEM "__media" wrapper is capped and centred, so images never balloon to the mobile layout stretched wide. Full-bleed backgrounds must use a different element name (e.g. hero__bg). */ @media (min-width: 768px) and (max-width: 1023px) { [class*="__media"] { max-width: 640px; margin-inline: auto; } } /* ============================================================ Sections - the page-section wrapper and the shared section header (ldm_section_header() in inc/sections.php): eyebrow, H2, intro, and an optional aside - the "View all" arrow link, which sits right of the intro on desktop, bottom-aligned with its last line, and under it below 1024px (brief 2.5). Spacing measured on Home v4 (font metrics: Koulen caps sit about 11px into a 48/60 line box, 6px into 36/40): - eyebrow caps to H2 caps 36px desktop, 30px phones; - H2 caps to intro text about 33px at both widths; - section top to the eyebrow 111 / 80 (--section-pad-y); - intro box about 880px when the aside sits beside it. ============================================================ */ .section { padding-block: var(--section-pad-y); } .section--white { background-color: var(--color-surface); color: var(--color-text); } .section--cream { background-color: var(--color-surface-warm); color: var(--color-text); } .section--navy { background-color: var(--color-surface-dark); color: var(--color-text-on-dark); } .section--navy h2, .section--navy h3 { color: var(--color-heading-on-dark); } .section-header { margin-bottom: clamp(32px, 25.8px + 1.5414vw, 48px); /* 32 phones, 48 at 1440 */ } .section-header__title { margin-top: 12px; } .section-header__intro { margin-top: 20px; } .section-header__intro p + p { margin-top: 24px; } .section-header__aside { margin-top: 16px; } /* Light backgrounds by default (White, Cream, or a section without a colour class): the label stays Navy and on hover and focus the arrow turns Dark Orange (--color-arrow-hover-on-light), so the hover shows without motion too. */ .section-header__link { color: var(--color-link); } .section-header__link:hover .icon, .section-header__link:focus-visible .icon { color: var(--color-arrow-hover-on-light); } .section-header__link:focus-visible { outline-color: var(--color-focus-light); } /* Navy: the whole link turns Light Orange, the arrow with it. */ .section--navy .section-header__link { color: var(--color-link-on-dark); } .section--navy .section-header__link:hover, .section--navy .section-header__link:focus-visible { color: var(--color-link-hover-on-dark); } .section--navy .section-header__link .icon { color: inherit; } .section--navy .section-header__link:focus-visible { outline-color: var(--color-focus); } @media (min-width: 1024px) { .section-header__title { margin-top: 13px; } .section-header__intro { margin-top: 12px; } .section-header--split { display: grid; grid-template-columns: minmax(0, 55rem) auto; justify-content: space-between; align-items: end; column-gap: 40px; } .section-header--split .section-header__aside { margin-top: 0; } } /* A heading with no eyebrow above it needs no room for one. */ .section-header__title:first-child { margin-top: 0; } /* ============================================================ Carousel dots (assets/js/carousel.js builds them). 11px dots, each button a 24 x 44 target: WCAG 2.2 AA target size (2.5.8) needs 24px, so the dots sit on a 24px pitch (13px apart) instead of the designed 19px (8px apart). The track itself can also be swiped, dragged with a mouse or scrolled with the keyboard. Light backgrounds by default; --on-dark for navy. ============================================================ */ .carousel-dots { display: flex; justify-content: center; } .carousel-dots[hidden] { display: none; } .carousel-dots__dot { display: grid; place-items: center; width: 24px; height: var(--tap-target); padding: 0; border: 0; background: none; color: var(--color-dot); transition: color var(--transition); } .carousel-dots__dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background-color: currentColor; } .carousel-dots__dot:hover { color: var(--color-dot-hover); } .carousel-dots__dot.is-active { color: var(--color-dot-active); } .carousel-dots__dot:focus-visible { outline: none; } .carousel-dots__dot:focus-visible::before { outline: 2px solid var(--color-focus-light); outline-offset: 2px; } .carousel-dots--on-dark .carousel-dots__dot { color: var(--color-dot-on-dark); } .carousel-dots--on-dark .carousel-dots__dot:hover { color: var(--color-dot-hover-on-dark); } .carousel-dots--on-dark .carousel-dots__dot.is-active { color: var(--color-dot-active-on-dark); } .carousel-dots--on-dark .carousel-dots__dot:focus-visible::before { outline-color: var(--color-focus); } /* Windows High Contrast drops backgrounds, so the dots would vanish: each gets a ring in the button colour and the current one a Highlight disc. */ @media (forced-colors: active) { .carousel-dots__dot::before { border: var(--border-hairline) solid currentColor; } .carousel-dots__dot.is-active::before { border-color: var(--color-forced-active); background-color: var(--color-forced-active); forced-color-adjust: none; } } /* A track a mouse can drag (carousel.js sets .is-draggable while it overflows): the grab cursor where there is a mouse (links in it keep their pointer), the closed hand everywhere on it during a drag. */ @media (hover: hover) and (pointer: fine) { [data-carousel-viewport].is-draggable { cursor: grab; } } [data-carousel-viewport].is-dragging, [data-carousel-viewport].is-dragging * { cursor: grabbing; } /* ============================================================ Buttons - ONE global system. Never write a one-off button inside a component. The button itself never lifts, scales or changes its shadow (house rule); hover and keyboard focus change colour only - the primary fill deepens to --color-orange-deep, label and border unchanged (Miles 2026-10-05) - and every hover must be clearly visible. An arrow inside a button slides like every arrow on a hover target (Arrow link, below). ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; border: var(--border-button) solid var(--btn-primary-border); border-radius: var(--radius-pill); background-color: var(--btn-primary-bg); color: var(--btn-primary-fg); font-family: var(--font-body); font-weight: var(--fw-bold); line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--transition), border-color var(--transition), color var(--transition); } .btn:hover, .btn:focus-visible { background-color: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border-hover); color: var(--btn-primary-fg-hover); } /* Large: 210 x 57 with an 18px uppercase label ("BROWSE COURSES"). */ .btn--lg { min-height: 57px; padding: 0 20.25px; font-size: var(--fs-ui-lg); text-transform: uppercase; } /* Medium: 52px tall with a 16px uppercase label, for a button that shares a phone-width bar - the filter panel's "Show N results" beside "Clear all" (an 18px label does not fit there at 320px). */ .btn--md { min-height: 52px; padding: 0 20.25px; font-size: var(--fs-body); text-transform: uppercase; } /* Full width (the Contact form's "Send message"). */ .btn--block { width: 100%; } /* Small: the header "Book" pill, 85 x 46, 16px title case, 1px border. */ .btn--sm { min-height: 46px; padding: 0 21px; border-width: var(--border-hairline); font-size: var(--fs-body); } /* Soft halo for buttons sitting on photos (mobile design); unchanged on hover and focus. */ .btn--on-photo { box-shadow: var(--shadow-button); } /* Wrap: a long label may take two balanced lines rather than overflow a narrow screen (the course hero's "Enquire about reassessment" on 320-360px phones; one line wherever it fits). Only the label's layout changes; after .btn--lg, whose padding it overrides. */ .btn--wrap { max-width: 100%; padding-block: 12px; white-space: normal; text-align: center; text-wrap: balance; } /* Extra small: 44px tall with a 14px SemiBold label (the course page's dates: the file draws 41px in the table, 45-48 on the cards). */ .btn--xs { min-height: 44px; padding: 0 21px; font-size: var(--fs-small); font-weight: var(--fw-semibold); } /* Smallest: a 30px pill with a 12px Medium label and a 1px edge, for a button in a dense list (the ML Development page's calendar: "Book", "Request"; drawn 51 x 30). 30px clears WCAG 2.2's 24px target size. */ .btn--xxs { min-height: 30px; padding: 0 12px; border-width: var(--border-hairline); font-size: var(--fs-label); font-weight: var(--fw-medium); } /* Two colour variants for light backgrounds (the dates), after the base hover rule they override: - solid: the primary button (Dark Orange, Cream label, the deeper orange on hover and focus) with a Dark Orange edge - every "Book now" (the Book page's as drawn, Book v2; the course pages' since 2026-10-25, Emma: "dark orange, to match other buttons", drawn Light Orange) and the enquiry-only pages' Enquire; - outline: White with a Navy border and label - the date cards' "Join the waiting list" and "Register interest"; hover and focus filled Navy with a White label. Both take the Dark Orange focus ring of light backgrounds. */ .btn--solid { border-color: var(--btn-solid-border); } .btn--solid:hover, .btn--solid:focus-visible { border-color: var(--btn-solid-border-hover); } .btn--outline { border-color: var(--btn-outline-border); background-color: var(--btn-outline-bg); color: var(--btn-outline-fg); } .btn--outline:hover, .btn--outline:focus-visible { border-color: var(--btn-outline-border-hover); background-color: var(--btn-outline-bg-hover); color: var(--btn-outline-fg-hover); } .btn--solid:focus-visible, .btn--outline:focus-visible { outline-color: var(--color-focus-light); } /* Outline on dark backgrounds (the ML calendar on Secondary Navy): no fill, a White edge and label; hover and focus filled White with a Navy label. The light focus ring of dark backgrounds (--color-focus). */ .btn--outline-light { border-color: var(--btn-outline-light-border); background-color: transparent; color: var(--btn-outline-light-fg); } .btn--outline-light:hover, .btn--outline-light:focus-visible { border-color: var(--btn-outline-light-border); background-color: var(--btn-outline-light-bg-hover); color: var(--btn-outline-light-fg-hover); } /* An arrow inside a button (the newsletter submit's chevron) slides right on hover and keyboard focus like every other arrow; not under reduced motion, and hover only where the pointer can hover (a tap on a touch screen leaves nothing shifted). */ .btn :is(.icon--arrow-right, .icon--arrow-thin, .icon--double-chevron) { transition: transform var(--transition); } @media (prefers-reduced-motion: no-preference) { .btn:focus-visible :is(.icon--arrow-right, .icon--arrow-thin, .icon--double-chevron) { transform: translateX(var(--arrow-nudge)); } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .btn:hover :is(.icon--arrow-right, .icon--arrow-thin, .icon--double-chevron) { transform: translateX(var(--arrow-nudge)); } } /* ============================================================ Arrow link - the "secondary button": label + arrow (ldm_arrow_link() in inc/sections.php). 14-16px links: the arrow sits 10px after the label, about 11 x 5 (the "arrow-thin" icon at 12px). Hover and keyboard focus (Miles, 2026-10-05): the arrow slides --arrow-nudge to the right and the label is never underlined; the arrow (or a component's label) also changes colour, which is the cue under reduced motion, when nothing moves. The same applies to every other arrow on a hover target: card CTAs, service rows, menu cards, the newsletter submit. The slide on hover is limited to pointers that can hover, so a tap on a touch screen leaves nothing shifted. The --underline variant (the hero's "Browse Pathways", underlined at rest as designed) keeps its underline. While motion is welcome the link box reserves the slide in its right padding (pulled back by a matching negative margin, so nothing moves) and the keyboard focus ring clears the slid arrow. Windows High Contrast underlines the labels (links there are told apart by shape) and lets the arrows follow the system colours, on a backplate of the page colour inside links so they show on photos. ============================================================ */ .arrow-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; font-weight: var(--fw-semibold); text-decoration: none; transition: color var(--transition); } .arrow-link .icon { flex: none; width: 12px; height: 12px; transition: transform var(--transition), color var(--transition); } .arrow-link--underline .arrow-link__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } @media (prefers-reduced-motion: no-preference) { .arrow-link { margin-right: calc(-1 * var(--arrow-nudge)); padding-right: var(--arrow-nudge); } .arrow-link:focus-visible .icon { transform: translateX(var(--arrow-nudge)); } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .arrow-link:hover .icon { transform: translateX(var(--arrow-nudge)); } } /* The course card's "View" span is decorative (not a link), so only real arrow links are underlined. */ @media (forced-colors: active) { a.arrow-link .arrow-link__text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .icon--arrow-right, .icon--arrow-thin, .icon--double-chevron { forced-color-adjust: auto; } /* Text gets a backplate of the page colour there, an icon does not: arrows inside links get one, so an arrow drawn on a photo (menu cards, pathway cards, the hero) stays visible. Every other background is the page colour in this mode, so elsewhere it does not show (a