/* ============================================================ FENCING MASTERS — Colors & Type Foundations Swordsmanship Par Excellence · 3 weapons, 1 club · estd. 1995 ------------------------------------------------------------ Fonts are Google Fonts SUBSTITUTIONS for the (unknown) original logo type. See README "Type" + the substitution flag. Swap the @import + --font-* vars if the true brand fonts are provided. ============================================================ */ /* Fonts are loaded via + stylesheet in Layout.astro (not @import here) so they start downloading in parallel instead of waiting for this CSS file to parse. Keep the two in sync if the families change. */ :root { /* ---------- BRAND PRIMARIES (sampled from the logos) ---------- */ --fm-red: #D6121A; /* Saber Red — primary action, energy */ --fm-blue: #2440C8; /* Piste Blue — heritage, trust, depth */ --fm-gold: #FFC400; /* Champion Gold — highlight, medals */ /* Tints / shades (for hovers, fills, washes) */ --fm-red-700: #A60D14; --fm-red-600: #BE1017; --fm-red-500: #D6121A; --fm-red-300: #EE6E72; --fm-red-100: #FBE0E1; --fm-blue-700: #182C8E; --fm-blue-600: #1E36AD; --fm-blue-500: #2440C8; --fm-blue-300: #8090E4; --fm-blue-100: #E2E6F8; --fm-gold-700: #C79700; --fm-gold-600: #E5AE00; --fm-gold-500: #FFC400; --fm-gold-300: #FFDD66; --fm-gold-100: #FFF4CC; /* ---------- NEUTRALS (cool, faint blue cast) ---------- */ --fm-ink: #16182A; /* near-black headings, deep navy-black */ --fm-900: #20233A; --fm-800: #2E3252; --fm-700: #474C6B; --fm-600: #5E6483; --fm-500: #7A809C; --fm-400: #A0A5BC; --fm-300: #C7CAD9; --fm-200: #E4E6EF; --fm-150: #EDEFF5; --fm-100: #F4F5F9; --fm-50: #FAFBFD; --fm-white: #FFFFFF; /* ---------- SEMANTIC SURFACE / TEXT ---------- */ --bg: var(--fm-white); --bg-subtle: var(--fm-50); --bg-muted: var(--fm-100); --bg-ink: var(--fm-ink); /* dark sections / footers */ --fg1: var(--fm-ink); /* primary text */ --fg2: var(--fm-700); /* secondary text */ --fg3: var(--fm-500); /* muted / captions */ --fg-on-dark: #FFFFFF; --fg-on-dark-2: #B9BDD2; --border: var(--fm-200); --border-strong: var(--fm-300); --accent: var(--fm-red); --accent-hover: var(--fm-red-600); --accent-press: var(--fm-red-700); --link: var(--fm-blue); --link-hover: var(--fm-blue-600); /* ---------- STATUS (derived, kept on-brand) ---------- */ --success: #1E8E5A; --warning: var(--fm-gold-600); --danger: var(--fm-red); --info: var(--fm-blue); /* ---------- FONT FAMILIES ---------- */ --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif; /* athletic poster caps */ --font-head: var(--font-display); /* alias used across pages/components for headings */ --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-script: 'Pinyon Script', 'Segoe Script', cursive; /* signature flourish, sparing */ --font-mono: ui-monospace, 'SF Mono', 'Roboto Mono', monospace; /* ---------- TYPE SCALE (1.25 major-third-ish) ---------- */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.375rem; /* 22 */ --text-xl: 1.75rem; /* 28 */ --text-2xl: 2.25rem; /* 36 */ --text-3xl: 3rem; /* 48 */ --text-4xl: 4rem; /* 64 */ --text-5xl: 5.5rem; /* 88 */ --leading-tight: 1.04; --leading-snug: 1.2; --leading-body: 1.6; /* ---------- RADII ---------- */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ---------- SPACING (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ---------- SHADOWS (cool navy-tinted) ---------- */ --shadow-sm: 0 1px 2px rgba(22,24,42,.08); --shadow-md: 0 4px 14px rgba(22,24,42,.10); --shadow-lg: 0 14px 36px rgba(22,24,42,.14); --shadow-focus: 0 0 0 3px rgba(36,64,200,.35); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(.2,.7,.3,1); --ease-in-out: cubic-bezier(.65,.05,.36,1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; } /* ============================================================ SEMANTIC TYPOGRAPHY ============================================================ */ .fm-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: .18em; text-transform: uppercase; color: var(--fm-red); } .fm-h1, h1.fm { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: .005em; text-transform: uppercase; color: var(--fg1); } .fm-h2, h2.fm { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: var(--leading-snug); text-transform: uppercase; letter-spacing: .01em; color: var(--fg1); } .fm-h3, h3.fm { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); line-height: var(--leading-snug); text-transform: uppercase; letter-spacing: .02em; color: var(--fg1); } .fm-h4, h4.fm { font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); line-height: var(--leading-snug); color: var(--fg1); } .fm-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--text-lg); line-height: 1.5; color: var(--fg2); } .fm-body, p.fm { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg2); } .fm-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--fg3); } .fm-caption { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); } .fm-script { font-family: var(--font-script); font-weight: 400; color: var(--fm-blue); font-size: var(--text-3xl); line-height: 1; } .fm-mono { font-family: var(--font-mono); font-size: var(--text-sm); } /* ============================================================ LANDING PAGE SECTIONS (shared by the /*-classes-* pages) Centralised here so the pages don't each ship an identical