/* ============================================================ FRESH GRILL KITCHEN — light theme, keyed to the badge logo. Palette sampled straight from the logo: the signature red of the ring and wordmark, the cocoa browns of the badge band and circle, the green flame-leaf as a secondary accent, and the cream of the "KITCHEN" lettering as the surface family. Scoped under `.theme-warm`, which is applied to on every page of the site. Fonts unchanged (Cormorant Garamond + DM Sans). ============================================================ */ /* ------------------------------------------------------------ 1. PALETTE — remap the design tokens to a warm light system. Most of the site reads these variables, so this single block flips the bulk of the colours automatically. ------------------------------------------------------------ */ body.theme-warm { /* Surfaces — the cream of the logo's "KITCHEN" lettering */ --color-black: #FDFAF6; /* page background */ --color-charcoal: #F7EFE4; /* cards / nav / footer */ --color-charcoal-light: #F0E4D4; /* raised / alt surfaces */ /* Text — the cocoa browns of the badge band and circle */ --color-cream: #3B1D14; /* headings & primary text */ --color-cream-dark: #5A3B2E; /* secondary text */ --color-gray: #6B4A3B; /* body copy */ --color-gray-light: #8A6B5A; /* muted labels / captions */ /* Kept light — only ever used as text ON coloured buttons */ --color-white: #FFFBF4; /* Accent — the logo's signature red, at a depth that stays legible on cream (5.29:1 on the page background) */ --color-primary: #CE1C24; --color-primary-light: #E22F37; --color-ember: #CE1C24; --color-flame: #E22F37; --main-color: #CE1C24; --primary: #CE1C24; --primaryLight: #E22F37; --secondary: #CE1C24; --secondaryLight: #E22F37; --primary-color: #CE1C24; --primary-color-light: #E22F37; --primary-color-dark: #A2141B; /* Secondary accent — the green flame-leaf. Used sparingly for positive / "open now" / dietary cues so it never competes with the red. */ --color-accent-green: #009B48; --color-accent-green-dark: #00753A; /* Badge browns, available to components that want them */ --brand-brown: #6F3A28; --brand-brown-dark: #3B1D14; --brand-cream: #DCC9AE; /* Legacy text tokens */ --headerColor: #3B1D14; --bodyTextColor: #6B4A3B; --bodyTextColorWhite: #3B1D14; --text-dark: #3B1D14; --text-light: #6B4A3B; /* Accent tints */ --color-primary-5: rgba(206, 28, 36, 0.05); --color-primary-10: rgba(206, 28, 36, 0.10); --color-primary-15: rgba(206, 28, 36, 0.14); --color-primary-30: rgba(206, 28, 36, 0.28); /* Neutral low-alpha overlays (were light-on-dark → now warm-dark-on-light so borders/hover states stay visible) */ --color-cream-10: rgba(90, 59, 46, 0.10); --color-cream-30: rgba(90, 59, 46, 0.22); --color-black-50: rgba(59, 29, 20, 0.45); --color-black-80: rgba(59, 29, 20, 0.72); /* Softer, warmer shadows */ --shadow-sm: 0 3px 12px rgba(111, 58, 40, 0.10); --shadow-md: 0 8px 26px rgba(111, 58, 40, 0.14); --shadow-lg: 0 18px 48px rgba(111, 58, 40, 0.18); --shadow-glow-primary: 0 8px 26px rgba(206, 28, 36, 0.22); --shadow-glow-primary-light: 0 8px 26px rgba(206, 28, 36, 0.20); /* Rounder corners to match the reference's soft look */ --border-radius-sm: 10px; --border-radius-md: 16px; --border-radius-lg: 24px; --border-radius-full: 50px; background-color: var(--color-black); color: var(--color-gray); } /* Base text colour safety on the light background */ body.theme-warm h1, body.theme-warm h2, body.theme-warm h3, body.theme-warm h4, body.theme-warm h5, body.theme-warm h6 { color: var(--color-cream); } /* ------------------------------------------------------------ 1b. THE GREEN FLAME-LEAF — the logo's fourth colour, used only where it carries meaning (open/status and dietary cues) so it never competes with the red. ------------------------------------------------------------ */ body.theme-warm .location-card-badge { background: var(--color-accent-green); border-color: var(--color-accent-green); color: var(--color-white); } body.theme-warm .dish-tag-veg { background: var(--color-accent-green); color: var(--color-white); } /* ------------------------------------------------------------ 2. NAVIGATION — translucent cream bar instead of black glass ------------------------------------------------------------ */ body.theme-warm .nav { background: rgba(253, 250, 246, 0.82); border-bottom: 1px solid rgba(111, 58, 40, 0.12); box-shadow: 0 2px 18px rgba(111, 58, 40, 0.06); } body.theme-warm .nav.scrolled { background: rgba(253, 250, 246, 0.95); border-bottom: 1px solid rgba(111, 58, 40, 0.14); } /* The badge artwork ships on a white background, which reads as a white card floating on the cream bar. Multiplying the image against the surface behind it drops that white out — white x surface = surface — while the red, brown and green come through unchanged. `isolation: isolate` confines the blend to the logo's own box, so the badge can never pick up page content scrolling beneath the translucent nav. The wrapper carries the nav's exact background value (and tracks its scrolled state) so the patch stays flush with the bar. */ body.theme-warm .nav-logo { display: inline-flex; background: rgba(253, 250, 246, 0.82); border-radius: 10px; isolation: isolate; transition: background var(--transition-medium); } body.theme-warm .nav.scrolled .nav-logo { background: rgba(253, 250, 246, 0.95); } body.theme-warm .nav-logo img { mix-blend-mode: multiply; background: transparent; } /* The footer sits on an opaque surface, so the image can blend directly. */ body.theme-warm .footer-logo { mix-blend-mode: multiply; background: transparent; } body.theme-warm .nav-link { color: #4A2A1E; text-shadow: none; } body.theme-warm .nav-link:hover, body.theme-warm .nav-link.active { color: var(--color-primary); } /* Order Now pill */ body.theme-warm .nav-cta { border-radius: var(--border-radius-full); color: var(--color-white); box-shadow: var(--shadow-glow-primary); } body.theme-warm .nav-mobile-toggle span { background: #4A2A1E; } /* ------------------------------------------------------------ 3. BUTTONS — pill-shaped, warm ------------------------------------------------------------ */ body.theme-warm .btn, body.theme-warm .btn-primary, body.theme-warm .btn-secondary, body.theme-warm .location-btn, body.theme-warm .nav-cta, body.theme-warm .dishes-cta .btn-primary { border-radius: var(--border-radius-full); } body.theme-warm .btn-primary, body.theme-warm .btn { color: var(--color-white); box-shadow: var(--shadow-glow-primary); } body.theme-warm .btn-secondary { color: #4A2A1E; border: 1px solid rgba(111, 58, 40, 0.35); background: rgba(255, 255, 255, 0.4); } body.theme-warm .btn-secondary:hover { background: rgba(206, 28, 36, 0.10); border-color: var(--color-primary); color: var(--color-primary); } /* ------------------------------------------------------------ 4. HERO — keep LIGHT text over the food video, but warm the overlay to the reference's dusty-mauve tone for readability. ------------------------------------------------------------ */ body.theme-warm .hero-overlay { background: linear-gradient( 180deg, rgba(74, 48, 55, 0.30) 0%, rgba(60, 40, 46, 0.52) 45%, rgba(45, 30, 34, 0.72) 78%, rgba(253, 250, 246, 0.0) 100% ); } /* Text stays light for contrast on the imagery */ body.theme-warm .hero-title .line-1 { color: #F3E4DC; } body.theme-warm .hero-title .line-3 { color: #FBF3E8; } body.theme-warm .hero-subtitle { color: #F0E4D6; } body.theme-warm .hero-badge { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.34); color: var(--brand-cream); } body.theme-warm .food-hero-scroll span { color: #F0E4D6; } /* ------------------------------------------------------------ 5. SECTION SURFACES — alternate warm tones down the page, echoing the reference's multi-tone composition. ------------------------------------------------------------ */ body.theme-warm .locations { background: #FDFAF6; } body.theme-warm .story { background: #F5E9DC; } body.theme-warm .dishes { background: #FDFAF6; } body.theme-warm .faq { background: #F3E9E5; } body.theme-warm .find-us-section { background: #FDFAF6; } /* Neutralise the old dark decorative gradients/patterns */ body.theme-warm .story-pattern, body.theme-warm .hero-glow { opacity: 0.35; mix-blend-mode: multiply; } body.theme-warm .story::before, body.theme-warm .story::after { opacity: 0.4; } /* Section headers / labels */ body.theme-warm .section-label, body.theme-warm .story-label { color: var(--color-primary); } body.theme-warm .section-title, body.theme-warm .section-subtitle, body.theme-warm .story-title, body.theme-warm .story-text { color: var(--color-cream); } body.theme-warm .section-subtitle { color: var(--color-gray); } /* ------------------------------------------------------------ 6. CARDS — rounded, soft-shadowed, light surfaces. Dish cards pick up rotating pastel tints like the reference. ------------------------------------------------------------ */ body.theme-warm .location-card, body.theme-warm .dish-card, body.theme-warm .faq-category { background: #FFFDF9; border: 1px solid rgba(111, 58, 40, 0.10); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } body.theme-warm .location-card:hover, body.theme-warm .dish-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } /* Pastel rotation on the signature-dish cards (pink / tan / lilac) */ body.theme-warm .dish-card:nth-child(3n+1) { background: #FBEDEA; } body.theme-warm .dish-card:nth-child(3n+2) { background: #F7EEDD; } body.theme-warm .dish-card:nth-child(3n+3) { background: #F1ECF3; } body.theme-warm .location-name, body.theme-warm .dish-name, body.theme-warm .faq-category-title { color: var(--color-cream); } body.theme-warm .dish-description, body.theme-warm .location-info-item, body.theme-warm .location-info-item span, body.theme-warm .location-hours-row span { color: var(--color-gray); } body.theme-warm .location-tag { background: var(--color-primary); color: var(--color-white); } /* Location buttons: primary uses --color-cream for text (now dark) → force white on orange for contrast; give the secondary a visible border */ body.theme-warm .location-btn-primary { color: var(--color-white); border-color: var(--color-primary); } body.theme-warm .location-btn-primary:hover { color: var(--color-white); } body.theme-warm .location-btn-secondary { color: #4A2A1E; border: 1px solid rgba(111, 58, 40, 0.30); } body.theme-warm .location-btn-secondary:hover { background: rgba(206, 28, 36, 0.10); border-color: var(--color-primary); color: var(--color-primary); } /* FAQ items */ body.theme-warm .faq-question { color: var(--color-cream); } body.theme-warm .faq-answer, body.theme-warm .faq-answer p { color: var(--color-gray); } body.theme-warm .faq-item { border-color: rgba(111, 58, 40, 0.12); } /* Rounded imagery inside cards */ body.theme-warm .location-image img, body.theme-warm .dish-image img, body.theme-warm .story-image img { border-radius: 0; } body.theme-warm .story-image { border-radius: var(--border-radius-lg); overflow: hidden; } /* ------------------------------------------------------------ 7. FOOTER — warm beige ------------------------------------------------------------ */ body.theme-warm .footer { background: #EFE1CE; border-top: 1px solid rgba(111, 58, 40,0.12); } body.theme-warm .footer-description, body.theme-warm .footer-link, body.theme-warm .footer-location-info, body.theme-warm .footer-location-info a, body.theme-warm .footer-legal a { color: var(--color-gray); } body.theme-warm .footer-column-title, body.theme-warm .footer-location-name { color: var(--color-cream); } body.theme-warm .footer-social-link { background: rgba(206, 28, 36, 0.12); color: var(--color-primary); } body.theme-warm .footer-social-link:hover { background: var(--color-primary); color: var(--color-white); } /* ============================================================ 8. ORGANIC SECTION SEPARATORS (the "not a straight line") Each section draws a shaped top edge in its OWN background colour, rising over the section above — reading as torn paper / a soft wave / a gentle curve. Alternated so no two adjacent separators are the same. Pure CSS, no image files. ============================================================ */ body.theme-warm .locations, body.theme-warm .story, body.theme-warm .dishes, body.theme-warm .faq, body.theme-warm .find-us-section, body.theme-warm .footer { position: relative; } body.theme-warm .locations::before, body.theme-warm .story::before, body.theme-warm .dishes::before, body.theme-warm .faq::before, body.theme-warm .find-us-section::before, body.theme-warm .footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px; transform: translateY(-99%); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 4; } /* LOCATIONS — torn paper (cream), rising over the dark hero */ body.theme-warm .locations::before { height: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 V22 L40,28 L80,14 L130,30 L180,12 L240,26 L300,10 L360,28 L430,16 L500,32 L560,14 L620,28 L690,12 L760,30 L820,16 L890,32 L950,14 L1010,28 L1080,12 L1140,26 L1200,16 V60 Z' fill='%23FBF7F0'/%3E%3C/svg%3E"); } /* STORY — soft wave (blush) */ body.theme-warm .story::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 V22 C150,2 350,2 600,22 C850,42 1050,42 1200,22 V46 Z' fill='%23F5E9DC'/%3E%3C/svg%3E"); } /* DISHES — gentle curve (cream) */ body.theme-warm .dishes::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 V18 C400,44 800,44 1200,18 V46 Z' fill='%23FBF7F0'/%3E%3C/svg%3E"); } /* FAQ — torn paper (pink) */ body.theme-warm .faq::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 V20 L50,26 L100,12 L160,28 L220,10 L290,24 L350,10 L420,26 L490,14 L560,30 L630,12 L700,26 L770,10 L840,28 L910,14 L980,30 L1050,12 L1120,26 L1200,14 V46 Z' fill='%23F3E9E5'/%3E%3C/svg%3E"); } /* FIND-US — soft wave (cream) */ body.theme-warm .find-us-section::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 V24 C150,4 350,4 600,24 C850,44 1050,44 1200,24 V46 Z' fill='%23FBF7F0'/%3E%3C/svg%3E"); } /* FOOTER — gentle curve (beige) */ body.theme-warm .footer::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 V18 C400,44 800,44 1200,18 V46 Z' fill='%23EFE1CE'/%3E%3C/svg%3E"); } /* Give the sections a little extra top padding so the shaped edge never overlaps their headings */ body.theme-warm .locations, body.theme-warm .story, body.theme-warm .dishes, body.theme-warm .faq, body.theme-warm .find-us-section { padding-top: 2rem; } /* ------------------------------------------------------------ 9. Small readability guards ------------------------------------------------------------ */ body.theme-warm .scroll-line { background: linear-gradient(to bottom, var(--color-primary), transparent); } body.theme-warm a { color: inherit; } body.theme-warm .location-info-item i, body.theme-warm .dish-rating i { color: var(--color-primary); } /* ============================================================ 10. SITE-WIDE GENERALISATION (every .theme-warm page) Every interior page uses the same hero anatomy as the home hero: {prefix}-hero-title (.line-1/.line-2/.line-3), -subtitle, -overlay, -badge. Attribute selectors let one block protect them all — light text over imagery, warm mauve overlay. ============================================================ */ body.theme-warm [class$="-hero-overlay"] { background: linear-gradient( 180deg, rgba(74, 48, 55, 0.30) 0%, rgba(60, 40, 46, 0.52) 45%, rgba(45, 30, 34, 0.72) 82%, rgba(253, 250, 246, 0.0) 100% ); } /* Force every hero title line light over the imagery. Interior heroes use --color-cream (now dark) for the big title line, so they must all be lightened. Light titles also match the reference hero, which is cream — not orange. */ body.theme-warm [class$="-hero-title"], body.theme-warm [class$="-hero-title"] .line-1, body.theme-warm [class$="-hero-title"] .line-2, body.theme-warm [class$="-hero-title"] .line-3, body.theme-warm [class$="-hero-subtitle"], body.theme-warm [class$="-hero-tagline"] { color: #FBF3E8; } body.theme-warm [class$="-hero-title"] .line-1 { color: #F3E4DC; } /* Keep an orange accent only where an marks it */ body.theme-warm [class$="-hero-title"] em { color: var(--color-primary); } /* Soft shadow so light hero text stays legible over any image */ body.theme-warm [class$="-hero-title"], body.theme-warm [class$="-hero-subtitle"], body.theme-warm [class$="-hero-tagline"] { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); } body.theme-warm [class$="-hero-badge"] { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.34); color: var(--brand-cream); } body.theme-warm [class$="-hero-info-item"], body.theme-warm [class$="-hero-info-item"] span, body.theme-warm [class$="-hero-info-item"] a, body.theme-warm [class$="-hero-scroll"] span { color: #F0E4D6; } /* Hero secondary buttons over imagery stay light-bordered */ body.theme-warm [class$="-hero-btn"].secondary, body.theme-warm [class$="-hero-ctas"] .btn-secondary { color: #FBF3E8; border-color: rgba(255, 255, 255, 0.4); } /* ============================================================ 11. INTERIOR PAGES ONLY (.theme-warm-auto) Generic alternating warm section tints + organic (non-straight) dividers, so pages whose sections we don't style individually still get the reference's multi-tone, torn/wave separation. Scoped away from the homepage so its bespoke layout is safe. `background-color` (not `background`) is used so any real background image on a section is preserved. ============================================================ */ body.theme-warm-auto section:not([class*="hero"]) { position: relative; } body.theme-warm-auto section:not([class*="hero"]):nth-of-type(odd) { background-color: #FDFAF6; } body.theme-warm-auto section:not([class*="hero"]):nth-of-type(even) { background-color: #F5E9DC; } body.theme-warm-auto section:not([class*="hero"])::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; transform: translateY(-99%); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 4; } /* odd sections (cream) — soft wave */ body.theme-warm-auto section:not([class*="hero"]):nth-of-type(odd)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,44 V22 C150,3 350,3 600,22 C850,41 1050,41 1200,22 V44 Z' fill='%23FBF7F0'/%3E%3C/svg%3E"); } /* even sections (blush) — torn paper */ body.theme-warm-auto section:not([class*="hero"]):nth-of-type(even)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0,44 V20 L50,26 L100,12 L160,27 L220,11 L290,24 L350,11 L420,26 L490,14 L560,29 L630,12 L700,25 L770,11 L840,27 L910,14 L980,29 L1050,12 L1120,25 L1200,14 V44 Z' fill='%23F5E9DC'/%3E%3C/svg%3E"); } /* Extra top padding so shaped edges never overlap headings */ body.theme-warm-auto section:not([class*="hero"]) { padding-top: 2rem; } /* Interior generic cards / panels that reused dark surfaces */ body.theme-warm-auto .section-title, body.theme-warm-auto .section-subtitle { color: var(--color-cream); } body.theme-warm-auto .section-subtitle { color: var(--color-gray); } /* ============================================================ 12. MENU PAGES — the category bar + item cards were built for a dark background (white text, #2d2d2d sticky bar). Make the category navigation readable on the warm light theme. ============================================================ */ body.theme-warm .menu-button { color: #4A2A1E; } body.theme-warm .menu-button:hover { color: var(--color-primary); opacity: 1; } body.theme-warm .active-button, body.theme-warm .menu-button.active-button { color: var(--color-primary); } /* Light sticky category bar with dark text (was #2d2d2d + white) */ body.theme-warm .menu-buttons.fixed-nav { background-color: rgba(253, 250, 246, 0.97); box-shadow: 0 2px 14px rgba(111, 58, 40, 0.10); } body.theme-warm .menu-buttons.fixed-nav .menu-button { color: #4A2A1E; } body.theme-warm .menu-buttons.fixed-nav .menu-button.active-button, body.theme-warm .menu-buttons.fixed-nav .menu-button:hover { color: var(--color-primary); } /* Mobile dropdown category list + search */ body.theme-warm .dropdown-content a { color: var(--color-cream); } body.theme-warm .dropdown-content a:hover { background-color: var(--color-charcoal-light); } body.theme-warm .mobile-menu-controls { box-shadow: 0 2px 10px rgba(111, 58, 40, 0.12); } /* Menu item cards: rounder + soft shadow to match the theme */ body.theme-warm .menu-item { border-radius: var(--border-radius-md); border: 1px solid rgba(111, 58, 40, 0.10); box-shadow: var(--shadow-sm); } body.theme-warm .item-name { color: var(--color-cream); } body.theme-warm .item-desc { color: var(--color-gray); } /* ============================================================ 13. DISH IMAGE PLACEHOLDERS → organic BLOB shapes (site-wide) No plain rectangles/circles. Covers all three markups: • .dish-image (homepage Signature Dishes) • .dish-card-image (Our Food) • .special__card img (location landing + tags/places pages) Cards get a little padding so the blob "floats" on the pastel surface; each card rotates through four blob outlines for an organic, hand-made feel; a gentle morph on hover. ============================================================ */ body.theme-warm .dish-image, body.theme-warm .dish-card-image, body.theme-warm .special__card img { border-radius: 42% 58% 40% 60% / 55% 42% 58% 45%; transition: border-radius 0.55s ease, transform var(--transition-medium); } /* Float the blob inside its card */ body.theme-warm .dish-card { padding: 14px 14px 0; } body.theme-warm .special__card img { display: block; margin: 14px auto 0; width: calc(100% - 28px); } /* Per-card blob variety */ body.theme-warm .dish-card:nth-child(4n+2) .dish-image, body.theme-warm .dish-card:nth-child(4n+2) .dish-card-image, body.theme-warm .special__card:nth-child(4n+2) img { border-radius: 58% 42% 55% 45% / 40% 58% 42% 60%; } body.theme-warm .dish-card:nth-child(4n+3) .dish-image, body.theme-warm .dish-card:nth-child(4n+3) .dish-card-image, body.theme-warm .special__card:nth-child(4n+3) img { border-radius: 55% 45% 62% 38% / 38% 60% 40% 62%; } body.theme-warm .dish-card:nth-child(4n+4) .dish-image, body.theme-warm .dish-card:nth-child(4n+4) .dish-card-image, body.theme-warm .special__card:nth-child(4n+4) img { border-radius: 63% 37% 45% 55% / 55% 48% 52% 45%; } /* Gentle morph on hover */ body.theme-warm .dish-card:hover .dish-image, body.theme-warm .dish-card:hover .dish-card-image, body.theme-warm .special__card:hover img { border-radius: 50% 50% 48% 52% / 52% 48% 50% 50%; } /* ============================================================ 14. CARD BALANCE The CSS grid was stretching every card to the tallest one in its row, leaving ~100px of dead space inside shorter cards. Let each card size to its own content instead (align-items: start) so there's no empty gap, and tighten the star rating so it groups with the title. ============================================================ */ body.theme-warm .dishes-grid, body.theme-warm .special__grid { align-items: start; } body.theme-warm .dish-card { padding: 14px 14px 16px; } /* Kill the stray 96px bottom margin on the rating (from a later global .dish-rating rule) that created the mid-card void, and group the stars tightly under the image. */ body.theme-warm .dishes-grid .dish-rating { margin-bottom: 0; padding: 10px 0 2px; } body.theme-warm .dishes .dish-content { padding-top: 4px; } /* ============================================================ 15. ANIMATION LAYER GPU-friendly (transform/opacity) motion for the whole site. All disabled under prefers-reduced-motion (media query at the end). JS behaviours live in theme-animations.js. ============================================================ */ /* ---- 15.1 Scroll reveal (universal) + stagger ------------- */ body.theme-warm .reveal { transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } /* ---- 15.2 Section-title underline draws in on reveal ------ */ body.theme-warm .section-header .section-title, body.theme-warm .story-content .story-title { position: relative; } body.theme-warm .section-header .section-title::after { content: ""; display: block; height: 3px; width: 0; margin: 0.6rem auto 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--color-primary), transparent); transition: width 0.9s ease 0.25s; } body.theme-warm .story-content .story-title::after { content: ""; display: block; height: 3px; width: 0; margin: 0.6rem 0 0; border-radius: 3px; background: linear-gradient(90deg, var(--color-primary), transparent); transition: width 0.9s ease 0.25s; } body.theme-warm .reveal.visible .section-title::after, body.theme-warm .section-header.visible .section-title::after { width: 78%; } body.theme-warm .reveal.visible .story-title::after, body.theme-warm .visible .story-title::after { width: 130px; } /* ---- 15.3 Kulhad steam on dish-card hover ----------------- */ body.theme-warm .dish-card, body.theme-warm .special__card { overflow: visible; } body.theme-warm .chai-steam { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 60px; height: 56px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; z-index: 6; } body.theme-warm .dish-card:hover .chai-steam, body.theme-warm .special__card:hover .chai-steam { opacity: 1; } body.theme-warm .chai-steam span { position: absolute; bottom: 0; width: 8px; height: 32px; background: linear-gradient(to top, rgba(255,255,255,0.8), rgba(255,255,255,0)); border-radius: 50%; filter: blur(3px); } body.theme-warm .chai-steam span:nth-child(1) { left: 16px; animation: steamRise 2.6s ease-in-out infinite; } body.theme-warm .chai-steam span:nth-child(2) { left: 27px; animation: steamRise 2.6s ease-in-out 0.5s infinite; } body.theme-warm .chai-steam span:nth-child(3) { left: 38px; animation: steamRise 2.6s ease-in-out 1s infinite; } @keyframes steamRise { 0% { transform: translateY(8px) scaleX(1); opacity: 0; } 25% { opacity: 0.9; } 60% { transform: translateY(-16px) scaleX(1.5); opacity: 0.5; } 100% { transform: translateY(-32px) scaleX(2); opacity: 0; } } /* ---- 15.4 Living blob morph (dish images) ----------------- */ body.theme-warm .dish-image, body.theme-warm .dish-card-image, body.theme-warm .special__card img { animation: blobMorph 14s ease-in-out infinite; } body.theme-warm .dish-card:nth-child(4n+2) .dish-image, body.theme-warm .dish-card:nth-child(4n+2) .dish-card-image, body.theme-warm .special__card:nth-child(4n+2) img { animation-delay: -3.5s; } body.theme-warm .dish-card:nth-child(4n+3) .dish-image, body.theme-warm .dish-card:nth-child(4n+3) .dish-card-image, body.theme-warm .special__card:nth-child(4n+3) img { animation-delay: -7s; } body.theme-warm .dish-card:nth-child(4n+4) .dish-image, body.theme-warm .dish-card:nth-child(4n+4) .dish-card-image, body.theme-warm .special__card:nth-child(4n+4) img { animation-delay: -10.5s; } @keyframes blobMorph { 0%,100% { border-radius: 42% 58% 40% 60% / 55% 42% 58% 45%; } 33% { border-radius: 58% 42% 55% 45% / 40% 58% 42% 60%; } 66% { border-radius: 55% 45% 62% 38% / 38% 60% 40% 62%; } } body.theme-warm .dish-card:hover .dish-image, body.theme-warm .dish-card:hover .dish-card-image, body.theme-warm .special__card:hover img { animation-play-state: paused; } /* ---- 15.5 Button glow-sweep + click pulse ----------------- */ body.theme-warm .btn-primary, body.theme-warm .btn, body.theme-warm .nav-cta, body.theme-warm .location-btn-primary, body.theme-warm [class$="-hero-btn"].primary { position: relative; overflow: hidden; } body.theme-warm .btn-primary::after, body.theme-warm .btn::after, body.theme-warm .nav-cta::after, body.theme-warm .location-btn-primary::after, body.theme-warm [class$="-hero-btn"].primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: skewX(-18deg); transition: left 0.6s ease; pointer-events: none; } body.theme-warm .btn-primary:hover::after, body.theme-warm .btn:hover::after, body.theme-warm .nav-cta:hover::after, body.theme-warm .location-btn-primary:hover::after, body.theme-warm [class$="-hero-btn"].primary:hover::after { left: 140%; } body.theme-warm .btn-primary:active, body.theme-warm .btn:active, body.theme-warm .nav-cta:active, body.theme-warm .location-btn-primary:active { transform: translateY(-1px) scale(0.97); } /* ---- 15.6 Nav link hover lift ----------------------------- */ body.theme-warm .nav-link { transition: color 0.25s ease, transform 0.25s ease; } body.theme-warm .nav-link:hover { transform: translateY(-2px); } body.theme-warm .nav-cta { transition: transform 0.25s ease, box-shadow 0.25s ease; } body.theme-warm .nav-cta:hover { transform: translateY(-2px) scale(1.03); } /* ---- 15.7 Card lift + tilt base --------------------------- */ body.theme-warm .dish-card, body.theme-warm .special__card, body.theme-warm .location-card { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease; transform-style: preserve-3d; } /* ---- 15.8 Warm breathing hero glow ------------------------ */ body.theme-warm [class$="-hero-glow"], body.theme-warm .hero-glow { animation: warmBreathe 7s ease-in-out infinite; } @keyframes warmBreathe { 0%,100% { opacity: 0.35; transform: translateX(-50%) scale(1); } 50% { opacity: 0.6; transform: translateX(-50%) scale(1.08); } } /* ---- 15.9 Blur-up images ---------------------------------- */ body.theme-warm img.blur-load { filter: blur(14px); transform: scale(1.02); } body.theme-warm img { transition: filter 0.6s ease, transform 0.6s ease; } /* ---- 15.10 Chai-fill page loader -------------------------- */ body.theme-warm::before { content: ""; position: fixed; inset: 0; background: #FDFAF6; z-index: 99999; pointer-events: none; animation: loaderVeil 0.9s ease 0.35s forwards; } body.theme-warm::after { content: ""; position: fixed; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid rgba(206, 28, 36,0.25); border-top-color: var(--color-primary); z-index: 100000; pointer-events: none; animation: loaderSpin 0.8s linear infinite, loaderVeil 0.9s ease 0.35s forwards; } body.theme-warm.loaded::before, body.theme-warm.loaded::after { opacity: 0 !important; visibility: hidden !important; animation: none !important; } @keyframes loaderSpin { to { transform: rotate(360deg); } } @keyframes loaderVeil { to { opacity: 0; visibility: hidden; } } /* ---- 15.11 Reduced-motion: disable it all ----------------- */ @media (prefers-reduced-motion: reduce) { body.theme-warm *, body.theme-warm *::before, body.theme-warm *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } body.theme-warm .reveal { opacity: 1 !important; transform: none !important; } body.theme-warm::before, body.theme-warm::after { display: none !important; } body.theme-warm .chai-steam { display: none !important; } body.theme-warm .chai-particles, body.theme-warm .chai-progress { display: none !important; } body.theme-warm .nav-cta { animation: none !important; } } /* ============================================================ 16. PREDOMINANT / PUBLIC-FACING MOTION Bolder, always-visible animation: floating steam & tea-leaf particles, a scroll-progress "chai fill" bar, a pulsing CTA, and stronger directional reveals. Still reduced-motion safe. ============================================================ */ /* ---- 16.1 Floating particles (steam + tea leaves) --------- */ body.theme-warm .chai-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; } /* section particles sit behind the cards/text (above the bg only) */ body.theme-warm .chai-particles--behind { z-index: 0; } body.theme-warm .story > *:not(.chai-particles), body.theme-warm .dishes > *:not(.chai-particles), body.theme-warm .faq > *:not(.chai-particles), body.theme-warm .find-us-section > *:not(.chai-particles), body.theme-warm .signature-dishes > *:not(.chai-particles), body.theme-warm .popular-dishes-section > *:not(.chai-particles), body.theme-warm .location-dishes-section > *:not(.chai-particles), body.theme-warm .about-story > *:not(.chai-particles), body.theme-warm .about-philosophy > *:not(.chai-particles), body.theme-warm .location-about-section > *:not(.chai-particles) { position: relative; z-index: 1; } /* keep hero content/text above the particles */ body.theme-warm .hero-content, body.theme-warm [class$="-hero-content"] { z-index: 10; } body.theme-warm .chai-particle { position: absolute; bottom: -60px; opacity: 0; will-change: transform, opacity; animation: floatUp linear infinite; } /* steam puff */ body.theme-warm .chai-particle.steam { border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0)); filter: blur(4px); } /* tea leaf (teardrop) */ body.theme-warm .chai-particle.leaf { background: linear-gradient(135deg, rgba(206, 28, 36,0.55), rgba(111, 58, 40,0.35)); border-radius: 0 60% 0 60%; } @keyframes floatUp { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 12% { opacity: 0.85; } 50% { transform: translate3d(24px, -52vh, 0) rotate(180deg); } 85% { opacity: 0.5; } 100% { transform: translate3d(-16px, -108vh, 0) rotate(340deg); opacity: 0; } } /* ---- 16.2 Scroll-progress "chai fill" bar ----------------- */ body.theme-warm .chai-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: linear-gradient(90deg, #E22F37, var(--color-primary), #A2141B); box-shadow: 0 0 10px rgba(206, 28, 36,0.6); z-index: 99998; pointer-events: none; } /* ---- 16.3 Pulsing Order Now CTA (draws the eye) ----------- */ body.theme-warm .nav-cta { animation: ctaPulse 2.6s ease-in-out infinite; } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 8px 22px rgba(206, 28, 36,0.25); } 50% { box-shadow: 0 10px 34px rgba(206, 28, 36,0.55); } } body.theme-warm .nav-cta:hover { animation-play-state: paused; } /* ---- 16.4 Bolder directional scroll reveals --------------- */ body.theme-warm .reveal { transform: translateY(55px); } body.theme-warm .reveal.from-left { transform: translateX(-70px); } body.theme-warm .reveal.from-right { transform: translateX(70px); } body.theme-warm .reveal.zoom-in { transform: scale(0.82); } body.theme-warm .reveal.visible { transform: none !important; } /* ---- 16.5 Stronger card hover lift ------------------------ */ body.theme-warm .dish-card:hover, body.theme-warm .special__card:hover, body.theme-warm .location-card:hover { box-shadow: 0 26px 60px rgba(111, 58, 40,0.28); } /* ---- 16.6 Bouncing scroll cue (inner line only, so we don't disturb the centered wrapper's transform) ----------------- */ body.theme-warm .scroll-line { animation: scrollBob 1.8s ease-in-out infinite; } @keyframes scrollBob { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: 0.5; } } /* ============================================================ 17. UNDULATING WAVE SEPARATORS The section separators now flow: the shaped edge tiles horizontally (background-size fixed at one 1200px period) and drifts continuously, so the divider looks like moving water. Different speeds/directions keep them from marching in sync. ============================================================ */ body.theme-warm .locations::before, body.theme-warm .story::before, body.theme-warm .dishes::before, body.theme-warm .faq::before, body.theme-warm .find-us-section::before, body.theme-warm .footer::before, body.theme-warm-auto section:not([class*="hero"])::before { background-size: 1200px 100%; background-repeat: repeat-x; animation: sepFlow 14s linear infinite; } @keyframes sepFlow { from { background-position-x: 0; } to { background-position-x: 1200px; } } /* vary rhythm */ body.theme-warm .story::before, body.theme-warm .find-us-section::before, body.theme-warm-auto section:not([class*="hero"]):nth-of-type(even)::before { animation-duration: 19s; animation-direction: reverse; } body.theme-warm .faq::before { animation-duration: 22s; } body.theme-warm .footer::before { animation-duration: 17s; animation-direction: reverse; } /* ============================================================ 18. GENERIC PARTICLE LAYERING Any section that receives a leaf layer marks itself so its real content floats above the particles (background/decor layers are excluded so they stay put). ============================================================ */ body.theme-warm .chai-has-particles > *:not(.chai-particles):not([class$="-bg"]):not([class*="pattern"]):not([class*="overlay"]):not([class*="glow"]) { position: relative; z-index: 1; } /* ============================================================ 19. READABILITY / CONTRAST FIXES (warm-theme scope gaps) theme-warm remaps tokens to dark-on-light, but several components used hard-coded dark overlay surfaces or near-white text that were never remapped — producing dark-on-dark or light-on-light text (e.g. the "Find Us" / contact location cards). These additive overrides restore WCAG-AA contrast while keeping the warm palette. No HTML / global.css / style.css changes required. ============================================================ */ /* ---- 19.1 Homepage "Find Us" location cards --------------- */ /* .find-us-card kept a hard-coded rgba(20,20,20,0.6) surface that composited to muddy grey on the light section; the flipped dark text then sat at ~1.3-2.7:1. Give it the light card surface used elsewhere so the dark text/icons read correctly. */ body.theme-warm .find-us-card { background: #FFFDF9; border: 1px solid rgba(111, 58, 40, 0.10); } body.theme-warm .find-us-name { color: var(--color-cream); } body.theme-warm .find-us-info-item, body.theme-warm .find-us-info-item span, body.theme-warm .find-us-info-item a { color: var(--color-gray); } body.theme-warm .find-us-info-item i { color: var(--color-primary); } body.theme-warm .find-us-info-item a:hover { color: var(--primary-color-dark); } /* ---- 19.2 Location "Visit Us" detail cards ---------------- */ /* location pages + tag pages: .detail-* used near-white text on the now-light section (~1.05:1, invisible). */ body.theme-warm .location-info-section .detail-card { background: #FFFDF9; border: 1px solid rgba(111, 58, 40, 0.12); } body.theme-warm .location-info-section .detail-content h4 { color: var(--primary-color-dark); } body.theme-warm .location-info-section .detail-content p, body.theme-warm .location-info-section .detail-content span { color: var(--color-gray); } body.theme-warm .location-info-section .detail-content a { color: var(--primary-color-dark); } body.theme-warm .location-info-section .detail-content a:hover { color: var(--color-primary); } /* ---- 19.3 Location "About" body copy ---------------------- */ /* .location-about-text was near-white on light (invisible) on both location pages and the takeout tag page's list. */ body.theme-warm .location-about-text { color: var(--color-gray); } /* ---- 19.4 Contact-us location cards ----------------------- */ /* .contact-location-card kept a dark rgba(20,20,20,0.6) surface and .contact-detail-item a used an undefined var (--color-cream-muted) → washed out. Light surface + explicit dark text. */ body.theme-warm .contact-location-card { background: #FFFDF9; border: 1px solid rgba(111, 58, 40, 0.12); } body.theme-warm .contact-card-title { color: var(--color-cream); } body.theme-warm .contact-detail-item, body.theme-warm .contact-detail-item span, body.theme-warm .contact-hours span { color: var(--color-gray); } body.theme-warm .contact-detail-item a { color: var(--color-cream-dark); } body.theme-warm .contact-detail-item a:hover { color: var(--color-primary); } body.theme-warm .contact-detail-item i { color: var(--color-primary); } /* ---- 19.5 our-food "Sizzling Experience" review banner ---- */ /* This is a dark photo banner (dark overlay is intended), but the text tokens were flipped dark → invisible. Keep text LIGHT here. */ body.theme-warm .experience-quote p, body.theme-warm .author-name { color: #FBF3E8; } body.theme-warm .author-source { color: #F0E4D6; } /* ---- 19.6 Cuisine tags (locations.html) ------------------- */ /* Light-tinted pills kept light text (esp. the green "Vegetarian" ~1.3:1). Deepen text + tint for AA. */ body.theme-warm .cuisine-tag { color: #7A3F0E; background: rgba(206, 28, 36, 0.14); border-color: rgba(206, 28, 36, 0.32); } body.theme-warm .cuisine-tag.pizza { color: #2E6B32; background: rgba(76, 175, 80, 0.16); border-color: rgba(76, 175, 80, 0.35); } /* ---- 19.7 Small uppercase accent labels ------------------- */ /* #CE1C24 on cream is ~3.5-4.4:1 — fine for large headings/icons (3:1) but under AA for small text. Deepen to --primary-color-dark (#A2141B ~4.9:1) for these small labels only. */ body.theme-warm .section-label, body.theme-warm .story-label, body.theme-warm .footer-location-name, body.theme-warm .location-hours-title, body.theme-warm .footer-credit a { color: var(--primary-color-dark); } /* ---- 19.8 Menu item prices (menu pages) ------------------- */ /* --color-primary @0.9 opacity ~3:1; deepen + bold for AA. */ body.theme-warm .item-price { color: var(--primary-color-dark); opacity: 1; font-weight: 600; } /* ---- 19.9 our-food cuisine intro paragraph ---------------- */ /* --color-gray-light (#8A6B5A) ~3.96:1 on light → use --color-gray. */ body.theme-warm .cuisine-description > p { color: var(--color-gray); } /* ---- 19.10 White hairline divider now invisible on light -- */ body.theme-warm .location-details { border-bottom-color: rgba(111, 58, 40, 0.15); } /* ---- 19.11 Location / place-page hero: intro paragraph + primary button These heroes sit over a dark photo, but two pieces were never lightened: (a) the intro paragraph class ends in "-hero-text", which the §10 light-text group omitted, so it inherited the flipped dark body colour → faded on the image; (b) .location-page-hero-btn.primary used an undefined var(--color-obsidian) that fell back to dark body text on the orange button, and §10's [class$="-hero-btn"] selector could not match a multi-class button. Force hero paragraph light + primary hero button white (matches every other primary button). */ body.theme-warm [class$="-hero-text"] { color: #F0E4D6; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); } body.theme-warm [class*="-hero-btn"].primary, body.theme-warm [class*="-hero-btn"].primary span, body.theme-warm [class*="-hero-btn"].primary i { color: var(--color-white); } body.theme-warm [class*="-hero-btn"].primary:hover { background: var(--primary-color-dark); color: var(--color-white); } /* Robustly re-assert the light hero secondary button too (same multi-class matching problem as the primary). */ body.theme-warm [class*="-hero-btn"].secondary, body.theme-warm [class*="-hero-btn"].secondary span, body.theme-warm [class*="-hero-btn"].secondary i { color: #FBF3E8; border-color: rgba(255, 255, 255, 0.4); } /* ---- 19.12 locations.html "Questions? We're Here" CTA ------ Dark photo banner (image + dark overlay preserved by theme-warm-auto), but the generic .section-title / .section- subtitle / .locations-social were flipped dark → invisible on the dark background, and .btn-secondary rendered a muddy translucent pill with dark text. Force light text + a light-on-dark secondary button within this section. */ body.theme-warm .locations-cta-section .section-title { color: #FBF3E8; } body.theme-warm .locations-cta-section .section-title em { color: var(--color-primary-light); } body.theme-warm .locations-cta-section .section-subtitle, body.theme-warm .locations-cta-section .locations-social span { color: #F0E4D6; } body.theme-warm .locations-cta-section .section-label { color: var(--color-primary-light); } body.theme-warm .locations-cta-section .btn-secondary { color: #FBF3E8; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.10); } body.theme-warm .locations-cta-section .btn-secondary:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.92); color: #3B1D14; } /* ---- 19.12 Dish detail pages (tags/dishes/*) -------------- The dish-page hero is the ONLY hero on a light background (no dark photo/overlay), so §10's global light-hero text rules rendered its title, tagline, badge and secondary button light-on-light (invisible). The location card also kept a dark translucent panel with dark cream text → muddy, low contrast. Re-assert dark-on-light colours + a light location card for AA readability. */ /* Hero title line + tagline → dark, drop the dark glow */ body.theme-warm .dish-page-hero-title, body.theme-warm .dish-page-hero-tagline { color: var(--color-cream); text-shadow: none; } body.theme-warm .dish-page-hero-tagline { color: var(--color-cream-dark); } /* Badge → orange pill (was faded tan on light) */ body.theme-warm .dish-page-hero-badge { background: rgba(206, 28, 36, 0.12); border-color: rgba(206, 28, 36, 0.30); color: var(--primary-color-dark); } /* "View Menu" secondary CTA → readable orange outline */ body.theme-warm .dish-page-hero-ctas .btn-secondary { color: var(--primary-color-dark); border-color: rgba(206, 28, 36, 0.45); } body.theme-warm .dish-page-hero-ctas .btn-secondary:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } /* Location card → light warm surface so address / phone / hours read as dark-on-light instead of dark-on-muddy-grey */ body.theme-warm .dish-location-card { background: var(--color-charcoal); border-color: rgba(206, 28, 36, 0.20); } body.theme-warm .dish-location-name { color: var(--color-cream); } body.theme-warm .dish-location-info-item, body.theme-warm .dish-location-info-item span, body.theme-warm .dish-location-info-item a { color: var(--color-cream-dark); } /* ------------------------------------------------------------ 20. MOBILE NAV DROPDOWN — opaque warm panel The base mobile dropdown uses a dark surface (rgba(10,10,10,.98)), but the warm theme flips the nav-link text dark AND the navbar is a light translucent bar, so the dropdown rendered dark-on-dark / see- through (page content bled through). Force a solid cream panel with a border + drop shadow so the links read clearly on any device. Scoped to both theme variants (homepage + interior pages). ------------------------------------------------------------ */ @media (max-width: 768px) { body.theme-warm .nav-links, body.theme-warm-auto .nav-links { background: var(--color-white); border-bottom: 1px solid rgba(111, 58, 40, 0.14); box-shadow: 0 14px 30px rgba(59, 29, 20, 0.20); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Ensure link text stays dark/legible on the light panel */ body.theme-warm .nav-links .nav-link, body.theme-warm-auto .nav-links .nav-link { color: #4A2A1E; } body.theme-warm .nav-links .nav-link:hover, body.theme-warm .nav-links .nav-link.active, body.theme-warm-auto .nav-links .nav-link:hover, body.theme-warm-auto .nav-links .nav-link.active { color: var(--color-primary); } } /* ------------------------------------------------------------ 21. ORDER-NOW MODAL — dark surface, keep text light The "Choose Your Location" modal is a deliberately dark panel (.order-modal background #1a1a1a). Its title, location names and the "View Menu" button use var(--color-cream), which the warm theme remaps to dark #3B1D14 — rendering dark-on-dark (invisible). Force light text back so the modal is legible on every page/theme variant. ------------------------------------------------------------ */ body.theme-warm .order-modal-header h2, body.theme-warm-auto .order-modal-header h2, body.theme-warm .order-location-name, body.theme-warm-auto .order-location-name { color: #FBF3E8; } body.theme-warm .order-location-actions .location-btn-primary, body.theme-warm-auto .order-location-actions .location-btn-primary { color: var(--color-white); } body.theme-warm .order-location-actions .location-btn-secondary, body.theme-warm-auto .order-location-actions .location-btn-secondary { color: #F0E4D6; border-color: rgba(245, 240, 230, 0.35); background: transparent; } body.theme-warm .order-location-actions .location-btn-secondary:hover, body.theme-warm-auto .order-location-actions .location-btn-secondary:hover { background: rgba(245, 240, 230, 0.10); border-color: #F0E4D6; color: #FBF3E8; }