/* ========================================================================== Side Dish — Dark theme override layer Activates when . Maps the compiled light Tailwind utilities + design-system components to a warm espresso palette that echoes the site's kraft sections. Dark chrome (utility bar / badges / image scrims via bg-ink & bg-kraft) is intentionally left near-black. ========================================================================== */ html.dark { color-scheme: dark; } html.dark body { background-color:#17120f; color:#f5e9d3; } /* paper grain kept as a soft warm texture, dialed back for the dark base */ html.dark body::before { opacity:.10; mix-blend-mode:soft-light; } /* ---- Surfaces / backgrounds ---- */ .dark .bg-surface{ background-color:#17120f; } .dark .bg-surface\/90{ background-color:rgba(23,18,15,.9); } .dark .bg-surface\/95{ background-color:rgba(23,18,15,.95); } .dark .bg-surface-container-low{ background-color:#1e1712; } .dark .bg-surface-container-low\/60{ background-color:rgba(30,23,18,.6); } .dark .bg-surface-container{ background-color:#241c16; } .dark .bg-surface-container-lowest{ background-color:#2a211a; } .dark .bg-surface-container-lowest\/90{ background-color:rgba(42,33,26,.92); } .dark .bg-white{ background-color:#2a211a; } .dark .hover\:bg-surface-container:hover{ background-color:#2f251d; } .dark .hover\:bg-surface-container-lowest\/90:hover{ background-color:rgba(47,37,29,.92); } .dark img.photo{ background:#241c16; } /* ---- Text ---- */ .dark .text-ink{ color:#f2e8d6; } .dark .text-ink\/50{ color:rgba(242,232,214,.5); } .dark .text-ink\/70{ color:rgba(242,232,214,.72); } .dark .text-ink\/80{ color:rgba(242,232,214,.82); } .dark .text-ink\/85{ color:rgba(242,232,214,.85); } .dark .text-on-surface{ color:#f2e8d6; } .dark .text-on-surface-variant{ color:#b9a88f; } .dark .text-on-surface-variant\/50{ color:rgba(185,168,143,.5); } .dark .text-outline{ color:#9a8a78; } /* ---- Accent: brightened tomato for dark legibility ---- */ .dark .text-primary, .dark .text-primary-deep{ color:#ec6a5d; } .dark .hover\:text-primary:hover{ color:#ec6a5d; } .dark .group:hover .group-hover\:text-primary{ color:#ec6a5d; } .dark .border-primary{ border-color:#ec6a5d; } .dark .border-primary\/25{ border-color:rgba(236,106,93,.28); } .dark .border-primary\/30{ border-color:rgba(236,106,93,.34); } .dark .decoration-primary\/40{ text-decoration-color:rgba(236,106,93,.5); } .dark .bg-primary\/10{ background-color:rgba(236,106,93,.14); } .dark .bg-primary-fixed\/60{ background-color:rgba(236,106,93,.16); } /* ---- Borders (ink → cream alpha) ---- */ .dark .border-ink\/5{ border-color:rgba(245,233,211,.06); } .dark .border-ink\/10{ border-color:rgba(245,233,211,.10); } .dark .border-ink\/15{ border-color:rgba(245,233,211,.14); } .dark .border-ink\/20{ border-color:rgba(245,233,211,.20); } .dark .hover\:border-ink:hover{ border-color:rgba(245,233,211,.55); } .dark .hover\:border-primary:hover{ border-color:#ec6a5d; } /* ---- Components ---- */ .dark .btn-ghost{ color:#f5e9d3; border-color:rgba(245,233,211,.5); } .dark .btn-ghost:hover{ background:#f5e9d3; color:#1a1410; } .dark .chip{ background:#241c16; border-color:rgba(245,233,211,.12); color:#f2e8d6; } .dark .chip:hover{ border-color:#ec6a5d; color:#ec6a5d; } .dark .chip[data-active=true]{ background:#f5e9d3; border-color:#f5e9d3; color:#1a1410; } .dark .chip[data-active=true] .chip-count{ color:rgba(26,20,16,.55); } .dark .chip-count{ color:#b9a88f; } .dark .rule{ color:#9a8a78; } .dark .prose-sd{ color:#e6dcc9; } .dark .prose-sd h2, .dark .prose-sd h3, .dark .prose-sd strong{ color:#f5e9d3; } .dark .prose-sd blockquote{ color:#ec6a5d; border-left-color:#ec6a5d; } .dark .prose-sd a{ color:#ec6a5d; } .dark .prose-sd .dropcap:first-letter{ color:#ec6a5d; } .dark .prose-sd ul li:before{ color:#cf9a3f; } .dark .step-num{ color:#ec6a5d; } .dark .ingredient-check{ border-color:rgba(245,233,211,.35); } .dark .ingredient-row:hover .ingredient-check{ border-color:#ec6a5d; } .dark .ingredient-row.checked .ingredient-check{ background:#ec6a5d; border-color:#ec6a5d; } .dark .ingredient-row.checked .ingredient-check:after{ color:#1a1410; } .dark .ingredient-row.checked .ingredient-label{ color:#9a8a78; } .dark .frame{ box-shadow:0 1px 0 rgba(0,0,0,.3),0 24px 48px -28px rgba(0,0,0,.65); } .dark .notes-pop{ box-shadow:0 30px 60px -20px rgba(0,0,0,.65),0 8px 18px -6px rgba(0,0,0,.4); } /* ---- Form fields ---- */ .dark input, .dark textarea, .dark select{ background-color:#241c16; color:#f5e9d3; border-color:rgba(245,233,211,.2); } .dark input::placeholder, .dark textarea::placeholder{ color:rgba(245,233,211,.4); } .dark .placeholder-ink\/40::placeholder{ color:rgba(245,233,211,.4); } .dark .placeholder-ink\/40::-moz-placeholder{ color:rgba(245,233,211,.4); } /* transparent inline search input keeps its host's dark bg */ .dark form .bg-transparent{ background-color:transparent; } .dark :where(a,button,input,textarea,select,[tabindex]):focus-visible{ outline-color:#ec6a5d; } /* ---- Logo: cream backing so the wordmark/tagline in the mark stays legible ---- */ .dark .site-logo{ background:#f5e9d3; border-radius:5px; padding:3px 5px; } /* ---- Theme toggle: moon in light, sun in dark (scoped to beat the icon font) ---- */ #theme-toggle .icon-sun{ display:none; } #theme-toggle .icon-moon{ display:inline-block; } html.dark #theme-toggle .icon-sun{ display:inline-block; } html.dark #theme-toggle .icon-moon{ display:none; } /* ========================================================================== Feature bands (formerly permanent .bg-kraft). Now switch with the theme via the .band-lite wrapper: LIGHT mode -> warm light surface + dark text (so the band no longer looks out of place on the light page); DARK mode -> the original kraft look (dark band + cream text, kept readable). Over-image overlays inside .aspect-video always stay cream. ========================================================================== */ .band-lite{ background-color:#f1ebdf; } .band-lite [class*="text-kraft-paper"]{ color:#241c15; } .band-lite .text-ochre, .band-lite .text-ochre-fixed{ color:#9a5b16; } .band-lite .border-ochre{ border-color:rgba(36,28,21,.30); } .band-lite .border-kraft-paper\/40{ border-color:rgba(36,28,21,.25); } .band-lite .hover\:text-kraft-paper:hover{ color:#241c15; } .band-lite .kraft-texture{ display:none; } /* keep play buttons / duration badges legible over their images */ .band-lite .aspect-video [class*="text-kraft-paper"]{ color:#f5e9d3; } .dark .band-lite{ background-color:#1f1814; } .dark .band-lite [class*="text-kraft-paper"]{ color:#f5e9d3; } .dark .band-lite .text-ochre{ color:#b8842c; } .dark .band-lite .text-ochre-fixed{ color:#f3e3c3; } .dark .band-lite .border-ochre{ border-color:#b8842c; } .dark .band-lite .border-kraft-paper\/40{ border-color:rgba(245,233,211,.40); } .dark .band-lite .hover\:text-kraft-paper:hover{ color:#f5e9d3; } .dark .band-lite .kraft-texture{ display:block; }