/* ============================================================= BESPOKE GAMING & ENTERTAINMENT — DESIGN TOKENS The single source of truth. Every other stylesheet reads from here; nothing else should hard-code a hex or a size. ============================================================= */ :root { /* ----------------------------------------------------------- 1. PALETTE — the ten named brand colors, verbatim. Never use these directly in a component. Use the semantic aliases in section 2 so themes stay swappable. ----------------------------------------------------------- */ --bge-vintage-white: #f4f3f2; --bge-paddock: #717677; --bge-apex-grey: #282827; --bge-black: #000000; --bge-royal-carpet: #685785; --bge-martini-blue: #8fc8e4; --bge-monza-red: #d63150; --bge-winners-circle: #f6da90; --bge-derby-green: #58be83; --bge-speed-cloth: #12615d; /* Tints/shades derived for borders, hovers and washes. Expressed as rgb triplets so they compose with alpha. */ --bge-vintage-white-rgb: 244 243 242; --bge-apex-grey-rgb: 40 40 39; --bge-winners-circle-rgb:246 218 144; --bge-speed-cloth-rgb: 18 97 93; /* ----------------------------------------------------------- 2. SEMANTIC COLOR — what a thing IS, not what color it is. Defaults below describe the DARK ground (the house default). .is-light / .is-brand in slides.css re-point these. ----------------------------------------------------------- */ --ground: var(--bge-apex-grey); --ink: var(--bge-vintage-white); --ink-muted: rgb(var(--bge-vintage-white-rgb) / 0.72); --ink-faint: rgb(var(--bge-vintage-white-rgb) / 0.45); --accent: var(--bge-winners-circle); /* gold: eyebrows, stats, rules */ --accent-ink: var(--bge-apex-grey); /* text ON gold */ --hairline: rgb(var(--bge-vintage-white-rgb) / 0.22); --panel: rgb(var(--bge-vintage-white-rgb) / 0.05); /* Data / marker sequence. Ordered for maximum separation, and restricted to colors that clear 3:1 on the dark ground. */ --seq-1: var(--bge-winners-circle); --seq-2: var(--bge-martini-blue); --seq-3: var(--bge-derby-green); --seq-4: var(--bge-monza-red); --seq-5: var(--bge-royal-carpet); /* ----------------------------------------------------------- 3. GRADIENTS — both house gradients run bright accent → deep accent → Apex Grey, top to bottom. Sampled from the brand guide, not invented. ----------------------------------------------------------- */ --gradient-green: linear-gradient(180deg, var(--bge-derby-green) 0%, var(--bge-speed-cloth) 48%, var(--bge-apex-grey) 88%); --gradient-dusk: linear-gradient(180deg, var(--bge-martini-blue) 0%, var(--bge-royal-carpet) 45%, var(--bge-apex-grey) 78%); /* Scrim laid over photography so type stays legible on it. */ --scrim-brand: linear-gradient(90deg, rgb(var(--bge-speed-cloth-rgb) / 0.97) 0%, rgb(var(--bge-speed-cloth-rgb) / 0.86) 45%, rgb(var(--bge-speed-cloth-rgb) / 0.55) 100%); --scrim-dark: linear-gradient(90deg, rgb(var(--bge-apex-grey-rgb) / 0.96) 0%, rgb(var(--bge-apex-grey-rgb) / 0.70) 100%); /* ----------------------------------------------------------- 4. TYPEFACES Source Serif — headlines and body. Open license. Eurostile Ext — features, callouts, eyebrows. LICENSED: falls back to Michroma where absent. See fonts.css for the loading strategy. ----------------------------------------------------------- */ --font-serif: "Source Serif 4", "Source Serif Pro", "Source Serif", Georgia, "Times New Roman", serif; --font-feature: "Eurostile Extended", "EurostileExt-Med", "Eurostile Ext", "Michroma", "Helvetica Neue", Arial, sans-serif; /* ----------------------------------------------------------- 5. TYPE SCALE — sized for a 1280 × 720 slide canvas. Values are px because a slide is a fixed canvas, not a reflowing page; slides.css scales the whole board at once. ----------------------------------------------------------- */ --size-display: 76px; /* cover headline */ --size-h1: 52px; /* slide headline */ --size-h2: 34px; /* section break, secondary headline */ --size-lead: 24px; /* italic subhead under a headline */ --size-card: 19px; /* card / pillar title (feature face)*/ --size-body: 18px; /* default body and bullets */ --size-small: 15px; /* captions, notes, footnotes */ --size-eyebrow: 13px; /* tracked uppercase kicker */ --size-stat: 120px; /* the single big number */ --leading-tight: 1.08; /* display and h1 */ --leading-snug: 1.28; /* h2, lead, card titles */ --leading-body: 1.55; /* body copy and bullets */ --tracking-feature: 0.16em; /* Eurostile uppercase needs air */ --tracking-eyebrow: 0.22em; --tracking-tight: -0.015em; /* large serif closes up slightly */ --weight-body: 400; --weight-medium: 600; --weight-headline: 400; /* the serif carries at regular */ /* ----------------------------------------------------------- 6. SPACE — 8px base. Only these steps; no arbitrary values. ----------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 72px; --space-10: 96px; /* ----------------------------------------------------------- 7. LAYOUT — the slide canvas and its safe area. 1280 × 720 = 13.333in × 7.5in at 96dpi, the standard 16:9 presentation page. Print rules live in slides.css. ----------------------------------------------------------- */ --slide-w: 1280px; --slide-h: 720px; --slide-pad-x: 80px; /* left/right safe margin */ --slide-pad-y: 64px; /* top/bottom safe margin */ --gutter: 32px; /* between grid columns */ --footer-h: 56px; /* reserved for logo + page number */ --measure: 62ch; /* max body line length */ /* ----------------------------------------------------------- 8. LINES, RADII, DEPTH The brand is flat and precise. Hairlines do the work that shadows would do elsewhere — use shadow only to lift content off photography. ----------------------------------------------------------- */ --line-hair: 1px; --line-marker: 3px; /* the square bullet / rule weight */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --shadow-lift: 0 18px 48px rgb(0 0 0 / 0.35); /* ----------------------------------------------------------- 9. MOTION — for on-screen use. Print ignores all of it. ----------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --duration-1: 140ms; --duration-2: 260ms; }