/* Дизайн-система за зразком trenaldia.es: Archivo для заголовків, Hanken Grotesk для тексту, основний колір #0c6b6b, тонкі сірі лінії-розділювачі замість тіней, табло з великим часом. Світла і темна теми: data-theme на або системна. */ :root { /* Палітра «вказівник у метро»: глибокий бірюзовий — надійність і розклад, помаранчевий — дія (кнопки), зелений — «в дорозі», червоний лишається тільки для збоїв. Перевірено на контраст AA для тексту. */ --primary: #0c6b6b; --primary-deep: #095252; --primary-press: #063d3d; --primary-soft: #128f8f; --primary-subdued: #e3f1f1; --on-primary: #fff; --accent: #e2650f; --accent-deep: #c2540a; --canvas: #fff; --canvas-soft: #f3f4f6; --ink: #16181d; --ink-2: #2c2f37; --mute: #5b606b; --hairline: #d9dce1; --hairline-input: #bfc4cc; --eyebrow: #128f8f; --go: #1b7f4b; --warn: #b26a00; --bad: #c02b2b; --header-bg: rgba(255, 255, 255, .82); --chip-bg: #16181d; --chip-ink: #f3f4f2; --shadow: 0 1px 2px rgba(22, 24, 29, .07); --display: "Archivo", "Hanken Grotesk", system-ui, sans-serif; --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --radius: 8px; --max: 1120px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #14161b; --canvas-soft: #1b1e24; --ink: #f3f4f2; --ink-2: #d7d9dc; --mute: #9aa0aa; --hairline: rgba(255, 255, 255, .1); --hairline-input: rgba(255, 255, 255, .2); --eyebrow: #7fc0ee; --primary-soft: #6fb4e8; --primary-subdued: rgba(31, 111, 178, .2); --accent: #f2803a; --go: #4ade9b; --warn: #e7a83b; --bad: #f87171; --header-bg: rgba(20, 22, 27, .72); --chip-bg: #22262d; --chip-ink: #f3f4f2; --shadow: none; color-scheme: dark; } } :root[data-theme="dark"] { /* На темному тлі глибокий бірюзовий нечитабельний: беремо світліший тон. */ --primary: #2ea8a8; --primary-deep: #45c2c2; --primary-press: #5fd0d0; --canvas: #14161b; --canvas-soft: #1b1e24; --ink: #f3f4f2; --ink-2: #d7d9dc; --mute: #9aa0aa; --hairline: rgba(255, 255, 255, .1); --hairline-input: rgba(255, 255, 255, .2); --eyebrow: #5fd0d0; --primary-soft: #45c2c2; --primary-subdued: rgba(18, 143, 143, .22); --accent: #f2803a; --go: #4ade9b; --warn: #e7a83b; --bad: #f87171; --header-bg: rgba(20, 22, 27, .72); --chip-bg: #22262d; --chip-ink: #f3f4f2; --shadow: none; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* display:grid/flex переважає [hidden], тож ховаємо примусово. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.5 var(--text); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration-color: var(--hairline-input); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } p { margin: 0 0 .8em; } ul,ol{list-style:none;padding: 0;} h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -.025em; line-height: 1.08; } h2 { font-size: 24px; font-weight: 700; } h3 { font-size: 18px; font-weight: 600; } table {border-collapse: collapse;width: 100%;} button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; border-radius: 2px; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -999px; top: 8px; background: var(--canvas); padding: 8px 12px; z-index: 50; } .skip:focus { left: 8px; } .muted { color: var(--mute); } .num { font-variant-numeric: tabular-nums; white-space: nowrap; } .plain { list-style: none; margin: 0; padding: 0; } .note { color: var(--mute); font-size: 14px; } /* Дрібний капс-підпис: eyebrow, мета, заголовки колонок. */ .caps { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); } /* ---------------------------------------------------------------- шапка */ .top { position: sticky; top: 0; z-index: 1000; height: 65px; background: var(--header-bg); border-bottom: 1px solid var(--hairline); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } .top__row { display: flex; align-items: center; gap: 16px; height: 100%; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 17px; letter-spacing: -.018em; white-space: nowrap; } .brand img { width: 28px; height: 28px; display: block; } .top__sep { width: 1px; height: 24px; background: var(--hairline); } .netsel { position: relative; } .netsel summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 2px; /* font-size: 13px; */ font-weight: 500; background: var(--canvas-soft); color: var(--eyebrow); white-space: nowrap; } .netsel summary::-webkit-details-marker { display: none; } .netsel summary::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-soft); } .netsel summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); margin-left: 2px; } .netsel__menu { /* Меню довше за екран на ноутбуках: без власного скролу нижні пункти (Guías, Estaciones) лишалися за краєм вікна. */ z-index: 60; max-height: calc(100vh - 84px); overflow-y: auto; overscroll-behavior: contain; position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; padding: 6px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(22, 24, 29, .16); } .netsel__menu a {display: flex;justify-content: space-between;gap: 12px;padding: 9px 10px;border-radius: 4px;text-decoration: none;/* font-size: 14px; */} .netsel__menu a:hover, .netsel__menu a[aria-current] { background: var(--canvas-soft); } .nav { display: flex; align-items: center; margin-left: auto; } .nav a {padding: 0 14px;/* font-size: 13px; */font-weight: 500;color: var(--mute);text-decoration: none;letter-spacing: -.005em;line-height: 64px;white-space: nowrap;/* text-transform: uppercase; */} .nav a:hover, .nav a[aria-current] {color: var(--primary);} .top__actions { display: flex; gap: 2px; } .iconbtn { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: 2px; cursor: pointer; color: var(--ink); } .iconbtn:hover { background: var(--canvas-soft); } .iconbtn svg { width: 18px; height: 18px; } .theme-sun { display: none; } :root[data-theme="dark"] .theme-sun { display: block; } :root[data-theme="dark"] .theme-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-sun { display: block; } :root:not([data-theme]) .theme-moon { display: none; } } .subnav { position: relative; z-index: 999; background: var(--canvas); border-bottom: 1px solid var(--hairline); display: none; } .subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .subnav .wrap::-webkit-scrollbar { display: none; } .subnav a { padding: 12px 10px; font-size: 14px; font-weight: 500; color: var(--mute); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; } .subnav a[aria-current] { color: var(--ink); border-color: var(--primary); } .searchbar { position: relative; z-index: 999; border-bottom: 1px solid var(--hairline); background: var(--canvas); padding: 14px 0; } /* ---------------------------------------------------------------- пошук */ .search { position: relative; display: flex; gap: 8px; } .search input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; font: 500 16px var(--text); color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline-input); border-radius: 2px; } .search input:focus { outline: 2px solid var(--primary-soft); outline-offset: -1px; border-color: transparent; } .search button { display: inline-flex; align-items: center; gap: 8px; } .search button svg { width: 18px; height: 18px; } .search button, .btn--primary { height: 48px; padding: 0 20px; border: 0; border-radius: 2px; cursor: pointer; background: var(--primary); color: #fff; font-weight: 600; /* font-size: 15px; */ } .search button:hover, .btn--primary:hover { background: var(--primary-press); } .search__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; padding: 6px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(22, 24, 29, .16); max-height: 70vh; overflow: auto; } .search__results a { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 4px; text-decoration: none; } .search__results a:hover, .search__results a[aria-selected="true"] { background: var(--canvas-soft); } .search__results .sub { margin-left: auto; font-size: 12px; color: var(--mute); white-space: nowrap; } .search__group { padding: 10px 10px 4px; } /* ---------------------------------------------------------------- шапка сторінки */ .main {padding: 56px 16px;} .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; padding: 0; } .crumbs li { display: inline-flex; gap: 8px; } .crumbs li:not(:last-child)::after { content: "→"; color: var(--hairline-input); } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); } .crumbs [aria-current] { color: var(--ink-2); } .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 18px; } .display {font-size: clamp(38px, 5.6vw, 56px);font-weight: 700;letter-spacing: -.025em;line-height: 1.04;margin: 0 0 20px;} .meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 24px; } .lines-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 28px; } .lead {font-size: 17px;line-height: 1.625;color: color-mix(in srgb, var(--ink) 80%, transparent);max-width: 640px;margin: 0 0 48px;} .lead strong { color: var(--ink); font-weight: 600; } /* ---------------------------------------------------------------- чип лінії */ .chip { --c: var(--primary); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 2px; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; border: 1px solid var(--hairline-input); padding: 0 12px; } .chip::before {content: "";width: 10px;height: 10px;border-radius: 1px;background: var(--c);flex: none;border-radius: 2px;} a.chip:hover { border-color: var(--primary); color: var(--primary); } .chip--plain { background: transparent; color: var(--ink); padding: 0; height: auto; } a.chip--plain:hover { background: transparent; text-decoration: underline; } .chips {display: flex;flex-wrap: wrap;gap: 6px;} /* Список ліній не має розпирати рядок: у великих вузлів їх буває два десятки, і назва зупинки стискалася до одного слова на рядок. */ .rows__item .chips { flex: 0 1 auto; justify-content: flex-end; max-width: 55%; } .chip--more { background: var(--canvas-soft); color: var(--mute); border-color: var(--hairline); } /* ---------------------------------------------------------------- табло */ .board { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); box-shadow: var(--shadow); overflow: hidden; } .board__head, .board__row { display: grid; grid-template-columns: 112px 88px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: 0 28px; } .board__head { height: 56px; background: var(--canvas-soft); border-bottom: 1px solid var(--hairline); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); } .board__head > :last-child, .board__row > :last-child { text-align: right; } .board__row { min-height: 80px; padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); text-decoration: none; } .board__row:last-child { border-bottom: 0; } a.board__row:hover { background: var(--canvas-soft); } .board__time { font: 700 36px/1.1 var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .board__dest { font-size: 17px; font-weight: 500; line-height: 1.55; min-width: 0; } .board__dest small { display: block; font-size: 12px; font-weight: 400; color: var(--mute); line-height: 1.4; } .board__status { font-size: 26px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; } .board__status--go { color: var(--go); } .board__status--soft { font-size: 13px; color: var(--mute); } .board__row.is-past { opacity: .45; } .board__row.is-next { background: var(--primary-subdued); } .board__empty { padding: 28px; color: var(--mute); } .board--pair .board__head, .board--pair .board__row { grid-template-columns: 112px 112px 110px 88px minmax(0, 1fr); } .board--pair .board__head > :last-child, .board--pair .board__row > :last-child { text-align: left; } .board--pair .board__arr { font: 500 22px var(--text); color: var(--ink-2); font-variant-numeric: tabular-nums; } .board--pair .board__dur { font-size: 15px; color: var(--mute); white-space: nowrap; } .hide-past .is-past { display: none !important; } .board__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 28px; border-top: 1px solid var(--hairline); background: var(--canvas-soft); } .live { display: inline-flex; align-items: center; gap: 8px; color: var(--go); } .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; } @keyframes pulse { 50% { opacity: .3; } } @media (prefers-reduced-motion: reduce) { .live::before { animation: none; } } /* ---------------------------------------------------------------- секції */ .section { margin: 0 0 56px; } .section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin: 0 0 20px; } .section__head h2 { margin: 0; } .panel { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); box-shadow: var(--shadow); overflow: hidden; } .panel--pad {padding: 24px 28px;margin-bottom: 1em;} .rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; } .rows > li { border-bottom: 1px solid var(--hairline); } .rows > li:last-child { border-bottom: 0; } .rows__item { display: flex; align-items: center; gap: 16px; padding: 16px 24px; text-decoration: none; min-height: 60px; } a.rows__item:hover { background: var(--canvas-soft); } .rows__main { flex: 1 1 45%; min-width: 180px; font-weight: 500; } .rows__main small { display: block; font-weight: 400; font-size: 13px; color: var(--mute); } .rows__side { color: var(--mute); font-size: 13px; text-align: right; } .rows--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .rows--cols > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } .rows--cols > li:nth-child(odd) { border-right: 1px solid var(--hairline); } .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); list-style: none; margin: 0; padding: 0; } .tile { display: block; height: 100%; padding: 22px 24px; border: 1px solid var(--hairline); border-radius: var(--radius); text-decoration: none; background: var(--canvas); } a.tile:hover { border-color: var(--primary-soft); } .tile h3 { margin: 10px 0 6px; } .tile p { margin: 0; color: var(--mute); font-size: 14px; } .tile .chips { margin-top: 14px; } .datesel {display: flex;align-items: center;gap: 10px;} .datesel select { height: 36px; padding: 0 10px; font: 500 14px var(--text); color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline-input); border-radius: 2px; } .btn {display: inline-flex;align-items: center;gap: 8px;height: 36px;padding: 0 14px;border: 1px solid var(--hairline-input);border-radius: 2px;background: var(--canvas);text-decoration: none;font-size: 14px;font-weight: 500;cursor: pointer;} .btn:hover { border-color: var(--ink); } .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: -24px 0 48px; } /* Кнопки всередині секції, а не одразу під заголовком: від'ємний відступ .actions там наїжджає на попередній абзац. */ .actions--flow { margin-top: 12px; } /* Список одразу під таблицею: без відступу рамки злипаються в одну лінію. */ .rows--gap { margin-top: 20px; } .cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .card { padding: 20px 24px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); } .card__title { margin: 0; font-size: 13px; font-weight: 500; color: var(--mute); } .card__big { margin: 6px 0 4px; font: 700 30px/1 var(--text); font-variant-numeric: tabular-nums; } .card__note { margin: 0; font-size: 13px; color: var(--mute); } .pagedate { margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--mute); } /* ---------------------------------------------------------------- розклад по годинах */ .tt { border-bottom: 1px solid var(--hairline); } .tt:last-child { border-bottom: 0; } .tt summary { display: flex; align-items: center; gap: 14px; padding: 18px 24px; cursor: pointer; list-style: none; } .tt summary::-webkit-details-marker { display: none; } .tt summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--mute); } .tt[open] summary::after { content: "–"; } .tt__to { font-weight: 500; font-size: 17px; } .tt__meta { font-size: 13px; color: var(--mute); } .hours { margin: 0 0 8px; } .hours th {width: 64px;padding: 8px 0 8px 24px;text-align: left;/* vertical-align: top; */font: 700 15px var(--text);font-variant-numeric: tabular-nums;border-top: 1px solid var(--hairline);} .hours td { padding: 8px 24px 8px 0; border-top: 1px solid var(--hairline); } .hours td {display: flex;flex-wrap: wrap;gap: 6px 10px;padding: 8px 0 8px 24px;} .hours td span { display: inline-block; min-width: 54px; padding: 2px 8px; text-align: center; background: var(--canvas-soft); border-radius: 4px; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink-2); } /* ---------------------------------------------------------------- таблиці */ .table-scroll { overflow-x: auto; } .table-scroll .trips th{ text-align: inherit} /* Таблиця розкладу: той самий вигляд, що й в інших таблиць сайту. */ .trips { width: 100%; border-collapse: collapse; } .trips th, .trips td { padding: 12px 20px; text-align: left; border-bottom: 1px solid var(--hairline); white-space: nowrap; } .trips thead th { background: var(--canvas-soft); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); } .trips tbody tr:last-child > * { border-bottom: 0; } .trips tbody tr.is-past { opacity: .45; } .trips tbody tr.is-next { background: var(--primary-subdued); } .trips .num { font-variant-numeric: tabular-nums; } /* Кнопка «показати попередні рейси» стоїть між заголовком і таблицею: без власних відступів усі три злипалися в суцільний блок. */ [data-toggle-past] { margin: 4px 0 16px; } /* Секція розкладу на сторінках пар: без нижнього відступу заголовок наступного блоку («Preguntas frecuentes») сідав впритул до таблиці. */ .block { margin: 0 0 56px; } .block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; } .block .panel.table-scroll, .section .panel.table-scroll { margin-top: 4px; } .data th, .data td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; } .data thead th { background: var(--canvas-soft); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); white-space: nowrap; } .data tbody tr:last-child > * { border-bottom: 0; } .data tbody th { font-weight: 500; } .data .big { font: 700 20px var(--text); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- маршрут лінії */ .dirs { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .route { list-style: none; margin: 0; padding: 8px 0; } .route li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 24px 9px 56px; } .route li::before { content: ""; position: absolute; left: 31px; top: 0; bottom: 0; width: 3px; background: var(--c); } .route li:first-child::before { top: 50%; } .route li:last-child::before { bottom: 50%; } .route li::after { content: ""; position: absolute; left: 26px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: var(--canvas); border: 3px solid var(--c); } .route a { font-weight: 500; text-decoration: none; } .route a:hover { text-decoration: underline; } .route .code { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; } .route .chip { height: 22px; font-size: 12px; padding: 0 7px; } /* ---------------------------------------------------------------- мапа */ /* isolation + z-index: 0 замикають внутрішні шари Leaflet (у них z-index 400) у власному контексті, інакше мапа перекриває меню в шапці. */ .map { position: relative; z-index: 0; isolation: isolate; height: 380px; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--canvas-soft); display: grid; place-items: center; } .map--tall { height: 540px; } .map__hint { color: var(--mute); font-size: 14px; } /* ---------------------------------------------------------------- FAQ */ .faq { border-top: 1px solid var(--hairline); } .faq details { border-bottom: 1px solid var(--hairline); } .faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 17px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--mute); font-size: 20px; line-height: 1; } .faq details[open] summary::after { content: "–"; } .faq p { margin: 0 0 20px; color: var(--mute); max-width: 720px; } /* ---------------------------------------------------------------- головна */ .hero { padding: 16px 0 72px; max-width: 780px; } .hero .display { font-size: clamp(40px, 6.4vw, 68px); } .hero .search { margin-top: 32px; } .text-primary {color: var(--primary);} /* ---------------------------------------------------------------- текстові сторінки */ .prose { max-width: 760px; } .prose h2 { margin: 40px 0 12px; } .prose p, .prose li { color: var(--ink-2); } /* ---------------------------------------------------------------- підвал */ .foot { border-top: 1px solid var(--hairline); padding: 56px 0 32px; font-size: 14px; } .foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; } .foot__about { color: var(--mute); line-height: 1.7; margin-top: 16px; } .foot__title { font-family: var(--display); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); margin: 0 0 18px; } .foot li { margin: 0 0 12px; } .foot li a { text-decoration: none; } .foot li a:hover { text-decoration: underline; } .foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--mute); } .notes { margin: 16px 0 0; padding-left: 18px; color: var(--mute); font-size: 14px; line-height: 1.6; } .notes li { margin-bottom: 4px; } .chart { display: flex; align-items: flex-end; gap: 3px; height: 200px; margin-top: 16px; padding: 12px 12px 28px; overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); } .chart__col { display: flex; align-items: flex-end; gap: 2px; flex: 1; min-width: 26px; height: 100%; position: relative; } .chart__bar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; } .chart__bar--a { background: var(--primary); } .chart__bar--b { background: var(--accent); } .chart__col small { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 9px; color: var(--mute); } .plano { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); overflow: hidden; } .plano__tools { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--hairline); font-size: 14px; } .plano__tools button { width: 30px; height: 30px; font: inherit; line-height: 1; color: var(--ink); background: none; border: 1px solid var(--hairline); border-radius: 4px; cursor: pointer; } .plano__tools button[data-plano-zoom="0"] { width: auto; padding: 0 10px; } .plano__tools button:hover { border-color: var(--primary-soft); color: var(--primary); } .plano__tools a { margin-left: auto; color: var(--primary); text-decoration: none; } .plano__tools a:hover { text-decoration: underline; } .plano__frame { overflow: auto; max-height: 70vh; background: #fff; cursor: grab; overscroll-behavior: contain; } .plano__frame.is-drag { cursor: grabbing; } .plano__frame img { display: block; width: 100%; height: auto; transform-origin: 0 0; } /* ---------------------------------------------------------------- мобільні */ @media (max-width: 900px) { .nav, .top__sep { display: none; } .top__actions { margin-left: auto; } .subnav { display: block; } } @media (max-width: 720px) { .wrap { padding: 0 16px; } .main {padding: 28px 16px;} .crumbs ol { margin-bottom: 24px; } .brand__name { display: none; } .lead { margin-bottom: 32px; } .section { margin-bottom: 44px; } .board__head { display: none; } .board__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "time line status" "time dest status"; column-gap: 14px; row-gap: 2px; padding: 14px 16px; min-height: 72px; } .board__time { grid-area: time; font-size: 28px; } .board__line { grid-area: line; } .board__dest { grid-area: dest; font-size: 15px; } .board__status { grid-area: status; font-size: 18px; } .board__status--soft { font-size: 12px; } .board--pair .board__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "time line dur" "time dest dur"; } .board--pair .board__arr { display: none; } .board--pair .board__dur { grid-area: dur; text-align: right; font-size: 14px; } .board__foot { padding: 12px 16px; } .rows__item { padding: 14px 16px; } .rows--cols { grid-template-columns: 1fr; } .rows--cols > li:nth-child(odd) { border-right: 0; } .rows--cols > li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--hairline); } .tt summary { padding: 16px; flex-wrap: wrap; } .hours th { padding-left: 16px; width: 48px; } .hours td { padding-right: 16px; } .panel--pad { padding: 18px 16px; } .route li { padding-right: 16px; } .foot__grid { grid-template-columns: 1fr 1fr; } .foot__grid > :first-child { grid-column: 1 / -1; } .map { height: 320px; } .map--tall { height: 420px; } .data th, .data td { padding: 12px; } } /* ================================================================ доповнення */ /* H1 у два тони */ .display__soft {color: var(--primary);} /* Меню мереж у шапці */ .netsel__label { padding: 8px 10px 4px; margin: 0; } .netsel__menu a { align-items: center; } .netsel__dot { width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--primary)); flex: none; } .netsel__text { display: flex; flex-direction: column; flex: 1; gap: 2px; } .netsel__text small { color: var(--mute); font-size: 12px; } .netsel__check { color: var(--primary-soft); } /* Вибір теми */ .themesel { position: relative; } .themesel summary { list-style: none; } .themesel summary::-webkit-details-marker { display: none; } .themesel__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: 6px; z-index: 40; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(22, 24, 29, .16); } .themesel__menu button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; font-size: 14px; } .themesel__menu button:hover { background: var(--canvas-soft); } .themesel__check { visibility: hidden; color: var(--primary-soft); } .themesel__menu button[aria-current="true"] .themesel__check { visibility: visible; } /* Попередження операторів */ .alerts { display: grid; gap: 12px; margin: 0 0 40px; } .alert { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--hairline); border-left: 3px solid var(--bad); border-radius: var(--radius); background: var(--canvas); } .alert--accesibilidad { border-left-color: var(--warn); } .alert__icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bad); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; } .alert--accesibilidad .alert__icon { background: var(--warn); } .alert__body { min-width: 0; } .alert__title { font-weight: 600; margin: 0 0 4px; } .alert__text { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; line-height: 1.55; } .alert__meta { margin: 0; } .alert__meta a { color: var(--primary-soft); } /* Картки ліній */ .linecard { display: flex; flex-direction: column; gap: 6px; } .linecard__bar { width: 72px; height: 8px; border-radius: 999px; background: var(--c); } .linecard__no { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; } .linecard__name { color: var(--ink-2); font-size: 14px; } .linecard__go { margin-top: 10px; color: var(--primary-soft); font-size: 14px; font-weight: 500; } /* Покажчик станцій */ .stopindex__filter { width: 100%; height: 52px; margin: 0 0 24px; padding: 0 16px; font: 500 16px var(--text); color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline-input); border-radius: var(--radius); } .letter { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; margin: 0 0 16px; } .letter__key { font-family: var(--display); font-size: 34px; font-weight: 700; color: var(--primary); margin: 0; line-height: 1; } .letter__key span { font-family: var(--text); font-size: 12px; font-weight: 500; color: var(--mute); vertical-align: super; margin-left: 4px; } .letter .rows { margin: 0; } /* Кнопки зовнішніх карт */ .maplinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; } .maplinks svg { width: 16px; height: 16px; } .btn svg { width: 16px; height: 16px; } @media (max-width: 720px) { .letter { grid-template-columns: 1fr; gap: 6px; } .letter__key { font-size: 26px; } .alert { padding: 14px; } } /* Описовий текст станції */ .prose--panel { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px 28px; background: var(--canvas); max-width: none; } .prose--panel p:last-child { margin-bottom: 0; } .prose--panel a { color: var(--primary-soft); } @media (max-width: 720px) { .prose--panel { padding: 18px 16px; } } /* ---------------------------------------------------------------- маршрут A → B */ .planform { display: grid; grid-template-columns: 1fr 1fr 170px 120px auto; gap: 12px; align-items: end; padding: 20px; margin: 0 0 40px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); } .planform__field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .planform input[type="search"], .planform input[type="time"], .planform select { height: 48px; padding: 0 14px; font: 500 16px var(--text); color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline-input); border-radius: 2px; width: 100%; } .planform .btn--primary { display: inline-flex; align-items: center; gap: 8px; } .planform .btn--primary svg { width: 18px; height: 18px; } .journey { border: 1px solid var(--hairline); border-radius: var(--radius); margin: 0 0 16px; background: var(--canvas); } .journey__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 18px 24px; border-bottom: 1px solid var(--hairline); background: var(--canvas-soft); } .journey__time { font: 700 24px var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .journey__meta { color: var(--mute); font-size: 14px; } .journey__tags { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .journey__legs { list-style: none; margin: 0; padding: 8px 24px 16px; } .leg { display: flex; gap: 14px; padding: 10px 0; align-items: flex-start; } .leg__icon { flex: none; width: 56px; display: flex; justify-content: flex-start; padding-top: 2px; } .leg--walk .leg__icon { font-size: 18px; padding-left: 8px; } .leg__body { min-width: 0; line-height: 1.5; } .leg__body small { display: block; color: var(--mute); font-size: 13px; } .leg__body a { text-decoration: none; font-weight: 500; } .leg__body a:hover { text-decoration: underline; } @media (max-width: 900px) { .planform { grid-template-columns: 1fr 1fr; } .planform .btn--primary { grid-column: 1 / -1; justify-content: center; } } @media (max-width: 560px) { .planform { grid-template-columns: 1fr; padding: 16px; } .journey__head { padding: 14px 16px; } .journey__legs { padding: 8px 16px 12px; } .journey__tags { margin-left: 0; } } /* Спливне вікно вибору зупинки на мапі планувальника */ .planpop { min-width: 250px; } .planpop__title { margin: 0 0 8px; font-weight: 600; } .planpop__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hairline); } .planpop__row:first-of-type { border-top: 0; } .planpop__name { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; } .planpop__name small { display: block; color: var(--mute); font-size: 12px; } .planpop__btns { display: flex; gap: 4px; flex: none; } .planpop__btns button { border: 1px solid var(--hairline-input); background: var(--canvas); color: var(--ink); border-radius: 2px; padding: 4px 8px; font-size: 12px; font-weight: 600; cursor: pointer; } .planpop__btns button:hover { border-color: var(--primary); color: var(--primary); } .leaflet-popup-content { margin: 12px 14px; } [data-geo] { white-space: nowrap; } /* Темна мапа без сторонніх ключів: інвертуємо стандартні плитки OSM. Маркери й лінії лишаються звичайними — фільтр тільки на шар плиток. */ :root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8); } } /* Легенда під мапою */ .maplegend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: -32px 0 40px; font-size: 13px; color: var(--mute); } .maplegend span { display: inline-flex; align-items: center; gap: 7px; } .maplegend i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--canvas); box-shadow: 0 0 0 1px var(--hairline); } /* Під графіком легенда йде звичайним потоком: від'ємний відступ, розрахований на мапу, накладав її на стовпчики. */ .maplegend--chart { margin-top: 16px; } .board__status small { display: block; font-size: 11px; font-weight: 500; } /* Картка маршруту як перемикач для мапи */ .journey { cursor: pointer; transition: border-color .15s; } .journey:hover { border-color: var(--hairline-input); } .journey.is-active { border-color: var(--primary); box-shadow: inset 3px 0 0 var(--primary); } .journey__show { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-soft); } .journey.is-active .journey__show { visibility: hidden; } .journey:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; } /* ---------------------------------------------------------------- відгуки */ .stars { color: var(--accent); letter-spacing: 1px; } .reviewform { margin-top: 24px; padding: 20px 24px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--canvas); } .reviewform__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; } .reviewform select, .reviewform input[type="text"], .reviewform textarea { font: 500 15px var(--text); color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline-input); border-radius: 2px; padding: 10px 12px; } .reviewform input[type="text"] { flex: 1; min-width: 180px; } .reviewform textarea { width: 100%; margin: 6px 0 14px; resize: vertical; } .reviewform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .reviewform .note { margin: 0; } .reviewform input[type="file"] { flex: 1; min-width: 180px; font-size: 14px; color: var(--mute); } .rvphotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .rvphotos img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--hairline); } .rvreplies { display: block; margin: 12px 0 0; padding-left: 14px; border-left: 2px solid var(--hairline); } .rvreply { display: block; margin-bottom: 12px; } .rvreply__btn { margin-top: 10px; padding: 4px 10px; font: inherit; font-size: 13px; color: var(--mute); background: none; border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer; } .rvreply__btn:hover { color: var(--primary); border-color: var(--primary-soft); } .rvreply__note { margin: 0 0 12px; font-size: 14px; color: var(--mute); } .rvreply__note button { font: inherit; color: var(--primary); background: none; border: 0; cursor: pointer; text-decoration: underline; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .opinion-msg { padding: 12px 16px; border-radius: var(--radius); margin: 0 0 16px; font-size: 15px; } .opinion-msg--ok { background: var(--primary-subdued); color: var(--eyebrow); } .opinion-msg--error { background: #fdecec; color: var(--bad); } /* Кожен рядок табло — окрема сітка, тож колонка auto давала різну ширину в різних рядках і заголовок «їхав». Ширини задаємо явно. */ .board--routes .board__head, .board--routes .board__row { grid-template-columns: minmax(0, 1fr) 110px 120px 190px; } .board--dest .board__head, .board--dest .board__row { grid-template-columns: minmax(0, 1fr) 110px 150px 120px; } .board--bikes .board__head, .board--bikes .board__row { grid-template-columns: 72px 82px minmax(0, 1fr) 110px; } .board--routes .board__status, .board--dest .board__status { text-align: right; } .board--routes .board__head > :nth-child(2), .board--routes .board__head > :nth-child(3), .board--dest .board__head > :nth-child(2), .board--dest .board__head > :nth-child(3) { text-align: right; } .board--routes .board__row > :nth-child(3) { text-align: right; } .board--routes .chips, .board--dest .chips { justify-content: flex-end; } @media (max-width: 720px) { .board--routes .board__head, .board--dest .board__head, .board--bikes .board__head { display: none; } .board--routes .board__row, .board--dest .board__row, .board--bikes .board__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dest time" "meta lines"; row-gap: 6px; } .board--routes .board__row > :nth-child(1), .board--dest .board__row > :nth-child(1) { grid-area: dest; } .board--routes .board__row > :nth-child(2), .board--dest .board__row > :nth-child(2) { grid-area: time; text-align: right; } .board--routes .board__row > :nth-child(3), .board--dest .board__row > :nth-child(3) { grid-area: meta; text-align: left; } .board--routes .board__row > :nth-child(4), .board--dest .board__row > :nth-child(4) { grid-area: lines; } .board--bikes .board__row { grid-template-columns: 56px 56px minmax(0, 1fr); grid-template-areas: "bikes docks dest"; } } /* Значки транспорту на живих мапах */ .vmark-wrap { background: none; border: 0; } .vmark { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 5px; border-radius: 999px; white-space: nowrap; background: var(--c); color: #fff; border: 1.5px solid #fff; font: 700 11px/1 var(--text); font-variant-numeric: tabular-nums; box-shadow: 0 1px 4px rgba(22, 24, 29, .45); transform: translate(-50%, -50%); } .vmark svg { width: 13px; height: 13px; flex: none; } .vmark b { font-weight: 700; } /* Плавний рух значків між оновленнями замість стрибка */ /* Статичні точки на мапі: кружечок з піктограмою і хвостиком. */ .pmark-wrap { background: none; border: 0; } .pmark { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--c); border: 1.5px solid #fff; box-shadow: 0 2px 6px rgba(22, 24, 29, .4); } .pmark svg { width: 14px; height: 14px; color: #fff; rotate: 45deg; } .pmark--big { width: 32px; height: 32px; } .pmark--big svg { width: 17px; height: 17px; } .pmark--here { width: 30px; height: 30px; border-width: 2.5px; } .pmark--here svg { width: 12px; height: 12px; } .leaflet-marker-icon.pmark-wrap:hover .pmark { filter: brightness(1.12); } .map--far .pmark { width: 14px; height: 14px; border-width: 1.2px; border-radius: 50%; rotate: none; transform: translate(-50%, -50%); } .map--far .pmark svg { display: none; } .map--far .pmark--big, .map--far .pmark--here { width: 20px; height: 20px; } .vmark-wrap { transition: transform .8s linear; } @media (prefers-reduced-motion: reduce) { .vmark-wrap { transition: none; } } /* Перемикач стилю мапи */ .mapstyle { display: flex; gap: 2px; padding: 3px; background: var(--canvas); border: 1px solid var(--hairline); border-radius: 6px; box-shadow: 0 1px 4px rgba(22, 24, 29, .2); } .mapstyle button { border: 0; background: transparent; color: var(--mute); border-radius: 4px; padding: 5px 9px; font: 500 12px var(--text); cursor: pointer; } .mapstyle button:hover { background: var(--canvas-soft); color: var(--ink); } .mapstyle button[aria-current] { background: var(--primary); color: #fff; } /* Векторні стилі мають власний темний варіант, інвертувати їх не треба. */ :root[data-theme="dark"] .map--novert .leaflet-tile-pane { filter: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map--novert .leaflet-tile-pane { filter: none; } } .maplibregl-canvas-container canvas { outline: none; }