/* ========================================================================= SHAWARMA ROYALE — THEME TOGGLE + LIGHT MODE Loaded on every public page. Dark mode is the default (no class on ); adding `light-theme` to repaints the site white + red. ========================================================================= */ /* ------------------------------------------------------------------------- Theme toggle button (fixed, top-left). Styled for both themes. ------------------------------------------------------------------------- */ .theme-toggle{ position: fixed; top: 15px; left: 16px; z-index: 60; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(20,20,20,.32); color: #fff; opacity: .5; -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); cursor: pointer; transition: opacity .25s ease, background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease; } .theme-toggle:hover, .theme-toggle:focus-visible{ opacity: 1; border-color: rgba(215,40,46,.6); transform: scale(1.08) } .theme-toggle:focus-visible{ outline: 2px solid #D7282E; outline-offset: 3px } .theme-toggle svg{ width: 15px; height: 15px; display: block } /* Show moon in dark mode (invites switching to light), sun in light mode. */ .theme-toggle .icon-sun{ display: none } .theme-toggle .icon-moon{ display: block } html.light-theme .theme-toggle{ border-color: rgba(0,0,0,.14); background: rgba(255,255,255,.55); color: #17110F; } html.light-theme .theme-toggle:hover, html.light-theme .theme-toggle:focus-visible{ border-color: rgba(200,30,35,.6) } html.light-theme .theme-toggle .icon-sun{ display: block } html.light-theme .theme-toggle .icon-moon{ display: none } /* Keep the left-hand nav links clear of the fixed toggle on desktop. */ @media (min-width: 921px){ .nav-left{ padding-left: 44px } } /* On mobile the nav condenses to a hamburger. Rather than restructure its grid (which pushed the menu button onto a second row, overlapping the hero), keep the page's native single-row nav and just reserve room on the left for the fixed toggle. */ @media (max-width: 920px){ .theme-toggle{ width: 30px; height: 30px; top: 14px; left: 12px } header.nav{ padding-left: 48px !important } /* The homepage hero is a wide banner whose text sits at its very top edge. Start it right at the nav's bottom (~64px tall on mobile) so it clears the fixed bar without leaving a white gap between them. */ .hero:has(.hero-cup){ padding-top: 64px !important } } /* ========================================================================= LIGHT THEME — redefine the palette so the whole system flips to white + red. Most of the site is driven by these tokens, so overriding them does the heavy lifting; the rules further down patch the places that hard-coded white/black or that must stay white because they sit on red or on imagery. ========================================================================= */ html.light-theme{ --red: #C81E23; --red-deep: #9E1519; --red-soft: #FBE6E7; /* Surfaces — warm off-whites with real tonal steps so sections read as distinct panels instead of one flat sheet of pure white. From deepest (anchors) to lightest (raised cards): */ --black: #EBE4DD; /* footer + feature panels — deepest, grounds the page */ --ink: #F4F0EB; /* page background — soft warm off-white (bone) */ --ink-elev: #FBF9F6; /* cards / raised sections — near-white, lifts above base */ --paper: #EFEAE3; --paper-2: #E8E1D8; /* story quote block */ --white: #1A1512; /* "white" text now reads as warm near-black ink */ /* Text tiers → dark-based */ --t-soft: rgba(0,0,0,.68); --t-mute: rgba(0,0,0,.5); --t-faint: rgba(0,0,0,.34); /* Lines → dark-based */ --line: rgba(0,0,0,.16); --line-soft: rgba(0,0,0,.07); color-scheme: light; } html.light-theme body{ background: var(--ink); color: var(--white) } html.light-theme ::selection{ background: var(--red); color: #fff } /* ---- Nav + footer chrome (the gradient/bg were hard-coded dark) ---------- */ html.light-theme .nav{ background: linear-gradient(180deg, rgba(248,245,240,.95), rgba(248,245,240,.82)); border-bottom: 1px solid var(--line-soft); } html.light-theme .nav.scrolled{ background: rgba(248,245,240,.9); border-bottom: 1px solid var(--line); box-shadow: 0 6px 26px -18px rgba(0,0,0,.5); } html.light-theme .mobile-menu{ background: rgba(248,245,240,.98) } html.light-theme .menu-toggle .bars span{ background: var(--white) } /* ---- Elements that MUST stay white because they sit on red -------------- */ html.light-theme .cta, html.light-theme .btn-red, html.light-theme .loc-marquee, html.light-theme .manifesto, html.light-theme .franchise, html.light-theme .badge-new, html.light-theme .mcard .badge-new, html.light-theme .subscribe button, html.light-theme .banner.red{ color: #fff } html.light-theme .manifesto-quote{ border-left-color: #fff } html.light-theme .manifesto-badge{ border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.9) } html.light-theme .manifesto-badge .dot{ background: #fff } html.light-theme .counter-strip .wraps-counter-value, html.light-theme .counter-strip .wraps-counter-value .plus-sign{ color: #fff } /* Outline controls whose hover fills with red need white text on hover */ html.light-theme .chip:hover, html.light-theme .chip.active, html.light-theme .menu-nav button:hover, html.light-theme .loc-geo:hover, html.light-theme .locations-spotlight .loc-geo{ color: #fff } /* ---- Text over imagery (menu cards) must stay light --------------------- */ html.light-theme .mcard-body, html.light-theme .mcard-body h3, html.light-theme .mcard-body .meta{ color: #fff } html.light-theme .mcard .corner{ background: #fff; color: #111 } /* ---- Hero: the homepage cup banner has a solid white background, so give THAT hero a white stage in light mode (matching the original wide-screen intent). Scoped to :has(.hero-cup) so it never touches the menu/catering photo heroes, which stay dark. -------------------------------------------- */ html.light-theme .hero:has(.hero-cup){ background: #fff } html.light-theme .hero-grain{ mix-blend-mode: multiply; opacity: .12 } /* ---- Sections that hard-coded white text on a (now light) dark surface --- */ /* Crispy on Fire */ html.light-theme .crispy-copy p{ color: var(--t-soft) } html.light-theme .crispy-flavors li{ border-color: var(--line) } /* Black banner (the red banner is handled above, stays white) */ html.light-theme .banner.black{ color: var(--white) } html.light-theme .banner.black .banner-label{ color: rgba(0,0,0,.6) } html.light-theme .banner.black .banner-p, html.light-theme .banner.black p{ color: var(--t-soft) } /* Placeholder tiles */ html.light-theme .sp-placeholder{ background: repeating-linear-gradient(45deg, #ececec, #ececec 14px, #f5f5f5 14px, #f5f5f5 28px); color: var(--t-mute); } /* ---- Forms ---------------------------------------------------------------- */ html.light-theme .loc-search input{ background: rgba(0,0,0,.03) } html.light-theme .loc-search input:focus{ background: rgba(0,0,0,.05) } html.light-theme .subscribe input::placeholder{ color: rgba(0,0,0,.4) } /* ---- Locations grid: soften the heavy white gridlines to dark hairlines -- */ html.light-theme .loc-grid{ border-top-color: var(--line); border-left-color: var(--line) } html.light-theme .loc-card{ border-right-color: var(--line); border-bottom-color: var(--line) } /* On hover the card fills red — force its text white */ html.light-theme .loc-card:hover, html.light-theme .loc-card:hover .loc-city, html.light-theme .loc-card:hover .loc-go, html.light-theme .loc-card:hover .loc-coming, html.light-theme .loc-card:hover .loc-addr{ color: #fff } html.light-theme .loc-card:hover::before{ background: #fff } /* ---- Footer: hard-coded white/near-white text on a now-white surface ----- */ html.light-theme .foot-brand p{ color: var(--t-soft) } html.light-theme .foot-col a{ color: var(--t-soft) } html.light-theme .foot-col .addr{ color: var(--t-soft) } html.light-theme .foot-col .num{ color: var(--white) } html.light-theme .foot-bot{ color: var(--t-mute); border-top-color: var(--line) } html.light-theme .giant{ color: rgba(0,0,0,.045) } /* ---- Misc status text ---------------------------------------------------- */ html.light-theme .news-status{ color: var(--white) } html.light-theme .news-status.err{ color: #b0161b } /* ---- Soften heavy 2px white dividers into clean hairlines ---------------- */ html.light-theme .big-stat{ border-bottom-color: var(--line) } html.light-theme .t-marquee{ border-top-color: var(--line); border-bottom-color: var(--line) } /* ---- Depth: lift the raised cards off the warm base with a soft shadow ---- */ html.light-theme .sp-card, html.light-theme .offer-card, html.light-theme .t-card, html.light-theme .mcard{ box-shadow: 0 1px 2px rgba(60,40,30,.05), 0 14px 30px -18px rgba(60,40,30,.22); } html.light-theme .sp-card:hover, html.light-theme .offer-card:hover{ box-shadow: 0 2px 4px rgba(60,40,30,.06), 0 20px 40px -18px rgba(200,30,35,.28); } /* ========================================================================= SPREAD THE RED — trade flat red fills for depth gradients so every red section/control reads with a glow instead of one solid slab. Applies in both themes. Loaded after each page's inline styles, so these win. ========================================================================= */ html{ /* directional gradient for buttons/badges */ --red-grad: linear-gradient(135deg, #E5393E 0%, #D7282E 45%, #A8161B 100%); /* wide radial "spread" for big section panels */ --red-spread: radial-gradient(125% 135% at 18% 12%, #F04A45 0%, #D7282E 46%, #9E1519 100%); } html.light-theme{ --red-grad: linear-gradient(135deg, #D6333A 0%, #C81E23 46%, #8E1216 100%); --red-spread: radial-gradient(125% 135% at 18% 12%, #E5413F 0%, #C81E23 48%, #8E1216 100%); } /* Large section fills — the wide spread glow */ .manifesto, .loc-marquee, .counter-strip, .franchise, .banner.red{ background-image: var(--red-spread) } /* Let the spread show on the manifesto by softening its flat red overlay to a subtle dark vignette instead of a solid red wash. */ .manifesto::before{ background: linear-gradient(120deg, rgba(0,0,0,.20), transparent 58%) !important } /* Prominent red controls — directional gradient */ .cta, .btn-red, .subscribe button, .badge-new, .mcard .badge-new, .crispy-copy .crisp-tag, .locations-spotlight .loc-geo{ background-image: var(--red-grad) } /* Preserve the gradient on hover (shorthand :hover rules would flatten it) */ .cta:hover, .btn-red:hover, .subscribe button:hover, .locations-spotlight .loc-geo:hover{ background-image: var(--red-grad); filter: brightness(.92) } /* Fills that turn red on hover/active spread too */ .chip:hover, .chip.active, .menu-nav button:hover, .loc-geo:hover, .loc-card:hover, .mcard:hover .corner, .faq-item[open] .faq-icon, .cta-band{ background-image: var(--red-grad) } /* ========================================================================= LIGHT MODE — CROSS-PAGE FIXES The menu, catering, offers, support, location and franchise-partner pages hard-code #fff / #000 in places, and several have dark photo/aurora heroes. These rules make text resolve by context so nothing is white-on-white or dark-on-dark in light mode. (Dark theme is unaffected.) ========================================================================= */ /* Keep the dramatic photo/aurora heroes dark by re-mapping the design tokens (and inherited text colour) back to their dark values inside them. Targeted by structure, so the homepage's white product hero is NOT caught. */ html.light-theme .hero:has(.hero-bg), html.light-theme .hero:has(.aurora){ --white:#fff; --t-soft:rgba(255,255,255,.72); --t-mute:rgba(255,255,255,.5); --t-faint:rgba(255,255,255,.32); --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.06); --ink:#0B0B0B; --ink-elev:#141414; --paper:#171717; --paper-2:#1F1F1F; --black:#000; color:#fff; } /* Robust, :has()-independent fallback for the photo/aurora heroes. These match ONLY when a full-bleed photo (.hero-bg) or glow layer (.aurora) precedes the content — true on menu/catering/offers, false on the homepage (product hero) and location pages (split .hero-visual). Guarantees the hero has a dark backdrop and its text (incl. the "Home / …" breadcrumb) stays light even if the photo is slow to load or :has() is unavailable. */ html.light-theme .hero-bg{ background:#0B0B0B } html.light-theme .hero-bg ~ .container, html.light-theme .aurora ~ .container{ color:#fff } html.light-theme .hero-bg ~ .container .crumb, html.light-theme .aurora ~ .container .crumb{ color:rgba(255,255,255,.78) } html.light-theme .hero-bg ~ .container .crumb a, html.light-theme .aurora ~ .container .crumb a{ color:#fff } html.light-theme .hero-bg ~ .container p, html.light-theme .hero-bg ~ .container .sub, html.light-theme .aurora ~ .container p, html.light-theme .aurora ~ .container .sub{ color:rgba(255,255,255,.82) } /* Nav bar text (some pages hard-code the nav colour to white) */ html.light-theme .nav{ color: var(--white) } html.light-theme .nav a.link.active{ color: var(--white) } html.light-theme .nav .back{ color: var(--t-soft) } /* Breadcrumb link — resolves light inside a dark hero, dark on a light hero */ html.light-theme .crumb a{ color: var(--white) } /* Outline / dark utility buttons */ html.light-theme .btn-ghost{ color: var(--white); border-color: var(--white) } html.light-theme .btn-dark{ color: var(--white) } /* ---- Menu page ---- */ html.light-theme .jump{ background: rgba(248,245,240,.92); border-top-color: var(--line-soft); border-bottom-color: var(--line-soft); } html.light-theme .cat-head{ border-bottom-color: var(--line) } html.light-theme .note p strong{ color: var(--white) } /* Menu tile image wells were a dark gradient — lighten so items/placeholders read */ html.light-theme .tile-media{ background: radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #f3efe9 60%, #e9e3db 100%); } /* ---- Catering + Support: panels, quick facts, forms, calendar ---- */ html.light-theme .quick .v, html.light-theme .item-name, html.light-theme .price-note strong, html.light-theme .fact strong, html.light-theme .field input, html.light-theme .field select, html.light-theme .field textarea, html.light-theme .field option, html.light-theme .picker-trigger, html.light-theme .cal-title, html.light-theme .cal-nav, html.light-theme .cal-day, html.light-theme .time-slot{ color: var(--white) } /* selected day / time sit on red — keep white */ html.light-theme .cal-day.selected, html.light-theme .time-slot.selected{ color: #fff } /* the select chevron was a white SVG — swap it for a dark one */ html.light-theme .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* ---- Location pages: gridlines, over-image caption, red hover ---- */ html.light-theme .facts-grid, html.light-theme .nb-grid{ border-top-color: var(--line); border-left-color: var(--line) } html.light-theme .fact, html.light-theme .near-card{ border-right-color: var(--line); border-bottom-color: var(--line) } html.light-theme .map-frame{ border-color: var(--line) } html.light-theme .mt-card .meta{ color: rgba(255,255,255,.82) } /* over a dark photo */ html.light-theme .near-card:hover{ color: #fff } /* card fills red */ /* ---- Franchise-partner: red CTA band + its white-on-red apply form ---- */ html.light-theme .cta-band, html.light-theme .cta-band .contact-line a{ color: #fff } html.light-theme .apply-form input, html.light-theme .apply-form textarea, html.light-theme .apply-form select{ color:#17110F; border-color:rgba(0,0,0,.14) } /* ---- Footers that hard-coded #000 background / #fff text ---- */ html.light-theme footer{ background: var(--black); color: var(--white) } html.light-theme .foot-grid p{ color: var(--t-soft) }