/* Дизайн-система за зразком trenaldia.es: Archivo для заголовків, Hanken Grotesk для тексту, основний колір #b3121f (мадридський червоний) з синім акцентом #1f5fa8, тонкі сірі лінії-розділювачі замість тіней, табло з великим часом. Світла і темна теми: data-theme на або системна. */ /* Archivo і Hanken Grotesk — з Google Fonts ( у main.hbs), як на horariosvlc.es (28.09.2026). «… Fallback» — Arial, підігнаний під розміри шрифту: поки шрифт вантажиться, текст іде Arial такої ж ширини й висоти рядка, тож при заміні нічого не зсувається. */ @font-face { font-family: "Archivo Fallback"; font-weight: 100 500; src: local("Arial"), local("ArialMT"); ascent-override: 86.5%; descent-override: 20.69%; line-gap-override: 0%; size-adjust: 101.52%; } @font-face { font-family: "Archivo Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); ascent-override: 92.02%; descent-override: 22.01%; line-gap-override: 0%; size-adjust: 95.41%; } @font-face { font-family: "Archivo Fallback"; font-weight: 700 900; src: local("Arial Bold"), local("Arial-BoldMT"); ascent-override: 88.94%; descent-override: 21.27%; line-gap-override: 0%; size-adjust: 98.72%; } @font-face { font-family: "Hanken Grotesk Fallback"; font-weight: 100 500; src: local("Arial"), local("ArialMT"); ascent-override: 99.59%; descent-override: 30.18%; line-gap-override: 0%; size-adjust: 100.41%; } @font-face { font-family: "Hanken Grotesk Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); ascent-override: 104.71%; descent-override: 31.73%; line-gap-override: 0%; size-adjust: 95.5%; } :root { /* Палітра «мадридський червоний» (27.09.2026): основний #b3121f (6,95:1 на білому) — кнопки й шапка, посилання й підписи #a3111c (7,9:1), світлий #f07b82 — смужка в шапці й тонування. Акцент — синій #1f5fa8 (6,4:1), щоб не зливався з червоним. Статуси лишаються «світлофором». */ --primary: #b3121f; --primary-deep: #950f1a; --primary-press: #7a0c15; --primary-soft: #a3111c; --primary-subdued: #fbe9ea; --brand-light: #f07b82; --on-primary: #fff; --accent: #1f5fa8; --accent-deep: #174a85; --canvas: #fff; --canvas-soft: #faf5f5; --ink: #10161b; --ink-2: #26303a; --mute: #56616b; --hairline: #ecdcdc; --hairline-input: #d3bcbc; --eyebrow: #a3111c; --go: #08864a; --warn: #b45309; --bad: #d92d20; --header-bg: rgba(255, 255, 255, .86); --chip-bg: #10161b; --chip-ink: #faf5f5; --shadow: 0 1px 2px rgba(16, 22, 27, .06), 0 2px 8px rgba(179, 18, 31, .06); --display: "Archivo", "Archivo Fallback", "Hanken Grotesk", system-ui, sans-serif; --text: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --radius: 8px; --radius-control: 5px; /* кнопки, поля, перемикачі */ --max: 1120px; color-scheme: light; } /* Темна тема: основний #ff7a7a (7,4:1 на тлі #161112), текст на кнопках — темний. Однакові значення для системної теми і для явного перемикача. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: #ff7a7a; --primary-deep: #ff9e9e; --primary-press: #ffc2c2; --primary-soft: #ff8f8f; --primary-subdued: rgba(255, 122, 122, .16); --brand-light: #ff7a7a; --on-primary: #2a0808; --accent: #6fa8ff; --canvas: #161112; --canvas-soft: #1f1718; --ink: #eef3f7; --ink-2: #d2dbe3; --mute: #9aa7b3; --hairline: rgba(255, 255, 255, .1); --hairline-input: rgba(255, 255, 255, .2); --eyebrow: #ff9e9e; --go: #4ade9b; --warn: #f0b24a; --bad: #f87171; --header-bg: rgba(22, 17, 18, .78); --chip-bg: #2a1d1f; --chip-ink: #eef3f7; --shadow: none; color-scheme: dark; } } :root[data-theme="dark"] { --primary: #ff7a7a; --primary-deep: #ff9e9e; --primary-press: #ffc2c2; --primary-soft: #ff8f8f; --primary-subdued: rgba(255, 122, 122, .16); --brand-light: #ff7a7a; --on-primary: #2a0808; --accent: #6fa8ff; --canvas: #161112; --canvas-soft: #1f1718; --ink: #eef3f7; --ink-2: #d2dbe3; --mute: #9aa7b3; --hairline: rgba(255, 255, 255, .1); --hairline-input: rgba(255, 255, 255, .2); --eyebrow: #ff9e9e; --go: #4ade9b; --warn: #f0b24a; --bad: #f87171; --header-bg: rgba(22, 17, 18, .78); --chip-bg: #2a1d1f; --chip-ink: #eef3f7; --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: color-mix(in srgb, var(--primary-soft) 45%, transparent); 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: var(--radius-control); } .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: var(--radius-control); /* font-size: 13px; */ font-weight: 600; /* Один колір на всіх сторінках — бренд (--primary), як у першій версії. */ background: color-mix(in srgb, var(--c, var(--primary)) 13%, var(--canvas)); color: color-mix(in srgb, var(--c, var(--primary)) 55%, var(--ink)); transition: background-color .15s ease; white-space: nowrap; } .netsel summary::-webkit-details-marker { display: none; } /* Кружок — кольору бренду. */ .netsel summary::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--primary-soft)); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--primary-soft)) 55%, transparent); animation: netsel-beat 2s ease-out infinite; } /* Пульс «в ефірі»: ореол розходиться і тане. */ @keyframes netsel-beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--primary-soft)) 55%, transparent); } 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c, var(--primary-soft)) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--primary-soft)) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .netsel summary::before { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--primary-soft)) 22%, transparent); } } .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: var(--radius-control); cursor: pointer; color: var(--ink); transition: background-color .15s ease; } .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: var(--radius-control); transition: border-color .15s ease, box-shadow .15s ease; } .search input:hover { border-color: var(--primary-soft); } .search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, 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: var(--radius-control); cursor: pointer; background: var(--primary); color: var(--on-primary); font-weight: 600; transition: background-color .15s ease, transform .1s ease; /* 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 { cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s, box-shadow .15s; } a.chip:hover, a.chip:focus-visible { border-color: var(--c); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; background: color-mix(in srgb, var(--c) 12%, var(--canvas)); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); } a.chip:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; } /* Телефони (наведення немає): стрілка «›» одразу показує, що чип відкривається, а при дотику він підфарбовується й «натискається». */ @media (hover: none) { a.chip::after { content: "›"; margin-left: -1px; font-weight: 700; color: var(--mute); } a.chip:active { background: color-mix(in srgb, var(--c) 18%, var(--canvas)); border-color: var(--c); transform: scale(.96); } } @media (prefers-reduced-motion: reduce) { a.chip, a.chip:hover { transition: none; transform: none; } } .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(--primary-subdued); } .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__was { display: block; font-size: 13px; font-weight: 400; color: var(--mute); text-decoration: line-through; letter-spacing: 0; } .board__status--late { color: var(--bad); } .board__status--warn { color: var(--warn); } .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(--primary-subdued); } .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 { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } a.tile:hover { border-color: var(--primary-soft); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 12%, transparent); transform: translateY(-1px); } .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: var(--radius-control); } .btn {display: inline-flex;align-items: center;gap: 8px;height: 36px;padding: 0 14px;border: 1px solid var(--hairline-input);border-radius: var(--radius-control);background: var(--canvas);text-decoration: none;font-size: 14px;font-weight: 500;cursor: pointer;transition: border-color .15s ease, color .15s ease, background-color .15s ease;} .btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-subdued); } .btn:active, .search button:active, .btn--primary:active { transform: translateY(1px); } .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 48px; } /* Кнопки всередині секції: відступ від попереднього абзацу трохи більший. */ .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); } /* ---------------------------------------------------------------- розклад по годинах */ /* Розклад лінії «зупинки × рейси»: назва зупинки лишається на місці, рейси прокручуються вбік. */ .mx { margin: 0 0 16px; padding: 0 0 8px; } .mx__day { padding: 16px 20px; font-weight: 600; cursor: pointer; list-style: none; } .mx__day::-webkit-details-marker { display: none; } .mx__dir { margin: 4px 20px 6px; font-weight: 600; } .mx__grid { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; } .mx__grid th { position: sticky; left: 0; z-index: 1; background: var(--canvas); text-align: left; font-weight: 500; padding: 7px 14px 7px 20px; min-width: 150px; max-width: 220px; border-top: 1px solid var(--hairline); } .mx__grid th a { color: var(--ink); } .mx__grid td { padding: 7px 8px; border-top: 1px solid var(--hairline); white-space: nowrap; color: var(--ink-2); } .mx__grid tr:first-child th, .mx__grid tr:first-child td { border-top: 0; } @media (max-width: 560px) { .mx__grid { font-size: 13px; } .mx__grid th { min-width: 118px; max-width: 140px; padding-left: 14px; } .mx__dir { margin-left: 14px; } } .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 li > a:not(.chip) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); } .route li > a:not(.chip)::after { content: "›"; margin-left: 6px; font-weight: 700; } .route li > a:not(.chip):hover { text-decoration-color: currentColor; } .route li:hover { background: var(--canvas-soft); } .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; } /* ---------------------------------------------------------------- головна */ /* Фон першого екрана головної — лише CSS, без файлів: небесне сяйво з теплим відсвітом сонця, сітка з крапок, як на схемах транспорту, і праворуч Місто мистецтв і наук над водою з лінією метро. Шар розтягнуто на всю ширину вікна під .hero, краї плавно тануть у фон сторінки. */ .hero { position: relative; isolation: isolate; padding: 16px 0 72px; max-width: 780px; } .hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; /* .hero стоїть у лівій частині колонки, а не по центру вікна: шар відраховуємо від лівого краю вікна — поле .main (16 px, воно перекриває поле .wrap на тому самому елементі) плюс відступ до max-width. Інакше справа лишалася смуга без фону з різкою межею. */ top: -140px; bottom: 0; width: 100vw; left: calc(-1 * (max(0px, (100vw - var(--max)) / 2) + 16px)); background: radial-gradient(40% 60% at 92% 4%, color-mix(in srgb, #f28c28 16%, transparent), transparent 70%), radial-gradient(55% 75% at 88% 8%, color-mix(in srgb, var(--brand-light) 35%, transparent), transparent 70%), radial-gradient(35% 45% at 4% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), radial-gradient(circle, color-mix(in srgb, var(--primary) 26%, transparent) 1.1px, transparent 1.7px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); } .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; /* Мадрид: Пуерта-де-Алькала, Чотири вежі (Cuatro Torres), сонце і червона лінія метро. .hero вужчий за колонку (780 з 1120): малюнок праворуч від тексту. */ top: -10px; left: 770px; width: 440px; height: 330px; opacity: .9; background: var(--hero-scene, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 420' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E %3Ccircle cx='470' cy='96' r='48' fill='%23f28c28' fill-opacity='.42'/%3E %3Cg stroke='%23b3121f' stroke-opacity='.55' stroke-width='4'%3E %3Cpath d='M34 262 V196 H256 V262'/%3E %3Cpath d='M24 196 H266 M60 196 V172 H230 V196 M104 172 L145 146 L186 172'/%3E %3Cpath d='M110 262 V226 Q122 208 134 226 V262 M140 262 V222 Q152 202 164 222 V262 M170 262 V226 Q182 208 194 226 V262'/%3E %3Cpath d='M56 262 V224 H84 V262 M206 262 V224 H234 V262'/%3E %3C/g%3E %3Cg stroke='%23b3121f' stroke-opacity='.3' stroke-width='3'%3E%3Cpath d='M34 238 H256'/%3E%3C/g%3E %3Cg stroke='%23b3121f' stroke-opacity='.55' stroke-width='4' fill='%23f07b82' fill-opacity='.16'%3E %3Cpath d='M318 262 V118 H346 V262 Z'/%3E %3Cpath d='M362 262 V92 H390 V262 Z'/%3E %3Cpath d='M406 262 V104 H434 V262 Z'/%3E %3Cpath d='M450 262 V84 H480 V262 Z M450 104 H480 M456 84 V104 M474 84 V104'/%3E %3C/g%3E %3Cpath d='M10 262 H550' stroke='%23b3121f' stroke-opacity='.35' stroke-width='4'/%3E %3Cg stroke='%23f07b82' stroke-opacity='.5' stroke-width='3.5'%3E%3Cpath d='M320 282 H470 M340 298 H450 M40 282 H240 M70 298 H210'/%3E%3C/g%3E %3Cpath d='M10 350 C120 334 180 360 280 350 S460 322 550 334' stroke='%23e30613' stroke-width='8'/%3E %3Cg fill='%23fff' stroke='%23121815' stroke-width='5'%3E%3Ccircle cx='80' cy='342' r='10'/%3E%3Ccircle cx='280' cy='350' r='10'/%3E%3Ccircle cx='470' cy='330' r='10'/%3E%3C/g%3E %3C/svg%3E")) no-repeat center / contain; -webkit-mask-image: radial-gradient(farthest-side, #000 80%, transparent); mask-image: radial-gradient(farthest-side, #000 80%, transparent); } /* У темній темі лінії світлі, щоб не зливалися з фоном. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { --hero-scene: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 420' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E %3Ccircle cx='470' cy='96' r='48' fill='%23f28c28' fill-opacity='.42'/%3E %3Cg stroke='%23ff9e9e' stroke-opacity='.55' stroke-width='4'%3E %3Cpath d='M34 262 V196 H256 V262'/%3E %3Cpath d='M24 196 H266 M60 196 V172 H230 V196 M104 172 L145 146 L186 172'/%3E %3Cpath d='M110 262 V226 Q122 208 134 226 V262 M140 262 V222 Q152 202 164 222 V262 M170 262 V226 Q182 208 194 226 V262'/%3E %3Cpath d='M56 262 V224 H84 V262 M206 262 V224 H234 V262'/%3E %3C/g%3E %3Cg stroke='%23ff9e9e' stroke-opacity='.3' stroke-width='3'%3E%3Cpath d='M34 238 H256'/%3E%3C/g%3E %3Cg stroke='%23ff9e9e' stroke-opacity='.55' stroke-width='4' fill='%23ff7a7a' fill-opacity='.16'%3E %3Cpath d='M318 262 V118 H346 V262 Z'/%3E %3Cpath d='M362 262 V92 H390 V262 Z'/%3E %3Cpath d='M406 262 V104 H434 V262 Z'/%3E %3Cpath d='M450 262 V84 H480 V262 Z M450 104 H480 M456 84 V104 M474 84 V104'/%3E %3C/g%3E %3Cpath d='M10 262 H550' stroke='%23ff9e9e' stroke-opacity='.35' stroke-width='4'/%3E %3Cg stroke='%23ff7a7a' stroke-opacity='.5' stroke-width='3.5'%3E%3Cpath d='M320 282 H470 M340 298 H450 M40 282 H240 M70 298 H210'/%3E%3C/g%3E %3Cpath d='M10 350 C120 334 180 360 280 350 S460 322 550 334' stroke='%23e30613' stroke-width='8'/%3E %3Cg fill='%23fff' stroke='%23121815' stroke-width='5'%3E%3Ccircle cx='80' cy='342' r='10'/%3E%3Ccircle cx='280' cy='350' r='10'/%3E%3Ccircle cx='470' cy='330' r='10'/%3E%3C/g%3E %3C/svg%3E"); } } :root[data-theme="dark"] .hero { --hero-scene: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 420' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E %3Ccircle cx='470' cy='96' r='48' fill='%23f28c28' fill-opacity='.42'/%3E %3Cg stroke='%23ff9e9e' stroke-opacity='.55' stroke-width='4'%3E %3Cpath d='M34 262 V196 H256 V262'/%3E %3Cpath d='M24 196 H266 M60 196 V172 H230 V196 M104 172 L145 146 L186 172'/%3E %3Cpath d='M110 262 V226 Q122 208 134 226 V262 M140 262 V222 Q152 202 164 222 V262 M170 262 V226 Q182 208 194 226 V262'/%3E %3Cpath d='M56 262 V224 H84 V262 M206 262 V224 H234 V262'/%3E %3C/g%3E %3Cg stroke='%23ff9e9e' stroke-opacity='.3' stroke-width='3'%3E%3Cpath d='M34 238 H256'/%3E%3C/g%3E %3Cg stroke='%23ff9e9e' stroke-opacity='.55' stroke-width='4' fill='%23ff7a7a' fill-opacity='.16'%3E %3Cpath d='M318 262 V118 H346 V262 Z'/%3E %3Cpath d='M362 262 V92 H390 V262 Z'/%3E %3Cpath d='M406 262 V104 H434 V262 Z'/%3E %3Cpath d='M450 262 V84 H480 V262 Z M450 104 H480 M456 84 V104 M474 84 V104'/%3E %3C/g%3E %3Cpath d='M10 262 H550' stroke='%23ff9e9e' stroke-opacity='.35' stroke-width='4'/%3E %3Cg stroke='%23ff7a7a' stroke-opacity='.5' stroke-width='3.5'%3E%3Cpath d='M320 282 H470 M340 298 H450 M40 282 H240 M70 298 H210'/%3E%3C/g%3E %3Cpath d='M10 350 C120 334 180 360 280 350 S460 322 550 334' stroke='%23e30613' stroke-width='8'/%3E %3Cg fill='%23fff' stroke='%23121815' stroke-width='5'%3E%3Ccircle cx='80' cy='342' r='10'/%3E%3Ccircle cx='280' cy='350' r='10'/%3E%3Ccircle cx='470' cy='330' r='10'/%3E%3C/g%3E %3C/svg%3E"); } /* Малюнок — лише там, де праворуч від тексту (780 px) є для нього місце. */ @media (max-width: 1299px) { .hero::after { display: none; } } /* Широкий шар ::before не має давати горизонтальну прокрутку. */ body { overflow-x: clip; } .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; 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: var(--radius-control); 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; } /* Попередження: тло й рамка кольору попередження (10 % і 40 % --warn), майже прямі кути, контурний трикутник замість червоного кружка. Кольори виведені з --warn, тож у темній темі тло темно-бурштинове. */ .alert { display: flex; gap: 12px; padding: 14px 20px; border-radius: 2px; background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); } .alert__icon { flex: none; width: 20px; height: 20px; margin-top: 2px; font-size: 0; color: transparent; background: var(--warn); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; } .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: var(--radius-control); width: 100%; } .planform .btn--primary { display: inline-flex; align-items: center; gap: 8px; } .planform .btn--primary svg { width: 18px; height: 18px; } /* Картка маршруту: шапка з часом і пересадками, нижче — таймлайн кроків. overflow: hidden — щоб фон шапки не вилазив за заокруглені кути. */ .journey { border: 1px solid var(--hairline); border-radius: var(--radius); margin: 0 0 16px; background: var(--canvas); overflow: hidden; } .journey__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 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: 16px 24px 12px; } /* Крок: час | вертикальна лінія кольору лінії метро з кружком | опис. Пішки — сірий пунктир; фінал — кружок без лінії. */ .leg { display: grid; grid-template-columns: 46px 18px minmax(0, 1fr); column-gap: 12px; } .leg__time { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; padding-top: 1px; } .leg__rail { position: relative; } .leg__rail::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: -4px; width: 4px; transform: translateX(-50%); border-radius: 2px; background: var(--c, var(--primary)); } .leg__rail::after { content: ""; position: absolute; left: 50%; top: 3px; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: var(--canvas); border: 3px solid var(--c, var(--primary)); box-sizing: border-box; } .leg--walk .leg__rail::before { width: 0; border-left: 3px dotted var(--hairline-input); background: none; border-radius: 0; } .leg--walk .leg__rail::after { border-color: var(--hairline-input); } .leg--end .leg__rail::before { display: none; } .leg--end .leg__rail::after { border-color: var(--ink); } .leg__icon { display: none; } .leg__body { min-width: 0; line-height: 1.45; padding-bottom: 18px; } .leg--end .leg__body { padding-bottom: 4px; } .leg--end .leg__title { display: block; } .leg__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; margin-bottom: 2px; } .leg__body small { display: block; color: var(--mute); font-size: 14px; } .leg__body small { display: block; color: var(--mute); font-size: 13px; } /* Зупинки в маршруті — посилання: лишаємо звичайне підкреслення посилань сайту, інакше на телефоні їх не відрізнити від тексту. */ .leg__body a { font-weight: 500; } .leg__body a:hover { text-decoration: underline; } /* Поле часу: Safari на iPhone малює його по-своєму — центрує значення і роздуває ширину. Приводимо до вигляду решти полів форми. */ .planform input[type="time"] { -webkit-appearance: none; appearance: none; text-align: left; min-width: 0; max-width: 100%; } .planform input[type="time"]::-webkit-date-and-time-value { text-align: left; } /* Підсумок вибору на мапі: без нього на телефоні незрозуміло, що після натискання «Origen» щось узагалі сталося — форма лишається вище екрана. */ .mapsel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; padding: 14px 18px; border: 1px solid var(--primary-soft); border-radius: var(--radius); background: var(--primary-subdued); } .mapsel__list { display: flex; flex-wrap: wrap; gap: 4px 18px; flex: 1; min-width: 200px; font-size: 14px; } .mapsel__list b { font-weight: 600; } .mapsel__list span { color: var(--mute); } .mapsel .btn--primary { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* Без явного розміру svg розтягується на всю кнопку і виштовхує текст. */ .mapsel .btn--primary svg { width: 18px; height: 18px; flex: none; } @media (max-width: 720px) { .mapsel { flex-direction: column; align-items: stretch; } .mapsel__list { flex-direction: column; gap: 4px; } .mapsel .btn--primary { width: 100%; } } /* Кружечки O і D на мапі. */ .odmark { display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2.5px solid #fff; background: var(--c); color: #fff; font: 700 15px/1 var(--text); box-shadow: 0 2px 6px rgba(22, 24, 29, .45); } @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: 14px 16px 8px; } .leg { grid-template-columns: 42px 16px minmax(0, 1fr); column-gap: 10px; } .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: var(--radius-control); 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; } /* На телефоні список найближчих зупинок закривав усю мапу, а кнопка закриття лишалася за її межами. Обмежуємо розмір і даємо власний скрол. */ .leaflet-popup-content-wrapper { max-width: calc(100vw - 48px); } .leaflet-popup-content { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; } .leaflet-popup-close-button { position: absolute; top: 4px; right: 4px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; font-size: 22px; line-height: 1; color: var(--ink); background: var(--canvas); border-radius: 50%; box-shadow: 0 1px 4px rgba(22, 24, 29, .25); } @media (max-width: 720px) { .planpop { min-width: 0; } .planpop__row { flex-wrap: wrap; } .planpop__btns { width: 100%; } .planpop__btns button { flex: 1; padding: 8px 10px; } } [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: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); } .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: var(--radius-control); 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; } .veh { position: relative; display: block; line-height: 0; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 1.5px rgba(22, 24, 29, .5)); } .veh svg { display: block; overflow: visible; } .veh .p { fill: var(--c); stroke: #fff; stroke-width: .8; } /* Номер лінії — табличка над машиною. */ .veh__num { position: absolute; left: 50%; bottom: calc(100% - 1px); transform: translateX(-50%); padding: 2px 5px; border-radius: 999px; white-space: nowrap; background: var(--c); color: #fff; border: 1.5px solid #fff; font: 700 10px/1 var(--text); font-variant-numeric: tabular-nums; } /* Поки на мапі показано маршрут, машини інших ліній не мають відвертати увагу: лишаємо їх ледь помітними і не клікабельними. */ .vmark-wrap.is-dim { opacity: .12; pointer-events: none; } /* Поїзд за розкладом, не за реальною позицією: світлий із пунктиром. */ .veh--est .p { fill: var(--canvas); stroke: var(--c); stroke-width: 1; stroke-dasharray: 2 1.4; } .veh--est .veh__num { background: var(--canvas); color: var(--c); border-style: dashed; border-color: var(--c); } .map__estimated { margin: 0 0 10px; padding: 10px 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); background: var(--canvas); border: 1px solid var(--hairline); border-left: 3px solid var(--warn); border-radius: var(--radius); } /* Кнопка виходу з режиму однієї лінії. */ .mapreset { padding: 7px 12px; font: 500 13px var(--text); color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(22, 24, 29, .2); cursor: pointer; } .mapreset:hover { color: var(--primary); border-color: var(--primary-soft); } /* Кнопка «моя локація»: під стандартними + / − Leaflet, того ж розміру. */ .maplocate { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 1px 5px rgba(22, 24, 29, .25); cursor: pointer; } .maplocate svg { width: 18px; height: 18px; } .maplocate:hover { color: var(--primary); } .maplocate.is-busy { color: var(--primary); animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .maplocate.is-busy { animation: none; } } /* Плавний рух значків між оновленнями замість стрибка */ /* Статичні точки на мапі: кружечок з піктограмою і хвостиком. */ .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; } /* Головна точка мапи «що поруч» і приглушені зупинки навколо неї. */ .pmark--focus { width: 40px; height: 40px; border-width: 2.5px; box-shadow: 0 3px 10px rgba(22, 24, 29, .45); } .pmark--focus svg { width: 22px; height: 22px; } .pmark--dim { width: 22px; height: 22px; opacity: .8; } .pmark--dim svg { width: 12px; height: 12px; } .leaflet-tooltip.maplabel { padding: 4px 9px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--canvas); color: var(--ink); font: 600 13px/1.3 var(--text); box-shadow: 0 2px 8px rgba(22, 24, 29, .18); } .leaflet-tooltip.maplabel::before { display: none; } .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; } .map--far .pmark--focus { width: 26px; height: 26px; border-radius: 6px; } .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: var(--on-primary); } /* Векторні стилі мають власний темний варіант, інвертувати їх не треба. */ :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; } .late { color: var(--bad); } /* Зворотний відлік до оновлення живих даних. */ .countdown { color: var(--mute); font-variant-numeric: tabular-nums; } .map__countdown { margin: 8px 0 0; font-size: 13px; text-align: right; } /* Переходи вимикаємо для тих, хто просив менше руху. */ @media (prefers-reduced-motion: reduce) { .btn, .search button, .search input, a.tile, .netsel summary, .iconbtn { transition: none; } a.tile:hover { transform: none; } } /* Банер згоди на cookies аналітики: знизу, не перекриває весь екран, дві рівноцінні кнопки (AEPD: «Rechazar» не має бути складнішим за «Aceptar»). */ .consent { position: fixed; z-index: 2000; left: 16px; right: 16px; bottom: 16px; max-width: 720px; margin: 0 auto; padding: 16px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); } .consent[hidden] { display: none; } .consent__text { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.5; } .consent__text a { color: var(--primary-soft); } .consent__actions { display: flex; gap: 8px; flex: none; } .consent .btn { height: 40px; padding: 0 18px; font-weight: 600; } /* .btn стоїть у файлі нижче за .btn--primary і перебиває його фон — повертаємо. */ .consent .btn--primary { height: 40px; border-color: transparent; background: var(--primary); color: var(--on-primary); } .consent .btn--primary:hover { background: var(--primary-press); color: var(--on-primary); } @media (max-width: 560px) { .consent__actions { width: 100%; } .consent__actions .btn { flex: 1; justify-content: center; } } /* Пам'ятки на мапі: кругла «табличка» з піктограмою будівлі. Білий фон в обох темах — як дорожній знак, його видно і на темній підкладці. */ .lmark { --lm: #8a4b1f; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2px solid var(--lm); color: var(--lm); box-shadow: 0 1px 4px rgba(0, 0, 0, .28); } .lmark svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .lmark--sea { --lm: #0b6fa4; } .lmark--nature { --lm: #2f7d32; } .lmark--leisure { --lm: #7b3fa0; } .map--far .lmark { width: 28px; height: 28px; } .map--far .lmark svg { width: 19px; height: 19px; } .lmark-tip { font-weight: 600; } /* Табло рейсів AENA (розділ «Aeropuertos»). */ .flights { width: 100%; border-collapse: collapse; font-size: 15px; } .flights th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 0 10px 8px 0; border-bottom: 1px solid var(--hairline); } .flights td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; } .flights td small { display: block; color: var(--mute); font-size: 13px; } .flights strong { font-weight: 600; } .fl-time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; width: 64px; } .fl-time small { color: var(--warn) !important; font-weight: 600; } .fl-code { font-variant-numeric: tabular-nums; white-space: nowrap; } .fl-status { display: inline-block; font-size: 13px; font-weight: 600; } .fl-status--ok { color: var(--go); } .fl-status--warn { color: var(--warn); } .fl-status--late { color: var(--bad); } .flights--compact td { padding: 8px 8px 8px 0; font-size: 14px; } .flights-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .flights-duo h3 { margin: 0 0 8px; } @media (max-width: 760px) { .flights-duo { grid-template-columns: 1fr; gap: 20px; } .flights th:nth-child(3), .flights td:nth-child(3) { display: none; } } /* Мапа терміналу: гейти — темні «таблички» з номером, зайняті рейсами — кольором бренду; сервіси — маленькі кружки з піктограмою. */ .gatepin { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; padding: 2px 6px; border-radius: 4px; font: 700 12px/1.3 var(--text); background: #1f2933; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); } .gatepin--busy { background: var(--primary); color: var(--on-primary); } .poi { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #3d4852; border: 1.5px solid #3d4852; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .poi svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .poi--toilets, .poi--info, .poi--meeting { color: #0b6fa4; border-color: #0b6fa4; } .poi--food { color: #b45309; border-color: #b45309; } .poi--pharmacy, .poi--medical { color: #08864a; border-color: #08864a; } .poi--atm, .poi--exchange { color: #7b3fa0; border-color: #7b3fa0; } /* Короткий перелік «що є» (термінал аеропорту): число великим, опис поруч. */ .facts { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; } .facts li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hairline); } .facts strong { font: 700 20px/1 var(--display); color: var(--primary); min-width: 1.6em; } /* Згорнуті довгі таблиці (/alsa: усі відправлення дня, решта напрямків). */ details.more { margin: 12px 0 0; } details.more > summary { cursor: pointer; color: var(--primary); font-weight: 600; padding: 6px 0; } details.more[open] > summary { margin-bottom: 8px; } /* Адмінка: редактор текстів сторінок (/admin/textos). */ .admin-form .field { display: block; margin: 0 0 18px; } .field__label { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink-2); } .field__label small { font-weight: 500; color: var(--mute); } .field__label small.is-over { color: var(--bad); } .admin-form input, .admin-form textarea, .admin-url input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline-input); border-radius: var(--radius-control); } .admin-form textarea { resize: vertical; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } } .rte__bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--hairline-input); border-bottom: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--canvas-soft); } .rte__bar button { font: inherit; font-size: 13px; padding: 5px 9px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--canvas); color: var(--ink); cursor: pointer; } .rte__bar button:hover { border-color: var(--primary); color: var(--primary); } .rte__area, .rte__source { min-height: 140px; padding: 14px 16px; border: 1px solid var(--hairline-input); border-radius: 0 0 var(--radius-control) var(--radius-control); background: var(--canvas); color: var(--ink); line-height: 1.6; outline: none; } .rte__area[data-small] { min-height: 70px; } .rte__area:focus, .admin-form input:focus, .admin-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-subdued); } .rte__area h2 { font-size: 22px; margin: 18px 0 8px; } .rte__area h3 { font-size: 18px; margin: 14px 0 6px; } .rte__area a { color: var(--primary-soft); } .rte__source { width: 100%; font: 13px/1.5 ui-monospace, Menlo, monospace; } .faq-edit { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--hairline); } .faq-edit input { font-weight: 600; } .admin-url { display: flex; gap: 8px; } .admin-url input { flex: 1; } .admin-badge { color: var(--go); font-weight: 600; } .admin-ok { border-left-color: var(--go); margin: 0 0 24px; } .admin-save { position: sticky; bottom: 0; margin: 24px 0; padding: 12px 0; background: var(--canvas); border-top: 1px solid var(--hairline); z-index: 5; } /* Кнопка з обома класами «btn btn--primary»: .btn оголошено пізніше й перебивав колір — текст виходив білим на білому. */ .btn.btn--primary { background: var(--primary); color: var(--on-primary); border-color: transparent; } .btn.btn--primary:hover { background: var(--primary-press); color: var(--on-primary); }