, so the tint and the wave divider were clipped to 1200px instead of spanning the viewport. Let those sections run full-bleed and keep the 1200px measure with symmetric padding. */ body.theme-warm-auto section.section__container:not([class*="hero"]) { max-width: none; padding-left: max(1rem, calc((100% - var(--max-width)) / 2)); padding-right: max(1rem, calc((100% - var(--max-width)) / 2)); } /* 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: #1A1A1A; } 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(255, 255, 255, 0.97); box-shadow: 0 2px 14px rgba(20, 20, 20, 0.10); } body.theme-warm .menu-buttons.fixed-nav .menu-button { color: #1A1A1A; } 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(20, 20, 20, 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(20, 20, 20, 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: #FFFFFF; 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(232,133,63,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-progress { display: none !important; } body.theme-warm .nav-cta { animation: none !important; } } /* ============================================================ 16. PREDOMINANT / PUBLIC-FACING MOTION Bolder, always-visible animation: a scroll-progress "chai fill" bar, a pulsing CTA, and stronger directional reveals. Still reduced-motion safe. ============================================================ */ /* ---- 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, #E8853F, var(--color-primary), #B85C15); box-shadow: 0 0 10px rgba(232,133,63,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(232,133,63,0.25); } 50% { box-shadow: 0 10px 34px rgba(232,133,63,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(20,20,20,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. SECTION SEPARATORS — static The separators stretch to fit (background-size: 100% 100%, set in the base rules above). No drift animation. ============================================================ */ /* ============================================================ 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: #F5F6F7; border: 1px solid rgba(20, 20, 20, 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: #F5F6F7; border: 1px solid rgba(20, 20, 20, 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: #F5F6F7; border: 1px solid rgba(20, 20, 20, 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(232, 133, 63, 0.14); border-color: rgba(232, 133, 63, 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 ------------------- */ /* #E8853F 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 (#B85C15 ~4.9:1) for these small labels only. */ body.theme-warm .section-label, body.theme-warm .story-label, body.theme-warm .location-hours-title { 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 (#8A8A8A) ~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(20, 20, 20, 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: #1A1A1A; } 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: #1A1A1A; } /* ---- 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(232, 133, 63, 0.12); border-color: rgba(232, 133, 63, 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(232, 133, 63, 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(232, 133, 63, 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(20, 20, 20, 0.14); box-shadow: 0 14px 30px rgba(20, 20, 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: #1A1A1A; } 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 #1A1A1A — 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: #1A1A1A; } 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; } /* ============================================================ 22. MENU DISH CARDS — warm, layered card design The dish grid was inheriting the generic flat-grey surface (--color-charcoal-light) with the name/price/description simply stacked, which read as bland filler on the light theme. This block gives the cards a real identity: • cream-to-white surface with a warm hairline + soft lift • an accent rail down the left edge that fills on hover • the price pulled up beside the title as a tinted pill • the category turned into a small uppercase chip Structure is unchanged (.menu-item > .item-details > .item-name / .item-price / .item-desc) — this is layout and colour only, driven by CSS grid. ============================================================ */ body.theme-warm .menu-item { position: relative; overflow: hidden; /* all padding lives on .item-details so the accent rail and the card edge stay flush (base CSS pads both above 600px) */ padding: 0; background: linear-gradient(170deg, #FFFFFF 0%, #FDF6EC 100%); border: 1px solid rgba(184, 148, 104, 0.26); border-radius: var(--border-radius-md); box-shadow: 0 1px 2px rgba(74, 48, 22, 0.04), 0 12px 26px -18px rgba(74, 48, 22, 0.45); transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium); } /* Accent rail — a stub at rest, fills the card edge on hover */ body.theme-warm .menu-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--color-primary), #F2B25A); transform: scaleY(0.34); transform-origin: top; transition: transform 0.45s ease; pointer-events: none; } body.theme-warm .menu-item:hover { border-color: rgba(232, 133, 63, 0.45); box-shadow: 0 2px 4px rgba(74, 48, 22, 0.05), 0 22px 40px -22px rgba(74, 48, 22, 0.55); } body.theme-warm .menu-item:hover::before { transform: scaleY(1); } /* Title + price share the first row; description spans below */ body.theme-warm .item-details { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 0.9rem; row-gap: 0.45rem; padding: 1.15rem 1.25rem 1.25rem 1.45rem; } body.theme-warm .item-name { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--font-primary); font-size: 1.2rem; line-height: 1.25; letter-spacing: 0.01em; color: #241A12; } body.theme-warm .item-price { grid-column: 2; grid-row: 1; justify-self: end; margin: 0; padding: 0.3rem 0.65rem; font-size: 0.95rem; font-weight: 700; line-height: 1.2; white-space: nowrap; color: #A9560D; background: rgba(232, 133, 63, 0.12); border: 1px solid rgba(232, 133, 63, 0.22); border-radius: 999px; opacity: 1; } body.theme-warm .item-desc { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 0.93rem; line-height: 1.6; color: #5C4B3C; } /* Category label → small uppercase chip */ body.theme-warm .item-desc span { display: inline-block; margin: 0 0.5rem 0.35rem 0; padding: 0.16rem 0.5rem; font-size: 0.63rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #8C5A22; background: rgba(184, 148, 104, 0.14); border-radius: 999px; vertical-align: 1px; } /* Thin warm rule between the dish grid rows is unnecessary once the cards carry their own edge — just widen the breathing room */ body.theme-warm .menu-items { row-gap: 1.25rem; } /* ------------------------------------------------------------ Desktop category sidebar — pill navigation instead of the bare text list with a hairline underline. ------------------------------------------------------------ */ @media only screen and (min-width: 768px) { body.theme-warm .menu-buttons { padding: 0.85rem 0.7rem; gap: 2px; background: linear-gradient(180deg, #FFFFFF 0%, #FDF6EC 100%); border: 1px solid rgba(184, 148, 104, 0.26); border-radius: var(--border-radius-lg); box-shadow: 0 1px 2px rgba(74, 48, 22, 0.04), 0 16px 34px -22px rgba(74, 48, 22, 0.5); } body.theme-warm .menu-button { padding: 0.6rem 0.85rem; font-size: 0.95rem; border-radius: 10px; color: #3A2E24; transition: background var(--transition-fast), color var(--transition-fast); } /* The underline indicators are replaced by the pill fill */ body.theme-warm .menu-button::after, body.theme-warm .menu-button:hover::after, body.theme-warm .menu-button.active-button::after { display: none; } body.theme-warm .menu-button:hover { opacity: 1; color: #A9560D; background: rgba(232, 133, 63, 0.10); } body.theme-warm .menu-button.active-button { opacity: 1; font-weight: 600; color: #FFFFFF; background: linear-gradient(135deg, var(--color-primary), #D9702B); box-shadow: 0 6px 16px -8px rgba(217, 112, 43, 0.85); } } /* Tighter card padding on phones */ @media only screen and (max-width: 600px) { body.theme-warm .item-details { padding: 0.95rem 1rem 1.05rem 1.2rem; } body.theme-warm .item-name { font-size: 1.08rem; } body.theme-warm .item-price { font-size: 0.88rem; } }