/* ============================================================ THE CHAI HUT — "Warm Café" light theme (PILOT: homepage only) Inspired by the reference layout: cream/beige surfaces, dusty mauve hero, pastel cards, pill buttons, soft shadows, and organic (non-straight-line) section separators. Scoped entirely under `.theme-warm` (added to on index.html) so the other 31 pages stay on the dark theme until this pilot is approved. Fonts unchanged (Cormorant Garamond + DM Sans). No images or text content are touched — layout/colour only. ============================================================ */ /* ------------------------------------------------------------ 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 (were dark → now warm light) */ --color-black: #FBF7F0; /* page background */ --color-charcoal: #F5ECDD; /* cards / nav / footer */ --color-charcoal-light: #EFE3D0; /* raised / alt surfaces */ /* Text (were light-on-dark → now warm dark-on-light) */ --color-cream: #3A2A1E; /* headings & primary text */ --color-cream-dark: #5A4636; /* secondary text */ --color-gray: #6E5B4B; /* body copy */ --color-gray-light: #8C7862; /* muted labels / captions */ /* Kept light — only ever used as text ON coloured buttons */ --color-white: #FFFBF4; /* Accent — keep the orange identity, deepen slightly so it stays legible on cream */ --color-primary: #C9611A; --color-primary-light: #E07D2A; --color-ember: #C9611A; --color-flame: #E07D2A; --main-color: #C9611A; --primary: #C9611A; --primaryLight: #E07D2A; --secondary: #C9611A; --secondaryLight: #E07D2A; --primary-color: #C9611A; --primary-color-light: #E07D2A; --primary-color-dark: #A94E12; /* Legacy text tokens */ --headerColor: #3A2A1E; --bodyTextColor: #6E5B4B; --bodyTextColorWhite: #3A2A1E; --text-dark: #3A2A1E; --text-light: #6E5B4B; /* Accent tints */ --color-primary-5: rgba(201, 97, 26, 0.05); --color-primary-10: rgba(201, 97, 26, 0.10); --color-primary-15: rgba(201, 97, 26, 0.14); --color-primary-30: rgba(201, 97, 26, 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, 70, 54, 0.10); --color-cream-30: rgba(90, 70, 54, 0.22); --color-black-50: rgba(58, 42, 30, 0.45); --color-black-80: rgba(58, 42, 30, 0.72); /* Softer, warmer shadows */ --shadow-sm: 0 3px 12px rgba(120, 84, 54, 0.10); --shadow-md: 0 8px 26px rgba(120, 84, 54, 0.14); --shadow-lg: 0 18px 48px rgba(120, 84, 54, 0.18); --shadow-glow-primary: 0 8px 26px rgba(201, 97, 26, 0.22); --shadow-glow-primary-light: 0 8px 26px rgba(201, 97, 26, 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); } /* ------------------------------------------------------------ 2. NAVIGATION — translucent cream bar instead of black glass ------------------------------------------------------------ */ body.theme-warm .nav { background: rgba(251, 247, 240, 0.82); border-bottom: 1px solid rgba(120, 84, 54, 0.12); box-shadow: 0 2px 18px rgba(120, 84, 54, 0.06); } body.theme-warm .nav.scrolled { background: rgba(251, 247, 240, 0.95); border-bottom: 1px solid rgba(120, 84, 54, 0.14); } body.theme-warm .nav-link { color: #4A3728; 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: #4A3728; } /* ------------------------------------------------------------ 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: #4A3728; border: 1px solid rgba(120, 84, 54, 0.35); background: rgba(255, 255, 255, 0.4); } body.theme-warm .btn-secondary:hover { background: rgba(201, 97, 26, 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(251, 247, 240, 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: #FBD9A6; } 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: #FBF7F0; } body.theme-warm .story { background: #F5E9DC; } body.theme-warm .dishes { background: #FBF7F0; } body.theme-warm .faq { background: #F3E9E5; } body.theme-warm .find-us-section { background: #FBF7F0; } /* 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(120, 84, 54, 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: #4A3728; border: 1px solid rgba(120, 84, 54, 0.30); } body.theme-warm .location-btn-secondary:hover { background: rgba(201, 97, 26, 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(120, 84, 54, 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(120,84,54,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(201, 97, 26, 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(251, 247, 240, 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: #FBD9A6; } 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: #FBF7F0; } 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: #4A3728; } 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(251, 247, 240, 0.97); box-shadow: 0 2px 14px rgba(120, 84, 54, 0.10); } body.theme-warm .menu-buttons.fixed-nav .menu-button { color: #4A3728; } 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(120, 84, 54, 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(120, 84, 54, 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: #FBF7F0; 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(201,97,26,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(201,97,26,0.55), rgba(120,84,54,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, #E07D2A, var(--color-primary), #A94E12); box-shadow: 0 0 10px rgba(201,97,26,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(201,97,26,0.25); } 50% { box-shadow: 0 10px 34px rgba(201,97,26,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(120,84,54,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(120, 84, 54, 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(120, 84, 54, 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(120, 84, 54, 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(201, 97, 26, 0.14); border-color: rgba(201, 97, 26, 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 ------------------- */ /* #C9611A 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 (#A94E12 ~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 (#8C7862) ~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(120, 84, 54, 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: #3A2A1E; } /* ---- 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(201, 97, 26, 0.12); border-color: rgba(201, 97, 26, 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(201, 97, 26, 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(201, 97, 26, 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(120, 84, 54, 0.14); box-shadow: 0 14px 30px rgba(58, 42, 30, 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: #4A3728; } 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 #3A2A1E — 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; }