/* =========================================================================
BAY STATE LEARNING CENTER — SITE STYLESHEET
Single shared stylesheet for all pages.
Structure:
1. Design tokens (colors + type scale as CSS variables)
2. Fonts & reset
3. Utility classes (labels, buttons, small links)
4. Navigation (+ mobile menu)
5. Shared layout components (hero, sections, stripes, headings, body text)
Where a page needs a different value, the override is scoped with
the page's body class, e.g. body.page-enroll .hero { ... }, and
contains ONLY the properties that differ from the shared rule.
6. Footer
7. Page-specific styles, one section per page
8. Responsive / mobile rules
Each tag carries a page class (e.g. class="page-index") which is
how page-specific overrides below are targeted.
========================================================================= */
/* =========================================================================
1. DESIGN TOKENS
Change a color or a font size here and it changes everywhere.
========================================================================= */
:root {
/* Brand palette (the four letters of the BSLC logo) */
--logo-orange: #EF9F27;
--logo-pink: #D4537E;
--logo-teal: #3ABCB0;
--logo-coral: #E8724A;
/* Surfaces */
--charcoal: #2a2d2e; /* dark page/section background; also headings & text on cream */
--charcoal-deep: #1e2122; /* footer, mobile menu */
--charcoal-light: #393c3d; /* solid card fill on cream sections — same
perceived lightness as a 7% white tint
over --charcoal (used by .dates-category,
.path-card), so cards read consistently
whether they're floating on charcoal or
on cream */
--cream: #f0ece3; /* light section background */
/* Accents */
--teal: #30b0b0; /* buttons and links on dark backgrounds */
--teal-dark: #1a8a8a; /* teal links on cream (darker for contrast) */
--orange-dark: #c06020; /* orange links on cream (darker for contrast) */
/* Text on dark backgrounds — "paper" tones, brightest to faintest */
--paper: #e8e4dc; /* headings */
--paper-bright: rgba(232,228,220,0.95); /* active nav link, bolded schedule items */
--paper-strong: rgba(232,228,220,0.75); /* schedule text, form checkboxes */
--paper-body: rgba(232,228,220,0.7); /* standard body text */
--paper-mid: rgba(232,228,220,0.65); /* labels, secondary text */
--paper-soft: rgba(232,228,220,0.6); /* nav links */
--paper-dim: rgba(232,228,220,0.55); /* footer text */
--paper-faint: rgba(232,228,220,0.45); /* social icons */
/* Text on cream backgrounds — "ink" tones */
--ink-body: #3a3d3e; /* standard body text */
--ink-lead: #4a4d4e; /* lead paragraphs (direct children of section inners) */
--ink-mid: rgba(42,45,46,0.7); /* dates, small labels, secondary text */
/* Hairline borders */
--line-dark: rgba(255,255,255,0.06); /* on charcoal */
--line-cream: rgba(42,45,46,0.1); /* on cream */
--line-cream-soft: rgba(42,45,46,0.08); /* on cream, softer */
/* Type scale (fluid sizes; min, preferred, max) */
--fs-body: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem); /* standard paragraph */
--fs-h2: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); /* section heading */
--fs-h3: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); /* card heading */
--fs-label: clamp(0.75rem, 0.65rem + 0.3vw, 0.9rem); /* uppercase labels */
--fs-meta: clamp(0.72rem, 0.65rem + 0.25vw, 0.85rem); /* bylines, dates */
--fs-mini: clamp(0.75rem, 0.68rem + 0.2vw, 0.88rem); /* small uppercase links */
--fs-btn: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem); /* large buttons */
--fs-btn-sm: clamp(0.82rem, 0.75rem + 0.25vw, 1rem); /* nav button */
--fs-nav: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem); /* nav links */
--fs-footer: clamp(0.82rem, 0.75rem + 0.2vw, 0.95rem); /* footer text */
/* Layout widths */
--content-width: 860px; /* standard centered text-column width, used by
section-cream-inner, section-dark-inner, and
similar containers across most pages */
}
/* =========================================================================
2. FONTS & RESET
========================================================================= */
/* Outfit font is loaded via /