/* ============================================================ ПОГОДА.ДВИЖОК — дизайн-система (mobile-first) Тема задаётся атрибутом ============================================================ */ :root{ --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --r:26px; --r-s:18px; --r-xs:12px; --glass:rgba(255,255,255,.145); --glass-2:rgba(255,255,255,.095); --glass-b:rgba(255,255,255,.25); --glass-hi:rgba(255,255,255,.2); --txt:#fff; --muted:rgba(255,255,255,.86); --dim:rgba(255,255,255,.72); --accent:#ffd166; --warm:#ff8a5c; --hot:#ff5d5d; --cold:#7cc6ff; --ice:#c9e9ff; --ok:#6ee7a8; --warn:#ffb454; --bad:#ff6b6b; --nav-h:66px; --shadow:0 12px 34px rgba(0,0,0,.16); --ease:cubic-bezier(.22,.8,.2,1); } /* ---------- Погодные темы (фон + акценты) ---------- */ [data-weather="sunny"] {--bg1:#1a63d6;--bg2:#4aa3f2;--bg3:#ffd08c;--fx-sun:1} [data-weather="rain"] {--bg1:#182231;--bg2:#2e4157;--bg3:#4c6580} [data-weather="snow"] {--bg1:#273f59;--bg2:#3b5774;--bg3:#4c6884;--txt:#fff} [data-weather="cloudy"] {--bg1:#293a4d;--bg2:#3c5068;--bg3:#4c637c} [data-weather="thunder"]{--bg1:#0e1220;--bg2:#1f2440;--bg3:#3a3160} [data-weather="fog"] {--bg1:#34434f;--bg2:#455967;--bg3:#526876} [data-weather="night"] {--bg1:#070b1e;--bg2:#141c45;--bg3:#2a2f66} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark} body{ margin:0;font-family:var(--font);color:var(--txt); background:linear-gradient(165deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%); background-attachment:fixed;min-height:100vh; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background 1.2s var(--ease); } a{color:inherit;text-decoration:none;touch-action:manipulation} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;touch-action:manipulation} svg.i{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex:none} :where(a,button,input,summary,[tabindex]):focus-visible{outline:3px solid #fff;outline-offset:3px} :where(h1,h2,h3,[id]){scroll-margin-top:18px} .skip-link{position:fixed;left:16px;top:12px;z-index:20;padding:10px 14px;border-radius:12px;background:#fff;color:#182231;font-weight:700;transform:translateY(-160%);transition:transform .2s var(--ease)} .skip-link:focus{transform:translateY(0)} /* ---------- Слои эффектов ---------- */ #fx{position:fixed;inset:0;z-index:0;pointer-events:none} .sun{position:fixed;z-index:0;pointer-events:none;top:-90px;right:-90px;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(255,240,180,.95) 0%,rgba(255,214,120,.55) 28%,rgba(255,190,80,0) 62%); filter:blur(2px);opacity:0;transition:opacity 1s;animation:sunPulse 6s ease-in-out infinite} .sun::after{content:"";position:absolute;inset:-60px;border-radius:50%; background:conic-gradient(from 0deg,rgba(255,255,255,0) 0 8%,rgba(255,255,255,.14) 10%,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 30%,rgba(255,255,255,.12) 33%,rgba(255,255,255,0) 37%,rgba(255,255,255,0) 58%,rgba(255,255,255,.1) 61%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 84%,rgba(255,255,255,.12) 87%,rgba(255,255,255,0) 91%); animation:spin 40s linear infinite} [data-weather="sunny"] .sun{opacity:1} .moon{position:fixed;z-index:0;pointer-events:none;top:40px;right:36px;width:74px;height:74px;border-radius:50%; background:radial-gradient(circle at 35% 35%,#fffbe8,#e9e4c8 60%,#cfc9a8); box-shadow:0 0 40px 10px rgba(255,250,220,.25),0 0 120px 40px rgba(200,210,255,.12);opacity:0;transition:opacity 1s} [data-weather="night"] .moon{opacity:1} .flash{position:fixed;inset:0;z-index:0;pointer-events:none;background:#fff;opacity:0} @keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- Каркас ---------- */ .app{position:relative;z-index:1;max-width:540px;margin:0 auto;padding:10px 16px calc(var(--nav-h) + 28px)} @media(min-width:1000px){ .app{max-width:1120px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px;align-items:start;padding-top:20px} .span2{grid-column:1/-1} :root{--nav-h:0px} .bottom-nav{display:none} .desk-nav{display:flex} } .desk-nav{display:none} /* ---------- Верхняя панель ---------- */ .topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0 4px} .topbar>.row{min-width:0} .topbar>.icon-btn{flex:none} .topbar .place{display:flex;flex-direction:column;line-height:1.15} .topbar .place b{font-size:20px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:6px} .topbar .place span{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4} .icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-b); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:19px;transition:transform .2s,background .2s} .icon-btn:active{transform:scale(.92)} .icon-btn.on{background:var(--accent);color:#3a2b00;border-color:transparent} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em} .brand .logo{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px} .brand .logo img{display:block;width:38px;height:38px;object-fit:contain} .phone-service-copy{display:none;min-width:0;text-align:left;line-height:1.15} .phone-service-copy b,.phone-service-copy small{display:block;white-space:nowrap} .phone-service-copy b{font-size:14px;font-variant-numeric:tabular-nums} .phone-service-copy small{margin-top:2px;color:var(--muted);font-size:10.5px;font-weight:500} .phone-service-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:14px;padding:14px 16px;border:1px solid rgba(255,209,102,.44);border-radius:var(--r-s);background:linear-gradient(135deg,rgba(255,209,102,.26),rgba(255,138,92,.22));box-shadow:var(--shadow);transition:transform .2s,background-color .2s} .phone-service-card:active{transform:scale(.985)} .phone-service-card__icon{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,#ffd166,#ff8a5c);color:#382300;font-size:23px;box-shadow:0 8px 18px rgba(255,138,92,.28)} .phone-service-card span:nth-child(2){min-width:0} .phone-service-card b,.phone-service-card small{display:block} .phone-service-card b{font-size:15px} .phone-service-card small{margin-top:3px;color:var(--muted);font-size:12px} .phone-service-card strong{font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap} /* ---------- Вкладки ---------- */ .tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 16px 6px;margin:0 -16px 8px} .tabs::-webkit-scrollbar{display:none} .tab{flex:none;min-height:44px;padding:9px 15px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted);background:var(--glass-2);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;line-height:1.1;transition:color .25s,background-color .25s,border-color .25s,box-shadow .25s} .tab.on{color:#1b2233;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18)} .tab:not(.on):hover{background:var(--glass);border-color:var(--glass-b)} /* ---------- Hero ---------- */ .hero{padding:18px 4px 6px;text-align:left;animation:up .7s var(--ease) both} .hero .date{font-size:13.5px;color:var(--muted);font-weight:500} .hero h1{margin:6px 0 0;font-size:clamp(30px,8vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance} .hero .page-title{margin:0;font-size:13.5px;line-height:1.3;letter-spacing:0;color:var(--muted);font-weight:500} .hero-lead{margin:10px 0 0;color:var(--muted);font-size:17px;line-height:1.45;text-wrap:pretty} .hero .big{display:flex;align-items:flex-start;gap:6px;margin:4px 0 0} .hero .temp{font-size:clamp(88px,26vw,120px);font-weight:200;line-height:.95;letter-spacing:-.05em;font-variant-numeric:tabular-nums} .hero .deg{font-size:44px;font-weight:300;margin-top:14px;opacity:.85} .hero .cond{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-top:6px;display:flex;align-items:center;gap:8px} .hero .cond svg{width:28px;height:28px} .hero .sub{color:var(--muted);font-size:14.5px;margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 14px} .hero .sub b{color:var(--txt);font-weight:600} .hero-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .hero-summary{max-width:68%} .hero-icon{width:120px;height:120px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.25));animation:float 5s ease-in-out infinite} .hero-icon svg{width:100%;height:100%} .region-hero h1{max-width:720px} .region-range{font-size:clamp(46px,15vw,72px);font-weight:300;line-height:1;letter-spacing:-.05em;margin-top:14px;font-variant-numeric:tabular-nums} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* ---------- Живой погодный hero и эмоциональные персонажи ---------- */ .has-pf-hero>#fx,.has-pf-hero>.sun,.has-pf-hero>.moon,.has-pf-hero>.flash{display:none} [data-pogodafon-hero]{min-height:330px;margin-top:12px;padding:24px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r);box-shadow:var(--shadow);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02))} [data-pogodafon-hero]>.hero-content{position:relative;z-index:10;min-height:280px;display:flex;flex-direction:column;justify-content:center} [data-pogodafon-hero] .hero-row{position:relative;z-index:1} [data-pogodafon-hero] .hero-row>.hero-summary{max-width:68%} [data-pogodafon-hero] .hero-icon-fallback{margin-right:5%} [data-pogodafon-hero].pf-ready .hero-icon-fallback{display:none} [data-pogodafon-hero]>.pf-character{right:5%;top:55%;transform:translateY(-50%);width:340px;min-width:0;max-width:36%;z-index:7} [data-pogodafon-hero]>.pf-particles,[data-pogodafon-hero]>.pf-layers{border-radius:inherit} [data-pogodafon-hero] .pill{background:rgba(19,30,48,.36);border-color:rgba(255,255,255,.28)} .weather-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%} .weather-icon::before{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3),rgba(255,255,255,.08) 58%,transparent 72%);opacity:0;transform:scale(.9)} .pf-sprite-ready .weather-icon::before{opacity:1} .weather-character-icon{position:relative;z-index:1;display:none!important;width:100%!important;height:100%!important;overflow:visible;filter:brightness(1.12) drop-shadow(0 5px 8px rgba(5,15,35,.35))} .weather-icon-fallback{display:block} .pf-sprite-ready .weather-character-icon{display:block!important} .pf-sprite-ready .weather-icon-fallback{display:none!important} .weather-icon--hour{width:46px;height:46px} .weather-icon--day{width:42px;height:42px;margin:0 auto} .weather-icon--city{width:46px;height:46px} .weather-icon--list{width:38px;height:38px} .weather-icon--table{width:34px;height:34px} .weather-glyph{display:inline-grid;place-items:center;flex:none;color:#fff;filter:drop-shadow(0 3px 4px rgba(9,20,36,.28))} .weather-glyph>.i{width:100%;height:100%} .weather-glyph--city{width:34px;height:34px} .weather-glyph--hour{width:34px;height:34px} .weather-glyph--day{width:34px;height:34px;margin:0 auto} .weather-glyph--list{width:30px;height:30px} .weather-glyph--table{width:28px;height:28px} .weather-table-condition{display:inline-flex;align-items:center;gap:8px} /* ---------- Пилюли/чипы ---------- */ .pill{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(10px)} .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(110,231,168,.25)} .pill.warn .dot{background:var(--warn);box-shadow:0 0 0 4px rgba(255,180,84,.25)} .pill.bad .dot{background:var(--bad);box-shadow:0 0 0 4px rgba(255,107,107,.25)} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{padding:9px 13px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-b);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:transform .2s,background .2s} .chip:active{transform:scale(.96)} .chip.ok{border-color:rgba(110,231,168,.5)} .chip.warn{border-color:rgba(255,180,84,.55)} .chip.bad{border-color:rgba(255,107,107,.55)} .chip .st{width:8px;height:8px;border-radius:50%} .chip.ok .st{background:var(--ok)} .chip.warn .st{background:var(--warn)} .chip.bad .st{background:var(--bad)} /* ---------- Карточки ---------- */ .card{position:relative;background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.105));backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%); border:1px solid var(--glass-b);border-radius:var(--r);padding:18px;margin-top:14px;box-shadow:var(--shadow); animation:up .7s var(--ease) both} .card:nth-of-type(2){animation-delay:.05s}.card:nth-of-type(3){animation-delay:.1s}.card:nth-of-type(4){animation-delay:.15s} .card:nth-of-type(5){animation-delay:.2s}.card:nth-of-type(6){animation-delay:.25s}.card:nth-of-type(7){animation-delay:.3s} .card:nth-of-type(n+8){animation-delay:.35s} .card h2{margin:0 0 14px;font-size:14px;text-transform:none;letter-spacing:-.005em;color:rgba(255,255,255,.92);font-weight:700;display:flex;align-items:center;gap:8px} .card h2 .more{margin-left:auto;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--txt);opacity:.85} .card h3{margin:0 0 4px;font-size:17px;font-weight:700;letter-spacing:-.01em} .card p{margin:0;line-height:1.5;font-size:14.5px} .card p.muted{color:var(--muted)} .card.tight{padding:14px 16px} .card.accent{background:linear-gradient(135deg,rgba(255,209,102,.25),rgba(255,138,92,.18));border-color:rgba(255,209,102,.4)} .card.blue{background:linear-gradient(135deg,rgba(124,198,255,.25),rgba(120,140,255,.15));border-color:rgba(124,198,255,.4)} @keyframes up{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} /* ---------- Главное сегодня (insights) ---------- */ .insights{display:flex;flex-direction:column;gap:10px} .insight{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.1)} .insight .ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex:none;background:rgba(255,255,255,.14)} .insight .ic.warm{background:linear-gradient(135deg,#ffb454,#ff6b6b);color:#fff} .insight .ic.cold{background:linear-gradient(135deg,#7cc6ff,#5b7cff);color:#fff} .insight .ic.wet{background:linear-gradient(135deg,#4aa3f2,#1d5fd6);color:#fff} .insight .ic.wind{background:linear-gradient(135deg,#a3b2c3,#6a7f97);color:#fff} .insight .ic.sun{background:linear-gradient(135deg,#ffe08a,#ffb454);color:#5a3a00} .insight .ic.forecast-range-index{font-size:15px;letter-spacing:-.04em} .insight b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em} .insight span{font-size:13px;color:var(--muted)} .source-health>h2{margin-bottom:10px;font-size:clamp(22px,4vw,30px);line-height:1.15;letter-spacing:-.025em;text-wrap:balance} .source-health>.date{margin-bottom:5px;color:var(--muted);font-size:13px;font-weight:700} .source-health>.insights{margin:16px 0} .source-health .insight{align-items:flex-start} .source-health .insight span{display:block;margin-top:4px;line-height:1.55} .source-health .insight a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} /* ---------- Как ощущается погода ---------- */ .wellbeing-card,.environment-facts{min-width:0} #today{grid-column:1/-1} .environment-heading{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px} .environment-heading h2{margin:2px 0 0;min-width:0} .environment-level{flex:none;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:700;line-height:1.2} .environment-level--comfortable{background:rgba(110,231,168,.16);color:#d7ffe9} .environment-level--pay_attention{background:rgba(255,209,102,.17);color:#fff1bd} .environment-level--caution{background:rgba(255,138,92,.18);color:#ffe0d2} .wellbeing-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px} .wellbeing-item{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-s);background:var(--glass-2);font-size:14px;line-height:1.4} .wellbeing-marker{width:9px;height:9px;margin-top:5px;border-radius:50%;flex:none;background:var(--ok);box-shadow:0 0 0 4px rgba(110,231,168,.12)} .wellbeing-item--pay_attention .wellbeing-marker{background:var(--warn);box-shadow:0 0 0 4px rgba(255,180,84,.13)} .wellbeing-item--caution .wellbeing-marker{background:#ff8a5c;box-shadow:0 0 0 4px rgba(255,138,92,.13)} .environment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .environment-fact{min-width:0;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-s);background:var(--glass-2);display:flex;flex-direction:column;gap:4px} .environment-fact--wide{grid-column:1/-1} .environment-fact>span{color:var(--muted);font-size:11.5px;font-weight:650;letter-spacing:.035em;text-transform:uppercase} .environment-fact>b{font-size:14.5px;line-height:1.35;overflow-wrap:anywhere} .environment-fact>small{color:var(--muted);font-size:12.5px;line-height:1.35} .environment-fact--unavailable{border-style:dashed} .environment-note{margin-top:11px!important;color:var(--muted);font-size:12.5px!important;line-height:1.45!important} /* ---------- Подробная нагрузка погоды ---------- */ .load-card{grid-column:1/-1;position:relative;overflow:hidden;padding:20px;background:linear-gradient(145deg,rgba(33,53,78,.92),rgba(19,34,54,.9));transition:border-color .2s ease} .load-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#6ee7a8,#7cc6ff);opacity:.85} .load-card--noticeable::before{background:linear-gradient(90deg,#7cc6ff,#ffd166)} .load-card--elevated::before{background:linear-gradient(90deg,#ffd166,#ffb454)} .load-card--high::before,.load-card--very_high::before{background:linear-gradient(90deg,#ffb454,#ff7b6b)} .load-overview{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:16px} .load-score{width:92px;height:92px;border:1px solid rgba(255,255,255,.2);border-radius:26px;display:flex;align-items:baseline;justify-content:center;padding-top:17px;background:linear-gradient(145deg,rgba(124,198,255,.22),rgba(255,255,255,.06));box-shadow:inset 0 1px rgba(255,255,255,.2),0 14px 30px rgba(2,10,24,.18)} .load-score strong{font-size:48px;line-height:1;font-weight:760;letter-spacing:-.07em;font-variant-numeric:tabular-nums} .load-score span{margin-left:0;color:var(--muted);font-size:13px;font-weight:700} .load-overview .load-score{flex-direction:column;align-items:center;justify-content:center;padding-top:0;gap:4px} .load-overview .load-score strong{font-size:36px;letter-spacing:-.04em} .load-intro{min-width:0} .load-intro h2{margin:0 0 6px;font-size:21px} .load-intro h2 .i{color:#9bd5ff} .load-intro .load-label{display:block;font-size:17px;line-height:1.3;overflow-wrap:anywhere} .load-intro p{margin:5px 0 0;color:var(--muted);font-size:13.5px;line-height:1.4} .load-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px;color:var(--muted);font-size:12px} .load-meta span{border:1px solid rgba(255,255,255,.11);border-radius:9px;padding:5px 8px;background:rgba(255,255,255,.045)} .load-audience{margin-top:7px;color:var(--muted);font-size:12px;font-weight:700} .load-scale-explanation{margin:16px 0 0;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.06);color:var(--muted);font-size:13px;line-height:1.5} .load-scale-explanation b{color:var(--text)} .load-summary{margin-top:18px} .load-summary h3,.load-actions>h3,.load-interactions h3{margin:0 0 10px;font-size:15px} .load-contributors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .load-contributor{min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;background:rgba(255,255,255,.065)} .load-contributor>div{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .load-contributor b{font-size:14px;line-height:1.3} .load-contributor span{flex:none;color:#bfe3ff;font-size:12px;font-weight:750} .load-contributor p,.load-calm,.load-summary-copy{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.45;overflow-wrap:anywhere} .load-summary-copy{color:rgba(255,255,255,.84)} .load-details{margin-top:18px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(7,19,35,.18)} .load-details>summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;cursor:pointer;font-size:14px;font-weight:750;list-style:none} .load-details>summary::-webkit-details-marker{display:none} .load-details>summary span{font-size:22px;font-weight:400;transition:transform .2s ease} .load-details[open]>summary span{transform:rotate(45deg)} .load-details>summary:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:14px} .load-factor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 10px 10px} .load-factor{min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:13px;background:rgba(255,255,255,.055)} .load-factor--unavailable{border-style:dashed;opacity:.82} .load-factor header{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;margin-bottom:12px} .load-factor h3{margin:0;font-size:15px;line-height:1.25} .load-points{display:block;margin-top:3px;color:var(--muted);font-size:11.5px} .evidence{flex:none;max-width:138px;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:4px 6px;font-size:10.5px;font-weight:750;line-height:1.25;text-align:center} .evidence--established{background:rgba(110,231,168,.13);color:#d8ffea} .evidence--limited{background:rgba(255,209,102,.13);color:#fff0b8} .evidence--experimental{background:rgba(168,154,255,.14);color:#e5e0ff} .factor-explanation{margin-top:10px} .factor-explanation b{display:block;margin-bottom:3px;color:#dcecff;font-size:11px;letter-spacing:.02em} .factor-explanation p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.48;overflow-wrap:anywhere} .factor-explanation--why{padding-top:9px;border-top:1px solid rgba(255,255,255,.08)} .load-interactions{padding:8px 12px 14px} .load-interactions ul{list-style:none;margin:0;padding:0;display:grid;gap:7px} .load-interactions li{display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:12.5px;line-height:1.45} .load-interactions li b{flex:none;color:#ffd992} .load-actions{margin-top:18px} .load-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px} .load-action-grid article{min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px;background:rgba(255,255,255,.05)} .load-action-grid h4{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:13px} .load-action-grid h4 .i{width:17px;height:17px;color:#bfe3ff} .load-action-grid ul{margin:0;padding-left:17px;color:var(--muted);font-size:12.5px;line-height:1.48} .load-action-grid li+li{margin-top:6px} .load-disclaimer{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0!important;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:12px!important;line-height:1.45!important} .load-disclaimer .i{width:16px;height:16px;flex:none;margin-top:1px;color:#bfe3ff} @media(max-width:540px){ .phone-service-card{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:12px 14px} .phone-service-card__icon{grid-row:1/3;width:44px;height:44px;border-radius:14px} .phone-service-card strong{grid-column:2;font-size:18px} .environment-heading{flex-direction:column;gap:7px} .environment-grid{grid-template-columns:1fr} .environment-fact--wide{grid-column:auto} .load-card{padding:16px} .load-overview{grid-template-columns:76px minmax(0,1fr);gap:12px} .load-score{width:76px;height:76px;border-radius:22px;padding-top:14px} .load-score strong{font-size:39px} .load-intro h2{font-size:18px} .load-intro .load-label{font-size:15px} .load-meta{display:grid;grid-template-columns:1fr} .load-contributors,.load-factor-grid,.load-action-grid{grid-template-columns:1fr} .load-factor header{flex-direction:column} .evidence{max-width:none;text-align:left} } @media(min-width:541px) and (max-width:760px){ .load-action-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .load-card,.load-details>summary span{transition:none} } /* ---------- Почасовой скролл ---------- */ .hscroll{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 8px;margin:0 -6px;scrollbar-width:none} .hscroll::-webkit-scrollbar{display:none} .hour{flex:none;width:68px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.12);transition:transform .2s,background .2s} .hour.now{background:#fff;color:#1b2233} .hour.now .p{color:#1d5fd6} .hour .t{font-size:12px;color:var(--muted);font-weight:600} .hour.now .t{color:#5b6473} .hour svg{width:26px;height:26px} .hour .v{font-size:17px;font-weight:700;letter-spacing:-.02em} .hour .p{font-size:11.5px;color:var(--cold);font-weight:700;min-height:14px} .hour.night{background:linear-gradient(180deg,rgba(13,22,50,.3),rgba(10,18,42,.18))} /* ---------- Кривая температуры ---------- */ .curve-wrap{position:relative;margin-top:6px} .curve{width:100%;height:120px;display:block;overflow:visible} .curve-wrap--timeline{overflow-x:auto;padding:8px 0 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.45) transparent} .curve-wrap--timeline .curve{min-width:720px} .hero-service-intro{max-width:640px;line-height:1.55} .card>p+.grid2,.card>p+.grid3{margin-top:20px} .curve .line{fill:none;stroke:url(#gradLine);stroke-width:3;stroke-linecap:round} .curve .area{fill:url(#gradArea)} .curve .pt{fill:#fff;stroke:rgba(0,0,0,.2)} .curve .lbl{font-size:11px;fill:#fff;font-weight:700;text-anchor:middle} .curve .ax{font-size:10px;fill:rgba(255,255,255,.55);text-anchor:middle} /* ---------- Сетки ---------- */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .tile{padding:14px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.1);min-height:96px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s} .tile:active{transform:scale(.97)} .tile .k{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.05em} .tile .v{font-size:24px;font-weight:700;letter-spacing:-.03em;margin-top:8px;line-height:1.05} .tile .v small{font-size:13px;font-weight:600;color:var(--muted);margin-left:3px;letter-spacing:0} .tile .d{font-size:12.5px;color:var(--muted);margin-top:5px} .tile.when .v{font-size:20px} .tile.when .ic{font-size:22px;margin-bottom:4px} /* ---------- Дни ---------- */ .days{display:flex;flex-direction:column} .day{display:grid;grid-template-columns:minmax(92px,130px) 48px 1fr;align-items:center;gap:12px;padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.12)} .day:last-child{border-bottom:0} .day .n{font-size:15px;font-weight:600} .day .n small{display:block;margin-top:2px;font-size:12px;line-height:1.25;color:var(--muted);font-weight:500} .day svg{width:26px;height:26px} .day .pp{font-size:11.5px;color:#bfe5ff;font-weight:700;text-align:center} .range{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:8px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums} .range .lo{color:var(--muted);text-align:right} .range .bar{height:6px;border-radius:999px;background:rgba(0,0,0,.18);position:relative;overflow:hidden} .range .bar i{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#7cc6ff,#ffd166 60%,#ff8a5c); left:var(--l);right:var(--rr);animation:grow 1s var(--ease) both} @keyframes grow{from{transform:scaleX(0);transform-origin:left}to{transform:none}} .day.weekend .n{color:var(--accent)} /* ---------- Модели / уверенность ---------- */ .models{display:flex;flex-direction:column;gap:9px} .model{display:grid;grid-template-columns:86px 1fr 46px;align-items:center;gap:10px;font-size:13.5px} .model .nm{font-weight:600} .model .nm small{display:block;font-size:11px;color:var(--dim);font-weight:500} .model .bar{height:8px;border-radius:999px;background:rgba(0,0,0,.18);overflow:hidden} .model .bar i{display:block;height:100%;width:var(--w);border-radius:999px;background:linear-gradient(90deg,#7cc6ff,#fff);animation:grow 1s var(--ease) both} .model .v{font-weight:700;text-align:right;font-variant-numeric:tabular-nums} .conf{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:var(--r-s);background:rgba(110,231,168,.14);border:1px solid rgba(110,231,168,.35)} .conf.warn{background:rgba(255,180,84,.14);border-color:rgba(255,180,84,.4)} .conf .ring{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800; background:conic-gradient(var(--ok) calc(var(--p)*1%),rgba(255,255,255,.15) 0);position:relative} .conf.warn .ring{background:conic-gradient(var(--warn) calc(var(--p)*1%),rgba(255,255,255,.15) 0)} .conf .ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:rgba(30,40,60,.75)} .conf .ring span{position:relative} .conf b{display:block;font-size:14.5px} .conf small{color:var(--muted);font-size:12.5px} /* ---------- Изменения прогноза ---------- */ .changes{display:flex;flex-direction:column;gap:8px} .change{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-s);background:var(--glass-2);font-size:14px} .change .arrow{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:800;flex:none} .change .arrow.down{background:rgba(124,198,255,.25);color:var(--ice)} .change .arrow.up{background:rgba(255,138,92,.28);color:#ffd9c7} .change .arrow.shift{background:rgba(255,255,255,.16)} .change s{color:var(--dim);text-decoration:line-through;margin-right:6px} .change b{font-weight:700} .change small{display:block;color:var(--dim);font-size:12px;margin-top:2px} /* ---------- Восход/закат дуга ---------- */ .sunarc{position:relative;height:110px;margin:6px 0 0} .sunarc svg{width:100%;height:100%;overflow:visible} .sunarc .track{fill:none;stroke:rgba(255,255,255,.25);stroke-width:2;stroke-dasharray:4 6} .sunarc .prog{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round} .sunarc .sundot{fill:#fff3b0;filter:drop-shadow(0 0 10px rgba(255,220,120,.9))} .sunarc .t{font-size:12px;fill:var(--muted);font-weight:600} .sunarc .t.b{fill:#fff;font-size:13px} /* ---------- Список городов ---------- */ .cities{display:grid;grid-template-columns:1fr 1fr;gap:10px} .city{position:relative;padding:14px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.1);overflow:hidden;display:flex;flex-direction:column;gap:6px;transition:transform .2s,background .2s} .city:hover{background:var(--glass)} .city:active{transform:scale(.97)} .city .nm{font-weight:650;font-size:15px;display:flex;align-items:center;gap:6px;letter-spacing:-.01em} .city .nm small{color:var(--dim);font-weight:500;font-size:11.5px} .city .row{display:flex;align-items:center;justify-content:space-between;gap:8px} .city .tv{font-size:30px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .city svg{width:30px;height:30px} .city .cd{font-size:12.5px;color:var(--muted)} .city.big{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between} .city.big .tv{font-size:40px} .list{display:flex;flex-direction:column} .list .li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px} .list .li:last-child{border-bottom:0} .list .li svg{width:24px;height:24px} .list .li .g{flex:1;font-weight:600} .list .li .g small{display:block;font-weight:500;font-size:12px;color:var(--dim)} .list .li .tv{font-weight:700;font-variant-numeric:tabular-nums;min-width:40px;text-align:right} .list .li .cv{color:var(--muted);font-size:13px;min-width:70px;text-align:right} .list .li .chev{color:var(--dim)} .location-list{display:grid;grid-template-columns:1fr} .location-list .li{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 8px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px} .location-list .li>svg:first-child{width:24px;height:24px} .location-list .li .g{min-width:0;flex:1;font-weight:600} .location-list .li .g small{display:block;font-weight:500;font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .location-list .li .tv{min-width:44px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums} .location-list .li .chev{width:20px;height:20px;color:var(--dim)} .directory-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:16px} .directory-intro h2{margin:0;max-width:16ch} .directory-intro p{max-width:58ch;margin:0;color:var(--muted);font-size:14px;line-height:1.45} .directory-featured{margin-bottom:10px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.1)} .directory-featured .li{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px} .directory-featured .li>svg:first-child{width:26px;height:26px;color:#cceaff} .directory-featured .g{min-width:0;flex:1;font-weight:700} .directory-featured .g small{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:500} .directory-featured .chev{width:20px;height:20px;color:var(--dim)} .directory-group{border-top:1px solid rgba(255,255,255,.14)} .directory-group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:8px;cursor:pointer;list-style:none} .directory-group>summary::-webkit-details-marker{display:none} .directory-group>summary span{font-size:16px;font-weight:700} .directory-group>summary small{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:500} .directory-group>summary>.i{width:20px;height:20px;color:var(--muted);transition:transform .2s var(--ease)} .directory-group[open]>summary>.i{transform:rotate(90deg)} .directory-group[open]>.location-list{padding-bottom:10px} .location-more{margin-top:12px;border-top:1px solid rgba(255,255,255,.12)} .location-more>summary,.hourly-day>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;list-style:none;font-weight:700} .location-more>summary::-webkit-details-marker,.hourly-day>summary::-webkit-details-marker{display:none} .location-more>summary span{margin-left:auto;color:var(--muted);font-size:13px;font-weight:600} .location-more>summary>.i,.hourly-day>summary>.i{transition:transform .2s var(--ease)} .location-more[open]>summary>.i,.hourly-day[open]>summary>.i{transform:rotate(90deg)} /* ---------- Сравнение температуры по городам ---------- */ .temperature-comparison{display:grid;grid-template-columns:1fr 1fr;gap:9px} .temperature-city{display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;align-items:center;gap:10px;min-height:66px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13);transition:background .2s,transform .2s} .temperature-city:hover{background:rgba(255,255,255,.17)} .temperature-city:active{transform:scale(.985)} .temperature-city__name{min-width:0;font-size:14px;font-weight:650;line-height:1.2} .temperature-city__name small{display:block;margin-top:2px;color:var(--muted);font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .temperature-city strong{font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.03em} .temperature-city__chev{color:var(--dim)} /* ---------- Поиск ---------- */ .search{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:999px;background:rgba(255,255,255,.92);color:#1b2233;box-shadow:0 14px 34px rgba(0,0,0,.2);margin-top:14px;animation:up .7s var(--ease) both} .search input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:none;color:#1b2233;min-width:0} .search input::placeholder{color:#7b8494} .search .go{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1d5fd6,#4aa3f2);color:#fff;display:grid;place-items:center;font-size:20px;box-shadow:0 6px 16px rgba(29,95,214,.4)} .search:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.75),0 14px 34px rgba(0,0,0,.2)} .search-status{margin:12px 8px 0;padding:11px 13px;border-radius:14px;background:rgba(24,34,49,.42);border:1px solid var(--glass-b);font-size:14px;line-height:1.4;color:#fff} .geo{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-s);background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.1));border:1px solid var(--glass-b);margin-top:10px} .geo .ic{width:40px;height:40px;border-radius:50%;background:#fff;color:#1d5fd6;display:grid;place-items:center;font-size:20px;animation:pulse 2.4s ease-in-out infinite} .geo b{display:block;font-size:15px} .geo span{font-size:13px;color:var(--muted)} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}60%{box-shadow:0 0 0 14px rgba(255,255,255,0)}} /* ---------- Части дня ---------- */ .parts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .part{padding:12px 8px;border-radius:var(--r-s);background:var(--glass-2);border:1px solid rgba(255,255,255,.1);text-align:center} .part .k{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em} .part svg{width:30px;height:30px;margin:8px auto 4px;display:block} .part .v{font-size:20px;font-weight:700;letter-spacing:-.02em} .part .d{font-size:11.5px;color:var(--muted);margin-top:2px} /* ---------- Почасовая таблица ---------- */ .hrow{display:grid;grid-template-columns:52px 30px 1fr 54px 64px;align-items:center;gap:8px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.09);font-size:14px} .hrow:last-child{border-bottom:0} .hrow .t{font-weight:700;font-variant-numeric:tabular-nums} .hrow .t small{display:block;font-weight:500;font-size:11px;color:var(--dim)} .hrow svg{width:24px;height:24px} .hrow .tv{font-weight:700;font-size:16px;letter-spacing:-.02em} .hrow .tv small{font-weight:500;color:var(--muted);font-size:12px;margin-left:6px} .hrow .pp{color:var(--cold);font-weight:700;font-size:12.5px;text-align:right} .hrow .wd{color:var(--muted);font-size:12.5px;text-align:right} .hrow.now{background:rgba(255,255,255,.14);border-radius:12px;padding-left:8px;padding-right:8px;margin:0 -4px} .sticky-h{position:sticky;top:0;z-index:2;padding:8px 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:linear-gradient(var(--bg2),transparent);backdrop-filter:blur(6px)} .bars{display:flex;align-items:flex-end;gap:3px;height:70px;margin-top:8px} .bars i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#7cc6ff,rgba(124,198,255,.35));height:var(--h);animation:growY .9s var(--ease) both} @keyframes growY{from{transform:scaleY(0);transform-origin:bottom}to{transform:none}} /* ---------- Точность прогноза ---------- */ .acc{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;font-size:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1)} .acc:last-child{border-bottom:0} .acc .m{font-weight:600} .acc .m small{display:block;color:var(--dim);font-size:12px;font-weight:500} .acc .e{font-weight:800;padding:4px 10px;border-radius:999px;font-size:12.5px} .acc .e.ok{background:rgba(110,231,168,.2);color:#c9ffe3} .acc .e.warn{background:rgba(255,180,84,.2);color:#ffe4bd} .acc .e.bad{background:rgba(255,107,107,.2);color:#ffd0d0} /* ---------- Футер ---------- */ .foot{margin-top:20px;font-size:12px;color:var(--dim);line-height:1.6;text-align:center;padding:0} .friends{padding:18px;border:1px solid var(--glass-b);border-radius:var(--r);background:rgba(255,255,255,.1);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .friends h2{margin:0 0 14px;color:#fff;font-size:17px;letter-spacing:.01em;text-align:left} .friends-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .friend{display:flex;align-items:center;justify-content:center;min-width:0;min-height:84px;padding:12px;border:1px solid rgba(255,255,255,.34);border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 8px 22px rgba(14,32,54,.12);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s} .friend:hover,.friend:focus-visible{transform:translateY(-2px);background:#fff;box-shadow:0 12px 26px rgba(14,32,54,.22)} .friend img{display:block;width:auto;height:auto;max-width:100%;max-height:58px;object-fit:contain} .friend--lenremont img{max-height:42px} .foot-meta{padding:16px 10px 0} .foot-meta a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3)} /* ---------- Нижняя навигация ---------- */ .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:5;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding:0 8px env(safe-area-inset-bottom); display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;background:rgba(20,26,40,.72);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%); border-top:1px solid rgba(255,255,255,.12)} .bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:56px;font-size:10.5px;font-weight:600;line-height:1.1;text-align:center;color:var(--dim);padding:6px 4px;border-radius:14px;transition:color .2s,transform .2s,background-color .2s} .bottom-nav a svg{width:23px;height:23px} .bottom-nav a.on{color:#fff} .bottom-nav a.on svg{filter:drop-shadow(0 0 8px rgba(255,209,102,.7))} .bottom-nav .bottom-nav__phone{color:#fff;background:linear-gradient(135deg,rgba(255,209,102,.34),rgba(255,138,92,.34))} .bottom-nav .bottom-nav__phone svg{color:#ffd166} .bottom-nav a:active{transform:scale(.9)} .desk-nav{gap:6px;align-items:center} .desk-nav a{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)} .desk-nav a.on{background:var(--glass);color:#fff;border:1px solid var(--glass-b)} /* ---------- Демо-переключатель погоды ---------- */ .demo{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 10px + env(safe-area-inset-bottom));z-index:6;display:flex;gap:4px;padding:5px;border-radius:999px; background:rgba(20,26,40,.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none} .demo::-webkit-scrollbar{display:none} .demo button{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:18px;opacity:.6;transition:opacity .25s,background-color .25s,transform .25s} .demo button.on{opacity:1;background:rgba(255,255,255,.18);transform:scale(1.05)} .demo-label{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 58px + env(safe-area-inset-bottom));z-index:6;font-size:11px;color:rgba(255,255,255,.6);font-weight:600;letter-spacing:.05em;text-transform:uppercase;pointer-events:none} /* ---------- Прочее ---------- */ .breadcrumbs{margin:-2px 0 -4px;min-width:0;overflow:hidden} .breadcrumbs ol{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;white-space:nowrap;overflow-x:auto;scrollbar-width:none} .breadcrumbs ol::-webkit-scrollbar{display:none} .breadcrumbs li{display:flex;align-items:center;gap:6px;min-width:0;color:var(--dim);font-size:12px} .breadcrumbs li:not(:last-child)::after{content:"/";color:rgba(255,255,255,.28)} .breadcrumbs a{color:var(--muted);text-decoration:none} .breadcrumbs a:hover,.breadcrumbs a:focus-visible{color:#fff} .breadcrumbs [aria-current="page"]{overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.72)} .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.16)} .badge.ok{background:rgba(110,231,168,.22)} .badge.warn{background:rgba(255,180,84,.24)} .badge.bad{background:rgba(255,107,107,.24)} .sep{height:1px;background:rgba(255,255,255,.1);margin:14px 0} .mt{margin-top:12px} .row{display:flex;align-items:center;gap:10px} .between{justify-content:space-between} .small{font-size:12.5px;color:var(--muted)} .recovery-links{display:flex;flex-wrap:wrap;gap:8px} .skel{background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.18),rgba(255,255,255,.08));background-size:200% 100%;animation:sh 1.4s infinite} @keyframes sh{to{background-position:-200% 0}} .alert{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-s);background:linear-gradient(135deg,rgba(255,107,107,.28),rgba(255,180,84,.2));border:1px solid rgba(255,140,120,.5);margin-top:14px;animation:up .7s var(--ease) both} .alert .ic{font-size:22px;flex:none;animation:shake 3s ease-in-out infinite} .alert b{display:block;font-size:14.5px} .alert span{font-size:13px;color:var(--muted)} @keyframes shake{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-10deg)}96%{transform:rotate(10deg)}} /* ---------- Доступность / производительность ---------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} #fx{display:none} } @media(max-width:360px){.hero .temp{font-size:82px}.grid3{grid-template-columns:1fr 1fr}} /* ---------- Динамические таблицы Погодафона ---------- */ .scroll-hint{display:none;margin:0 0 10px!important;color:var(--muted);font-size:12.5px!important} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-s);box-shadow:inset -18px 0 16px -18px rgba(255,255,255,.95);overscroll-behavior-inline:contain} .table-scroll:focus-visible{outline-offset:2px} .weather-table{width:100%;min-width:760px;border-collapse:collapse;font-size:13px} .weather-table th,.weather-table td{padding:11px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.1);white-space:nowrap} .weather-table th{position:sticky;top:0;background:rgba(24,34,49,.94);color:var(--muted);font-size:11px;text-transform:none;letter-spacing:.01em;z-index:2} .weather-table td .i{vertical-align:middle;margin-right:5px} .weather-table tr:last-child td{border-bottom:0} .weather-table tbody tr:nth-child(even){background:rgba(255,255,255,.025)} .weather-table .night-row{background:rgba(8,18,42,.11)} .weather-table th:first-child,.weather-table td:first-child{position:sticky;left:0;z-index:1;background:rgba(58,78,102,.97)} .weather-table th:first-child{z-index:3;background:rgba(24,34,49,.98)} .weather-table th:nth-child(2),.weather-table td:nth-child(2){font-weight:700} @media(max-width:540px){.tabs{gap:6px}.tab{padding-inline:12px}} .hourly-day>summary span{display:flex;flex-direction:column;gap:2px} .hourly-day>summary b{font-size:16px} .hourly-day>summary small{color:var(--muted);font-size:12px;font-weight:500} .hourly-day>.table-scroll{margin-top:12px} @media(max-width:700px){ .scroll-hint{display:block} .topbar .place{min-width:0} .topbar .place b,.topbar .place span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hero-row{align-items:flex-start} .hero-icon{width:96px;height:96px} [data-pogodafon-hero]{min-height:366px;padding:20px 16px} [data-pogodafon-hero]>.hero-content{min-height:324px;justify-content:flex-start} [data-pogodafon-hero] .page-title{position:static;max-width:100%;line-height:1.35;margin-bottom:22px} [data-pogodafon-hero] .hero-row>.hero-summary{max-width:100%;width:100%} [data-pogodafon-hero]>.pf-character{width:158px;max-width:44%;right:12px;top:50px;transform:none} [data-pogodafon-hero] .temp{font-size:clamp(60px,18vw,76px)} [data-pogodafon-hero] .deg{font-size:28px} [data-pogodafon-hero] .cond{font-size:19px;margin-top:42px} .temperature-comparison{grid-template-columns:1fr} .directory-intro{display:block;margin-bottom:14px} .directory-intro h2{max-width:none} .directory-intro p{margin-top:6px;font-size:13px} .directory-group>summary{min-height:62px;padding-inline:4px} .temperature-city{min-height:62px} .region-range{font-size:clamp(38px,11vw,46px);white-space:nowrap} .cities{grid-template-columns:1fr} .city,.city.big{flex-direction:row;align-items:center;justify-content:space-between} .city .tv,.city.big .tv{font-size:34px} .day{grid-template-columns:minmax(84px,108px) 44px minmax(0,1fr);gap:8px;padding:13px 2px} .range{grid-template-columns:32px minmax(54px,1fr) 32px;gap:6px;font-size:14px} .friends{padding:14px} .friends-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .friend{min-height:72px;padding:10px;border-radius:14px} .friend img{max-height:48px} .friend--lenremont img{max-height:32px} } @media(max-width:360px){ .tabs{gap:3px;padding-inline:4px} .tab{padding-inline:8px;font-size:12px} .phone-service-card strong{font-size:17px} .phone-service-card small{font-size:11.5px} [data-pogodafon-hero]{min-height:342px;padding:18px 14px} [data-pogodafon-hero]>.hero-content{min-height:304px} [data-pogodafon-hero]>.pf-character{width:132px;max-width:44%;right:8px;top:46px;transform:none} [data-pogodafon-hero] .page-title{max-width:100%;font-size:12.5px} [data-pogodafon-hero] .temp{font-size:60px} [data-pogodafon-hero] .deg{font-size:28px} .weather-icon--city{width:40px;height:40px} .grid2{grid-template-columns:1fr} .day{grid-template-columns:72px 38px minmax(0,1fr);gap:5px} .day .n{font-size:14px} .day .n small{font-size:10.5px} .range{grid-template-columns:28px minmax(35px,1fr) 28px;gap:4px;font-size:13px} } @media(min-width:1000px){ .location-list--desktop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px} .location-list--desktop-grid .li:nth-last-child(-n+3){border-bottom:0} .phone-service-link.icon-btn{width:auto;min-width:222px;height:50px;padding:7px 14px;display:flex;gap:10px;border-radius:17px;background:linear-gradient(135deg,rgba(255,209,102,.24),rgba(255,138,92,.2));border-color:rgba(255,209,102,.42)} .phone-service-link>.i{font-size:21px;color:#ffd166} .phone-service-copy{display:block} } @media(min-width:1000px){ .app{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .app>*{min-width:0} .region-overview .insights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .region-cities .temperature-comparison{grid-template-columns:repeat(3,minmax(0,1fr))} #today,.wellbeing-card,.environment-facts{align-self:stretch} .bottom-nav{display:none} .desk-nav{display:flex} .hscroll,.table-scroll,.curve-wrap{min-width:0;max-width:100%} }