/* 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; } /* aktuální počasí */ .now { padding: 20px; } .now__head { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); } .now__change { color: var(--olive); font-weight: 600; } .now__main { display: flex; align-items: flex-end; gap: 14px; margin-top: 8px; } .now__temp { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); } .now__desc { font-size: 14px; color: var(--muted); padding-bottom: 8px; } .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); } /* 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); } .models__rows { display: flex; flex-direction: column; gap: 9px; 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 { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--card); } .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 { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 11px 14px; border-radius: 10px; background: rgba(255, 255, 255, .94); border: 1px solid var(--border-soft); display: flex; align-items: center; gap: 12px; } .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; } .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; } .outlook__day.is-uncertain { opacity: .72; } .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); } .outlook__low { font-size: 12.5px; color: var(--faint); } .outlook__pop { font-size: 11.5px; color: var(--olive); margin-top: 4px; } .outlook__day.is-uncertain .outlook__pop { color: var(--faint); } /* 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; } /* Vysvětlivka pod názvem licence, kde jsme ji doložili. Menší a tlumená, aby nekonkurovala samotnému názvu, ale byla čitelná. */ .sources__license-note { display: block; margin-top: 2px; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--muted); } .sources__attribution { color: var(--muted); } .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; } .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; } /* 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 - šest údajů do dvou řádků. Nejširší obsah je "1022 hPa", asi 55 px, takže i na displeji širokém 320 px zbývá rezerva. */ .now__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .now__stat { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; padding: 7px 8px; } .models { display: none; } .radar__map { min-height: 210px; } .radar__placeholder { top: 50%; transform: translateY(-50%); } .radar-chip:nth-child(n+3) { display: none; } .radar__bar .radar-chip--model { display: none; } .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. */ .radar.is-forecast .radar__img { opacity: .8; } .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-facts .btn-pin { width: 100%; margin-top: 14px; text-align: center; } .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); } .btn-pin { 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-pin:hover { border-color: var(--border-strong); color: var(--ink); } .btn-pin.is-saved { background: var(--leaf); border-color: var(--leaf); color: var(--dark); font-weight: 600; } /* 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); } @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:has(.radar__base) { aspect-ratio: var(--radar-aspect, 1.48); min-height: 0; } .radar--live .radar__map { min-height: 0; height: 100%; } .radar__base, .radar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; } .radar__base { z-index: 0; } .radar__img { z-index: 1; } /* 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__timeline, .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 */ .radar--page { max-height: 78vh; margin-inline: auto; } .radar--page.radar--live { width: min(100%, calc(78vh * 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); } .detail__top { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; } .now--detail { padding: 20px; } .summary--detail { align-items: flex-start; } .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; } .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; } .day.is-uncertain { opacity: .82; border-style: dashed; } .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; } .station-now { padding: 14px 18px; } .station-now__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .station-now__value { font-size: 26px; font-weight: 700; color: var(--ink); margin: 4px 0 2px; } .station-now__meta { font-size: 12.5px; color: var(--faint); } .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; } }