/* NordBus v2 - Branding intensity overlays Three tiers stamped on via [data-brand]: "max" → full brand (current default). Violet on eyebrows, em accents, chips, map cities, stats, CTA banner. "med" → most accents drop to navy/grey. Violet survives on primary CTAs, the Stats band and the CTA banner. "min" → strictest. Violet only on solid primary CTA buttons and the first 1–3 emphasis words in the hero/h2. Stats band + CTA banner also flatten to navy. Brand is now barely felt. ------------------------------------------------------------------ */ /* ──────────────────────────────────────────────────────────────────── MED ── used to be "min". Strips violet from eyebrows, list accents, service amenity tints, fleet tabs, news meta, citi numbers and the map overview swatches. Stats band + CTA banner still get the brand. ──────────────────────────────────────────────────────────────────── */ /* Section heads */ [data-brand="med"] .h2-section-head .eb { color: var(--t-fg-faint, var(--fg-3)); } [data-brand="med"] .h2-section-head h2 em { color: var(--t-fg, var(--nb-navy)); font-style: italic; font-weight: 800; } [data-brand="med"] .h2-why-l .eb { color: var(--t-fg-faint, var(--fg-3)); } [data-brand="med"] .h2-why-l h2 em, [data-brand="med"] .h2-why-l h2 .pause { color: var(--t-fg, var(--nb-navy)); font-style: italic; } /* Hero - keep dark photo bg, drop the violet trim */ [data-brand="med"] .h2-hero-eyebrow { color: rgba(237,235,224,.72); } [data-brand="med"] .h2-hero-eyebrow::before { background: rgba(237,235,224,.45); } [data-brand="med"] .h2-hero-h1 .accent { color: var(--nb-sugar); font-style: italic; } [data-brand="med"] .h2-hero-trust .icn { background: rgba(237,235,224,.10); color: rgba(237,235,224,.85); } [data-brand="med"] .h2-hero-trust .icn img.icn { filter: brightness(0) saturate(100%) invert(95%); } [data-brand="med"] .h2-hero-card .tabs .icn { color: var(--t-fg, var(--nb-navy)); } /* Nav phone icon */ [data-brand="med"] .h2-nav-tel .icn { color: var(--t-fg, var(--nb-navy)); } /* Service chips + why-point badges → flat neutral */ [data-brand="med"] .h2-svc-amen-i, [data-brand="med"] .h2-why-points .h2-why-point-i { background: rgba(23,18,28,.06); color: var(--t-fg-muted, var(--fg-2)); } [data-brand="med"] .h2-svc-amen-i img.icn, [data-brand="med"] .h2-why-points .h2-why-point-i img.icn, [data-brand="med"] .h2-unit-feats img.icn, [data-brand="med"] .h2-svc-edit-aside .amen img.icn { filter: brightness(0) saturate(100%) invert(8%) sepia(18%) saturate(2400%) hue-rotate(208deg) brightness(95%) contrast(98%); } [data-brand="med"] .h2-unit-feats .icn { color: var(--t-fg, var(--nb-navy)); } /* Fleet - neutral tabs */ [data-brand="med"] .h2-fleet-tab .cnt { color: var(--t-fg-muted, var(--fg-2)); background: rgba(23,18,28,.08); } [data-brand="med"] .h2-fleet-tab[aria-selected="true"] { color: var(--t-fg, var(--nb-navy)); border-bottom-color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-fleet-tab[aria-selected="true"] .cnt { background: var(--nb-navy); color: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-fleet-tab[aria-selected="true"] { color: var(--nb-sugar); border-bottom-color: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-fleet-tab[aria-selected="true"] .cnt { background: var(--nb-sugar); color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-unit-foot a { color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-unit-foot a { color: var(--nb-sugar); } /* Fleet spotlight + strip */ [data-brand="med"] .h2-fleet-spot .info .feats .icn { color: var(--t-fg-muted, var(--fg-2)); } [data-brand="med"] .h2-fleet-strip .t-no { color: var(--t-fg-faint, var(--fg-3)); } [data-brand="med"] .h2-fleet-strip .thumb.is-active { border-color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-fleet-strip .thumb.is-active { border-color: var(--nb-sugar); } /* Citi */ [data-brand="med"] .h2-citi-row .num { color: var(--t-fg-faint, var(--fg-3)); } [data-brand="med"] .h2-citi-row .cta { color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-citi-row .cta:hover { background: var(--nb-navy); color: var(--nb-sugar); border-color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-citi-row .cta { color: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-citi-row .cta:hover { background: var(--nb-sugar); color: var(--t-fg, var(--nb-navy)); border-color: var(--nb-sugar); } /* News */ [data-brand="med"] .h2-news-card .h2-news-meta b { color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-news-card .h2-news-meta b { color: var(--nb-sugar); } /* Map overview */ [data-brand="med"] .h2-map-canvas .city, [data-brand="med"] .h2-map-canvas .city.origin { fill: var(--nb-navy); } [data-brand="med"] .h2-map-canvas .country.home { stroke: var(--nb-navy); } [data-brand="med"] .h2-map-canvas .route { stroke: rgba(14,26,51,.55); } [data-brand="med"] .h2-map-canvas .route.long { stroke: rgba(14,26,51,.30); } [data-brand="med"] .h2-map-canvas .city-label { fill: var(--nb-navy); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .city, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .city.origin { fill: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .country.home { stroke: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .route { stroke: rgba(237,235,224,.55); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .route.long { stroke: rgba(237,235,224,.30); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .city-label { fill: var(--nb-sugar); } /* Map directory */ [data-brand="med"] .h2-map-dir .card .freq { color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-map-dir .card .route .line { color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-map-dir .card .meta .icn { color: var(--t-fg-muted, var(--fg-2)); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-dir .card .freq { color: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-dir .card .route .line { color: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-dir .card .meta .icn { color: rgba(237,235,224,.72); } /* Services editorial list accents */ [data-brand="med"] .h2-svc-edit-list li.is-on .num { color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-svc-edit-list li.is-on .t { color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-svc-edit-list li.is-on .arr { color: var(--t-fg, var(--nb-navy)); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-svc-edit-list li.is-on .num, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-svc-edit-list li.is-on .t, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-svc-edit-list li.is-on .arr { color: var(--nb-sugar); } /* Services accordion CTA stays violet - it's a primary action */ /* ──────────────────────────────────────────────────────────────────── MIN ── strictest. Inherits everything from MED (we re-state via :is(...) to keep the chain explicit). Then ALSO drops the brand from the Stats band and the CTA banner, leaving only solid CTA buttons + the .accent em on the hero/h2 (which we limit to navy italics so it's an emphasis word, not a color). ──────────────────────────────────────────────────────────────────── */ /* Inherit MED rules by repeating selectors - cleaner than @apply. */ [data-brand="min"] .h2-section-head .eb { color: var(--t-fg-faint, var(--fg-3)); } [data-brand="min"] .h2-section-head h2 em { color: var(--t-fg, var(--nb-navy)); font-style: italic; font-weight: 800; } [data-brand="min"] .h2-why-l .eb { color: var(--t-fg-faint, var(--fg-3)); } [data-brand="min"] .h2-why-l h2 em, [data-brand="min"] .h2-why-l h2 .pause { color: var(--t-fg, var(--nb-navy)); font-style: italic; } [data-brand="min"] .h2-hero-eyebrow { color: rgba(237,235,224,.72); } [data-brand="min"] .h2-hero-eyebrow::before { background: rgba(237,235,224,.45); } [data-brand="min"] .h2-hero-h1 .accent { color: var(--nb-sugar); font-style: italic; } [data-brand="min"] .h2-hero-trust .icn { background: rgba(237,235,224,.10); color: rgba(237,235,224,.85); } [data-brand="min"] .h2-hero-trust .icn img.icn { filter: brightness(0) saturate(100%) invert(95%); } [data-brand="min"] .h2-hero-card .tabs .icn { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-nav-tel .icn { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-svc-amen-i, [data-brand="min"] .h2-why-points .h2-why-point-i { background: rgba(23,18,28,.06); color: var(--t-fg-muted, var(--fg-2)); } [data-brand="min"] .h2-svc-amen-i img.icn, [data-brand="min"] .h2-why-points .h2-why-point-i img.icn, [data-brand="min"] .h2-unit-feats img.icn, [data-brand="min"] .h2-svc-edit-aside .amen img.icn { filter: brightness(0) saturate(100%) invert(8%) sepia(18%) saturate(2400%) hue-rotate(208deg) brightness(95%) contrast(98%); } [data-brand="min"] .h2-unit-feats .icn { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-fleet-tab .cnt { color: var(--t-fg-muted, var(--fg-2)); background: rgba(23,18,28,.08); } [data-brand="min"] .h2-fleet-tab[aria-selected="true"] { color: var(--t-fg, var(--nb-navy)); border-bottom-color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-fleet-tab[aria-selected="true"] .cnt { background: var(--nb-navy); color: var(--nb-sugar); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-fleet-tab[aria-selected="true"] { color: var(--nb-sugar); border-bottom-color: var(--nb-sugar); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-fleet-tab[aria-selected="true"] .cnt { background: var(--nb-sugar); color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-unit-foot a { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-unit-foot a { color: var(--nb-sugar); } [data-brand="min"] .h2-fleet-spot .info .feats .icn { color: var(--t-fg-muted, var(--fg-2)); } [data-brand="min"] .h2-fleet-strip .t-no { color: var(--t-fg-faint, var(--fg-3)); } [data-brand="min"] .h2-fleet-strip .thumb.is-active { border-color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-fleet-strip .thumb.is-active { border-color: var(--nb-sugar); } [data-brand="min"] .h2-citi-row .num { color: var(--t-fg-faint, var(--fg-3)); } [data-brand="min"] .h2-citi-row .cta { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-citi-row .cta:hover { background: var(--nb-navy); color: var(--nb-sugar); border-color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-citi-row .cta { color: var(--nb-sugar); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-citi-row .cta:hover { background: var(--nb-sugar); color: var(--t-fg, var(--nb-navy)); border-color: var(--nb-sugar); } [data-brand="min"] .h2-news-card .h2-news-meta b { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-news-card .h2-news-meta b { color: var(--nb-sugar); } [data-brand="min"] .h2-map-canvas .city, [data-brand="min"] .h2-map-canvas .city.origin { fill: var(--nb-navy); } [data-brand="min"] .h2-map-canvas .country.home { stroke: var(--nb-navy); } [data-brand="min"] .h2-map-canvas .route { stroke: rgba(14,26,51,.55); } [data-brand="min"] .h2-map-canvas .route.long { stroke: rgba(14,26,51,.30); } [data-brand="min"] .h2-map-canvas .city-label { fill: var(--nb-navy); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .city, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .city.origin { fill: var(--nb-sugar); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .country.home { stroke: var(--nb-sugar); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .route { stroke: rgba(237,235,224,.55); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .route.long { stroke: rgba(237,235,224,.30); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .city-label { fill: var(--nb-sugar); } [data-brand="min"] .h2-map-dir .card .freq { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-map-dir .card .route .line { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-map-dir .card .meta .icn { color: var(--t-fg-muted, var(--fg-2)); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-dir .card .freq { color: var(--nb-sugar); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-dir .card .route .line { color: var(--nb-sugar); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-dir .card .meta .icn { color: rgba(237,235,224,.72); } [data-brand="min"] .h2-svc-edit-list li.is-on .num { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-svc-edit-list li.is-on .t { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-svc-edit-list li.is-on .arr { color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-themed[data-theme="ink"] .h2-svc-edit-list li.is-on .num, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-svc-edit-list li.is-on .t, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-svc-edit-list li.is-on .arr { color: var(--nb-sugar); } /* MIN-only further restrictions ─────────────────────────────────────── */ /* Stats band - when the section is on its default violet bg, flatten to ink instead. If the user has explicitly picked a light theme for stats (sugar / sugar2 / white), respect that and don't override. */ [data-brand="min"] .h2-stats[data-theme="violet"] { background: var(--nb-ink); } [data-brand="min"] .h2-stats[data-theme="violet"] .h2-stats-l .eb, [data-brand="min"] .h2-stats[data-theme="ink"] .h2-stats-l .eb { color: rgba(237,235,224,.55); } [data-brand="min"] .h2-stats[data-theme="violet"] .h2-stat .v .accent, [data-brand="min"] .h2-stats[data-theme="violet"] .h2-stat .v span, [data-brand="min"] .h2-stats[data-theme="ink"] .h2-stat .v .accent, [data-brand="min"] .h2-stats[data-theme="ink"] .h2-stat .v span { color: var(--nb-sugar); } /* CTA banner - flatten violet-deep to ink, light em → sugar italic */ [data-brand="min"] .h2-cta { background: var(--nb-ink); } [data-brand="min"] .h2-cta-l h2 em { color: var(--nb-sugar); font-style: italic; } [data-brand="min"] .h2-cta-r .em a { color: var(--nb-sugar); } [data-brand="min"] .h2-cta-r .h2-btn--prim { background: var(--nb-sugar); color: var(--t-fg, var(--nb-navy)); } [data-brand="min"] .h2-cta-r .h2-btn--prim:hover { background: var(--nb-sugar); color: var(--t-fg, var(--nb-navy)); opacity: .85; } /* Quote-bar submit + service-accordion CTA + spotlight spec button are the ONLY surfaces that keep the brand color in min mode. They're handled by their inline backgrounds in home2.css and need no override here. */ /* ──────────────────────────────────────────────────────────────────── Theme-aware contrast safety The base brand=med/min rules above use neutral navy/grey for "muted" text. Inside dark themed sections those colors are invisible - these overrides redirect every accent through theme-aware tokens so a navy section on ink (or violet) reads correctly. ──────────────────────────────────────────────────────────────────── */ /* SVG icon tint - on dark sections in med/min, lift to sugar (off-white) */ [data-brand="med"] .h2-themed[data-theme="ink"] .h2-svc-amen-i img.icn, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-svc-amen-i img.icn, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-why-points .h2-why-point-i img.icn, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-why-points .h2-why-point-i img.icn, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-unit-feats img.icn, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-unit-feats img.icn, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-svc-edit-aside .amen img.icn, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-svc-edit-aside .amen img.icn, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-svc-amen-i img.icn, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-svc-amen-i img.icn, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-why-points .h2-why-point-i img.icn, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-why-points .h2-why-point-i img.icn, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-unit-feats img.icn, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-unit-feats img.icn, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-svc-edit-aside .amen img.icn, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-svc-edit-aside .amen img.icn { filter: brightness(0) saturate(100%) invert(95%); } /* Service amenity badges + why-point badges - translucent sugar on dark */ [data-brand="med"] .h2-themed[data-theme="ink"] .h2-svc-amen-i, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-svc-amen-i, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-why-points .h2-why-point-i, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-why-points .h2-why-point-i, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-svc-amen-i, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-svc-amen-i, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-why-points .h2-why-point-i, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-why-points .h2-why-point-i { background: rgba(237,235,224,.10); color: rgba(237,235,224,.85); } /* Fleet feat icon glyphs (non-SVG fallback) */ [data-brand="med"] .h2-themed[data-theme="ink"] .h2-unit-feats .icn, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-unit-feats .icn, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-unit-feats .icn, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-unit-feats .icn { color: rgba(237,235,224,.85); } /* News meta + map directory accents - sugar on dark */ [data-brand="med"] .h2-themed[data-theme="ink"] .h2-news-card .h2-news-meta b, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-news-card .h2-news-meta b, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-news-card .h2-news-meta b, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-news-card .h2-news-meta b, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-dir .card .freq, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-map-dir .card .freq, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-dir .card .route .line, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-map-dir .card .route .line, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-dir .card .freq, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-map-dir .card .freq, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-dir .card .route .line, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-map-dir .card .route .line { color: var(--nb-sugar); } /* Map overview SVG city/route fills on dark */ [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .city, [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .city.origin, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-map-canvas .city, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-map-canvas .city.origin, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .city, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .city.origin, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-map-canvas .city, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-map-canvas .city.origin { fill: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .country.home, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-map-canvas .country.home, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .country.home, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-map-canvas .country.home { stroke: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .city-label, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-map-canvas .city-label, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .city-label, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-map-canvas .city-label { fill: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .route, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-map-canvas .route, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .route, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-map-canvas .route { stroke: rgba(237,235,224,.55); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-map-canvas .route.long, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-map-canvas .route.long, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-map-canvas .route.long, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-map-canvas .route.long { stroke: rgba(237,235,224,.30); } /* Spotlight strip is-active border on dark */ [data-brand="med"] .h2-themed[data-theme="ink"] .h2-fleet-strip .thumb.is-active, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-fleet-strip .thumb.is-active, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-fleet-strip .thumb.is-active, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-fleet-strip .thumb.is-active { border-color: var(--nb-sugar); } /* Citi cta on dark */ [data-brand="med"] .h2-themed[data-theme="ink"] .h2-citi-row .cta, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-citi-row .cta, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-citi-row .cta, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-citi-row .cta { color: var(--nb-sugar); border-color: rgba(237,235,224,.20); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-citi-row .cta:hover, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-citi-row .cta:hover, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-citi-row .cta:hover, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-citi-row .cta:hover { background: var(--nb-sugar); color: var(--nb-navy); border-color: var(--nb-sugar); } /* Fleet tabs on dark in med/min - already addressed earlier, kept here as a safety net so the cascade order is explicit. */ [data-brand="med"] .h2-themed[data-theme="ink"] .h2-fleet-tab[aria-selected="true"], [data-brand="med"] .h2-themed[data-theme="violet"] .h2-fleet-tab[aria-selected="true"], [data-brand="min"] .h2-themed[data-theme="ink"] .h2-fleet-tab[aria-selected="true"], [data-brand="min"] .h2-themed[data-theme="violet"] .h2-fleet-tab[aria-selected="true"] { color: var(--nb-sugar); border-bottom-color: var(--nb-sugar); } [data-brand="med"] .h2-themed[data-theme="ink"] .h2-fleet-tab[aria-selected="true"] .cnt, [data-brand="med"] .h2-themed[data-theme="violet"] .h2-fleet-tab[aria-selected="true"] .cnt, [data-brand="min"] .h2-themed[data-theme="ink"] .h2-fleet-tab[aria-selected="true"] .cnt, [data-brand="min"] .h2-themed[data-theme="violet"] .h2-fleet-tab[aria-selected="true"] .cnt { background: var(--nb-sugar); color: var(--nb-navy); } /* ─── User directive: services-section icons stay one color ──────────── Same logic as the bus PNGs - the asset color is fixed (#6E2297 in the source SVGs); only the surrounding theme background changes. Override every brand-intensity + theme filter that was tinting these icons. */ .h2-services img.icn, .h2-services .icn, [data-brand] .h2-services img.icn, [data-brand] .h2-services .icn, [data-brand] .h2-themed[data-theme] .h2-services img.icn, [data-brand] .h2-themed[data-theme] .h2-services .icn { filter: none !important; } /* …except on dark themes (ink / violet), where the fixed #6E2297 violet disappears into the background. Lift to violet-light (#C495E5) so the icons stay readable. Higher-specificity selector + !important beats the blanket reset above. */ .h2-services.h2-themed[data-theme="ink"] img.icn, .h2-services.h2-themed[data-theme="violet"] img.icn, [data-brand] .h2-services.h2-themed[data-theme="ink"] img.icn, [data-brand] .h2-services.h2-themed[data-theme="violet"] img.icn { filter: brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(740%) hue-rotate(229deg) brightness(95%) contrast(92%) !important; } /* ───────────────────────────────────────────────────────────────────── AUTOPARKS BAND + SERVICES CTA · brand intensity overrides Both surfaces default to a brand-violet gradient (set in home2-variants / home2.css). They were added after the original brand=med/min cascade, so this block bolts them onto the same pattern: flatten violet→navy at med, navy→ink at min, matching the Stats band + H2Cta banner. ───────────────────────────────────────────────────────────────────── */ /* Brand=med — violet gradient → muted navy gradient */ [data-brand="med"] .h2-fleet-band, [data-brand="med"] .h2-svc-cta { background: linear-gradient(135deg, var(--nb-navy-soft, #1B264A) 0%, var(--nb-navy, #0E1A33) 100%); } [data-brand="med"] .h2-fleet-band-cell.is-active::after { background: var(--nb-sugar); } [data-brand="med"] .h2-svc-cta-l .eb { color: rgba(237, 235, 224, .55); } [data-brand="med"] .h2-svc-cta-l h3 em { background-image: linear-gradient(var(--nb-sugar) 0%, var(--nb-sugar) 100%); } /* Brand=min — flatten to pure ink */ [data-brand="min"] .h2-fleet-band, [data-brand="min"] .h2-svc-cta { background: var(--nb-ink); } [data-brand="min"] .h2-fleet-band-cell.is-active::after { background: var(--nb-sugar); } [data-brand="min"] .h2-svc-cta-l .eb { color: rgba(237, 235, 224, .55); } [data-brand="min"] .h2-svc-cta-l h3 em { background-image: linear-gradient(var(--nb-sugar) 0%, var(--nb-sugar) 100%); } /* ───────────────────────────────────────────────────────────────────── AUTOPARKS BAND + SERVICES CTA · per-section theme overrides When the surrounding section is themed `violet` (deep-violet bg), the default violet band would blend into the section bg. Push the band / CTA gradient darker so they still read as distinct highlight surfaces. Brand=med/min already flattens the bg so those cases skip this rule. ───────────────────────────────────────────────────────────────────── */ .h2-fleet[data-theme="violet"] .h2-fleet-band, .h2-services[data-theme="violet"] .h2-svc-cta { background: linear-gradient(135deg, var(--nb-violet-deep) 0%, #0c0026 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } /* Ink-themed section + violet band reads fine (dark next to dark-violet), no override. Light themes use the default violet gradient — also fine. */