/* Restaurant theme — Fresh colour scheme with Light & Dark modes. * The markup uses Tailwind arbitrary colour classes (bg-[#242426], text-[#C3073F], …); * this file maps every one of those to a semantic CSS variable, and the variables flip * between light and dark via [data-theme] on . Layout/markup is unchanged — only * the resolved colours change. Palette matches the "Fresh" theme (emerald + neutral). */ /* ─── Tokens: DARK (default) ─────────────────────────────────────────────── */ :root { --bg: #101312; /* page background */ --surface: #1c211e; /* cards / header when solid */ --surface-2: #262c28; /* inputs / insets */ --section-alt: #15181a; /* alternating "cream" sections */ --section-dark: #0b0d0c; /* dark showcase bands (Our Kitchens / Certificates) */ --chrome: #0a0c0b; /* header / footer / contact band */ --border: #313a35; --border-soft: #2a312d; --text: #eef2ee; /* primary text on surfaces/page */ --text-muted: #9aa39d; --on-dark: #f4f7f5; /* text that always sits on dark images/bands */ --primary: #10b981; /* emerald (was crimson) */ --primary-hover: #059669; --secondary: #34d399; /* was terracotta */ --secondary-hover: #10b981; --gold: #cbbfae; --accent-soft-fg: #6ee7b7; /* Back-compat aliases used by the .btn/.card helper classes below */ --accent: var(--primary); --accent-soft: color-mix(in srgb, var(--primary) 14%, transparent); --accent-ink: #ffffff; --green: #10b981; --green-soft: color-mix(in srgb, #10b981 16%, transparent); --red: #f87171; --red-soft: color-mix(in srgb, #f87171 16%, transparent); --blue: #60a5fa; --blue-soft: color-mix(in srgb, #60a5fa 16%, transparent); --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.15); --shadow-lg: 0 10px 40px rgba(0,0,0,.3); --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ─── Tokens: LIGHT ──────────────────────────────────────────────────────── */ html[data-theme="light"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f6f4; --section-alt: #f7f8f5; --section-dark: #12261f; /* stays a dark emerald band even in light mode */ --chrome: #0f1a16; /* dark header/footer band in light mode too */ --border: #e5e7eb; --border-soft: #eef0ee; --text: #0b0b12; --text-muted: #6b7280; --on-dark: #f4f7f5; --primary: #059669; --primary-hover: #047857; --secondary: #047857; --secondary-hover: #065f46; --gold: #9c8f7a; --accent-soft-fg: #047857; --shadow: 0 1px 3px rgba(16,24,40,.06), 0 6px 20px rgba(16,24,40,.08); --shadow-lg: 0 12px 40px rgba(16,24,40,.14); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; font-size: 14px; } img { max-width: 100%; } /* Form controls always follow the theme text colour (they sit on --surface-2, which flips). */ input, textarea, select { color: var(--text) !important; } select option { color: var(--text); background: var(--surface); } input::placeholder, textarea::placeholder { color: var(--text-muted) !important; opacity: 1; } /* ─── Helper component classes (used sparingly; kept for compatibility) ───── */ .btn { display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:9px 16px; border-radius:var(--radius-sm); border:1px solid transparent; font-size:14px; font-weight:500; transition:background .15s,border-color .15s,opacity .15s; } .btn:disabled { opacity:.55; cursor:not-allowed; } .btn-primary { background:var(--primary); color:var(--accent-ink); } .btn-primary:hover:not(:disabled) { background:var(--primary-hover); } .btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border); } .btn-secondary:hover:not(:disabled) { background:var(--surface-2); } .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); } /* ─── Theme toggle button (injected into the header) ─────────────────────── */ [data-theme-toggle] { display:inline-flex; align-items:center; justify-content:center; } /* ═══════════════════════════════════════════════════════════════════════════ Map Tailwind arbitrary colour classes → semantic tokens (light/dark aware). Selectors match the exact class names Tailwind generates (escaped). ═══════════════════════════════════════════════════════════════════════════ */ /* Backgrounds */ .bg-\[\#1A1A1D\]{background-color:var(--bg)!important} .bg-\[\#242426\]{background-color:var(--surface)!important} .bg-\[\#242426\]\/40{background-color:color-mix(in srgb,var(--surface) 40%,transparent)!important} .bg-\[\#242426\]\/60{background-color:color-mix(in srgb,var(--surface) 60%,transparent)!important} .bg-\[\#2E2E32\]{background-color:var(--surface-2)!important} .bg-\[\#121214\]{background-color:var(--section-dark)!important} .bg-\[\#FAF3EE\]{background-color:var(--section-alt)!important} .bg-\[\#FAF3EE\]\/80{background-color:color-mix(in srgb,var(--chrome) 88%,transparent)!important} .bg-\[\#FAF3EE\]\/15{background-color:color-mix(in srgb,var(--section-alt) 15%,transparent)!important} .bg-\[\#C3073F\]{background-color:var(--primary)!important} .bg-\[\#C3073F\]\/10{background-color:color-mix(in srgb,var(--primary) 12%,transparent)!important} .bg-\[\#C85A48\]{background-color:var(--secondary)!important} .bg-\[\#C85A48\]\/10{background-color:color-mix(in srgb,var(--secondary) 12%,transparent)!important} .bg-\[\#A64434\]{background-color:var(--secondary-hover)!important} .bg-\[\#950740\]{background-color:var(--primary-hover)!important} .bg-\[\#A30533\]{background-color:var(--primary-hover)!important} .bg-\[\#C5A880\]{background-color:var(--gold)!important} .bg-\[\#C5A880\]\/5{background-color:color-mix(in srgb,var(--gold) 6%,transparent)!important} .bg-black{background-color:var(--chrome)!important} .bg-white{background-color:var(--surface)!important} .bg-slate-50{background-color:var(--surface-2)!important} .bg-slate-100{background-color:var(--surface-2)!important} .hover\:bg-\[\#A64434\]:hover{background-color:var(--secondary-hover)!important} .hover\:bg-\[\#A30533\]:hover{background-color:var(--primary-hover)!important} .hover\:bg-\[\#950740\]:hover{background-color:var(--primary-hover)!important} .hover\:bg-\[\#C85A48\]:hover{background-color:var(--secondary)!important} .hover\:bg-\[\#C85A48\]\/10:hover{background-color:color-mix(in srgb,var(--secondary) 12%,transparent)!important} /* Text */ .text-\[\#C3073F\]{color:var(--primary)!important} .\!text-\[\#C3073F\]{color:var(--primary)!important} .text-\[\#C3073F\]\/60{color:color-mix(in srgb,var(--primary) 60%,transparent)!important} .text-\[\#C85A48\]{color:var(--secondary)!important} .text-\[\#7A6C62\]{color:var(--text-muted)!important} .text-\[\#958E8A\]{color:var(--text-muted)!important} .text-\[\#4E4E50\]{color:var(--text-muted)!important} .text-\[\#2A221E\]{color:var(--text)!important} .text-\[\#C5A880\]{color:var(--gold)!important} .text-\[\#ff8fae\]{color:var(--accent-soft-fg)!important} .text-\[\#FAF3EE\]{color:var(--on-dark)!important} .text-\[\#FAF3EE\]\/90{color:color-mix(in srgb,var(--on-dark) 90%,transparent)!important} .text-\[\#FAF3EE\]\/85{color:color-mix(in srgb,var(--on-dark) 85%,transparent)!important} .text-\[\#FAF3EE\]\/80{color:color-mix(in srgb,var(--on-dark) 80%,transparent)!important} .text-\[\#FAF3EE\]\/75{color:color-mix(in srgb,var(--on-dark) 75%,transparent)!important} .text-\[\#FAF3EE\]\/70{color:color-mix(in srgb,var(--on-dark) 70%,transparent)!important} .text-\[\#FAF3EE\]\/60{color:color-mix(in srgb,var(--on-dark) 60%,transparent)!important} .text-\[\#FAF3EE\]\/45{color:color-mix(in srgb,var(--on-dark) 45%,transparent)!important} .hover\:text-\[\#C85A48\]:hover{color:var(--secondary)!important} .text-slate-300{color:var(--text-muted)!important} .fill-\[\#C3073F\]{fill:var(--primary)!important} /* Borders */ .border-\[\#4E4E50\]{border-color:var(--border)!important} .border-\[\#4E4E50\]\/15{border-color:color-mix(in srgb,var(--border) 15%,transparent)!important} .border-\[\#4E4E50\]\/20{border-color:color-mix(in srgb,var(--border) 20%,transparent)!important} .border-\[\#4E4E50\]\/30{border-color:color-mix(in srgb,var(--border) 30%,transparent)!important} .border-\[\#4E4E50\]\/40{border-color:color-mix(in srgb,var(--border) 40%,transparent)!important} .border-\[\#4E4E50\]\/60{border-color:color-mix(in srgb,var(--border) 60%,transparent)!important} .border-\[\#4E4E50\]\/80{border-color:color-mix(in srgb,var(--border) 80%,transparent)!important} .border-\[\#EFE4DA\]{border-color:var(--border-soft)!important} .border-\[\#EFE4DA\]\/80{border-color:color-mix(in srgb,var(--border-soft) 80%,transparent)!important} .border-\[\#C3073F\]{border-color:var(--primary)!important} .border-\[\#C3073F\]\/30{border-color:color-mix(in srgb,var(--primary) 30%,transparent)!important} .border-\[\#C3073F\]\/40{border-color:color-mix(in srgb,var(--primary) 40%,transparent)!important} .border-\[\#C3073F\]\/50{border-color:color-mix(in srgb,var(--primary) 50%,transparent)!important} .border-\[\#C3073F\]\/70{border-color:color-mix(in srgb,var(--primary) 70%,transparent)!important} .border-\[\#C85A48\]{border-color:var(--secondary)!important} .border-\[\#C85A48\]\/40{border-color:color-mix(in srgb,var(--secondary) 40%,transparent)!important} .border-\[\#C85A48\]\/50{border-color:color-mix(in srgb,var(--secondary) 50%,transparent)!important} .border-\[\#C5A880\]{border-color:var(--gold)!important} .border-\[\#C5A880\]\/30{border-color:color-mix(in srgb,var(--gold) 30%,transparent)!important} .border-\[\#C5A880\]\/40{border-color:color-mix(in srgb,var(--gold) 40%,transparent)!important} .border-\[\#C5A880\]\/50{border-color:color-mix(in srgb,var(--gold) 50%,transparent)!important} .border-\[\#FAF3EE\]\/10{border-color:color-mix(in srgb,var(--on-dark) 10%,transparent)!important} .hover\:border-\[\#C85A48\]\/30:hover{border-color:color-mix(in srgb,var(--secondary) 30%,transparent)!important} .hover\:border-\[\#C85A48\]\/40:hover{border-color:color-mix(in srgb,var(--secondary) 40%,transparent)!important} .hover\:border-\[\#C85A48\]\/50:hover{border-color:color-mix(in srgb,var(--secondary) 50%,transparent)!important} .hover\:border-\[\#C5A880\]\/50:hover{border-color:color-mix(in srgb,var(--gold) 50%,transparent)!important} .hover\:border-\[\#C3073F\]\/50:hover{border-color:color-mix(in srgb,var(--primary) 50%,transparent)!important} .hover\:border-\[\#C3073F\]\/70:hover{border-color:color-mix(in srgb,var(--primary) 70%,transparent)!important} /* Focus rings */ .ring-\[\#C3073F\]\/20{--tw-ring-color:color-mix(in srgb,var(--primary) 20%,transparent)!important} .ring-\[\#C3073F\]\/30{--tw-ring-color:color-mix(in srgb,var(--primary) 30%,transparent)!important} .focus\:ring-\[\#C3073F\]\/20:focus{--tw-ring-color:color-mix(in srgb,var(--primary) 20%,transparent)!important} .focus\:ring-\[\#C3073F\]\/30:focus{--tw-ring-color:color-mix(in srgb,var(--primary) 30%,transparent)!important} /* ═══════════════════════════════════════════════════════════════════════════ LIGHT MODE — text handling. The markup uses text-white heavily, assuming dark surfaces. In light mode most of those sit on surfaces that are now light, so flip white→--text. Then re-force white where text genuinely sits on an always-dark element (header, footer, hero, the dark showcase bands, image-overlay link cards, and solid colour buttons). ═══════════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] [class*="text-white"]{color:var(--text)!important} html[data-theme="light"] [data-header] [class*="text-white"], html[data-theme="light"] footer [class*="text-white"], html[data-theme="light"] section:has([data-hero]) [class*="text-white"], html[data-theme="light"] .bg-\[\#121214\] [class*="text-white"], html[data-theme="light"] a:has(> img) [class*="text-white"], html[data-theme="light"] [class*="text-white"][class*="bg-black"], html[data-theme="light"] [class*="text-white"][class*="bg-[#C3073F]"], html[data-theme="light"] [class*="text-white"][class*="bg-[#C85A48]"], html[data-theme="light"] [class*="text-white"][class*="bg-[#950740]"], html[data-theme="light"] [class*="text-white"][class*="bg-[#A30533]"], html[data-theme="light"] [class*="text-white"][class*="bg-[#A64434]"], html[data-theme="light"] [class*="text-white"][class*="bg-[#C5A880]"], html[data-theme="light"] [class*="text-white"][class*="bg-[#121214]"], html[data-theme="light"] .bg-black [class*="text-white"]{color:#ffffff!important} /* Success / accent greens stay readable on light surfaces */ html[data-theme="light"] .text-emerald-400{color:var(--primary)!important} /* ─── Runtime helpers ────────────────────────────────────────────────────── */ .fg-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:14px;} .taza-heading{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-0.01em;} .about-display{font-family:'Inter',sans-serif;} .fade-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out;} .fade-slide.is-active{opacity:1;} .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;} .reveal.in{opacity:1;transform:none;} .no-scrollbar::-webkit-scrollbar{display:none;} .no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;} @media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;} }