/* ============================================================ My Kitchen — Dynamic time-based theme (specs #1–#4, #23–#26) ------------------------------------------------------------ Four atmosphere themes driven by CSS custom properties that assets/js/theme.js updates live. The class on also carries the palette for first paint (no flash, no refresh). IMPORTANT: every rule here is scoped under a .theme-* body class, so the ADMIN panel (which never gets a theme class) is completely unaffected. The clock changes ONLY the visual atmosphere — never the menu content (spec #29). Transition strategy (spec #4): solid colors transition via `transition` declarations below. CSS gradients cannot interpolate, so gradient layers use very low alpha values — their instant swap at a theme boundary is imperceptible while the underlying solid colors glide. ============================================================ */ :root { /* Defaults = morning; each .theme-* class below overrides. */ --primary: #F97316; --secondary: #FDBA74; --background: #FFF7ED; --accent: #EA580C; --text: #431407; --card-bg: #FFFFFF; --border: rgba(249, 115, 22, .15); --particle-color: #F97316; } /* ── Theme palettes (spec #1) ─────────────────────────────── */ body.theme-morning { --primary: #F97316; --secondary: #FDBA74; --background: #FFF7ED; --accent: #EA580C; --text: #431407; --card-bg: #FFFFFF; --border: rgba(249, 115, 22, .15); --particle-color: #F97316; --desc: #78716c; /* card description text */ --hero-grad-a: #F97316; /* hero gradient stops */ --hero-grad-b: #EA580C; --hero-text: #fff; --tab-bg: rgba(255, 255, 255, .92); --tab-text: #431407; --tab-border: rgba(249, 115, 22, .22); --cat-bg: rgba(249, 115, 22, .10); /* category pill */ --cat-text: #9a3412; --logo-glow: rgba(251, 191, 36, .55); --shadow-color: 249, 115, 22; /* rgb triplet for shadows */ } body.theme-afternoon { --primary: #DC2626; --secondary: #FCA5A5; --background: #FEF2F2; --accent: #B91C1C; --text: #450A0A; --card-bg: #FFFFFF; --border: rgba(220, 38, 38, .15); --particle-color: #DC2626; --desc: #78716c; --hero-grad-a: #DC2626; --hero-grad-b: #B91C1C; --hero-text: #fff; --tab-bg: rgba(255, 255, 255, .92); --tab-text: #450A0A; --tab-border: rgba(220, 38, 38, .22); --cat-bg: rgba(220, 38, 38, .10); --cat-text: #991b1b; --logo-glow: rgba(252, 165, 165, .55); --shadow-color: 220, 38, 38; } body.theme-evening { --primary: #2563EB; --secondary: #93C5FD; --background: #EFF6FF; --accent: #1D4ED8; --text: #172554; --card-bg: #FFFFFF; --border: rgba(37, 99, 235, .15); --particle-color: #2563EB; --desc: #64748b; --hero-grad-a: #2563EB; --hero-grad-b: #1D4ED8; --hero-text: #fff; --tab-bg: rgba(255, 255, 255, .92); --tab-text: #172554; --tab-border: rgba(37, 99, 235, .22); --cat-bg: rgba(37, 99, 235, .10); --cat-text: #1e40af; --logo-glow: rgba(147, 197, 253, .6); --shadow-color: 37, 99, 235; } body.theme-night { --primary: #111111; --secondary: #404040; --background: #0B0B0B; --accent: #FFFFFF; --text: #F5F5F5; --card-bg: #171717; /* proper dark card, not inverted (#26) */ --border: rgba(255, 255, 255, .08); --particle-color: #FFFFFF; --desc: #A3A3A3; --hero-grad-a: #0B0B0B; --hero-grad-b: #111111; --hero-text: #F5F5F5; --tab-bg: #171717; --tab-text: #E5E5E5; --tab-border: rgba(255, 255, 255, .12); --cat-bg: rgba(255, 255, 255, .08); --cat-text: #D4D4D4; --logo-glow: rgba(255, 255, 255, .35); --shadow-color: 0, 0, 0; } /* ── Smooth theme transition (spec #4) ────────────────────── */ body.menu-page, body.menu-page .menu-hero, body.menu-page .menu-card, body.menu-page .menu-tabs .nav-link, body.menu-page .item-price, body.menu-page .item-desc, body.menu-page .item-cat, body.menu-page .item-name, body.menu-page .chip, body.menu-page .restaurant-logo, body.menu-page .restaurant-name, body.menu-page .empty-state, body.menu-page .divider-line, body.menu-page footer { transition: background-color 1s ease, color 1s ease, border-color 1s ease, box-shadow 1s ease; } /* ── Page + atmosphere background (specs #6, #8, #10, #12) ── */ body.menu-page { background-color: var(--background); color: var(--text); background-image: var(--atmo-bg, none); background-attachment: fixed; } body.theme-morning.menu-page { --atmo-bg: radial-gradient(circle at 50% 0%, rgba(249, 115, 22, .16) 0%, rgba(253, 186, 116, .10) 28%, transparent 52%); } body.theme-afternoon.menu-page { --atmo-bg: radial-gradient(circle at 50% 0%, rgba(220, 38, 38, .12) 0%, rgba(252, 165, 165, .08) 30%, transparent 55%); } body.theme-evening.menu-page { --atmo-bg: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .12) 0%, transparent 45%), linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%); } body.theme-night.menu-page { --atmo-bg: radial-gradient(circle at top center, rgba(255, 255, 255, 0.08), transparent 45%); /* spec #12 */ } /* ── Particle layer (spec #16): behind content, never blocks ─ */ #particleCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } body.menu-page header.menu-hero, body.menu-page main, body.menu-page footer { position: relative; z-index: 1; } /* ── Hero atmosphere (spec #23) ───────────────────────────── */ body.menu-page .menu-hero { background: var(--hero-grad-a) linear-gradient(140deg, var(--hero-grad-a) 0%, var(--hero-grad-b) 100%); color: var(--hero-text); } body.menu-page .menu-hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: var(--hero-glow, none); } body.theme-morning .menu-hero::after { --hero-glow: radial-gradient(ellipse at 50% -20%, rgba(253, 186, 116, .45) 0%, transparent 65%); } body.theme-afternoon .menu-hero::after { --hero-glow: radial-gradient(ellipse at 50% -20%, rgba(252, 165, 165, .35) 0%, transparent 65%); } body.theme-evening .menu-hero::after { --hero-glow: radial-gradient(ellipse at 50% -20%, rgba(147, 197, 253, .40) 0%, transparent 65%); } body.theme-night .menu-hero::after { --hero-glow: radial-gradient(ellipse at 50% -30%, rgba(255, 255, 255, .12) 0%, transparent 60%); } /* Hero content above the glow layer */ body.menu-page .menu-hero .container-xl { position: relative; z-index: 1; } /* ── Logo: animated theme glow, very subtle (spec #27) ────── */ body.menu-page .restaurant-logo { animation: logoGlow 6s ease-in-out infinite; box-shadow: 0 0 24px var(--logo-glow); } @keyframes logoGlow { 0%, 100% { box-shadow: 0 0 18px var(--logo-glow); } 50% { box-shadow: 0 0 34px var(--logo-glow); } } body.menu-page .restaurant-name { color: var(--hero-text); } body.menu-page .chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: var(--hero-text); } /* ── Menu tabs (spec #24) ─────────────────────────────────── */ body.menu-page .menu-tabs .nav-link { background: var(--tab-bg); color: var(--tab-text); border-color: var(--tab-border); } body.menu-page .menu-tabs .nav-link:hover { border-color: var(--primary); color: var(--primary); } body.menu-page .menu-tabs .nav-link.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* Night: primary is near-black — flip the active pill for contrast (spec #26) */ body.theme-night .menu-tabs .nav-link.active { background: #F5F5F5; border-color: #F5F5F5; color: #111111; } body.theme-night .menu-tabs .nav-link:hover { border-color: rgba(255, 255, 255, .35); color: #FFFFFF; } /* ── Food cards (spec #25) ────────────────────────────────── */ body.menu-page .menu-card { background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 4px 18px rgba(var(--shadow-color), .10); } body.menu-page .menu-card:hover { box-shadow: 0 10px 30px rgba(var(--shadow-color), .18); } body.menu-page .card-img-wrap { background: var(--background); } body.menu-page .item-name { color: var(--text); } body.menu-page .item-desc { color: var(--desc); } body.menu-page .item-price { color: var(--accent); } /* Night prices stay pure white (spec #26) */ body.theme-night .item-price { color: #FFFFFF; } body.menu-page .item-cat { background: var(--cat-bg); color: var(--cat-text); } body.menu-page .empty-state { background: var(--card-bg); border: 1px solid var(--border); } body.menu-page .empty-title { color: var(--text); } body.menu-page .section-divider { color: var(--primary); } /* Night: keep the "Our Menu" heading readable on black. Specificity (0,3,1) outranks the rule above (0,2,1) — must, since it comes first. */ body.theme-night.menu-page .section-divider { color: #F5F5F5; } body.menu-page .divider-line { background: var(--border); } body.menu-page footer { color: var(--desc); } /* ── Accessibility (spec #32): reduced motion kills it all ── */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } #particleCanvas { display: none; } }