/* ========================================================================== Breakpoints — the sanctioned set, and why each one exists. CSS cannot use a custom property inside a media query, so these are literals at each use site and this comment is the only place they are defined. That is exactly why a stray value is easy to introduce and hard to notice: this theme had six (640, 767, 782, 900, 1024/1025, 1800), three of which no two components agreed on. dev/audit-breakpoints.py fails the build on any value not listed here, so adding one is a deliberate act with a reason attached rather than a number picked to make one section look right. 767 / 768 NARROW. The top of "phone", Kadence's own tablet boundary. Below it the signup band stacks and the footer stacks. 900 TWO-UP. Where the hero takes its side-by-side scrim and the Watch slide splits into panel + video. Set by the Watch panel, which is 29.4% of its row: below 900 that falls under about 200px, which is too narrow for a title and a description. This is a content measurement, not a device size. 1024 / 1025 DESKTOP. The header drops the drawer for the full navigation. Kadence's value, set in the Customizer, so the theme follows it rather than choosing its own and disagreeing. 1800 ASSET, not layout. Switches the signup photograph to the largest file. Changes no geometry. The season grid is deliberately absent: it uses auto-fit and has no breakpoints at all. Prefer that where a layout's real constraint is a minimum element width — it cannot drift out of step with the gap. ========================================================================== */ /* ========================================================================== GSJC design tokens Source of truth: gsjc_brand-guidelines.pdf (ver.1, 19pp) — the GUIDE governs wherever it disagrees with the one-sheet PNG. Disagreements are noted inline. Two layers live here: 1. Brand tokens (--gsjc-*) — the palette exactly as specified 2. Kadence bridge (--global-palette*) — so every Kadence control and block inherits the brand with no per-block overrides. Do not delete this layer; it is why the parent theme behaves. ========================================================================== */ :root { /* --- Brand palette (guide p.6) ---------------------------------------- */ --gsjc-ochre: #e5b141; --gsjc-sandstone: #eae0cc; --gsjc-umber: #110c08; --gsjc-white: #ffffff; /* guide p.6 says #FFFFFF; one-sheet said #fffeff */ --gsjc-olive: #69913e; --gsjc-sage: #b8d990; --gsjc-aubergine: #681d5a; /* guide spells it "Aubergine"; one-sheet "Abergine" */ --gsjc-coral: #e89e91; /* guide p.5 also calls this "Muted Pink" — same colour */ /* Derived neutrals. Not in the guide; needed because the brand has no mid tones and Kadence requires a text ramp. Measured, not eyeballed: --gsjc-ink-muted 5.90:1 on Sandstone (worst light ground) — AA for text --gsjc-line 1.23:1 — decorative only, never text */ --gsjc-ink-strong: #3f372f; /* 8.91:1 on Sandstone */ --gsjc-ink-muted: #5b5148; /* 5.90:1 on Sandstone */ --gsjc-ink-subtle: #6b6058; /* 4.66:1 on Sandstone — the lightest that still clears AA on every light ground. Kadence calls this slot "Subtle text", and subtle text is still text. */ --gsjc-line: #d6cbb4; /* borders only; 1.61:1, never text. Deliberately NOT a palette slot — all ten are spoken for. */ /* Hairline rule between nav items. The mockup draws rgb(112,112,112) on Sandstone; this is Umber at the alpha that reproduces it, so it stays in the palette and works on any ground rather than only on Sandstone. */ --gsjc-rule: rgba(17, 12, 8, 0.55); --gsjc-subtle: #faf6ee; /* adopted from the dev site's existing palette: marginally better contrast than the guide's own page ground and already in use - no reason to churn */ /* --- CONTRAST RULE — measured, and binding ---------------------------- On LIGHT grounds (White, Sandstone, Subtle) only Umber and Aubergine are legal for text: Umber/white 19.45 Umber/sandstone 14.85 Aubergine/white 10.92 Aubergine/sandstone 8.39 Ochre (1.95), Coral (2.15) and Sage (1.56) FAIL on white — fills only. Olive fails everywhere except on Umber (5.30); it is a background colour, not a text colour. The guide (p.16) assigns Olive/Sage to "People" content — soloists and member highlights — which is a fill role, so this holds. Confirmed 2026-09-07: Olive is for interior-page section backgrounds, and text on it must be Umber. On DARK grounds (Aubergine, Umber) that inverts: Ochre, Coral, Sage and White all clear AA. ---------------------------------------------------------------------- */ /* --- Semantic roles --------------------------------------------------- */ --gsjc-ink: var(--gsjc-umber); --gsjc-primary: var(--gsjc-aubergine); --gsjc-accent: var(--gsjc-ochre); --gsjc-surface: var(--gsjc-white); --gsjc-surface-alt: var(--gsjc-sandstone); --gsjc-surface-subtle: var(--gsjc-subtle); --gsjc-surface-feature: var(--gsjc-aubergine); --gsjc-surface-invert: var(--gsjc-umber); --gsjc-on-dark: var(--gsjc-sandstone); --gsjc-on-feature: var(--gsjc-ochre); /* --- Typography (guide pp.9-13) --------------------------------------- Besley = Primary — headlines and key messaging (Medium / 500) Red Hat = Secondary — subheads and body Besley Italic = HIGHLIGHT, a third role the one-sheet omits: an accent face "used exclusively with the Primary Typeface to highlight key words … use it sparingly." It is not a body italic — never set a paragraph in it. */ --gsjc-font-head: 'Besley', Georgia, 'Times New Roman', serif; --gsjc-font-body: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --gsjc-weight-head: 500; /* Besley Medium */ --gsjc-weight-body: 400; --gsjc-weight-caption: 600; /* Red Hat Semibold (guide p.13 "Caption") */ --gsjc-weight-bold: 700; /* Tracking. The guide gives InDesign kerning in 1/1000 em (p.13): headline +20, pullout -15, caption/body -10. */ --gsjc-track-head: 0.02em; --gsjc-track-pullout: -0.015em; --gsjc-track-body: -0.01em; /* Type scale. Anchored to a measurement off the mockup: the "2026-2027 Season" heading has a 51px cap height on the 1920px canvas, and the mockup's content column is ~1730/1920 — which maps to a 1300px container, i.e. mockup px x 0.751. That puts the section heading at ~55px. Calibrate against the mockup at 1440 before sign-off. */ --gsjc-fs-display: clamp(2.5rem, 4.20vw, 4.000rem); /* 40 -> 64 */ --gsjc-fs-h1: clamp(2.25rem, 3.60vw, 3.4375rem); /* 36 -> 55 */ --gsjc-fs-h2: clamp(1.875rem, 2.80vw, 2.625rem); /* 30 -> 42 */ --gsjc-fs-h3: clamp(1.5rem, 2.00vw, 1.875rem); /* 24 -> 30 */ /* Text sizes raised one step on 2026-09-16 at the designer's request: the smallest text to 16 (was 14) and body copy to 18 (was 17), "cascading up the chain" so each step stays distinct — nav to 16 or it would have been the new smallest, lead to 20 to stay one step above body. h4 at 22 still clears the lead. Kadence's Customizer base font size (Typography → Base) carries the same 18: it prints its own body rule and the two must agree. */ --gsjc-fs-h4: 1.375rem; /* 22 */ --gsjc-fs-lead: 1.25rem; /* 20 */ --gsjc-fs-body: 1.125rem; /* 18 */ --gsjc-fs-meta: 1.125rem; /* 18 - card date line */ --gsjc-fs-small: 1rem; /* 16 - location, captions, buttons */ --gsjc-fs-nav: 1rem; /* 16 */ --gsjc-lh-tight: 1.05; --gsjc-lh-head: 1.15; --gsjc-lh-body: 1.6; /* --- Space & measure --------------------------------------------------- */ --gsjc-container: 1290px; /* matches the dev site's existing Kadence content width; the mockup derivation gave ~1300, which is within noise, so this is one less setting to change */ --gsjc-gutter: clamp(1rem, 4vw, 3.75rem); --gsjc-space-3xs: 0.25rem; --gsjc-space-2xs: 0.5rem; --gsjc-space-xs: 0.75rem; --gsjc-space-sm: 1rem; --gsjc-space-md: 1.5rem; --gsjc-space-lg: 2rem; --gsjc-space-xl: 3rem; --gsjc-space-2xl: 4rem; --gsjc-space-3xl: 6rem; --gsjc-space-4xl: 8rem; --gsjc-radius-sm: 2px; --gsjc-radius-pill: 999px; --gsjc-ease: cubic-bezier(0.2, 0, 0.1, 1); } /* ========================================================================== Kadence bridge Kadence exposes nine palette slots that every one of its controls and blocks reads from. Slots 4-6 are its TEXT ramp, so per the contrast rule above they may only ever hold Umber or a derived neutral — never Ochre, Coral, Sage or Olive. Slots 7-9 are its background ramp. This file loads AFTER Kadence's generated palette, so at equal :root specificity these values win on the front end. The Customizer must still be set to match (docs/kadence-settings.md) for a different reason: the block editor's colour picker reads the Customizer, and blocks save literal hex into post content. If the two disagree, the site renders correctly but editors pick from the wrong swatches — which is worse, because it is invisible until someone has built a page on the wrong colours. ========================================================================== */ :root { --global-palette1: var(--gsjc-aubergine); /* Accent */ --global-palette2: var(--gsjc-ochre); /* Accent - alt */ --global-palette3: var(--gsjc-umber); /* Strongest text */ --global-palette4: var(--gsjc-ink-strong); /* Strong text */ --global-palette5: var(--gsjc-ink-muted); /* Medium text */ --global-palette6: var(--gsjc-ink-subtle); /* Subtle text */ --global-palette7: var(--gsjc-sandstone); /* Subtle background */ --global-palette8: var(--gsjc-subtle); /* Lighter background */ --global-palette9: var(--gsjc-white); /* White or offwhite */ --global-palette10: var(--gsjc-coral); /* Accent - complement */ --global-palette-highlight: var(--gsjc-aubergine); --global-palette-btn-bg: var(--gsjc-aubergine); --global-palette-btn: var(--gsjc-white); --global-palette-btn-bg-hover: var(--gsjc-umber); --global-palette-btn-hover: var(--gsjc-white); --global-content-width: var(--gsjc-container); /* --global-content-narrow-width is deliberately NOT bridged. It is the Customizer's number (Layout → Narrow Layout Content Max Width) and the Content Width dropdown on every page depends on it: a value written here would win over the setting and make the setting a lie. It did, at 860, until 2026-09-16. */ --global-body-font-family: var(--gsjc-font-body); --global-heading-font-family: var(--gsjc-font-head); --global-primary-nav-font-family: var(--gsjc-font-body); } /* Olive and Sage have no palette slot — all ten are spoken for, and both are fill-only (Olive 3.67:1 on white, Sage 1.56:1). They live as classes instead. Coral does have a slot, as the accent complement, but the same rule applies: it is a fill, and text on it must be Umber. */ .has-gsjc-coral-background-color { background-color: var(--gsjc-coral); color: var(--gsjc-umber); } /* Olive takes UMBER text, never white. Measured on an Olive ground: Umber 5.30 - AA at every size White 3.67 - FAILS normal text; large/display only Sage 2.34 - decorative only, despite the guide pairing them (p.5) An earlier revision of this file set white here, which would have shipped 3.67:1 body copy the moment the class was used. */ .has-gsjc-olive-background-color { background-color: var(--gsjc-olive); color: var(--gsjc-umber); } .has-gsjc-sage-background-color { background-color: var(--gsjc-sage); color: var(--gsjc-umber); }