/* * Dark mode, built from NLC's brand palette: * Fire orange #FF3B00 - accent / CTAs (already the brand's ".secondary" color in light mode) * Scarlet #691414 - dark surfaces (nav, cards, modals, footer) * Cosmic latte #F3EFE7 - text on dark surfaces (already the brand's page-bg in light mode) * Black #000000 - page background * * Everything below lives under html[data-theme="dark"], stamped on by an inline script * in fragment/layout::header (see globalAttributes() in GlobalControllerAdvice for the * User.darkModeEnabled -> darkModeEnabled model attribute driving it). Light mode is completely * untouched - nothing here is read unless that attribute is present. * * A couple of neutral tones that are NOT in the brand palette are used for elevation only * (translucent white-over-black overlays for a second surface layer, and a lightened grey for * helper text) - there's no brand color to draw those from, and solid Scarlet everywhere would * flatten every layer of the UI into a single plane. */ html[data-theme="dark"] { --main-theme-color: #691414; /* Scarlet - .primary bg (was white) */ --main-theme-color-faded: #7a1f1f; /* progress-bar track */ --secondary-theme-color: #ff3b00; /* Fire orange - unchanged, already on-brand */ --tertiary-theme-color: #2a1010; /* dark neutral surface (was light grey) */ --forth-theme-color: #000000; /* Black - page/main background */ --fifth-theme-color: #f3efe7; /* Cosmic latte - secondary-text (was Scarlet, unreadable on black) */ --body-color: rgba(243, 239, 231, 0.85); /* Cosmic latte - base body text */ --primary-text: #f3efe7; /* text on .primary (Scarlet) buttons */ --dm-surface: #691414; --dm-surface-2: rgba(255, 255, 255, 0.06); --dm-border: rgba(243, 239, 231, 0.14); --dm-text: #f3efe7; --dm-accent: #ff3b00; } html[data-theme="dark"] body { background: var(--forth-theme-color); } /* Plain inline links only - explicitly NOT .btn/.btn-flat/.btn-floating, since Materialize's own .btn rule sets color:#fff with the same specificity as a bare "a" selector, and this file loads after materialize.min.css, so an unscoped "a{color:...}" here was winning the tiebreak and turning every button's text/icon (Cancel, the trash-can delete icon, etc.) the accent color instead of leaving Materialize's white alone. */ html[data-theme="dark"] a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-floating):not(.btn-flat) { color: var(--dm-accent); } html[data-theme="dark"] .btn-flat { color: var(--dm-text) !important; } html[data-theme="dark"] .secondary-text { color: var(--fifth-theme-color) !important; } html[data-theme="dark"] .grey-text { color: #bdbdbd !important; } /* ===================== Nav / footer ===================== */ html[data-theme="dark"] nav, html[data-theme="dark"] nav .sidenav { background-color: var(--dm-surface) !important; } html[data-theme="dark"] nav .nav-wrapper li a, html[data-theme="dark"] .sidenav li a { color: var(--dm-text) !important; } html[data-theme="dark"] nav .nav-wrapper li ul a { color: var(--dm-accent) !important; } html[data-theme="dark"] .a { color: var(--dm-text) !important; } html[data-theme="dark"] footer { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } /* ===================== Cards / collections / panels ===================== */ html[data-theme="dark"] .card, html[data-theme="dark"] .card-panel, html[data-theme="dark"] .collection, html[data-theme="dark"] .collection .collection-item { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } /* Explicit Materialize color utility panels (e.g. "green lighten-4" success/error banners) keep their own background - they're already a deliberate colored callout, not page chrome. */ html[data-theme="dark"] .card-panel[class*="lighten"] { color: #212121; } /* ===================== Modals ===================== */ html[data-theme="dark"] .modal { background-color: var(--dm-surface) !important; color: var(--dm-text); } html[data-theme="dark"] .modal .modal-footer { background-color: var(--dm-surface); } /* ===================== Dropdowns / selects ===================== */ html[data-theme="dark"] .dropdown-content, html[data-theme="dark"] .select-dropdown.dropdown-content { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .dropdown-content li > a, html[data-theme="dark"] .dropdown-content li > span { color: var(--dm-text) !important; } html[data-theme="dark"] .dropdown-content li.selected, html[data-theme="dark"] .dropdown-content li:hover { background-color: rgba(255, 59, 0, 0.2); } /* ===================== Reservation grid row badges ===================== Materialize's own pastel "lighten-N" utility classes (grey/blue/green/amber/deep-orange/ yellow) are used directly in reservation/overview.html for past days, "this is your reservation", waitlist, guest, event and closure rows. They're all light pastels meant to sit on a white card - on a black page they read as washed-out grey squares, and the blue "your reservation" tint clashes with the brand palette entirely. Re-tone each to a dark, still-distinguishable equivalent; "your reservation" moves off blue onto the brand accent. */ html[data-theme="dark"] .grey.lighten-2, html[data-theme="dark"] .grey.lighten-3 { /* A neutral grey outside the brand palette on purpose - Fire orange/Scarlet are emphasis colors and either blend into black or clash, Cosmic latte at full brightness is a jarring near-white hole in an otherwise all-dark page. A plain achromatic mid-grey reads instantly as "inactive" precisely because it's the only non-warm tone on the page, without competing with any brand color's meaning. */ background-color: #4a4a4a !important; color: rgba(243, 239, 231, 0.85) !important; } html[data-theme="dark"] .grey.lighten-2 .material-icons, html[data-theme="dark"] .grey.lighten-3 .material-icons { color: rgba(243, 239, 231, 0.75) !important; } /* A past reservation row also carries its role class (blue.lighten-4 "your reservation", deep-orange.lighten-3 guest, green.lighten-4 waitlist) appended alongside grey.lighten-2 - both single-class rules below have equal specificity, so whichever is declared later in this file was winning regardless of which day it's on, which is why past rows were still showing the bright role tint instead of reading as uniformly muted. These combined selectors have higher specificity than either alone, so "past" always wins once a day has gone by. */ html[data-theme="dark"] .grey.lighten-2.blue.lighten-4, html[data-theme="dark"] .grey.lighten-2.deep-orange.lighten-3, html[data-theme="dark"] .grey.lighten-2.green.lighten-4, html[data-theme="dark"] .grey.lighten-3.blue.lighten-4, html[data-theme="dark"] .grey.lighten-3.deep-orange.lighten-3, html[data-theme="dark"] .grey.lighten-3.green.lighten-4 { background-color: #4a4a4a !important; color: rgba(243, 239, 231, 0.85) !important; } html[data-theme="dark"] .blue.lighten-4 { background-color: rgba(255, 59, 0, 0.22) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .deep-orange.lighten-3 { background-color: #4a2313 !important; color: var(--dm-text) !important; } html[data-theme="dark"] .green.lighten-4 { background-color: #1c3a1c !important; color: var(--dm-text) !important; } html[data-theme="dark"] .amber.lighten-4, html[data-theme="dark"] .yellow.lighten-2 { background-color: #4a3c12 !important; color: var(--dm-text) !important; } /* ===================== Tables ===================== */ html[data-theme="dark"] table.striped > tbody > tr:nth-child(odd), html[data-theme="dark"] table.highlight > tbody > tr:hover { background-color: var(--dm-surface-2); } html[data-theme="dark"] table td, html[data-theme="dark"] table th { color: var(--dm-text); border-color: var(--dm-border) !important; } /* ===================== Forms / inputs ===================== */ html[data-theme="dark"] label { color: var(--dm-text); } html[data-theme="dark"] input:not([type]), html[data-theme="dark"] input[type="text"]:not(.browser-default), html[data-theme="dark"] input[type="password"]:not(.browser-default), html[data-theme="dark"] input[type="email"]:not(.browser-default), html[data-theme="dark"] input[type="date"]:not(.browser-default), html[data-theme="dark"] input[type="number"]:not(.browser-default), html[data-theme="dark"] input[type="search"]:not(.browser-default), html[data-theme="dark"] textarea.materialize-textarea, html[data-theme="dark"] select { color: var(--dm-text); border-bottom: 1px solid var(--dm-border); background-color: transparent; } html[data-theme="dark"] [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::before, html[data-theme="dark"] [type="checkbox"].filled-in:not(:checked) + span:not(.lever)::after { border-color: var(--dm-border); } /* ===================== Datepicker ===================== */ html[data-theme="dark"] .datepicker-modal, html[data-theme="dark"] .datepicker-container, html[data-theme="dark"] .datepicker-calendar-container { background-color: var(--dm-surface) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .datepicker-calendar-container input { color: var(--dm-text) !important; } html[data-theme="dark"] .datepicker-table td.is-today { color: var(--dm-accent) !important; } html[data-theme="dark"] .datepicker-table td.is-selected { background-color: var(--dm-accent) !important; } /* ===================== Chat widget (reservation/overview.html) ===================== The widget ships its own inline