wrapper — v2 hero má vlastní topbar */ body.nh2 .site-header, body.nh2 .site-header--overlay { display: none !important; } body.nh2 .site-main { margin: 0; padding: 0; max-width: none; } /* Skrýt skip-link visuálně, ale ponechat pro klávesnici */ body.nh2 .skip-link { background: var(--nh2-blue); color:#fff; } /* Footer Nordic — ponecháme, jen drobné srovnání rozteče */ body.nh2 .site-footer { margin-top: 60px; } /* ════════════════════════════════════════════════════════════════ HERO — pozadí + animované vrstvy (převzato ze staré verze, zachovává sun/clouds/hills/scene-decor animace přes hero-animations.js) ──────────────────────────────────────────────────────────────── */ body.nh2 .hero { position: relative; /* Záměrně NE plná výška okna — hero končí o ~105 px dřív, takže odspodu vykoukne začátek další sekce („Dnes v číslech") jako signál, že stránka pokračuje rolováním. Hodnota je kompromis: zachovat náhled, ale dát hero dost výšky, aby obsah (teplota + panel) seděl svisle s odstupem od proužku. CAP na 920 px brání natahování na vysokých monitorech (QHD/4K) — na 1080p se hero o ~55 px zkrátí, na 1440p+ podstatně víc. Plně škálovaná typografie (clamp() níž) zaplní místo, takže nevzniká pocit prázdna. */ min-height: clamp(640px, calc(100vh - 105px), 920px); overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(ellipse 100% 70% at 60% 0%, rgba(102, 188, 41, 0.10) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 30% 80%, rgba(0, 32, 114, 0.05) 0%, transparent 60%), linear-gradient(180deg, #EEF3F9 0%, var(--nh2-bg) 90%); } /* HERO vyplní celé okno prohlížeče; obsah je svisle vystředěný, krajina dole. width:100% — bez něj by se flex-položka s margin:0 auto smrskla na obsah. */ body.nh2 .hero > .page-shell { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; } body.nh2 .anim-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; } body.nh2 .sun { position: absolute; top: 90px; right: 10%; width: 130px; height: 130px; opacity: 0.85; } /* Měsíc — SVG s reálnou fází (od CMX MoonPercentAbs). Vidí se jen v noci. */ body.nh2 .moon-phase { position: absolute; top: 60px; right: 13%; width: 56px; height: 56px; opacity: 0; z-index: 6; filter: drop-shadow(0 0 12px rgba(245,237,202,.20)) drop-shadow(0 0 28px rgba(245,237,202,.10)); transition: opacity .8s ease; } body.nh2 .hero[data-daytime="night"] .moon-phase { opacity: .92; } /* Měsíc slabší za mraky / srážkami */ body.nh2 .hero[data-daytime="night"][data-weather="cloudy"] .moon-phase, body.nh2 .hero[data-daytime="night"][data-weather="cloudy-night"] .moon-phase { opacity: .40; } body.nh2 .hero[data-daytime="night"][data-weather="rainy"] .moon-phase, body.nh2 .hero[data-daytime="night"][data-weather="snowy"] .moon-phase { opacity: .25; } body.nh2 .hero[data-daytime="night"][data-weather="thunderstorm"] .moon-phase { opacity: .10; } body.nh2 .sun-core { position: absolute; inset: 25px; border-radius: 50%; background: radial-gradient(circle, #FFD96B 0%, #F4B942 70%, #E89B23 100%); box-shadow: 0 0 30px rgba(244,185,66,.5), 0 0 60px rgba(244,185,66,.3), 0 0 90px rgba(244,185,66,.2); animation: nh2-sunPulse 4s ease-in-out infinite; } @keyframes nh2-sunPulse { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.05); opacity:.95; } } body.nh2 .clouds { position: absolute; inset: 0; opacity: .85; z-index: 5; } body.nh2 .cloud { position: absolute; background: #fff; border-radius: 50px; filter: blur(.5px); } body.nh2 .cloud::before, body.nh2 .cloud::after { content:''; position: absolute; background: inherit; border-radius: 50%; } body.nh2 .cloud-1 { top: 88px; width: 130px; height: 38px; animation: nh2-drift1 110s linear infinite; } body.nh2 .cloud-1::before { width: 60px; height: 60px; top: -25px; left: 20px; } body.nh2 .cloud-1::after { width: 45px; height: 45px; top: -18px; right: 25px; } body.nh2 .cloud-2 { top: 126px; width: 170px; height: 42px; opacity: .85; animation: nh2-drift2 140s linear infinite; animation-delay:-30s; } body.nh2 .cloud-2::before { width: 70px; height: 70px; top: -30px; left: 25px; } body.nh2 .cloud-2::after { width: 55px; height: 55px; top: -22px; right: 30px; } body.nh2 .cloud-3 { top: 110px; width: 105px; height: 32px; opacity: .7; animation: nh2-drift3 160s linear infinite; animation-delay:-60s; } body.nh2 .cloud-3::before { width: 50px; height: 50px; top: -20px; left: 15px; } body.nh2 .cloud-3::after { width: 40px; height: 40px; top: -15px; right: 20px; } /* Mraky 4–6: skryty pri polojasnu, viditelne pri zatazeno/dest/bourka/snih */ body.nh2 .cloud-4, body.nh2 .cloud-5, body.nh2 .cloud-6 { opacity: 0; transition: opacity .6s ease; } body.nh2 .cloud-4 { top: 68px; width: 190px; height: 46px; animation: nh2-drift4 95s linear infinite; } body.nh2 .cloud-4::before { width: 80px; height: 80px; top: -35px; left: 30px; } body.nh2 .cloud-4::after { width: 65px; height: 65px; top: -28px; right: 35px; } body.nh2 .cloud-5 { top: 140px; width: 160px; height: 40px; animation: nh2-drift5 120s linear infinite; animation-delay:-50s; } body.nh2 .cloud-5::before { width: 65px; height: 65px; top: -28px; left: 22px; } body.nh2 .cloud-5::after { width: 50px; height: 50px; top: -20px; right: 28px; } body.nh2 .cloud-6 { top: 100px; width: 200px; height: 48px; animation: nh2-drift6 80s linear infinite; animation-delay:-20s; } body.nh2 .cloud-6::before { width: 85px; height: 85px; top: -38px; left: 35px; } body.nh2 .cloud-6::after { width: 70px; height: 70px; top: -30px; right: 40px; } body.nh2 .hero[data-weather="cloudy"] .cloud-4, body.nh2 .hero[data-weather="cloudy"] .cloud-5, body.nh2 .hero[data-weather="cloudy"] .cloud-6, body.nh2 .hero[data-weather="cloudy-night"] .cloud-4, body.nh2 .hero[data-weather="cloudy-night"] .cloud-5, body.nh2 .hero[data-weather="cloudy-night"] .cloud-6, body.nh2 .hero[data-weather="rainy"] .cloud-4, body.nh2 .hero[data-weather="rainy"] .cloud-5, body.nh2 .hero[data-weather="rainy"] .cloud-6, body.nh2 .hero[data-weather="snowy"] .cloud-4, body.nh2 .hero[data-weather="snowy"] .cloud-5, body.nh2 .hero[data-weather="snowy"] .cloud-6, body.nh2 .hero[data-weather="thunderstorm"] .cloud-4, body.nh2 .hero[data-weather="thunderstorm"] .cloud-5, body.nh2 .hero[data-weather="thunderstorm"] .cloud-6 { opacity: 1; } @keyframes nh2-drift1 { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 200px)); } } @keyframes nh2-drift2 { from { transform: translateX(calc(100vw + 200px)); } to { transform: translateX(-300px); } } @keyframes nh2-drift3 { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 200px)); } } @keyframes nh2-drift4 { from { transform: translateX(calc(100vw + 250px)); } to { transform: translateX(-350px); } } @keyframes nh2-drift5 { from { transform: translateX(-250px); } to { transform: translateX(calc(100vw + 250px)); } } @keyframes nh2-drift6 { from { transform: translateX(calc(100vw + 300px)); } to { transform: translateX(-400px); } } /* ── Reakce oblohy na počasí (.hero[data-weather]) ─────────────────── Bez těchto pravidel by slunce i mraky svítily pořád stejně (vypadalo by to jako „polojasno"). Mění viditelnost podle naměřeného stavu. */ body.nh2 .sun, body.nh2 .clouds { transition: opacity .6s ease; } /* Slunce — viditelné jen za jasného / polojasného dne */ body.nh2 .hero[data-weather="cloudy"] .sun, body.nh2 .hero[data-weather="rainy"] .sun, body.nh2 .hero[data-weather="snowy"] .sun, body.nh2 .hero[data-weather="foggy"] .sun, body.nh2 .hero[data-weather="thunderstorm"] .sun, body.nh2 .hero[data-daytime="night"] .sun { opacity: 0; } /* Jasno — slunce září, obloha bez mraků */ body.nh2 .hero[data-weather="sunny-day"] .sun { opacity: 1; } body.nh2 .hero[data-weather="sunny-day"] .clouds, body.nh2 .hero[data-weather="clear-night"] .clouds { opacity: 0; } /* Noc vždy schová slunce — přepisuje i data-weather="sunny-day" při ručním přepnutí denní doby v debug panelu (pravidlo musí být ZA sunny-day blokem). */ body.nh2 .hero[data-daytime="night"] .sun { opacity: 0; } /* Zataženo / déšť / bouřka — souvislejší a šedivější mraky */ body.nh2 .hero[data-weather="cloudy"] .clouds, body.nh2 .hero[data-weather="cloudy-night"] .clouds, body.nh2 .hero[data-weather="rainy"] .clouds, body.nh2 .hero[data-weather="thunderstorm"] .clouds { opacity: 1; } body.nh2 .hero[data-weather="rainy"] .cloud { background: #ADB7C6; } body.nh2 .hero[data-weather="snowy"] .clouds { opacity: 1; } body.nh2 .hero[data-weather="snowy"] .cloud { background: #C5CCD6; } /* Bouřka — výrazně tmavší, těžké mraky */ body.nh2 .hero[data-weather="thunderstorm"] .cloud { background: #7A8498; } /* Mlha — slunce schované, mraky slabé, přes oblohu mléčný závoj */ body.nh2 .hero[data-weather="foggy"] .clouds { opacity: .35; } body.nh2 .hero[data-weather="foggy"] .anim-layer::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(228,233,239,.92) 0%, rgba(228,233,239,.55) 40%, rgba(228,233,239,.15) 70%, transparent 90%); } /* ── Déšť — decentní, jemné kapky; zobrazí se za deště / bouřky ──────── */ body.nh2 .rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .6s ease; } body.nh2 .hero[data-weather="rainy"] .rain, body.nh2 .hero[data-weather="thunderstorm"] .rain { opacity: 1; } body.nh2 .rain span { position: absolute; top: -10vh; width: 1.4px; height: 38px; border-radius: 1px; background: linear-gradient(to bottom, rgba(116,142,192,0), rgba(99,127,184,.5)); animation-name: nh2-rainfall; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes nh2-rainfall { from { transform: translate(0, 0); } to { transform: translate(0, 122vh); } } /* Vítr žene déšť šikmo — kapky padají z boku. Trajektorie je vpravo-dolů (translate(+33vh, +122vh)), tj. "\" tvar (od horního-levého rohu k pravému dolnímu). Tělo kapky proto musí být nakloněno "\" — top tilted vlevo, bottom vpravo. To znamená rotate(-15deg) (CCW). Předchozí +15deg byl CW = naklonění "/", kapka se sunula bokem proti své trajektorii (uživatel vnímal jako "padají bokem ale jsou vodorovně"). Úhel 15° volený tak, aby tan(15°)×122vh ≈ 33vh = motion vector v ground-frame souřadnicích. */ body.nh2 .hero[data-breeze="on"] .rain span { animation-name: nh2-rainfall-wind; } @keyframes nh2-rainfall-wind { from { transform: translate(0, 0) rotate(-15deg); } to { transform: translate(33vh, 122vh) rotate(-15deg); } } /* ── Vítr — mraky plují trochu rychleji (jinak nese vítr strom, viz níže) */ body.nh2 .hero[data-breeze="on"] .cloud-1 { animation-duration: 42s; } body.nh2 .hero[data-breeze="on"] .cloud-2 { animation-duration: 50s; } body.nh2 .hero[data-breeze="on"] .cloud-3 { animation-duration: 56s; } body.nh2 .hero[data-breeze="on"] .cloud-4 { animation-duration: 36s; } body.nh2 .hero[data-breeze="on"] .cloud-5 { animation-duration: 44s; } body.nh2 .hero[data-breeze="on"] .cloud-6 { animation-duration: 32s; } /* ── Bouřka — záblesky blesku (krátký dvojzáblesk, jinak klid) ──────── */ body.nh2 .lightning { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 85% 65% at 50% -8%, rgba(255,255,255,.96) 0%, rgba(223,231,244,.6) 42%, transparent 78%); } body.nh2 .hero[data-weather="thunderstorm"] .lightning { animation: nh2-lightning 4.2s linear infinite; } /* Bouřka: tmavší obloha, dramatičtější kontrast pro blesky */ body.nh2 .hero[data-weather="thunderstorm"] .anim-layer::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, rgba(40,48,68,.35) 0%, rgba(50,58,75,.2) 50%, transparent 100%); } @keyframes nh2-lightning { 0%, 38% { opacity: 0; } 40% { opacity: .92; } 42% { opacity: .08; } 44% { opacity: .98; } 46% { opacity: .05; } 47.5% { opacity: .75; } 50% { opacity: 0; } 100% { opacity: 0; } } /* ── Sníh — pomalé vločky, jen za sněžení ──────────────────────────────── */ body.nh2 .snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .6s ease; } body.nh2 .hero[data-weather="snowy"] .snow { opacity: 1; } body.nh2 .snow span { position: absolute; top: -5vh; display: block; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9) 30%, rgba(230,236,244,.4) 100%); animation-name: nh2-snowfall; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes nh2-snowfall { 0% { transform: translate(0, 0) rotate(0deg); opacity: .8; } 25% { transform: translate(18px, 28vh) rotate(90deg); } 50% { transform: translate(-12px, 56vh) rotate(180deg); opacity: .9; } 75% { transform: translate(22px, 84vh) rotate(270deg); } 100% { transform: translate(6px, 115vh) rotate(360deg); opacity: .6; } } /* ── Noční přetmavení — gradientový závoj pro noční stavy ─────────────── */ body.nh2 .night-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(10,14,28,.6) 0%, rgba(15,22,42,.45) 35%, rgba(20,30,55,.3) 65%, rgba(15,22,42,.15) 100%); transition: opacity .8s ease; } body.nh2 .hero[data-daytime="night"] .night-overlay { opacity: 1; } /* Noční obloha — tmavé pozadí hero sekce pro dostatečný kontrast světlého textu. Přepisuje světlý denní gradient (#EEF3F9 → #FBFCFE). Bez tohoto pravidla svítí za overlay-em světlý podklad a texty se při jasné noci špatně čtou. */ body.nh2 .hero[data-daytime="night"] { background: linear-gradient(180deg, #0C1222 0%, #131D33 50%, #1A2540 100%); } /* Noc: mraky šedé, bouřka extra tmavé */ body.nh2 .hero[data-daytime="night"] .cloud { background: rgba(160,170,190,.5); } body.nh2 .hero[data-daytime="night"][data-weather="thunderstorm"] .cloud { background: rgba(60,68,90,.7); } /* ── Noční barvy textu — světlé na tmavém pozadí (data-daytime="night") Platí pro VŠECHNY stavy počasí v noci, nejen clear/cloudy-night. Tím jsou automaticky pokryté i déšť/sníh/bouřka za tmy. ─────────── */ body.nh2 .hero[data-daytime="night"] .page-shell { color: rgba(220,228,240,.92); } body.nh2 .hero[data-daytime="night"] .hero-temp .value, body.nh2 .hero[data-daytime="night"] .hero-temp .deg { color: rgba(235,240,250,.95); } body.nh2 .hero[data-daytime="night"] .hero-state { color: rgba(220,228,240,.9); } body.nh2 .hero[data-daytime="night"] .hero-text { color: rgba(200,210,225,.8); } body.nh2 .hero[data-daytime="night"] .hero-side-title { color: rgba(180,192,210,.7); } body.nh2 .hero[data-daytime="night"] .hero-side-row dt { color: rgba(190,200,218,.75); } body.nh2 .hero[data-daytime="night"] .hero-side-row dd { color: rgba(230,236,248,.9); } body.nh2 .hero[data-daytime="night"] .hero-side-row .u { color: rgba(180,192,210,.6); } body.nh2 .hero[data-daytime="night"] .hero-running { color: rgba(190,200,218,.7); } body.nh2 .hero[data-daytime="night"] .hero-running strong { color: rgba(220,228,240,.85); } body.nh2 .hero[data-daytime="night"] .topbar .logo__text { color: rgba(220,228,240,.9); } body.nh2 .hero[data-daytime="night"] .topbar .logo__text strong { color: rgba(240,244,255,.95); } /* Logo na tmavém night hero — modré písmo by se ztratilo, zesvětlujeme. */ body.nh2 .hero[data-daytime="night"] .topbar .logo__mark-img { filter: brightness(0) invert(1); opacity: .92; } body.nh2 .hero[data-daytime="night"] .nav-item { color: rgba(200,210,225,.75); } body.nh2 .hero[data-daytime="night"] .nav-item.is-active { color: rgba(240,244,255,.95); background: rgba(255,255,255,.12); box-shadow: 0 2px 8px rgba(0,0,0,.18); } body.nh2 .hero[data-daytime="night"] .hero-side-block { border-color: rgba(200,210,225,.15); } body.nh2 .hero[data-daytime="night"] .hero-side-row { border-color: rgba(200,210,225,.1); } body.nh2 .hero[data-daytime="night"] .hero-state-ico circle { stroke: rgba(245,237,202,.7); } body.nh2 .hero[data-daytime="night"] .hero-state-ico path { stroke: rgba(200,210,225,.6); } /* ── Zataženo / bouřka ve dne — text-shadow pro čitelnost proti šedým mrakům */ body.nh2 .hero[data-daytime="day"][data-weather="cloudy"] .hero-temp .value, body.nh2 .hero[data-daytime="day"][data-weather="cloudy"] .hero-temp .deg, body.nh2 .hero[data-daytime="day"][data-weather="thunderstorm"] .hero-temp .value, body.nh2 .hero[data-daytime="day"][data-weather="thunderstorm"] .hero-temp .deg { text-shadow: 0 1px 8px rgba(255,255,255,.5); } body.nh2 .hero[data-daytime="day"][data-weather="thunderstorm"] .page-shell { text-shadow: 0 0 10px rgba(255,255,255,.3); } body.nh2 .hills { position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; pointer-events: none; z-index: 8; } body.nh2 .hills svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; } body.nh2.season-spring .hills .hills-spring, body.nh2.season-summer .hills .hills-summer, body.nh2.season-autumn .hills .hills-autumn, body.nh2.season-winter .hills .hills-winter { opacity: .55; } body.nh2.season-winter .hills .hills-winter { opacity: .85; } /* Noční kopce — ztmavení a desaturace pro všechny sezóny. Zamezí efektu „písečných dun" (podzimní béžové kopce přes noční overlay). */ body.nh2 .hero[data-daytime="night"] .hills svg { filter: brightness(.3) saturate(.5); } body.nh2 .scene-decor { position: absolute; bottom: 20px; left: 0; width: 100%; height: 200px; pointer-events: none; z-index: 9; } body.nh2 .scene-decor > * { position: absolute; opacity: 0; transition: opacity .6s ease; } /* Strom + květiny v levém dolním rohu. Díky celoobrazovkovému HERO je obsah svisle vystředěný výš, takže krajina dole nepřekrývá text ani panel. */ body.nh2 .scene-decor .tree-svg { bottom: 0; left: 5%; width: 140px; height: 200px; transform-origin: 50% 100%; animation: nh2-treeSway 6s ease-in-out infinite; } body.nh2 .scene-decor .springflowers-svg { bottom: 12px; left: 18%; width: 90px; height: 60px; } /* Letní dekorace */ body.nh2 .scene-decor .sunflower-svg { bottom: 8px; left: 17%; width: 80px; height: 100px; } /* Podzimní dekorace */ body.nh2 .scene-decor .leaves-svg { bottom: 4px; left: 16%; width: 110px; height: 55px; } /* Zimní dekorace */ body.nh2 .scene-decor .snowman-svg { bottom: 0; left: 18%; width: 65px; height: 95px; filter: drop-shadow(0 2px 4px rgba(15,25,51,.18)); } /* Viditelnost per sezóna */ body.nh2.season-spring .scene-decor .decor-spring { opacity: .65; } body.nh2.season-summer .scene-decor .decor-summer { opacity: .65; } body.nh2.season-autumn .scene-decor .decor-autumn { opacity: .65; } body.nh2.season-winter .scene-decor .decor-winter { opacity: .8; } /* Hromádka listí má vlastní vnitřní opacity per-list — globální .65 ji násobil dolů na 26–52 %, takže listy byly skoro neviditelné. Pro hromádku vracíme plnou opacity; strom (decor-autumn tree-svg) zůstává tlumený jak má (.65). */ body.nh2.season-autumn .scene-decor .leaves-svg { opacity: 1; } /* Noční dekorace — strom a doplňky ztmavené do siluety */ body.nh2 .hero[data-daytime="night"] .scene-decor > * { filter: brightness(.25) saturate(.4); } @keyframes nh2-treeSway { 0% { transform: rotate(0); } 40% { transform: rotate(.3deg); } 70% { transform: rotate(.3deg); } 100% { transform: rotate(0); } } /* Vítr — strom se zřetelně rozhoupe (klidný rytmus, ale viditelný náklon) */ body.nh2 .hero[data-breeze="on"] .scene-decor .tree-svg { animation: nh2-treeSway-wind 2.3s ease-in-out infinite; } @keyframes nh2-treeSway-wind { 0% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-3deg); } } body.nh2 .hero[data-breeze="on"] .scene-decor .springflowers-svg { transform-origin: 50% 100%; animation: nh2-flowerSway 1.8s ease-in-out infinite; } @keyframes nh2-flowerSway { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } } /* Pozn.: scroll cue (šipka „Více níže") odstraněn — pokračování stránky naznačuje poodhalená další sekce (hero není na plnou výšku okna). */ /* ════════════════════════════════════════════════════════════════ PAGE SHELL — společný kontejner napříč sekcemi ──────────────────────────────────────────────────────────────── */ body.nh2 .page-shell { /* var(--max-content) = 1320 px na FHD a menších, škáluje se na velkých monitorech (≥2000 px) do clamp(1320, 70vw, 1800) — viz design-tokens.css. */ max-width: var(--max-content); margin: 0 auto; padding: 0 48px; position: relative; } /* ════════════════════════════════════════════════════════════════ TOPBAR — logo + sdílená navigace (.main-nav). Geometrie záměrně odpovídá .site-header__inner ostatních stránek (padding 20px / efektivní 32px odsazení), aby navigace při proklikání nepřeskakovala. Topbar je teď STICKY-FIXED nad celou stránkou (viz HTML — mimo .hero): - inicializačně transparentní (overlay nad hero gradientem) - po scrollu > 50 px získá `.is-scrolled` třídu (JS) → decentní bílo-blur pozadí + jemný spodní stín, aby vynikl nad obsahem sekcí - .topbar-inner drží stejný max-width/padding jako .page-shell ──────────────────────────────────────────────────────────────── */ body.nh2 .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; /* pojistka proti subpixel shiftu */ /* Plynulý přechod do is-scrolled state — drží Nordic Clean tón. POZOR: backdrop-filter NESMÍ být přímo na .topbar — backdrop-filter na rodiči vytváří nový containing block pro position:fixed potomky, a mobilní vysouvací drawer (.main-nav__items) by se pak fixoval k topbaru místo k viewportu (= drawer by měl jen výšku topbaru). Proto je blur vyhozen do ::before pseudo-elementu. */ transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; pointer-events: none; /* child .topbar-inner si povolí pointer-events */ } body.nh2 .topbar > * { pointer-events: auto; } /* Backdrop-blur jako pseudo-element — nevytváří containing block pro children, takže fixed drawer mobilního menu funguje korektně. */ body.nh2 .topbar::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); opacity: 0; transition: opacity .3s ease; } body.nh2 .topbar.is-scrolled::before { opacity: 1; } body.nh2 .topbar-inner { /* Geometrie 1:1 s .site-header__inner (components/navigation.css line 45-52) — sjednoceno aby logo a nav pillsy stály na PIXELOVĚ STEJNÉM místě při přepínání mezi homepage v2 a ostatními stránkami (forecast, grafy…). Hodnoty padding 20px 32px + gap 16px + max-width: var(--max-content) se musí shodovat se site-header__inner; pokud se tam změní, změnit i tady. */ max-width: var(--max-content); margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; gap: 16px; } /* SCROLLED STATE — silnější bílý tint, aby žádný text nepronikal skrz topbar. Stále decentní díky stínu místo border-line. Blur je v ::before pseudo-elementu výše (aby topbar nevytvářel containing block pro fixed). */ body.nh2 .topbar.is-scrolled { background: rgba(255, 255, 255, .94); border-bottom-color: rgba(231, 233, 240, .6); box-shadow: 0 4px 24px rgba(15, 25, 51, .06); } /* Noční režim — tmavší tint v scrolled, aby nepřebíjel hvězdy/měsíc */ body.nh2 .hero[data-daytime="night"] ~ .topbar.is-scrolled, body.nh2 .topbar.is-scrolled[data-daytime="night"] { background: rgba(15, 25, 51, .88); border-bottom-color: rgba(80, 100, 130, .25); } /* Mobile padding — sjednoceno se site-header__inner (navigation.css line 57-61). */ @media (max-width: 800px) { body.nh2 .topbar-inner { padding: 14px 16px; } } /* Respekt prefers-reduced-motion — zkrácený tint transition */ @media (prefers-reduced-motion: reduce) { body.nh2 .topbar { transition: background .1s; } body.nh2 .topbar::before { transition: opacity .1s; } } /* Aby hero (které je teď SOUSED topbaru, ne rodič) zaplnilo viewport pod fixed barem — topbar overlays, nepushuje hero dolů. Hero gradient prosvítá skrz transparentní topbar tak, jako kdyby tam topbar byl původně (vizuálně beze změny). */ body.nh2 .hero { padding-top: 0; } /* Logo (.logo) i navigace (.main-nav) jsou stylované globálně v components/navigation.css — shodně s hlavičkou ostatních stránek. .main-nav { margin-left:auto } posune navigaci k pravému okraji topbaru. */ /* Na úvodní stránce (hero) má pás navigace průhledné pozadí — odkazy sedí přímo na pozadí hero sekce, bez světlé „pilulky". GEOMETRIE musí být PIXELOVĚ SHODNÁ s podstránkami (.site-header .main-nav__items — Směr B: padding 0, gap 2px). Jinak položky navigace „přeskakují" při přechodu mezi úvodní stránkou a podstránkami. Pravidlo platí jen na desktopu — mobilní vysouvací menu si ponechává bílé pozadí (jinak by bylo nečitelné). */ @media (min-width: 901px) { body.nh2 .main-nav__items { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; gap: 2px; } } body.nh2 .topbar-meta { font-size: 12.5px; color: var(--nh2-ink-muted); display: flex; gap: 16px; align-items: center; } body.nh2 .topbar-meta strong { color: var(--nh2-ink); font-weight: 600; } body.nh2 .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--nh2-green); box-shadow: 0 0 0 0 rgba(102,188,41,.5); animation: nh2-livePulse 2s ease-out infinite; margin-right: 6px; } @keyframes nh2-livePulse { 0% { box-shadow: 0 0 0 0 rgba(102,188,41,.5); } 70% { box-shadow: 0 0 0 8px rgba(102,188,41,0); } 100% { box-shadow: 0 0 0 0 rgba(102,188,41,0); } } /* ════════════════════════════════════════════════════════════════ HERO obsah — typografická hierarchie ──────────────────────────────────────────────────────────────── */ body.nh2 .hero-body { position: relative; z-index: 20; flex: 1 1 auto; display: flex; flex-direction: column; /* Horní odsazení = výška topbaru (~70 px) + 22 px volného místa. Topbar je teď fixed-overlay → bez tohoto paddingu by hero-running pásek zalezl pod topbar. Spodní odsazení drží svisle středěný obsah nad krajinou. */ padding: 92px 0 160px; } /* Metaproužek — hned pod topbarem (lokalita · výška · aktualizace · výstrahy) */ body.nh2 .hero-running { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--nh2-ink-muted); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; flex-wrap: wrap; padding-bottom: 16px; /* vlastní stacking kontext nad .hero-main — popover výstrah musí být vždy navrchu */ position: relative; z-index: 30; } body.nh2 .hero-running .pin { color: var(--nh2-green-deep); display: inline-flex; align-items: center; gap: 6px; } body.nh2 .hero-running .pin svg { width: 12px; height: 12px; } body.nh2 .hero-running .sep { color: var(--nh2-ink-faint); } /* (styl hero-warn-none odstraněn — nahrazen rozkliknutelným chipem níže) */ /* ── Výstraha ČHMÚ — klikací chip + rozbalovací detail ──────────────── */ body.nh2 .nh2-warn { position: relative; display: inline-flex; } body.nh2 .nh2-warn-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit; letter-spacing: .07em; padding: 4px 9px 4px 10px; border-radius: 20px; border: 0; cursor: pointer; color: #fff; background: var(--nh2-warn); transition: filter .15s ease, box-shadow .15s ease; } body.nh2 .nh2-warn[data-level="yellow"] .nh2-warn-chip { background: #D69A1E; } body.nh2 .nh2-warn[data-level="orange"] .nh2-warn-chip { background: var(--nh2-warn); } body.nh2 .nh2-warn[data-level="red"] .nh2-warn-chip { background: var(--nh2-alert); } body.nh2 .nh2-warn-chip:hover { filter: brightness(.94); } body.nh2 .nh2-warn-chip:focus-visible { outline: 2px solid var(--nh2-ink); outline-offset: 2px; } body.nh2 .nh2-warn-chip-ico { width: 13px; height: 13px; flex-shrink: 0; } body.nh2 .nh2-warn-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: rgba(255,255,255,.26); font-size: 10px; font-weight: 700; letter-spacing: 0; } body.nh2 .nh2-warn-chip-caret { width: 12px; height: 12px; opacity: .85; transition: transform .18s ease; } body.nh2 .nh2-warn-chip[aria-expanded="true"] .nh2-warn-chip-caret { transform: rotate(180deg); } /* Bez aktivních výstrah — decentní rozkliknutelný text */ body.nh2 .nh2-warn-chip--none { background: transparent; color: inherit; padding: 2px 5px 2px 0; opacity: .6; } body.nh2 .nh2-warn-chip--none:hover { filter: none; opacity: .9; } body.nh2 .nh2-warn-chip--none .nh2-warn-chip-caret { opacity: .5; } /* Popover s detailem výstrah */ body.nh2 .nh2-warn-pop { position: absolute; top: calc(100% + 9px); left: 0; z-index: 60; width: 392px; max-width: 88vw; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--nh2-line); border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(15,25,51,.32), 0 2px 8px rgba(15,25,51,.06); text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--nh2-ink-soft); opacity: 0; visibility: hidden; transform: translateY(-6px); /* Transition je řízena JS inline styly (place() vynucuje reflow, který rozbíjí CSS transition). Viz hero_v2.php show()/hide(). */ } body.nh2 .nh2-warn-pop-head { display: flex; flex-direction: column; gap: 2px; padding: 13px 16px 11px; border-bottom: 1px solid var(--nh2-line); } body.nh2 .nh2-warn-pop-head .t { font-size: 13px; font-weight: 700; color: var(--nh2-ink); } body.nh2 .nh2-warn-pop-head .src { font-size: 11px; color: var(--nh2-ink-muted); } body.nh2 .nh2-warn-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-bottom: 1px solid var(--nh2-line); border-left: 3px solid transparent; text-decoration: none; color: inherit; cursor: pointer; transition: background .14s ease; } body.nh2 .nh2-warn-row:last-of-type { border-bottom: 0; } body.nh2 .nh2-warn-row:hover { background: rgba(15,25,51,.035); } body.nh2 .nh2-warn-row:focus-visible { outline: 2px solid var(--nh2-ink); outline-offset: -2px; } body.nh2 .nh2-warn-row[data-level="yellow"] { border-left-color: #F4B942; } body.nh2 .nh2-warn-row[data-level="orange"] { border-left-color: var(--nh2-warn); } body.nh2 .nh2-warn-row[data-level="red"] { border-left-color: var(--nh2-alert); } body.nh2 .nh2-warn-row-ico { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; } /* Šipka „více informací" — naznačuje proklik na ČHMÚ */ body.nh2 .nh2-warn-row-arrow { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; color: var(--nh2-ink-faint); transition: color .14s ease, transform .14s ease; } body.nh2 .nh2-warn-row:hover .nh2-warn-row-arrow { color: var(--nh2-info); transform: translate(1px, -1px); } body.nh2 .nh2-warn-row-ico svg { width: 17px; height: 17px; } body.nh2 .nh2-warn-row[data-level="yellow"] .nh2-warn-row-ico { background: rgba(244,185,66,.16); color: #B5841A; } body.nh2 .nh2-warn-row[data-level="orange"] .nh2-warn-row-ico { background: rgba(232,153,79,.18); color: #B84E2A; } body.nh2 .nh2-warn-row[data-level="red"] .nh2-warn-row-ico { background: rgba(192,48,48,.14); color: var(--nh2-alert); } body.nh2 .nh2-warn-row-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; } body.nh2 .nh2-warn-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } body.nh2 .nh2-warn-row-title { font-size: 14px; font-weight: 700; color: var(--nh2-ink); } body.nh2 .nh2-warn-row-grade { font-size: 11px; font-weight: 600; } body.nh2 .nh2-warn-row[data-level="yellow"] .nh2-warn-row-grade { color: #B5841A; } body.nh2 .nh2-warn-row[data-level="orange"] .nh2-warn-row-grade { color: #B84E2A; } body.nh2 .nh2-warn-row[data-level="red"] .nh2-warn-row-grade { color: var(--nh2-alert); } body.nh2 .nh2-warn-row-meta, body.nh2 .nh2-warn-row-areas { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; color: var(--nh2-ink-muted); } body.nh2 .nh2-warn-row-meta svg, body.nh2 .nh2-warn-row-areas svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; } body.nh2 .nh2-warn-row-areas strong { color: var(--nh2-ink-soft); font-weight: 600; } body.nh2 .nh2-warn-row-desc { margin: 1px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--nh2-ink-soft); } body.nh2 .nh2-warn-row-instr { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--nh2-ink-soft); background: var(--nh2-cream); border-radius: 8px; padding: 8px 10px; } body.nh2 .nh2-warn-row-instr-lbl { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nh2-ink-muted); margin-bottom: 2px; } body.nh2 .nh2-warn-pop-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; font-size: 11px; color: var(--nh2-ink-muted); background: var(--nh2-bg); border-top: 1px solid var(--nh2-line); border-radius: 0 0 14px 14px; } body.nh2 .nh2-warn-pop-foot a { color: var(--nh2-info); font-weight: 600; text-decoration: none; white-space: nowrap; } body.nh2 .nh2-warn-pop-foot a:hover { text-decoration: underline; } /* Stav „žádné výstrahy" v popoveru */ body.nh2 .nh2-warn-pop-ok { padding: 14px 16px; } body.nh2 .nh2-warn-pop-ok p { font-size: 12.5px; color: var(--nh2-ink-soft); line-height: 1.5; margin: 0 0 8px; } body.nh2 .nh2-warn-pop-meta { font-size: 11px; color: var(--nh2-ink-muted); line-height: 1.6; } body.nh2 .nh2-warn-pop-meta .sep { margin: 0 4px; opacity: .4; } /* Hlavní obsah — dvousloupcový grid, svisle vystředěný mezi proužkem a krajinou. Vlevo velká teplota + stav počasí, vpravo pocitové hodnoty. align-items: center — kratší panel pocitových hodnot se svisle vystředí vůči vyššímu levému sloupci (teplota + popis), takže nevzniká prázdné místo pod panelem. */ body.nh2 .hero-main { margin: auto 0; display: grid; grid-template-columns: 1fr 360px; gap: 72px; align-items: center; } body.nh2 .hero-lead { min-width: 0; display: flex; flex-direction: column; } body.nh2 .hero-temp { display: flex; align-items: flex-start; gap: 0; line-height: 0.82; } body.nh2 .hero-temp .value { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(180px, 18vw, 280px); color: var(--nh2-blue); /* letter-spacing proporční k font-size (-0.03em ≈ -8 px při 280 px) — em-based měřítko se škáluje, kdyby budoucí @media zvětšila font-size. */ letter-spacing: -.03em; font-feature-settings: "tnum"; } body.nh2 .hero-temp .deg { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(80px, 8vw, 120px); color: var(--nh2-green); margin-top: 18px; margin-left: 4px; } body.nh2 .hero-narrative { margin-top: 40px; max-width: 580px; display: flex; flex-direction: column; gap: 12px; } body.nh2 .hero-state { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 36px; font-weight: 400; color: var(--nh2-green-deep); display: flex; align-items: center; gap: 14px; } body.nh2 .hero-state-ico { width: 32px; height: 32px; } body.nh2 .hero-text { font-family: 'Instrument Serif', serif; font-size: 21px; line-height: 1.45; color: var(--nh2-ink-soft); } body.nh2 .hero-text strong { color: inherit; font-weight: 400; } /* Pravý sloupec — dva bloky: pocitové hodnoty + 24h vývoj teploty */ body.nh2 .hero-side { display: flex; flex-direction: column; gap: 34px; } body.nh2 .hero-side-block { min-width: 0; } body.nh2 .hero-spark-svg { width: 100%; height: 66px; display: block; } body.nh2 .hero-spark-cap { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--nh2-ink-faint); font-feature-settings: "tnum"; } body.nh2 .hero-spark-cap strong { color: var(--nh2-ink-soft); font-weight: 700; } body.nh2 .hero-side-title { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nh2-ink-muted); font-weight: 600; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--nh2-line); } body.nh2 .hero-side-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--nh2-line); } body.nh2 .hero-side-row:last-child { border-bottom: 0; } body.nh2 .hero-side-row dt { font-size: 13px; color: var(--nh2-ink-soft); } body.nh2 .hero-side-row dt em { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 14px; color: var(--nh2-ink-muted); margin-left: 6px; } body.nh2 .hero-side-row dd { font-size: 22px; font-weight: 400; color: var(--nh2-ink); font-feature-settings: "tnum"; letter-spacing: -.01em; } body.nh2 .hero-side-row dd .u { font-size: 12px; color: var(--nh2-ink-muted); font-weight: 400; margin-left: 3px; } /* ════════════════════════════════════════════════════════════════ SEKCE — kapitoly almanachu ──────────────────────────────────────────────────────────────── */ body.nh2 .section { padding: 96px 0 0; } body.nh2 .section.cream { background: var(--nh2-cream); margin-top: 96px; padding: 80px 0; } body.nh2 .section + .section { padding-top: 64px; } body.nh2 .section.cream + .section { padding-top: 80px; } /* První sekce pod hero — menší horní odsazení, aby její nadpis vykoukl nad ohyb stránky a naznačil, že obsah pokračuje rolováním. Nadpis nemá horní margin, aby se vešel do náhledu i při menší výšce náhledu. */ body.nh2 .section--lead { padding-top: 48px; } body.nh2 .section--lead .sec-title h2 { margin-top: 0; } body.nh2 .sec-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: baseline; padding-bottom: 36px; border-bottom: 1px solid var(--nh2-line); margin-bottom: 36px; } body.nh2 .sec-title h2 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 44px; color: var(--nh2-ink); line-height: 1.05; letter-spacing: -.01em; } body.nh2 .sec-title h2 em { font-style: italic; color: var(--nh2-green-deep); } body.nh2 .sec-title .sub { margin-top: 8px; font-size: 14px; color: var(--nh2-ink-muted); max-width: 540px; } body.nh2 .sec-aside { font-size: 12px; color: var(--nh2-ink-muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; text-align: right; } body.nh2 .sec-aside strong { color: var(--nh2-ink); font-weight: 600; } /* ════════════════════════════════════════════════════════════════ SEKCE 01 — Dnes v číslech (Ledger row) ──────────────────────────────────────────────────────────────── */ body.nh2 .ledger-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; } body.nh2 .ledger-cell { padding: 0 32px; border-left: 1px solid var(--nh2-line); } body.nh2 .ledger-cell:first-child { padding-left: 0; border-left: 0; } body.nh2 .ledger-cell:last-child { padding-right: 0; } body.nh2 .ledger-cell .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nh2-ink-muted); font-weight: 600; margin-bottom: 16px; } body.nh2 .ledger-cell .val { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 56px; color: var(--nh2-ink); line-height: 1; letter-spacing: -.02em; font-feature-settings: "tnum"; } body.nh2 .ledger-cell .val .u { font-family: 'Inter', sans-serif; font-size: 16px; color: var(--nh2-ink-muted); font-weight: 400; margin-left: 4px; letter-spacing: 0; } body.nh2 .ledger-cell .meta { font-size: 12px; color: var(--nh2-ink-muted); margin-top: 12px; font-feature-settings: "tnum"; } body.nh2 .ledger-cell .meta .acc { color: var(--nh2-green-deep); font-weight: 600; } /* ════════════════════════════════════════════════════════════════ SEKCE 02 — 4 atmosférické veličiny (quad) ──────────────────────────────────────────────────────────────── */ body.nh2 .quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } body.nh2 .quad > div { padding: 4px 32px 0; border-left: 1px solid var(--nh2-line); min-height: 200px; display: flex; flex-direction: column; } body.nh2 .quad > div:first-child { padding-left: 0; border-left: 0; } body.nh2 .quad > div:last-child { padding-right: 0; } body.nh2 .quad .label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nh2-ink-muted); font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; } body.nh2 .quad .label .ico { color: var(--nh2-ink-faint); margin-left: auto; } body.nh2 .quad .label .info-hint { margin-right: 2px; } body.nh2 .quad .big { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 64px; color: var(--nh2-ink); line-height: 1; letter-spacing: -.02em; font-feature-settings: "tnum"; } body.nh2 .quad .big .u { font-family: 'Inter', sans-serif; font-size: 17px; color: var(--nh2-ink-muted); font-weight: 400; margin-left: 4px; letter-spacing: 0; } body.nh2 .quad .viz { margin-top: 16px; } body.nh2 .quad .foot { margin-top: auto; padding-top: 16px; font-size: 12.5px; color: var(--nh2-ink-muted); display: flex; flex-direction: column; gap: 4px; } body.nh2 .quad .foot em { font-family: 'Instrument Serif', serif; font-style: italic; color: var(--nh2-green-deep); font-size: 14px; } body.nh2 .quad .foot strong { color: var(--nh2-ink); font-weight: 600; } body.nh2 .bar { height: 4px; background: var(--nh2-line); border-radius: 2px; overflow: hidden; position: relative; } body.nh2 .bar > i { display: block; height: 100%; border-radius: 2px; background: var(--nh2-info); } body.nh2 .bar.green > i { background: var(--nh2-green); } body.nh2 .bar.gradient { background: linear-gradient(90deg, #66BC29 0%, #C6D342 25%, #F4C430 50%, #E8994F 70%, #C03030 90%, #7B4E9B 100%); } body.nh2 .bar.gradient > i { background: transparent; } /* Tlaková škála — nízký tlak (proměnlivo) ↔ vysoký tlak (stabilně) */ body.nh2 .bar.press { overflow: visible; background: linear-gradient(90deg, #8FA6C8 0%, #C9D3E0 46%, #DCE7CE 68%, #A7CE86 100%); } body.nh2 .bar.press > i { background: transparent; } body.nh2 .bar .handle { position: absolute; top: 50%; width: 3px; height: 14px; background: var(--nh2-ink); border-radius: 2px; transform: translate(-50%, -50%); } body.nh2 .bar-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--nh2-ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-feature-settings: "tnum"; } /* ════════════════════════════════════════════════════════════════ SEKCE 03 — Vítr (kompas + údaje + 24h bars) ──────────────────────────────────────────────────────────────── */ body.nh2 .wind-grid { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; } body.nh2 .compass-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; } body.nh2 .compass { width: 230px; height: 230px; } body.nh2 .compass-state { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; color: var(--nh2-green-deep); text-align: center; } body.nh2 .compass-state .b { font-style: normal; color: var(--nh2-ink-muted); font-size: 14px; } body.nh2 .wind-readings { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } body.nh2 .wind-readings > div { padding: 18px 24px; border-top: 1px solid var(--nh2-line); border-left: 1px solid var(--nh2-line); } body.nh2 .wind-readings > div:nth-child(-n+2) { border-top: 0; padding-top: 0; } body.nh2 .wind-readings > div:nth-child(2n+1) { border-left: 0; padding-left: 0; } body.nh2 .wind-readings .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nh2-ink-muted); font-weight: 600; margin-bottom: 10px; } body.nh2 .wind-readings .val { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 38px; color: var(--nh2-ink); line-height: 1; letter-spacing: -.01em; font-feature-settings: "tnum"; } body.nh2 .wind-readings .val .u { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--nh2-ink-muted); font-weight: 400; margin-left: 4px; } body.nh2 .wind-readings .val.italic { font-style: italic; color: var(--nh2-green-deep); font-size: 32px; } body.nh2 .wind-readings .meta { font-size: 12px; color: var(--nh2-ink-muted); margin-top: 6px; font-feature-settings: "tnum"; } body.nh2 .wind-bars { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--nh2-line); } body.nh2 .wind-bars-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; } body.nh2 .wind-bars-head .t { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nh2-ink-muted); font-weight: 600; } body.nh2 .wind-bars-head .t em { font-family: 'Instrument Serif', serif; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--nh2-ink); font-size: 14px; margin-left: 10px; font-weight: 400; } body.nh2 .wind-bars-head .stats { font-size: 12px; color: var(--nh2-ink-muted); font-feature-settings: "tnum"; } body.nh2 .wind-bars-head .stats strong { color: var(--nh2-ink); font-weight: 600; } body.nh2 .wind-bars-svg { width: 100%; height: 100px; display: block; } body.nh2 .wind-bars-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--nh2-ink-faint); font-weight: 600; font-feature-settings: "tnum"; } body.nh2 .wind-bars-note, body.nh2 .rain-bars-note { margin-top: 14px; font-size: 12px; color: var(--nh2-ink-muted); font-style: italic; font-family: 'Instrument Serif', serif; line-height: 1.5; } /* ════════════════════════════════════════════════════════════════ SEKCE 04 — Srážky ──────────────────────────────────────────────────────────────── */ body.nh2 .rain-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; } body.nh2 .rain-status { font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1.4; color: var(--nh2-ink-soft); font-weight: 400; max-width: 480px; } body.nh2 .rain-status .lead { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 64px; color: var(--nh2-green-deep); display: block; margin-bottom: 14px; line-height: 1; } body.nh2 .rain-status strong { color: var(--nh2-ink); font-weight: 400; } body.nh2 .rain-status .small { display: block; font-size: 14px; color: var(--nh2-ink-muted); margin-top: 18px; } body.nh2 .rain-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--nh2-line); } body.nh2 .rain-numbers > div { padding: 24px 28px; border-bottom: 1px solid var(--nh2-line); border-right: 1px solid var(--nh2-line); } body.nh2 .rain-numbers > div:nth-child(2n) { border-right: 0; padding-right: 0; } body.nh2 .rain-numbers > div:nth-child(2n+1) { padding-left: 0; } body.nh2 .rain-numbers > div:nth-last-child(-n+2) { border-bottom: 0; } body.nh2 .rain-numbers .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nh2-ink-muted); font-weight: 600; margin-bottom: 8px; } body.nh2 .rain-numbers .val { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 36px; color: var(--nh2-ink); line-height: 1; letter-spacing: -.01em; font-feature-settings: "tnum"; } body.nh2 .rain-numbers .val .u { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--nh2-ink-muted); margin-left: 4px; } body.nh2 .rain-numbers .meta { font-size: 12px; color: var(--nh2-ink-muted); margin-top: 6px; font-feature-settings: "tnum"; } body.nh2 .rain-numbers .meta.down { color: var(--nh2-alert); } body.nh2 .rain-bars { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--nh2-line); } body.nh2 .rain-bars-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; } body.nh2 .rain-bars-svg { width: 100%; height: 110px; display: block; } body.nh2 .rain-bars-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--nh2-ink-faint); font-feature-settings: "tnum"; font-weight: 600; } body.nh2 .rain-legend { margin-top: 18px; display: flex; gap: 24px; font-size: 12px; color: var(--nh2-ink-muted); } body.nh2 .rain-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } /* Srovnání srážek s dlouhodobým normálem ČHMÚ — dvouřádkový přehled (posledních 30 dní + letošní rok od ledna) */ body.nh2 .rain-compare { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--nh2-line); } body.nh2 .rain-compare__title { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nh2-ink-muted); font-weight: 600; margin-bottom: 6px; } body.nh2 .rain-compare__title em { font-family: 'Instrument Serif', serif; font-style: italic; text-transform: none; letter-spacing: 0; color: var(--nh2-ink); font-size: 14px; margin-left: 10px; font-weight: 400; } body.nh2 .rain-compare__row { display: grid; grid-template-columns: 190px 110px 1fr 270px; align-items: center; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--nh2-line); } body.nh2 .rain-compare__row:last-of-type { border-bottom: 0; } body.nh2 .rain-compare__period { font-family: 'Instrument Serif', serif; font-size: 22px; color: var(--nh2-ink-soft); font-weight: 400; } body.nh2 .rain-compare__period em { font-style: italic; color: var(--nh2-green-deep); } body.nh2 .rain-compare__amount { font-family: 'Instrument Serif', serif; font-size: 28px; color: var(--nh2-ink); font-feature-settings: 'tnum'; letter-spacing: -.01em; } body.nh2 .rain-compare__track { position: relative; height: 8px; border-radius: 4px; background: var(--nh2-line); } body.nh2 .rain-compare__fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 3px; border-radius: 4px; background: var(--nh2-green); } body.nh2 .rain-compare__norm { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--nh2-ink); border-radius: 1px; transform: translateX(-1px); } body.nh2 .rain-compare__verdict { display: flex; flex-direction: column; gap: 3px; } body.nh2 .rain-compare__verdict strong { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 19px; font-weight: 400; } body.nh2 .rain-compare__verdict span { font-size: 11px; color: var(--nh2-ink-muted); font-feature-settings: 'tnum'; } /* Tónová paleta — barva pruhu i verdiktu napoví směr (sucho ↔ vlhko) */ body.nh2 .rain-compare__row[data-tone="dry-extreme"] .rain-compare__fill { background: #A8281B; } body.nh2 .rain-compare__row[data-tone="dry-extreme"] .rain-compare__verdict strong { color: #A8281B; } body.nh2 .rain-compare__row[data-tone="dry"] .rain-compare__fill { background: var(--nh2-warn); } body.nh2 .rain-compare__row[data-tone="dry"] .rain-compare__verdict strong { color: #B26B1F; } body.nh2 .rain-compare__row[data-tone="normal"] .rain-compare__fill { background: var(--nh2-green); } body.nh2 .rain-compare__row[data-tone="normal"] .rain-compare__verdict strong { color: var(--nh2-green-deep); } body.nh2 .rain-compare__row[data-tone="wet"] .rain-compare__fill { background: var(--nh2-info); } body.nh2 .rain-compare__row[data-tone="wet"] .rain-compare__verdict strong { color: var(--nh2-info); } body.nh2 .rain-compare__row[data-tone="wet-extreme"] .rain-compare__fill { background: var(--nh2-blue); } body.nh2 .rain-compare__row[data-tone="wet-extreme"] .rain-compare__verdict strong { color: var(--nh2-blue); } body.nh2 .rain-compare__row[data-tone="neutral"] .rain-compare__fill { background: var(--nh2-line-strong); } body.nh2 .rain-compare__row[data-tone="neutral"] .rain-compare__verdict strong { color: var(--nh2-ink-muted); } body.nh2 .rain-compare__legend { margin-top: 14px; font-size: 12px; color: var(--nh2-ink-muted); line-height: 1.55; } body.nh2 .rain-compare__mark { display: inline-block; width: 2px; height: 11px; background: var(--nh2-ink); vertical-align: -1px; margin: 0 3px; } /* ════════════════════════════════════════════════════════════════ SEKCE — Půda (soil-grid) + Kvalita vzduchu (aq-grid) ──────────────────────────────────────────────────────────────── */ /* Sekce Půda — oddělovač odstraněn, stačí mezera mezi sekcemi */ body.nh2 .soil-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; } body.nh2 .soil-grid > div { min-width: 0; } body.nh2 .aq-grid { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; } body.nh2 .aq-grid > div { min-width: 0; } body.nh2 .soil-status { font-family: 'Instrument Serif', serif; font-size: 22px; line-height: 1.5; color: var(--nh2-ink-soft); margin-bottom: 28px; } body.nh2 .soil-status strong { color: var(--nh2-ink); font-weight: 400; } body.nh2 .soil-status em { font-style: italic; color: var(--nh2-green-deep); } body.nh2 .soil-moisture { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 18px 0 18px 0; border-bottom: 1px solid var(--nh2-line); margin-bottom: 24px; align-items: baseline; } body.nh2 .soil-moisture .vlhk { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 18px; color: var(--nh2-ink-soft); } body.nh2 .soil-moisture .vlhk strong { font-style: normal; font-family: 'Instrument Serif', serif; font-size: 42px; color: var(--nh2-ink); font-weight: 400; margin-right: 6px; font-feature-settings: "tnum"; letter-spacing: -.02em; } body.nh2 .soil-moisture .meta { font-size: 12px; color: var(--nh2-ink-muted); text-align: right; } body.nh2 .soil-bar { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #E8C95E 0%, #9FCF6E 50%, #2F7BB8 100%); position: relative; margin-top: 12px; } body.nh2 .soil-bar .handle { position: absolute; top: 50%; width: 3px; height: 14px; background: var(--nh2-ink); border-radius: 2px; transform: translate(-50%, -50%); } body.nh2 .soil-bar-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--nh2-ink-faint); font-weight: 600; } /* Pravý sloupec sekce Půda — 2×2 buňky (3 teploty + vlhkost listu) */ body.nh2 .soil-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } body.nh2 .soil-cells > div { padding: 22px 26px; border-bottom: 1px solid var(--nh2-line); border-right: 1px solid var(--nh2-line); } body.nh2 .soil-cells > div:nth-child(2n) { border-right: 0; padding-right: 0; } body.nh2 .soil-cells > div:nth-child(2n+1) { padding-left: 0; } body.nh2 .soil-cells > div:nth-last-child(-n+2) { border-bottom: 0; } body.nh2 .soil-cells .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nh2-ink-muted); font-weight: 600; margin-bottom: 8px; } body.nh2 .soil-cells .val { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 34px; color: var(--nh2-ink); line-height: 1; font-feature-settings: "tnum"; letter-spacing: -.01em; } body.nh2 .soil-cells .val .u { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--nh2-ink-muted); margin-left: 4px; } body.nh2 .soil-cells .meta { font-size: 12px; color: var(--nh2-ink-muted); margin-top: 7px; } /* Kvalita vzduchu — index vlevo, PM vpravo */ body.nh2 .aq-pm .pm-grid { margin-top: 0; } body.nh2 .aq-pm .pm-note { margin-top: 22px; } body.nh2 .aq-index .aqi-row { border-top: 0; padding-top: 0; } body.nh2 .air-status { font-family: 'Instrument Serif', serif; font-size: 22px; line-height: 1.5; color: var(--nh2-ink-soft); margin-bottom: 24px; } body.nh2 .air-status em { font-style: italic; color: var(--nh2-green-deep); font-size: 28px; } body.nh2 .air-status strong { color: var(--nh2-ink); font-weight: 400; } body.nh2 .aqi-row { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--nh2-line); } body.nh2 .aqi-score { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 88px; color: var(--nh2-green-deep); line-height: 1; letter-spacing: -.02em; font-feature-settings: "tnum"; } body.nh2 .aqi-score .u { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--nh2-ink-muted); margin-left: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; } body.nh2 .aqi-meta { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px; color: var(--nh2-green-deep); } body.nh2 .aqi-meta .small { display: block; font-style: normal; font-family: 'Inter'; font-size: 12px; color: var(--nh2-ink-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .12em; } body.nh2 .aqi-scale { margin-top: 14px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #66BC29 0%, #C6D342 25%, #F4C430 50%, #E8994F 70%, #C03030 90%, #7B4E9B 100%); position: relative; } body.nh2 .aqi-scale .handle { position: absolute; top: 50%; width: 3px; height: 14px; background: var(--nh2-ink); border-radius: 2px; transform: translate(-50%, -50%); } body.nh2 .aqi-scale-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 9.5px; color: var(--nh2-ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } body.nh2 .pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 28px; } body.nh2 .pm-grid > div { padding: 0 24px; border-left: 1px solid var(--nh2-line); } body.nh2 .pm-grid > div:first-child { padding-left: 0; border-left: 0; } body.nh2 .pm-grid .lbl { font-size: 11px; color: var(--nh2-ink-muted); font-weight: 600; margin-bottom: 8px; } body.nh2 .pm-grid .lbl sub { font-size: 9px; } body.nh2 .pm-grid .val { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 26px; color: var(--nh2-ink); line-height: 1; letter-spacing: -.01em; font-feature-settings: "tnum"; } body.nh2 .pm-grid .val .u { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--nh2-ink-muted); margin-left: 4px; } /* PM ukazatel — pruh s vyznačeným doporučeným limitem WHO. Plnění = naměřená hodnota, svislá značka = limit WHO. Barva napoví stav. */ body.nh2 .pm-gauge { position: relative; margin-top: 16px; height: 6px; border-radius: 3px; background: var(--nh2-line); } body.nh2 .pm-gauge__fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 3px; border-radius: 3px; background: var(--nh2-green); } body.nh2 .pm-gauge__limit { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--nh2-ink); border-radius: 1px; transform: translateX(-1px); } /* Číslo limitu přímo u značky — uživatel vidí, kde limit leží */ body.nh2 .pm-gauge__limit::after { content: attr(data-limit); position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; color: var(--nh2-ink-muted); font-feature-settings: 'tnum'; white-space: nowrap; } body.nh2 .pm-verdict { margin-top: 26px; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 15px; line-height: 1.25; } body.nh2 .pm-note { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--nh2-line); font-size: 12px; color: var(--nh2-ink-muted); line-height: 1.55; } body.nh2 .pm-note__mark { display: inline-block; width: 2px; height: 11px; background: var(--nh2-ink); vertical-align: -1px; margin: 0 2px; } /* Tóny — barva pruhu i verdiktu napoví, jak na tom složka je */ body.nh2 .pm-grid > div[data-tone="good"] .pm-gauge__fill { background: var(--nh2-green-deep); } body.nh2 .pm-grid > div[data-tone="good"] .pm-verdict { color: var(--nh2-green-deep); } body.nh2 .pm-grid > div[data-tone="ok"] .pm-gauge__fill { background: var(--nh2-green); } body.nh2 .pm-grid > div[data-tone="ok"] .pm-verdict { color: var(--nh2-green-deep); } body.nh2 .pm-grid > div[data-tone="over"] .pm-gauge__fill { background: var(--nh2-warn); } body.nh2 .pm-grid > div[data-tone="over"] .pm-verdict { color: #B26B1F; } body.nh2 .pm-grid > div[data-tone="high"] .pm-gauge__fill { background: var(--nh2-alert); } body.nh2 .pm-grid > div[data-tone="high"] .pm-verdict { color: var(--nh2-alert); } body.nh2 .pm-grid > div[data-tone="neutral"] .pm-gauge__fill { background: var(--nh2-line-strong); } body.nh2 .pm-grid > div[data-tone="neutral"] .pm-verdict { color: var(--nh2-ink-muted); } /* ════════════════════════════════════════════════════════════════ SEKCE 06+07 — grafy ──────────────────────────────────────────────────────────────── */ body.nh2 .seg { display: inline-flex; gap: 2px; border: 1px solid var(--nh2-line); border-radius: 30px; padding: 3px; } body.nh2 .seg button { font: 500 12.5px/1 Inter, sans-serif; color: var(--nh2-ink-soft); padding: 8px 16px; border-radius: 30px; background: none; border: none; cursor: pointer; transition: all .15s; } body.nh2 .seg button:hover { color: var(--nh2-ink); } body.nh2 .seg button[aria-pressed="true"] { background: var(--nh2-green); color: #fff; font-weight: 600; } body.nh2 .chart-area { margin-top: 8px; } body.nh2 .chart-svg { width: 100%; height: 320px; display: block; } /* Stav načítání při přepnutí rozsahu */ body.nh2 .chart-area.is-loading .chart-interactive { opacity: .5; transition: opacity .15s ease; } body.nh2 .chart-area.is-loading { cursor: progress; } /* Informační pruh — málo dat pro zvolený rozsah (graf kvality vzduchu) */ body.nh2 .aq-coverage-notice { display: none; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 16px; background: rgba(59, 109, 184, .07); border: 1px solid rgba(59, 109, 184, .18); border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--nh2-ink-soft); } body.nh2 .aq-coverage-notice[data-show="true"] { display: flex; } body.nh2 .aq-coverage-notice svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--nh2-info); } body.nh2 .aq-coverage-notice strong { color: var(--nh2-ink); font-weight: 600; } body.nh2 .chart-legend { margin-top: 24px; display: flex; gap: 36px; align-items: center; font-size: 12.5px; color: var(--nh2-ink-soft); flex-wrap: wrap; } body.nh2 .chart-legend .item { display: flex; align-items: center; gap: 8px; } body.nh2 .chart-legend .sw { width: 16px; height: 2px; background: var(--nh2-green-deep); } body.nh2 .chart-legend .sw.blue { background: var(--nh2-info); } body.nh2 .chart-legend strong { color: var(--nh2-ink); font-weight: 600; } body.nh2 .chart-legend .label { color: var(--nh2-ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-right: 4px; } /* ── Interaktivní graf — tooltip sledující kurzor přímo v grafu ─────── */ body.nh2 .chart-interactive { position: relative; } body.nh2 .chart-hover { transition: opacity .12s ease; } /* ── Interaktivní sloupcové grafy (vítr 24 h, srážky 30 dní) ───────── */ body.nh2 .bar-interactive { position: relative; } body.nh2 .bar-interactive svg { cursor: default; } body.nh2 .bar-hover-band { fill: rgba(15, 25, 51, .06); pointer-events: none; transition: x .08s ease, width .08s ease, opacity .12s ease; } body.nh2 .chart-tooltip { position: absolute; z-index: 6; pointer-events: none; background: var(--nh2-ink); color: #fff; padding: 9px 13px; border-radius: 11px; box-shadow: 0 6px 22px rgba(15, 25, 51, .22); white-space: nowrap; opacity: 0; transform: translateY(5px) scale(.97); transform-origin: bottom center; transition: opacity .13s ease, transform .13s ease; } body.nh2 .chart-tooltip[aria-hidden="false"] { opacity: 1; transform: translateY(0) scale(1); } /* špička ukazující na datový bod */ body.nh2 .chart-tooltip::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; background: var(--nh2-ink); border-radius: 2px; transform: translateX(-50%) rotate(45deg); } body.nh2 .chart-tooltip--below { transform-origin: top center; } body.nh2 .chart-tooltip--below::after { bottom: auto; top: -4px; } body.nh2 .chart-tooltip__time { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: rgba(255, 255, 255, .55); margin-bottom: 3px; font-feature-settings: 'tnum'; } body.nh2 .chart-tooltip__value { font-family: 'Instrument Serif', serif; font-size: 24px; line-height: 1; color: #fff; font-feature-settings: 'tnum'; } body.nh2 .chart-tooltip__unit { font-family: 'Inter', sans-serif; font-size: 11px; color: rgba(255, 255, 255, .6); margin-left: 4px; } /* Roční pohled — denní min/max pod průměrem (zobrazí se jen s třídou --range) */ body.nh2 .chart-tooltip__range { display: none; } body.nh2 .chart-tooltip--range .chart-tooltip__range { display: block; margin-top: 5px; font-size: 11px; color: rgba(255, 255, 255, .6); font-feature-settings: 'tnum'; } /* AQ varianta — tři složky PM pod sebou */ body.nh2 .chart-tooltip__rows { display: flex; flex-direction: column; gap: 4px; } body.nh2 .chart-tooltip__row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255, 255, 255, .82); font-feature-settings: 'tnum'; } body.nh2 .chart-tooltip__row strong { color: #fff; font-weight: 600; margin-left: auto; padding-left: 12px; } body.nh2 .chart-tooltip__row small { color: rgba(255, 255, 255, .5); font-size: 10px; } body.nh2 .chart-tooltip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════════ SEKCE 08 — Slunce a Měsíc ──────────────────────────────────────────────────────────────── */ body.nh2 .moon-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; } body.nh2 .moon-cell { padding: 0 28px; border-left: 1px solid var(--nh2-line); } body.nh2 .moon-cell:first-child { padding-left: 0; border-left: 0; } body.nh2 .moon-cell .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--nh2-ink-muted); font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; } body.nh2 .moon-cell .val { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 30px; color: var(--nh2-ink); line-height: 1.1; letter-spacing: -.01em; font-feature-settings: "tnum"; } body.nh2 .moon-cell .val em { font-style: italic; color: var(--nh2-green-deep); font-size: 22px; } body.nh2 .moon-cell .meta { font-size: 12px; color: var(--nh2-ink-muted); margin-top: 6px; } body.nh2 .ico-inline { width: 13px; height: 13px; vertical-align: -2px; } /* ════════════════════════════════════════════════════════════════ ZLATÁ HODINA / ČERVÁNKY — barevný posun ±30 min kolem východu/západu. PHP přidá `data-light-phase="golden"` na .hero. Mění: • slunce (žluto-oranžová → zlato-oranžová) • obloha (přidá růžovo-oranžový pás nad horizontem) • hory v dálce (alpenglow — růžovo-oranžový nádech) • mraky (broskvový spodek) • sluneční paprsky (teplejší) ──────────────────────────────────────────────────────────────── */ body.nh2 .hero[data-light-phase="golden"] .sun-core { background: radial-gradient(circle, #FFC069 0%, #F08A2A 60%, #D26A14 100%); box-shadow: 0 0 35px rgba(240,138,42,.55), 0 0 70px rgba(240,138,42,.35), 0 0 110px rgba(240,138,42,.22); } body.nh2 .hero[data-light-phase="golden"] .sun-ray { background: linear-gradient(180deg, rgba(244,160,40,.55), transparent); } /* Mraky — broskvový spodek jen při polojasnu (slunce mezi mraky). Při sunny-day jsou mraky skryté (opacity:0), takže netřeba. Při cloudy / rainy / snowy / thunderstorm / foggy NEPŘEBARVOVAT — hustá oblačnost nepustí sluneční světlo na spodky mraků. */ body.nh2 .hero[data-light-phase="golden"][data-weather="partly-cloudy-day"] .cloud { background: linear-gradient(180deg, #FFF5E2 0%, #FFD3B0 100%); } /* Obloha — velmi jemný teplý nádech nad horizontem. Whitelist: jen za jasna a polojasna (a jen ve dne). Husté mraky, srážky, mlha, bouřka, noc — žádné červánky. */ body.nh2 .hero[data-light-phase="golden"][data-weather="sunny-day"] .anim-layer::after, body.nh2 .hero[data-light-phase="golden"][data-weather="partly-cloudy-day"] .anim-layer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,215,170,0) 0%, rgba(255,215,170,0) 55%, rgba(255,205,160,.06) 75%, rgba(255,180,140,.10) 90%, rgba(255,160,120,.13) 100%); pointer-events: none; z-index: 4; transition: opacity .8s ease; } /* Hory — alpenglow je jen jemný teplý nádech. Stejný whitelist — za zataženo by hory neměly být růžovat (chybí dopadající světlo). */ body.nh2 .hero[data-light-phase="golden"][data-weather="sunny-day"] .hills, body.nh2 .hero[data-light-phase="golden"][data-weather="partly-cloudy-day"] .hills { filter: hue-rotate(-6deg) saturate(1.05) brightness(1.02); } /* Transition pro plynulý fade z denní palety na zlatou. */ body.nh2 .sun-core, body.nh2 .sun-ray, body.nh2 .cloud, body.nh2 .hills, body.nh2 .anim-layer::after { transition: background .8s ease, box-shadow .8s ease, filter .8s ease; } /* ════════════════════════════════════════════════════════════════ PADAJÍCÍ HVĚZDY — náhodné meteory v noci. JS spawnuje element `.shooting-star` co 40–90 s s náhodnou pozicí. CSS animuje skok po diagonále s krátkou stopou. ──────────────────────────────────────────────────────────────── */ body.nh2 .shooting-stars { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .8s ease; overflow: hidden; } body.nh2 .hero[data-daytime="night"] .shooting-stars { opacity: 1; } body.nh2 .shooting-star { position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; box-shadow: 0 0 6px 2px rgba(255,255,255,1), 0 0 14px 4px rgba(255,255,255,.55), 0 0 26px 6px rgba(196,222,255,.25); animation: nh2-shootingStar linear forwards; } /* Stopa za meteorem — lineární gradient natočený OPAČNĚ ke směru pohybu. Hvězda letí doprava-dolů (translate +290, +140 → úhel ≈ 26°), takže stopa za sebou míří vlevo-nahoru — to je „zpoždění" za pohybem. POZN.: V CSS s Y dolů `rotate(+26deg)` na elementu mířícím doleva stočí jeho levý konec NAHORU (vlevo-nahoru). Záporná rotace by ho stočila dolů — typická pasti při ručním ladění. */ body.nh2 .shooting-star::before { content: ''; position: absolute; top: calc(50% - 1px); right: 50%; width: 110px; height: 2px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(196,222,255,.18) 30%, rgba(220,235,255,.45) 60%, rgba(255,255,255,.85) 92%, rgba(255,255,255,1) 100%); transform-origin: right center; transform: rotate(26deg); filter: blur(.6px); border-radius: 99px; } @keyframes nh2-shootingStar { 0% { opacity: 0; transform: translate(0, 0); } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(290px, 140px); } } /* ════════════════════════════════════════════════════════════════ PADAJÍCÍ LISTÍ ZE STROMU (sezona autumn). Kontejner je positionovaný nad korunou stromu (matchuje `.tree-svg` left/width). JS spawnuje 1 list co 6–12 s; list padá dolů s mírným driftem do strany a rotací. Listy vidí jen autumn. ──────────────────────────────────────────────────────────────── */ body.nh2 .scene-decor .tree-leaves-falling { position: absolute; left: 5%; /* stejně jako .tree-svg na desktopu */ bottom: 60px; /* od horizontu nad nejvyšší bod koruny */ width: 140px; /* stejně jako strom */ height: 160px; pointer-events: none; overflow: visible; } body.nh2 .tree-leaf { position: absolute; top: 0; width: 14px; height: 14px; pointer-events: none; animation-name: nh2-treeLeafFall; animation-timing-function: cubic-bezier(.22, .55, .65, 1); animation-fill-mode: forwards; --drift: 0px; --end-rot: 720deg; opacity: 0; } @keyframes nh2-treeLeafFall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 12% { opacity: .92; } 88% { opacity: .85; } 100% { transform: translate(var(--drift), 160px) rotate(var(--end-rot)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { body.nh2 *, body.nh2 *::before, body.nh2 *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ════════════════════════════════════════════════════════════════ RESPONZIVITA ──────────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { body.nh2 .hero-main { grid-template-columns: 1fr; gap: 38px; } body.nh2 .wind-grid { grid-template-columns: 1fr; gap: 40px; } body.nh2 .rain-grid { grid-template-columns: 1fr; gap: 40px; } body.nh2 .rain-compare__row { grid-template-columns: 1fr 1fr; gap: 12px 20px; } body.nh2 .rain-compare__track { grid-column: 1 / -1; order: 3; } body.nh2 .rain-compare__verdict { grid-column: 1 / -1; order: 4; } body.nh2 .rain-compare__amount { text-align: right; } body.nh2 .soil-grid { grid-template-columns: 1fr; gap: 36px; } body.nh2 .aq-grid { grid-template-columns: 1fr; gap: 36px; } body.nh2 .quad { grid-template-columns: repeat(2, 1fr); } body.nh2 .quad > div { border-top: 1px solid var(--nh2-line); padding-top: 24px; } body.nh2 .quad > div:nth-child(-n+2) { border-top: 0; padding-top: 4px; } body.nh2 .ledger-row { grid-template-columns: repeat(2, 1fr); } body.nh2 .ledger-cell { padding: 16px 16px; border-top: 1px solid var(--nh2-line); } body.nh2 .ledger-cell:nth-child(-n+2) { border-top: 0; } body.nh2 .moon-row { grid-template-columns: repeat(2, 1fr); } body.nh2 .moon-cell { padding: 16px; border-top: 1px solid var(--nh2-line); border-left: 0; } body.nh2 .page-shell { padding: 0 20px; } /* topbar-inner mobile padding NESHODUJEME s site-header__inner — ten má vlastní @media (max-width: 800px) { padding: 14px 16px }. Necháme stejné. */ /* Úzké rozlišení: hero-main je jednosloupcový, narativní text přes celou šířku — strom proto k pravému okraji, ať nepřekrývá text. */ body.nh2 .scene-decor .tree-svg { left: auto; right: 3%; } body.nh2 .scene-decor .springflowers-svg { left: auto; right: 14%; } body.nh2 .scene-decor .sunflower-svg { left: auto; right: 12%; } body.nh2 .scene-decor .leaves-svg { left: auto; right: 13%; } body.nh2 .scene-decor .snowman-svg { left: auto; right: 14%; } } /* Telefon (≤600 px) — hero teplota je při floor 180 px obrovská a vytlačí panel i text mimo obraz. Tady ji zmenšíme proporcionálně k viewportu. */ @media (max-width: 600px) { body.nh2 .hero-temp .value { font-size: clamp(100px, 26vw, 160px); letter-spacing: -.02em; } body.nh2 .hero-temp .deg { font-size: clamp(44px, 11vw, 72px); margin-top: 12px; } body.nh2 .hero-state { font-size: 26px; gap: 10px; } body.nh2 .hero-state-ico { width: 24px; height: 24px; } body.nh2 .hero-text { font-size: 16px; line-height: 1.5; } body.nh2 .hero-narrative { margin-top: 24px; } body.nh2 .hero-side { gap: 20px; } body.nh2 .hero-side-row dd { font-size: 19px; } body.nh2 .hero-side-row dt { font-size: 12.5px; } body.nh2 .hero-running { gap: 8px; flex-wrap: wrap; font-size: 11px; } /* Logo nezalamovat */ body.nh2 .logo__text strong { font-size: 18px; } body.nh2 .page-shell { padding: 0 16px; } /* Sekční nadpisy a velká čísla — proporcionálně k mobilní šířce */ body.nh2 .sec-title h2 { font-size: 32px; line-height: 1.1; } body.nh2 .sec-title .sub { font-size: 13px; } body.nh2 .ledger-cell .val { font-size: 44px; } body.nh2 .quad .big { font-size: 48px; } body.nh2 .wind-readings .val { font-size: 30px; } body.nh2 .rain-status .lead { font-size: 48px; } body.nh2 .rain-numbers .val { font-size: 28px; } body.nh2 .soil-moisture .vlhk strong { font-size: 34px; } body.nh2 .soil-cells .val { font-size: 28px; } body.nh2 .aqi-score { font-size: 68px; } body.nh2 .moon-cell .val { font-size: 24px; } /* Sekční odsazení malé */ body.nh2 .section { padding: 56px 0 0; } body.nh2 .section.cream { padding: 48px 0; margin-top: 56px; } body.nh2 .sec-head { grid-template-columns: 1fr; gap: 14px; padding-bottom: 24px; margin-bottom: 24px; } body.nh2 .sec-aside { text-align: left; } } /* Nízká okna (notebooky 1366×768 ap.) — zmenšíme teplotu, panel i rozteče, aby se obsah HERO vešel nad krajinu a nepřekrýval strom. */ @media (max-height: 800px) { body.nh2 .hero-temp .value { font-size: clamp(118px, 19vh, 188px); } body.nh2 .hero-temp .deg { font-size: clamp(52px, 8vh, 84px); } body.nh2 .hero-running { padding-bottom: 10px; } body.nh2 .hero-body { padding-bottom: 152px; } body.nh2 .hero-main { gap: 22px; } body.nh2 .hero-spark-svg { height: 50px; } body.nh2 .hero-side-row { padding: 9px 0; } body.nh2 .hero-side-row dd { font-size: 19px; } body.nh2 .hero-state { font-size: 28px; } body.nh2 .hero-state-ico { width: 26px; height: 26px; } body.nh2 .hero-text { font-size: 17px; } body.nh2 .scene-decor { bottom: 10px; height: 158px; } body.nh2 .scene-decor .tree-svg { width: 110px; height: 158px; } body.nh2 .scene-decor .springflowers-svg { width: 74px; height: 50px; } body.nh2 .scene-decor .sunflower-svg { width: 64px; height: 80px; } body.nh2 .scene-decor .leaves-svg { width: 90px; height: 45px; } body.nh2 .scene-decor .snowman-svg { width: 52px; height: 76px; } body.nh2 .scene-decor .tree-leaves-falling { width: 110px; height: 130px; bottom: 50px; } body.nh2 .moon-phase { width: 46px; height: 46px; top: 50px; } } /* ════════════════════════════════════════════════════════════════ ŠKÁLOVÁNÍ TYPOGRAFIE PRO VELKÉ MONITORY (>2000 px) ────────────────────────────────────────────────────────────────── Cíl: Na FHD (≤1920) a menších se NIC nemění — vše drží původní pevné velikosti. Na QHD/UltraWide/4K (≥2000 px) se klíčové prvky decentně zvětší, aby web nevypadal "ztracený" v prostoru. Pravidlo slope: každý clamp() má floor = původní velikost, slope zvolený tak, aby AŽ NA hraně 2000 px byla hodnota velmi blízko floor (žádný vizuální skok), a strop dosažený kolem 2400–2600 px. Maximální růst napříč elementy ~25–35 % oproti FHD. ──────────────────────────────────────────────────────────────── */ @media (min-width: 2000px) { /* Topbar — logo + navigace. Drobné zvětšení (cca +20-25 %) aby na QHD/4K nevypadaly drobně. */ body.nh2 .logo__text strong { font-size: clamp(22px, 1.15vw, 28px); } body.nh2 .logo__text span { font-size: clamp(12px, .65vw, 15px); } body.nh2 .logo__mark-img { height: clamp(38px, 2vw, 48px); } body.nh2 .nav-item { font-size: clamp(14px, .75vw, 17px); padding: clamp(9px, .5vw, 12px) clamp(18px, 1vw, 24px); } /* Hero-running — meta proužek pod topbarem (lokalita, výška, aktualizace) */ body.nh2 .hero-running { font-size: clamp(12px, .65vw, 15px); } body.nh2 .hero-running .pin svg { width: clamp(12px, .65vw, 15px); height: clamp(12px, .65vw, 15px); } /* Panel header „POCITOVÉ HODNOTY" — base 11 px je extrémně malé */ body.nh2 .hero-side-title { font-size: clamp(11px, .65vw, 14px); margin-bottom: clamp(12px, .7vw, 16px); padding-bottom: clamp(12px, .7vw, 16px); } /* Hero — hlavní teplota a stupeň. Zmírněný cap (360→300 / 160→130) a slope (14.5→12vw / 6.5→5.5vw), aby na QHD/4K monitorech a při odzoomovaném zobrazení teplota nedominovala neúměrně k okolnímu obsahu. Vlastní začátek média stále drží 280/120 px floor → smooth přechod z FHD bez skoku. */ body.nh2 .hero-temp .value { font-size: clamp(280px, 12vw, 300px); } body.nh2 .hero-temp .deg { font-size: clamp(120px, 5.5vw, 130px); } /* Hero — text vedle teploty */ body.nh2 .hero-state { font-size: clamp(36px, 1.9vw, 48px); } body.nh2 .hero-state-ico { width: clamp(32px, 1.7vw, 42px); height: clamp(32px, 1.7vw, 42px); } body.nh2 .hero-text { font-size: clamp(21px, 1.1vw, 28px); } /* Hero — panel pocitových hodnot */ body.nh2 .hero-side-row dt { font-size: clamp(13px, .7vw, 16px); } body.nh2 .hero-side-row dt em { font-size: clamp(14px, .75vw, 17px); } body.nh2 .hero-side-row dd { font-size: clamp(22px, 1.2vw, 28px); } body.nh2 .hero-side-row dd .u { font-size: clamp(12px, .65vw, 14px); } /* Sekční nadpisy */ body.nh2 .sec-title h2 { font-size: clamp(44px, 2.3vw, 58px); } body.nh2 .sec-title .sub { font-size: clamp(14px, .75vw, 17px); } /* Ledger čísla — sekce 01 */ body.nh2 .ledger-cell .val { font-size: clamp(56px, 2.95vw, 74px); } body.nh2 .ledger-cell .val .u { font-size: clamp(16px, .85vw, 19px); } /* Quad atmosféra — sekce 02 */ body.nh2 .quad .big { font-size: clamp(64px, 3.35vw, 84px); } body.nh2 .quad .big .u { font-size: clamp(17px, .9vw, 20px); } /* Vítr — sekce 03 */ body.nh2 .compass-state { font-size: clamp(22px, 1.15vw, 28px); } body.nh2 .compass-state .b { font-size: clamp(14px, .75vw, 17px); } body.nh2 .wind-readings .val { font-size: clamp(38px, 2vw, 50px); } body.nh2 .wind-readings .val .u { font-size: clamp(14px, .75vw, 17px); } body.nh2 .wind-readings .val.italic { font-size: clamp(32px, 1.7vw, 42px); } /* Srážky — sekce 04 */ body.nh2 .rain-status { font-size: clamp(28px, 1.5vw, 36px); } body.nh2 .rain-status .lead { font-size: clamp(64px, 3.4vw, 84px); } body.nh2 .rain-numbers .val { font-size: clamp(36px, 1.9vw, 48px); } body.nh2 .rain-numbers .val .u { font-size: clamp(14px, .75vw, 17px); } body.nh2 .rain-compare__period { font-size: clamp(22px, 1.15vw, 28px); } body.nh2 .rain-compare__amount { font-size: clamp(28px, 1.5vw, 38px); } /* Půda — sekce 05 */ body.nh2 .soil-status { font-size: clamp(22px, 1.15vw, 28px); } body.nh2 .soil-moisture .vlhk { font-size: clamp(18px, .95vw, 22px); } body.nh2 .soil-moisture .vlhk strong { font-size: clamp(42px, 2.2vw, 54px); } body.nh2 .soil-cells .val { font-size: clamp(34px, 1.8vw, 44px); } body.nh2 .soil-cells .val .u { font-size: clamp(13px, .7vw, 16px); } /* Kvalita vzduchu */ body.nh2 .air-status { font-size: clamp(22px, 1.15vw, 28px); } body.nh2 .air-status em { font-size: clamp(28px, 1.5vw, 38px); } body.nh2 .aqi-score { font-size: clamp(88px, 4.6vw, 116px); } body.nh2 .aqi-score .u { font-size: clamp(14px, .75vw, 17px); } body.nh2 .aqi-meta { font-size: clamp(22px, 1.15vw, 28px); } body.nh2 .pm-grid .val { font-size: clamp(26px, 1.4vw, 34px); } body.nh2 .pm-grid .val .u { font-size: clamp(12px, .65vw, 14px); } /* Slunce + Měsíc — sekce 08 */ body.nh2 .moon-cell .val { font-size: clamp(30px, 1.6vw, 40px); } body.nh2 .moon-cell .val em { font-size: clamp(22px, 1.15vw, 28px); } }