/* ============================================================ THEME: City South Pizza — Winnipeg · "Ember" Brand palette derived from the restaurant's real storefront sign and logo: the red "PIZZA" wordmark now carries the whole site. A warm charcoal ground (near-black with a burgundy cast) replaces the old blue page; warm cream carries the type; chili red is the action colour and saffron the highlight. Swap this file to re-skin the entire site. DO NOT add layout, grid, flexbox, or spacing here. ONLY define CSS custom property tokens and decorative values. ============================================================ */ /* Load this theme's fonts in the HTML — NOT via @import */ /* Fonts: Cormorant Garamond (display serif) + Outfit (body sans) */ :root { /* ===== BRAND COLORS ===== --gs-primary is an INK: accent text, icons, underlines, small fills. --gs-primary-dark / -deep are SURFACES: bands, panels, nav, footer. Do not swap those roles — the contrast maths depends on it. */ --gs-primary: #d9694a; /* Ember terracotta — icons, links, accents */ --gs-primary-dark: #241a19; /* Raised warm panel (bands, footer) */ --gs-primary-deep: #180f10; /* Deepest band (hero, nav, dark sections) */ --gs-primary-light: rgba(217, 105, 74, 0.14); /* Ember tint (icon circles, fills) */ /* ===== ACCENT ===== */ /* Chili red is the ACTION colour. If it is red, it does something. */ --gs-accent: #d13b2e; /* Red — from "PIZZA" wordmark */ --gs-accent-bright: #f0604c; /* Bright red (text/icons on dark) */ --gs-accent-dark: #a82c22; /* Deep red (hover) */ --gs-accent-light: rgba(209, 59, 46, 0.16); /* Red tint */ /* ===== SAFFRON (highlight only — never a button) ===== */ --gs-saffron: #e8a33d; /* Turmeric — eyebrows, stars, heat */ --gs-saffron-deep: #e2a34a; /* Saffron text on warm charcoal */ --gs-saffron-light: rgba(232, 163, 61, 0.14); /* Saffron tint */ /* ===== SPICE DIAL ===== */ --gs-heat-1: #e8a33d; /* Mild */ --gs-heat-2: #ee8a3f; /* Medium */ --gs-heat-3: #f0604c; /* Hot */ /* ===== UI COLORS ===== */ --gs-dark: #f8efe3; /* Headings — warm off-white, 15:1 on the ground */ --gs-text: #ded2c4; /* Body text — 12.6:1 on the ground */ --gs-text-light: #b3a598; /* Muted/secondary text — 8.1:1, comfortably AA */ --gs-white: #ffffff; --gs-bg: #15100f; /* Deep warm charcoal page background */ --gs-bg-alt: #1c1514; /* Lifted charcoal (alt sections) */ --gs-cream: #211918; /* Card surfaces — a step above the ground */ --gs-border: rgba(255, 232, 208, 0.14); /* Hairline borders */ --gs-border-light: rgba(255, 232, 208, 0.09); /* Very subtle borders */ --gs-border-gold: rgba(232, 163, 61, 0.40); /* Saffron hairlines */ /* ===== ON-DARK COLORS ===== The whole site is dark now, so these stay close to the base ink — they exist so feature bands can run a touch brighter than body copy. */ --gs-dark-text: #e8dccd; /* Body text on a band — 13:1 */ --gs-dark-text-soft: #bdae9e; /* Muted text on a band — 8.8:1 */ --gs-dark-heading: #fdf7ee; /* Headings on a band — 16:1 */ --gs-dark-border: rgba(255, 233, 210, 0.20);/* Hairline on a band */ /* ===== SHADOWS ===== */ /* Near-black on a dark ground — a tinted shadow reads as haze here. */ --gs-shadow: 0 2px 6px rgba(0, 0, 0, 0.30), 0 14px 34px rgba(0, 0, 0, 0.42); --gs-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.36), 0 24px 54px rgba(0, 0, 0, 0.55); --gs-shadow-gold: 0 10px 30px rgba(209, 59, 46, 0.34); /* ===== TYPOGRAPHY ===== */ --gs-font-heading: 'Cormorant Garamond', 'Times New Roman', serif; --gs-font-body: 'Outfit', 'Segoe UI', sans-serif; /* Display face for the redesigned homepage. Pages opt in by setting --gs-font-heading to this token, and must load Fraunces in their . */ --gs-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --gs-heading-style: normal; --gs-heading-weight: 600; /* ===== HERO ===== */ /* A warm charcoal scrim — this is what keeps hero text and inline links legible over unpredictable food photography. */ --gs-hero-overlay: linear-gradient( 180deg, rgba(15, 9, 9, 0.66) 0%, rgba(15, 9, 9, 0.48) 45%, rgba(15, 9, 9, 0.80) 100% ); /* ===== TEXTURE ===== */ /* Fine film grain, layered over heroes and dark panels */ --gs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); /* ===== LAYOUT ===== */ --max-width: 1200px; /* ===== NAVBAR ===== */ --gs-nav-height: 85px; --gs-nav-height-mobile: 72px; --gs-nav-bg: rgba(19, 12, 12, 0.90); --gs-nav-open-bg: #180f10; /* ===== BUTTONS ===== */ --gs-btn-radius: 3px; /* ===== FOOTER ===== */ --gs-footer-bg: #1b1413; --gs-footer-bar-bg: #120c0c; --gs-footer-text: #cbbdae; /* ===== BRAND GLOW ===== */ --gs-glow: rgba(217, 105, 74, 0.4); --gs-glow-dark: rgba(168, 44, 34, 0.5); --gs-glow-soft: rgba(232, 163, 61, 0.28); /* ===== DECORATIVE ===== */ --gs-star-color: #e8a33d; --gs-faq-section-bg: #1c1514; --gs-faq-container-bg: #211918; /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced by legacy selectors */ --primary-color: #d9694a; --primary-color-light: #1c1514; --primary-color-dark: #241a19; --text-dark: #f8efe3; --text-light: #b3a598; --white: #ffffff; --main-color: #d13b2e; --bg-shade: #1c1514; }