/* ========================================================================== Brooklyn Pizza | Design tokens Built to axis-premium-build.md. Direction adapted for food (warm, appetite-led) while keeping the Axis architecture: gradient surfaces, layered shadows, fluid type, section rhythm. Brand values extracted from the live site (docs/brand-live-extracted.md). ========================================================================== */ /* ---------- Self-hosted font: Plus Jakarta Sans (Axis standard) ---------- Same three weights, same directory layout, same byte-identical files as udesign-fabricators. Self-hosted rather than Google-served: no third-party connection, no consent question, and one less DNS+TLS round trip on LCP. 400 and 700 are preloaded in functions.php; 500 and 800 are not shipped and resolve to the nearest weight through the browser's font matching. font-display:swap so text paints immediately in the fallback and never blocks render. ------------------------------------------------------------------------ */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plus-jakarta-sans-v12-latin/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plus-jakarta-sans-v12-latin/plus-jakarta-sans-v12-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plus-jakarta-sans-v12-latin/plus-jakarta-sans-v12-latin-700.woff2') format('woff2'); } :root { /* ---- Brand ---------------------------------------------------------- */ --bpz-red: #CE0000; /* ACTION. Clickable things only. */ --bpz-red-light: #E01414; --bpz-red-dark: #A00000; --bpz-yellow: #FFDF00; /* BRAND + TRUST. Eyebrows, dots, stat units. */ --bpz-yellow-dp: #E5C900; /* CHANNEL green. Reserved for the WhatsApp CTA only -- it signifies a channel, it is not a second action colour. Red stays the action colour and the phone CTA stays visually dominant, so the three-tone rule holds. The supplied reference pill was #7FC07A, which gives white text just 2.16:1 (AA needs 4.5:1, and 3:1 even for large text). WhatsApp's own brand #25D366 is worse at 1.98:1. These are the same hue walked down in lightness until the LIGHTEST gradient stop clears 4.5:1, so every pixel the white label sits on passes: 4.67 / 5.70 / 7.52:1. */ --bpz-green: #42823E; --bpz-green-mid: #3A7336; --bpz-green-dark: #2F5F2C; --bpz-green-deep: #294F26; /* ---- Ink (on light) ------------------------------------------------- */ --bpz-ink: #17120F; /* warm near-black, never pure #000 */ --bpz-ink-soft: #3D332D; --bpz-ink-faint: #6B5D54; /* ---- Surfaces (light) ----------------------------------------------- */ --bpz-white: #FFFFFF; --bpz-bg: #FFFFFF; --bpz-bg-soft: #FDF8F8; /* warm wash */ --bpz-bg-warm: #F7F0E8; /* the "steel" slot, warmed for food */ --bpz-line: #E8DED4; --bpz-line-soft: #F1E9E1; /* ---- On dark -------------------------------------------------------- */ --bpz-on-dark: #FFFFFF; --bpz-on-dark-soft: rgba(255,255,255,.78); --bpz-on-dark-faint: rgba(255,255,255,.54); --bpz-on-dark-line: rgba(255,255,255,.16); /* ---- Gradients (depth, not flat fills) ------------------------------ */ --bpz-grad-hero: linear-gradient(150deg, #2A1B14 0%, #1A100C 52%, #0D0705 100%); --bpz-grad-panel: linear-gradient(150deg, #33211A 0%, #1F1410 55%, #140C09 100%); --bpz-grad-warm: linear-gradient(150deg, #FFFBF6 0%, var(--bpz-bg-warm) 100%); --bpz-grad-action: linear-gradient(135deg, #E01414 0%, var(--bpz-red) 55%, var(--bpz-red-dark) 100%); /* Runs light-to-dark like the action gradient, but starting at the lightest AA-safe stop rather than a lighter tint -- white sits on all of it. */ --bpz-grad-wa: linear-gradient(135deg, var(--bpz-green) 0%, var(--bpz-green-mid) 55%, var(--bpz-green-dark) 100%); --bpz-grad-wa-hover: linear-gradient(135deg, var(--bpz-green-mid) 0%, var(--bpz-green-dark) 55%, var(--bpz-green-deep) 100%); --bpz-grad-card: linear-gradient(180deg, #FFFFFF 0%, #FFFBF7 100%); /* Hero image overlay: keeps white text legible over any photo. */ --bpz-hero-scrim: linear-gradient(180deg, rgba(20,10,6,.58), rgba(13,7,5,.86)), linear-gradient(90deg, rgba(20,10,6,.72), rgba(20,10,6,.18) 74%); --bpz-hero-glow: radial-gradient(52% 62% at 86% 10%, rgba(255,223,0,.13), transparent 64%); /* ---- Shadows (layered, always two stops) ---------------------------- */ --bpz-sh-sm: 0 1px 2px rgba(23,18,15,.06), 0 2px 6px rgba(23,18,15,.05); --bpz-sh-md: 0 4px 10px rgba(23,18,15,.07), 0 12px 26px rgba(23,18,15,.08); --bpz-sh-lg: 0 10px 24px rgba(23,18,15,.10), 0 28px 60px rgba(23,18,15,.13); --bpz-sh-xl: 0 18px 40px rgba(23,18,15,.13), 0 44px 90px rgba(23,18,15,.18); --bpz-sh-card-hover: 0 14px 30px rgba(23,18,15,.13), 0 34px 70px rgba(23,18,15,.17); --bpz-sh-action: 0 6px 16px rgba(206,0,0,.32); --bpz-sh-wa: 0 4px 10px rgba(41,79,38,.22), 0 12px 26px rgba(41,79,38,.20); --bpz-sh-inset-dark: inset 0 1px 0 rgba(255,255,255,.06); /* ---- Type ----------------------------------------------------------- */ /* One face for the whole site, per the Axis standard. The display and body roles stay as separate tokens because they carry different weights and tracking, not different families. Headings previously ran on a serif that was never self-hosted, so what a visitor saw depended on whether their machine happened to have PT Serif: now it is deterministic everywhere. */ --bpz-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bpz-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bpz-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --bpz-fs-display: clamp(2.75rem, 7.5vw, 6rem); --bpz-fs-h2: clamp(2rem, 4vw, 3.25rem); --bpz-fs-h3: 1.375rem; --bpz-fs-body: clamp(1rem, 1.4vw, 1.1875rem); --bpz-fs-lede: clamp(1.0625rem, 1.5vw, 1.3125rem); --bpz-fs-eyebrow: 0.6875rem; --bpz-fw-med: 500; --bpz-fw-bold: 700; --bpz-fw-max: 800; /* ---- Layout --------------------------------------------------------- */ --bpz-max: 80rem; /* 1280 */ --bpz-max-wide: 82.5rem; /* 1320 */ --bpz-gut: clamp(1.25rem, 4vw, 2.5rem); --bpz-section-y: clamp(6rem, 13vh, 10rem); /* ---- Radius --------------------------------------------------------- */ --bpz-r-sm: 0.5rem; --bpz-r-md: 0.875rem; --bpz-r-lg: 1.375rem; --bpz-r-xl: 2rem; --bpz-r-pill: 999px; /* ---- Z-index (locked, platform-fixed -- does NOT swap per client) ---- Verbatim from axis-build-standard.md section 4. Raw integers in component CSS are forbidden. Stacking-context trap: transform, opacity<1, filter and will-change on an ancestor trap every child z-index inside it. */ --z-base: 1; --z-raised: 10; --z-sticky-nav: 100; --z-drawer: 200; --z-sticky-cta: 250; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-skip-link: 600; /* ---- Motion --------------------------------------------------------- */ --bpz-ease: cubic-bezier(0.16, 1, 0.3, 1); --bpz-dur: 0.9s; }