/* Lokální fonty - žádné cizí CDN. Staženo z Google Fonts (licence OFL). */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/build/fonts/manrope-400-latin-ext.e46c8aa4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/build/fonts/manrope-400-latin.c5d858e9.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/build/fonts/manrope-500-latin-ext.e46c8aa4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/build/fonts/manrope-500-latin.c5d858e9.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/build/fonts/manrope-600-latin-ext.e46c8aa4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/build/fonts/manrope-600-latin.c5d858e9.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/build/fonts/manrope-700-latin-ext.e46c8aa4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/build/fonts/manrope-700-latin.c5d858e9.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* oPočasí.cz - paleta 3c „Mech a olivová" (design kolo 4a + 5a) * * Barvy jsou v proměnných, aby šel motiv přepnout jedním atributem na . * Doplňkové odstíny textu jsou zvolené tak, aby na svém pozadí měly kontrast * aspoň 4,5 : 1, což je hranice WCAG AA pro běžný text. Původní --faint měl 2,7, * takže poznámky pod grafy byly na hraně čitelnosti. */ :root { --ink: #16200F; --ink-2: #17211F; --text: #28321F; --muted: #414C38; --faint: #4B5642; --dark: #26382A; --olive: #4C6B31; --leaf: #A8C486; --page: #EBEFE3; --card: #FCFDF9; --chip: #F1F4EA; --chip-2: #F6F3EC; --track: #E4E8DA; --map-a: #D3DCC3; --map-b: #E9EFDB; --map-sea: #BFD6E3; --border: rgba(38, 56, 42, .12); --border-soft: rgba(38, 56, 42, .10); --border-strong: rgba(38, 56, 42, .14); --warn: #A44F22; --amber: #8A5A20; --head-text: #F3F6EE; --head-muted: #C6D2BE; --head-placeholder: #B3BFA7; --foot-label: #A7BC97; --foot-muted: #B9CBAE; --foot-light: #DDE7D6; --flood-row: #FBF2EC; --map-outline: #4E6144; --map-outline-strong: #FFFFFF; --map-shadow: rgba(30, 42, 32, .45); --map-pin: #26382A; color-scheme: light; } /* Tmavý motiv. Není to prohození světlosti, ale vlastní sada odstínů - obrácená * paleta by dala špinavě zelené plochy a bílý text na nich by pálil. Plochy jsou * proto tmavě zelenošedé a text je lomeně bílý, ne čistě bílý. */ :root[data-theme="dark"] { --ink: #E8EEE2; --ink-2: #E2EAE0; --text: #C9D4C2; --muted: #9DAB93; --faint: #8B9982; --dark: #1A2419; --olive: #A8C486; --leaf: #A8C486; --page: #141A13; --card: #1D251C; --chip: #262F24; --chip-2: #2A3128; --track: #313A2F; --map-a: #38432F; --map-b: #313C2A; --map-sea: #131E26; --border: rgba(232, 238, 226, .14); --border-soft: rgba(232, 238, 226, .10); --border-strong: rgba(232, 238, 226, .20); --warn: #E08B58; --amber: #D9A25C; --head-text: #E8EEE2; --head-muted: #A9B79F; --head-placeholder: #93A189; --foot-label: #A7BC97; --foot-muted: #A9B79F; --foot-light: #DDE7D6; --flood-row: #33241C; --map-outline: #AFBEA4; --map-outline-strong: #0F140E; --map-shadow: rgba(232, 238, 226, .35); --map-pin: #0F140E; color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font-family: 'Manrope', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--olive); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; } /* Jednotný font pro celý web - .serif je historický název pro velké nadpisy. */ .serif { font-weight: 700; letter-spacing: -.02em; } .container { max-width: 1180px; margin: 0 auto; padding: 0 26px; } /* ---------- hlavička ---------- */ /* Relativní kvůli rozbalené nabídce na mobilu, ta se věší pod hlavičku. */ .site-header { position: relative; background: var(--dark); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px 26px; max-width: 1180px; margin: 0 auto; } .site-header__left { display: flex; align-items: center; gap: 30px; } .logo { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--head-text); } .logo:hover { color: var(--head-text); text-decoration: none; } .logo em { font-style: normal; color: var(--leaf); } /* Značka si nese vlastní tmavé pozadí, takže drží na světlém i tmavém motivu. Rozměr je i v atributech, aby si na něj prohlížeč nechal místo před načtením. Zaoblení se tu nenastavuje, rohy má zaoblené samo SVG a druhý ořez by je usekl. */ .logo__mark { display: block; width: 37px; height: 37px; } .site-nav { display: flex; gap: 4px; font-size: 14px; font-weight: 500; } .site-nav__group { position: relative; } .site-nav__link { display: inline-block; padding: 8px 11px; border-radius: 8px; color: var(--head-muted); white-space: nowrap; } .site-nav__link:hover { color: #FFFFFF; background: rgba(255, 255, 255, .10); text-decoration: none; } .site-nav__link.is-active { color: #FFFFFF; background: rgba(255, 255, 255, .12); } .site-nav__group.has-items > .site-nav__link::after { content: ' ⌄'; opacity: .6; } .site-nav__drop { position: absolute; /* Žádná mezera mezi položkou a podmenu, jinak myš cestou ven zavře nabídku. Odsazení dělá průhledný horní padding, který je pořád součástí hover plochy. */ top: 100%; padding-top: 12px; left: 0; z-index: 40; min-width: 230px; display: none; } .site-nav__drop > div { padding: 6px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 18px 40px -18px rgba(38, 56, 42, .5); } /* Otevírá hover, fokus z klávesnice i klepnutí na dotykovém zařízení. */ .site-nav__group:hover > .site-nav__drop, .site-nav__group:focus-within > .site-nav__drop, .site-nav__group.is-open > .site-nav__drop { display: block; } .site-nav__drop a { display: block; padding: 8px 10px; border-radius: 7px; font-size: 14px; color: var(--ink); } .site-nav__drop a:hover { background: var(--chip); text-decoration: none; } .site-nav__drop a.is-active { background: var(--chip); font-weight: 600; } .site-header__right { display: flex; align-items: center; gap: 10px; } .site-search { width: 260px; padding: 8px 12px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .10); font-size: 14px; font-family: inherit; color: var(--head-text); } .site-search::placeholder { color: var(--head-placeholder); } .btn-places { padding: 8px 13px; border-radius: 8px; background: var(--leaf); color: var(--dark); font-size: 13.5px; font-weight: 600; white-space: nowrap; } .btn-places:hover { color: var(--dark); text-decoration: none; } /* Tlačítko nabídky. Na širokém displeji není potřeba, nabídka je rozepsaná v liště. */ .site-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 40px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .10); cursor: pointer; } .site-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--head-text); } /* ---------- obecné karty ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; } /* ---------- homepage ---------- */ .home { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; padding-bottom: 30px; } .home__top { display: grid; grid-template-columns: 340px 1fr; gap: 18px; } .home__left { display: flex; flex-direction: column; gap: 14px; } /* Karta v levém sloupci dorovná jeho výšku. Mřížka výš sice oba sloupce natáhne na stejnou výšku, ale samotné kartě uvnitř to nestačí - zůstala by ve své přirozené výšce a pod ní by zela mezera. Odkaz na dlouhodobou předpověď se díky `margin-top: auto` odsune na spodní hranu. */ .home__left > .card { flex: 1; display: flex; flex-direction: column; } /* Mapa předpovědi v pravém sloupci úvodní stránky. Karta uvnitř roste do výšky sloupce vlevo, aby oba skončily zároveň. */ /* Radar na úvodní stránce. Sedí níž než mapa předpovědi a odpovídá na jinou otázku, proto má vlastní nadpis. */ .home-radar { padding: 16px 18px; margin-top: 18px; } /* Nebezpečí požáru u destinace. Barva levého pruhu roste se stupněm, protože rozdíl mezi vysokým a mimořádným je pro čtenáře podstatný. */ .fire { padding: 14px 16px; border-left: 3px solid var(--muted); } .fire--3 { border-left-color: #E6AC00; } .fire--4 { border-left-color: #D97010; } .fire--5 { border-left-color: #AD060E; } .fire--6 { border-left-color: #3A0015; } .fire__title { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .fire__level { display: block; margin-top: 2px; font-size: 17px; } .fire__note { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; } /* Naměřená zpráva z letiště u destinace. Odlišená od karty s předpovědí, protože je to jediný skutečně naměřený údaj na stránce. */ .metar { padding: 16px 18px; } .metar__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .metar__title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .metar__place { font-weight: 600; } .metar__temp { font-size: 30px; font-weight: 700; line-height: 1.1; } .metar__list { margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13.5px; } .metar__list li { padding: 1px 0; } .metar__note { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; } /* Mapa předpovědi v pravém sloupci úvodní stránky. Oba sloupce končí zároveň: mřížka je natáhne na výšku toho vyššího (výchozí `align-items: stretch`) a karta uvnitř tu výšku dorovná přes `flex: 1`. Mapa se v ní vystředí, aby při dorovnání nezůstala přilepená nahoře. */ .home__map { display: flex; flex-direction: column; } .home__map .temp-map { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; } .home__map .temp-map__svg { width: 100%; } /* Na úvodní stránce je mapa menší, takže se z popisků vypouští název kraje a zůstává ikona s teplotou. Se jménem by se při té velikosti překrývaly. */ .temp-map--compact .region-label__temp { font-size: 15px; } .temp-map--compact .region-label__disc { r: 15; } /* aktuální počasí */ .now { padding: 20px; } /* Používá karta u destinace, kde je v hlavičce jen jméno místa. */ .now__head { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); } /* Přepínač lokality za jménem místa. Menší písmo, aby se četl jako doplněk, ne jako druhá půlka názvu. Vlastní řádek by bral výšku, které je na mobilu škoda, a přitom je to úkon na jedno použití. */ .now__change { color: var(--olive); font-weight: 600; font-size: .85em; white-space: nowrap; } .now__change:hover { text-decoration: underline; } /* Dva bloky vedle sebe: vlevo místo s teplotou, vpravo obloha. */ .now__main { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; } .now__place-temp { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Jméno místa a přepínač jsou na kartě jen na mobilu. Na širokém okně je totéž v hlavičce jako .btn-places a dvakrát pod sebou to být nemusí. Zapíná se zpátky ve stejné mezi (900 px), ve které hlavička to tlačítko schovává - jinak by vznikla šířka, kde není ani jedno. */ .now__place { display: none; font-size: 13.5px; color: var(--muted); } .now__temp { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); } /* Jméno dne nad číslem a sousední den pod ním. Řádka pod číslem si drží výšku i prázdná, aby karta neposkakovala ve chvíli, kdy zítřek ještě není spočítaný. */ .now__when { font-size: 13.5px; color: var(--muted); } .now__aside { min-height: 1.35em; font-size: 13.5px; color: var(--muted); } /* Piktogram a pod ním popis oblohy. Vedle sebe se popis v úzkém sloupci lámal uprostřed na dva řádky. */ .now__sky { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; } .now__sky .wi { margin: 0 auto; } .now__desc { font-size: 14px; color: var(--muted); } /* Vystředění jen pod piktogramem. Karta u destinace má popis samostatně pod sebou a tam patří doleva jako běžný text. */ .now__sky .now__desc { text-align: center; } .now__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; font-size: 13px; } .now__stat { display: flex; justify-content: space-between; padding: 7px 10px; background: var(--chip); border-radius: 7px; } .now__stat dt { color: var(--muted); } .now__stat dd { margin: 0; font-weight: 600; color: var(--ink); } /* Krátká varianta popisku je jen pro úzké displeje, viz media dole. */ .now__stat-short { display: none; } /* Teplota teď. Je to doplněk k velkému číslu s dnešním maximem, ne rovnocenný údaj, takže je v textu vedle piktogramu. */ .now__current { color: var(--muted); } /* Odkaz na dlouhodobou předpověď přes celou šířku karty. Čte se jako pokračování toho, co karta ukazuje, proto je oddělený linkou a ne v řadě s údaji. `margin-top: auto` ho drží u spodní hrany. Karta se natahuje na výšku sloupce s mapou, takže bez toho by odkaz zůstal přilepený pod údaji a pod ním by zbyla prázdná plocha. Když se karta nenatahuje, chová se auto jako nula a odstup dělá odsazení s linkou. */ .now__more { display: block; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft, rgba(38, 56, 42, .12)); color: var(--olive); font-size: 13.5px; font-weight: 600; text-align: center; text-decoration: none; } .now__more:hover { text-decoration: underline; } /* shoda modelů */ .models { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .models__head { display: flex; align-items: center; justify-content: space-between; } .models__title { font-size: 13.5px; font-weight: 700; color: var(--ink); } .models__score { font-size: 12.5px; font-weight: 600; color: var(--olive); } /* Modely vedle sebe, ne pod sebou. Karta je nově přes celou šířku stránky, takže sloupec proužků pod sebou by na desktopu zabíral jednu šestinu a zbytek by zel prázdnotou. Vedle sebe se navíc čtou jako srovnání, což je jejich smysl. */ .models__rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px 18px; font-size: 13px; } .models__row { display: flex; align-items: center; gap: 10px; } .models__name { width: 64px; color: var(--muted); } .models__track { flex: 1; height: 6px; border-radius: 3px; background: var(--track); } .models__bar { height: 6px; border-radius: 3px; background: var(--olive); } .models__bar--low { background: var(--leaf); } .models__temp { width: 34px; text-align: right; font-weight: 600; color: var(--ink); } .models__note { font-size: 12.5px; color: var(--muted); } /* radar */ .radar { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--card); } /* Plocha mapy. Nese poměr stran a je vztažným bodem pro všechno, co v mapě leží absolutně - popisek času, zdroj, hláška o načítání. Časová osa je až za ní. */ .radar__stage { position: relative; } .radar__map { height: 100%; min-height: 430px; background-image: repeating-linear-gradient(135deg, var(--map-a) 0 10px, var(--map-b) 10px 20px); } .radar__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: linear-gradient(var(--card), rgba(250, 252, 253, 0)); } .radar__layers { display: flex; gap: 6px; flex-wrap: wrap; } .radar-chip { padding: 6px 11px; border-radius: 7px; background: var(--card); border: 1px solid var(--border); color: var(--ink); font-size: 12.5px; } .radar-chip:hover { text-decoration: none; } .radar-chip.is-active { background: var(--dark); border-color: var(--dark); color: var(--head-text); font-weight: 600; } .radar-chip--model { font-weight: 600; } .radar__placeholder { position: absolute; top: 200px; left: 0; right: 0; text-align: center; font-family: ui-monospace, monospace; font-size: 12px; color: var(--faint); } .radar__timeline { padding: 11px 14px; background: var(--card); border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .radar__play { width: 28px; height: 28px; border-radius: 14px; border: 0; background: var(--dark); color: var(--head-text); font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Tlačítko pro načtení celé animace dopředu. Stojí vedle přehrávání, ale je vedlejší, proto obrys místo plné výplně. Během stahování v něm běží procenta, takže musí unést dva znaky a nesmí se u toho roztahovat. */ .radar__preload { min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; border: 1px solid var(--border); background: transparent; color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; cursor: pointer; } .radar__preload[hidden] { display: none; } .radar__preload:disabled { cursor: default; color: var(--faint); } .radar__track { flex: 1; height: 5px; border-radius: 3px; background: var(--map-a); position: relative; } .radar__progress { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--olive); } .radar__handle { position: absolute; top: -4px; width: 13px; height: 13px; border-radius: 7px; background: var(--dark); } .radar__time { font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--ink); } .radar__range { font-size: 12.5px; color: var(--muted); } .radar__attribution { position: absolute; right: 0; bottom: 0; padding: 4px 9px; border-radius: 6px 0 0 0; background: rgba(252, 253, 249, .92); font-size: 11px; color: var(--text); } .radar__attribution a { font-weight: 600; } /* shrnutí */ .summary { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 10px; background: var(--dark); } .summary__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); white-space: nowrap; } .summary__text { margin: 0; font-size: 15px; color: var(--foot-light); line-height: 1.4; } .summary__link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--leaf); white-space: nowrap; } .summary__link:hover { color: var(--leaf); } /* stavové karty */ .status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .status-card { border-radius: 11px; padding: 14px 16px; } .status-card__label { font-size: 12.5px; color: var(--muted); } .status-card__value { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 3px; } .status-card__value--warn { color: var(--warn); } .status-card__meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; } /* výhled na 14 dní */ .outlook { overflow: hidden; } .outlook__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); } .outlook__title { font-size: 13.5px; font-weight: 700; color: var(--ink); } .outlook__meta { font-size: 12.5px; color: var(--muted); } .outlook__days { display: flex; } .outlook__day { flex: 1; padding: 13px 8px; text-align: center; border-right: 1px solid rgba(38, 56, 42, .08); } .outlook__day:last-child { border-right: 0; } /* Nejistota se značí u konkrétního údaje, ne přes celý sloupec. Ztlumení celého dne vzniklo, když byl výhled na pět dní a nejistý býval nanejvýš poslední. Se čtrnácti dny byla vybledlá většina karty. Navíc se teplota a srážky chovají jinak: modely se běžně shodnou na stupních a rozejdou na dešti, takže ztlumit kvůli tomu i teplotu by lhalo o tom, co vlastně nevíme. */ .outlook__day.is-uncertain { opacity: .85; } .outlook__icon.is-unsure { opacity: .5; } .outlook__high.is-unsure { color: var(--muted); font-weight: 600; } .outlook__name { font-size: 12.5px; font-weight: 600; color: var(--ink); } .outlook__icon { display: flex; justify-content: center; margin: 6px auto; } /* SVG ikony počasí (externí sprite public/images/weather-icons.svg) */ .wi { display: block; } .now__icon { padding-bottom: 4px; } .outlook__high { font-size: 15px; font-weight: 700; color: var(--ink); } /* Noční minimum bylo v --faint, což je nejsvětlejší odstín, jaký máme. Vedle tučného denního maxima z něj byl skoro nečitelný šedivý přívěsek, přitom je to plnohodnotný údaj. --muted je o stupeň tmavší a od maxima ho odliší velikost. */ .outlook__low { font-size: 12.5px; color: var(--muted); } .outlook__pop { font-size: 11.5px; color: var(--olive); margin-top: 4px; } .outlook__day.is-uncertain .outlook__pop { color: var(--muted); font-style: italic; } /* kam jet (affiliate vrstva) */ .travel { display: grid; grid-template-columns: 1fr 320px; gap: 16px; } .travel__finder { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .travel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .travel__title { font-size: 16.5px; font-weight: 700; color: var(--ink); } .travel__filter { font-size: 13.5px; color: var(--muted); margin-top: 3px; } .btn-dark { padding: 8px 14px; border-radius: 8px; background: var(--dark); color: var(--head-text); font-size: 13px; font-weight: 600; white-space: nowrap; } .btn-dark:hover { color: var(--head-text); text-decoration: none; } .travel__table { display: flex; flex-direction: column; gap: 1px; background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; } .travel__row { display: grid; grid-template-columns: 1.4fr .8fr .8fr .8fr 1.4fr; gap: 12px; align-items: center; padding: 11px 14px; background: var(--card); font-size: 14px; } .travel__row--head { padding: 9px 14px; background: var(--chip); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } .travel__dest { font-weight: 600; color: var(--ink); } .travel__pop { color: var(--olive); } .travel__offers { text-align: right; font-weight: 600; color: var(--olive); } .travel__tip { background: var(--dark); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .travel__tip-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); } .travel__tip-title { font-size: 17px; font-weight: 600; color: var(--head-text); line-height: 1.35; } .travel__tip-text { font-size: 13.5px; color: var(--head-muted); line-height: 1.5; } .travel__tip-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; } .btn-leaf { display: block; padding: 10px 0; border-radius: 8px; background: var(--leaf); color: var(--dark); font-size: 13.5px; font-weight: 600; text-align: center; } .btn-leaf:hover { color: var(--dark); text-decoration: none; } .btn-ghost { display: block; padding: 10px 0; border-radius: 8px; background: rgba(255, 255, 255, .10); color: #EEF2EA; font-size: 13.5px; font-weight: 600; text-align: center; } .btn-ghost:hover { color: #EEF2EA; text-decoration: none; } /* meta řádek pod obsahem */ .home__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--faint); } /* mobilní spodní navigace */ .bottom-nav { display: none; justify-content: space-between; padding: 11px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); font-size: 12.5px; color: var(--muted); } .bottom-nav a { color: var(--muted); } /* ---------- stránka /zdroje/ ---------- */ /* Stránka zdrojů má vlastní třídu, ale stejnou stavbu jako .page - odsazení nahoře proto drží stejné, ať se to nerozjede. */ .sources { display: flex; flex-direction: column; gap: 26px; padding-top: 20px; padding-bottom: 30px; } .sources__intro { max-width: 760px; display: flex; flex-direction: column; gap: 12px; } .breadcrumb { font-size: 12.5px; color: var(--faint); } .breadcrumb a { color: var(--faint); } .sources__title { font-size: 38px; line-height: 1.1; color: var(--ink); } .sources__lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; } .sources__table { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .sources__row { display: grid; grid-template-columns: 1.1fr 1.5fr 1.1fr 1.1fr; gap: 16px; padding: 15px 18px; background: var(--card); font-size: 14px; line-height: 1.5; } .sources__row--head { padding: 11px 18px; background: var(--chip); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .sources__row--special { background: var(--chip-2); } .sources__name { font-weight: 600; color: var(--ink); } .sources__usage { color: var(--text); } .sources__license a { font-weight: 600; } .sources__license--consent { color: var(--amber); font-weight: 600; } /* Oddělovač mezi dvěma licencemi u jednoho zdroje. Nesmí být tučný jako názvy licencí kolem něj, jinak čárka splyne s odkazem. */ .sources__license-sep { font-weight: 400; color: var(--muted); } .sources__attribution { color: var(--muted); } /* Seznam licencí. Každá jednou, s tím, co po nás vyžaduje. Z tabulky zdrojů to poznat nejde, protože se tam licence opakují. */ .sources__licenses { margin: 32px 0; } .sources__licenses h2 { margin: 0 0 6px; font-size: 21px; } .sources__licenses-lead { margin: 0 0 16px; font-size: 14px; color: var(--muted); } .sources__licenses-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; } .sources__licenses-list li { padding: 16px 18px; background: var(--chip-2); border-radius: 10px; } .sources__licenses-list h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); } .sources__licenses-list p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text); } .sources__licenses-which { margin-top: 8px !important; font-size: 12.5px !important; color: var(--muted) !important; } @media (max-width: 700px) { .sources__licenses-list { grid-template-columns: 1fr; } } .sources__cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .sources__card { padding: 20px; } .sources__card h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; color: var(--ink); } .sources__card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); } .sources__card .contact { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--olive); } .sources__map-note { display: flex; gap: 16px; align-items: stretch; } .sources__map-text { flex: 1; background: var(--dark); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; } .sources__map-text .label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); } .sources__map-text p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--foot-light); } .sources__map-demo { width: 420px; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); } .sources__map-demo .map { height: 150px; background-image: repeating-linear-gradient(135deg, var(--map-a) 0 10px, var(--map-b) 10px 20px); } .sources__map-demo .badge { position: absolute; top: 10px; left: 12px; padding: 5px 10px; border-radius: 7px; background: rgba(252, 253, 249, .94); font-size: 12px; font-weight: 600; color: var(--ink); } /* ---------- patička ---------- */ .site-footer { background: var(--dark); margin-top: auto; } .site-footer__inner { max-width: 1180px; margin: 0 auto; padding: 34px 26px 22px; display: flex; flex-direction: column; gap: 26px; } .site-footer__cols { display: grid; /* Čtyři dráhy na čtyři bloky: značka a tři sloupce odkazů. Pátá dráha tu dřív byla navíc, žádný blok do ní nepadl, ale svůj podíl šířky si vzala - patička proto končila zhruba 180 px před pravým okrajem. */ grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 26px; } .site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; } /* flow-root uzavře plovoucí značku dovnitř bloku. Bez toho by float vyčníval ven a podtekl pod sousední sloupce patičky. */ .site-footer__about { display: flow-root; max-width: 400px; } .site-footer__mark { float: left; width: 146px; height: 146px; margin: 2px 16px 2px 0; } .site-footer__brand p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--head-muted); } .btn-newsletter { display: inline-block; margin-top: 4px; padding: 7px 12px; border-radius: 7px; background: var(--leaf); color: var(--dark); font-size: 12.5px; font-weight: 600; align-self: flex-start; } .btn-newsletter:hover { color: var(--dark); text-decoration: none; } .site-footer__col { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; } .site-footer__col a { color: var(--head-muted); } .site-footer__col a:hover { color: var(--head-text); text-decoration: none; } .site-footer__col-title { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--foot-label); } .site-footer__legal { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .13); } .site-footer__attribution { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--foot-muted); max-width: 1000px; } .site-footer__attribution strong { font-weight: 400; color: var(--foot-light); } .site-footer__attribution a { color: var(--leaf); } .site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12.5px; color: var(--foot-label); } /* ---------- responzivní chování (mobilní varianta 4a) ---------- */ @media (max-width: 900px) { .site-header__inner { padding: 9px 18px; } .site-nav, .site-search, .btn-places { display: none; } /* Protějšek k řádku výš: co zmizí z hlavičky, vrátí se na kartu předpovědi. */ .now__place { display: block; } .site-burger { display: flex; } /* Na telefonu o něco menší než na desktopu. Značka je i tak vyšší než řádek textu, takže hlavičku o pár pixelů zvedne - vejde se sem, protože vedle zbyl jen hamburger, výběr lokality je odsud pryč. */ .logo__mark { width: 32px; height: 32px; } .logo { gap: 8px; } /* Rozbalená nabídka. Panel přes celou šířku pod hlavičkou, podnabídky rozepsané pod svými skupinami - na dotyku je rozklikávání o jedno klepnutí navíc. */ .site-nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 50; max-height: calc(100vh - 64px); overflow-y: auto; padding: 6px 18px 16px; background: var(--dark); border-top: 1px solid rgba(255, 255, 255, .12); } .site-nav.is-open .site-nav__group { position: static; } .site-nav.is-open .site-nav__link { display: block; padding: 11px 6px; font-size: 15px; } .site-nav.is-open .site-nav__group.has-items > .site-nav__link::after { content: ''; } .site-nav.is-open .site-nav__drop { display: block; position: static; min-width: 0; padding: 0 0 6px 14px; } .site-nav.is-open .site-nav__drop > div { padding: 0; background: none; border: 0; box-shadow: none; } .site-nav.is-open .site-nav__drop a { padding: 9px 6px; color: var(--head-muted); } .site-nav.is-open .site-nav__drop a.is-active { background: none; color: #FFFFFF; } .container { padding: 0 16px; } /* Dvanáct, ne třináct. Rozestupy na mobilu se drží násobků čtyř, jinak se hodnoty v CSS pomalu rozjedou a nikdo pak neví, co je záměr a co překlep. */ .home { gap: 12px; padding-top: 14px; padding-bottom: 26px; } .home__top { grid-template-columns: 1fr; gap: 12px; } .now { padding: 16px 18px; } .now__temp { font-size: 56px; } /* Odkaz na dlouhodobou předpověď na mobilu odpadá i s linkou nad ním. Dohromady je to skoro padesát pixelů za odkaz, který je stejně v nabídce. */ .now__more { display: none; } /* Popisek a hodnota vedle sebe se na úzké obrazovce lámaly na dva řádky. Hodnota jde proto pod popisek a tím se chip zúžil natolik, že se vejdou tři vedle sebe. Nejširší obsah je "1022 hPa", asi 55 px, takže i na displeji širokém 320 px zbývá rezerva. Údajů je deset, tedy čtyři řádky. Písmo i rozestupy jsou proto zhruba o pětinu menší než na desktopu - dost na to, aby se ušetřil celý řádek, a pořád nad hranicí čitelnosti. Míň už ne, popisky jako "Nejnižší ranní" musí zůstat přečitatelné bez přimhouření očí. */ .now__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; font-size: 11px; } .now__stat { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 5px 7px; } .now__stat dd { font-size: 12px; } /* Devět chipů zaplní přesně tři řádky, desátý by otevřel čtvrtý kvůli jednomu údaji. Co se schová, rozhoduje PHP příznakem `wide_only`. */ .now__stat--wide { display: none; } /* Dlouhý popisek ustoupí zkratce, jinak by se zalomil a rozhodil výšku řádku. */ .now__stat-long { display: none; } .now__stat-short { display: inline; } .models { display: none; } .radar__map { min-height: 210px; } .radar__placeholder { top: 50%; transform: translateY(-50%); } /* Řada zemí se na úzkém displeji posouvá do strany, místo aby se zalomila do čtyř řádků. Dřív se tu chipy od třetího dál prostě schovávaly, jenže selektor nerozlišoval řadu zemí od řady s délkou animace - a v té je prvním potomkem popisek, takže na telefonu mizely volby 6 h a 24 h. Zbyly výchozí dvě hodiny a delší animace se nedala zapnout jinak než ručním ?h= v adrese. Ze zemí byly ze stejného důvodu dostupné jen první dvě. */ .radar-countries { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .radar-countries::-webkit-scrollbar { display: none; } .radar-countries .radar-chip { flex: 0 0 auto; } .summary__link { display: none; } .status-grid { grid-template-columns: 1fr 1fr; gap: 8px; } /* Mapa výstrah se vejde do šířky displeje, takže se poloměr i písmo zmenší spolu s ní - patnáct jednotek z tisícové plochy vyjde na necelých šest pixelů. Dvojnásobek je čitelný. Tady přebíjení nehrozí, poloměr a velikost písma jsou v SVG jako atributy a ty CSS poráží vždycky. */ .alert-map__badge { r: 30px; } .alert-map__count { font-size: 30px; } /* Čtrnáct sloupců vedle sebe se na telefon nevejde a vodorovné rolování se špatně trefuje prstem, navíc není poznat, že tam další dny vůbec jsou. Den je proto jeden řádek: vlevo název s ikonou, vpravo teploty a srážky pod sebou v ose. */ .outlook__days { display: block; } .outlook__day { display: flex; align-items: center; gap: 10px; padding: 9px 14px; text-align: left; border-right: 0; border-bottom: 1px solid var(--border-soft); } .outlook__day:last-child { border-bottom: 0; } .outlook__name { min-width: 2.6em; } .outlook__date { color: var(--faint); } /* Odtlačí teploty na pravý okraj řádku. */ .outlook__icon { margin: 0 auto 0 0; } .outlook__high { min-width: 2.6em; text-align: right; } .outlook__low { min-width: 2.6em; text-align: right; } .outlook__pop { min-width: 4.2em; margin-top: 0; text-align: right; } .travel { grid-template-columns: 1fr; } .travel__row { grid-template-columns: 1.4fr .8fr .8fr .8fr; } .travel__row--head span:last-child, .travel__offers { display: none; } .home__meta { flex-direction: column; align-items: flex-start; gap: 4px; } .bottom-nav { display: flex; } .sources__row, .sources__cards { grid-template-columns: 1fr; } .sources__row { gap: 4px; } .sources__row--head { display: none; } .sources__title { font-size: 30px; } .sources__map-note { flex-direction: column; } .sources__map-demo { width: 100%; } .site-footer__cols { grid-template-columns: 1fr 1fr; } /* Značka s větou přes celou šířku. V polovině dvousloupcové patičky by na text vedle 72px obrázku zbylo pár desítek pixelů a slova by se lámala po slabikách. */ .site-footer__brand { grid-column: 1 / -1; } .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; } } /* Mapy. Obrysy, obtahy bodů a popisky se řídí motivem - v tmavém by bílé obtahy a světle šedé kraje svítily jako reflektor. Barvy samotných dat (stav vody, index ovzduší, teplotní pole) se nemění, ty nesou význam. */ .map-regions { fill: var(--map-b); stroke: var(--map-outline); stroke-width: 1.8; } .map-dot { stroke: var(--card); } .map-dot--solid { stroke: var(--card); } .map-value { fill: var(--card); } .map-label { fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; } .map-outline-under { stroke: var(--map-shadow); } .map-outline-over { stroke: var(--map-outline-strong); } .map-dot--hollow { fill: var(--card); stroke: var(--ink); } .map-value--hollow { fill: var(--ink); } /* Extrapolace radaru. Odhad musí být poznat na první pohled, i když animace běží - proto se snímek zesvětlí a v odznaku přibude slovo. Hodnota je odvozená od základní průsvitnosti snímku, ne absolutní: kdyby zůstala nad ní, odhad by byl výraznější než měření a znamenalo by to pravý opak. */ .radar.is-forecast .radar__img { opacity: .45; } .radar__estimate { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: var(--amber); color: #FFFFFF; font-size: 11px; font-weight: 700; } .radar-nowcast { border-left: 3px solid var(--amber); padding-left: 12px; } /* Destinace: popis vlevo, počasí v postranním sloupci. Text je hlavní obsah, proto dostane víc místa a delší řádek než tabulky vedle něj. */ .dest-layout { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 22px; align-items: start; } .dest-main { display: flex; flex-direction: column; min-width: 0; } /* Rozestupy mezi bloky řídí sekce na konci souboru, viz "svislé rozestupy". */ /* Postranní sloupec se roluje s obsahem. Ukotvený byl při delší stránce pořád na očích a s trojicí partnerských karet by zabíral výhled na text. */ .dest-side { display: flex; flex-direction: column; gap: 14px; } /* Souvislý text má jiné potřeby než tabulka: delší proklad, klidnější barvu a řádek, který se nerozjede přes celou šířku. Přes 75 znaků se čtenáři ztrácí návaznost. */ .dest-body { padding: 32px 36px; } .dest-body p { /* Bez umělé šířky. Text se zalomí podle prostoru, který mu dá rozvržení stránky - pevných šedesát šest znaků končilo uprostřed sloupce a vypadalo to jako chyba. */ margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--text); /* Zarovnání do bloku dává textu tvar sloupce, dělení slov brání dírám mezi slovy. */ text-align: justify; hyphens: auto; } /* Odstavcová zarážka, jak se sází česky. Odstavce se dosud lišily jen mezerou, což se v delším textu ztratí a čte se to jako jeden blok. Zarážka je zřetelná i tehdy, když odstavec začne v půlce obrazovky, a stačí k ní menší mezera než předtím. */ .dest-body p + p { margin-top: 10px; text-indent: 1.8em; } /* První odstavec je vstup do textu, proto je větší, tmavší a bez zarážky - před ním žádný jiný není, takže by neoddělovala nic. */ .dest-body p:first-child { padding-left: 18px; border-left: 3px solid var(--leaf); margin-bottom: 20px; font-size: 18.5px; line-height: 1.6; color: var(--ink); text-align: left; text-indent: 0; } .dest-body p:last-child { margin-bottom: 0; } /* Praktická část má stejnou třídu dest-body jako popis, takže sazbu dědí a nedá se rozejít. Vlastní má jen zarážku prvního odstavce - nad ním je nadpis, ne perex. */ /* kalendář vhodných měsíců */ .dest-calendar { padding: 18px 22px 14px; } .calendar-grid { margin-top: 10px; } .calendar-row { display: grid; grid-template-columns: 190px repeat(12, 1fr); align-items: center; gap: 3px; } .calendar-row + .calendar-row { margin-top: 4px; } .calendar-label { font-size: 13.5px; color: var(--ink); line-height: 1.25; } .calendar-label em { display: block; font-style: normal; font-size: 11.5px; color: var(--faint); } .calendar-cell { height: 22px; border-radius: 4px; background: var(--track); } .calendar-cell.is-on { background: var(--olive); } .calendar-cell.is-current { outline: 2px solid var(--ink); outline-offset: 1px; } .calendar-cell--head { height: auto; background: none; font-size: 11.5px; color: var(--muted); text-align: center; } @media (max-width: 700px) { /* Na úzké obrazovce jde popisek nad pruh, ne vedle něj. Skrývat samotné měsíce by z tabulky udělalo prázdné místo, a právě ony jsou tu ta informace. */ .calendar-row { grid-template-columns: repeat(12, 1fr); gap: 2px; } .calendar-label { grid-column: 1 / -1; margin-top: 10px; } .calendar-row--head > span:first-child { display: none; } } /* Stejné odsazení jako popis místa, aby na sebe oba bloky navazovaly sloupcem textu. Nadpis nechávám ve výchozí velikosti sekce, stejně jako "Oblasti" pod ním. */ .dest-practical .section-title { margin: 0 0 14px; } .dest-practical p:first-of-type { text-indent: 1.8em; } .dest-practical .page__note { margin-top: 14px; } .now--side { padding: 18px 20px; } .now--side .now__head { margin-bottom: 2px; } .now--side .now__main { margin-top: 0; justify-content: space-between; } .now--side .now__temp { font-size: 46px; } .now--side .now__desc { display: block; padding: 6px 0 0; font-size: 13.5px; } .dest-facts { padding: 18px 20px; } .dest-side .page__card h3 { font-size: 14px; letter-spacing: .01em; } .dest-side .related__links { margin-top: 10px; } .dest-side .page__card p { margin-top: 10px; font-size: 13.5px; } @media (max-width: 900px) { .dest-layout { grid-template-columns: 1fr; } .dest-body { padding: 22px; } .dest-body p { font-size: 16px; text-align: left; } .dest-body p + p, .dest-practical p:first-of-type { text-indent: 1.4em; } /* Perex bez linky a odsazení. Na širokém sloupci linka odděluje vstup do textu od zbytku, na telefonu ale ukrojí z už tak úzkého řádku dalších jednadvacet pixelů. Perex se pozná podle většího a tmavšího písma i bez ní. */ .dest-body p:first-child { padding-left: 0; border-left: 0; } } /* podmínky pro aktivity */ .dest-row--act { grid-template-columns: 1.5fr repeat(5, 1fr); } .act { font-weight: 600; font-size: 13px; } .act em { display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); } .act--temp { color: var(--ink); font-weight: 700; } .act--temp em { font-style: normal; font-weight: 400; color: var(--muted); } .criteria { margin: 0; display: grid; gap: 12px; } .criteria dt { font-weight: 700; color: var(--ink); } .criteria dd { margin: 2px 0 0; color: var(--text); font-size: 14px; } /* skládačka widgetu */ .widget-preview { margin: 16px 0; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--chip); } .widget-preview iframe { display: block; max-width: 100%; border-radius: 8px; background: var(--card); } .widget-code { display: block; margin-bottom: 12px; } .widget-code span { display: block; margin-bottom: 5px; font-size: 12.5px; color: var(--muted); } .widget-code textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; resize: vertical; } .widget-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .widget-copied { font-size: 13px; color: var(--olive); font-weight: 600; } .dest-row--api { grid-template-columns: 1fr 2fr; align-items: start; } .dest-row--api code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } /* Moje místa - pruh uložených lokalit. Vykresluje ho JavaScript z localStorage, takže bez uložených míst zůstává prázdný. Pravidlo pro hidden tu musí být: display z třídy je autorský styl a přebil by display:none, který na hidden dává prohlížeč sám. Bez toho drží prázdný pruh na úvodní stránce mezeru. */ .myplaces { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .myplaces[hidden] { display: none; } .myplaces__list { display: flex; gap: 8px; flex-wrap: wrap; } .myplace { position: relative; display: flex; align-items: baseline; gap: 7px; padding: 7px 26px 7px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); font-size: 13px; color: var(--ink); } .myplace:hover { border-color: var(--border-strong); text-decoration: none; } .myplace__name { font-weight: 600; } .myplace__temp { font-size: 15px; } .myplace__note { color: var(--muted); font-size: 12px; } .myplace__remove { position: absolute; top: 2px; right: 2px; padding: 2px 5px; border: 0; background: transparent; color: var(--faint); font-size: 11px; line-height: 1; cursor: pointer; } .myplace__remove:hover { color: var(--warn); } /* Tiché tlačítko na světlém pozadí, protějšek .btn-dark. Dřív se jmenovalo .btn-pin podle „uložit místo", jenže ta funkce skončila a název by mátl. */ .btn-quiet { align-self: flex-start; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; } .btn-quiet:hover { border-color: var(--border-strong); color: var(--ink); } /* přepínač motivu v patičce */ .theme-switch { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .theme-switch__label { margin-right: 4px; color: var(--foot-muted); } .theme-switch__btn { padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; background: transparent; font: inherit; font-size: 12px; color: var(--foot-light); cursor: pointer; } .theme-switch__btn:hover { border-color: rgba(255, 255, 255, .34); } .theme-switch__btn.is-active { background: var(--leaf); border-color: var(--leaf); color: var(--dark); font-weight: 600; } /* ---------- statické a placeholder stránky (routy z navigace a patičky) ---------- */ .page { display: flex; flex-direction: column; /* Stejně jako úvodka. Třicet čtyři dělalo nad drobečkovou navigací mezeru, která vypadala jako chyba, protože drobky jsou drobné šedé písmo a nemají co odsazovat. */ padding-top: 20px; padding-bottom: 30px; } /* Rozestupy mezi bloky řídí sekce na konci souboru, viz "svislé rozestupy". */ .page__intro { display: flex; flex-direction: column; gap: 12px; } .page__title { font-size: 38px; line-height: 1.1; color: var(--ink); } /* Perex jde přes celou šířku a láme se podle místa. `text-wrap: pretty` tady byl na škodu - stahoval slova na poslední řádek a dělal zlomy, které v textu nejsou. */ .page__lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); } .tag-soon { display: inline-flex; align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: var(--chip-2); border: 1px solid var(--border); color: var(--amber); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .page__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .page__cards--two { grid-template-columns: repeat(2, 1fr); } .page__card { padding: 20px; } .page__card h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; color: var(--ink); } .page__card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); } .page__card ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--text); } .page__card li { margin: 2px 0; } .page__card .contact { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--olive); } .page__prose { max-width: 760px; display: flex; flex-direction: column; gap: 12px; } .page__prose h2 { margin-top: 14px; font-size: 23px; line-height: 1.2; color: var(--ink); } .page__prose p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); } .page__prose ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.65; color: var(--text); } .page__prose li { margin: 3px 0; } .page__prose strong { color: var(--ink); } .placeholder-box { margin-top: 12px; min-height: 140px; display: flex; align-items: center; justify-content: center; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--chip); color: var(--faint); font-size: 13px; text-align: center; text-wrap: balance; } /* Bez pevné šířky. Sedm set šedesát pixelů lámalo poznámku pod tabulkou na dva řádky uprostřed volného místa a vypadalo to jako chyba sazby. */ .page__note { margin: 0; font-size: 12.5px; color: var(--faint); } /* Chybové stránky 404 a 403. Pětistovka a obecná záloha mají styl vložený ve vlastní šabloně a sem nesahají, viz templates/error/_bare.html.twig. */ .error-code { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } /* Tlačítka stojí vedle sebe a na úzké obrazovce se zalomí pod sebe. Zarovnání na střed svislé osy je kvůli tomu, že .btn-dark a .btn-quiet nemají stejnou výšku. */ .error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } /* .btn-quiet je jinde tlačítko, tady je z něj i odkaz - podtržení by mu nesedělo. */ a.btn-quiet { align-self: auto; } a.btn-quiet:hover { text-decoration: none; } /* Seznamy odkazů v kartách se čtou po řádcích, odrážka i její odsazení jsou zbytečné. */ .page__card ul.error-links { padding-left: 0; list-style: none; } @media (max-width: 900px) { .page__title { font-size: 30px; } .page__cards, .page__cards--two { grid-template-columns: 1fr; } } /* ---------- živý radar (lokální snímky z app:radar:update) ---------- */ /* Poměr stran dodá server podle zdroje (--radar-aspect), ať se nehádá pevná výška. Platí i pro box, který má zatím jen podkladovou mapu a čeká na snímky: podklad i popisek jsou absolutně umístěné, takže bez poměru stran nemá box co ho roztáhne a spadne na nulovou výšku. Ve dvousloupcové mřížce to není vidět, protože ho dorovná sousední sloupec, ale na mobilu radar zmizí. */ .radar--live .radar__stage, .radar:has(.radar__base) .radar__stage { aspect-ratio: var(--radar-aspect, 1.48); min-height: 0; } .radar--live .radar__map { min-height: 0; height: 100%; } .radar__base, .radar__img, .radar__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; } .radar__base { z-index: 0; } /* Snímek je průsvitný, aby byl podklad vidět i tam, kde prší. Mimo srážky je průhledný sám o sobě (bereme větev png_masked), jenže při plošném dešti by jinak z mapy nezbylo nic, podle čeho se zorientovat. Daň za to je posun barev: stupnice v legendě je plná, kdežto na mapě se míchá s podkladem. */ .radar__img { z-index: 1; opacity: .6; } /* Družicové vrstvy leží nad srážkami, ale pod popisky. Oblačnost patří níž než blesky - zataženo je podklad, výboj je událost, kterou nesmí nic překrýt. */ .radar__layer { z-index: 2; pointer-events: none; } .radar__layer[data-layer="oblacnost"] { z-index: 1; } .radar-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .radar-chip--toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .radar-chip--toggle input { accent-color: currentColor; } .radar-layers__note { margin-top: 8px; } /* Snímky s vlastní mapou poskytovatele (bez podkladu) nesmí být roztažené. */ .radar--live:not(:has(.radar__base)) .radar__img { object-fit: contain; background: var(--map-b); } .radar__badge { position: absolute; top: 10px; left: 12px; z-index: 2; padding: 5px 10px; border-radius: 7px; background: rgba(252, 253, 249, .94); font-size: 12px; font-weight: 600; color: var(--ink); } .radar__bar, .radar__attribution, .radar__placeholder { z-index: 2; } .radar-legend { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .radar-legend img { max-width: 100%; height: auto; border-radius: 6px; } /* přepínač zemí na stránce radaru */ .radar-countries { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } /* Radar jako samostatná stránka - omez výšku, ať se vejde na obrazovku. Počítá se 72vh, ne celých 78, protože časová osa už neleží v mapě, ale pod ní a taky něco zabere. */ .radar--page { margin-inline: auto; } .radar--page .radar__stage { max-height: 72vh; } .radar--page.radar--live { width: min(100%, calc(72vh * var(--radar-aspect, 1.48))); } /* ---------- detail obce, vyhledávání a dialog lokality ---------- */ .site-search-form { position: relative; } button.btn-places, button.now__change, button.modal__city { border: 0; font: inherit; cursor: pointer; } button.now__change { background: none; padding: 0; color: var(--olive); font-weight: 600; } /* našeptávač */ .suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(38, 56, 42, .45); overflow: hidden; } .suggest--header { min-width: 260px; } .suggest__item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--border-soft); font: inherit; font-size: 14px; text-align: left; color: var(--ink); cursor: pointer; } .suggest__item:last-child { border-bottom: 0; } .suggest__item:hover, .suggest__item.is-active { background: var(--chip); text-decoration: none; } .suggest__name { font-weight: 600; } .suggest__district { font-size: 12.5px; color: var(--muted); } .suggest__empty { padding: 10px 12px; font-size: 13.5px; color: var(--muted); } /* vyhledávání na /pocasi/ */ .city-search { position: relative; max-width: 460px; margin-bottom: 20px; } .city-search__input { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font: inherit; font-size: 15px; color: var(--ink); } .city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding-bottom: 30px; } .city { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--ink); } .city:hover { text-decoration: none; border-color: var(--leaf); } .city__name { font-weight: 600; } .city__now { display: flex; align-items: center; gap: 6px; margin-left: auto; } .city__temp { font-weight: 700; } /* detail obce */ .detail { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; padding-bottom: 30px; } .detail__intro { display: flex; flex-direction: column; gap: 8px; } .detail__title { font-size: 34px; color: var(--ink); } .detail__place { margin: 0; font-size: 14px; color: var(--muted); } /* Vlevo aktuální stav, vpravo všechno ostatní. Mřížka má schválně jen dvě položky: dokud jich byly tři, spadla třetí do druhé řádky pod levou kartu a vpravo zbylo prázdno přes celou výšku. */ .detail__top { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; } /* Bez pravého sloupce nemá druhá dráha co držet a levá karta by zůstala úzká. */ .detail__top--alone { grid-template-columns: 1fr; } .detail__side { display: flex; flex-direction: column; gap: 12px; } .now--detail { padding: 20px; } .summary--detail { align-items: flex-start; } /* Stavové karty v postranním sloupci. Dvě vedle sebe, ne auto-fit jako na úvodní stránce - ten by je při šířce kolem 800 px srovnal do jedné řady po čtyřech a z popisků typu „Vltava - Praha Malá Chuchle" by zbyly dva znaky na řádek. */ .status-grid--side { grid-template-columns: repeat(2, 1fr); gap: 12px; } .detail__pending { padding: 22px 24px; } .detail__pending h2 { font-size: 19px; margin-bottom: 8px; color: var(--ink); } .detail__pending p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--text); } /* hodinová předpověď */ .hourly { overflow: hidden; } .hourly__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); } .hourly__title { font-size: 13.5px; font-weight: 700; color: var(--ink); } .hourly__meta { font-size: 12.5px; color: var(--muted); } .hourly__scroll { display: flex; overflow-x: auto; } .hourly__hour { flex: 0 0 62px; padding: 12px 6px; text-align: center; border-right: 1px solid rgba(38, 56, 42, .08); font-size: 12.5px; } .hourly__hour.is-daybreak { border-left: 2px solid var(--leaf); } .hourly__time { font-weight: 600; color: var(--ink); white-space: nowrap; } .hourly__icon { display: flex; justify-content: center; margin: 6px 0; } .hourly__temp { font-size: 15px; font-weight: 700; color: var(--ink); } .hourly__precip { color: var(--faint); } .hourly__precip.has-rain { color: var(--olive); font-weight: 600; } .hourly__pop { color: var(--muted); } .hourly__wind { margin-top: 3px; color: var(--muted); } .hourly__gust { color: var(--warn); } .hourly__legend { padding: 9px 16px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--faint); } .outlook__date { font-size: 11.5px; color: var(--faint); } /* dialog lokality */ body.has-modal { overflow: hidden; } .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; background: rgba(32, 48, 31, .55); } /* Atribut hidden musí přebít display:flex výše. */ .modal[hidden], .suggest[hidden] { display: none; } /* ---------- nabídka obnovit stránku ---------- */ /* Ukotvené v rohu okna, ne v obsahu - platí pro celou stránku, ne pro sekci, u které by zrovna stálo. Vrstva 60 je nad hlavičkou (40) a nad našeptávačem (30), ale pod dialogem lokality (100), takže při otevřeném dialogu nekouká zpod ztmavení. Odsazení zdola počítá se safe-area kvůli spodní liště iPhonu v režimu aplikace. Dokud v není viewport-fit=cover, vyjde vložka nulová a zbude šestnáct pixelů - tedy nic se nerozbije a přepnutí je pak na jednom místě. */ .refresh-hint { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--dark); color: var(--head-text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px var(--map-shadow); } .refresh-hint:hover { color: var(--head-text); } /* Atribut hidden musí přebít display:inline-flex výše. */ .refresh-hint[hidden] { display: none; } .modal__card { position: relative; width: min(100%, 520px); max-height: 80vh; overflow-y: auto; padding: 20px 22px 22px; border-radius: 14px; background: var(--card); box-shadow: 0 30px 70px -30px rgba(38, 56, 42, .6); } .modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .modal__title { font-size: 19px; font-weight: 700; color: var(--ink); } .modal__close { background: none; font-size: 16px; color: var(--muted); line-height: 1; padding: 4px; } .modal__input { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font: inherit; font-size: 15px; color: var(--ink); } .suggest--modal { position: static; margin-top: 8px; box-shadow: none; } .modal__label { margin: 18px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .modal__cities { display: flex; flex-wrap: wrap; gap: 7px; } .modal__city { padding: 7px 12px; border-radius: 8px; background: var(--chip); font-size: 13.5px; font-weight: 500; color: var(--ink); } .modal__city:hover { background: var(--leaf); color: var(--dark); } .modal__city.is-active { background: var(--dark); color: var(--head-text); } .modal__note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } @media (max-width: 900px) { .detail__top { grid-template-columns: 1fr; } .detail__title { font-size: 26px; } .city-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .modal { padding: 4vh 12px 12px; } } /* ---------- výstrahy a stavy řek ---------- */ /* Cíl kotvy z mapy. Odsazení odsune seznam od horní hrany okna, takže po odskoku zůstane vidět i spodek mapy a je jasné, odkud se člověk vzal. */ .alert-list { scroll-margin-top: 90px; } .alert-filter { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 12px; } .alert-filter__region { font-size: 17px; font-weight: 700; color: var(--ink); } .alert-filter__count { font-size: 13.5px; color: var(--muted); } .alert-filter__reset { margin-left: auto; font-size: 13px; font-weight: 600; } .alerts { display: flex; flex-direction: column; gap: 12px; } .alert { padding: 16px 18px; border-left: 4px solid var(--leaf); } .alert--2 { border-left-color: #C9A227; } .alert--3 { border-left-color: var(--amber); } .alert--4 { border-left-color: var(--warn); } .alert__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .alert__event { font-size: 16.5px; font-weight: 700; color: var(--ink); } .alert__severity { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .alert__time { margin-top: 4px; font-size: 13px; color: var(--muted); } .alert__text { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--text); } .alert__areas { margin-top: 10px; font-size: 12.5px; color: var(--faint); } .rivers { overflow: hidden; } .rivers__row { display: grid; grid-template-columns: 1.1fr 1.3fr .8fr .8fr .9fr .9fr; gap: 12px; padding: 11px 16px; font-size: 14px; border-bottom: 1px solid var(--border-soft); } .rivers__row:last-child { border-bottom: 0; } .rivers__row--head { background: var(--chip); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .rivers__row.is-flood { background: var(--flood-row); } .rivers__river { font-weight: 600; color: var(--ink); } .rivers__spa { color: var(--olive); } .rivers__row.is-flood .rivers__spa { color: var(--warn); font-weight: 700; } .rivers__at { color: var(--faint); } @media (max-width: 900px) { .rivers__row { grid-template-columns: 1fr 1fr; gap: 4px 12px; } .rivers__row--head { display: none; } } /* časová osa radaru je ovladatelná - dej to najevo */ .radar__track { cursor: pointer; touch-action: none; } /* Klikací plocha je vyšší než čára, ale nesmí roztáhnout ukazatel uvnitř. */ .radar__track::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; } .radar__track:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; } .radar__handle { cursor: grab; } /* přepínač délky animace a dlouhodobá předpověď */ .radar-ranges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; } .radar-ranges__label { font-weight: 600; color: var(--ink); } .radar-ranges__note { color: var(--faint); } .longterm__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .longterm__city { font-size: 20px; font-weight: 700; color: var(--ink); } .longterm__models { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .longterm__models li { display: flex; justify-content: space-between; font-size: 14px; color: var(--text); } /* dlouhodobá předpověď - dny pod sebou */ .days { display: flex; flex-direction: column; gap: 10px; } .day { display: grid; grid-template-columns: 130px 54px 78px 1fr; align-items: center; gap: 14px; padding: 14px 18px; } /* Čárkovaný rámeček zůstává pro dny, kde je nejisté všechno, tedy hlavně pro konec výhledu, který počítá jediný model. Ztlumení celé karty je ale mírnější než dřív: při čtrnácti dnech byla vybledlá většina stránky a čísla se špatně četla. */ .day.is-uncertain { opacity: .92; border-style: dashed; } /* Nejistota u jednoho údaje. Stejné značení jako v krátkém výhledu na úvodní stránce, ať se to napříč webem čte pořád stejně. */ .day__icon.is-unsure { opacity: .5; } .day__high.is-unsure { color: var(--muted); } .day__when { display: flex; flex-direction: column; } .day__name { font-size: 15px; font-weight: 700; color: var(--ink); text-transform: capitalize; } .day__date { font-size: 12.5px; color: var(--muted); } .day__icon { display: flex; justify-content: center; } .day__temps { display: flex; align-items: baseline; gap: 8px; } .day__high { font-size: 22px; font-weight: 700; color: var(--ink); } .day__low { font-size: 15px; color: var(--faint); } .day__text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); } .day__meta { margin-top: 4px; font-size: 12.5px; color: var(--faint); } @media (max-width: 900px) { .day { grid-template-columns: 1fr 44px 70px; gap: 8px 12px; } .day__body { grid-column: 1 / -1; } } /* ---------- destinace ---------- */ .month-switch { display: flex; gap: 5px; flex-wrap: wrap; } .month-switch__item { padding: 6px 11px; border-radius: 7px; background: var(--card); border: 1px solid var(--border); font-size: 12.5px; color: var(--ink); text-transform: capitalize; } .month-switch__item:hover { text-decoration: none; border-color: var(--leaf); } .month-switch__item.is-active { background: var(--dark); border-color: var(--dark); color: var(--head-text); font-weight: 600; } /* Bez margin-bottom, ten se ve flexu jen přičítal ke gapu na .page. */ .dest-table { overflow: hidden; } .dest-row { display: grid; grid-template-columns: 1.4fr 1.2fr .7fr .7fr .9fr .8fr .7fr; gap: 12px; padding: 11px 16px; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--border-soft); } .dest-row:last-child { border-bottom: 0; } a.dest-row:hover { background: var(--chip); text-decoration: none; } .dest-row--head { background: var(--chip); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .dest-row--climate { grid-template-columns: .8fr 2.2fr .7fr .9fr .9fr .9fr; align-items: center; } /* Klima po měsících. Pruh na společném ročním měřítku - čísla se čtou po jednom, ale dvanáct pruhů pod sebou ukáže tvar sezony jedním pohledem. */ .dest-climate { padding: 0 0 6px; } .dest-climate__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; } .climate-bar { position: relative; display: block; height: 20px; } .climate-bar i { position: absolute; top: 6px; height: 8px; min-width: 6px; border-radius: 4px; } .climate-bar b { position: absolute; top: 2px; font-size: 12.5px; font-weight: 600; } .climate-bar__low { left: 0; color: var(--muted); } .climate-bar__high { right: 0; color: var(--ink); } .dest-row--climate.is-current { background: var(--chip-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--leaf); } .dest-row__name { font-weight: 600; } .dest-row__country { color: var(--muted); } .dest-top { display: grid; grid-template-columns: 340px 1fr; gap: 16px; margin-bottom: 16px; align-items: start; } .dest-facts { padding: 18px 20px; } /* Vlajka je hlavička karty, proto sahá až k jejím okrajům - záporné okraje ruší vnitřní odsazení karty. Zaoblení jen nahoře, aby navazovalo na roh karty, a linka dole kvůli vlajkám s bílým pruhem u kraje, které by jinak splynuly s kartou. */ .dest-facts__flag { display: block; width: calc(100% + 40px); height: auto; margin: -18px -20px 14px; border-radius: 11px 11px 0 0; border-bottom: 1px solid var(--border-strong); } .dest-facts__title { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .dest-facts dl { margin: 0; display: flex; flex-direction: column; gap: 8px; } .dest-facts dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .dest-facts dt { color: var(--muted); } .dest-facts dd { margin: 0; font-weight: 600; color: var(--ink); } .finder { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 16px 18px; } .finder__field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); } .finder__field select, .finder__field input[type="text"], .finder__field input[type="search"] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font: inherit; font-size: 14px; color: var(--ink); } .finder__field input::placeholder { color: var(--faint); } .finder__field select:focus, .finder__field input:focus { outline: 2px solid var(--leaf); outline-offset: 1px; } .finder__field em { font-style: normal; color: var(--faint); } .finder button { cursor: pointer; } @media (max-width: 900px) { .dest-top { grid-template-columns: 1fr; } /* Tabulky krajů a evropských měst mají vlastní dvouřádkové rozvržení na konci souboru, tohle plošné pravidlo by jim sebralo denní teplotu. Selektor se span a nth-child je navíc specifičtější než pravidla těch tabulek, takže by vyhrál bez ohledu na pořadí - proto výjimka tady, ne přebíjení tam. */ .dest-row:not(.dest-row--region, .dest-row--europe, .dest-row--compare), .dest-row--climate { grid-template-columns: 1.4fr .7fr .7fr .8fr; gap: 6px 10px; } .dest-row:not(.dest-row--region, .dest-row--europe, .dest-row--compare) > span:nth-child(n+5) { display: none; } .dest-row--climate > span:nth-child(n+5) { display: none; } } /* země a rozcestník */ .country-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .country-list { display: flex; gap: 7px; flex-wrap: wrap; } .country-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); font-size: 13.5px; color: var(--ink); } .country-chip:hover { border-color: var(--leaf); text-decoration: none; } .country-chip span { color: var(--muted); font-size: 12px; } .dest-row__now { display: inline-flex; align-items: center; gap: 5px; } a.travel__row { color: var(--ink); } a.travel__row:hover { background: var(--chip); text-decoration: none; } .related__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .dest-row--compare { grid-template-columns: 1fr .8fr .7fr .8fr .8fr .7fr .8fr; } .dest-row--compare .is-better { font-weight: 700; color: var(--olive); } /* porovnání modelů */ .dest-row--models { grid-template-columns: 1.3fr .7fr .7fr .7fr .8fr; } .dest-row--change { grid-template-columns: 1.3fr .8fr .8fr .8fr .8fr; } .spread--high { color: var(--warn); font-weight: 700; } .spread--low { color: var(--olive); } .diff--up { color: var(--warn); font-weight: 600; } .diff--down { color: var(--olive); font-weight: 600; } .section-title { font-size: 21px; margin: 22px 0 12px; color: var(--ink); } /* historie */ .history-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; } .history-stats div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--chip); border-radius: 8px; } .history-stats span { font-size: 12.5px; color: var(--muted); } .history-stats strong { font-size: 19px; font-weight: 700; color: var(--ink); } .history-stats small { font-size: 12px; color: var(--faint); } .history-picker { display: flex; gap: 10px; align-items: center; margin: 12px 0; flex-wrap: wrap; } .history-picker__input { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font: inherit; font-size: 14px; color: var(--ink); } .history-result__note { margin-top: 10px; font-size: 14px; color: var(--text); } .history-result__loading { color: var(--muted); font-size: 14px; } .dest-row--years { grid-template-columns: .7fr .8fr .9fr .8fr .9fr .8fr .8fr; } .dest-row--klima { grid-template-columns: .7fr .9fr .9fr 1fr .9fr 1fr; } .dest-row--grid { grid-template-columns: .7fr 1.1fr 1fr 1fr; } .dest-row--snow { grid-template-columns: .7fr 1fr 1.1fr 1.1fr; } .country-chip.is-active { background: var(--dark); border-color: var(--dark); color: var(--head-text); } .dest-row--air { grid-template-columns: 1.4fr 1fr .6fr .6fr .6fr .6fr .9fr; } /* encyklopedie pojmů */ .terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 6px; } .term { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; color: var(--ink); } .term:hover { border-color: var(--leaf); text-decoration: none; } .term__title { font-weight: 700; font-size: 15px; } .term__short { font-size: 13.5px; line-height: 1.5; color: var(--text); } .term__body p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--text); } .term__body p:last-child { margin-bottom: 0; } .dest-row--stations { grid-template-columns: 1.6fr .8fr .7fr .6fr .7fr .7fr .6fr; } .extremes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .extremes li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .extremes strong { color: var(--ink); } .extremes small { color: var(--faint); font-size: 12px; } .dest-row--rivers { grid-template-columns: 1.6fr .7fr .9fr 1fr; } .dest-row--profil { grid-template-columns: 1.5fr .8fr .9fr .8fr .6fr .6fr .6fr .9fr; } .dest-row.is-flood { background: var(--flood-row); } .flood-alert { border-left: 4px solid var(--warn); } .dest-row--sea { grid-template-columns: 1.4fr 1.1fr .7fr .7fr .9fr .6fr; } /* teplotní mapa */ .temp-map { padding: 10px; overflow: hidden; } .temp-map svg { display: block; width: 100%; height: auto; border-radius: 8px; } /* Pole modelu leží úplně dole a kreslí se v plné sytosti. Ztlumit ho průhledností by zároveň zploštilo stupnici, takže by se rozdíl mezi 25 a 30 stupni ztratil. Čitelnost obrysů a bodů nad ním proto řeší bílé linky, ne slabší barva pod nimi. */ .temp-map:has(.temp-map__field) { position: relative; } .temp-map__field { position: absolute; inset: 10px auto auto 10px; width: calc(100% - 20px); height: auto; border-radius: 8px; } .temp-map__svg { position: relative; } .temp-map__timeline { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--muted); } .temp-map__timeline .radar__track { flex: 1; } .temp-map__svg .is-hidden { display: none; } .temp-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--muted); } .temp-legend__item { display: inline-flex; align-items: center; gap: 5px; } .temp-legend__title { font-weight: 600; color: var(--dark); } .temp-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } /* grafy */ .chart { display: block; width: 100%; height: auto; } /* Mřížka, popisky os a obtah bodů se řídí motivem, samotné čáry nesou barvu veličiny. */ .chart__grid { stroke: var(--border); } .chart__axis { fill: var(--muted); } .chart__dot-ring { stroke: var(--card); } .chart-card { padding: 16px 18px; } .chart-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .chart-card__title { font-size: 15.5px; font-weight: 700; color: var(--ink); } .chart-card__meta { font-size: 12.5px; color: var(--muted); } .chart-card__note { margin: 8px 0 0; font-size: 14px; color: var(--text); } /* podélný profil řeky - stanice po toku a jejich stav vůči vlastním limitům */ .river-profile { padding: 16px 18px; margin-bottom: 16px; } .river-profile__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .river-profile__title { font-size: 15.5px; font-weight: 700; color: var(--ink); } .river-profile__meta { font-size: 12.5px; color: var(--muted); } .river-profile__svg { display: block; width: 100%; height: auto; overflow: visible; } .river-profile__note { margin: 8px 0 0; font-size: 14px; color: var(--text); } .dest-row--profil { grid-template-columns: 1.2fr .65fr .6fr .75fr .9fr .5fr .5fr .5fr .5fr .75fr; } .water-state { font-weight: 600; } .dest-row.is-current { background: var(--chip-2); } .trend--up { color: var(--warn); font-weight: 600; } .trend--down { color: var(--olive); font-weight: 600; } .modal__note { font-size: 12.5px; color: var(--muted); } .modal__cities { max-height: 220px; overflow-y: auto; } /* mapa výstrah po krajích */ .alert-map { padding: 10px; } .alert-map svg { display: block; width: 100%; height: auto; } .alert-map__region { cursor: pointer; transition: fill-opacity .15s; } .alert-map a:hover .alert-map__region { fill-opacity: .75; } /* mapa měst na úvodce */ .city-map { padding: 14px 16px; } .city-map__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .city-map__title { font-size: 13.5px; font-weight: 700; color: var(--ink); } .city-map__link { font-size: 12.5px; font-weight: 600; } /* Jen samotná mapa, ne ikony počasí v seznamu pod ní. */ .city-map > svg { display: block; width: 100%; height: auto; border-radius: 8px; } .city-map__note { margin-top: 8px; font-size: 12px; color: var(--faint); } /* Seznam krajů. Náhrada mapy na úzké obrazovce, viz komentář v šabloně. */ .city-list { display: none; list-style: none; margin: 0; padding: 0; } .city-list a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-soft); font-size: 14px; color: var(--ink); } .city-list a:hover { text-decoration: none; } .city-list li:last-child a { border-bottom: 0; } .city-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .city-list__max { font-size: 15px; font-weight: 700; } .city-list__min { min-width: 2.6em; text-align: right; color: var(--faint); } /* sdílené popisky */ .tip { position: absolute; z-index: 200; max-width: 280px; padding: 8px 11px; border-radius: 8px; background: var(--dark); color: var(--foot-light); font-size: 12.5px; line-height: 1.45; box-shadow: 0 12px 30px -12px rgba(38, 56, 42, .6); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; transform: translateY(3px); /* Popisky v grafech mají první řádek jako nadpis a pod ním hodnoty na vlastních řádcích, proto se zalomení v textu respektuje. */ white-space: pre-line; } .tip.is-visible { opacity: 1; transform: translateY(0); } /* První řádek nese název měření, ať se dá bublina přelétnout očima. */ .tip__head { display: block; margin-bottom: 2px; font-weight: 700; color: #FFFFFF; } /* Neviditelné pruhy nad grafem, které chytají myš - samotný bod je moc malý cíl. */ .chart__hit { fill: transparent; cursor: crosshair; } .chart__hit:hover + .chart__dot, .chart__hit:focus + .chart__dot { opacity: 1; } .chart__dot { opacity: 0; transition: opacity .1s; pointer-events: none; } [data-tip] { cursor: help; } a[data-tip], button[data-tip] { cursor: pointer; } /* Nadpis úvodky. Kvůli SEO musí na stránce být, ale text nesmí záviset na vybrané lokalitě - ta se drží v prohlížeči a pro vyhledávače je vždycky výchozí. */ .now__h1 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .now__place { font-weight: 600; color: var(--ink); } /* rozcestník destinací */ .dest-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; } .dest-intro__text { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.55; } .dest-intro .btn-dark { flex: none; } /* Bez vlastních okrajů. Rozestupy mezi sekcemi řídí gap na .page, a okraje na potomcích se k němu jen přičítaly - odsud byla mezera kolem pruhu měsíců větší než jinde na stránce, i po tom, co se pruh sám stáhl blíž. */ .dest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .dest-country { display: flex; flex-direction: column; padding: 16px 18px 14px; } .dest-country__name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; } /* Vlajka a název drží u sebe vlevo, počet oblastí odsune automatický okraj vpravo. Samotné space-between by tři prvky rozestřelilo po celé šířce karty. */ .dest-country__name a { color: var(--ink); margin-right: auto; } .dest-country__flag { flex: none; align-self: center; width: 26px; height: auto; border: 1px solid var(--border-strong); border-radius: 2px; } .dest-country__count { flex: none; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); } .dest-country__intro { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--text); } .dest-country__areas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .area-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--chip); color: var(--ink); font-size: 13.5px; } .area-chip span { color: var(--muted); font-size: 12px; } .area-chip:hover { border-color: var(--leaf); text-decoration: none; } @media (max-width: 700px) { .dest-grid { grid-template-columns: 1fr; } .dest-intro { flex-direction: column; align-items: flex-start; } } /* předpověď po krajích */ .dest-row--region { grid-template-columns: 1.5fr 1.1fr 1.5fr .6fr .6fr .8fr; } /* Popisek je vystředěný na souřadnici města, ne zavěšený nad ní. Ikona v kroužku nahoře, teplota pod ní, název kraje dole. Tečka pod popiskem odpadla, sama by zůstala schovaná pod kroužkem a polohu města nese celý popisek. */ .region-label { cursor: default; } .region-label__disc { fill: rgba(255, 255, 255, .88); stroke: rgba(20, 30, 20, .12); } .region-label__temp { font-size: 24px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(20, 30, 20, .55); stroke-width: 3.5px; stroke-linejoin: round; } .region-label__name { font-size: 12px; fill: #fff; paint-order: stroke; stroke: rgba(20, 30, 20, .5); stroke-width: 3px; stroke-linejoin: round; } @media (max-width: 700px) { /* Popisek se zvětší kolem tečky na souřadnici města. Plocha je široká tisíc jednotek a na telefonu se vejde zhruba do třetiny toho v pixelech, takže devatenáctka u teploty vycházela na necelých sedm pixelů. Sedmnáctinásobek z ní dělá dvanáct. Název kraje se schovává, popisek je pak jen ikona a číslo a na hustě obsazené mapě zabírá míň místa. */ .region-label__inner { transform: scale(1.7); transform-origin: 0 0; } .region-label__name { display: none; } /* Mapa Evropy. Značka má na desktopu průměr 30 jednotek z tisícové plochy, na telefonu z toho zbývá jedenáct pixelů, takže je potřeba ji zvětšit. V té velikosti se ale čtyřicet pět měst na plochu nevejde - hustá střední Evropa má osm dvojic měst blíž než čtyřicet jednotek od sebe. Čísla proto na telefonu odpadají a zůstává holý piktogram. Teplotu nese podkladová vrstva barvou a přesnou hodnotu ukáže bublina po klepnutí. Barevný kotouč pod číslem i bílé kolečko pod ikonou mizí taky - bez čísla by kotouč jen duplikoval barvu pod sebou a kolečko zbytečně nafukuje značku, která se má vejít mezi sousedy. Piktogram se posouvá dolů na souřadnici města, protože měl původně sedět nad kotoučem. */ .eu-point__inner { transform: scale(2.5); transform-origin: 0 0; } .eu-point__temp, .eu-point__disc, .eu-point__badge { display: none; } .eu-point__icon { y: -9px; } } /* mapa Evropy */ .temp-map--europe .temp-map__svg { max-width: 820px; margin: 0 auto; display: block; /* Moře jako podklad. Bez něj splývá pevnina s kartou a mapa se čte hůř. */ background: var(--map-sea); border-radius: 8px; } /* S vrstvou teplotního pole musí pozadí zmizet, jinak by ji SVG celou překrylo - obrázek leží pod ním a modrá plocha je neprůhledná. */ .temp-map:has(.temp-map__field) .temp-map__svg { background: none; } .map-countries path { fill: var(--map-b); stroke: var(--map-outline); stroke-width: 1.5; } .eu-point { cursor: default; } .eu-point__disc { stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; } .eu-point__badge { fill: rgba(255, 255, 255, .9); stroke: rgba(20, 30, 20, .12); } .eu-point__temp { font-size: 15px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(20, 30, 20, .45); stroke-width: 2.5px; stroke-linejoin: round; } .eu-point:hover .eu-point__disc, .eu-point:focus .eu-point__disc { stroke: var(--ink); } /* Dvouřádkové rozvržení na mobilu je na konci souboru, spolu s tabulkou krajů. */ .dest-row--europe { grid-template-columns: 1.1fr 1.1fr 1.4fr .5fr .5fr .7fr .7fr; } /* skládačka widgetu */ /* skládačka widgetu */ .widget-site { margin: 18px 0 4px; padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--chip); } .widget-site__title { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); } .widget-site .finder__row { gap: 12px; } .widget-site .finder__field { min-width: 200px; } .widget-key { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; } .finder__check { display: flex; align-items: center; gap: 7px; align-self: flex-end; padding-bottom: 9px; font-size: 13.5px; color: var(--ink); cursor: pointer; } .finder__check input { width: 16px; height: 16px; accent-color: var(--leaf); } .widget-note { margin: 0 0 12px; padding-left: 12px; border-left: 2px solid var(--border-strong); color: var(--muted); font-size: 13px; line-height: 1.6; } .widget-note:last-of-type { margin-bottom: 0; } /* ---------- provázání destinací a počasí ---------- */ /* Odkaz na hodinovou předpověď v kartě „Právě teď". Oddělený linkou, aby nevypadal jako popisek počasí, ale jako pokračování. */ .now__link { display: inline-block; width: 100%; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 13.5px; font-weight: 600; color: var(--olive); } /* Přechod ze stránky počasí do cestovatelské části. */ .travel-bridge { padding: 18px 22px; margin-top: 16px; } .travel-bridge__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); } .travel-bridge p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); } /* ---------- čím se oblasti země liší ---------- */ /* Dlaždic bývá podle měsíce a země dvě až pět, proto se skládají samy podle šířky. */ .picks { margin: 0; } .picks__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--ink); } .picks__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .picks__item { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; color: inherit; } .picks__item:hover { border-color: var(--olive); } .picks__label { font-size: 12.5px; color: var(--muted); } .picks__name { font-size: 15.5px; font-weight: 700; color: var(--ink); } .picks__value { font-size: 13.5px; font-weight: 600; color: var(--olive); } /* ---------- partnerské nabídky ---------- */ /* Nabídka partnera musí být poznat od našeho obsahu, jinak ji čtenář čte jako naše doporučení. Odlišuje ji štítek u nadpisu a jemný podklad, ne blikající rámeček. */ .affil { display: flex; flex-direction: column; gap: 12px; } .affil__box { padding: 18px 20px; } .affil__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .affil__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); } .affil__label { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--chip); font-size: 11.5px; color: var(--muted); white-space: nowrap; } .affil__rows { display: flex; flex-direction: column; gap: 10px; } .affil__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; } .affil__row:hover { border-color: var(--olive); } /* Náhledový obrázek dodává partner. Než přijde, drží místo šrafovaná plocha, aby bylo vidět, kolik prostoru řádek doopravdy zabere. */ .affil__thumb { height: 72px; border-radius: 8px; background: repeating-linear-gradient(135deg, var(--chip) 0 10px, var(--track) 10px 20px); border: 1px solid var(--border-soft); } .affil__name { display: block; font-size: 15px; font-weight: 700; color: var(--ink); } .affil__name em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--muted); } .affil__price { text-align: right; font-size: 16px; font-weight: 700; color: var(--olive); white-space: nowrap; } .affil__price em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 400; color: var(--muted); } .affil__btn { display: inline-block; margin-top: 14px; padding: 10px 18px; border-radius: 8px; background: var(--dark); font-size: 14px; font-weight: 600; color: var(--head-text); } .affil__chips { display: flex; flex-wrap: wrap; gap: 8px; } .affil__chip { padding: 9px 13px; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 13.5px; color: var(--ink); } .affil__chip em { font-style: normal; font-weight: 700; color: var(--olive); } .affil__note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); } .affil__inline { margin: 2px; font-size: 13.5px; line-height: 1.6; color: var(--muted); } .affil__inline-link { font-weight: 600; color: var(--olive); } @media (max-width: 620px) { /* Na úzké obrazovce se cena stěhuje pod název, jinak by na ni nezbylo místo. */ .affil__row { grid-template-columns: 72px minmax(0, 1fr); } .affil__thumb { height: 60px; } .affil__price { grid-column: 2; text-align: left; } } /* ---------- partnerské nabídky: pruh nahoře, sloupec, karty ---------- */ /* Pruh nad textem. Tři nabídky v jedné řadě, výška jednoho řádku - nahoře nemá partnerská nabídka přebít to, kvůli čemu čtenář přišel. */ .affil-strip { padding: 14px 16px; } .affil-strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .affil-strip__title { font-size: 13.5px; font-weight: 700; color: var(--ink); } .affil-strip__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .affil-strip__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 8px; } .affil-strip__item:hover { border-color: var(--olive); } .affil-strip__thumb { height: 44px; border-radius: 6px; border: 1px solid var(--border-soft); background: repeating-linear-gradient(135deg, var(--chip) 0 10px, var(--track) 10px 20px); } .affil-strip__name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); } .affil-strip__name em { display: block; font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--muted); } .affil-strip__price { grid-column: 2; font-size: 13px; font-weight: 700; color: var(--olive); } /* Postranní sloupec. Šířka je 322 px, takže formulář má dvě pole vedle sebe a třetí přes celou řádku. */ .affil-side { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .affil-side--slim { gap: 6px; } .affil-side__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .affil-side__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); } .affil-side__form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .affil-side__field { padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; font-size: 11.5px; color: var(--muted); } .affil-side__field em { display: block; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--ink); } .affil-side__field--wide { grid-column: 1 / -1; } .affil-side__thumb { height: 120px; border-radius: 8px; border: 1px solid var(--border-soft); background: repeating-linear-gradient(135deg, var(--chip) 0 10px, var(--track) 10px 20px); } .affil-side__name { font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--ink); } .affil-side__meta { display: flex; align-items: center; gap: 8px; } .affil-side__price { font-size: 15px; font-weight: 700; color: var(--olive); } .affil-side__price em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--muted); } /* Hodnocení a počet recenzí. Čísla vždycky od partnera, nikdy naše. */ .affil-rating { padding: 3px 7px; border-radius: 6px; background: var(--dark); font-size: 12.5px; font-weight: 700; color: var(--head-text); } .affil-reviews { font-size: 12px; color: var(--muted); } /* Karty aktivit. Takhle vypadá widget, který partner dodává hotový. */ .affil-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .affil-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; } .affil-card:hover { border-color: var(--olive); } .affil-card__thumb { height: 104px; border-radius: 8px; border: 1px solid var(--border-soft); background: repeating-linear-gradient(135deg, var(--chip) 0 10px, var(--track) 10px 20px); } .affil-card__name { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink); } .affil-card__meta { display: flex; align-items: center; gap: 8px; } .affil-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); } .affil-card__price { font-size: 14.5px; font-weight: 700; color: var(--olive); } .affil__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .affil__btn--block { display: block; text-align: center; margin-top: 0; } @media (max-width: 900px) { /* Pod sebou by pruh zabral půl obrazovky, proto se vodorovně posouvá. */ .affil-strip__items { grid-template-columns: repeat(3, minmax(200px, 1fr)); overflow-x: auto; } } /* Domácí země na rozcestníku destinací. Přes celou mřížku a oblasti v ní se skládají do řádků, protože se jich do šířky vejde víc než u ostatních zemí. */ .dest-country--wide { grid-column: 1 / -1; } .dest-country--wide .dest-country__name { font-size: 22px; } .dest-country--wide .dest-country__flag { width: 32px; } .dest-country--wide .dest-country__intro { max-width: 70ch; } /* Vlajka v tabulce destinací. Devadesát osm řádků se špatně čte, vlajka slouží jako kotva pro oko, ne jako informace - název země zůstává vedle ní. */ .row-flag { width: 18px; height: auto; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--border-strong); border-radius: 2px; } /* ---------- svislé rozestupy mezi bloky stránky ---------- Patří na konec ze stejného důvodu jako blok pod tím. Selektor .page > * + * má stejnou specificitu jako .page__note nebo .picks a ty si nastavují margin: 0. Kdyby se tahle pravidla psala u definice .page, prohrála by s každou takovou sekcí níž v souboru a rozestup by u ní zmizel. Odsazení mezi sousedy, ne gap. Gap platí pro všechny mezery stejně a jednotlivou dvojici by pak šlo přiblížit jen záporným okrajem. Takhle se každá výjimka zapíše kladnou hodnotou a je z ní vidět, kolik tam opravdu je. */ .page > * + * { margin-top: 20px; } /* Pruhy s filtry jsou ovládací prvky, ne sekce, drží se blíž k okolí z obou stran. */ .page > .month-switch, .page > .month-switch + *, .page > .country-list, .page > .country-list + *, .page > .country-actions, .page > .country-actions + * { margin-top: 14px; } /* Nadpis sekce patří k tomu, co uvádí, ne doprostřed mezi dvě sekce. Odsazení se píše celé, ne jako nula - selektor je specifičtější než pravidlo pro sousedy výš, takže by mu ta nula sebrala i mezeru nad nadpisem. */ .page > .section-title { margin: 20px 0 0; } .page > .section-title + * { margin-top: 12px; } /* Poznámka drobným písmem vysvětluje to, co je nad ní, takže se k tomu drží blíž než dva samostatné bloky k sobě. Zezdola totéž, ať kolem ní není nesouměr. */ .page > .page__note, .page > .page__note + * { margin-top: 14px; } /* Hlavní sloupec destinací. Stejný rytmus jako stránky. */ .dest-main > * + * { margin-top: 20px; } .dest-main > .section-title { margin: 20px 0 0; } .dest-main > .section-title + * { margin-top: 12px; } /* ---------- mobil: pravidla, která míří na sekce definované níž v souboru ---------- Media query nezvyšuje specificitu. Když se stejný selektor objeví v souboru znovu a později, vyhraje pozdější zápis bez ohledu na to, že ten první je v @media. Blok responzivních pravidel u řádku 830 tak nemohl přebít nic, co je definované až v druhé polovině souboru, a několik úprav odtud tiše nefungovalo. Pravidla pro takové selektory patří sem, na konec. Ostatní media query v souboru sedí u své sekce a týkají se selektorů definovaných nad nimi, tam je to v pořádku. */ @media (max-width: 900px) { /* Mapa krajů na úvodce. Popisky se zmenšují spolu s plochou a na telefonu jsou pod hranicí čitelnosti, proto se místo mapy ukáže seznam. */ .city-map > svg { display: none; } .city-list { display: block; } /* Nadpis úvodky. Zůstává viditelný, jen o kousek úspornější než na desktopu. */ .now__h1 { margin-bottom: 3px; font-size: 11px; } /* Nejdelší položka legendy výstrah a nejmíň užitečná - kraj bez výstrahy je světlý a poznat je to bez vysvětlování. Bez ní se legenda vejde na jeden řádek. */ .temp-legend__item--none { display: none; } /* Tabulka krajů na /predpoved-pocasi/ na dva sloupce a dva řádky. Šest údajů vedle sebe se na telefon nevejde. Zůstávají čtyři: vlevo kraj a pod ním město, vpravo počasí a pod ním denní maximum. Noční minimum a srážky se skrývají, na širší obrazovce zůstává tabulka celá. Buňky se neumisťují ručně přes grid-area, jen se jim přehodí pořadí a mřížka je rozloží sama. */ .dest-row--region { grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; } .dest-row--region > :nth-child(4), .dest-row--region > :nth-child(6) { display: none; } .dest-row--region > :nth-child(1) { order: 1; } /* Buňka s počasím je inline-flex kvůli ikoně, hlavička je prostý span - proto zarovnání oběma způsoby. Obrácený směr posílá piktogram za text a zároveň drží obsah u pravého okraje, protože v obráceném směru je začátek osy vpravo. */ .dest-row--region > :nth-child(3) { order: 2; flex-direction: row-reverse; justify-content: flex-start; text-align: right; } .dest-row--region > :nth-child(2) { order: 3; } .dest-row--region > :nth-child(5) { order: 4; text-align: right; } /* Evropská města na /predpoved-pocasi-evropa/ stejně. Sedm údajů místo šesti, navíc je tu sloupec s modelem - ten na telefonu odpadá spolu s nočním minimem a srážkami. Vlevo město a pod ním země, vpravo počasí a pod ním denní maximum. */ .dest-row--europe { grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 2px; } .dest-row--europe > :nth-child(4), .dest-row--europe > :nth-child(6), .dest-row--europe > :nth-child(7) { display: none; } .dest-row--europe > :nth-child(1) { order: 1; } .dest-row--europe > :nth-child(3) { order: 2; flex-direction: row-reverse; justify-content: flex-start; text-align: right; } .dest-row--europe > :nth-child(2) { order: 3; } .dest-row--europe > :nth-child(5) { order: 4; text-align: right; } /* Porovnání destinací. Sedm sloupců je měsíc a pak trojice vzduch, moře, srážky pro každou stranu. Plošné pravidlo výš skrývalo všechno od páté buňky dál, což byla celá pravá destinace - tabulka pak neporovnávala nic. Na telefonu se každý měsíc rozpadne na dva řádky, jeden na destinaci. Vlevo stojí měsíc přes obě řádky, vpravo trojice vzduch, moře, srážky - nahoře levá destinace, dole pravá. Hlavička má stejné rozvržení, takže na prvním řádku stojí jméno levé destinace a na druhém pravé. Sloupce jsou v podílech, ne auto. Každý řádek je vlastní mřížka a při auto šířkách by se sloupce řídily obsahem řádku, takže by se čísla mezi měsíci nesrovnala do svislice. */ .dest-row--compare { grid-template-columns: .9fr 1fr .8fr 1fr; column-gap: 10px; row-gap: 2px; } .dest-row--compare > :nth-child(1) { grid-area: 1 / 1 / 3 / 2; align-self: center; } .dest-row--compare > :nth-child(2) { grid-area: 1 / 2 / 2 / 3; } .dest-row--compare > :nth-child(3) { grid-area: 1 / 3 / 2 / 4; } .dest-row--compare > :nth-child(4) { grid-area: 1 / 4 / 2 / 5; } .dest-row--compare > :nth-child(5) { grid-area: 2 / 2 / 3 / 3; } .dest-row--compare > :nth-child(6) { grid-area: 2 / 3 / 3 / 4; } .dest-row--compare > :nth-child(7) { grid-area: 2 / 4 / 3 / 5; } .dest-row--compare > :nth-child(n+2) { text-align: right; } }