/* ============================================================ THEME: Taystee Flame (Taystee Donair & Pizza — Edmonton) Vibrant warm palette: tiger flame orange and dark amaranth wine over charcoal blue / ink black, on clean white. Brand palette Tiger Flame #f46036 accent, buttons, highlights White #fffdfd page surface, text on dark Dark Amaranth #720026 deep accent, hovers, links on light Charcoal Blue #233d4d primary structure, panels Ink Black #011627 deepest surfaces, headings, footer 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: #233d4d; /* Charcoal blue — primary brand */ --gs-primary-dark: #16303f; /* Deeper charcoal (hover, panels) */ --gs-primary-deep: #011627; /* Ink black (deepest surfaces) */ --gs-primary-light: rgba(35, 61, 77, 0.08); /* Charcoal tint (icon circles, fills) */ /* ===== ACCENT ===== */ --gs-accent: #bb0909; /* Tiger flame — the vibrant hero */ --gs-accent-bright: #ffd904; /* Lifted flame (on dark surfaces) */ --gs-accent-dark: #c7a50f; /* Dark amaranth (hover, text on light) */ --gs-accent-light: rgba(244, 96, 54, 0.13); /* Flame tint */ /* ===== ON-ACCENT ===== */ /* Text that sits ON an accent fill. Contrast-checked, do not guess. */ --gs-on-accent: #011627; /* 5.7:1 on tiger flame — AA */ --gs-on-accent-dark: #fffdfd; /* 12.0:1 on dark amaranth — AAA */ /* ===== UI COLORS ===== */ --gs-dark: #011627; /* Ink: headings */ --gs-text: #2c4152; /* Body text — 10.5:1 on white */ --gs-text-light: #5f7383; /* Muted/secondary text — 4.9:1, AA */ --gs-white: #fffdfd; --gs-bg: #fffdfd; /* Page background */ --gs-bg-alt: #fff1eb; /* Warm flame tint (alt sections) */ --gs-cream: #ffffff; /* Card surfaces — separate via shadow */ --gs-border: rgba(1, 22, 39, 0.12); /* Hairline borders */ --gs-border-light: rgba(1, 22, 39, 0.07); /* Very subtle borders */ --gs-border-gold: rgba(244, 96, 54, 0.38); /* Accent hairlines */ /* ===== ON-DARK COLORS ===== */ --gs-dark-text: #c7d4dc; /* Body text on dark — 12.1:1 */ --gs-dark-text-soft: #93a7b4; /* Muted text on dark — 7.4:1 */ --gs-dark-heading: #fffdfd; /* Headings on dark */ --gs-hero-heading: #fffdfd; /* Hero

over imagery */ --gs-dark-border: rgba(244, 96, 54, 0.30); /* Flame hairline on dark */ /* ===== RGB CHANNELS ===== */ /* Consumed by style.css as rgba(var(--token), alpha). Keep in sync with the hex values above whenever the palette changes. */ --gs-accent-rgb: 244, 96, 54; --gs-accent-bright-rgb: 255, 138, 92; --gs-accent-dark-rgb: 114, 0, 38; --gs-primary-rgb: 35, 61, 77; --gs-ink-rgb: 1, 22, 39; --gs-white-rgb: 255, 253, 253; /* ===== SHADOWS ===== */ --gs-shadow: 0 2px 6px rgba(1, 22, 39, 0.06), 0 14px 34px rgba(1, 22, 39, 0.10); --gs-shadow-hover: 0 4px 10px rgba(1, 22, 39, 0.09), 0 24px 54px rgba(1, 22, 39, 0.18); --gs-shadow-gold: 0 10px 30px rgba(244, 96, 54, 0.32); /* ===== TYPOGRAPHY ===== */ --gs-font-heading: 'Cormorant Garamond', 'Times New Roman', serif; --gs-font-body: 'Outfit', 'Segoe UI', sans-serif; --gs-heading-weight: 600; /* ===== HERO ===== */ /* Duotone: ink-black shoulders with a true-amaranth mid-band, so food photography reads rich and warm rather than grey. Alpha is tuned to 0.62 on purpose — hero copy sits directly on these images, and amaranth is lighter than ink, so it needs the extra density to hold the same legibility. Do not lower it without re-checking heroes. */ --gs-hero-overlay: linear-gradient( 180deg, rgba(1, 22, 39, 0.76) 0%, rgba(114, 0, 38, 0.62) 46%, rgba(1, 22, 39, 0.88) 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(1, 22, 39, 0.94); --gs-nav-open-bg: #011627; /* ===== BUTTONS ===== */ --gs-btn-radius: 3px; /* ===== CTA SURFACES ===== */ /* Amaranth owns the "act now" moments — full-bleed CTA bands. Charcoal stays on informational dark panels (testimonials, map, food hero) so the two darks read as different kinds of section, not noise. */ --gs-cta-bg: #720026; /* ===== FOOTER ===== */ --gs-footer-bg: #011627; --gs-footer-bar-bg: #720026; --gs-footer-text: #93a7b4; /* ===== DECORATIVE ===== */ --gs-star-color: #f46036; --gs-faq-section-bg: #fff1eb; --gs-faq-container-bg: #ffffff; }