/* ===================================================================== WOLF HOUSE PRODUCTION — Core tokens: color + type Cinematic · Premium · Dark · Craft-driven · Production House Import this file first, before component styles. ===================================================================== */ @import url("./fonts.css"); /* ---- Fonts ----------------------------------------------------------- Headline : Bebas Neue — tall, condensed, poster / production feel (Google Fonts CDN) Body : Myriad Pro — self-hosted OTF, 40 cuts (standard · cond · semicn · semiext) In your HTML , load Bebas Neue only: --------------------------------------------------------------------- */ :root { /* ---------- Brand color primitives ---------- */ --wh-black: #0A0A0A; /* primary background */ --wh-dark-grey: #1A1A1A; /* raised surface / cards */ --wh-dark-grey-2: #141414; /* between black and dark-grey */ --wh-off-white: #F5F4F0; /* primary text / knockout logo */ --wh-soft-grey: #8A8A8A; /* secondary text */ --wh-blue: #1C2FE8; /* electric accent — CTA / links */ --wh-blue-light: #3D4EFF; /* hover / active accent */ --wh-navy: #0A265E; /* heritage brand blue (logo) */ /* ---------- Line / border ---------- */ --wh-line: rgba(245, 244, 240, 0.08); --wh-line-strong: rgba(245, 244, 240, 0.16); /* ---------- Semantic surfaces ---------- */ --bg: var(--wh-black); --surface: var(--wh-dark-grey); --surface-2: var(--wh-dark-grey-2); /* ---------- Semantic text ---------- */ --fg1: var(--wh-off-white); /* primary */ --fg2: var(--wh-soft-grey); /* secondary*/ --fg3: rgba(245, 244, 240, 0.45); /* tertiary */ --fg-on-accent: var(--wh-off-white); /* ---------- Accent ---------- */ --accent: var(--wh-blue); --accent-hover: var(--wh-blue-light); /* ---------- Type families ---------- */ --font-display: "Bebas Neue", "Anton", "Oswald", Impact, sans-serif; --font-body: "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; /* ---------- Type scale (fluid) ---------- */ --fs-hero: clamp(72px, 11vw, 168px); /* hero headline */ --fs-h1: clamp(48px, 7vw, 104px); /* section headline */ --fs-h2: clamp(34px, 4.5vw, 64px); /* sub headline */ --fs-h3: clamp(24px, 2.4vw, 34px); /* card / work title */ --fs-lead: clamp(18px, 1.5vw, 22px); /* lead paragraph */ --fs-body: 16px; /* body */ --fs-small: 14px; /* small body */ --fs-label: 11px; /* section label */ /* ---------- Spacing scale ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 120px; /* ---------- Layout ---------- */ --container-pad: 60px; /* desktop side gutter */ --section-pad-y: 120px; /* desktop section v-pad */ --maxw: 1440px; /* content max width */ /* ---------- Radius ---------- */ --r-sm: 2px; --r-md: 4px; --r-pill: 999px; /* ---------- Motion ---------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 0.25s; --dur: 0.35s; --dur-slow: 0.6s; } /* ===================================================================== Base type rules ===================================================================== */ .wh-display, h1.wh, h2.wh { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; color: var(--fg1); margin: 0; } .wh-hero { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-hero); line-height: 0.9; letter-spacing: 0.005em; color: var(--fg1); margin: 0; } .wh-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 0.94; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; color: var(--fg1); } .wh-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 0.96; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; color: var(--fg1); } .wh-h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.0; text-transform: uppercase; letter-spacing: 0.015em; margin: 0; color: var(--fg1); } /* Section label — small, wide-tracked, uppercase */ .wh-label { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg2); margin: 0; } .wh-lead { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; color: var(--fg1); margin: 0; } .wh-body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; color: var(--fg2); margin: 0; } .wh-small { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; line-height: 1.55; color: var(--fg2); }