/* ============================================================
GOOGLE FONT IMPORT
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400&family=Caveat:wght@600;700&display=swap');
/* Font notes (BMCC Brand Guide, Sept 2024, p.24-25):
- Primary corporate font is Myriad Pro (Adobe-licensed, not available as a free
web font). Source Sans 3 is used here as the nearest free, open-license match
— it's Adobe's own open-source humanist sans, built to a very similar brief.
- Arial is the guide's own specified fallback when Myriad Pro is unavailable,
so it remains the safety-net in --font-base below.
- "Born Ready Regular" is the friendly/decorative font (taglines, poster titles)
and is a separate licensed font we don't have web rights to. Caveat is used
below as a free stand-in — see --font-accent, used sparingly, never for body
text or long headings (per the guide's own "used sparingly" instruction). */
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* Primary brand color — CTAs, active states, feeds --color-brand* below */
--color-primary: #005490; /* BMCC "Mountains" — PMS 647 */
--color-primary-dark: #00436f;
--color-primary-light: #e7f0f6;
/* Secondary accent — links, focus states, tabs, calendar/time selection */
--color-secondary: #6dbd33; /* BMCC "Fern" — PMS 368 */
--color-secondary-dark: #4f8f22;
--color-secondary-light: #eff7e9;
--color-secondary-glow: #6dbd3326;
/* Ink — headings, body emphasis, and dark surfaces (header, footer, table heads) */
--color-ink: #021d49; /* BMCC "Winter" — PMS 2768 */
--color-ink-mid: #005490; /* BMCC "Mountains" */
--color-ink-pale: #eff2f3;
--color-ink-glow: #021d4926;
--color-white: #ffffff;
--color-off-white: #f4f6f8;
--color-surface: #f8fafb;
--color-border: #e2e8ef;
--color-border-mid: #cbd5e1;
--color-text: #404042;
--color-text-muted: #64748b;
--color-text-faint: #94a3b8;
/* Typography — per BMCC Brand Guide p.24-25: Myriad Pro (primary corporate
font) first, Arial (the guide's own specified fallback) last, with
Source Sans 3 bridging the two as a free web-safe stand-in for Myriad Pro. */
--font-base: 'Myriad Pro', 'Source Sans 3', Arial, Helvetica, sans-serif;
/* Decorative/"friendly" font — BMCC's Born Ready Regular, stood in here by
Caveat. Use only for short taglines/hero titles, never body copy or nav. */
--font-accent: 'Born Ready Regular', 'Caveat', cursive;
/* Spacing */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
/* Shadows */
--shadow-xs: 0 1px 3px #021d490f;
--shadow-sm: 0 2px 8px #021d4914;
--shadow-md: 0 4px 16px #021d491a;
--shadow-lg: 0 8px 32px #021d4924;
--shadow-secondary: 0 4px 20px #6dbd3340;
--shadow-primary: 0 4px 20px #00549059;
/* Transitions */
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Override Envibe's own brand vars — these names are dictated by Envibe's base
stylesheet, not by us, so they keep their original names rather than being
renamed to --color-primary* like the tokens above */
--color-brand: var(--color-primary);
--color-brand-light: var(--color-primary);
--color-brand-dark: var(--color-primary-dark);
}
/* ============================================================
GLOBAL RESET & BASE
============================================================ */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body,
input, button, select, textarea,
p, span, li, td, th, div, a, h1, h2, h3, h4, h5, label {
font-family: var(--font-base) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--color-off-white) !important;
background-color: var(--color-off-white) !important;
color: var(--color-text) !important;
}
a {
color: var(--color-secondary) !important;
-webkit-transition: var(--transition) !important;
transition: var(--transition) !important;
}
a:hover { color: var(--color-secondary-dark) !important; text-decoration: none !important; }
/* ============================================================
HEADER BANNER
Solid Mountains-blue banner (no background photo) behind the
logo and strapline. Depends on this markup existing in HTML
Body Content: