/* ========================================================================== Hotshot Media — Foundational Tokens Colors, Type, Spacing, Radius, Shadows, Motion ========================================================================== */ /* Webfonts via Google Fonts (Sora 800 for display, Inter 400/500/600 for UI) */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ------------------------------------------------------------------ */ /* COLOR — Raw palette */ /* ------------------------------------------------------------------ */ --hs-charcoal: #0D0D10; /* Primary background (dark base) */ --hs-graphite: #1C1F24; /* Secondary background, cards */ --hs-cool-gray: #6B7178; /* Body text on dark, borders, muted */ --hs-silver: #D0D3DB; /* Secondary text, subheads, icon fill */ --hs-deep-red: #B3010B; /* Primary accent — CTAs, logo dot */ --hs-deep-red-hot: #D6131F; /* Hover state for red */ --hs-deep-red-dim: #7A0107; /* Pressed state for red */ --hs-white: #FFFFFF; --hs-black: #000000; /* Tints / glass — for borders, dividers, low-opacity overlays */ --hs-line-08: rgba(208, 211, 219, 0.08); --hs-line-16: rgba(208, 211, 219, 0.16); --hs-line-32: rgba(208, 211, 219, 0.32); --hs-cool-32: rgba(107, 113, 120, 0.32); --hs-cool-50: rgba(107, 113, 120, 0.50); /* ------------------------------------------------------------------ */ /* COLOR — Semantic */ /* ------------------------------------------------------------------ */ --bg: var(--hs-charcoal); --bg-elevated: var(--hs-graphite); --bg-sunken: #08080A; --fg: var(--hs-white); --fg-muted: var(--hs-silver); --fg-subtle: var(--hs-cool-gray); --accent: var(--hs-deep-red); --accent-hover: var(--hs-deep-red-hot); --accent-press: var(--hs-deep-red-dim); --on-accent: var(--hs-white); --border: var(--hs-line-16); --border-strong: var(--hs-line-32); --divider: var(--hs-line-08); /* ------------------------------------------------------------------ */ /* TYPE — Families */ /* ------------------------------------------------------------------ */ --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* TYPE — Sizes (fluid-friendly base; raw px for predictability) */ --fs-display-xl: 96px; /* Hero H1 max */ --fs-display-lg: 72px; /* Hero H1 min */ --fs-h1: 56px; --fs-h2: 40px; --fs-h3: 32px; --fs-h4: 24px; --fs-h5: 18px; --fs-body-lg: 18px; --fs-body: 16px; --fs-caption: 14px; --fs-meta: 13px; --fs-eyebrow: 12px; /* TYPE — Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* TYPE — Tracking */ --track-display: 0.01em; --track-display-wide: 0.06em; --track-eyebrow: 0.16em; /* All-caps eyebrows / service strip */ --track-button: 0.08em; --track-body: 0; /* TYPE — Leading */ --lh-tight: 1.04; --lh-snug: 1.16; --lh-normal: 1.5; --lh-loose: 1.7; /* ------------------------------------------------------------------ */ /* 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; --sp-32: 128px; /* ------------------------------------------------------------------ */ /* RADIUS — Subtle. The brand is precise, not playful. */ /* ------------------------------------------------------------------ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; /* Default for buttons, inputs, cards */ --radius-lg: 10px; --radius-pill: 999px; --radius-circle: 50%; /* ------------------------------------------------------------------ */ /* SHADOW & ELEVATION */ /* On dark, lift via inner highlight + outer black glow. */ /* ------------------------------------------------------------------ */ --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 24px rgba(0,0,0,0.45); --shadow-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 60px rgba(0,0,0,0.6); --shadow-red-glow: 0 0 0 1px rgba(179,1,11,0.0), 0 8px 32px rgba(179,1,11,0.25); --ring-focus: 0 0 0 2px var(--hs-charcoal), 0 0 0 4px var(--hs-deep-red); /* ------------------------------------------------------------------ */ /* MOTION */ /* ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-precise: cubic-bezier(0.4, 0, 0.1, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* ------------------------------------------------------------------ */ /* LAYOUT */ /* ------------------------------------------------------------------ */ --container: 1280px; --container-narrow: 880px; --gutter: 24px; } /* ========================================================================== Semantic element styles — opt-in via class so this file stays a token sheet ========================================================================== */ .hs-display-xl, .hs-display-lg, .hs-h1, .hs-h2, .hs-h3, .hs-h4, .hs-h5 { font-family: var(--font-display); font-weight: var(--fw-extrabold); color: var(--fg); line-height: var(--lh-tight); letter-spacing: var(--track-display); margin: 0; } .hs-display-xl { font-size: var(--fs-display-xl); letter-spacing: var(--track-display-wide); } .hs-display-lg { font-size: var(--fs-display-lg); letter-spacing: var(--track-display-wide); } .hs-h1 { font-size: var(--fs-h1); } .hs-h2 { font-size: var(--fs-h2); } .hs-h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } .hs-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); } .hs-h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); } .hs-body-lg, .hs-body, .hs-caption, .hs-meta { font-family: var(--font-body); font-weight: var(--fw-regular); color: var(--fg-muted); line-height: var(--lh-normal); margin: 0; } .hs-body-lg { font-size: var(--fs-body-lg); } .hs-body { font-size: var(--fs-body); } .hs-caption { font-size: var(--fs-caption); color: var(--fg-subtle); } .hs-meta { font-size: var(--fs-meta); color: var(--fg-subtle); } .hs-eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-muted); } .hs-label { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--fg); } .hs-mono { font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted); } /* The service strip — POST PRODUCTION • WORKFLOW • AUTOMATION • CRAFT */ .hs-service-strip { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-muted); } .hs-service-strip .dot { color: var(--accent); margin: 0 0.6em; }