/* ============================================================================ Погода · Мій Київ — дизайн сервісу /pohoda/ ---------------------------------------------------------------------------- Побудовано на дизайн-системі теми mycities: · токени — themes/mycities/assets/css/tokens.css (1:1, блок :root) · хром — themes/mycities/assets/css/chrome.css (підмножина: .nav / .quick / .drawer / .site-foot) · картки, sec-head — themes/mycities/assets/css/home.css Свого тут лише «погодний шар» (--sky, --frost, температурна рампа) і компоненти, яких у темі немає: стрічка 24 годин, шкала діб, сонячна дуга. ========================================================================== */ /* ============================ 1. ТОКЕНИ ==================================== */ /* Токени, ресет документа й хром сайту приїжджають із теми бандлом * (services.my-kiev.com/_chrome) і лінкуються ПЕРЕД цим файлом. Тут лишається * лише те, чого в темі немає: погодний шар, температурна рампа й дрібниці, * специфічні для сервісу. * * До 17.09.2026 цей файл тримав копію :root теми, копію ресету і копію хрому — * 280 рядків, які довелося б оновлювати руками при кожній зміні в темі. ADR * «Контентні сервіси живуть у дизайн-системі теми» назвав цю ціну прямо; ADR * «Хром сервісів синхронізується з теми, а не копіюється руками» її прибрав. */ :root{ /* --- Погодний шар (приглушені відтінки, щоб не сперечались із папером) --- */ --sky:#2f6fa8; /* холод, опади, «мокрі» акценти */ --sky-soft:#e3ecf3; /* заливка під небо в героєві */ --sky-line:#c3d6e4; --frost:#7fb0cf; /* сніг */ --night:#3a4152; /* ніч на стрічці годин */ --night-wash: rgba(58,65,82,.09); /* Статуси якості повітря (European AQI). Окремі від акценту — це стан, не серія. */ --aqi-1:#2a7b3a; /* дуже добра 0–20 */ --aqi-2:#77a32b; /* добра 20–40 */ --aqi-3:#e0b020; /* помірна 40–60 */ --aqi-4:#e07f22; /* погана 60–80 */ --aqi-5:#e5322a; /* дуже погана 80+ */ /* Температурна рампа — дивергентна навколо 0°: синій полюс ↔ нейтраль ↔ теплий * полюс (бренд-червоний). Використовується на шкалі діб і в легенді. */ --t--15:#2f5d8f; --t--10:#4b86b4; --t--5:#7dabca; --t-0:#b6b3ab; --t-5:#e0c98a; --t-10:#f0bd5a; --t-15:#f0a13c; --t-20:#e8752e; --t-25:#e5322a; --t-30:#b3261e; } /* Темна тема: загальні токени дає tokens.css теми, тут — лише погодний шар. * Селектор той самий, що в темі: alerts ставить data-theme на . */ :where(html, body)[data-theme="dark"]{ --sky-soft: rgba(47,111,168,.16); --sky-line: rgba(47,111,168,.34); --night-wash: rgba(10,12,20,.34); } /* ============================ 2. БАЗА ====================================== */ /* Ресет документа — у base.css теми, .wrap і замки скролу — у chrome.css. * Нижче лише те, чого в темі немає. */ :where(a, button, input, [tabindex]):focus-visible{ outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* Цифри, що стоять у колонку, — завжди табличні. Погода — це таблиця чисел. */ .num{ font-variant-numeric: tabular-nums; } /* ============================ 3. ХРОМ САЙТУ ================================ */ /* Порожньо навмисно: шапка, quick-рядок, drawer і футер повністю з теми. * Єдина правка — відступ футера від контенту: на сайті його тримає остання * секція сторінки, у сервісі такої немає. */ .site-foot{ margin-top: 64px; } /* Пошук у drawer — свій, по містах: та сама .citysearch, що й на сторінках, * але на всю ширину панелі, замість штатної .dr-search теми. */ .drawer .citysearch{ max-width: none; margin: 0 0 22px; } /* ============================ 4. ЗАГАЛЬНІ БЛОКИ ============================ */ main{ display:block; } .page{ padding-top:22px; } .crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color: var(--muted); margin-bottom:16px; } .crumbs a:hover{ color: var(--ink); text-decoration:underline; text-underline-offset:3px; } .crumbs .sep{ color: var(--line-strong); } .crumbs [aria-current]{ color: var(--ink-3); font-weight:600; } .sec{ margin:44px 0 0; } @media (max-width:720px){ .sec{ margin:32px 0 0; } } .sec-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:18px; } .sec-head h2{ font-family:'Unbounded','Unbounded Fallback', sans-serif; font-weight:800; font-size: clamp(22px, 2.4vw, 30px); letter-spacing:-.02em; margin:0; text-wrap: balance; min-width:0; } .sec-head .more{ font-weight:700; font-size:13px; color: var(--ink); flex-shrink:0; } .sec-head .more:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; } .sec-head .note{ font-size:12.5px; color: var(--muted); font-weight:500; } /* Жовтий маркер під словом — фірмовий прийом теми. */ .hl{ position:relative; display:inline-block; padding:0 .12em; isolation:isolate; } .hl::after{ content:""; position:absolute; left:0; right:0; bottom:.08em; height:.36em; background: var(--yellow); z-index:-1; border-radius:2px; } .eyebrow{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color: var(--muted); margin:0 0 10px; } /* ============================ 5. ГОЛОВНА /pohoda/ ========================== */ .hero-main{ padding:8px 0 4px; } .hero-main h1{ font-family:'Unbounded','Unbounded Fallback', sans-serif; font-weight:800; font-size: clamp(32px, 5.2vw, 56px); line-height:1.02; letter-spacing:-.03em; margin:0 0 14px; text-wrap: balance; } .hero-main .lead{ font-size:16px; color: var(--ink-3); margin:0 0 24px; max-width:60ch; line-height:1.55; } /* Пошук міста */ .citysearch{ position:relative; max-width:560px; } .citysearch .field{ display:flex; align-items:center; gap:12px; background: var(--paper); border:1px solid var(--line-strong); border-radius:14px; padding:14px 18px; box-shadow: var(--shadow-1); transition: border-color .15s, box-shadow .15s; } .citysearch .field:focus-within{ border-color: var(--ink); box-shadow: var(--shadow-2); } .citysearch svg{ color: var(--muted); flex-shrink:0; } .citysearch input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color: var(--ink); font: inherit; font-size:16px; font-weight:600; } .citysearch input::placeholder{ color: var(--muted-2); font-weight:500; } .citysearch .hint{ font-size:12.5px; color: var(--muted); margin-top:10px; } .citysearch .results{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:20; background: var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow-3); overflow:hidden; max-height:320px; overflow-y:auto; } .citysearch .results[hidden]{ display:none !important; } .citysearch .results a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 18px; font-size:14.5px; font-weight:600; border-bottom:1px solid var(--line); } .citysearch .results a:last-child{ border-bottom:0; } .citysearch .results a:hover, .citysearch .results a:focus-visible{ background: var(--paper-2); } .citysearch .results .t{ color: var(--muted); font-weight:700; } .citysearch .results .empty{ padding:14px 18px; color: var(--muted); font-size:14px; } /* Плитки «зараз у містах». Це не картки-статті: без тіней, лише волосінь. */ .now-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(196px,1fr)); gap:10px; } .now-tile{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); transition: border-color .15s, transform .15s, background .15s; } .now-tile:hover{ border-color: var(--line-strong); transform: translateY(-2px); background: var(--paper-2); } .now-tile .wi{ width:30px; height:30px; flex-shrink:0; } .now-tile .n{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:1px; } .now-tile{ align-items:center; } /* «Івано-Франківськ» не має перетворюватись на «Івано-Фр…» — рядок переноситься, а сітка вирівнює плитки по найвищій. */ .now-tile .city{ font-weight:700; font-size:14px; line-height:1.15; } .now-tile .hilo{ font-size:11.5px; color: var(--muted); white-space:nowrap; } .now-tile .t{ margin-left:auto; flex:0 0 auto; font-family:'Unbounded','Unbounded Fallback', sans-serif; font-weight:700; font-size:21px; letter-spacing:-.03em; } .now-tile.capital{ border-color: var(--ink); background: var(--paper-2); } .now-tile.capital .n::after{ content:"столиця"; display:block; font-family:'Manrope',sans-serif; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-top:2px; } /* Акордеон категорій міст */ .cat{ border-top:1px solid var(--line); } .cat:last-of-type{ border-bottom:1px solid var(--line); } .cat-head{ width:100%; display:flex; align-items:center; gap:12px; padding:16px 2px; text-align:left; } .cat-head .ct{ font-weight:800; font-size:16px; } .cat-head .cn{ font-size:11.5px; font-weight:800; color: var(--muted); background: var(--paper-2); border-radius:999px; padding:3px 9px; } .cat-head .chev{ margin-left:auto; color: var(--muted); transition: transform .18s; } .cat-head[aria-expanded="true"] .chev{ transform: rotate(180deg); color: var(--ink); } .cat-body{ padding:0 0 20px; } .cat-body[hidden]{ display:none !important; } .chips{ display:flex; flex-wrap:wrap; gap:6px; } .chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background: var(--paper); font-size:13px; font-weight:600; color: var(--ink-2); transition: border-color .15s, background .15s, color .15s; } .chip:hover{ border-color: var(--ink); background: var(--paper-2); color: var(--ink); } .chip .t{ color: var(--muted); font-weight:700; font-variant-numeric: tabular-nums; } .chip.on{ background: var(--ink); border-color: var(--ink); color: var(--paper); } .chip.on .t{ color: rgba(250,247,240,.7); } /* Смуга інших сервісів мережі */ .svc-band{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:10px; margin-top:18px; } .svc{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px; border:1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); transition: border-color .15s, transform .15s; } .svc:hover{ border-color: var(--line-strong); transform: translateY(-2px); } .svc .ic{ width:34px; height:34px; border-radius:9px; flex-shrink:0; background: var(--paper); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color: var(--ink); } .svc b{ display:block; font-size:14.5px; margin-bottom:2px; } .svc span{ font-size:12.5px; color: var(--muted); line-height:1.4; } /* ============================ 6. СТОРІНКА МІСТА ============================ */ /* minmax(0,…) в обох станах — інакше стрічка 24 годин (1536px) розсуває * grid-колонку і вся сторінка їде горизонтально на телефоні. */ .city-layout{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:28px; align-items:start; } .city-layout > *{ min-width:0; } @media (max-width:1040px){ .city-layout{ grid-template-columns: minmax(0,1fr); gap:22px; } } /* --- 6.1 Герой «зараз» --------------------------------------------------- */ /* Єдиний піднятий обʼєкт сторінки. Усе інше — волосінь і повітря. */ .now{ border:1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(120% 120% at 88% -20%, var(--sky-soft) 0%, transparent 62%), var(--paper); box-shadow: var(--shadow-2); overflow:hidden; } .now-top{ display:grid; grid-template-columns: auto 1fr; gap:24px; padding:26px 28px 22px; } @media (max-width:640px){ .now-top{ grid-template-columns:1fr; gap:14px; padding:20px 18px 18px; } } .now-city{ grid-column:1 / -1; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } .now-city h1{ font-family:'Unbounded','Unbounded Fallback', sans-serif; font-weight:800; font-size: clamp(22px, 3vw, 32px); letter-spacing:-.025em; margin:0; line-height:1.08; text-wrap: balance; } .now-city .date{ font-size:13px; color: var(--muted); font-weight:600; } .now-city .upd{ margin-left:auto; font-size:11.5px; color: var(--muted); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .now-city .upd .d{ width:6px; height:6px; border-radius:50%; background: var(--green); animation: pulse 1.6s infinite; } @keyframes pulse{ 50%{ opacity:.35; transform: scale(.6); } } .now-temp{ display:flex; align-items:center; gap:16px; } .now-temp .big{ font-family:'Unbounded','Unbounded Fallback', sans-serif; font-weight:800; font-size: clamp(64px, 9vw, 92px); line-height:.86; letter-spacing:-.05em; font-variant-numeric: tabular-nums; } .now-temp .wi{ width:72px; height:72px; flex-shrink:0; } .now-side{ display:flex; flex-direction:column; gap:10px; justify-content:center; min-width:0; } .now-side .cond{ font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.25; } .now-side .feels{ font-size:14px; color: var(--ink-3); } .now-hilo{ display:flex; align-items:center; gap:14px; font-size:14px; font-weight:700; } .now-hilo .hi{ color: var(--red-deep); } .now-hilo .lo{ color: var(--sky); } .now-hilo svg{ vertical-align:-2px; } .aqi-chip{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:6px 12px 6px 8px; border-radius:999px; background: var(--paper); border:1px solid var(--line); font-size:12.5px; font-weight:700; } .aqi-chip .dot{ width:10px; height:10px; border-radius:50%; background: var(--aqi-2); flex-shrink:0; } .aqi-chip .v{ font-variant-numeric: tabular-nums; } .aqi-chip .lbl{ color: var(--muted); font-weight:600; } /* Попередження — червоне, і тільки коли є що сказати. */ .warn{ display:flex; align-items:flex-start; gap:10px; margin:0 28px 20px; padding:11px 14px; border-radius: var(--radius-sm); background: var(--red-soft); color: var(--red-deep); font-size:13px; font-weight:600; line-height:1.4; } .warn svg{ flex-shrink:0; margin-top:1px; } @media (max-width:640px){ .warn{ margin:0 18px 16px; } } /* --- 6.2 Стрічка 24 годин ------------------------------------------------ */ /* Одна серія → легенда не потрібна, заголовок її називає. Ніч — заливка, * схід/захід — волосінь із підписом. Підписи значень лише на вузлах. */ .hours{ border-top:1px solid var(--line); background: color-mix(in oklab, var(--paper) 82%, transparent); } .hours-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 28px 4px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color: var(--muted); } .hours-head .legend{ text-transform:none; letter-spacing:0; font-weight:600; font-size:11.5px; } .hours-head .legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; background: var(--night-wash); border:1px solid var(--sky-line); vertical-align:-1px; margin-right:5px; } @media (max-width:640px){ .hours-head{ padding:12px 18px 4px; } } .hours-scroll{ overflow-x:auto; overflow-y:hidden; padding:4px 28px 18px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; } @media (max-width:640px){ .hours-scroll{ padding:4px 18px 16px; } } .hours-track{ position:relative; width:1536px; height:176px; } .hours-cols{ position:absolute; inset:0; display:flex; z-index:2; } .hours-cols .h{ width:64px; flex:0 0 64px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:2px; } .hours-cols .h .tm{ font-size:11.5px; font-weight:700; color: var(--muted); font-variant-numeric: tabular-nums; } .hours-cols .h.now-col .tm{ color: var(--ink); } .hours-cols .h.now-col .tm::after{ content:""; display:block; width:16px; height:2px; border-radius:2px; background: var(--yellow-deep); margin:3px auto 0; } .hours-cols .h .wi{ width:24px; height:24px; } .hours-cols .h .pop{ font-size:10.5px; font-weight:800; color: var(--sky); font-variant-numeric: tabular-nums; min-height:14px; } .hours-chart{ position:absolute; left:0; right:0; bottom:0; height:90px; z-index:1; } .hours-chart .area{ fill: url(#tempFill); } .hours-chart .line{ fill:none; stroke: var(--yellow-deep); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .hours-chart .night{ fill: var(--night-wash); } .hours-chart .dot{ fill: var(--paper); stroke: var(--yellow-deep); stroke-width:2; } .hours-chart .val{ font-family:'Manrope', sans-serif; font-size:12.5px; font-weight:800; fill: var(--ink); text-anchor:middle; font-variant-numeric: tabular-nums; } .hours-chart .sun-rule{ stroke: var(--sky-line); stroke-width:1; stroke-dasharray:3 3; } .hours-chart .sun-label{ font-family:'Manrope', sans-serif; font-size:10.5px; font-weight:700; fill: var(--muted); text-anchor:middle; } .hours-chart .base{ stroke: var(--line); stroke-width:1; } /* --- 6.3 Показники ------------------------------------------------------- */ /* Не картки — сітка пар «підпис / значення» на волосіні. */ .metrics{ display:grid; grid-template-columns: repeat(4, 1fr); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--paper); margin-top:18px; } .metrics .m:nth-child(4n){ border-right:0; } .metrics .m:nth-last-child(-n+4){ border-bottom:0; } @media (max-width:860px){ .metrics{ grid-template-columns: repeat(2, 1fr); } .metrics .m:nth-child(4n){ border-right:1px solid var(--line); } .metrics .m:nth-last-child(-n+4){ border-bottom:1px solid var(--line); } .metrics .m:nth-child(2n){ border-right:0; } .metrics .m:nth-last-child(-n+2){ border-bottom:0; } } .metrics .m{ padding:14px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:5px; min-width:0; } .metrics .m .k{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color: var(--muted); display:flex; align-items:center; gap:6px; } .metrics .m .k svg{ color: var(--ink-3); } .metrics .m .v{ font-size:19px; font-weight:800; letter-spacing:-.02em; font-variant-numeric: tabular-nums; } .metrics .m .v small{ font-size:12px; font-weight:700; color: var(--muted); margin-left:2px; } .metrics .m .s{ font-size:11.5px; color: var(--muted); } /* --- 6.4 Вкладки прогнозів (це реальні URL, не JS-таби) ------------------ */ .tabs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:4px 0; margin-top:26px; } .tabs::-webkit-scrollbar{ display:none; } .tab{ padding:9px 15px; border-radius:999px; border:1px solid var(--line); font-size:13.5px; font-weight:700; color: var(--ink-2); white-space:nowrap; background: var(--paper); transition: background .15s, border-color .15s, color .15s; } .tab:hover{ border-color: var(--line-strong); background: var(--paper-2); } .tab[aria-current="page"]{ background: var(--ink); border-color: var(--ink); color: var(--paper); } /* --- 6.5 Шкала діб ------------------------------------------------------- */ /* Range-plot: усі доби на одній шкалі, тому смуги порівнянні між рядками. * Заливка смуги — зріз температурної рампи, легенда під заголовком. */ .days{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--paper); } .days-scale{ display:flex; align-items:center; gap:10px; padding:11px 18px; border-bottom:1px solid var(--line); background: var(--paper-2); font-size:11px; font-weight:700; color: var(--muted); font-variant-numeric: tabular-nums; } .days-scale .ramp{ flex:1; height:6px; border-radius:999px; background: linear-gradient(90deg, var(--t-0), var(--t-10), var(--t-20), var(--t-25)); } .days-scale .cap{ text-transform:uppercase; letter-spacing:.1em; font-size:10px; } .day{ display:block; border-bottom:1px solid var(--line); } .day:last-child{ border-bottom:0; } .day-row{ width:100%; display:grid; align-items:center; gap:12px; grid-template-columns: 96px 44px 46px 40px minmax(90px,1fr) 40px 22px; padding:12px 18px; text-align:left; transition: background .15s; } .day-row:hover{ background: var(--paper-2); } .day[open] .day-row{ background: var(--paper-2); } .day-row .d{ min-width:0; } .day-row .d b{ display:block; font-size:14px; font-weight:800; } .day-row .d span{ font-size:11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .day-row .wi{ width:26px; height:26px; margin:0 auto; } .day-row .pop{ font-size:11.5px; font-weight:800; color: var(--sky); font-variant-numeric: tabular-nums; text-align:center; } .day-row .pop.none{ color: var(--line-strong); } .day-row .t{ font-size:14.5px; font-weight:800; font-variant-numeric: tabular-nums; } .day-row .t.lo{ color: var(--muted); text-align:right; } .day-row .t.hi{ text-align:left; } .day-row .rng{ position:relative; height:8px; border-radius:999px; background: var(--paper-3); } .day-row .rng .bar{ position:absolute; top:0; bottom:0; border-radius:999px; background: linear-gradient(90deg, var(--c1), var(--c2)); } .day-row .chev{ color: var(--muted); transition: transform .18s; justify-self:end; } .day[open] .day-row .chev{ transform: rotate(180deg); color: var(--ink); } .day-row::-webkit-details-marker{ display:none; } summary.day-row{ cursor:pointer; list-style:none; } summary.day-row::marker{ content:""; } .day-body{ padding:2px 18px 18px; border-top:1px dashed var(--line); background: var(--paper-2); } .day-body p{ margin:12px 0 14px; font-size:14px; color: var(--ink-3); line-height:1.55; max-width:70ch; } .day-parts{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:8px; } .day-part{ padding:10px 12px; border-radius: var(--radius-sm); background: var(--paper); border:1px solid var(--line); display:flex; align-items:center; gap:10px; } .day-part .wi{ width:22px; height:22px; flex-shrink:0; } .day-part b{ display:block; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color: var(--muted); } .day-part span{ font-size:15px; font-weight:800; font-variant-numeric: tabular-nums; } @media (max-width:640px){ .day-row{ grid-template-columns: 74px 28px 32px 30px minmax(40px,1fr) 30px 18px; gap:7px; padding:12px 14px; } .day-row .d b{ font-size:13px; } .day-row .wi{ width:22px; height:22px; } .day-body{ padding:2px 14px 16px; } .days-scale{ padding:10px 14px; } } /* --- 6.6 Бічна колонка --------------------------------------------------- */ .aside{ display:flex; flex-direction:column; gap:16px; position:sticky; top: calc(var(--chrome-h) + 16px); } @media (max-width:1040px){ .aside{ position:static; } } .panel{ border:1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding:18px; } .panel > h3{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color: var(--muted); margin:0 0 14px; } /* Сонячна дуга */ .sun{ display:flex; flex-direction:column; gap:10px; } .sun svg{ width:100%; height:auto; display:block; } .sun .arc{ fill:none; stroke: var(--line); stroke-width:2; stroke-dasharray:4 5; } .sun .arc-done{ fill:none; stroke: var(--yellow-deep); stroke-width:3; stroke-linecap:round; } .sun .ball{ fill: var(--yellow); stroke: var(--yellow-deep); stroke-width:2; } .sun .ground{ stroke: var(--line-strong); stroke-width:1; } .sun-times{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; } .sun-times span{ color: var(--muted); font-weight:600; } .sun-times b{ display:block; font-variant-numeric: tabular-nums; font-size:14px; color: var(--ink); } .sun-len{ font-size:12px; color: var(--muted); text-align:center; } /* Метр AQI — стан, не серія: колір + число + словом. */ .aqi-meter{ display:flex; flex-direction:column; gap:9px; } .aqi-meter .v{ display:flex; align-items:baseline; gap:8px; } .aqi-meter .v b{ font-family:'Unbounded','Unbounded Fallback', sans-serif; font-size:30px; font-weight:800; letter-spacing:-.03em; font-variant-numeric: tabular-nums; line-height:1; } .aqi-meter .v span{ font-size:13.5px; font-weight:700; color: var(--aqi-2); } .aqi-meter .bar{ display:flex; gap:2px; height:8px; } .aqi-meter .bar i{ flex:1; border-radius:2px; opacity:.28; } .aqi-meter .bar i.on{ opacity:1; } .aqi-meter .bar i:nth-child(1){ background: var(--aqi-1); } .aqi-meter .bar i:nth-child(2){ background: var(--aqi-2); } .aqi-meter .bar i:nth-child(3){ background: var(--aqi-3); } .aqi-meter .bar i:nth-child(4){ background: var(--aqi-4); } .aqi-meter .bar i:nth-child(5){ background: var(--aqi-5); } .aqi-meter .note{ font-size:12px; color: var(--muted); line-height:1.45; } .aqi-meter .note a{ font-weight:700; text-decoration:underline; text-underline-offset:2px; } /* Список посилань у панелі */ .plist{ display:flex; flex-direction:column; } .plist a{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; } .plist a:last-child{ border-bottom:0; } .plist a:hover{ color: var(--red-deep); } .plist a .t{ margin-left:auto; font-weight:800; color: var(--muted); font-variant-numeric: tabular-nums; } .plist a .wi{ width:20px; height:20px; } /* Телеграм-панель — єдиний кольоровий блок у сайдбарі. */ .tg-panel{ background: linear-gradient(135deg,#2aabee 0%,#229ed9 100%); color:#fff; border-radius: var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px; } .tg-panel b{ font-family:'Unbounded','Unbounded Fallback', sans-serif; font-size:15px; font-weight:700; letter-spacing:-.01em; } .tg-panel p{ margin:0; font-size:13px; opacity:.92; line-height:1.45; } .tg-panel a{ align-self:flex-start; background:#fff; color:#1b8fc4; padding:8px 14px; border-radius:9px; font-weight:800; font-size:13px; } /* --- 6.7 SEO-текст ------------------------------------------------------- */ .seo-text{ max-width:72ch; } .seo-text h2{ font-family:'Unbounded','Unbounded Fallback', sans-serif; font-weight:700; font-size:19px; letter-spacing:-.015em; margin:22px 0 10px; } .seo-text p{ margin:0 0 12px; font-size:14.5px; color: var(--ink-3); line-height:1.65; } .seo-text a{ font-weight:700; text-decoration:underline; text-underline-offset:2px; } .seo-text .src{ font-size:12px; color: var(--muted); } /* --- 6.8 Часті запитання -------------------------------------------------- */ /* Відповіді рахуються з прогнозу і дублюються у FAQPage; блок згорнутий, бо людині з відкритої сторінки вони не потрібні — це текст для пошуку. */ .faq{ max-width:72ch; } .faq-item{ border:1px solid var(--line); border-radius:12px; background: var(--paper); margin:0 0 8px; overflow:hidden; } .faq-item summary{ display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; font-size:15px; line-height:1.4; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::marker{ content:""; } .faq-item summary:hover{ background: var(--paper-2); } .faq-item[open] summary{ background: var(--paper-2); } .faq-item .chev{ margin-left:auto; flex:0 0 auto; color: var(--muted); transition: transform .18s; } .faq-item[open] .chev{ transform: rotate(180deg); color: var(--ink); } .faq-item p{ margin:0; padding:0 16px 16px; font-size:14.5px; line-height:1.65; color: var(--ink-3); } /* ============================ 7. 404 ======================================= */ /* 56ch рахувались від 15px базового кегля, а не від 44px H1 — заголовок ламався на чотири рядки. Ширину тримає контейнер, довжину тексту — абзац. */ .e404{ text-align:center; padding:56px 0 20px; max-width:760px; margin:0 auto; } .e404 p{ max-width:52ch; margin-inline:auto; } .e404 .empty-illustration{ display:block; width:min(360px, 76vw); height:auto; margin:0 auto 18px; } .e404 h1{ font-family:'Unbounded','Unbounded Fallback', sans-serif; font-weight:800; font-size: clamp(28px,4.4vw,44px); letter-spacing:-.03em; margin:0 0 12px; text-wrap:balance; } .e404 p{ font-size:16px; color: var(--ink-3); margin:0 0 24px; line-height:1.6; } .e404 .citysearch{ margin:0 auto; } /* ============================ 8. ІКОНКИ ПОГОДИ ============================ */ /* Спрайт живе в