/* ================================================================== Niagara Transit — dark mode, phase 1+2 (opt-in) v1.2.3 ------------------------------------------------------------------ Every rule is scoped to html[data-nt-theme="dark"], set before first paint by the head script in inc/dark-mode.php. Light mode is untouched. Tokens: css/color-tokens.css (--ntc-*). Toggle: js/theme-toggle.js. Proposal + mockups: Web Page Drafts/dark-mode/ (repo, not deployed). Layer 2 Salient chrome (header, menus, forms; footer left as is) Layer 3 Page-content remap. WPBakery prints the 11 palette colours as inline styles; case-insensitive attribute selectors + !important remap them, so no page content needs editing. Layer 4 Components seen on the homepage, Customer Service and route pages. Phase 2 moves these into each component's own file. ================================================================== */ /* ---------- Layer 2: Salient chrome ---------- */ html[data-nt-theme="dark"], html[data-nt-theme="dark"] body, html[data-nt-theme="dark"] #ajax-content-wrap, html[data-nt-theme="dark"] .container-wrap, html[data-nt-theme="dark"] .main-content, html[data-nt-theme="dark"] #header-space { background-color: var(--ntc-bg) !important; color: var(--ntc-text); } /* Sitewide text. Never inside the light islands (maps, stop page): see the "Light islands" section; those widgets keep their own light-mode colours. */ html[data-nt-theme="dark"] body, html[data-nt-theme="dark"] :is(p, li, td, th, dd, dt, label, .wpb_text_column):not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *) { color: var(--ntc-text); } html[data-nt-theme="dark"] :is(h1, h2, h3, h4, h5, h6):not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *) { color: var(--ntc-heading); } html[data-nt-theme="dark"] .container-wrap a:not(.nectar-button):not(.link_text):not([class*="pill"]):not([class*="badge"]):not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *) { color: var(--ntc-link); } html[data-nt-theme="dark"] :focus-visible { outline-color: var(--ntc-focus) !important; } /* Header — same layout, same logo position ("original header always"). Only the paint changes. */ html[data-nt-theme="dark"] #header-outer, html[data-nt-theme="dark"] #header-outer #top, html[data-nt-theme="dark"] #header-outer.transparent, html[data-nt-theme="dark"] #search-outer:not(.nt-sp) { background-color: var(--ntc-bg) !important; box-shadow: 0 1px 0 var(--ntc-border) !important; } /* One line under the header, not two: #top sits inside #header-outer and drew its own (owner 2026-11-07, phone screenshots). */ html[data-nt-theme="dark"] #header-outer #top { box-shadow: none !important; } html[data-nt-theme="dark"] #header-outer #top nav > ul > li > a, html[data-nt-theme="dark"] #header-outer #top nav > ul > li > a .menu-title-text, html[data-nt-theme="dark"] #header-outer .nectar-menu-label, html[data-nt-theme="dark"] #top .span_9 > .slide-out-widget-area-toggle a, html[data-nt-theme="dark"] #header-outer #top .icon-salient-search, html[data-nt-theme="dark"] #header-outer .nectar-header-text-content { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] body #header-outer:not(.transparent) #top .slide-out-widget-area-toggle a i.label, html[data-nt-theme="dark"] #header-outer .slide-out-widget-area-toggle i.label, html[data-nt-theme="dark"] #search-outer:not(.nt-sp) #search span, html[data-nt-theme="dark"] #search-outer:not(.nt-sp) #search input[type="text"] { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] #search-outer:not(.nt-sp) #search .span_12 span, html[data-nt-theme="dark"] #search-outer:not(.nt-sp) #search-box span { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .nectar-skip-to-content { color: var(--ntc-link) !important; } html[data-nt-theme="dark"] .nectar-skip-to-content:focus { background: var(--ntc-highlight) !important; color: #000014 !important; } html[data-nt-theme="dark"] #header-outer .lines, html[data-nt-theme="dark"] #header-outer .lines:before, html[data-nt-theme="dark"] #header-outer .lines:after, html[data-nt-theme="dark"] #header-outer .lines-button:after { background-color: var(--ntc-text) !important; } /* Current-page pill in the top nav + search icon */ html[data-nt-theme="dark"] #header-outer #top nav > ul > li[class*="current"] > a, html[data-nt-theme="dark"] #header-outer #top nav > ul > li > a:hover { background-color: var(--ntc-surface-2) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] #header-outer #top nav > ul > li[class*="current"] > a .menu-title-text { color: var(--ntc-text) !important; } /* Salient draws the hover/current pill on a::before (#E2ECEE) */ html[data-nt-theme="dark"] #header-outer #top nav > ul > li > a::before, html[data-nt-theme="dark"] #header-outer #top nav > ul > li > a .menu-title-text::before { background-color: var(--ntc-surface-2) !important; } html[data-nt-theme="dark"] body #header-outer #top nav ul #search-btn a span, html[data-nt-theme="dark"] body #header-outer:not([data-permanent-transparent="1"]) .mobile-search .icon-salient-search { color: var(--ntc-text) !important; } /* Mega-menu / dropdowns */ html[data-nt-theme="dark"] #header-outer nav .sub-menu, html[data-nt-theme="dark"] #header-outer .megamenu > .sub-menu, html[data-nt-theme="dark"] #header-outer nav > ul > .megamenu > ul.sub-menu { background-color: var(--ntc-surface) !important; border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] #header-outer nav .sub-menu a, html[data-nt-theme="dark"] #header-outer nav .sub-menu .menu-title-text { color: var(--ntc-text) !important; } /* Mega-menu columns: Salient's menu settings (uploads/salient/menu-dynamic.css) give image columns #EAF1F2 and link columns #FAFAFA, per menu item ID. Dark: image columns -> tinted surface, link columns -> panel colour. */ html[data-nt-theme="dark"] #header-outer nav > ul > .megamenu.nectar-megamenu-menu-item > .sub-menu > li { background-color: transparent !important; } html[data-nt-theme="dark"] #header-outer nav > ul > .megamenu.nectar-megamenu-menu-item > .sub-menu > li:has(.image-layer) { background-color: var(--ntc-surface-2) !important; } html[data-nt-theme="dark"] body #header-outer #top nav .sf-menu ul li > a .item_desc, html[data-nt-theme="dark"] body #header-outer #top nav .sf-menu ul li > a .menu-item-desc, html[data-nt-theme="dark"] #header-outer nav .sub-menu .item_desc, html[data-nt-theme="dark"] #header-outer nav .sub-menu .menu-item-desc { color: var(--ntc-text-muted) !important; } /* Dropdown hover / focus / current-page highlight. Salient (skin CSS, all !important) paints these #E2ECEE with #042935 text. Dark mode goes the other way: a step LIGHTER than the dark panel, with light text. Selectors carry one more class than Salient's strongest ones so they win. Column headings in the mega menu only change text colour (Salient gives them no fill). */ html[data-nt-theme="dark"] body #header-outer #top nav > ul > li:not(.megamenu) ul li.menu-item > a:is(:hover, :focus), html[data-nt-theme="dark"] body #header-outer #top nav > ul > li:not(.megamenu) ul li.menu-item:is(.sfHover, .current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a, html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul ul li.menu-item > a:is(:hover, :focus), /* v1.2.30: column headings that are links (Niagara Transit Plus, Rider Apps) get the same fill; Salient's dropdown hover rule was painting them #E2ECEE under light text. */ html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul > li.menu-item > a:is(:hover, :focus), html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul ul li.menu-item:is(.sfHover, .current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a { background-color: #263840 !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] body #header-outer #top nav > ul > li ul li.menu-item:is(:hover, .sfHover, .current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a :is(.menu-title-text, .sf-sub-indicator i), html[data-nt-theme="dark"] body #header-outer #top nav > ul > li ul li.menu-item > a:is(:hover, :focus) :is(.menu-title-text, .sf-sub-indicator i), html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul > li.menu-item:is(:hover, .sfHover, .current-menu-item, .current-menu-ancestor) > a, html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul > li.menu-item:is(:hover, .sfHover, .current-menu-item, .current-menu-ancestor) > a .menu-title-text { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] body #header-outer #top nav .sf-menu ul li.menu-item:is(:hover, .sfHover, .current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a :is(.item_desc, .menu-item-desc), html[data-nt-theme="dark"] body #header-outer #top nav .sf-menu ul li.menu-item > a:focus :is(.item_desc, .menu-item-desc) { color: #C3D0D5 !important; } /* Mega-menu CARDS (image cards like System Map / Fares and Passes, news cards): the whole card is one link, so Salient's dropdown hover rule paints the entire card #E2ECEE. Dark: card lifts one step lighter, text stays light. */ html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul > li.menu-item:has(.nectar-ext-menu-item) > a:is(:hover, :focus), html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul > li.menu-item:has(.nectar-ext-menu-item):is(.sfHover, .current-menu-item) > a { background-color: #263840 !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul > li.menu-item:has(.nectar-ext-menu-item) > a :is(.title, .menu-title-text) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul > li.menu-item:has(.nectar-ext-menu-item) > a :is(.menu-item-desc, .item_desc) { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] body #header-outer #top nav > ul > .megamenu > ul > li.menu-item:has(.nectar-ext-menu-item) > a:is(:hover, :focus) :is(.menu-item-desc, .item_desc) { color: #C3D0D5 !important; } /* Full-screen mobile menu (css/mobile-nav.css, .nt-mnav). Overridden here so that file stays untouched. Section buttons are already dark teal + white. */ html[data-nt-theme="dark"] .nt-mnav, html[data-nt-theme="dark"] .nt-mnav__scroll { background: var(--ntc-bg) !important; } html[data-nt-theme="dark"] .nt-mnav__bar { border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nt-mnav__title, html[data-nt-theme="dark"] .nt-mnav__close { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-mnav__leaf:not(.nt-mnav__leaf--alert) { color: var(--ntc-text) !important; border-bottom-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nt-mnav__panel, html[data-nt-theme="dark"] .nt-mnav__footer { background: var(--ntc-surface) !important; border-bottom-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nt-mnav__link, html[data-nt-theme="dark"] .nt-mnav__spill { background: var(--ntc-bg) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-mnav__group, html[data-nt-theme="dark"] .nt-mnav__desc { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .nt-mnav__icon--font, html[data-nt-theme="dark"] .nt-mnav__spill-icon, html[data-nt-theme="dark"] .nt-mnav__spill-icon i { color: var(--ntc-link) !important; } html[data-nt-theme="dark"] .nt-mnav :focus-visible { outline-color: var(--ntc-focus) !important; } html[data-nt-theme="dark"] .nt-mnav__brand img[src*="NT-mark"] { content: url("../img/nt-mark-reverse.svg"); } /* Logo: the mark is #000014 + #0CAB9B; the #000014 half vanishes on dark (1.13:1), so dark mode swaps in a reversed mark. img/nt-mark-reverse.svg is a PLACEHOLDER recolour (#000014 -> white) until the official reverse mark arrives; replace the file, keep the name. */ html[data-nt-theme="dark"] #logo img.default-logo, html[data-nt-theme="dark"] #logo img.mobile-only-logo { content: url("../img/nt-mark-reverse.svg"); } /* Footer (Salient global section hooked to the footer: #042935 -> #00677F gradient band, white wave on top, white text). Owner decision 2026-11-06: it looks as in light mode. Only undo the sitewide text rules above inside it, and blend the wave's front layer into the dark page (below). */ html[data-nt-theme="dark"] .nectar_hook_global_section_footer :is(h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, label, .wpb_text_column, .nectar-responsive-text) { color: inherit; } /* The one exception: the wave. All its layers are the page colour (white in light mode); the back two are see-through (15% / 30%, set by Salient), so they fade from the page into the teal. In dark mode every layer takes the dark page colour, so the same fade runs from the dark page into the teal. */ html[data-nt-theme="dark"] .nectar_hook_global_section_footer svg.nectar-shape-divider, html[data-nt-theme="dark"] .nectar_hook_global_section_footer svg.nectar-shape-divider path { fill: var(--nt-wave-bg, var(--ntc-bg)) !important; } /* A page that ends on a tinted band: the wave takes that band's dark surface (style.css sets --nt-wave-bg for light mode; same selectors here). */ html[data-nt-theme="dark"] #ajax-content-wrap:has(> .container-wrap .main-content > .row > .wpb_row:last-child[style*="--row-bg-color: #F0F0EE" i]) > .nectar_hook_global_section_footer { --nt-wave-bg: var(--ntc-surface); } html[data-nt-theme="dark"] #ajax-content-wrap:has(> .container-wrap .main-content > .row > .wpb_row:last-child[style*="--row-bg-color: #EEF4F9" i]) > .nectar_hook_global_section_footer { --nt-wave-bg: var(--ntc-surface-2); } /* Forms (Forminator, search, autocomplete) */ html[data-nt-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *), html[data-nt-theme="dark"] select:not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *), html[data-nt-theme="dark"] textarea:not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *) { background-color: var(--ntc-bg) !important; color: var(--ntc-text) !important; border-color: var(--ntc-input-border) !important; } html[data-nt-theme="dark"] ::placeholder { color: var(--ntc-text-muted) !important; opacity: 1; } /* ---------- Layer 3: page-content remap (inline WPBakery colours) ---------- */ /* Backgrounds: white rows → page bg; #F0F0EE cards → surface; #EEF4F9 → surface-2 */ html[data-nt-theme="dark"] [style*="background-color: #FFFFFF" i], html[data-nt-theme="dark"] [style*="background-color:#FFFFFF" i], html[data-nt-theme="dark"] [style*="--row-bg-color: #FFFFFF" i] { background-color: var(--ntc-bg) !important; --row-bg-color: var(--ntc-bg) !important; } html[data-nt-theme="dark"] [style*="background-color: #F0F0EE" i], html[data-nt-theme="dark"] [style*="background-color:#F0F0EE" i], html[data-nt-theme="dark"] [style*="--row-bg-color: #F0F0EE" i] { background-color: var(--ntc-surface) !important; --row-bg-color: var(--ntc-surface) !important; } html[data-nt-theme="dark"] [style*="background-color: #EEF4F9" i], html[data-nt-theme="dark"] [style*="background-color:#EEF4F9" i], html[data-nt-theme="dark"] [style*="--row-bg-color: #EEF4F9" i] { background-color: var(--ntc-surface-2) !important; --row-bg-color: var(--ntc-surface-2) !important; } /* (Salient itself paints .row-bg from --row-bg-color. Don't add a rule here: custom properties inherit, so it also filled every NESTED row and hid the footer's gradient and wave; removed in v1.0.6.) */ /* Deep bands (#042935 / #07495F used as backgrounds) keep their colour — they are already dark and white text on them passes (12.8:1 / 9.9:1). */ /* Text colours set per element: #000014 → text, #07495F/#00677F → heading teal. White text stays white (it only ever sits on the deep bands or buttons). */ html[data-nt-theme="dark"] [style*="color: #000014" i]:not([style*="background-color: #000014" i]) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] [style*="color: #07495F" i]:not([style*="background-color: #07495F" i]), html[data-nt-theme="dark"] [style*="color: #00677F" i]:not([style*="background-color: #00677F" i]) { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] [style*="color: #000014" i] *, html[data-nt-theme="dark"] [style*="color: #07495F" i] h1, html[data-nt-theme="dark"] [style*="color: #07495F" i] h2, html[data-nt-theme="dark"] [style*="color: #07495F" i] h3, html[data-nt-theme="dark"] [style*="color: #07495F" i] h4 { color: inherit; } /* Salient's "light text" rows (dark bands) — keep headings white there */ html[data-nt-theme="dark"] .row_col_wrap_12.light h1, html[data-nt-theme="dark"] .light h2, html[data-nt-theme="dark"] .light h3, html[data-nt-theme="dark"] .light h4, html[data-nt-theme="dark"] .light p { color: #ffffff; } /* Buttons. Salient writes --nectar-button-color / --nectar-text-color inline. Brand-filled (#07495F) buttons become light-teal fill + ink text (12.1:1), so they stay visible against the dark page (WCAG 1.4.11). White "ghost" buttons (white fill, teal text) become outline buttons. */ html[data-nt-theme="dark"] [style*="--nectar-button-color: #07495F" i], html[data-nt-theme="dark"] [style*="--nectar-button-color: #00677F" i] { --nectar-button-color: var(--ntc-btn-bg) !important; --nectar-text-color: var(--ntc-btn-text) !important; --nectar-button-color-hover: #BFE6EE !important; } html[data-nt-theme="dark"] [style*="--nectar-button-color: #07495F" i] .nectar-button, html[data-nt-theme="dark"] [style*="--nectar-button-color: #00677F" i] .nectar-button { color: var(--ntc-btn-text) !important; } html[data-nt-theme="dark"] [style*="--nectar-button-color: #FFFFFF" i] { --nectar-button-color: transparent !important; --nectar-button-color-hover: var(--ntc-surface) !important; --nectar-text-color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] [style*="--nectar-button-color: #FFFFFF" i] .nectar-button { box-shadow: inset 0 0 0 2px var(--ntc-heading) !important; } html[data-nt-theme="dark"] a.nectar-button[style*="background-color: #07495F" i], html[data-nt-theme="dark"] a.nectar-button[style*="background-color:#07495F" i] { background-color: var(--ntc-btn-bg) !important; color: var(--ntc-btn-text) !important; } /* Salient "Call to action" buttons (nectar-cta): colour sits inline on .link_wrap as background-color, plus --nectar-* vars on the wrapper. */ html[data-nt-theme="dark"] .nectar-cta[style*="--nectar-button-color: #07495F" i] .link_wrap, html[data-nt-theme="dark"] .nectar-cta[style*="--nectar-button-color: #00677F" i] .link_wrap { background-color: var(--ntc-btn-bg) !important; } html[data-nt-theme="dark"] .nectar-cta[style*="--nectar-button-color: #07495F" i] .link_wrap *, html[data-nt-theme="dark"] .nectar-cta[style*="--nectar-button-color: #00677F" i] .link_wrap * { color: var(--ntc-btn-text) !important; } html[data-nt-theme="dark"] .nectar-cta[style*="--nectar-button-color: #FFFFFF" i] .link_wrap { background-color: transparent !important; box-shadow: inset 0 0 0 2px var(--ntc-heading); } html[data-nt-theme="dark"] .nectar-cta[style*="--nectar-button-color: #FFFFFF" i] .link_wrap * { color: var(--ntc-heading) !important; } /* Arrow chip ("Arrow Circle Animation" style): the square is the text colour and the arrow is drawn in the button fill. The outline button's fill is transparent in dark mode, so draw its arrow in the page colour instead (light mode: teal square + white arrow; dark: light-teal square + dark arrow). */ html[data-nt-theme="dark"] .nectar-cta[style*="--nectar-button-color: #FFFFFF" i] .arrow-circle-animation-arrow, html[data-nt-theme="dark"] .nectar-cta[style*="--nectar-button-color: #FFFFFF" i] .arrow-circle-animation-arrow path { fill: var(--ntc-bg) !important; } html[data-nt-theme="dark"] .nectar-cta .link_wrap .arrow, html[data-nt-theme="dark"] .nectar-cta .link_wrap .circle { border-color: currentColor !important; } /* Rows whose "text colour = dark" setting comes from Salient's skin */ html[data-nt-theme="dark"] .row_col_wrap_12.dark, html[data-nt-theme="dark"] .row_col_wrap_12.dark :is(p, li, .nectar-responsive-text):not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *), html[data-nt-theme="dark"] .nectar-responsive-text:not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *) { color: var(--ntc-text); } /* Row overlays written as gradients in rgb() form (e.g. the 95% card edge) */ html[data-nt-theme="dark"] [style*="rgb(240, 240, 238)"] { background: var(--ntc-surface) !important; } html[data-nt-theme="dark"] [style*="rgb(255, 255, 255)"]:is(.row-bg-overlay, .column-bg-overlay) { background: var(--ntc-bg) !important; } html[data-nt-theme="dark"] .ocm-effect-wrap { background-color: var(--ntc-bg) !important; } /* Badges (nectar-badge) — tinted #EEF4F9 chips */ html[data-nt-theme="dark"] .nectar-badge__inner { background-color: var(--ntc-surface-2) !important; color: var(--ntc-text) !important; } /* Photos: no filter. Partner logos / app badges that are dark-on-transparent sit on a light plate so they stay legible. */ html[data-nt-theme="dark"] img[src$=".png"][alt*="logo" i]:not(.default-logo), html[data-nt-theme="dark"] img[src$=".svg"][alt*="logo" i]:not(.default-logo):not(.mobile-only-logo):not(.hidden-logo) { background: #ffffff; border-radius: 4px; padding: 4px; } /* Generic tables / dividers */ html[data-nt-theme="dark"] table, html[data-nt-theme="dark"] th, html[data-nt-theme="dark"] td, html[data-nt-theme="dark"] hr, html[data-nt-theme="dark"] .divider-border { border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] table:not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *), html[data-nt-theme="dark"] tr:not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *) { background-color: transparent !important; } html[data-nt-theme="dark"] thead th:not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map, .maplibregl-map) *) { background-color: var(--ntc-surface) !important; } /* "Today" highlight in the hours table (raw-HTML block on Customer Service) */ html[data-nt-theme="dark"] .ntcs-today { background-color: var(--ntc-surface-2) !important; } html[data-nt-theme="dark"] .ntcs-key { color: var(--ntc-heading) !important; border-color: var(--ntc-heading) !important; background: transparent !important; } /* Homepage alerts dock (home/alerts-dock.js + home.css) */ /* The dock is a sun (#FFE2A1) pill with ink text in both themes: leave it. */ /* Toggles / accordions */ html[data-nt-theme="dark"] div[data-style*="minimal"] .toggle > .toggle-title a, html[data-nt-theme="dark"] .toggle > .toggle-title a { color: var(--ntc-text) !important; background-color: transparent !important; } html[data-nt-theme="dark"] .toggle { border-color: var(--ntc-border) !important; background-color: transparent !important; } html[data-nt-theme="dark"] .toggle .toggle-title i, html[data-nt-theme="dark"] .toggle .toggle-title i:before, html[data-nt-theme="dark"] .toggle .toggle-title i:after { border-color: var(--ntc-text) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .toggle > div { background-color: transparent !important; } /* v1.2.22: WPBakery column "background colour on hover" (link cards: Handy links on Brock, Niagara College, Customer Service, New Riders, Rider Guide; one on Rider Apps). Salient prints it per column as .wpb_column.instance-N:hover ... .column-bg-overlay {#EEF4F9/#FFF !important}, so the cards flashed white in dark. Any hover colour -> the dark lift. */ html[data-nt-theme="dark"] .wpb_column[data-hover-bg]:hover > .vc_column-inner > .column-bg-overlay-wrap > .column-bg-overlay { background-color: #263840 !important; opacity: 1 !important; } /* v1.2.21: WEGO map legend (/visiting-niagara-falls/). The map stays a light island, but its key sits on the dark page: labels were #000014 (1.1:1). The NT swatch keeps the map's #07495F line colour, with a thin light ring so it shows on dark. */ html[data-nt-theme="dark"] .nt-wego-map .nt-wego-map__key, html[data-nt-theme="dark"] .nt-wego-map .nt-wego-map__key li { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-wego-map .nt-wego-map__key .nt-wego-map__ln { outline: 1px solid #5B7A84; outline-offset: 1px; border-radius: 1px; } /* v1.2.18: Salient Horizontal List Item (/board/ commission members). Divider (border_color_042935 class) and the Email button's 30%-black border vanished on the dark page. */ html[data-nt-theme="dark"] .nectar-hor-list-item, html[data-nt-theme="dark"] .nectar-hor-list-item[class*="border_color_"] { border-color: #5B7A84 !important; } /* as firm as light's #042935 line */ /* The Email button itself: css/list-buttons.css (both themes). */ /* v1.2.17: FAQ cards (animated_circle style; white cards on the F0F0EE band in light) are page-bg cards on the dark band, owner pick. */ html[data-nt-theme="dark"] div[data-style="animated_circle"] .toggle { background-color: var(--ntc-bg) !important; } html[data-nt-theme="dark"] div[data-style="animated_circle"] .toggle :is(.inner-toggle-wrap, .inner-toggle-wrap p, .inner-toggle-wrap li) { color: var(--ntc-text) !important; } /* ---------- Layer 4: components ---------- */ /* Route badges: brand colours unchanged (white on #005D72 = 7.5:1). On a dark page the dark-teal pill edge is only 2.5:1, so add a 1px light outline to keep the shape (1.4.11). */ html[data-nt-theme="dark"] .nt-route-pill, html[data-nt-theme="dark"] [class*="route-badge"], html[data-nt-theme="dark"] [class*="route-pill"], html[data-nt-theme="dark"] .nrt-route-badge { box-shadow: 0 0 0 1px #5B7A84; } /* GTFS toolkit route fragments use --nrt-* tokens; dark mode just re-points them (the toolkit template would ship this block). */ html[data-nt-theme="dark"] { --nrt-bg: var(--ntc-bg); --nrt-text: var(--ntc-text); --nrt-muted: var(--ntc-text-muted); --nrt-border: var(--ntc-border); --nrt-class-blue: #8CC4F5; --nrt-class-bg: #142838; } html[data-nt-theme="dark"] [class^="nrt-"], html[data-nt-theme="dark"] [class*=" nrt-"] { border-color: var(--ntc-border); } /* Route page fragment (GTFS toolkit _styles.css.j2 + timetable CSS). Only ~1/3 of its colours go through --nrt-* today, so the toolkit template needs its own tokenising pass; this block is what it would ship. */ html[data-nt-theme="dark"] .nt-post-breadcrumbs, html[data-nt-theme="dark"] .nrt-schedule.nrt-rt-layout { background: var(--ntc-bg) !important; } html[data-nt-theme="dark"] .nrt-route-header, html[data-nt-theme="dark"] .nrt-status-list, html[data-nt-theme="dark"] .nrt-map-wrap, html[data-nt-theme="dark"] .nrt-map-legend, html[data-nt-theme="dark"] .nrt-card, html[data-nt-theme="dark"] .nrt-dual-scroll, html[data-nt-theme="dark"] .nrt-service-stat, html[data-nt-theme="dark"] .nrt-service-freq, html[data-nt-theme="dark"] .nrt-scroll-track, html[data-nt-theme="dark"] .nrt-stop-cell, html[data-nt-theme="dark"] .nrt-stop-code, html[data-nt-theme="dark"] .nrt-legend-toggle, html[data-nt-theme="dark"] .nrt-legend-stop-icon, html[data-nt-theme="dark"] .nrt-print-pdf { background: var(--ntc-surface) !important; border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-status-banner, html[data-nt-theme="dark"] .nrt-service-box, html[data-nt-theme="dark"] .nrt-tabs.nrt-segmented, html[data-nt-theme="dark"] .nrt-scroll-rail, html[data-nt-theme="dark"] .nrt-schedule thead { background: var(--ntc-surface-2) !important; border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-time-cell { background: var(--ntc-bg) !important; border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-schedule tr:nth-child(even) .nrt-time-cell { background: #131B1F !important; } html[data-nt-theme="dark"] .nrt-schedule h1, html[data-nt-theme="dark"] .nrt-time-cell, html[data-nt-theme="dark"] .nrt-stop-cell, html[data-nt-theme="dark"] .nrt-stop-name, html[data-nt-theme="dark"] .nrt-about-text, html[data-nt-theme="dark"] .nrt-dir-btn, html[data-nt-theme="dark"] .nrt-status-text, html[data-nt-theme="dark"] .nrt-status-toggle-label, html[data-nt-theme="dark"] .nrt-status-caret { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nrt-schedule h2, html[data-nt-theme="dark"] .nrt-service-box-title, html[data-nt-theme="dark"] .nrt-service-stat-value, html[data-nt-theme="dark"] .nrt-freq-every, html[data-nt-theme="dark"] .nrt-scroll-hint, html[data-nt-theme="dark"] .nrt-legend-toggle { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .nrt-stop-code, html[data-nt-theme="dark"] .nrt-freq-unit, html[data-nt-theme="dark"] .nrt-service-pattern, html[data-nt-theme="dark"] .nrt-status-updated, html[data-nt-theme="dark"] .nrt-status-foot, html[data-nt-theme="dark"] .nrt-service-stat-label { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .nrt-dest-pin { background: #12302C !important; color: #5FD3C4 !important; } /* Bus badge (map + legend) keeps its light-mode white chip and dark number in dark mode too (owner 2026-11-07): no vehicle-badge overrides here. */ html[data-nt-theme="dark"] .smartcrawl-breadcrumb-separator { color: var(--ntc-text-muted) !important; } /* v1.2.6: timetable row highlight (hover, or the map/stop link's .nrt-stop-row-hover). Light mode uses #E6F1FB; the dark cell fills above hid it. Same lift colour as the other dark hovers. */ html[data-nt-theme="dark"] .nrt-rt-layout .nrt-schedule-table tbody tr:is(:hover, .nrt-stop-row-hover) :is(td, .nrt-stop-cell) { background: #263840 !important; } html[data-nt-theme="dark"] .nrt-schedule a.nrt-stop-code:is(:hover, :focus-visible) { background: #263840 !important; border-color: var(--ntc-link) !important; color: var(--ntc-link) !important; } /* v1.2.7: Holiday tab. The asterisk takes the tab's own text colour; the "This Holiday service operates only on " notice goes dark. */ html[data-nt-theme="dark"] .nrt-limited-asterisk { color: inherit !important; } /* Day / direction / pattern buttons: dark when off, light teal + ink when on (same as the site's buttons; navy-on-dark barely showed which was picked). */ html[data-nt-theme="dark"] .nrt-rt-layout :is(.nrt-tab, .nrt-dir-btn, .nrt-pat-btn) { background: var(--ntc-surface) !important; border-color: var(--ntc-input-border) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nrt-rt-layout :is(.nrt-tab:not(.nrt-tab-active), .nrt-dir-btn:not(.nrt-dir-active), .nrt-pat-btn:not(.nrt-pat-active)):hover { background: #263840 !important; } html[data-nt-theme="dark"] .nrt-rt-layout :is(.nrt-tab.nrt-tab-active, .nrt-dir-btn.nrt-dir-active, .nrt-pat-btn.nrt-pat-active) { background: var(--ntc-btn-bg) !important; border-color: var(--ntc-btn-bg) !important; color: var(--ntc-btn-text) !important; } html[data-nt-theme="dark"] .nrt-rt-layout :is(.nrt-tab, .nrt-dir-btn, .nrt-pat-btn):focus-visible { outline-color: var(--ntc-focus) !important; } html[data-nt-theme="dark"] .nrt-notice-limited, html[data-nt-theme="dark"] .nrt-notice-info { background: var(--ntc-surface) !important; border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-notice-limited p, html[data-nt-theme="dark"] .nrt-notice-info p { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nrt-notice-limited strong, html[data-nt-theme="dark"] .nrt-notice-info strong { color: var(--ntc-heading) !important; } /* v1.2.9: Connecting routes card (interlined route + "by place" rows with stop name and stop number). Same colours the toolkit template is getting (mobile-first pass); this covers the fragments published before that. */ html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-interline { background: transparent !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-subhead, html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-interline-label, html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-place-stop { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-note, html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-place-name { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-place { border-top-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-subhead + .nrt-conn-place { border-top-color: transparent !important; } html[data-nt-theme="dark"] .nrt-dest-list li { border-color: var(--ntc-border) !important; } /* Route badges keep their own fill (inline); thin outline like elsewhere. */ html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-badge { box-shadow: 0 0 0 1px #5B7A84; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-conn-badge:focus-visible { outline-color: var(--ntc-focus) !important; } /* v1.2.12: Service alert module on route pages (same treatment the stop page got in v1.2.3). Tinted banner per state, light text, links in the link colour, dark pills. Before this the alert title, date and "More" were 1.0-2.3:1. */ html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-normal { background: #12301C !important; border-color: #2F6B3F !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-offline { background: var(--ntc-surface-2) !important; border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-alert { background: #3A2A10 !important; border-color: #7A5A20 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-critical { background: #3A1614 !important; border-color: #7A2E28 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-notice { background: #142838 !important; border-color: #2E5A80 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-upcoming { background: #251C3A !important; border-color: #5A4690 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-normal :is(.nrt-status-text, .nrt-status-toggle) { color: #7BD88F !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-offline :is(.nrt-status-text, .nrt-status-toggle) { color: #C3D0D5 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-alert :is(.nrt-status-text, .nrt-status-toggle) { color: #F5C27A !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-critical :is(.nrt-status-text, .nrt-status-toggle) { color: #FF9C94 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-notice :is(.nrt-status-text, .nrt-status-toggle) { color: #8CC4F5 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner.is-upcoming :is(.nrt-status-text, .nrt-status-toggle) { color: #C4B5F5 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-banner .nrt-status-toggle :is(.nrt-status-toggle-label, .nrt-status-caret) { color: inherit !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-toggle.is-chip { background: transparent !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-status-list { background: var(--ntc-surface) !important; border-top-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-rt-layout :is(.nrt-status-updated, .nrt-status-foot, .nrt-alert-when, .nrt-alert-label) { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .nrt-rt-layout :is(.nrt-alert-head, .nrt-alert-title, .nrt-alert-body, .nrt-alert-desc) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-alert-fold > summary { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .nrt-rt-layout :is(.nrt-alert-more, .nrt-alert-link, .nrt-alert-desc a, .nrt-alert-stops a) { color: var(--ntc-link) !important; } html[data-nt-theme="dark"] .nrt-rt-layout :is(.nrt-alert-head, .nrt-alert-fold > summary, .nrt-status-toggle):focus-visible { outline-color: var(--ntc-focus) !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-alert-row { border-bottom-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-alert-photos img { border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-alert-pill.p-critical { background: #3A1614 !important; color: #FF9C94 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-alert-pill.p-warning { background: #3A2A10 !important; color: #F5C27A !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-alert-pill.p-info { background: #142838 !important; color: #8CC4F5 !important; } html[data-nt-theme="dark"] .nrt-rt-layout .nrt-alert-pill.p-upcoming { background: #251C3A !important; color: #C4B5F5 !important; } /* Status dot: the light-mode dot colours are too dim on the dark tints (non-text 3:1). Route and stop pages. */ html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-status-banner.is-normal .nrt-status-dot { background: #4AC26B !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-status-banner.is-alert .nrt-status-dot { background: #F5A524 !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-status-banner.is-critical .nrt-status-dot { background: #FF6B5E !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-status-banner.is-notice .nrt-status-dot { background: #6CA8F5 !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-status-banner.is-upcoming .nrt-status-dot { background: #A78BFA !important; } /* v1.2.5: single frequency ("Every 30 min") reads like First/Last bus. */ html[data-nt-theme="dark"] .nrt-freq-single { color: var(--ntc-heading) !important; } /* Brock class-days-only: brighter, larger blue dot (owner pick 2026-11-07), key strip ("Brock class days only" + "What does this mean?") on dark. */ html[data-nt-theme="dark"] .nrt-schedule { --nrt-class-blue: #A9D4FF; --nrt-class-bg: #16283A; } html[data-nt-theme="dark"] .nrt-class-dot { background: #A9D4FF !important; width: 10px !important; height: 10px !important; margin-right: 6px !important; } html[data-nt-theme="dark"] .nrt-trip-col.nrt-class-only { background: #16283A !important; border-bottom: 2px solid #A9D4FF !important; } html[data-nt-theme="dark"] .nrt-class-key { background: var(--ntc-surface) !important; border-bottom-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nrt-class-key-label { color: #A9D4FF !important; } html[data-nt-theme="dark"] .nrt-class-key summary { color: var(--ntc-link) !important; } html[data-nt-theme="dark"] .nrt-class-key summary:focus-visible { outline-color: var(--ntc-focus) !important; } html[data-nt-theme="dark"] .nrt-class-key details p { color: var(--ntc-text) !important; } /* Until the toolkit republishes: routes that run only on class days still carry the old top banner. Quiet dark panel, no emoji. */ html[data-nt-theme="dark"] .nrt-notice-brock { background: var(--ntc-surface) !important; border: 1px solid var(--ntc-border) !important; border-radius: 10px; } html[data-nt-theme="dark"] .nrt-notice-brock p { color: var(--ntc-text) !important; } .nrt-notice-brock .nrt-notice-icon { display: none !important; } /* Page submenu (child css/page-submenu.css) — side rail, panel, pills. In production these hex values become var(--nt-*) in that file itself. */ html[data-nt-theme="dark"] { --nt-psm-pill: #1F3A44; --nt-psm-pill-hover: #172A31; --nt-psm-btn-bg: #8FD0DE; } html[data-nt-theme="dark"] body.nt-psm-js .nt-psm-side, html[data-nt-theme="dark"] body.nt-psm-js .nt-psm-panel { background: var(--ntc-surface) !important; } html[data-nt-theme="dark"] .nt-psm-side-title, html[data-nt-theme="dark"] .nt-psm-panel-title { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .nt-psm-side-list { border-left-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nt-psm-side-list a, html[data-nt-theme="dark"] .nt-psm-panel-list a { color: var(--ntc-link) !important; background: transparent; } html[data-nt-theme="dark"] .nt-psm-side-list a[aria-current], html[data-nt-theme="dark"] .nt-psm-panel-list a[aria-current] { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-psm-tab, html[data-nt-theme="dark"] .nt-psm-close { background: var(--ntc-btn-bg) !important; color: var(--ntc-btn-text) !important; } html[data-nt-theme="dark"] body .page-submenu[data-nt-psm] li a { color: var(--ntc-text) !important; } /* v1.2.23: phone "On this page" (< 1000px). The button is light teal in dark, so its label goes ink (was white, 1.7:1); the open list kept Salient's white data-bg-color panel under light text (1.2:1). */ @media only screen and (max-width: 999px) { html[data-nt-theme="dark"] body .page-submenu[data-nt-psm] .mobile-menu-link { color: var(--ntc-btn-text) !important; } html[data-nt-theme="dark"] body .page-submenu[data-nt-psm] { --nt-psm-divider: var(--ntc-border); } html[data-nt-theme="dark"] body .page-submenu[data-nt-psm] ul { background: var(--ntc-surface) !important; box-shadow: 0 8px 18px rgba(0, 0, 0, .45) !important; } html[data-nt-theme="dark"] body .page-submenu[data-nt-psm] ul li a { background: transparent !important; } html[data-nt-theme="dark"] body .page-submenu[data-nt-psm] ul li a:hover { background: #263840 !important; } html[data-nt-theme="dark"] body .page-submenu[data-nt-psm] :is(.mobile-menu-link, ul li a):focus-visible { outline: 3px solid var(--ntc-focus) !important; outline-offset: -3px; } } @media only screen and (max-width: 999px) { html[data-nt-theme="dark"] .nt-page-hero .row-bg, html[data-nt-theme="dark"] .nt-page-hero .row-bg-overlay { background-color: var(--ntc-bg) !important; } } /* Columns that KEEP a light brand fill in dark mode (sun #FFE2A1, green-teal #0CAB9B) → ink text. Only the column's OWN overlay counts (direct-child chain), so a light tile never re-inks its neighbours. */ html[data-nt-theme="dark"] .wpb_column:has(> .vc_column-inner > .column-bg-overlay-wrap > .column-bg-overlay:is([style*="#FFE2A1" i], [style*="#0CAB9B" i])) { color: #000014 !important; --ntc-heading: #000014; --ntc-text: #000014; --ntc-link: #042935; } html[data-nt-theme="dark"] .wpb_column:has(> .vc_column-inner > .column-bg-overlay-wrap > .column-bg-overlay:is([style*="#FFE2A1" i], [style*="#0CAB9B" i])) > .vc_column-inner > .wpb_wrapper * { color: #000014 !important; } html[data-nt-theme="dark"] .wpb_column:has(> .vc_column-inner > .column-bg-overlay-wrap > .column-bg-overlay:is([style*="#FFE2A1" i], [style*="#0CAB9B" i])) a { text-decoration: underline; } /* Columns on a deep fill (#042935, #07495F, #00677F) keep white text */ html[data-nt-theme="dark"] .wpb_column[style*="color: #FFFFFF" i] { color: #ffffff !important; --ntc-heading: #ffffff; --ntc-text: #ffffff; --ntc-link: #ffffff; } /* Homepage tiles (home.css .ntt-*): numbers + insets that are hardcoded light */ html[data-nt-theme="dark"] .ntt-ran .ntt-num { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .ntt .ntb-hint { color: var(--ntc-text-muted); } html[data-nt-theme="dark"] .ntt .ntb-more-list li { border-top-color: var(--ntc-border); } html[data-nt-theme="dark"] .ntt-bordered > .vc_column-inner { box-shadow: inset 0 0 0 1px var(--ntc-border); } html[data-nt-theme="dark"] .ntt .ntb-area-list a, html[data-nt-theme="dark"] .ntt .ntb-area-list a .ntb-area { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .ntt .ntb-more-list a { color: var(--ntc-link) !important; } /* .ntb-inset charts sit inside light tiles and stay white + ink */ html[data-nt-theme="dark"] .nt-home-head h2, html[data-nt-theme="dark"] .nt-home-head h3 { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .nt-home-head a { color: var(--ntc-link) !important; } /* Salient post grid (Latest news) */ html[data-nt-theme="dark"] .nectar-post-grid .post-heading, html[data-nt-theme="dark"] .nectar-post-grid .post-heading a, html[data-nt-theme="dark"] .nectar-post-grid .post-heading span, html[data-nt-theme="dark"] .nectar-post-grid-item .content, html[data-nt-theme="dark"] .nectar-post-grid-item .meta-date { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nectar-post-grid-item { border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .ntt-go > .vc_column-inner > a.column-link:focus-visible { outline-color: var(--ntc-focus) !important; } /* Departures / trip-planner widget (css/transit-widgets.css). It already has its own tokens on .nt-widget-shell — note they reuse the --ntc-text / --ntc-focus names, so the sitewide tokens need a distinct prefix. */ html[data-nt-theme="dark"] .nt-widget-shell { --nt-sandstone: var(--ntc-surface); --nt-text: #E6ECEE; --nt-text-secondary: #A7B4B9; --nt-field-border: #6E7F86; --nt-focus: #FFE2A1; --nt-row-bg: #1F2A2F; --nt-row-border: #3A474D; --nt-accent: #8FD0DE; --nt-accent-dark: #BFE6EE; --nt-accent-light: #172A31; background: var(--ntc-surface) !important; color: #E6ECEE; } html[data-nt-theme="dark"] .nt-widget-shell .widget-panels, html[data-nt-theme="dark"] .nt-widget-shell .widget-tab--active, html[data-nt-theme="dark"] .nt-widget-shell .widget-tab--active:hover, html[data-nt-theme="dark"] .nt-widget-shell .trip-planner-options, html[data-nt-theme="dark"] .nt-widget-shell .trip-planner-options-summary, html[data-nt-theme="dark"] .transit-departures-widget .departure-results { background: #0F1518 !important; color: #E6ECEE; } html[data-nt-theme="dark"] .nt-widget-shell .widget-tab { color: #E6ECEE !important; } html[data-nt-theme="dark"] .nt-widget-shell .widget-tab--active { color: #8FD0DE !important; } html[data-nt-theme="dark"] .nt-widget-shell .widget-btn-outline-primary, html[data-nt-theme="dark"] .transit-departures-widget .widget-btn:not([aria-pressed="true"]):not(.active):not(.widget-btn-primary) { background: transparent !important; color: #8FD0DE !important; } html[data-nt-theme="dark"] .nt-widget-shell .widget-btn-primary, html[data-nt-theme="dark"] .nt-widget-shell input:checked + .widget-btn-outline-primary, html[data-nt-theme="dark"] .nt-widget-shell button[type="submit"], html[data-nt-theme="dark"] .nt-widget-shell .widget-btn[aria-pressed="true"], html[data-nt-theme="dark"] .nt-widget-shell .widget-btn.active { background: #8FD0DE !important; color: #000014 !important; border-color: #8FD0DE !important; } /* Maps stay light in phase 1: framed so the bright tile doesn't bleed */ html[data-nt-theme="dark"] .maplibregl-map, html[data-nt-theme="dark"] .leaflet-container { outline: 1px solid var(--ntc-border); } /* ================================================================== PHASE 2 — widgets and page blocks (v1.2.0, 2026-11-07) Found by scanning all 50 live pages in dark mode. ================================================================== */ /* ---------- Light islands ---------- Map widgets (system map, locations, microtransit, WEGO; also the small map on stop pages) stay LIGHT in dark mode for now (decision: maps light in phase 1). They are framed and keep their own colours: the sitewide dark text rules skip them (see the :not(:is(...)) at the top of this file). */ html[data-nt-theme="dark"] :is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map) { color-scheme: light; } html[data-nt-theme="dark"] .nt-loc { color: var(--nt-loc-ink, #000014); } html[data-nt-theme="dark"] .nt-microtransit { color: var(--nt-mt-black, #000014); } html[data-nt-theme="dark"] .nt-wego-map { color: #000014; } html[data-nt-theme="dark"] :is(.nt-loc-body, .nt-microtransit, .nrt-sysmap, .nt-wego-map__canvas) { outline: 1px solid var(--ntc-border); } /* Labels that sit OUTSIDE the white panels, on the dark page */ html[data-nt-theme="dark"] .nt-loc .nt-loc-heading, html[data-nt-theme="dark"] .nt-loc .nt-loc-search label, html[data-nt-theme="dark"] .nt-loc .nt-loc-status, html[data-nt-theme="dark"] .nt-wego-map__switch-label { color: var(--ntc-text) !important; } /* ---------- Route list cards (css/route-list.css, [route_list]) ---------- */ html[data-nt-theme="dark"] .nt-corridor { /* page-bg card on the surface row: the light F0F0EE/white step, inverted */ background: var(--ntc-bg) !important; border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nt-corridor-name { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-corridor-muni { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .nt-corridor-endpoints, html[data-nt-theme="dark"] .nt-corridor-days, html[data-nt-theme="dark"] .nt-corridor-foot-label { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .nt-corridor-btn { --nt-rl-tint: var(--ntc-surface-2); --nt-rl-tint-hover: #263840; background: var(--ntc-surface-2) !important; border-color: #5B8794 !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-corridor-btn:hover { background: #263840 !important; } html[data-nt-theme="dark"] .nt-corridor-btn::after { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .nt-corridor-btn :is(strong, span, .nt-corridor-period):not(.nt-route-pill) { color: inherit !important; } html[data-nt-theme="dark"] .nt-corridor-foot { border-top-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .nt-corridor-chip { background: transparent !important; border-color: var(--ntc-border) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-route-list-notice { background: var(--ntc-surface) !important; border-color: var(--ntc-border) !important; color: var(--ntc-text) !important; } /* ---------- Holiday hours ([holiday_hours]) ---------- */ html[data-nt-theme="dark"] .nt-holidays { --nt-hol-navy: var(--ntc-heading); --nt-hol-line: var(--ntc-border); --nt-hol-muted: var(--ntc-text-muted); color: var(--ntc-text); } html[data-nt-theme="dark"] .nt-holidays .nt-hol-next { background: var(--ntc-surface-2) !important; } html[data-nt-theme="dark"] .nt-holidays .nt-hol-next-body .nt-hol-table { background: transparent !important; } html[data-nt-theme="dark"] .nt-holidays .nt-hol-item summary:hover { background: var(--ntc-surface) !important; } html[data-nt-theme="dark"] .nt-holidays .nt-hol-table caption, html[data-nt-theme="dark"] .nt-holidays .nt-hol-table :is(th, td) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-holidays .nt-hol-level.is-reduced { background: #3A2A10 !important; color: #F5C27A !important; } html[data-nt-theme="dark"] .nt-holidays .nt-hol-level.is-modified { background: #142838 !important; color: #8CC4F5 !important; } html[data-nt-theme="dark"] .nt-holidays .nt-hol-level.is-none { background: #3A1614 !important; color: #FF9C94 !important; } /* v1.2.13: selected filter and sort chips amber (owner 2026-11-07); the plugin's #1A1A1A chip disappeared on the dark page. Focus ring in the dark focus colour (#2C6AA0 was ~3:1 on the page). */ html[data-nt-theme="dark"] .nt-alerts-widget .nt-alerts-widget__filter-chip--active, html[data-nt-theme="dark"] .nt-alerts-widget .nt-alerts-widget__filter-chip--active:hover { background: #F5C27A !important; border-color: #F5C27A !important; color: #000014 !important; } html[data-nt-theme="dark"] .nt-alerts-widget .nt-alerts-widget__filter-chip--active * { color: inherit !important; } html[data-nt-theme="dark"] .nt-alerts-widget .nt-alerts-widget__filter-chip:focus-visible { outline-color: var(--ntc-focus) !important; } /* v1.2.14: header search panel FALLBACK (only when js/search-panel.js has not added .nt-sp; the redesigned panel lives in css/search-panel.css). Close "X" lines, placeholder and the (invisible) submit button were #333 on the dark panel. */ html[data-nt-theme="dark"] #search-outer:not(.nt-sp) #close .close-line, html[data-nt-theme="dark"] #search-outer:not(.nt-sp) #close .close-line::before, html[data-nt-theme="dark"] #search-outer:not(.nt-sp) #close .close-line::after { background-color: var(--ntc-text) !important; } html[data-nt-theme="dark"] #search-outer:not(.nt-sp) #close a { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] #search-outer:not(.nt-sp) #close a:focus-visible { outline: 2px solid var(--ntc-focus) !important; outline-offset: 4px; } /* Salient: .material #header-outer #search-outer input::-webkit-input-placeholder { color:#333 !important } (two IDs); separate rules so one unknown pseudo-element can't drop the other. */ html[data-nt-theme="dark"] body.material #header-outer #search-outer:not(.nt-sp) input[name="s"]::placeholder { color: var(--ntc-text-muted) !important; opacity: 1; } html[data-nt-theme="dark"] body.material #header-outer #search-outer:not(.nt-sp) input[name="s"]::-webkit-input-placeholder { color: var(--ntc-text-muted) !important; opacity: 1; } html[data-nt-theme="dark"] body #header-outer #search-outer:not(.nt-sp) #search-box .search-box__button { background: var(--ntc-surface) !important; color: var(--ntc-text) !important; border-color: var(--ntc-border) !important; } /* ---------- Service alerts widget (nt-alerts plugin, own tokens) ---------- */ html[data-nt-theme="dark"] .nt-alerts-widget { --nt-alert-text: var(--ntc-text); --nt-alert-muted: var(--ntc-text-muted); --nt-alert-surface: var(--ntc-surface); --nt-alert-surface-alt: var(--ntc-surface-2); --nt-alert-border: var(--ntc-border); --nt-alert-bg-info: #142838; --nt-alert-border-info: #8CC4F5; --nt-alert-text-info: #CFE4FA; --nt-alert-bg-warning: #3A2A10; --nt-alert-border-warning: #F5C27A; --nt-alert-text-warning: #F8DDB1; --nt-alert-bg-critical: #3A1614; --nt-alert-border-critical: #FF9C94; --nt-alert-text-critical: #FFD2CE; } /* ---------- Salient elements ---------- */ html[data-nt-theme="dark"] caption:not(:is(.nt-loc, .nt-microtransit, .nrt-sysmap, .nt-wego-map) *) { color: var(--ntc-text) !important; } /* Icon lists (About values, Board members) */ html[data-nt-theme="dark"] .nectar-list-item, html[data-nt-theme="dark"] .nectar-list-item :is(h1, h2, h3, h4, h5, h6, p, div, span) { color: var(--ntc-text) !important; } /* Inline "color: #042935" (text links set to the darkest teal in the builder). Matched precisely so --row-bg-color / background-color are never caught. */ html[data-nt-theme="dark"] :is([style^="color: #042935" i], [style*="; color: #042935" i], [style*=";color: #042935" i]) { color: var(--ntc-heading) !important; } /* Accordion titles that pages force to #000014 with an ID (raw-HTML styles) */ html[data-nt-theme="dark"] :is(#buses, #bus-videos, #basics, #bikes) .toggles .toggle h3 a, html[data-nt-theme="dark"] :is(#buses, #bus-videos, #basics, #bikes) .toggles .toggle.open h3 a { color: var(--ntc-text) !important; } /* ---------- Forminator (Bus Stop Maintenance) ---------- */ html[data-nt-theme="dark"] :is(.forminator-ui, #nt-dm-id-weight) :is(.forminator-label, .forminator-radio-label, .forminator-checkbox-label, .forminator-description, legend) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-radio-bullet, html[data-nt-theme="dark"] .forminator-ui .forminator-checkbox-box { background: var(--ntc-bg) !important; border-color: var(--ntc-input-border) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-progress-bar { background: var(--ntc-surface) !important; } /* ---------- Forminator, full pass (v1.2.24; /feedback/ form 2294 and /bus-stop-maintenance/ 11423, "default" design) ---------- Covers the step indicator, dropdowns (select2, single + multiple), the date picker and the dropdown lists, which Forminator appends to (outside .forminator-ui), the phone country list, file upload, validation errors, the response message and the buttons. Forminator prints per-form colours with IDs, hence !important throughout. */ html[data-nt-theme="dark"] .forminator-ui .forminator-description, html[data-nt-theme="dark"] .forminator-ui .forminator-description * { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-required { color: #FF9C94 !important; } /* Step indicator: labels were #097BAA (3.9:1); the line and dots read on dark. */ html[data-nt-theme="dark"] .forminator-ui .forminator-pagination-steps .forminator-step-label { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-pagination-steps .forminator-step:is(.forminator-current, .forminator-step-done) .forminator-step-label, html[data-nt-theme="dark"] .forminator-ui .forminator-pagination-steps .forminator-current ~ .forminator-step .forminator-step-label { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-pagination-steps .forminator-step.forminator-current .forminator-step-label { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-pagination-steps .forminator-break { background-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-pagination-steps .forminator-break::before { background-color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-pagination-steps .forminator-step-dot { background-color: var(--ntc-heading) !important; border-color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-pagination-steps .forminator-current ~ .forminator-step .forminator-step-dot { background-color: var(--ntc-bg) !important; border-color: var(--ntc-input-border) !important; } /* Text inputs, textarea: focus ring/border. */ html[data-nt-theme="dark"] :is(.forminator-ui, #nt-dm-id-weight) .forminator-field:not(.forminator-has_error) :is(.forminator-input, .forminator-textarea):focus { border-color: var(--ntc-link) !important; } html[data-nt-theme="dark"] .forminator-ui :is(.forminator-input, .forminator-textarea)::placeholder { color: var(--ntc-text-muted) !important; opacity: 1; } /* Radios and checkboxes: the checked dot / tick in the heading teal. */ html[data-nt-theme="dark"] .forminator-ui .forminator-radio input:checked + .forminator-radio-bullet, html[data-nt-theme="dark"] .forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box { border-color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-radio input:checked + .forminator-radio-bullet::before { background-color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box { background-color: var(--ntc-heading) !important; color: var(--ntc-btn-text) !important; } /* Dropdowns, closed (select2): placeholder and value were black (1.1:1). */ html[data-nt-theme="dark"] .forminator-ui .select2-selection { background-color: var(--ntc-bg) !important; border-color: var(--ntc-input-border) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-ui :is(.select2-selection__rendered, .select2-selection__rendered li) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-ui .select2-selection__placeholder { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .forminator-ui :is(.select2-selection__arrow, .select2-selection__arrow *, .forminator-icon-chevron-down) { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .forminator-ui :is(.select2-container--open, .forminator-is_hover, .forminator-is_active) .select2-selection { background-color: var(--ntc-surface-2) !important; border-color: var(--ntc-link) !important; } html[data-nt-theme="dark"] .forminator-ui .select2-selection__choice { background-color: #213A44 !important; border-color: #213A44 !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-ui .select2-selection__choice__remove { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-ui .select2-search__field { background: transparent !important; color: var(--ntc-text) !important; } /* Dropdown lists (appended to ). Were #E6E6E6 with #777771 options (3.6:1). */ html[data-nt-theme="dark"] .forminator-select-dropdown { background-color: var(--ntc-surface) !important; border-color: var(--ntc-input-border) !important; color: var(--ntc-text) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .45) !important; } html[data-nt-theme="dark"] .forminator-select-dropdown .select2-results__option { background-color: transparent !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-select-dropdown .select2-results__option[aria-selected="true"], html[data-nt-theme="dark"] .forminator-select-dropdown .select2-results__option--selected { background-color: #213A44 !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-select-dropdown .select2-results__option--highlighted { background-color: #263840 !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-select-dropdown :is(.select2-results__message, .select2-results__option[aria-disabled="true"]) { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .forminator-select-dropdown .select2-search__field { background-color: var(--ntc-bg) !important; border-color: var(--ntc-input-border) !important; color: var(--ntc-text) !important; } /* Date picker (jQuery UI, #ui-datepicker-div on ). Was a light panel with #333 weekday letters (1.3:1) and grey day cells. */ html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] { background-color: var(--ntc-surface) !important; border: 1px solid var(--ntc-input-border) !important; color: var(--ntc-text) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .45) !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] :is(.ui-datepicker-header, .ui-datepicker-title, table, thead, tbody, tr, td) { background-color: transparent !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] :is(select.ui-datepicker-month, select.ui-datepicker-year) { background-color: var(--ntc-bg) !important; border-color: var(--ntc-input-border) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] :is(.ui-datepicker-prev, .ui-datepicker-next) { background-color: var(--ntc-btn-bg) !important; color: var(--ntc-btn-text) !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] :is(.ui-datepicker-prev, .ui-datepicker-next) * { color: var(--ntc-btn-text) !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] th, html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] th * { background-color: transparent !important; color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] td :is(a, span).ui-state-default { background-color: var(--ntc-bg) !important; border-color: var(--ntc-border) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] td a.ui-state-default:is(:hover, .ui-state-hover) { background-color: #263840 !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] td a.ui-state-highlight { border-color: var(--ntc-heading) !important; color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] td a.ui-state-active { background-color: var(--ntc-btn-bg) !important; border-color: var(--ntc-btn-bg) !important; color: var(--ntc-btn-text) !important; } html[data-nt-theme="dark"] #ui-datepicker-div[class*="forminator-calendar"] td.ui-datepicker-unselectable span.ui-state-default { background-color: transparent !important; color: #6E7F86 !important; /* disabled day: no contrast minimum */ } /* Phone field: country button and list (intl-tel-input). */ html[data-nt-theme="dark"] .forminator-ui :is(.iti__selected-country, .iti__selected-flag, .iti__selected-dial-code) { background-color: transparent !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-ui .iti__arrow { border-top-color: var(--ntc-text) !important; border-bottom-color: var(--ntc-text) !important; } html[data-nt-theme="dark"] :is(.forminator-ui, .iti--container) :is(.iti__dropdown-content, .iti__country-list) { background-color: var(--ntc-surface) !important; border-color: var(--ntc-input-border) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] :is(.forminator-ui, .iti--container) .iti__country { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] :is(.forminator-ui, .iti--container) .iti__country.iti__highlight { background-color: #263840 !important; } html[data-nt-theme="dark"] :is(.forminator-ui, .iti--container) .iti__dial-code { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] :is(.forminator-ui, .iti--container) .iti__divider { border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] :is(.forminator-ui, .iti--container) .iti__search-input { background-color: var(--ntc-bg) !important; border-color: var(--ntc-input-border) !important; color: var(--ntc-text) !important; } /* File upload. */ html[data-nt-theme="dark"] .forminator-ui .forminator-file-upload, html[data-nt-theme="dark"] .forminator-ui .forminator-file-upload > span { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-button-upload { background-color: var(--ntc-surface-2) !important; border: 1px solid var(--ntc-input-border) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-button-upload:hover { background-color: #263840 !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-button-delete, html[data-nt-theme="dark"] .forminator-ui .forminator-button-delete * { background-color: transparent !important; color: #FF9C94 !important; } /* Errors and the response message. */ html[data-nt-theme="dark"] .forminator-ui .forminator-error-message { background-color: #3A1614 !important; color: #FFD2CE !important; } /* ID weight: the site-wide dark input rule (many :not()s) outranks a plain class chain. */ html[data-nt-theme="dark"] :is(.forminator-ui, #nt-dm-id-weight) .forminator-has_error :is(.forminator-input, .forminator-textarea, .select2-selection, .forminator-radio-bullet, .forminator-checkbox-box) { border-color: #FF9C94 !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-response-message { background-color: var(--ntc-surface) !important; color: var(--ntc-text) !important; border-color: var(--ntc-input-border) !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-response-message * { color: inherit !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-response-message.forminator-error { background-color: #3A1614 !important; color: #FFD2CE !important; border-color: #7A2E28 !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-response-message.forminator-success { background-color: #12301C !important; color: #BFF0CB !important; border-color: #2F6B3F !important; } /* Buttons: Next / Submit like the site's buttons; Previous as an outline. */ html[data-nt-theme="dark"] .forminator-ui :is(.forminator-button-next, .forminator-button-submit, .forminator-pagination-submit) { background-color: var(--ntc-btn-bg) !important; color: var(--ntc-btn-text) !important; border: 0 !important; } html[data-nt-theme="dark"] .forminator-ui .forminator-button-back { background-color: transparent !important; border: 1px solid var(--ntc-input-border) !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .forminator-ui :is(.forminator-button-next, .forminator-button-submit, .forminator-pagination-submit):hover { filter: brightness(1.1); } html[data-nt-theme="dark"] .forminator-ui .forminator-button-back:hover { background-color: #263840 !important; } html[data-nt-theme="dark"] .forminator-ui :is(.forminator-button, .forminator-step, .select2-selection, .forminator-input, .forminator-textarea):focus-visible { outline: 3px solid var(--ntc-focus) !important; outline-offset: 2px; } html[data-nt-theme="dark"] .forminator-ui .forminator-pagination-footer { border-color: var(--ntc-border) !important; } /* ---------- Page raw-HTML blocks (styles live in each page's content) ---------- */ /* Fares (.ntf) — its rules are !important, so these are too */ html[data-nt-theme="dark"] .ntf { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .ntf :is(.ntf-ages, .ntf-desc, .ntf-note) , html[data-nt-theme="dark"] .ntf .ntf-base-list li { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .ntf :is(.ntf-who, .ntf-price, .ntf-base-eyebrow, .ntf-base-amt, .ntf-base-kids, .ntf-base-kids strong) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .ntf :is(.ntf-h, .ntf-base-h) { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .ntf .ntf-math { color: var(--ntc-link) !important; } html[data-nt-theme="dark"] .ntf .ntf-tip { color: var(--ntc-heading) !important; background: var(--ntc-surface) !important; } html[data-nt-theme="dark"] .ntf :is(.ntf-nopass, .ntf-base) { border-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .ntf .ntf-col { background: var(--ntc-surface) !important; } html[data-nt-theme="dark"] .ntf .ntf-base-price { background: var(--ntc-surface-2) !important; } html[data-nt-theme="dark"] .ntf .ntf-base-info { background: var(--ntc-bg) !important; } html[data-nt-theme="dark"] .ntf .ntf-base-kids { background: #12302C !important; } /* New riders (.ntnr-*) */ html[data-nt-theme="dark"] :is(.ntnr-facts strong, .ntnr-title, .ntnr-prices caption, .ntnr-prices th, .ntnr-prices td) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] :is(.ntnr-facts span, .ntnr-sum) { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .ntnr-all { color: var(--ntc-link) !important; } html[data-nt-theme="dark"] .ntnr-num { background: var(--ntc-bg) !important; border-color: #6E7F86 !important; color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .ntnr-see div { background: var(--ntc-surface) !important; color: var(--ntc-text); } html[data-nt-theme="dark"] .ntnr-tip { background: var(--ntc-surface-2) !important; border-color: var(--ntc-heading) !important; } /* Accessibility (.ntax-*) */ html[data-nt-theme="dark"] :is(.ntax-keys h3, .ntax-flow h3) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .ntax-flow li { background: var(--ntc-surface) !important; color: var(--ntc-text); } html[data-nt-theme="dark"] .ntax-flow li::before { color: var(--ntc-link) !important; } html[data-nt-theme="dark"] .ntax-num { background: var(--ntc-text) !important; color: #000014 !important; } html[data-nt-theme="dark"] .ntax-legend .ntax-dash { background: var(--ntc-surface-2) !important; border-color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .ntax-legend .ntax-spk { border-color: var(--ntc-heading) !important; } /* Links page (.nt-lk) */ html[data-nt-theme="dark"] .nt-lk h2.nt-lk-eyebrow, html[data-nt-theme="dark"] .nt-lk .nt-lk-card p, html[data-nt-theme="dark"] .nt-lk p.nt-lk-call { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .nt-lk .nt-lk-card:not(.nt-lk-new):not(.nt-lk-primary) h3 { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-lk .nt-lk-card:not(.nt-lk-new):not(.nt-lk-primary) > .vc_column-inner::after { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .nt-lk .nt-lk-white > .vc_column-inner { box-shadow: inset 0 0 0 1px var(--ntc-border) !important; } html[data-nt-theme="dark"] .nt-lk :is(p.nt-lk-quiet a, p.nt-lk-call a) { color: var(--ntc-link) !important; } /* Lost and found (.ntlf-*) */ html[data-nt-theme="dark"] :is(.ntlf-eyebrow, .ntlf-big a) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .ntlf-key { background: transparent !important; border-color: var(--ntc-heading) !important; color: var(--ntc-heading) !important; } /* Policies and bylaws (.nt-pb) */ html[data-nt-theme="dark"] .nt-pb :is(p.nt-pb-small, .nt-pb-meta) { color: var(--ntc-text-muted) !important; } html[data-nt-theme="dark"] .nt-pb :is(a.nt-pb-t, .wpb_text_column a) { color: var(--ntc-link) !important; } /* GO connections + Visiting Niagara Falls tables (.ntgo-*, .ntvf-*) */ html[data-nt-theme="dark"] :is(.ntgo-table, .ntvf-table) :is(th, td) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] :is(.ntgo-table .ntgo-sub, .ntgo-note, .ntvf-sub), html[data-nt-theme="dark"] :is(.ntgo-table, .ntvf-table) td::before { color: var(--ntc-text-muted) !important; } /* Homepage white chips/insets keep ink text (they stay white on purpose) */ html[data-nt-theme="dark"] .ntb-pill--white { color: #000014 !important; } /* ---------- Stop pages (/stops/?stop=N; raw-HTML page + js/nrt-stop-page.js) ---------- Converted through its own --nsp-* tokens. --nsp-teal stays dark because it is also the route-badge fill (white text); links get the link colour instead. The small location map inside stays light (maplibre island). */ html[data-nt-theme="dark"] .nrt-stop-page { --nsp-navy: #8FD0DE; --nsp-ink: #E6ECEE; --nsp-muted: #A7B4B9; --nsp-card: #1A2226; --nsp-track: #172A31; --nsp-line: #3A474D; --nsp-bg: #0F1518; --nsp-live: #7BD88F; --nsp-live-bg: #12301C; --nsp-sched: #C3D0D5; --nsp-sched-bg: #1F2A2F; --nsp-amber: #F5C27A; --nsp-amber-bg: #3A2A10; --nsp-now: #2A2312; --nsp-focus: #FFE2A1; --nsp-head: #E6ECEE; --nsp-stone: #1A2226; --nsp-hit: #3A3010; } html[data-nt-theme="dark"] .nrt-stop-page .nsp-header { border-top-color: #07495F; } html[data-nt-theme="dark"] .nrt-stop-page a:not(.nsp-btn):not(.nsp-rb):not([class*="pill"]), html[data-nt-theme="dark"] .nrt-stop-page :is(.nsp-linkbtn, .nsp-rcard-go, .nrt-alert-more, .nrt-alert-link) { color: var(--ntc-link); } html[data-nt-theme="dark"] .nrt-stop-page .nsp-near a { color: var(--ntc-text); } html[data-nt-theme="dark"] .nrt-stop-page :is(.nsp-btn, .nsp-schedtoggle, .nsp-depfoot button) { background: transparent; } html[data-nt-theme="dark"] .nrt-stop-page .nsp-btn.primary, html[data-nt-theme="dark"] .nrt-stop-page .nsp-seg button[aria-pressed="true"] { color: #000014; } html[data-nt-theme="dark"] .nrt-stop-page .nsp-rcard.is-on { background: var(--nsp-bg); } html[data-nt-theme="dark"] .nrt-stop-page .nsp-hrow.now .h { background: #3A2A10; } html[data-nt-theme="dark"] .nrt-stop-page .nsp-open, html[data-nt-theme="dark"] .nrt-stop-page .nsp-open.is-closed { background: var(--nsp-card); } html[data-nt-theme="dark"] .nrt-stop-page .nsp-rb { box-shadow: 0 0 0 1px #5B8794; } /* Status banner + alert list (same markup as the route pages) */ html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner { background: var(--nsp-card) !important; border-color: var(--nsp-line) !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-list { background: var(--nsp-card) !important; border-top-color: var(--nsp-line) !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-normal { background: #12301C !important; border-color: #2F6B3F !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-alert { background: #3A2A10 !important; border-color: #7A5A20 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-critical { background: #3A1614 !important; border-color: #7A2E28 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-notice { background: #142838 !important; border-color: #2E5A80 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-upcoming { background: #251C3A !important; border-color: #5A4690 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-normal :is(.nrt-status-text, .nrt-status-toggle) { color: #7BD88F !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-offline :is(.nrt-status-text, .nrt-status-toggle) { color: #C3D0D5 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-alert :is(.nrt-status-text, .nrt-status-toggle) { color: #F5C27A !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-critical :is(.nrt-status-text, .nrt-status-toggle) { color: #FF9C94 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-notice :is(.nrt-status-text, .nrt-status-toggle) { color: #8CC4F5 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-banner.is-upcoming :is(.nrt-status-text, .nrt-status-toggle) { color: #C4B5F5 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-status-toggle.is-chip { background: transparent !important; } html[data-nt-theme="dark"] .nrt-stop-page :is(.nrt-status-updated, .nrt-status-foot, .nrt-alert-when, .nrt-alert-label) { color: var(--nsp-muted) !important; } html[data-nt-theme="dark"] .nrt-stop-page :is(.nrt-alert-head, .nrt-alert-body) { color: var(--nsp-ink) !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-alert-fold > summary { color: var(--ntc-heading) !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-alert-row { border-bottom-color: var(--nsp-line) !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-alert-pill.p-critical { background: #3A1614 !important; color: #FF9C94 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-alert-pill.p-warning { background: #3A2A10 !important; color: #F5C27A !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-alert-pill.p-info { background: #142838 !important; color: #8CC4F5 !important; } html[data-nt-theme="dark"] .nrt-stop-page .nrt-alert-pill.p-upcoming { background: #251C3A !important; color: #C4B5F5 !important; } /* ---------- header theme button (both themes) ---------- Line icon beside the search magnifier; same colour as the header icons. 44x44 target (WCAG 2.5.8 / AODA), visible focus ring, no tooltip. */ .nt-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #000014; cursor: pointer; line-height: 0; -webkit-appearance: none; appearance: none; } .nt-theme-btn:hover { background: rgba(0, 0, 20, .06); } .nt-theme-btn:focus-visible { outline: 3px solid #07495F; outline-offset: 2px; } .nt-theme-btn svg { display: block; width: 20px; height: 20px; } /* Desktop: sits in Salient's button menu, left of the search icon */ #header-outer #top nav ul.buttons > li#nt-theme-li { display: flex; align-items: center; margin: 0 2px 0 8px; padding: 0; } /* Mobile: before the mobile search icon, aligned with it */ #header-outer .nt-theme-btn--mobile { vertical-align: middle; margin-right: 2px; } /* Each button shows only while its search icon shows. Salient switches the two search icons at its own breakpoints, so js/theme-toggle.js mirrors the search icon's visibility into [hidden] instead of guessing widths here. */ #header-outer #nt-theme-li[hidden], #header-outer .nt-theme-btn[hidden] { display: none !important; } html[data-nt-theme="dark"] .nt-theme-btn { color: #E6ECEE; } html[data-nt-theme="dark"] .nt-theme-btn:hover { background: rgba(255, 255, 255, .08); } html[data-nt-theme="dark"] .nt-theme-btn:focus-visible { outline-color: #FFE2A1; } /* No colour fade during the switch itself */ html.nt-theme-switching *, html.nt-theme-switching *::before, html.nt-theme-switching *::after { transition: none !important; } /* Fares pricing area built from builder elements (ntf-base / ntf-kids / ntf-pass columns) */ html[data-nt-theme="dark"] body .ntf-base .ntf-amt, html[data-nt-theme="dark"] body .ntf-base .ntf-amt * { color: var(--ntc-text); } html[data-nt-theme="dark"] .ntf-kids > .vc_column-inner > .column-bg-overlay-wrap .column-bg-overlay, html[data-nt-theme="dark"] .ntf-kids > .vc_column-inner { background-color: #12302C !important; } html[data-nt-theme="dark"] body:not(.woocommerce-cart) .main-content .ntf-pass tbody th, html[data-nt-theme="dark"] body:not(.woocommerce-cart) .main-content .ntf-pass tbody td { color: var(--ntc-text); border-top-color: var(--ntc-border) !important; } html[data-nt-theme="dark"] .ntf-pass tbody th small { color: var(--ntc-text-muted); } html[data-nt-theme="dark"] .ntf-pass tbody th em { color: var(--ntc-link); } html[data-nt-theme="dark"] .ntf-pass table + p { background: var(--ntc-bg); color: var(--ntc-heading); } /* Microtransit hours and trip cards (ntm-hours / ntm-trip columns) */ html[data-nt-theme="dark"] body .ntm-hours table tr { border-top-color: var(--ntc-border); } html[data-nt-theme="dark"] body:not(.woocommerce-cart) .main-content .ntm-hours tbody th { color: var(--ntc-text-muted); } html[data-nt-theme="dark"] body:not(.woocommerce-cart) .main-content .ntm-hours tbody td { color: var(--ntc-text); } html[data-nt-theme="dark"] body .main-content .ntm-trip ol li { color: var(--ntc-text); } html[data-nt-theme="dark"] .ntm-trip ol li:nth-child(odd)::before { border-color: var(--ntc-text); background: var(--ntc-surface); } /* Numbered step lists: the step text carries an inline dark colour from the builder (text_color="#000014") */ html[data-nt-theme="dark"] .nectar-icon-list .nectar-icon-list-item .content { color: var(--ntc-text) !important; } /* ---------- Alert banner as ledger rows (route + stop pages, 2026-11-10) ---------- The light rules are baked into the route/stop fragments by the toolkit (_alert_banner.css.j2); these are the dark values for the new parts. */ html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-status-list { border-top-color: var(--ntc-text, #E6ECEE) !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-alert-head:hover { background: var(--ntc-surface-2, #1F3A44) !important; box-shadow: -8px 0 0 var(--ntc-surface-2, #1F3A44), 8px 0 0 var(--ntc-surface-2, #1F3A44) !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) :is(.nrt-alert-kind, .nrt-alert-stopname) { color: var(--ntc-text, #E6ECEE) !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-alert-kind::before { background: #8FD0DE !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-alert-kind.k-warning::before { background: #F5C27A !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-alert-kind.k-critical::before { background: #FF9C94 !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-alert-group { border-top-color: var(--ntc-text, #E6ECEE) !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-alert-label { color: var(--ntc-text, #E6ECEE) !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-alert-tag { border-color: var(--ntc-text, #E6ECEE) !important; color: var(--ntc-text, #E6ECEE) !important; } html[data-nt-theme="dark"] :is(.nrt-rt-layout, .nrt-stop-page) .nrt-alert-tag.is-closed { background: var(--ntc-text, #E6ECEE) !important; color: #000014 !important; } /* Service alerts widget ledger (nt-alerts 1.17.0): link colour for the dark page; the resolved ("back to regular route") square in a lighter green. */ html[data-nt-theme="dark"] .nt-alerts-widget { --nt-alert-link: #8FD0DE; } html[data-nt-theme="dark"] .nt-alerts-widget .nt-alerts-widget__alert--tone-resolved { --nt-alert-tone: #7BD88F; } html[data-nt-theme="dark"] .nt-alerts-widget :is(.nt-alerts-widget__title, .nt-alerts-widget__row-toggle, .nt-alerts-widget__kind, .nt-alerts-widget__stops-label, .nt-alerts-widget__when strong) { color: var(--ntc-text) !important; } html[data-nt-theme="dark"] .nt-alerts-widget .nt-alerts-widget__stop-tag--closed { color: #000014 !important; }