/* =========================================================================== Заправки Онлайн — приборная панель, а не дашборд. Токены названы по миру продукта: навес АЗС, асфальт, сигнальные лампы. Светлая тема — значение по умолчанию, тёмная включается data-theme="dark". =========================================================================== */ :root { /* поверхности: дневной свет над навесом */ --canopy: #f4f6fa; /* фон страницы */ --panel: #ffffff; /* карточки, шапка */ --panel-2: #edf1f7; /* вложенные элементы, невыбранные чипы */ --panel-3: #e3e9f1; /* нажатое состояние */ --hairline: rgba(18, 28, 46, .10); --hairline-2: rgba(18, 28, 46, .16); /* асфальт: четыре уровня текста */ --ink: #121a28; --ink-2: #46505f; --ink-3: #6c7789; --ink-4: #98a2b3; /* сигнальные лампы приборки */ --sig-ok: #16a34a; --sig-queue: #ea580c; --sig-low: #ca8a04; --sig-empty: #dc2626; --sig-idle: #9aa6b6; --sig-ink: #ffffff; /* текст на сигнальном фоне */ --map-bg: #f8f4f0; /* свет: в светлой теме подъём даёт тень, в тёмной — граница */ --lift: 0 0 0 1px rgba(18, 28, 46, .06), 0 1px 2px -1px rgba(18, 28, 46, .10), 0 4px 12px -4px rgba(18, 28, 46, .10); --lift-2: 0 0 0 1px rgba(18, 28, 46, .07), 0 2px 6px -2px rgba(18, 28, 46, .12), 0 12px 32px -8px rgba(18, 28, 46, .18); --ring: 0 0 0 3px rgba(22, 163, 74, .22); /* ритм: база 4px */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --ease: cubic-bezier(.23, 1, .32, 1); /* Стекло плавающих слоёв. Смысл материала в том, что карта под ним видна: панель на 78% читалась просто белой плашкой. 60% белого + blur 24 + saturate 1.7 оставляют кварталы и дороги узнаваемыми, а текст --ink на светлой карте держит запас по контрасту с большим отрывом (проверено на самом пёстром месте тайлов OSM). */ --glass: color-mix(in srgb, var(--panel) 60%, transparent); --glass-brd: rgba(18, 28, 46, .10); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .55); /* блик по верхней кромке */ --glass-shadow: 0 1px 2px -1px rgba(18, 28, 46, .14), 0 8px 24px -8px rgba(18, 28, 46, .22); /* геометрия оболочки: карта на весь экран, всё остальное плавает над ней */ --col: clamp(340px, 26vw, 420px); /* левая колонка и таб-бар на десктопе */ --tab-h: 56px; --peek: 56px; /* пик списка на телефоне */ --chips-h: 48px; /* ряд фильтров на телефоне */ --above-tab: calc(20px + var(--safe-b) + var(--tab-h)); --above-peek: calc(var(--above-tab) + var(--peek) + 8px); --top-row: calc(var(--safe-t) + 20px + var(--chips-h)); } :root[data-theme="dark"] { --canopy: #080b11; /* ночной асфальт */ --panel: #0e141d; --panel-2: #161d28; --panel-3: #1d2634; --hairline: rgba(255, 255, 255, .07); --hairline-2: rgba(255, 255, 255, .13); --ink: #eef2f8; --ink-2: #b3bccb; --ink-3: #8b96a8; --ink-4: #647082; --sig-ok: #30d56b; /* светящийся зелёный, как табло АЗС ночью */ --sig-queue: #ff8a2b; /* натриевый фонарь */ --sig-low: #ffc400; /* лампа резерва на приборке */ --sig-empty: #ff4d5a; /* стоп-сигнал */ --sig-idle: #5c6878; --sig-ink: #06150c; --map-bg: #0f141b; /* на тёмном тени не читаются — подъём даёт только контур */ --lift: 0 0 0 1px rgba(255, 255, 255, .08); --lift-2: 0 0 0 1px rgba(255, 255, 255, .10), 0 16px 40px -12px rgba(0, 0, 0, .7); --ring: 0 0 0 3px rgba(48, 213, 107, .26); --glass: color-mix(in srgb, var(--panel) 55%, transparent); --glass-brd: rgba(255, 255, 255, .16); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .08); --glass-shadow: 0 2px 12px rgba(0, 0, 0, .42), 0 14px 36px -14px rgba(0, 0, 0, .6); } * { box-sizing: border-box; } /* ============================================================ иконки Один inline-спрайт в начале , использование — . Обводка и заливка наследуются отсюда; символам с заливкой это сказано в самом спрайте. */ .ic { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ic-sm { width: 16px; height: 16px; } .ic-lg { width: 26px; height: 26px; stroke-width: 1.5; } html, body { margin: 0; height: 100%; background: var(--canopy); color: var(--ink); font: 14px/1.45 Inter, -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } body { display: flex; flex-direction: column; overflow: hidden; } button { font: inherit; cursor: pointer; } h1, h2 { margin: 0; letter-spacing: -.015em; text-wrap: balance; } /* ============================================================ стекло Все плавающие слои сделаны из одного материала: карта просвечивает, слой читается. .shell на телефоне снимается через display:contents — там стекло дают его дети. */ .shell, .filters, .sidebar, .map-tools, .map-chip, .hint, .tabbar, .sheet, .toast, .install, .efir-side, .efir-now, .efir-btn { background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); border: 1px solid var(--glass-brd); box-shadow: var(--glass-shadow), var(--glass-hi); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .shell, .filters, .sidebar, .map-tools, .map-chip, .hint, .tabbar, .sheet, .toast, .install, .efir-side, .efir-now, .efir-btn { background: var(--panel); } } /* ============================================================ шапка В приложении шапки больше нет — карта на весь экран. Полоса .top осталась только у посадочных страниц (backend/app/landing.py): там она липкая и стеклянная, чтобы «Открыть карту» была под рукой на всей длине документа. */ .top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid var(--hairline); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top { background: var(--panel); } } .brand { display: flex; align-items: center; gap: 9px; min-width: 0; } /* На телефоне от ссылки остаётся один значок 28px — расширяем тач-цель отступом, а раскладку возвращаем отрицательным полем. */ .filters .brand { padding: 8px; margin: -8px; } .filters .brand:focus-visible { outline: none; border-radius: var(--r-md); box-shadow: var(--ring); } .brand-badge { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: var(--r-sm); background: var(--sig-ok); color: var(--sig-ink); } .brand-badge svg { width: 18px; height: 18px; } .wordmark { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: -.01em; white-space: nowrap; } .wordmark b { color: var(--ink); font-weight: 600; } /* живой индикатор свежести — сигнатура дышащей приборки, живёт внутри .map-chip */ .pulse-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--sig-ok); box-shadow: 0 0 0 0 currentColor; color: var(--sig-ok); animation: breathe 2.4s var(--ease) infinite; } @keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sig-ok) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } } .pulse-dot.idle { background: var(--sig-idle); animation: none; box-shadow: none; } /* точка «вы здесь» — единственный синий на всём экране, поэтому не спорит со статусами */ .me-dot { width: 16px; height: 16px; border-radius: 50%; background: #2f7de1; border: 2.5px solid var(--panel); box-shadow: 0 0 0 1px rgba(47, 125, 225, .5), 0 2px 8px rgba(47, 125, 225, .45); } /* ============================================================ фильтры Плавающий ряд стеклянных пилюль: бренд, марки топлива, «только где есть». На десктопе тот же элемент становится шапкой левой колонки. */ .filters { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px 6px 6px; border-radius: var(--r-lg); } .chiprail { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .chiprail::-webkit-scrollbar { display: none; } .chips { display: flex; gap: 6px; flex: 0 0 auto; } .chip { flex: 0 0 auto; height: 34px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--panel-2); color: var(--ink-3); font-size: 13px; font-weight: 500; letter-spacing: -.005em; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease); } .chip:hover { color: var(--ink); } .chip:active { transform: scale(.96); } .chip:focus-visible { outline: none; box-shadow: var(--ring); } /* aria-selected — марка топлива, aria-checked — оператор связи: пилюля одна и та же */ .chip[aria-selected="true"], .chip[aria-checked="true"] { background: var(--sig-ok); border-color: var(--sig-ok); color: var(--sig-ink); font-weight: 600; } /* «Только где есть» — тот же чип, но с галочкой: один компонент вместо чипов и тумблера */ .chip-only { display: inline-flex; align-items: center; gap: 6px; } .chip-only svg { width: 0; height: 14px; opacity: 0; transition: width .15s var(--ease), opacity .15s var(--ease); } .chip[aria-pressed="true"] { background: color-mix(in srgb, var(--sig-ok) 13%, transparent); border-color: color-mix(in srgb, var(--sig-ok) 50%, transparent); color: var(--sig-ok); font-weight: 600; } .chip[aria-pressed="true"] svg { width: 14px; opacity: 1; } /* ============================================================ каркас Карта на весь экран, поверх неё — плавающие слои. На десктопе .shell собирает фильтры, список и легенду в одну стеклянную колонку слева; на телефоне он снимается (display:contents), и слои плавают порознь. */ .shell { position: fixed; z-index: 20; left: 12px; top: 12px; bottom: var(--above-tab); width: var(--col); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); } .sidebar { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; } .side-head { position: relative; /* внутри лежит полоса состава, абсолютом по нижней кромке */ display: flex; align-items: center; gap: 10px; width: 100%; flex: 0 0 auto; padding: 14px 14px 12px; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; color: inherit; text-align: left; } .side-head h2 { font-size: 15px; font-weight: 600; } /* место под полосу состава оставляем только там, где она есть — в списке АЗС */ #view-toplivo .side-head { padding-bottom: 20px; } .side-count { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; margin-left: auto; } .side-chev { display: none; width: 18px; height: 18px; color: var(--ink-4); transition: transform .22s var(--ease); } /* Состав видимой области одной полосой: доли статусов в цветах шкалы. Живёт в самой шапке, поэтому виден и когда список свёрнут в пик — как индикатор на приборке. */ .mixbar { position: absolute; left: 14px; right: 14px; bottom: 8px; display: flex; gap: 2px; height: 6px; } .mixbar i { min-width: 3px; border-radius: 3px; } .mx-yes { background: var(--sig-ok); } .mx-queue { background: var(--sig-queue); } .mx-low { background: var(--sig-low); } .mx-no { background: var(--sig-empty); } .mx-idle { background: var(--sig-idle); opacity: .32; } /* Пока первый ответ не пришёл — три карточки той же высоты вместо пустоты. */ .side-skel { position: relative; height: 62px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--hairline); border-radius: 14px; background: var(--panel-2); } .side-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 75%, transparent), transparent); transform: translateX(-100%); animation: shimmer 1.3s var(--ease) infinite; } @keyframes shimmer { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .side-skel::after { animation: none; } } .side-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; } /* строка списка — карточка: аватар, статус шкалой, что продаёт, расстояние. Тот же компонент несут списки регионов («Связь») и эфиров («Эфир»). */ .side-row, .efir-row { display: flex; align-items: center; gap: 12px; width: 100%; flex: 0 0 auto; padding: 10px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--panel); color: inherit; text-align: left; transition: background .13s var(--ease), border-color .13s var(--ease), transform .1s var(--ease); } .side-row:hover, .efir-row:hover { background: var(--panel-2); } .side-row:active, .efir-row:active { transform: scale(.985); } .side-row:focus-visible, .efir-row:focus-visible { outline: none; box-shadow: var(--ring); } .side-row.is-sel, .efir-row[aria-selected="true"] { border-color: var(--sig-ok); box-shadow: inset 0 0 0 1px var(--sig-ok); } .side-row .brand-avatar { width: 40px; height: 40px; } /* поиск в шапке списка (регионы, эфиры) */ .side-search { position: relative; display: block; flex: 0 0 auto; padding: 10px 10px 2px; } .efir-search { position: relative; display: block; } .field-ic { position: absolute; color: var(--ink-4); pointer-events: none; } .side-search .field-ic { left: 22px; top: calc(50% + 4px); transform: translateY(-50%); } .efir-search .field-ic { left: 11px; top: 50%; transform: translateY(-50%); } .side-search input, .efir-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; box-sizing: border-box; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 14px; } .side-search input::placeholder, .efir-search input::placeholder { color: var(--ink-4); } .side-search input:focus-visible, .efir-search input:focus-visible { outline: none; box-shadow: var(--ring); } .side-search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); } .side-main { min-width: 0; flex: 1; } .side-name { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .side-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-sells { margin-top: 2px; font-size: 12px; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-dist { font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .side-go { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ink-4); } .side-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 18px; text-align: center; color: var(--ink-4); font-size: 13px; text-wrap: pretty; } /* На десктопе стекло одно — у колонки; фильтры и список внутри неё прозрачны. */ @media (min-width: 1000px) { .filters, .sidebar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; } .filters { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 14px 12px; border-radius: 0; border-bottom: 1px solid var(--hairline); } .chiprail { flex-wrap: wrap; overflow: visible; } /* без flex:1 у .chips её ширина — max-content, и перенос внутри не срабатывает: последние марки (ДТ, Газ) и последние операторы уезжали за край колонки */ .chips { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; } .side-list { order: 1; } .map-legend { order: 2; } /* легенда — подвал колонки */ } /* --- шкала бака: сигнатура. Один глиф статуса на весь продукт. */ .gauge { display: inline-flex; gap: 2px; flex: 0 0 auto; padding: 3px; border-radius: 5px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--hairline); } .gauge i { width: 4px; height: 14px; border-radius: 1.5px; background: var(--sig-idle); opacity: .28; } /* Полная — есть, ¾ — очередь, ¼ — заканчивается, одно деление — пусто. */ .gauge.g-yes i:nth-child(-n+4) { background: var(--sig-ok); opacity: 1; } .gauge.g-queue i:nth-child(-n+3) { background: var(--sig-queue); opacity: 1; } .gauge.g-low i:nth-child(-n+2) { background: var(--sig-low); opacity: 1; } .gauge.g-no i:nth-child(-n+1) { background: var(--sig-empty); opacity: 1; } .gauge.g-lg { padding: 4px; border-radius: 7px; } .gauge.g-lg i { width: 5px; height: 20px; border-radius: 2px; } /* --- карта на весь экран: она и есть страница, всё прочее плавает над ней */ .mapcard { position: fixed; inset: 0; z-index: 0; background: var(--map-bg); } #map { position: absolute; inset: 0; } .maplibregl-map { font: inherit; } /* Копирайт OpenStreetMap обязан быть виден: на широком экране — полной строкой, на телефоне MapLibre сам сворачивает его в кнопку «i». */ .maplibregl-ctrl-attrib { background: var(--glass) !important; -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); color: var(--ink-3) !important; font-size: 10.5px; border-radius: 6px 0 0 0; } .maplibregl-ctrl-attrib a { color: var(--ink-4) !important; } /* На телефоне копирайт держим свёрнутым в кнопку «i»: развёрнутой плашкой он ложится поперёк карты и наезжает на список. Разворачивается нажатием — правило самого MapLibre. */ .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) { border-radius: 50%; } /* MapLibre 5 оставляет копирайт свёрнутым и на широком экране. Там он обязан читаться строкой — разворачиваем стилями, без своего обработчика resize. */ @media (min-width: 1000px) { .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-compact { margin: 0; padding: 2px 9px; border-radius: 6px 0 0 0; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { display: block; } .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-button { display: none; } } /* чип свежести поверх карты: сколько АЗС в кадре и насколько данные свежие */ .map-chip { position: absolute; top: 12px; left: calc(var(--col) + 24px); z-index: 2; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .chip-sep { color: var(--ink-4); } /* плавающие контролы стопкой — большой палец достаёт, карта не перекрыта. Стопка живёт вне разделов: кнопка темы нужна в любом из трёх, а зум и «где я» — только на карте, поэтому вне «Топлива» они просто прячутся. */ .map-tools { position: fixed; top: 12px; right: 12px; z-index: 30; display: flex; flex-direction: column; gap: 1px; padding: 3px; border-radius: 13px; /* Стопка мелкая, и сквозь неё пролезал пин: у крупных панелей стекло читается как материал, у кнопки — как грязь. Здесь подложка плотнее, размытие остаётся. */ background: color-mix(in srgb, var(--panel) 84%, transparent); } html:not([data-tab="toplivo"]) #zoom-in, html:not([data-tab="toplivo"]) #zoom-out, html:not([data-tab="toplivo"]) #locate { display: none; } /* осталась одна кнопка — разделитель над ней не нужен */ html:not([data-tab="toplivo"]) #theme { margin-top: 0; box-shadow: none; } /* в «Эфире» справа стоит колонка со списком — стопку сдвигаем левее неё */ @media (min-width: 1000px) { html[data-tab="efir"] .map-tools { right: calc(var(--col) + 24px); } } .tool { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); transition: background .13s var(--ease), color .13s var(--ease), transform .1s var(--ease); } .tool svg { width: 20px; height: 20px; } .tool:hover { background: var(--panel-2); color: var(--ink); } .tool:active { transform: scale(.93); } .tool-gap { margin-top: 5px; box-shadow: 0 -3px 0 -2px var(--hairline); } /* ключ к шкале: на карте ему места нет — живёт в колонке со списком */ .map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex: 0 0 auto; padding: 10px 14px calc(10px + var(--safe-b)); border-top: 1px solid var(--hairline); font-size: 11.5px; color: var(--ink-3); } .lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; } /* счётчик по видимой области рядом с делением: сколько АЗС сейчас в этом состоянии */ .lg-n { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .lg-n:empty { display: none; } .map-legend .gauge { padding: 2px; border-radius: 4px; } .map-legend .gauge i { width: 3px; height: 11px; } .hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; padding: 9px 16px; border-radius: 999px; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; } /* ============================================================ карточка АЗС */ /* Карточка — единственная поверхность, где читают мелкий текст (подпись источника, дисклеймер): её стекло плотнее общего, иначе --ink-4 на пёстрой карте проседает по контрасту. Карта под ней всё равно видна. */ .sheet { --glass: color-mix(in srgb, var(--panel) 72%, transparent); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 20px 18px calc(20px + var(--safe-b)); border-radius: 20px 20px 0 0; box-shadow: var(--lift-2), var(--glass-hi); animation: rise .22s var(--ease); /* Карточка выросла (марки + маршрут) — на невысоком экране она упиралась в стопку инструментов и перехватывала по ней клики. Высоту режем, содержимое скроллится. */ max-height: calc(100dvh - 12px); overflow-y: auto; overscroll-behavior: contain; } @keyframes rise { from { transform: translateY(14px); opacity: 0; } } @media (min-width: 1000px) { .sheet { left: auto; right: 24px; bottom: 24px; width: 372px; /* 210px сверху оставлены стопке инструментов: иначе высокая карточка накрывает её и перехватывает клики по зуму и теме. */ max-height: calc(100dvh - 210px); border-radius: var(--r-lg); animation: pop .18s var(--ease); } .sheet-grip { display: none; } } @keyframes pop { from { transform: scale(.96); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .pulse-dot { animation: none; } } .sheet-grip { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 999px; background: var(--hairline-2); } .sheet-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--ink-3); transition: color .13s var(--ease), transform .1s var(--ease); } .sheet-close svg { width: 18px; height: 18px; } .sheet-close:hover { color: var(--ink); } .sheet-close:active { transform: scale(.92); } .sheet-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 40px 14px 0; } .brand-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--hairline); font-size: 15px; font-weight: 600; color: var(--ink-3); } .sheet h2 { font-size: 18px; font-weight: 600; line-height: 1.25; } .sheet-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-4); } .sheet-status { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--r-md); background: var(--panel-2); border: 1px solid var(--hairline); } .st-body { min-width: 0; } .st-title { font-size: 14px; font-weight: 600; color: var(--ink); } .st-meta { font-size: 12px; color: var(--ink-4); margin-top: 2px; font-variant-numeric: tabular-nums; } /* Что АЗС продаёт и что с каждой маркой прямо сейчас — главный экран продукта. Ряд безмолвных чипов «АИ-92 АИ-95 ДТ» заменён сеткой: марка, её шкала, подпись. */ .sheet-grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; margin: -8px 0 12px; } .sheet-grades:empty { display: none; } /* Строка марки — одна: название, её шкала, короткая подпись. Так шесть марок занимают три ряда, а не шесть: карточка целиком остаётся на одном экране. */ .grade { display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 9px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--panel-2); } .grade-name { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: -.005em; } .grade-row { display: flex; align-items: center; gap: 7px; min-width: 0; margin-left: auto; } .grade-state { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grade .gauge { padding: 2px; border-radius: 4px; } .grade .gauge i { width: 3.5px; height: 12px; } /* выбранная марка — та, по которой сейчас раскрашена карта */ .grade.is-cur { border-color: color-mix(in srgb, var(--sig-ok) 55%, transparent); background: color-mix(in srgb, var(--sig-ok) 9%, transparent); } .grade.is-cur .grade-name { color: var(--ink); } .sheet-facts { display: grid; gap: 9px; margin: 0 0 14px; } .sheet-facts:empty { display: none; } .fact { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); } .fact > .ic { color: var(--ink-4); } .fact a { color: var(--sig-ok); text-decoration: none; } .fact a:hover { text-decoration: underline; } .fact-price { align-items: flex-start; gap: 9px; } .fact-price .fuel-tag { margin-top: 1px; } .price-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .price-main .st-price { gap: 8px; } .price-main .row-meta { display: block; font-size: 11.5px; color: var(--ink-4); text-wrap: pretty; } /* «Маршрут» — единственное действие карточки помимо отметки: тач отдаёт точку системе, мышь ведёт в Яндекс.Карты. Тач-цель 44. */ .sheet-acts { display: flex; gap: 8px; margin: 0 0 16px; } .sheet-acts:empty { display: none; } .act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--panel-2); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .13s var(--ease), border-color .13s var(--ease), transform .1s var(--ease); } .act:hover { background: var(--panel-3); border-color: var(--hairline-2); } .act:active { transform: scale(.97); } .act:focus-visible { outline: none; box-shadow: var(--ring); } .act .ic { color: var(--ink-3); } .sheet-ask { margin: 0 0 9px; font-size: 12.5px; color: var(--ink-3); } .report { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } @media (max-width: 400px) { .report { grid-template-columns: repeat(2, 1fr); gap: 8px; } } .rep { min-height: 48px; padding: 12px 4px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--panel-2); color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: -.012em; transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease), transform .1s var(--ease); } .rep:active { transform: scale(.97); } .rep-yes:hover { background: var(--sig-ok); border-color: var(--sig-ok); color: var(--sig-ink); } .rep-queue:hover { background: var(--sig-queue); border-color: var(--sig-queue); color: var(--sig-ink); } .rep-low:hover { background: var(--sig-low); border-color: var(--sig-low); color: var(--sig-ink); } .rep-no:hover { background: var(--sig-empty); border-color: var(--sig-empty); color: var(--sig-ink); } .rep[disabled] { opacity: .45; pointer-events: none; } .sheet-note { margin: 12px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-4); text-wrap: pretty; } /* ============================================================ тост */ .toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 1200; max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px; box-shadow: var(--lift-2), var(--glass-hi); font-size: 13.5px; font-weight: 500; animation: drop .2s var(--ease); } @keyframes drop { from { transform: translate(-50%, -8px); opacity: 0; } } .toast.err { color: var(--sig-empty); border-color: color-mix(in srgb, var(--sig-empty) 45%, transparent); } /* ================================================== посадочные страницы */ body.doc { overflow: auto; display: block; background: var(--canopy); } .ghost-link { padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--panel-2); color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; } .ghost-link:hover { color: var(--ink); border-color: var(--hairline-2); } .brand { text-decoration: none; color: inherit; } .page { max-width: 780px; margin: 0 auto; padding: 28px 18px 40px; } .crumbs { font-size: 12.5px; color: var(--ink-4); margin-bottom: 14px; } .crumbs a { color: var(--ink-3); text-decoration: none; } .crumbs a:hover { color: var(--ink); } .crumbs span { margin: 0 5px; opacity: .6; } .crumbs b { color: var(--ink-2); font-weight: 500; } .page h1 { font-size: 28px; font-weight: 640; line-height: 1.15; margin-bottom: 10px; } .lede { margin: 0 0 20px; font-size: 15px; color: var(--ink-2); text-wrap: pretty; } .cta { display: inline-block; padding: 12px 22px; border-radius: var(--r-md); background: var(--sig-ok); color: var(--sig-ink); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: transform .1s var(--ease), filter .15s var(--ease); } .cta:hover { filter: brightness(1.06); } .cta:active { transform: scale(.97); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin: 26px 0 0; } .card { padding: 14px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--panel); box-shadow: var(--lift); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; } .card-num { margin-top: 8px; font-size: 22px; font-weight: 640; font-variant-numeric: tabular-nums; } .card-meta { margin-top: 3px; font-size: 11.5px; color: var(--ink-4); text-wrap: pretty; } .block { margin-top: 32px; } .block h2 { font-size: 17px; font-weight: 600; margin-bottom: 12px; } .rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--lift); overflow: hidden; } .rows .row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; } .rows .row + .row { border-top: 1px solid var(--hairline); } .row-main { min-width: 0; flex: 1; } .row-name { display: block; font-size: 14px; font-weight: 550; color: var(--ink); text-decoration: none; } a.row-name:hover { color: var(--sig-ok); } .row-meta { display: block; font-size: 12px; color: var(--ink-4); margin-top: 1px; } .empty { padding: 22px 16px; border: 1px dashed var(--hairline-2); border-radius: var(--r-md); color: var(--ink-4); font-size: 13.5px; text-align: center; text-wrap: pretty; } .chip-row { display: flex; flex-wrap: wrap; gap: 7px; } .chip-link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 13px; text-decoration: none; } .chip-link span { color: var(--ink-4); font-size: 11.5px; font-variant-numeric: tabular-nums; } a.chip-link:hover { border-color: var(--sig-ok); color: var(--ink); } .chip-link.static { background: var(--panel-2); } .prose p { font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; } .page-foot { max-width: 780px; margin: 0 auto; padding: 20px 18px 40px; border-top: 1px solid var(--hairline); } .page-foot p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-4); text-wrap: pretty; } .page-foot a { color: var(--ink-3); } @media (max-width: 560px) { .page h1 { font-size: 23px; } .page { padding: 20px 14px 32px; } } /* ============================================================ мобильное */ /* На телефоне колонки нет: ряд фильтров сверху, список — bottom-sheet над таб-баром. .shell снимается через display:contents, его дети плавают сами по себе. */ @media (max-width: 999px) { .top { padding: 9px 12px; } /* полоса осталась только у посадочных */ .filters .wordmark { display: none; } /* в ряду фильтров остаётся один значок */ .shell { display: contents; } .filters { position: fixed; z-index: 22; top: calc(var(--safe-t) + 12px); left: 12px; right: 12px; } /* правый край растворяется — видно, что ряд можно листать. Отступ в ширину затухания: иначе последний чип и в конце прокрутки остаётся наполовину растворённым. */ .chiprail { padding-right: 26px; scroll-padding-right: 26px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); } .map-chip { top: var(--top-row); left: 12px; font-size: 11.5px; padding: 6px 10px; } .map-tools { top: var(--top-row); } .sidebar { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: var(--above-tab); height: var(--peek); flex: 0 0 auto; border-radius: var(--r-lg); transition: height .24s var(--ease); } .sidebar.is-open { height: 62dvh; } .side-head { position: relative; height: var(--peek); padding: 10px 14px 0; border-bottom: 0; } .side-head::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 999px; background: var(--hairline-2); } .side-chev { display: block; } .sidebar.is-open .side-head { border-bottom: 1px solid var(--hairline); } .sidebar.is-open .side-chev { transform: rotate(180deg); } .map-legend { border-top: 0; border-bottom: 1px solid var(--hairline); padding-bottom: 10px; } .hint { bottom: var(--above-peek); } /* копирайт карты не должен нырять под список и таб-бар */ .maplibregl-ctrl-bottom-right { bottom: var(--above-peek); } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* --- цены ----------------------------------------------------------------- Цена — не сигнал наличия, поэтому ни один сигнальный цвет здесь не звучит. Марка топлива — шильдик на приборке, дельта — служебная подпись без цвета: единственный акцент на сайте зарезервирован за зелёным «топливо есть». */ .fuel-tag { flex: none; min-width: 52px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink-2); font-size: 11.5px; font-weight: 600; text-align: center; letter-spacing: .01em; } .delta { flex: none; font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; } .src { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-4); text-wrap: pretty; } .st-price { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; } .st-price b { font-weight: 640; color: var(--ink); } /* ============================================================ разделы (табы) */ /* Видимость раздела держит CSS по data-tab на — так нет мигания «не тем разделом» до загрузки JS. JS только синхронизирует data-tab и aria на переключении. */ .view { display: none; } html[data-tab="toplivo"] #view-toplivo { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* «Связь» и «Эфир» объявляют свою раскладку в собственных секциях ниже: у первой сцена на весь экран, у второго — липкий плеер и скролл списка. Общего правила у них нет. */ /* Переключатель разделов — единственный на всех ширинах: плавающая пилюля внизу. На десктопе стоит под левой колонкой и повторяет её ширину. */ .tabbar { position: fixed; z-index: 40; bottom: calc(12px + var(--safe-b)); left: 12px; width: var(--col); height: var(--tab-h); display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; } .switch-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; height: 48px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); text-decoration: none; white-space: nowrap; transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease); } .switch-tab svg { width: 20px; height: 20px; flex: 0 0 auto; } .switch-tab:hover { color: var(--ink-2); } .switch-tab:focus-visible { outline: none; box-shadow: var(--ring); } html[data-tab="toplivo"] .switch-tab[data-tab="toplivo"], html[data-tab="svyaz"] .switch-tab[data-tab="svyaz"], html[data-tab="efir"] .switch-tab[data-tab="efir"] { background: color-mix(in srgb, var(--sig-ok) 10%, transparent); border-color: var(--sig-ok); color: var(--ink); font-weight: 600; } html[data-tab="toplivo"] .switch-tab[data-tab="toplivo"] svg, html[data-tab="svyaz"] .switch-tab[data-tab="svyaz"] svg, html[data-tab="efir"] .switch-tab[data-tab="efir"] svg { color: var(--sig-ok); } @media (max-width: 999px) { .tabbar { left: 50%; transform: translateX(-50%); width: auto; max-width: calc(100vw - 24px); } .switch-tab { flex: 0 0 auto; padding: 0 16px; } } @media (max-width: 360px) { .switch-tab { padding: 0 12px; font-size: 13px; } } /* ============================================================ установка (PWA) */ .install { position: fixed; left: 12px; right: 12px; bottom: var(--above-peek); /* над таб-баром и списком */ z-index: 60; display: flex; align-items: center; gap: 12px; max-width: 460px; margin: 0 auto; padding: 10px 12px; border-radius: var(--r-lg); box-shadow: var(--lift-2), var(--glass-hi); } .install-badge { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--r-sm); background: var(--sig-ok); color: var(--sig-ink); } .install-badge svg { width: 20px; height: 20px; } .install-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .install-text b { font-size: 14px; font-weight: 600; color: var(--ink); } .install-text span { font-size: 12px; color: var(--ink-3); } .install-add { flex: 0 0 auto; padding: 8px 14px; border: none; border-radius: var(--r-sm); background: var(--sig-ok); color: var(--sig-ink); font-size: 13px; font-weight: 600; cursor: pointer; } .install-add:focus-visible { outline: none; box-shadow: var(--ring); } .install-close { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--ink-4); cursor: pointer; } .install-close svg { width: 16px; height: 16px; } @media (max-width: 560px) { .top { gap: 8px; padding: 8px 12px; } /* полоса посадочных страниц */ } /* ============================================================ раздел «Связь» */ :root { --region-idle: #d6ddea; --region-line: #f4f6fa; } :root[data-theme="dark"] { --region-idle: #1b2431; --region-line: #080b11; } /* Раскладка та же, что у «Топлива»: сцена на весь экран, поверх неё плавает стеклянная колонка (на телефоне она же — bottom-sheet со списком регионов). Ряд операторов — тот же .filters с чипами, что и марки топлива. */ html[data-tab="svyaz"] #view-svyaz { display: block; } .link-stage { position: fixed; inset: 0; z-index: 0; display: grid; place-items: center; padding: 12px 12px 12px calc(var(--col) + 24px); background: var(--canopy); } .link-map { width: 100%; max-height: 100%; display: grid; place-items: center; } .ru-svg { width: 100%; height: auto; max-height: 100%; display: block; } .ru-region { fill: var(--region-idle); stroke: var(--region-line); stroke-width: 0.25; cursor: pointer; transition: fill .15s var(--ease), opacity .15s var(--ease); } .ru-region:hover { opacity: .82; } .ru-region:focus-visible { outline: none; stroke: var(--ink); stroke-width: 0.6; } .ru-region[data-status="ok"] { fill: var(--sig-ok); } .ru-region[data-status="throttled"] { fill: var(--sig-queue); } .ru-region[data-status="down"] { fill: var(--sig-empty); } .ru-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--region-idle); flex: 0 0 auto; } .ru-dot[data-status="ok"] { background: var(--sig-ok); } .ru-dot[data-status="throttled"] { background: var(--sig-queue); } .ru-dot[data-status="down"] { background: var(--sig-empty); } /* Подсказка — тот же чип, что счётчик свежести над картой АЗС. */ .link-hint { position: fixed; margin: 0; pointer-events: none; } .link-fail { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 16px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--hairline-2); color: var(--ink-2); font-size: 14px; } /* карточка региона */ .op-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 16px; } .op-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: none; border-radius: var(--r-sm); background: var(--panel-2); cursor: pointer; text-align: left; } .op-row[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink-4); } .op-row:focus-visible { outline: none; box-shadow: var(--ring); } .op-name { font-size: 14px; font-weight: 500; color: var(--ink); } .op-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); } .op-ago { color: var(--ink-4); } .op-current { color: var(--ink); font-weight: 600; } .link-report .rep-no { grid-column: auto; } /* Телефон: карте отдана свободная область над пиком списка. Портрет для России слишком узкий, поэтому даём ей минимум 760px и горизонтальную прокрутку внутри контейнера — документ при этом не шире экрана. Влево не центрируем: иначе левый край не доскроллить. */ @media (max-width: 999px) { .link-stage { padding: calc(var(--top-row) + 8px) 0 var(--above-peek); } .link-map { place-items: center start; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; scrollbar-width: none; } .link-map::-webkit-scrollbar { display: none; } .ru-svg { width: max(100vw, 720px); } } /* ============================================================ раздел «Эфир» */ /* Десктоп: плеер и строка «сейчас» по центру сцены, список — стеклянная колонка справа. Телефон: плеер и строка «сейчас» липнут сверху, список скроллится под ними до таб-бара. */ html[data-tab="efir"] #view-efir { display: flex; flex: 1; min-height: 0; } .efir { display: flex; flex: 1; min-width: 0; min-height: 0; } .efir-stage { flex: 1 1 0%; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 12px calc(var(--col) + 24px) var(--above-tab) 12px; overflow: hidden; } /* Ширину плеера ограничивает высота экрана: так 16:9 не вылезает за сцену и не приходится letterbox-ить его самому. */ .efir-player { position: relative; width: min(100%, calc((100dvh - 210px) * 16 / 9)); margin-inline: auto; aspect-ratio: 16 / 9; background: #05070a; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--hairline); } .efir-player video, .efir-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #05070a; object-fit: contain; } .efir-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; background: rgba(5, 7, 10, .72); backdrop-filter: blur(2px); color: #e8edf5; } .efir-overlay .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9fb0c4; margin: 0; } .efir-overlay p { margin: 0; font-size: 14px; line-height: 1.5; max-width: 420px; color: #cdd6e2; } /* Кнопка раздела — стекло и высота как у кнопок отметки: один язык на весь продукт. */ .efir-btn { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-md); color: var(--ink); font-size: 13.5px; font-weight: 600; letter-spacing: -.008em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color .13s var(--ease), transform .1s var(--ease); } .efir-btn:active { transform: scale(.97); } .efir-btn.is-accent { background: var(--sig-ok); color: var(--sig-ink); border-color: transparent; } .efir-btn:focus-visible { outline: none; box-shadow: var(--ring); } .efir-acts { display: flex; gap: 8px; flex: 0 0 auto; } .efir-live { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(5, 7, 10, .6); color: #fff; font-size: 11px; font-weight: 600; } .efir-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sig-empty); } /* строка «сейчас» — стеклянная полоса под плеером, ровно его ширины */ .efir-now { display: flex; align-items: center; gap: 12px; width: min(100%, calc((100dvh - 210px) * 16 / 9)); margin-inline: auto; flex: 0 0 auto; padding: 9px 12px 9px 14px; border-radius: var(--r-lg); } .efir-now-main { min-width: 0; flex: 1; } /* без min-width:0 nowrap-строки раздувают полосу */ .efir-now h2 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 1px 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .efir-now .eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin: 0; } .efir-sub { font-size: 12.5px; color: var(--ink-3); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* колонка со списком — плавающее стекло, как левая колонка «Топлива» */ .efir-side { position: fixed; z-index: 20; right: 12px; top: 12px; bottom: 12px; width: var(--col); display: flex; flex-direction: column; min-height: 0; min-width: 0; border-radius: var(--r-lg); overflow: hidden; } /* сегмент, поиск и округа — одна область без внутренних разделителей */ .efir-tools { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 10px; } .efir-seg { display: flex; gap: 2px; padding: 3px; background: var(--panel-2); border-radius: var(--r-sm); } .efir-seg button { flex: 1; height: 30px; border: none; border-radius: 6px; background: transparent; color: var(--ink-3); font-size: 13px; font-weight: 500; cursor: pointer; } .efir-seg button[aria-checked="true"] { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--lift); } .efir-seg button:focus-visible { outline: none; box-shadow: var(--ring); } .efir-districts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 12px 10px; border-bottom: 1px solid var(--hairline); } .efir-districts::-webkit-scrollbar { display: none; } .efir-chip { flex: 0 0 auto; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--panel-2); color: var(--ink-3); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .efir-chip:hover { color: var(--ink); } .efir-chip:focus-visible { outline: none; box-shadow: var(--ring); } .efir-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--sig-ok) 13%, transparent); border-color: color-mix(in srgb, var(--sig-ok) 50%, transparent); color: var(--sig-ok); font-weight: 600; } .efir-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; } .efir-kind { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); font-size: 10px; font-weight: 700; text-transform: uppercase; background: var(--panel-2); border: 1px solid var(--hairline); color: var(--ink-3); } .efir-kind[data-kind="tv"] { background: color-mix(in oklab, var(--sig-ok) 16%, transparent); color: var(--sig-ok); } .efir-kind .ic { width: 19px; height: 19px; } .efir-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; } .efir-row-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .efir-row-sub { font-size: 12px; color: var(--ink-4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .efir-empty, .efir-fail { padding: 24px 16px; font-size: 13px; color: var(--ink-3); text-align: center; text-wrap: pretty; } .efir-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; } .efir-empty .ic { color: var(--ink-4); } /* Слева колонки нет — таб-бар на этом разделе стоит внизу по центру. */ @media (min-width: 1000px) { html[data-tab="efir"] .tabbar { left: 50%; transform: translateX(-50%); width: auto; } html[data-tab="efir"] .switch-tab { flex: 0 0 auto; padding: 0 18px; } } /* Телефон: раздел — один скролл, плеер со строкой «сейчас» липнут сверху. */ @media (max-width: 999px) { .efir { flex-direction: column; overflow-y: auto; overflow-x: hidden; padding-bottom: var(--above-tab); } .efir-stage { position: sticky; top: 0; z-index: 3; flex: 0 0 auto; justify-content: flex-start; gap: 8px; overflow: visible; padding: calc(var(--safe-t) + 12px) 12px 10px; background: var(--canopy); } .efir-player, .efir-now { width: 100%; } /* В одну строку с кнопками названию остаётся ~90px и оно срезается на первом слове — на телефоне кнопки уходят вниз и делят ширину пополам. */ .efir-now { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; } .efir-now-main { flex: none; } .efir-now h2 { font-size: 15px; } .efir-acts { display: flex; } .efir-acts .efir-btn { flex: 1; min-width: 0; } /* Ландшафт телефона: плеер 16:9 занимает весь экран, липким он прячет список навсегда. */ @media (max-height: 500px) { .efir-stage { position: static; } } .efir-side { position: static; width: auto; flex: 1 0 auto; margin: 0 12px; overflow: visible; } .efir-list { flex: 0 0 auto; overflow: visible; } /* Кнопка темы садится в угол плеера, зеркально бейджу «в эфире»: внизу она перекрывала текст строк списка, а список тут — основная плоскость. */ html[data-tab="efir"] .map-tools { top: calc(var(--safe-t) + 22px); right: 22px; } /* Плеер всегда чёрный, поэтому и стекло над ним — тёмное в обеих темах: светлое стекло на чёрном рендерится серым непрозрачным квадратом. */ html[data-tab="efir"] .map-tools { --glass: rgba(15, 21, 32, .6); --glass-brd: rgba(255, 255, 255, .14); } html[data-tab="efir"] .map-tools .tool { color: #e8edf5; } } /* Атрибут hidden должен побеждать display из класса. У .efir-overlay и .install стоит display:flex — без этого правила hidden их не прячет (оверлеи рендерятся стопкой). Специфичность [hidden]-селектора и так выше класса, !important не нужен и не заденет видимость разделов (у них hidden в HTML, а показ — через data-tab). */ .efir-player [hidden], .efir-btn[hidden], .install[hidden], .map-chip[hidden], .map-legend[hidden], .efir-empty[hidden], .mixbar[hidden] { display: none; }