/* ========================================================= ZTM Kielce — Theme mode: jasny / wysoki kontrast Klasa .ztm-hc na włącza wysoki kontrast. Ciemny tryb usunięty. Logo (.ztm-logo-block) nigdy nie jest modyfikowane. Kontrast WCAG AA: min. 4.5:1 dla każdej kombinacji. ========================================================= */ /* ── Przycisk trybu (topbar + drawer) ───────────────────── */ .ztm-theme-mode-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--ztm-border-grey); border-radius: 5px; background: var(--ztm-white); cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, background 0.15s; position: relative; overflow: hidden; } .ztm-theme-mode-btn svg { width: 20px; height: 20px; } .ztm-theme-mode-btn:hover { border-color: var(--ztm-navy); background: #f0f4fb; } .ztm-theme-mode-btn:focus-visible { outline: 3px solid var(--ztm-navy); outline-offset: 2px; border-radius: 4px; } /* Wersja w drawerze — szersza, z etykietą tekstową */ .ztm-theme-mode-btn--drawer { width: auto; padding: 0 18px; gap: 12px; font-family: var(--ztm-font); font-size: 15px; font-weight: 600; color: #1c2230; justify-content: flex-start; } .ztm-theme-mode-btn--drawer .ztm-theme-mode-label { pointer-events: none; } /* HC — przycisk */ body.ztm-hc .ztm-theme-mode-btn { background: #000; border-color: #fff; } body.ztm-hc .ztm-theme-mode-btn:hover { background: #ff0; border-color: #ff0; } body.ztm-hc .ztm-theme-mode-btn:hover svg { stroke: #000 !important; } body.ztm-hc .ztm-theme-mode-btn--drawer { color: #fff; } body.ztm-hc .ztm-theme-mode-btn--drawer:hover { color: #000; } /* ========================================================= TRYB WYSOKIEGO KONTRASTU ========================================================= */ body.ztm-hc { background: #000; color: #fff; } body.ztm-hc *:focus-visible { outline: 3px solid #ff0 !important; outline-offset: 2px !important; } body.ztm-hc a { color: #ff0; } body.ztm-hc a:hover { color: #ff0; text-decoration: underline; } /* Topbar */ body.ztm-hc .ztm-topbar { background: #000; border-bottom: 2px solid #fff; } body.ztm-hc .ztm-nav a { color: #ff0; } body.ztm-hc .ztm-nav a:hover { color: #ff0; text-decoration: underline; } body.ztm-hc .ztm-font-size button { background: #000; border-color: #fff; color: #fff; font-family: var(--ztm-font); } body.ztm-hc .ztm-font-size button:hover { background: #ff0; color: #000; border-color: #ff0; } body.ztm-hc .ztm-divider { background: #fff; } body.ztm-hc .ztm-lang-switch a { color: #ff0; opacity: 1; } body.ztm-hc .ztm-lang-switch a.is-active { color: #fff; } body.ztm-hc .ztm-lang-switch a span { color: inherit; } body.ztm-hc .ztm-settings-toggle { background: #000; border-color: #fff; } body.ztm-hc .ztm-settings-toggle svg { stroke: #fff; } body.ztm-hc .ztm-settings-panel { background: #000; border: 2px solid #fff; box-shadow: none; } body.ztm-hc .ztm-settings-group { background: #111; } body.ztm-hc .ztm-settings-group button, body.ztm-hc .ztm-settings-group a { color: #fff; background: transparent; } body.ztm-hc .ztm-settings-group button.is-active, body.ztm-hc .ztm-settings-group a.is-active { background: #ff0; color: #000; box-shadow: none; } body.ztm-hc .ztm-settings-group button:hover, body.ztm-hc .ztm-settings-group a:hover { background: #ff0; color: #000; } body.ztm-hc .ztm-settings-group-label { color: #aaa; } body.ztm-hc .ztm-settings-divider { border-top-color: #444; } body.ztm-hc .ztm-search input[type="search"] { background: #000; color: #fff; border-color: #fff; } body.ztm-hc .ztm-search input[type="search"]::placeholder { color: #aaa; } body.ztm-hc .ztm-search button { background: #fff; } body.ztm-hc .ztm-search button:hover { background: #ff0; } body.ztm-hc .ztm-search button svg { stroke: #000; } body.ztm-hc .ztm-hamburger svg { stroke: #fff; } /* Hero */ body.ztm-hc .ztm-hero { background: #000; } body.ztm-hc .ztm-hero-photos { filter: grayscale(100%) contrast(1.5); opacity: 0.25; } body.ztm-hc .ztm-hero-text-block { background: #000; } body.ztm-hc .ztm-hero-title { color: #fff; } body.ztm-hc .ztm-hero-subtitle { color: #ccc; } body.ztm-hc .ztm-hero-divider { background: #ff0; } /* Tabs */ body.ztm-hc .ztm-tabs-wrap { background: #000; } body.ztm-hc .ztm-tabs { background: #000; border: 2px solid #fff; box-shadow: none; } body.ztm-hc .ztm-tab { color: #ccc; } body.ztm-hc .ztm-tab svg { stroke: #ccc; } body.ztm-hc .ztm-tab:not(:first-child)::before { background: #444; } body.ztm-hc .ztm-tab:hover { color: #ff0; } body.ztm-hc .ztm-tab:hover svg { stroke: #ff0; } body.ztm-hc .ztm-tab.is-active { color: #ff0; border-bottom-color: #ff0; } body.ztm-hc .ztm-tab.is-active svg { stroke: #ff0; } /* Drawer */ body.ztm-hc .ztm-drawer-overlay { background: rgba(0,0,0,0.85); } body.ztm-hc .ztm-drawer { background: #000; border-left: 2px solid #fff; } body.ztm-hc .ztm-drawer-header { border-bottom: 2px solid #fff; } body.ztm-hc .ztm-drawer-header span { color: #fff; } body.ztm-hc .ztm-drawer-close svg { stroke: #fff; } body.ztm-hc .ztm-drawer-section-label { color: #aaa; } body.ztm-hc .ztm-drawer a { color: #ff0; border-bottom-color: #333; } body.ztm-hc .ztm-drawer a:hover { color: #fff; text-decoration: underline; } body.ztm-hc .ztm-drawer a svg { stroke: #ff0; } body.ztm-hc .ztm-drawer a.is-active { background: #111; color: #fff; } body.ztm-hc .ztm-drawer-lang a, body.ztm-hc .ztm-drawer-lang button { background: #000; border-color: #fff; color: #fff; font-family: var(--ztm-font); } body.ztm-hc .ztm-drawer-lang a:hover, body.ztm-hc .ztm-drawer-lang button:hover { background: #ff0; color: #000; border-color: #ff0; } body.ztm-hc .ztm-drawer-lang a.is-active { background: #ff0; color: #000; border-color: #ff0; } /* Content */ body.ztm-hc .ztm-placeholder { background: #000; border-color: #fff; } body.ztm-hc .ztm-placeholder-label { color: #ccc; } /* Widget Aktualności */ body.ztm-hc .ztm-widget--news { background: #000; } body.ztm-hc .ztm-news-badge { background: #ff0; color: #000; } body.ztm-hc .ztm-news-title { color: #fff; } body.ztm-hc .ztm-news-subtitle { color: #ccc; } body.ztm-hc .ztm-news-item svg { stroke: #ff0; } body.ztm-hc .ztm-news-item-title { color: #fff; } body.ztm-hc .ztm-news-item-desc { color: #ccc; } body.ztm-hc .ztm-news-dot { background: #555; } body.ztm-hc .ztm-news-dot.is-active { background: #ff0; } body.ztm-hc .ztm-news-arrow { background: #000; border-color: #fff; color: #fff; } body.ztm-hc .ztm-news-arrow:hover { background: #ff0; border-color: #ff0; color: #000; } body.ztm-hc .ztm-news-readmore { background: #ff0; color: #000; } body.ztm-hc .ztm-news-readmore:hover { background: #fff; color: #000; } /* Widget Rozkład Jazdy */ body.ztm-hc .ztm-widget--rozklad-jazdy { background: #000; } body.ztm-hc .ztm-widget-title { color: #fff; } body.ztm-hc .ztm-rj-action { background: #000; border-color: #fff; color: #fff; } body.ztm-hc .ztm-rj-action * { color: #fff; } body.ztm-hc .ztm-rj-action span { color: #fff !important; } body.ztm-hc .ztm-rj-action svg { stroke: #ff0 !important; fill: none; } body.ztm-hc .ztm-rj-action:hover { background: #ff0; color: #000; border-color: #ff0; } body.ztm-hc .ztm-rj-action:hover * { color: #000; } body.ztm-hc .ztm-rj-action:hover span { color: #000 !important; } body.ztm-hc .ztm-rj-action:hover svg { stroke: #000 !important; } body.ztm-hc .ztm-rj-category-label { color: #aaa; } body.ztm-hc .ztm-rj-line { background: #000; border-color: #fff; color: #ff0; } body.ztm-hc .ztm-rj-line:hover { background: #ff0; color: #000; border-color: #ff0; } /* Widget Informacje */ body.ztm-hc [data-ztm-info-widget] { background: #000; color: #fff; } body.ztm-hc .ztm-info-item { border-bottom-color: #444; } body.ztm-hc .ztm-info-thumb-placeholder { background: #111; border-color: #fff; color: #ff0; } body.ztm-hc .ztm-info-thumb-placeholder span { color: #ccc; } body.ztm-hc .ztm-info-title a { color: #fff; } body.ztm-hc .ztm-info-title a:hover { color: #ff0; } body.ztm-hc .ztm-info-date { color: #aaa; } body.ztm-hc .ztm-info-date svg { stroke: #aaa; } body.ztm-hc .ztm-info-excerpt, body.ztm-hc .ztm-info-excerpt p { color: #ccc; } body.ztm-hc .ztm-info-readmore { color: #ff0; } body.ztm-hc .ztm-info-readmore:hover { color: #fff; text-decoration: underline; } body.ztm-hc .page-numbers { background: #000; border-color: #fff; color: #fff; } body.ztm-hc .page-numbers.current { background: #ff0; color: #000; border-color: #ff0; } body.ztm-hc .page-numbers:hover:not(:disabled) { background: #ff0; color: #000; border-color: #ff0; } body.ztm-hc .page-numbers:disabled { color: #555; border-color: #333; } /* Widget Banery */ body.ztm-hc .ztm-widget--banery-promocyjne { background: #000; } body.ztm-hc .ztm-baner-title { color: #fff; } body.ztm-hc .ztm-baner-desc { color: #ccc; } /* Footer */ body.ztm-hc .ztm-footer { background: #000; border-top: 2px solid #fff; } body.ztm-hc .ztm-footer-heading { color: #fff; } body.ztm-hc .ztm-footer-desc { color: #ccc; } body.ztm-hc .ztm-footer-links a { color: #ff0; } body.ztm-hc .ztm-footer-links a:hover { color: #ff0; text-decoration: underline; } body.ztm-hc .ztm-footer-contact a { color: #ff0; } body.ztm-hc .ztm-footer-contact a:hover { text-decoration: underline; } body.ztm-hc .ztm-footer-contact span { color: #ccc; } body.ztm-hc .ztm-footer-contact svg { stroke: #ff0; } body.ztm-hc .ztm-footer-social a { color: #ff0; } body.ztm-hc .ztm-footer-social a:hover { color: #ff0; text-decoration: underline; } body.ztm-hc .ztm-footer-bottom { border-top-color: #555; } body.ztm-hc .ztm-footer-copyright { color: #aaa; } body.ztm-hc .ztm-footer-bottom-links a { color: #ff0; } body.ztm-hc .ztm-footer-bottom-links a:hover { color: #ff0; text-decoration: underline; } /* ========================================================= WIDGET ROZKŁADY JAZDY — SPA (/rozklady-jazdy/) .ztm-rj-full i wszystko w środku: zakładki Linie/Przystanki, szukajka, lista linii, trasa + mapa, odjazdy z przystanku, filtry dzień/linia/godzina, lista przystanków. Ten komponent powstał po tym pliku, więc nie miał wcześniej żadnych reguł HC — bez tego bloku wysoki kontrast po prostu nic tu nie zmieniał. ========================================================= */ body.ztm-hc .ztm-rj-full { background: #000; border: 1px solid #fff; box-shadow: none; color: #fff; } /* Topbar / zakładki Linie-Przystanki / szukajka */ body.ztm-hc .ztm-rj-topbar { background: #000; border-bottom-color: #fff; } body.ztm-hc .ztm-rj-tabs-switch { background: #111; } body.ztm-hc .ztm-rj-tab-btn { color: #fff; } body.ztm-hc .ztm-rj-tab-btn:hover:not(.is-active) { background: #222; color: #ff0; } body.ztm-hc .ztm-rj-tab-btn.is-active { background: #ff0; color: #000; box-shadow: none; } body.ztm-hc .ztm-rj-fav-filter { color: #fff; } body.ztm-hc .ztm-rj-fav-filter:hover { background: #222; color: #ff0; } body.ztm-hc .ztm-rj-fav-filter.is-active { background: transparent; color: #ff0; } body.ztm-hc .ztm-rj-fav-filter.is-active svg { fill: #ff0; } body.ztm-hc .ztm-rj-search-wrap { background: #111; } body.ztm-hc .ztm-rj-search-wrap:focus-within { background: #000; box-shadow: 0 0 0 2px #ff0; } body.ztm-hc .ztm-rj-search { color: #fff; } body.ztm-hc .ztm-rj-search::placeholder { color: #aaa; } body.ztm-hc .ztm-rj-search-btn { background: #fff; color: #000; } body.ztm-hc .ztm-rj-search-btn:hover { background: #ff0; } body.ztm-hc .ztm-rj-search-btn svg { stroke: #000; } body.ztm-hc .ztm-rj-view-header { color: #ccc; } body.ztm-hc .ztm-rj-view-header svg { stroke: #ff0; } body.ztm-hc .ztm-rj-back { color: #ff0; } body.ztm-hc .ztm-rj-empty { color: #ccc; } /* Widok 1 — lista linii */ body.ztm-hc .ztm-rj-linia { background: #000; border-color: #fff; } body.ztm-hc .ztm-rj-linia:hover { border-color: #ff0; box-shadow: none; } body.ztm-hc .ztm-rj-nr-val, body.ztm-hc .ztm-rj-trasa-nr, body.ztm-hc .ztm-rj-highlight-nr { background: #111; color: #ff0; border: 1px solid #fff; box-shadow: none; } body.ztm-hc .ztm-rj-nr-val::after, body.ztm-hc .ztm-rj-trasa-nr::after { background: #ff0; } body.ztm-hc .ztm-rj-kierunek { background: #111; } body.ztm-hc .ztm-rj-kierunek:hover, body.ztm-hc .ztm-rj-kierunek:focus-visible { background: #1a1a1a; } body.ztm-hc .ztm-rj-arrow { stroke: #ff0; } body.ztm-hc .ztm-rj-kierunek-nazwa { color: #fff; } body.ztm-hc .ztm-rj-kierunek-od, body.ztm-hc .ztm-rj-kierunek-do { color: #ccc; } body.ztm-hc .ztm-rj-kierunek-od strong, body.ztm-hc .ztm-rj-kierunek-do strong { color: #fff; } /* Widok 2 — trasa linii + mapa */ body.ztm-hc .ztm-rj-trasa-k { color: #ccc; } body.ztm-hc .ztm-rj-trasa-k svg { stroke: #aaa; } body.ztm-hc .ztm-rj-trasa-k:hover:not(.is-active) { background: #1a1a1a; } body.ztm-hc .ztm-rj-trasa-k.is-active { background: #111; box-shadow: none; border: 1px solid #ff0; } body.ztm-hc .ztm-rj-trasa-k.is-active svg { stroke: #ff0; } body.ztm-hc .ztm-rj-trasa-k strong { color: #aaa; } body.ztm-hc .ztm-rj-trasa-k span { color: #888; } body.ztm-hc .ztm-rj-trasa-k.is-active strong { color: #fff; } body.ztm-hc .ztm-rj-trasa-k.is-active span { color: #ccc; } body.ztm-hc .ztm-rj-trasa-split { border-color: #fff; box-shadow: none; } body.ztm-hc .ztm-rj-trasa-lista { border-right-color: #fff; } body.ztm-hc .ztm-rj-trasa-legend { border-bottom-color: #fff; } body.ztm-hc .ztm-rj-trasa-legend-item { color: #ccc; } body.ztm-hc .ztm-rj-trasa-legend-dot { background: #000; border-color: #fff; } body.ztm-hc .ztm-rj-trasa-legend-dot--end { background: #fff; } body.ztm-hc .ztm-rj-trasa-stop-time { color: #999; } body.ztm-hc .ztm-rj-trasa-stop-line::before { background: #444; } body.ztm-hc .ztm-rj-trasa-dot { background: #000; border-color: #fff; } body.ztm-hc .ztm-rj-trasa-dot--first, body.ztm-hc .ztm-rj-trasa-dot--last { background: #fff; } body.ztm-hc .ztm-rj-trasa-stop-name { color: #fff; } body.ztm-hc .ztm-rj-trasa-stop-name:hover, body.ztm-hc .ztm-rj-trasa-stop-name:focus-visible { color: #ff0; background: #1a1a1a; } /* Mapa (Leaflet) — kafelki rastrowe odwrócone do ciemnego wariantu; nasza warstwa wektorowa (trasa, markery) zostaje nietknięta. */ body.ztm-hc .ztm-rj-trasa-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.05); } body.ztm-hc .ztm-rj-trasa-map .leaflet-control-zoom a { background: #000 !important; color: #fff !important; border-bottom-color: #444 !important; } body.ztm-hc .ztm-rj-trasa-map .leaflet-control-zoom a:hover { background: #ff0 !important; color: #000 !important; } body.ztm-hc .ztm-rj-trasa-map .leaflet-tooltip, body.ztm-hc .ztm-rj-trasa-map .ztm-rj-map-label--end { background: #000; color: #fff; border-color: #fff; } body.ztm-hc .ztm-rj-map-bus-icon span { background: #ff0; border-color: #000; } body.ztm-hc .ztm-rj-map-bus-icon span::after { background: #000; } /* Widok 3 — odjazdy z przystanku */ body.ztm-hc .ztm-rj-odjazdy-title { color: #fff; } body.ztm-hc .ztm-rj-odjazdy-action { color: #ff0; } body.ztm-hc .ztm-rj-stopcard { background: #111; } body.ztm-hc .ztm-rj-stopcard-name { color: #fff; } body.ztm-hc .ztm-rj-stopcard-fav, body.ztm-hc .ztm-rj-fav { color: #555; } body.ztm-hc .ztm-rj-stopcard-fav:hover, body.ztm-hc .ztm-rj-stopcard-fav.is-fav, body.ztm-hc .ztm-rj-fav:hover, body.ztm-hc .ztm-rj-fav.is-fav { color: #ff0; } body.ztm-hc .ztm-rj-fav:hover { background: #1a1a1a; } body.ztm-hc .ztm-rj-odjazdy-linia-badge { background: #ff0; color: #000; } body.ztm-hc .ztm-rj-filter-label { color: #fff; } body.ztm-hc .ztm-rj-filter-opt { color: #aaa; } body.ztm-hc .ztm-rj-day-pill, body.ztm-hc .ztm-rj-linia-pill, body.ztm-hc .ztm-rj-day-more { background: #000; border-color: #fff; color: #fff; } body.ztm-hc .ztm-rj-day-pill span { color: #aaa; } body.ztm-hc .ztm-rj-day-pill:hover:not(.is-active), body.ztm-hc .ztm-rj-linia-pill:hover:not(.is-active), body.ztm-hc .ztm-rj-day-more:hover { border-color: #ff0; color: #ff0; background: #1a1a1a; } body.ztm-hc .ztm-rj-day-pill.is-active, body.ztm-hc .ztm-rj-linia-pill.is-active { background: #ff0; border-color: #ff0; color: #000; box-shadow: none; } body.ztm-hc .ztm-rj-day-pill.is-active span { color: #333; } body.ztm-hc .ztm-rj-linia-pill::after { background: #ff0; } body.ztm-hc .ztm-rj-linia-pill.is-active::after { background: #000; } body.ztm-hc .ztm-rj-linia-more { color: #aaa; border-style: dashed; } body.ztm-hc .ztm-rj-godzina-row { background: #111; } body.ztm-hc .ztm-rj-godzina-slider { background: #444; } body.ztm-hc .ztm-rj-godzina-slider::-webkit-slider-thumb, body.ztm-hc .ztm-rj-godzina-slider::-moz-range-thumb { background: #ff0; border-color: #000; box-shadow: none; } body.ztm-hc .ztm-rj-godzina-clock { color: #ccc; } /* Duży panel wyróżnienia linii + czasomierz */ body.ztm-hc .ztm-rj-linia-highlight { background: #111; border: 1px solid #fff; } body.ztm-hc .ztm-rj-highlight-label, body.ztm-hc .ztm-rj-highlight-timer-label { color: #ff0; } body.ztm-hc .ztm-rj-highlight-info strong { color: #fff; } body.ztm-hc .ztm-rj-highlight-od-do { color: #ccc; } body.ztm-hc .ztm-rj-highlight-timer { border-left-color: #444; } body.ztm-hc .ztm-rj-highlight-clock { color: #fff; } body.ztm-hc .ztm-rj-highlight-clock.is-now { color: #ff0; } /* Lista odjazdów */ body.ztm-hc .ztm-rj-dep-head { color: #aaa; border-bottom-color: #fff; } body.ztm-hc .ztm-rj-dep-row { border-bottom-color: #333; } body.ztm-hc .ztm-rj-dep-row:hover { background: #111; } body.ztm-hc .ztm-rj-dep-icon, body.ztm-hc .ztm-rj-dep-chevron { color: #ccc; } body.ztm-hc .ztm-rj-dep-chevron { stroke: #ccc; } body.ztm-hc .ztm-rj-dep-time { color: #fff; } body.ztm-hc .ztm-rj-dep-time.is-next, body.ztm-hc .ztm-rj-dep-eta.is-next { color: #ff6b6b; } body.ztm-hc .ztm-rj-dep-nr { background: #111; color: #ff0; } body.ztm-hc .ztm-rj-dep-info strong { color: #fff; } body.ztm-hc .ztm-rj-dep-info span { color: #aaa; } body.ztm-hc .ztm-rj-dep-eta { color: #ccc; } body.ztm-hc .ztm-rj-dep-more { background: #111; color: #ff0; } body.ztm-hc .ztm-rj-dep-more:hover { background: #1a1a1a; } /* Widok 4 — lista przystanków */ body.ztm-hc .ztm-rj-alpha-btn { color: #fff; } body.ztm-hc .ztm-rj-alpha-btn:hover { color: #ff0; background: #111; } body.ztm-hc .ztm-rj-alpha-btn.is-active { color: #ff0; border-bottom-color: #ff0; } body.ztm-hc .ztm-rj-grupa-header { background: #111; color: #ff0; } body.ztm-hc .ztm-rj-przystanek:hover { background: #111; } body.ztm-hc .ztm-rj-przystanek-nazwa { color: #fff; } body.ztm-hc .ztm-rj-przystanek-nazwa:hover, body.ztm-hc .ztm-rj-przystanek-nazwa:focus-visible { color: #ff0; } /* Focus widoczny też na elementach z role="button" (karta kierunku w trasie) */ body.ztm-hc .ztm-rj-full [role="button"]:focus-visible { outline: 3px solid #ff0 !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { .ztm-theme-mode-btn { transition-duration: 0.01ms !important; } body.ztm-hc .ztm-rj-full * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } @media (max-width: 636px) { .ztm-settings-toggle{display: none;} .ztm-theme-mode-btn{display: none;} }