/* ============================================================ benz.ink — раздел «Эфир»: плеер + плейлист городских трансляций. Показывается по data-tab="efir" на ; карты в это время скрыты. Палитра — общие брендовые переменные из app.css. ============================================================ */ /* Переключение разделов: app.css гасит по два раздела на двух вкладках, здесь добавляем правила для третьей — «Эфир». */ html[data-tab="svyaz"] .view-efir { display: none; } html[data-tab="toplivo"] .view-efir { display: none; } html[data-tab="efir"] .view-fuel { display: none; } html[data-tab="efir"] .view-link { display: none; } .view-efir { overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--color-bg); } .efir { max-width: 920px; margin: 0 auto; padding: 14px 14px 28px; } .efir-stage { } /* Плеер 16:9, скруглённый, с тонкой рамкой */ .efir-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; } .efir-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .efir-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-fg-dim); font-size: 14px; text-align: center; padding: 20px; } .efir-now { padding: 14px 2px 4px; } .efir-now .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); } .efir-now .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); box-shadow: 0 0 0 0 rgba(239,68,68,.55); animation: efir-live 1.8s ease-out infinite; } @keyframes efir-live { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 70% { box-shadow: 0 0 0 7px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } .efir-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--color-fg); } .efir-sub { margin: 5px 0 0; font-size: 14px; color: var(--color-fg-muted); } /* Плейлист: карточки-строки со «звездой» города и мини-превью */ .efir-list { margin-top: 16px; display: grid; gap: 8px; } .efir-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--r); cursor: pointer; text-align: left; width: 100%; color: var(--color-fg); transition: border-color .15s var(--ease), background .15s var(--ease); } .efir-item:hover { border-color: var(--color-border-strong); } .efir-item[aria-selected="true"] { border-color: var(--color-accent); background: var(--color-bg-elevated); } .efir-thumb { flex: 0 0 auto; width: 64px; height: 40px; border-radius: var(--r-sm); background: linear-gradient(135deg, #1b2a2a, #0d1414); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-accent); } .efir-thumb svg { width: 20px; height: 20px; fill: currentColor; } .efir-meta { min-width: 0; flex: 1 1 auto; } .efir-city { font-size: 14.5px; font-weight: 700; color: var(--color-fg); } .efir-place { font-size: 12.5px; color: var(--color-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .efir-badge { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--color-danger); text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; } .efir-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-danger); } .efir-views { flex: 0 0 auto; font-size: 12px; color: var(--color-fg-dim); font-variant-numeric: tabular-nums; } @media (max-width: 520px) { .efir { padding: 10px 10px 24px; } .efir-title { font-size: 18px; } .efir-views { display: none; } }