/* ── Self-hosted fonts (offline; no CDN) ── */ @font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/playfair-display-latin-700-normal.woff2') format('woff2')} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/playfair-display-latin-800-normal.woff2') format('woff2')} @font-face{font-family:'Playfair Display';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/playfair-display-latin-900-normal.woff2') format('woff2')} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2')} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/source-sans-3-latin-700-normal.woff2') format('woff2')} /* shared/brand.css — VUB design tokens (single source of truth). Site chrome uses Old Glory Blue (#0A3161). Seal MARK keeps its own indigo. Targets WCAG AAA for body text. */ :root { /* Brand blue — Old Glory Blue (site chrome). Seal MARK keeps its own indigo. */ --navy: #0A3161; --navy-deep: #07223F; --navy-mid: #123E72; --navy-light: #2C5AA0; --blue-soft: #5E86C4; /* ~3.1:1 on cream — large text / accents ONLY, never small body */ /* Old Glory Red (CTA/accents) */ /* --red replaces the former --crimson; legacy pages that still inline --crimson migrate to --red during their M4/M5/M7 re-skin. */ --red: #B31942; --red-bright: #C61F4C; --red-dark: #8B1432; /* Gold accents — large text / accents ONLY, never small body */ --gold: #C9A227; --gold-light: #E4C45A; --gold-pale: #F5E9C0; /* Neutrals / surfaces */ --white: #FFFFFF; --cream: #FDF9F4; /* soft page bg (kinder to older eyes than stark white) */ --off-white: #F5F7FA; --ink: #16243A; /* default body text (AAA on cream) */ --muted: #46566D; /* secondary text — keep >=4.5:1 on cream */ --border: #E2DECF; /* Status (icon + text always accompany color) */ --success:#1E7F44; --danger:#C2283C; --warning:#B5840B; --info:#1A6E86; /* Focus */ --focus: #F5C84C; /* Typography */ --font-display:'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Source Sans 3', 'Segoe UI', Tahoma, Verdana, sans-serif; --fs-base: 18px; /* min reading size */ --fs-slide: 24px; /* on-screen lesson body */ --fs-h1: clamp(2rem, 4vw, 3rem); --fs-h2: clamp(1.6rem, 3vw, 2.25rem); --fs-h3: 1.3rem; --fs-small: 0.95rem; --lh: 1.7; /* generous line-height */ /* Spacing / shape */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --radius: 12px; --radius-sm: 6px; --shadow-card: 0 8px 40px rgba(10,49,97,.12), 0 2px 8px rgba(10,49,97,.06); --shadow-hover:0 20px 60px rgba(10,49,97,.20), 0 4px 16px rgba(10,49,97,.10); /* Accessibility */ --tap-min: 44px; /* min interactive target */ } /* Older-learner text-size control hook: set data-text-size on */ @media screen { html[data-text-size="sm"] { font-size: 94%; --fs-base: 16px; --fs-slide: 22px; --lh: 1.6; } html[data-text-size="lg"] { font-size: 112.5%; --fs-base: 22px; --fs-slide: 32px; --lh: 1.85; } html[data-text-size="xl"] { font-size: 125%; --fs-base: 26px; --fs-slide: 38px; --lh: 1.95; } html[data-text-size="xxl"] { font-size: 137.5%; --fs-base: 30px; --fs-slide: 44px; --lh: 2.05; } } /* Baseline applications (opt-in via class to avoid disturbing existing pages in M2) */ .vub-brand, .vub-brand body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh); color: var(--ink); background: var(--cream); } .vub-brand :is(a,button):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } .vub-brand :is(button,.btn,[role="button"]) { min-height: var(--tap-min); } .vub-brand h1,.vub-brand h2,.vub-brand h3 { font-family: var(--font-display); color: var(--navy); line-height: 1.15; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ── Shared patriotic motifs (reusable site-wide) ── */ .vub-tricolor{height:8px;background:linear-gradient(90deg,var(--red) 0 33.3%,var(--white) 33.3% 66.6%,var(--navy) 66.6% 100%)} .vub-bunting{height:30px;background-repeat:repeat-x;background-position:center top;background-size:64px 64px; background-image:radial-gradient(circle at 50% 0,var(--navy) 0 11px,var(--white) 11px 16px,var(--red) 16px 23px,var(--white) 23px 27px,var(--navy) 27px 31px,transparent 31px); filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}