/* ============================================================ WESTFIELD VICTORY STORE — Colors & Type Foundations "Your Neighborhood Grocery Store Since 1998" ------------------------------------------------------------ Brand colors are derived directly from the store logo: Westfield Blue #0C4AC4 (the "Westfield" script) Victory Red #AB0404 (the "Victory" script) Cart / ink #000000 (the cart glyph above the wordmark) The system pairs these with CLEAN, COOL neutrals (crisp near-white surfaces, neutral gray ink) so the brand stays modern and the blue + red do the heavy lifting — warm but not beige, and never the "big-box supermarket chain" look. ============================================================ */ /* ---- Webfonts (Google Fonts) ------------------------------- NOTE: the logo wordmark uses a custom/unknown brush script. These three families are SUBSTITUTIONS chosen to match the brand's warm, established, friendly character. Swap freely if the owner provides licensed brand fonts. · Bitter — slab serif, sturdy & neighborly (headings) · Mulish — humanist sans, clean & friendly (body/UI) · Yellowtail — brush script, echoes the logo (accents only) ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Yellowtail&display=swap'); :root { /* ---------- BRAND CORE ---------- */ --wvs-blue: #0C4AC4; /* Westfield Blue — primary */ --wvs-red: #AB0404; /* Victory Red — accent */ --wvs-ink: #000000; /* cart glyph / pure black */ /* ---------- BLUE SCALE ---------- */ --blue-900: #07276B; --blue-800: #0A3A9C; --blue-700: #0C4AC4; /* = brand blue */ --blue-600: #245FD6; --blue-500: #3E78E6; --blue-300: #8FB1F1; --blue-200: #C2D5F8; --blue-100: #DEE9FB; --blue-50: #EEF3FD; /* ---------- RED SCALE ---------- */ --red-900: #5E0202; --red-800: #7E0303; --red-700: #AB0404; /* = brand red */ --red-600: #C42121; --red-500: #DC3A3A; --red-200: #F2C7C7; --red-100: #F8DEDE; --red-50: #FCEEEE; /* ---------- SUPPORT HUES ---------- Fresh green for produce / "in stock" / savings, Harvest gold for price tags / specials / highlights. */ --green-700: #1F6B43; --green-600: #2E7D4F; /* fresh / success */ --green-100: #E0F0E6; --gold-700: #B5811A; --gold-600: #DDA01F; /* specials / price flag (small accents only) */ --gold-100: #FBEFD2; /* ---------- CLEAN NEUTRALS ---------- Crisp, cool near-whites + a neutral (faintly cool) gray ink ladder. The blue & red carry the brand warmth; the surfaces stay clean so the palette reads modern, not beige. */ --paper: #F5F7FA; /* app background (clean cool off-white) */ --paper-2: #EBEFF5; /* alternating section / tint */ --surface: #FFFFFF; /* cards, sheets */ --ink-900: #161A21; /* primary text (near-black) */ --ink-700: #373D47; /* strong body */ --ink-500: #626A75; /* secondary / muted text */ --ink-300: #99A0AB; /* placeholder / captions */ --line: #E4E8EF; /* hairline borders */ --line-strong:#D2D8E1; /* stronger dividers */ /* ---------- SEMANTIC TOKENS ---------- */ --bg: var(--paper); --bg-alt: var(--paper-2); --bg-surface: var(--surface); --fg: var(--ink-900); --fg-muted: var(--ink-500); --fg-subtle: var(--ink-300); --fg-on-blue: #FFFFFF; --fg-on-red: #FFFFFF; --primary: var(--blue-700); --primary-hover: var(--blue-800); --primary-press: var(--blue-900); --accent: var(--red-700); --accent-hover: var(--red-800); --success: var(--green-600); --sale: var(--red-700); --price-flag: var(--gold-600); --border: var(--line); --border-strong: var(--line-strong); --focus-ring: color-mix(in srgb, var(--blue-700) 45%, transparent); /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Bitter', 'Iowan Old Style', Georgia, serif; --font-body: 'Mulish', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-script: 'Yellowtail', 'Brush Script MT', cursive; /* ---------- TYPE SCALE (desktop) ---------- 1.250 major-third-ish ramp on a 16px base. */ --fs-display: 64px; --lh-display: 1.04; /* hero headline */ --fs-h1: 48px; --lh-h1: 1.08; --fs-h2: 36px; --lh-h2: 1.14; --fs-h3: 26px; --lh-h3: 1.22; --fs-h4: 20px; --lh-h4: 1.30; --fs-lead: 20px; --lh-lead: 1.55; /* intros */ --fs-body: 17px; --lh-body: 1.65; /* default paragraph */ --fs-small: 15px; --lh-small: 1.5; --fs-caption: 13px; --lh-caption: 1.45; --fs-eyebrow: 13px; --lh-eyebrow: 1.2; /* uppercase label */ --ls-tight: -0.02em; --ls-normal: 0; --ls-eyebrow: 0.14em; /* tracked-out uppercase labels */ /* ---------- 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-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* ---------- RADII ---------- Soft, friendly — never pill-everything, never sharp. */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ---------- SHADOWS ---------- Neutral cool-tinted, soft. Cards sit gently on the surface. */ --sh-xs: 0 1px 2px rgba(18, 28, 46, 0.06); --sh-sm: 0 2px 6px rgba(18, 28, 46, 0.08); --sh-md: 0 6px 18px rgba(18, 28, 46, 0.10); --sh-lg: 0 16px 40px rgba(18, 28, 46, 0.14); --sh-blue: 0 8px 22px rgba(12, 74, 196, 0.22); /* ---------- MOTION ---------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; /* ---------- LAYOUT ---------- */ --container: 1200px; --container-narrow: 760px; } /* ============================================================ SEMANTIC TYPE CLASSES Use these directly; they read from the tokens above. ============================================================ */ .wvs-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-tight); color: var(--fg); } .wvs-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-tight); color: var(--fg); } .wvs-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight); color: var(--fg); } .wvs-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--fg); } .wvs-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--fg); } .wvs-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg-muted); } .wvs-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-700); } .wvs-small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-muted); } .wvs-caption { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-subtle); } /* Tracked-out uppercase label — used above headings */ .wvs-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); } /* Brush-script accent — echoes the logo. Use SPARINGLY: short flourishes only ("Since 1998", "Fresh daily"). */ .wvs-script { font-family: var(--font-script); font-weight: 400; color: var(--primary); line-height: 1.1; } /* Price text (deli/specials) */ .wvs-price { font-family: var(--font-display); font-weight: 800; color: var(--accent); letter-spacing: var(--ls-tight); }