/* ============================================================================
Broadacres Academy — CHROME KIT · ba-chrome.css
----------------------------------------------------------------------------
A single shared shell — header / mobile burger / footer / hero — reused across
every Broadacres surface (main site, fee schedule, uniform list, …) so the
look & feel stays consistent. The design system locks tokens + voice; this
kit fills the layout-level "chrome" gap it leaves open.
• Requires the design-system stylesheet to be loaded FIRST for tokens:
• Everything here is driven by var(--*) tokens — no hard-coded hexes.
• All classes are namespaced `ba-` to avoid collisions with page-local CSS.
• Pairs with ba-chrome.js (burger behaviour) and ba-chrome.html (markup).
Version 1.0 — change chrome here, then re-copy the 3 files into each surface.
========================================================================== */
/* ---------------------------------------------------------------- kit reset */
.ba-header *, .ba-header *::before, .ba-header *::after,
.ba-footer *, .ba-footer *::before, .ba-footer *::after,
.ba-hero *, .ba-hero *::before, .ba-hero *::after,
.ba-mobile-nav *, .ba-mobile-nav *::before, .ba-mobile-nav *::after {
box-sizing: border-box;
}
/* ============================================================================
SHARED BUTTON — the single CTA style used in chrome (header + hero + mobile)
========================================================================== */
.ba-btn {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: var(--tracking-button);
text-transform: uppercase;
line-height: 1;
border-radius: var(--r-pill);
padding: 12px 24px;
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all var(--dur-med) var(--ease-natural);
white-space: nowrap;
}
.ba-btn--mint { background: var(--ba-mint); color: var(--ba-navy); border-color: var(--ba-mint); }
.ba-btn--mint:hover { filter: brightness(.94); transform: translateY(-1px); }
.ba-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.ba-btn--ghost:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
/* hero CTA is a touch larger */
.ba-hero .ba-btn { font-size: 13px; letter-spacing: var(--tracking-eyebrow); padding: 16px 34px; }
/* ============================================================================
1 · HEADER — navy bar, horizontal white logo, full site nav, mint CTA
----------------------------------------------------------------------------
Identical on EVERY page. Sticky to the top. The nav collapses into the burger
below 900px. Page-local navs (e.g. a fee "jump to section" bar) are separate.
========================================================================== */
.ba-header {
position: sticky; top: 0; z-index: 60;
background: var(--ba-navy); color: #fff;
display: flex; align-items: center; justify-content: space-between;
gap: 28px; padding: 18px 48px;
}
.ba-header__brand { flex: none; border: 0; display: inline-flex; align-items: center; }
.ba-header__brand img { height: 42px; display: block; object-fit: contain; }
.ba-header__nav { display: flex; align-items: center; gap: 34px; }
.ba-header__nav a:not(.ba-btn) {
color: #fff; text-decoration: none; border: 0;
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
letter-spacing: .08em; text-transform: uppercase;
padding: 6px 0; transition: opacity var(--dur-fast) var(--ease-natural);
}
.ba-header__nav a:not(.ba-btn):hover { opacity: .68; }
/* mark the current page in the nav */
.ba-header__nav a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--ba-mint-light); }
/* ---------------------------------------------------------------- burger btn */
.ba-burger {
display: none; /* shown only at mobile breakpoint */
flex: none; width: 44px; height: 44px;
align-items: center; justify-content: center;
background: transparent; border: 0; cursor: pointer; color: #fff;
border-radius: var(--r-md);
}
.ba-burger:hover { background: rgba(255,255,255,.1); }
.ba-burger .ba-ic-close { display: none; }
.ba-burger[aria-expanded="true"] .ba-ic-menu { display: none; }
.ba-burger[aria-expanded="true"] .ba-ic-close { display: block; }
/* ============================================================================
1b · HEADER — MINIMAL (sub-page tier)
----------------------------------------------------------------------------
Sub-pages (fee schedule, uniform list, …) are a SEPARATE experience that
*aligns* to the main site but doesn't pretend to be it. No global site nav,
no burger — just the logo and a single "Back to website" button. This keeps
visitors from clicking sideways into the main site's section pages.
========================================================================== */
.ba-header--minimal { justify-content: space-between; }
.ba-header--minimal .ba-header__nav,
.ba-header--minimal .ba-burger { display: none !important; } /* never here */
.ba-header__back { font-size: 12px; }
.ba-header__back svg { width: 16px; height: 16px; }
/* ============================================================================
2 · MOBILE NAV — full-width navy panel that drops under the header.
Collapses the GLOBAL site nav only. Toggled by ba-chrome.js.
========================================================================== */
.ba-mobile-nav {
display: none; /* shown only at mobile breakpoint, when open */
position: sticky; top: 0; z-index: 55;
background: var(--ba-navy-2); color: #fff;
border-top: 1px solid rgba(255,255,255,.12);
}
.ba-mobile-nav__inner {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 24px 22px;
max-width: 640px; margin: 0 auto;
}
.ba-mobile-nav a:not(.ba-btn) {
color: #fff; text-decoration: none; border: 0;
font-family: var(--font-sans); font-size: 17px; font-weight: 400;
letter-spacing: .04em; padding: 15px 6px;
border-bottom: 1px solid rgba(255,255,255,.1);
transition: color var(--dur-fast) var(--ease-natural);
}
.ba-mobile-nav a:not(.ba-btn):hover { color: var(--ba-mint-light); }
.ba-mobile-nav a[aria-current="page"] { color: var(--ba-mint-light); }
.ba-mobile-nav .ba-btn { margin-top: 18px; width: 100%; justify-content: center; padding: 16px; font-size: 13px; }
/* open state (driven by .is-open on the header) */
.ba-header.is-open + .ba-mobile-nav { display: block; animation: ba-slide-down var(--dur-med) var(--ease-natural); }
@keyframes ba-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* lock body scroll while the mobile menu is open */
body.ba-nav-open { overflow: hidden; }
/* ============================================================================
3 · HERO — two approved variants sharing one heading rhythm.
----------------------------------------------------------------------------
Rhythm (both variants): eyebrow → roman line → italic-accent line → rule → CTA
…
Roman words accent words
The takes the mint accent + italics — the brand "two-tone" treatment.
• .ba-hero--photo : full-bleed photo + navy gradient overlay + dandelion arc.
Homepage / landing surfaces. Needs data-bg or inline bg img.
• .ba-hero--solid : flat Midnight Navy field. Sub-pages (fees, uniform list…).
========================================================================== */
.ba-hero {
position: relative; overflow: hidden;
background: var(--ba-navy); color: #fff;
}
.ba-hero__inner {
position: relative; z-index: 2;
max-width: 1140px; margin: 0 auto;
padding: 96px 48px 104px;
}
.ba-hero--solid .ba-hero__inner { padding: 84px 48px 92px; }
/* photo layer + legibility gradient (uses the approved --grad-navy device) */
.ba-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; z-index: 0; }
.ba-hero--photo::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(0,29,57,.34) 0%, rgba(0,29,57,.72) 100%);
}
/* dandelion-hinting mint arc — subtle, low-opacity supporting device */
.ba-hero--photo .ba-hero__arc,
.ba-hero--solid .ba-hero__arc {
content: ""; position: absolute; z-index: 1; pointer-events: none;
right: -120px; top: 50%; transform: translateY(-50%);
width: 520px; height: 520px; border-radius: 50%;
background: radial-gradient(circle, rgba(83,245,196,.18) 0%, rgba(83,245,196,0) 62%);
}
.ba-hero__eyebrow {
font-family: var(--font-sans); font-size: 13px; font-weight: 500;
letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
color: var(--ba-mint-light); margin: 0 0 18px;
}
.ba-hero__title {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(2.6rem, 5.2vw, var(--fs-display-xl));
line-height: 1.03; color: #fff; margin: 0; max-width: 18ch;
text-wrap: balance;
}
.ba-hero__title em { font-style: italic; color: var(--ba-mint-light); }
.ba-hero__lead {
font-family: var(--font-sans); font-size: var(--fs-lead);
color: var(--fg-on-dark-muted); max-width: 56ch; margin: 22px 0 0; line-height: var(--lh-body);
}
.ba-hero__rule { width: 120px; height: 1px; background: rgba(255,255,255,.5); margin: 34px 0 28px; border: 0; }
/* ============================================================================
4 · FOOTER — full 4-column footer. Identical on every page.
========================================================================== */
.ba-footer { background: var(--ba-navy); color: #fff; padding: 72px 48px 40px; }
.ba-footer__grid {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; align-items: start;
}
.ba-footer__brand img { height: 58px; display: block; margin-bottom: 20px; }
.ba-footer__tag { font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--ba-mint-light); margin-bottom: 8px; }
.ba-footer__blurb { font-family: var(--font-sans); font-size: 13px; opacity: .75; line-height: 1.6; max-width: 34ch; margin: 0; }
.ba-footer__col h4 {
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: .22em; text-transform: uppercase; color: var(--ba-mint-light);
margin: 0 0 14px;
}
.ba-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ba-footer__col a {
color: #fff; text-decoration: none; border: 0; opacity: .8;
font-family: var(--font-sans); font-size: 14px;
transition: opacity var(--dur-fast) var(--ease-natural);
}
.ba-footer__col a:hover { opacity: 1; }
.ba-footer__legal {
max-width: 1200px; margin: 56px auto 0; padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.15);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
font-family: var(--font-sans); font-size: 12px; opacity: .7;
}
/* ----------------------------------------------------------------------------
4b · FOOTER — BASIC (sub-page tier)
----------------------------------------------------------------------------
No click-through link columns — just brand + tagline on the left, contact
essentials on the right, and the legal/copyright row. The sub-page is a
closed loop: the only way "out" is the header's Back-to-website button.
========================================================================== */
.ba-footer--basic { padding: 52px 48px 36px; }
.ba-footer__basic {
max-width: 1200px; margin: 0 auto;
display: flex; align-items: flex-end; justify-content: space-between;
gap: 30px; flex-wrap: wrap;
}
.ba-footer__basic .ba-footer__brand img { margin-bottom: 14px; }
.ba-footer--basic .ba-footer__tag { margin: 0; }
.ba-footer__contact {
font-family: var(--font-sans); font-size: 14px; line-height: 1.8;
text-align: right; color: rgba(255,255,255,.82);
}
.ba-footer__contact a { color: inherit; text-decoration: none; border: 0; transition: opacity var(--dur-fast) var(--ease-natural); }
.ba-footer__contact a:hover { opacity: 1; color: var(--ba-mint-light); }
.ba-footer--basic .ba-footer__legal { margin-top: 38px; }
/* ============================================================================
RESPONSIVE — single global breakpoint for chrome at 900px.
========================================================================== */
@media (max-width: 900px) {
.ba-header { padding: 14px 24px; }
.ba-header__nav { display: none; } /* collapse global nav into burger */
.ba-burger { display: inline-flex; }
.ba-header__brand img { height: 36px; }
.ba-hero__inner, .ba-hero--solid .ba-hero__inner { padding: 64px 24px 72px; }
.ba-hero--photo .ba-hero__arc, .ba-hero--solid .ba-hero__arc { width: 360px; height: 360px; right: -140px; }
.ba-footer { padding: 56px 24px 32px; }
.ba-footer--basic { padding: 44px 24px 28px; }
.ba-footer__basic { gap: 24px; }
.ba-footer__contact { text-align: left; }
.ba-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
.ba-footer__brand { grid-column: 1 / -1; }
.ba-footer__legal { flex-direction: column; }
}
@media (max-width: 520px) {
.ba-footer__grid { grid-template-columns: 1fr; }
}
/* ============================================================================
PRINT — chrome hides itself; a print masthead (page-owned) takes over.
Pages should add their own .print-masthead; the kit just gets out of the way.
========================================================================== */
@media print {
.ba-header, .ba-mobile-nav, .ba-footer { display: none !important; }
.ba-hero { background: #fff; color: var(--ba-navy); }
.ba-hero--photo::after, .ba-hero__photo, .ba-hero__arc { display: none !important; }
}