/* ============================================================ THEME: Binge Pizza (Calgary — 2016 Spiller Rd SE) Palette derived from the restaurant's own logo badge: signature pizzeria red, deep red ink, warm cream parchment. 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: #c91b1d; /* Binge red — primary brand (5.74:1 on white) */ --gs-primary-dark: #a81417; /* Deeper red (hover, panels) — 7.56:1 */ --gs-primary-deep: #7d0f12; /* Deepest red (footer bar) */ --gs-primary-light: rgba(201, 27, 29, 0.08); /* Red tint (icon circles, fills) */ /* ===== ACCENT ===== */ --gs-accent: #d14240; /* Bright brand red (logo mid-tone) */ --gs-accent-bright: #f0a9a2; /* Soft red-blush (on dark surfaces) */ --gs-accent-dark: #8f1114; /* Deep red (hover, text on light) — 9.30:1 */ --gs-accent-light: rgba(209, 66, 64, 0.13); /* Red tint */ /* ===== UI COLORS ===== */ --gs-dark: #111111; /* Ink: headings (near-black) */ --gs-text: #4a3c3e; /* Body text */ --gs-text-light: #7b6a6c; /* Muted/secondary text */ --gs-white: #ffffff; --gs-bg: #fbf6ef; /* Cream page background (logo badge cream) */ --gs-bg-alt: #f3e9de; /* Deeper cream (alt sections) */ --gs-cream: #fffcf8; /* Card surfaces */ --gs-border: rgba(0, 0, 0, 0.12); /* Hairline borders */ --gs-border-light: rgba(0, 0, 0, 0.07); /* Very subtle borders */ --gs-border-gold: rgba(201, 27, 29, 0.30); /* Red hairlines */ /* ===== ON-DARK COLORS ===== */ --gs-dark-text: #e8e6e6; /* Body text on red */ --gs-dark-text-soft: #b9b5b5; /* Muted text on red */ --gs-dark-heading: #fdf6f0; /* Headings on red */ --gs-dark-border: rgba(253, 246, 240, 0.26);/* Cream hairline on red */ /* ===== SHADOWS ===== */ --gs-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 14px 34px rgba(0, 0, 0, 0.10); --gs-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.08), 0 24px 54px rgba(0, 0, 0, 0.17); --gs-shadow-gold: 0 10px 30px rgba(201, 27, 29, 0.28); /* ===== TYPOGRAPHY ===== */ --gs-font-heading: 'Cormorant Garamond', 'Times New Roman', serif; --gs-font-body: 'Outfit', 'Segoe UI', sans-serif; --gs-heading-style: normal; --gs-heading-weight: 600; /* ===== HERO ===== */ --gs-hero-overlay: radial-gradient( ellipse 70% 60% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 70%, transparent 100% ), linear-gradient( 180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.58) 45%, rgba(0, 0, 0, 0.82) 100% ); --gs-hero-text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6); --gs-hero-accent: #ffd0c9; /* Blush readable on photo heroes */ --gs-hero-gold: #f2c464; /* Gold for hero badges/taglines */ /* ===== 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(10, 10, 10, 0.94); --gs-nav-open-bg: #0a0a0a; /* ===== BUTTONS ===== */ --gs-btn-radius: 3px; /* ===== FOOTER ===== */ --gs-footer-bg: #0b0b0b; --gs-footer-bar-bg: #050505; --gs-footer-text: #b9b5b5; /* ===== BRAND GLOW ===== */ --gs-glow: rgba(201, 27, 29, 0.4); --gs-glow-dark: rgba(201, 27, 29, 0.5); --gs-glow-soft: rgba(201, 27, 29, 0.3); /* ===== DECORATIVE ===== */ --gs-star-color: #d14240; --gs-faq-section-bg: #f3e9de; --gs-faq-container-bg: #fffcf8; /* ===== BACKWARD COMPATIBILITY ===== */ /* Old variable names still referenced by legacy selectors */ --primary-color: #c91b1d; --primary-color-light: #fbf6ef; --primary-color-dark: #a81417; --text-dark: #111111; --text-light: #7b6a6c; --white: #ffffff; --main-color: #d14240; --bg-shade: #f3e9de; /* ===== DEFENSIVE: tokens referenced elsewhere but never defined ===== */ --primary: #c91b1d; --primaryLight: #d14240; --secondary: #f3e9de; --secondaryLight: #fbf6ef; }