/* ============================================================
1st Brabazon Scout Group — shared stylesheet
Palette: Scouts Navy #003982 | Scouts Yellow #FFE627 | cream #F7F5F1, plus the five
Scouts section colours (see "Section branding")
Type: Nunito Sans (Scouts brand typeface, all weights)
============================================================ */
/* --- Self-hosted web font (latin subset, variable) -----------------------
Nunito Sans is the Scouts brand typeface (brand guidelines v3.3, p34). It is a
free Google font, but it is self-hosted deliberately: that drops the third-party
call (visitor IPs stay off Google) and removes the render-blocking request to
fonts.googleapis.com. One variable file covers the whole brand weight range —
Light 300, Regular 400, Bold 700, Extra Bold 800, Black 900 — for 31KB, replacing
the 68KB of Bricolage Grotesque + Public Sans it succeeded. */
@font-face {
font-family: "Nunito Sans";
src: url("fonts/nunito-sans.woff2") format("woff2");
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
:root {
--navy: #003982;
--navy-2: #0a4d9e;
/* --gold/--gold-soft keep their names to stay in step with the .btn-gold and
.tag-* classes in the HTML; the value is Scouts Yellow. */
--gold: #ffe627;
--gold-soft: #fff5a9;
--cream: #f7f5f1;
--white: #ffffff;
--ink: #003982;
--muted: #565c77;
--line: #e3ded6;
--ok: #1b7f4d;
--danger: #b3261e;
/* ---- Accent: the colour a page leads with -------------------------------
Everything below the header and above the footer paints from these tokens
rather than naming a colour directly, so a page can re-point them at its own
section colour (see "Section branding" below) and the whole body of the page
follows. The defaults are Scouts Navy, the 1st Brabazon colour, which is what
group-wide pages — home, join, parents, trustees, news, contact — use.
The header and footer deliberately do NOT read these: they are Scouts Navy and
Scouts Yellow on every page, so the 1st Brabazon frame is constant while the
content inside it changes colour. On a group-wide page the two now agree, which
is the point — the whole page is the group's own colour.
--accent-2 is lighter than --accent under the group theme and darker under a
section theme. That is deliberate: it has to stay visible against BOTH --accent
and the navy body text, and navy is already the darkest ink on the page.
--accent marks and text on cream/white, and fills behind white text
--accent-2 the second shade: links, hovers, and button hover fills
--accent-soft a 10% tint for icon plates and panels
--accent-ring the focus glow on form fields (rgba, so it can sit under 20%) */
--accent: var(--navy);
--accent-2: var(--navy-2);
--accent-soft: #e6ebf3;
--accent-ring: rgba(0, 57, 130, 0.18);
/* The flat block behind a hero. Scouts Navy leads on group-wide pages; a section
theme swaps in its own colour. It is a separate token from --accent because a
hero also has to carry Scouts Yellow (.text-gold) at 4.5:1, which is a
darker ceiling than merely reading as text on cream.
Flat, and not a gradient: the Scouts palette is ten solid hexes, the guidelines
only ever describe text "on a solid colour background", and nothing in them
sanctions blending two colours into one another. The hero used to fade Navy into
Purple, which looked well enough but was not the brand. */
--hero-bg: var(--navy);
--radius: 18px;
--radius-sm: 12px;
--shadow: 0 10px 30px rgba(0, 57, 130, 0.1);
--shadow-lift: 0 16px 34px rgba(0, 57, 130, 0.22);
--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
--font-head:
"Nunito Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-body:
"Nunito Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* ---------- Section branding --------------------------------------------------
Put `data-section="squirrels"` (or beavers / cubs / scouts / explorers) on the
of a section page and the accent tokens re-point, so the hero block,
kickers, ticks, links, tabs and buttons all pick up that section's colour. The
header and footer never read these tokens, so they stay Scouts Navy and Scouts
Yellow throughout and the page still reads as 1st Brabazon.
Group-wide pages — index, join, parents, trustees, news, contact, support,
volunteer — carry no attribute and keep the Scouts Navy defaults.
The attribute also works on a single element: beyond.html puts it on each of
the three District cards so a Cubs card is green without colouring the page.
---- Why these are not the raw brand hexes ----
The section hues come from the Scouts palette (brand/brand-guidelines.md), but
most are too light to carry white or yellow text at the sizes used here, so
each one is darkened to clear WCAG 2.2 SC 1.4.3. Same trade-off, and the same
reasoning, as --ok and --danger. Measured against the surface each token
actually lands on:
section brand hex --accent on cream --hero-bg under Scouts Yellow
Beavers #006ddf 4.60:1 4.62:1
Cubs #25b755 4.66:1 4.63:1
Scouts #205b41 7.32:1 6.30:1 (dark enough as-is)
Explorers #088486 4.66:1 4.65:1
Forest Green, the Scouts section's colour, already clears both bars, so it is
the one used unmodified.
Squirrels is a deliberate exception, not an oversight: it runs on the true,
undarkened #ed3f23 (white text on it measures 3.94:1 — under the 4.5:1 normal-
text floor, though still clear of the 3:1 floor for large text and graphics).
Kept anyway on a direct, explicit group decision to match the brand hex
scouts.org.uk itself shows for Squirrels rather than a locally-darkened tone.
See "Known deviations" in brand/brand-guidelines.md. */
[data-section="squirrels"] {
/* Squirrels Red #ed3f23, used true rather than darkened — see "Why these are
not the raw brand hexes" above and "Known deviations" in
brand/brand-guidelines.md. --accent-2 keeps the previously-darkened tone as
a hover/pressed shade, so interactive states still read as a step darker. */
--accent: #ed3f23;
--accent-2: #ce371e;
--accent-soft: #fdece9;
--accent-ring: rgba(237, 63, 35, 0.18);
--hero-bg: #ed3f23;
}
[data-section="beavers"] {
/* Scouts Blue #006ddf */
--accent: #006cdd;
--accent-2: #004389;
--accent-soft: #e6f0fc;
--accent-ring: rgba(0, 108, 221, 0.18);
--hero-bg: #0062c9;
}
[data-section="cubs"] {
/* Scouts Green #25b755 */
--accent: #1a7f3b;
--accent-2: #104f25;
--accent-soft: #e9f8ee;
--accent-ring: rgba(26, 127, 59, 0.18);
--hero-bg: #177436;
}
[data-section="scouts"] {
/* Scouts Forest Green #205b41 — used at full strength */
--accent: #205b41;
--accent-2: #143828;
--accent-soft: #e9efec;
--accent-ring: rgba(32, 91, 65, 0.18);
--hero-bg: #205b41;
}
[data-section="explorers"] {
/* Scouts Teal #088486 */
--accent: #077b7d;
--accent-2: #054d4e;
--accent-soft: #e6f3f3;
--accent-ring: rgba(7, 123, 125, 0.18);
--hero-bg: #077072;
}
[data-section="network"] {
/* Black #000000 (Process Black C), used at full strength like Scouts Forest
Green above – it needs no darkening for contrast, since nothing is darker.
--accent-2 (the hover/pressed shade every other section reaches by going
darker) instead lightens one step, reusing the exact grey already established
for a black hover elsewhere on this site (.contact-form.is-safeguarding
.btn-accent:hover). --accent-soft is an independently-judged 10% tint for
this UI's own use (icon plates, panel washes – see the --accent-soft
definition further up), not one of the brand's own 20/40/60/80% tint steps,
which all land too dark for that role. Never paired with Scouts Yellow: that
combination is reserved for safeguarding messaging (brand-guidelines.md). */
--accent: #000000;
--accent-2: #262626;
--accent-soft: #e6e6e6;
--accent-ring: rgba(0, 0, 0, 0.18);
--hero-bg: #000000;
}
* {
box-sizing: border-box;
}
/* The `hidden` attribute only sets display:none in the browser's own stylesheet, so
ANY author rule that gives an element a display value silently wins and the
element stays visible. That trap has been hit four separate times in this file
(.tag on the news hero, .show-more-btn, .prog-panel, .drive-block), each time
needing its own opt-out. This one rule covers all of them at once, so setting
el.hidden = true now always hides the element. */
[hidden] {
display: none !important;
}
html {
scroll-behavior: smooth;
/* Anchor targets must clear the sticky header (~108px) or headings land underneath it. */
scroll-padding-top: 124px;
}
body {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background: var(--cream);
line-height: 1.6;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
picture {
display: block;
}
h1,
h2,
h3,
h4 {
/* Black (900) — the brand guidelines specify Nunito Sans Black for headlines. */
font-weight: 900;
font-family: var(--font-head);
line-height: 1.12;
margin: 0 0 0.4em;
color: var(--navy);
letter-spacing: -0.01em;
}
/* Tighter tracking as size grows — the biggest weight (900) reads best a touch
condensed at display sizes, where the default -0.01em is barely noticeable. */
h1 {
letter-spacing: -0.03em;
}
h2 {
letter-spacing: -0.02em;
}
p {
margin: 0 0 1em;
}
a {
color: var(--accent-2);
}
a:hover {
text-decoration-thickness: 2px;
}
ul {
margin: 0 0 1em;
padding-left: 1.1em;
}
/* Gold only reaches 1.6:1 on cream/white, well under the 3:1 WCAG 2.2 SC 1.4.11 floor.
Navy is the default ring; gold is swapped in only over dark backgrounds. */
:focus-visible {
outline: 3px solid var(--navy);
outline-offset: 2px;
border-radius: 4px;
}
.hero :focus-visible,
.page-hero :focus-visible,
.section-navy :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.mobile-cta-bar :focus-visible {
outline-color: var(--gold);
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.skip-link {
position: absolute;
left: 8px;
top: -60px;
z-index: 200;
background: var(--gold);
color: var(--navy);
padding: 10px 16px;
border-radius: 8px;
font-weight: 700;
transition: top 0.15s;
}
.skip-link:focus {
top: 8px;
}
.wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 22px;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.85em 1.6em;
border-radius: 999px;
border: 2px solid transparent;
font: 700 1rem / 1 var(--font-body);
text-decoration: none;
cursor: pointer;
transition:
transform 0.12s ease,
box-shadow 0.12s ease,
background 0.12s ease;
}
.btn:hover {
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
.btn-gold {
background: var(--gold);
color: var(--navy);
}
.btn-gold:hover {
background: #fff05c;
box-shadow: 0 8px 18px rgba(255, 230, 39, 0.35);
}
/* The page's own colour as a solid button: navy on a group page, red on a Squirrels
page, blue on a Beavers one. Hover moves to --accent-2 rather than a fixed second
hex, which would stay one colour under every theme, and rather than a translucent
wash over the fill, which is a gradient by another name. */
.btn-accent {
background: var(--accent);
color: #fff;
}
.btn-accent:hover {
background: var(--accent-2);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
/* .ext-link's arrow is coloured with var(--accent) (see further down), same as
this button's own fill — invisible on any page where the two match (e.g. a
red-accent section page). Matching the button's own text colour instead
keeps it visible under every theme. */
.btn-accent .ext-link::after {
color: currentColor;
}
/* The page's own colour as an outline pill: transparent fill, accent border and
text, a lighter-weight sibling to the solid .btn-accent above for links that
shouldn't all compete for attention on the same card. */
.btn-accent-outline {
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
.btn-accent-outline:hover {
background: var(--accent-soft);
}
.btn-outline {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.65);
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.12);
}
.btn-navy {
background: var(--navy);
color: #fff;
}
.btn-navy:hover {
background: var(--navy-2);
}
/* Black on Scouts Yellow, inverted from .panel-safeguarding's yellow-on-black
panel so a pill button still reads as a distinct, clickable shape rather
than disappearing into the panel it sits on — same reserved safeguarding
pairing (see .section-safeguarding), just the two colours swapped. */
.btn-safeguarding {
background: #000;
color: var(--gold);
}
.btn-safeguarding:hover {
background: #262626;
}
/* Same fix as .btn-accent above: .ext-link's arrow defaults to var(--accent)
(Navy on this group page), which would render as a near-invisible navy
arrow on this button's black fill. Match the button's own text colour. */
.btn-safeguarding .ext-link::after {
color: currentColor;
}
.btn-ghost {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.btn-ghost:hover {
background: var(--navy);
color: #fff;
}
.btn-sm {
padding: 0.55em 1.1em;
font-size: 0.9rem;
}
/* A "Moving up" link rendered as the NEXT section's own logo and colour rather
than this page's accent and a text label — a deliberate break from the
usual .btn-accent pattern, since the point is to recognise the section
you're heading to before you even read the word. Colours are the other
section's own --accent hex, hard-coded rather than read from a variable:
this button lives on a page whose --accent is a different section's colour
entirely (e.g. Squirrels' own red, for a button that must be Beavers' blue). */
.btn-section-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1em 2.4em;
border-radius: 999px;
transition:
transform 0.12s ease,
box-shadow 0.12s ease,
filter 0.12s ease;
}
.btn-section-link:hover {
transform: translateY(-2px);
filter: brightness(0.92);
}
.btn-section-link-logo {
display: inline-block;
height: 1.7em;
background: #fff;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.btn-section-link-beavers {
background: #006cdd; /* Scouts Blue — [data-section="beavers"] --accent */
}
.btn-section-link-beavers .btn-section-link-logo {
aspect-ratio: 166 / 46;
-webkit-mask-image: url("logos/beavers.svg");
mask-image: url("logos/beavers.svg");
}
.btn-section-link-cubs {
background: #1a7f3b; /* Scouts Green — [data-section="cubs"] --accent */
}
.btn-section-link-cubs .btn-section-link-logo {
aspect-ratio: 110 / 43;
-webkit-mask-image: url("logos/cubs.svg");
mask-image: url("logos/cubs.svg");
}
/* ---------- Header ---------- */
.site-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
/* Solid --navy, not rgba(…, 0.96). The header is sticky, so at 96% whatever
scrolled beneath it tinted the bar — and with it the fleur-de-lis and the
Brabazon wordmark, which are CSS masks painted in currentColor directly onto
this background. The logos must render clean and untouched (POR 2e.2), which
they cannot do over a surface that shifts colour as the page moves. */
background: var(--navy);
color: #fff;
border-bottom: 3px solid var(--gold);
}
.site-header.scrolled {
box-shadow: 0 4px 18px rgba(0, 57, 130, 0.35);
}
/* Same 1180px box as .wrap so the logo lines up with page content at every width. */
.header-inner {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 22px;
max-width: 1180px;
margin: 0 auto;
}
.brand {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--gold);
text-decoration: none;
flex: 0 1 auto;
min-width: 0;
}
/* The fleur-de-lis and the Brabazon wordmark are painted as CSS masks rather than inlined
or dropped in an ![]()
. An ![]()
renders the SVG in its own document, where the file's
`currentColor` cannot see this stylesheet, so it would come out black; inlining both would
repeat ~19KB of path data in all 11 pages. As masks they stay one cached file each and take
their colour from `background`, so they follow the palette tokens like everything else. */
.brand-fleur,
.brand-wordmark {
flex: none;
background: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.brand-fleur {
/* Artwork is 2067 x 1884. */
/* Scouts Yellow, not white — a deliberate departure from the guidelines (2026-09-12), which
call for white on a palette-colour background and don't list yellow as a permitted logo
colourway. Tracked in brand/brand-guidelines.md → Known deviations. 8.70:1 against the
navy bar, well past the 3:1 WCAG 2.2 SC 1.4.11 floor for graphical objects. */
background: var(--gold);
width: 48px;
height: 44px;
-webkit-mask-image: url("logos/fleur-de-lis.svg");
mask-image: url("logos/fleur-de-lis.svg");
}
.brand-wordmark {
/* Artwork is 1794 x 350. */
width: 92px;
height: 18px;
-webkit-mask-image: url("logos/brabazon.svg");
mask-image: url("logos/brabazon.svg");
}
.brand-1st {
font-weight: 800;
font-size: 1.4rem;
line-height: 1;
letter-spacing: -0.01em;
}
/* The header keeps the brand and the Menu button on one row, so the lock-up has to give
ground on narrow phones or it pushes the button off-screen. */
@media (max-width: 700px) {
.brand {
gap: 7px;
}
.brand-fleur {
width: 39px;
height: 36px;
}
.brand-wordmark {
width: 77px;
height: 15px;
}
.brand-1st {
font-size: 1.15rem;
}
}
.nav-toggle {
display: none;
margin-left: auto;
background: none;
border: 2px solid rgba(255, 255, 255, 0.5);
color: #fff;
font: 700 0.95rem var(--font-body);
padding: 0.45em 0.9em;
border-radius: 10px;
cursor: pointer;
}
.site-nav {
margin-left: auto;
min-width: 0;
}
/* Sized so the 10 links stay on one row at every width above the 1300px collapse point;
a 1180px header only has ~764px to give them, and wrapping looked accidental. */
.nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
align-items: center;
flex-wrap: wrap;
}
.nav a {
display: block;
color: #e4eefb;
text-decoration: none;
padding: 0.55em 0.45em;
border-radius: 10px;
font-size: 0.88rem;
font-weight: 500;
white-space: nowrap;
}
.nav a:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--gold);
}
.nav a.active {
background: rgba(255, 230, 39, 0.22);
color: var(--gold);
font-weight: 700;
}
/* Group headings are a drawer-only affordance. Hidden inside the max-width:1300px block
they stayed visible on laptops, reading as clickable nav links. */
.nav-group-label {
display: none;
}
/* No margin-left here: .header-inner already supplies a 14px flex gap, and the duplicate
was the difference between the 10 nav links fitting on one row and wrapping. */
.header-cta {
flex: 0 0 auto;
}
.header-cta .btn {
padding: 0.62em 1.25em;
font-size: 0.95rem;
}
/* ---------- Hero (home) ---------- */
.hero {
background: var(--hero-bg);
color: #fff;
padding: 96px 0 104px;
position: relative;
overflow: hidden;
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 640px;
}
/* The fleur-de-lis, huge and nearly invisible, bled off the right edge — a flat
brand device rather than a stock photo or a gradient wash, and the one thing in
the hero that isn't already said in words somewhere else on the page. Inlined
(not a background-image) because currentColor only works on an inline SVG — see
the logos note in README.md. */
.hero-mark {
position: absolute;
top: 50%;
right: -8%;
transform: translateY(-50%);
width: clamp(440px, 48vw, 780px);
height: auto;
color: #fff;
opacity: 0.06;
pointer-events: none;
z-index: 0;
}
@media (max-width: 700px) {
.hero-mark {
display: none;
}
}
.hero h1 {
color: #fff;
font-size: clamp(2.7rem, 7.2vw, 5.6rem);
letter-spacing: -0.04em;
margin-bottom: 0.25em;
}
.hero .h-sub {
font-size: clamp(1.05rem, 2.2vw, 1.3rem);
color: #e8e4f6;
max-width: 30em;
margin-bottom: 24px;
}
/* The two section panels, linked to their own pages and carrying their own colour —
a stripe above the logo, a 10% wash behind the card, and the accent on hover —
the same device as .card[data-section] on beyond.html and .js-card on the journey
rail below. White rather than a tint of navy: the Squirrels and Beavers logos are
Scouts Red and Scouts Blue, which fall to 2.8:1 and 2.2:1 against navy and must sit
on white, so the wash sits UNDER the white card as its own background, and the
card itself stays var(--white) until a theme's --accent-soft overrides it. */
.hero-secs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 16px;
margin: 0 0 30px;
padding: 0;
list-style: none;
max-width: 34em;
}
.hero-sec {
display: block;
background: var(--white);
color: var(--ink);
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--radius);
padding: 18px 20px 16px;
transition:
transform 0.12s ease,
box-shadow 0.12s ease,
border-color 0.12s;
}
.hero-sec[data-section] {
background: var(--accent-soft);
border-top: 4px solid var(--accent);
}
/* Squirrels and Beavers specifically – the two sections 1st Brabazon runs
itself, not District – get the fuller "own section" treatment introduced
by .journey-stop--own .js-card further down: a full accent-colour border
rather than just the top stripe above. No shadow added to match it,
though: --shadow-lift is a low-opacity navy tint, invisible against this
hero's own navy background – the same reason its :hover state below
already reaches for a bespoke dark shadow instead of --shadow. */
.hero-sec[data-section="squirrels"],
.hero-sec[data-section="beavers"] {
border: 2px solid var(--accent);
}
.hero-sec:hover,
.hero-sec:focus-visible {
transform: translateY(-4px);
border-color: var(--accent);
/* --shadow is a 10% navy, which is invisible on the navy hero. */
box-shadow: 0 14px 30px rgba(8, 10, 35, 0.38);
}
.hero-sec .logo {
height: 34px;
width: auto;
margin-bottom: 12px;
}
.hero-sec .row {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 1rem;
}
.hero-sec .row + .row {
margin-top: 2px;
}
.hero-sec .k {
font-weight: 800;
}
.hero-sec .where {
margin: 9px 0 0;
padding-top: 9px;
border-top: 1px solid var(--line);
font-size: 0.85rem;
color: var(--muted);
}
.hero-sec:hover .where,
.hero-sec:focus-visible .where {
color: var(--accent);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* ---------- Hero entrance ----------
Four elements, 70ms apart, once on load — not on every scroll. Only transform and
opacity animate, so it stays on the compositor. prefers-reduced-motion (below)
collapses the animation-duration to near-zero but keeps the forwards fill, so
reduced-motion visitors land straight on the resting state instead of stuck at
opacity:0. */
.hero-inner > * {
opacity: 0;
transform: translateY(14px);
animation: hero-rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.hero-inner > *:nth-child(1) {
animation-delay: 0s;
}
.hero-inner > *:nth-child(2) {
animation-delay: 0.07s;
}
.hero-inner > *:nth-child(3) {
animation-delay: 0.14s;
}
.hero-inner > *:nth-child(4) {
animation-delay: 0.21s;
}
@keyframes hero-rise {
to {
opacity: 1;
transform: none;
}
}
/* Interior page hero */
.page-hero {
background: var(--hero-bg);
color: #fff;
padding: 58px 0 54px;
}
.page-hero .wrap {
position: relative;
}
.page-hero h1 {
color: #fff;
font-size: clamp(2rem, 4.5vw, 3rem);
margin-bottom: 0.15em;
}
/* The Brabazon wordmark set inline in running heading text, e.g. "Join Brabazon".
Painted as a CSS mask (see .brand-wordmark above) so it takes Scouts Yellow from `background`
rather than needing an ![]()
. 0.8em is the header lock-up's own ratio for pairing this
wordmark with "1st" (see .brand-wordmark comment) — reused here so the two "1st Brabazon"
treatments on the site (header, hero) read as the same lock-up at different sizes. Height is
set and width left to `aspect-ratio`, so it scales cleanly with the h1's clamp() font-size. */
.hero-wordmark {
display: inline-block;
vertical-align: middle;
height: 0.8em;
aspect-ratio: 1794 / 350;
background: var(--gold);
-webkit-mask: url("logos/brabazon.svg") center / contain no-repeat;
mask: url("logos/brabazon.svg") center / contain no-repeat;
margin-left: 0.12em;
/* The script capital B in the Brabazon wordmark is deliberately oversized —
part of its own branding — and sits both above and below the rest of the
lettering, so the mask's flat bounding box reads slightly low next to plain
text. Nudged up so "rabazon" lines up with the bottom of "1st". */
transform: translateY(-0.08em);
}
/* join.html's hero sits on navy, so Scouts Yellow is what separates the
wordmark from the rest of the white heading. beyond.html's "Beyond 1st
Brabazon" sits on a light section background as ordinary heading text —
there it should read as one navy heading, not a mid-word colour change. */
.hero-wordmark-navy {
background: var(--navy);
}
/* A section's own logo standing in for its name as the hero h1 (Squirrels
first) — same CSS-mask technique as .hero-wordmark above, so it can render
white on the section's coloured --hero-bg, which a plain ![]()
can't do. A
logo can read clearly at a size running text can't, so this clamp() runs
larger than the h1 text it replaces rather than matching it exactly;
aspect-ratio comes from each logo's real viewBox. */
.hero-section-logo {
display: inline-block;
vertical-align: middle;
height: clamp(2.4rem, 6vw, 4.5rem);
background: #fff;
}
.hero-section-logo-squirrels {
aspect-ratio: 174 / 39;
-webkit-mask: url("logos/squirrels.svg") center / contain no-repeat;
mask: url("logos/squirrels.svg") center / contain no-repeat;
}
.hero-section-logo-beavers {
aspect-ratio: 166 / 46;
-webkit-mask: url("logos/beavers.svg") center / contain no-repeat;
mask: url("logos/beavers.svg") center / contain no-repeat;
}
.page-hero p {
color: #e6e1f6;
max-width: 46em;
font-size: 1.08rem;
margin-bottom: 0;
}
/* ---------- Sections ---------- */
section {
padding: 74px 0;
}
.section-alt {
background: var(--white);
}
/* Scouts Navy, as the name says. It reads --navy rather than --hero-bg so that a
section page keeps its dark bands in the group's navy instead of restating the
section colour a third time; on a group page the two are the same navy anyway. */
.section-navy {
background: var(--navy);
color: #fff;
}
.section-navy h2,
.section-navy h3 {
color: #fff;
}
/* Flat Scouts Yellow, used once — on the site's single most important call to
action, so the brightest thing on the page is also the thing that matters most.
Navy on Yellow is 8.7:1 (AAA), same pairing as the Brabazon wordmark itself. */
.section-gold {
background: var(--gold);
color: var(--navy);
}
.section-gold h2,
.section-gold h3 {
color: var(--navy);
}
.section-gold .text-soft {
color: #1d4d8f;
}
.section-gold .text-gold {
color: var(--navy);
text-decoration: underline;
}
/* Black text on Scouts Yellow, not Navy on Yellow — deliberately the one place
on the site that breaks the .section-gold rule above. Per brand/
brand-guidelines.md, "Black text on a yellow background is reserved for
safeguarding messaging in Scouts": everywhere else this site uses Navy
instead so that reserved pairing stays meaningful, and this section is the
reason it's reserved. Black on Scouts Yellow measures 16.6:1 (AAA). */
.section-safeguarding {
background: var(--gold);
color: #000;
}
.section-safeguarding h2,
.section-safeguarding h3 {
color: #000;
}
/* The fleur-de-lis beside "Safeguarding" / "If you need help right away" —
same CSS-mask technique as .brand-fleur in the header, but in black (the
reserved safeguarding colour, see .section-safeguarding above) rather than
Scouts Yellow, and clamp()-sized to roughly track both heading rows'
combined height responsively (see .sec-head-fleur-icon below for why this
isn't a literal height:100% match). */
.sec-head-fleur {
display: flex;
align-items: center;
gap: 16px;
}
/* Overrides .sec-head's own max-width: 46em (a deliberate readable-line-length
cap used all over the site for a plain intro heading) rather than fighting
it — that cap is what was forcing this specific heading into a narrow,
flush-left column with a lot of empty yellow to its right once its subtext
grew into a full sentence. Combined selector for specificity (0,2,0) rather
than relying on being declared after .sec-head in source order. */
.sec-head.sec-head-fleur {
max-width: none;
}
.sec-head-fleur-icon {
flex: none;
/* A definite length, not height:100% of the flex container — that relied on
the stretch algorithm handing aspect-ratio a resolved cross size, which
didn't render (the icon came out zero-width) rather than actually
matching both rows exactly. clamp() tracks the .sec-title/h3 pairing's
own responsive sizing closely enough to read as "the same height". */
height: clamp(3.4rem, 4.5rem + 2vw, 4.6rem);
aspect-ratio: 2067 / 1884;
background: #000;
-webkit-mask: url("logos/fleur-de-lis.svg") center / contain no-repeat;
mask: url("logos/fleur-de-lis.svg") center / contain no-repeat;
}
.sec-head {
max-width: 46em;
margin-bottom: 34px;
}
.sec-head.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* No text-transform: uppercase (removed 2026-09-13) — this used to render every
.kicker in full capitals, which both fought the brand guidelines' "don't
capitalise whole words" rule and, wherever a kicker sat beside a real
heading, meant the section's actual topic was rendered as decoration while
a less important line next to it held the real