/* ============================================================================ DARK THEME Loaded after app.css and refinements.css. Everything is scoped to [data-theme="dark"] on , so the light theme is byte-for-byte unchanged when the attribute is absent or set to "light". Palette: near-black blue surfaces, white text, gold actions. Note on --de-navy: refinements.css uses it as a TEXT colour 66 times and as a background only 9 times, so in dark it flips to the light ink and the handful of "navy band" backgrounds are re-pointed at --de-band below. ========================================================================== */ :root { color-scheme: light; /* Surface family — light values match what the components already used, so naming them here changes nothing until the dark block overrides them. */ --de-surface: #ffffff; --de-surface-2: #fbfcfe; --de-surface-3: #eef0f5; --de-surface-4: #eceff5; --de-band: rgb(46, 53, 81); --de-gold-ink: #241d0b; /* text on a gold button */ --de-shadow-strength: .35; } [data-theme="dark"] { color-scheme: dark; /* Page + surfaces */ --de-bg: #070b16; /* very dark blue, close to black */ --de-surface: #0f1526; --de-surface-2: #141b2f; --de-surface-3: #1e2743; --de-surface-4: #202844; /* --de-band deliberately NOT overridden: the header, the footer and the mobile menu keep the brand navy in dark mode, so the site chrome reads the same in both themes. */ /* Ink — --de-navy carries most body/heading text, so it becomes light */ --de-navy: #eaeefb; --de-navy-2: #d5dbf0; --de-ink: #f2f5fd; --de-ink-soft: #9ea7c2; /* Lines + gold */ --de-line: rgba(255, 255, 255, .10); --de-gold: #d4af61; /* accents on dark: 9.0:1, very legible */ --de-gold-soft: rgba(212, 175, 97, .30); /* Filled actions carry WHITE text as specified. White cannot reach WCAG AA on a bright gold, so the button fill is a deeper gold than the accent gold: 3.25:1 instead of 2.07:1. Swapping --de-gold-ink to #241d0b (the light theme's ink) would give 6.9:1 if contrast ever outranks the look. */ --de-gold-btn: #b8862b; --de-gold-btn-hover: #c9962f; --de-gold-ink: #ffffff; --de-card-shadow: 0 6px 22px -12px rgba(0, 0, 0, .75); --de-card-shadow-hover: 0 16px 34px -14px rgba(0, 0, 0, .85); } /* --------------------------------------------------------------------------- 1. Page shell ------------------------------------------------------------------------ */ /* The root has to be painted too: when the page is shorter than the viewport the canvas comes from , not , so a light strip showed under the content. */ html[data-theme="dark"], [data-theme="dark"] body, [data-theme="dark"] .wrapper, [data-theme="dark"] .content-wrapper { background-color: var(--de-bg); color: var(--de-ink); } [data-theme="dark"] .headerbg { background-color: var(--de-band) !important; } [data-theme="dark"] .de-footer { background: var(--de-band); color: var(--de-ink-soft); } [data-theme="dark"] .footer a { color: var(--de-ink); } /* Content links only. Component anchors (.de-card__name, .se-tab, .login-link…) already colour themselves from the tokens, and a blanket `a` rule outranked them — every card title came out gold. */ [data-theme="dark"] :where(a:not([class])) { color: var(--de-gold); } [data-theme="dark"] :where(a:not([class])):hover { color: #e6c684; } [data-theme="dark"] .de-prose a, [data-theme="dark"] .cms-page a { color: var(--de-gold); } [data-theme="dark"] .de-card__name { color: var(--de-ink); } [data-theme="dark"] .de-card__name:hover { color: var(--de-gold); } [data-theme="dark"] hr { border-top-color: var(--de-line); } /* app.css forces headings to navy with !important */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .h1, [data-theme="dark"] .h2, [data-theme="dark"] .h3, [data-theme="dark"] .h4, [data-theme="dark"] .h5, [data-theme="dark"] .h6 { color: var(--de-ink) !important; } /* On the public front, headings are gold rather than white. The dashboard keeps the light ink — it is dense, form-heavy UI where gold headings would compete with the gold call-to-actions. `html.has-sidebar` is added by layouts/sidebar.blade.php, which every backoffice view includes; the script runs before , so this resolves before the first paint and never flashes. */ html[data-theme="dark"]:not(.has-sidebar) h1, html[data-theme="dark"]:not(.has-sidebar) h2, html[data-theme="dark"]:not(.has-sidebar) h3, html[data-theme="dark"]:not(.has-sidebar) h4, html[data-theme="dark"]:not(.has-sidebar) h5, html[data-theme="dark"]:not(.has-sidebar) h6, html[data-theme="dark"]:not(.has-sidebar) .h1, html[data-theme="dark"]:not(.has-sidebar) .h2, html[data-theme="dark"]:not(.has-sidebar) .h3, html[data-theme="dark"]:not(.has-sidebar) .h4, html[data-theme="dark"]:not(.has-sidebar) .h5, html[data-theme="dark"]:not(.has-sidebar) .h6, html[data-theme="dark"]:not(.has-sidebar) .se-hero .se-hero__title, html[data-theme="dark"]:not(.has-sidebar) .login-visual-inner h2 { color: var(--de-gold) !important; /* #d4af61 — 9.0:1 on the dark page */ } [data-theme="dark"] .text-muted { color: var(--de-ink-soft) !important; } [data-theme="dark"] .text-dark { color: var(--de-ink) !important; } [data-theme="dark"] .bg-white { background-color: var(--de-surface) !important; } [data-theme="dark"] .bg-light { background-color: var(--de-surface-2) !important; } /* --------------------------------------------------------------------------- 2. Bootstrap components ------------------------------------------------------------------------ */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .list-group-item, [data-theme="dark"] .popover, [data-theme="dark"] .toast { background-color: var(--de-surface); border-color: var(--de-line); color: var(--de-ink); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { background-color: var(--de-surface-2); border-color: var(--de-line); color: var(--de-ink); } [data-theme="dark"] .dropdown-item { color: var(--de-ink); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--de-surface-3); color: var(--de-ink); } [data-theme="dark"] .dropdown-divider { border-top-color: var(--de-line); } [data-theme="dark"] .close { color: var(--de-ink); text-shadow: none; opacity: .7; } [data-theme="dark"] .close:hover { color: var(--de-ink); opacity: 1; } [data-theme="dark"] .modal-backdrop.show { opacity: .72; } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .custom-select, [data-theme="dark"] .custom-file-label, [data-theme="dark"] textarea.form-control { background-color: var(--de-surface-2); border-color: var(--de-line); color: var(--de-ink); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .custom-select:focus { background-color: var(--de-surface-2); border-color: var(--de-gold-soft); color: var(--de-ink); box-shadow: 0 0 0 .2rem var(--de-gold-soft); } [data-theme="dark"] .form-control::placeholder { color: #6f7794; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: #101627; color: var(--de-ink-soft); } [data-theme="dark"] .input-group-text { background-color: var(--de-surface-3); border-color: var(--de-line); color: var(--de-ink-soft); } [data-theme="dark"] .custom-control-label { color: var(--de-ink); } [data-theme="dark"] .custom-control-label::before { background-color: var(--de-surface-3); border-color: rgba(255, 255, 255, .22); } [data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--de-gold); border-color: var(--de-gold); } [data-theme="dark"] .form-check-input { background-color: var(--de-surface-3); } [data-theme="dark"] .form-text { color: var(--de-ink-soft) !important; } [data-theme="dark"] select option { background-color: var(--de-surface-2); color: var(--de-ink); } /* Tables */ [data-theme="dark"] .table { color: var(--de-ink); } [data-theme="dark"] .table thead th, [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: var(--de-line); } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--de-surface-2); } [data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--de-surface-3); color: var(--de-ink); } /* Buttons — gold actions carry white text in dark mode */ [data-theme="dark"] .btn-gold, [data-theme="dark"] .btn-primary, [data-theme="dark"] a.nav-link.btn-gold { background-color: var(--de-gold-btn); border-color: var(--de-gold-btn); color: var(--de-gold-ink) !important; /* .navbar-dark .nav-link ships a 50% white */ } [data-theme="dark"] .btn-gold:hover, [data-theme="dark"] .btn-gold:focus, [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:focus, [data-theme="dark"] a.nav-link.btn-gold:hover { background-color: var(--de-gold-btn-hover); border-color: var(--de-gold-btn-hover); color: var(--de-gold-ink) !important; } [data-theme="dark"] .btn-outline-gold, [data-theme="dark"] .btn-outline-primary { color: var(--de-gold); border-color: var(--de-gold); background: transparent; } [data-theme="dark"] .btn-outline-gold:hover, [data-theme="dark"] .btn-outline-primary:hover { background: var(--de-gold-btn); border-color: var(--de-gold-btn); color: var(--de-gold-ink); } [data-theme="dark"] .btn-outline-secondary { color: var(--de-ink-soft); border-color: var(--de-line); } [data-theme="dark"] .btn-outline-secondary:hover { background: var(--de-surface-3); color: var(--de-ink); border-color: var(--de-line); } [data-theme="dark"] .btn-navy { background: var(--de-surface-3); border-color: var(--de-line); color: var(--de-ink); } [data-theme="dark"] .btn-link { color: var(--de-gold); } /* Alerts — tinted, not washed out */ [data-theme="dark"] .alert-success { background: rgba(30,122,67,.16); border-color: rgba(30,122,67,.45); color: #8fe0b0; } [data-theme="dark"] .alert-danger { background: rgba(220,53,69,.16); border-color: rgba(220,53,69,.45); color: #f2a2a8; } [data-theme="dark"] .alert-warning { background: rgba(224,168,0,.16); border-color: rgba(224,168,0,.45); color: #f0cf7e; } [data-theme="dark"] .alert-info { background: rgba(60,130,200,.16); border-color: rgba(60,130,200,.45); color: #9fc7ee; } [data-theme="dark"] .badge-light { background: var(--de-surface-3); color: var(--de-ink); } [data-theme="dark"] .badge-secondary { background: var(--de-surface-3); color: var(--de-ink-soft); } /* Nav / tabs / pagination */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--de-line); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--de-ink-soft); } [data-theme="dark"] .nav-tabs .nav-link.active { background: var(--de-surface); border-color: var(--de-line) var(--de-line) var(--de-surface); color: var(--de-ink); } [data-theme="dark"] .page-link { background: var(--de-surface); border-color: var(--de-line); color: var(--de-ink); } [data-theme="dark"] .page-link:hover { background: var(--de-surface-3); color: var(--de-ink); } [data-theme="dark"] .page-item.active .page-link { background: var(--de-gold-btn); border-color: var(--de-gold-btn); color: var(--de-gold-ink); } [data-theme="dark"] .page-item.disabled .page-link { background: var(--de-surface-2); color: #5b6382; } /* --------------------------------------------------------------------------- 3. Dashboard shell (AdminLTE) + vendor widgets ------------------------------------------------------------------------ */ /* The sidebar is a white panel in light mode and carries .bg-light, whose !important rule above already paints it — so it stays a panel, not a navy band. Setting --de-band here would be a dead rule. */ [data-theme="dark"] .main-sidebar .nav-sidebar .nav-link { color: var(--de-ink-soft) !important; } [data-theme="dark"] .main-sidebar .nav-sidebar .nav-link:hover { color: var(--de-ink) !important; } [data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active { background: var(--de-surface-3); color: var(--de-ink) !important; } [data-theme="dark"] .dataTables_wrapper, [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_length, [data-theme="dark"] .dataTables_wrapper .dataTables_filter { color: var(--de-ink-soft); } [data-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: var(--de-surface-2); border: 1px solid var(--de-line); color: var(--de-ink); } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { background: var(--de-surface) !important; border-color: var(--de-line) !important; color: var(--de-ink) !important; } [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, [data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--de-gold-btn) !important; border-color: var(--de-gold-btn) !important; color: var(--de-gold-ink) !important; } [data-theme="dark"] .dataTable tbody td { border-color: var(--de-line) !important; } [data-theme="dark"] .note-editor.note-frame, [data-theme="dark"] .note-editor .note-toolbar, [data-theme="dark"] .note-editor .note-editing-area .note-editable, [data-theme="dark"] .note-editor .note-statusbar { background: var(--de-surface-2) !important; border-color: var(--de-line) !important; color: var(--de-ink) !important; } [data-theme="dark"] .note-btn { background: var(--de-surface-3) !important; border-color: var(--de-line) !important; color: var(--de-ink) !important; } [data-theme="dark"] .swal2-popup { background: var(--de-surface) !important; color: var(--de-ink) !important; } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--de-ink) !important; } /* --------------------------------------------------------------------------- 4. Site components (classes defined in refinements.css) Grouped by the light surface each one used. ------------------------------------------------------------------------ */ /* ...were #fff */ [data-theme="dark"] .border-rounded, [data-theme="dark"] .swiper-button-prev, [data-theme="dark"] .swiper-button-next, [data-theme="dark"] .de-card, [data-theme="dark"] .de-hero__search, [data-theme="dark"] .de-trust, [data-theme="dark"] .de-panel, [data-theme="dark"] .card .card-header, [data-theme="dark"] .pf-section, [data-theme="dark"] .pf-name-sample, [data-theme="dark"] .pf-drop:hover, [data-theme="dark"] .fx-cat, [data-theme="dark"] .rt-section, [data-theme="dark"] .rt-day.is-open, [data-theme="dark"] .rt-block .rt-section, [data-theme="dark"] .shop-block, [data-theme="dark"] .shop-plan, [data-theme="dark"] .reg-type, [data-theme="dark"] .login-panel, [data-theme="dark"] .row.login-split > .login-panel, [data-theme="dark"] .cart-line, [data-theme="dark"] .ck-block, [data-theme="dark"] .ck-method, [data-theme="dark"] .bt-card, [data-theme="dark"] .se-searchbar, [data-theme="dark"] .se-select, [data-theme="dark"] .se-chip, [data-theme="dark"] .se-empty { background: var(--de-surface); color: var(--de-ink); } /* ...were #fbfcfe */ [data-theme="dark"] table.table-datatables.table-striped tbody tr:nth-of-type(odd), [data-theme="dark"] .pf-nameopt, [data-theme="dark"] .pf-drop, [data-theme="dark"] .fx-cat-head, [data-theme="dark"] .rt-block, [data-theme="dark"] .sub-card, [data-theme="dark"] .shop-perks, [data-theme="dark"] .shop-slots, [data-theme="dark"] .login-form .input-group-text, [data-theme="dark"] .cart-line-icon, [data-theme="dark"] .cart-summary, [data-theme="dark"] .bank-row, [data-theme="dark"] .bt-account, [data-theme="dark"] .pw-sent { background: var(--de-surface-2); } /* ...were #eef0f5 / #eceff5 / #eef0f6 — tracks, pills and wells */ [data-theme="dark"] .progress, [data-theme="dark"] .se-tab__count, [data-theme="dark"] .pw-steps li > span, [data-theme="dark"] .pw-meter__bar, [data-theme="dark"] .pf-drop-progress, [data-theme="dark"] .shop-slots-bar, [data-theme="dark"] .ck-step .ck-num, [data-theme="dark"] .pf-avatar { background: var(--de-surface-3); } /* ...were near-white wells */ [data-theme="dark"] .input-group-text, [data-theme="dark"] .sa-live, [data-theme="dark"] .rt-week-head, [data-theme="dark"] .rt-day, [data-theme="dark"] .bt-copy code { background: var(--de-surface-3); color: var(--de-ink); } /* ...were gold tints (selected / highlighted states) */ [data-theme="dark"] .sa-policy.is-on, [data-theme="dark"] .reg-type.is-selected, [data-theme="dark"] .ck-method.is-selected, [data-theme="dark"] .bt-instructions, [data-theme="dark"] .rt-block.is-default, [data-theme="dark"] .pf-drop.is-dragover, [data-theme="dark"] .sub-card.is-expiring { background: rgba(212, 175, 97, .10); } /* ...were success tints */ [data-theme="dark"] .sa-live.is-live, [data-theme="dark"] .sub-card.is-active { background: rgba(30, 122, 67, .16); } [data-theme="dark"] .pw-steps .is-done > span { background: rgba(30, 122, 67, .28); color: #8fe0b0; } /* ...were danger tints */ [data-theme="dark"] .fx-cat.is-not-offered, [data-theme="dark"] .shop-slots.is-full { background: rgba(220, 53, 69, .12); } [data-theme="dark"] .fx-cat.is-not-offered .fx-cat-head { background: rgba(220, 53, 69, .18); } /* Borders that were hardcoded light greys */ [data-theme="dark"] .de-card, [data-theme="dark"] .border-rounded, [data-theme="dark"] .shop-plan, [data-theme="dark"] .reg-type, [data-theme="dark"] .ck-block, [data-theme="dark"] .ck-method, [data-theme="dark"] .bt-card, [data-theme="dark"] .se-empty, [data-theme="dark"] .se-chip, [data-theme="dark"] .se-select, [data-theme="dark"] .sub-card, [data-theme="dark"] .cart-line, [data-theme="dark"] .bank-row { border-color: var(--de-line) !important; } /* Search page: the hero is already a dark band, just deepen it */ [data-theme="dark"] .se-hero { background: linear-gradient(135deg, #0c1122 0%, #070b16 100%); } [data-theme="dark"] .se-searchbar input[type=text] { color: var(--de-ink); } [data-theme="dark"] .se-searchbar input[type=text]::placeholder { color: #6f7794; } [data-theme="dark"] .se-searchbar button { background: var(--de-gold-btn); color: var(--de-gold-ink); } [data-theme="dark"] .se-searchbar button:hover { background: var(--de-gold-btn-hover); } [data-theme="dark"] .se-tabs { border-bottom-color: var(--de-line); } [data-theme="dark"] .se-tab.is-active .se-tab__count { background: var(--de-gold-btn); color: var(--de-gold-ink); } /* Every gold fill that carries WHITE text uses the deeper button gold, so the label stays legible instead of sitting at ~2:1 on the bright accent gold. */ [data-theme="dark"] .shop-ribbon, [data-theme="dark"] .media-tile .tile-cover, [data-theme="dark"] .reg-type-check, [data-theme="dark"] .ck-method-check, [data-theme="dark"] .ck-step.is-current .ck-num, [data-theme="dark"] .pw-steps .is-current > span { background: var(--de-gold-btn); color: var(--de-gold-ink); } /* --de-navy flips to the light ink in dark mode, so anything that used it as a FILL with white text turned white-on-near-white. These are the remaining navy-fill cases outside the gold group. */ [data-theme="dark"] ul.citiesOnTour .nav-item.active .nav-link { background: var(--de-gold-btn); border-color: var(--de-gold-btn); color: var(--de-gold-ink); } [data-theme="dark"] .fx-badge { background: var(--de-surface-3); color: var(--de-ink); } [data-theme="dark"] .swiper-pagination-bullet { background: var(--de-ink); } /* Reviews: the star track, tab pills and the picker use fixed light greys */ /* The empty-star track still has to read as "out of five", so it needs real contrast against the card, not just a hint of colour: 3.2:1. */ [data-theme="dark"] .rv-stars__bg, [data-theme="dark"] .rv-pick label { color: #5f6a8c; } [data-theme="dark"] .rv-pick.is-set label.is-on, [data-theme="dark"] .rv-pick label.is-hot { color: var(--de-gold); } [data-theme="dark"] .rv-tab__count { background: var(--de-surface-3); color: var(--de-ink-soft); } [data-theme="dark"] .rv-tab.is-active .rv-tab__count { background: var(--de-gold-btn); color: var(--de-gold-ink); } [data-theme="dark"] .rv-tabs { border-bottom-color: var(--de-line); } [data-theme="dark"] .rv-item, [data-theme="dark"] .rv-row { background: var(--de-surface); border-color: var(--de-line); } [data-theme="dark"] .rv-item__reply { background: rgba(212, 175, 97, .10); } [data-theme="dark"] .rv-flag { background: rgba(220, 53, 69, .18); color: #f2a2a8; } /* Favourite heart+count pill */ [data-theme="dark"] .fav__btn { background: var(--de-surface); border-color: var(--de-line); } [data-theme="dark"] .fav__count { color: var(--de-ink); } [data-theme="dark"] button.fav__btn:hover { border-color: #d98a8a; } /* SEO language pills */ [data-theme="dark"] .seo-lang-tabs .nav-link { background: var(--de-surface-2); border-color: var(--de-line); color: var(--de-ink-soft); } [data-theme="dark"] .seo-lang-tabs .nav-link.active { background: var(--de-surface-3); border-color: var(--de-line); color: var(--de-ink); } /* Messages — inbox + chat thread */ [data-theme="dark"] .msg-inbox, [data-theme="dark"] .chat { background: var(--de-surface); border-color: var(--de-line); } [data-theme="dark"] .msg-row { border-color: var(--de-line); } [data-theme="dark"] .msg-row:hover { background: var(--de-surface-2); } [data-theme="dark"] .msg-row.is-unread { background: rgba(212,175,97,.08); } [data-theme="dark"] .msg-row__name, [data-theme="dark"] .chat__name { color: var(--de-ink); } [data-theme="dark"] .msg-row.is-unread .msg-row__preview { color: var(--de-ink); } [data-theme="dark"] .msg-row__badge { background: var(--de-gold-btn); color: var(--de-gold-ink); } [data-theme="dark"] .chat__head { background: var(--de-surface-2); border-color: var(--de-line); } [data-theme="dark"] .chat__composer { background: var(--de-surface); border-color: var(--de-line); } [data-theme="dark"] .chat__input { background: var(--de-surface-2); border-color: var(--de-line); color: var(--de-ink); } [data-theme="dark"] .chat__bubble { background: var(--de-surface-3); color: var(--de-ink); } [data-theme="dark"] .chat__msg.is-mine .chat__bubble { background: var(--de-gold-btn); color: #fff; } [data-theme="dark"] .chat__day span { background: rgba(255,255,255,.08); color: var(--de-ink-soft); } [data-theme="dark"] .chat__send { background: var(--de-gold-btn); color: #fff; } [data-theme="dark"] .chat__send:hover { background: var(--de-gold-btn-hover); } /* Auth split screens */ [data-theme="dark"] .login-visual::after { background: rgba(7, 11, 22, .62); } [data-theme="dark"] .login-divider::before, [data-theme="dark"] .login-divider::after { background: var(--de-line); } [data-theme="dark"] .pw-sent { border-color: var(--de-line); } /* Badges keep their meaning: premium was a navy chip, which now needs contrast */ [data-theme="dark"] .de-badge--premium { background: var(--de-surface-3); color: var(--de-ink); } /* Media manager + adult gate — these live in per-view