/* ========================================================================== Parking Štěpařská — design system Čistý světlý minimalistický styl. Jedna akcentní barva (zelená). ========================================================================== */ :root { /* Barvy */ --brand: #0e7a52; --brand-dark: #0a5c3e; --brand-tint: #e9f4ef; --brand-tint-2: #d3e9de; --ink: #14181c; --ink-2: #4a5560; --ink-3: #7b8794; --bg: #ffffff; --bg-soft: #f7f9f8; --line: #e5e9ec; --line-2: #d8dee3; --danger: #b3261e; /* Typografie */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", Arial, sans-serif; /* Rozměry */ --wrap: 1140px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --shadow-sm: 0 1px 2px rgba(20, 24, 28, .05), 0 1px 3px rgba(20, 24, 28, .06); --shadow-md: 0 4px 12px rgba(20, 24, 28, .06), 0 12px 28px rgba(20, 24, 28, .07); --shadow-lg: 0 8px 20px rgba(20, 24, 28, .07), 0 24px 60px rgba(20, 24, 28, .10); --header-h: 68px; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, iframe { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -.021em; line-height: 1.18; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } /* --- Zarovnání textu do bloku -------------------------------------------- Justify a dělení slov musí jít vždycky ruku v ruce. Kdyby se text zarovnal do bloku bez dělení, čeština by kvůli dlouhým slovům vytvořila mezi slovy široké „řeky“ bílého místa — dopadlo by to hůř než zarovnání na levý kraj. Dělení funguje díky atributu lang="cs" na , který si skript přepíná podle zvoleného jazyka, takže po přepnutí na EN se dělí anglicky. Nadpisy záměrně zarovnané nejsou — u velkého písma na málo řádcích by mezery vynikly nejvíc a dělená slova v nadpisu působí rušivě. ------------------------------------------------------------------------ */ .hero__lead, .lead, .card p, .plan__note, .plans-foot span, .form__fine { text-align: justify; -webkit-hyphens: auto; hyphens: auto; /* nedělit slova krátší než 6 znaků a nenechávat na řádku méně než 3 znaky */ hyphenate-limit-chars: 6 3 3; } ul { margin: 0; padding: 0; list-style: none; } a { color: var(--brand-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; } :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--brand-tint-2); color: var(--ink); } /* --- Layout primitivy ---------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; } .section { padding: 84px 0; } .section--soft { background: var(--bg-soft); border-block: 1px solid var(--line); } .section__head { max-width: 620px; margin-bottom: 44px; } .eyebrow { display: inline-block; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); } h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); } h3 { font-size: 1.12rem; } .lead { font-size: 1.06rem; margin-top: 14px; color: var(--ink-2); } /* --- Tlačítka ------------------------------------------------------------ */ .btn { --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border: 1px solid var(--btn-bd); border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: .97rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: none; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); } .btn--ghost:hover { --btn-bd: var(--ink-3); box-shadow: var(--shadow-sm); } .btn--sm { padding: 9px 16px; font-size: .89rem; } .btn--block { width: 100%; } .btn svg { flex: none; } /* --- Header -------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } .header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } .header__inner { display: flex; align-items: center; gap: 18px; width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); margin-right: auto; } .brand__mark { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; } .brand__text { display: flex; flex-direction: column; line-height: 1.15; } .brand__name { font-weight: 700; font-size: 1rem; letter-spacing: -.015em; } .brand__sub { font-size: .76rem; color: var(--ink-3); letter-spacing: .01em; } .nav { display: flex; align-items: center; gap: 4px; } .nav a { padding: 8px 12px; white-space: nowrap; /* jinak se „Co nabízíme“ na tabletu láme na dva řádky */ border-radius: 8px; color: var(--ink-2); font-size: .94rem; font-weight: 500; text-decoration: none; transition: color .15s ease, background-color .15s ease; } .nav a:hover { color: var(--ink); background: var(--bg-soft); } .header__actions { display: flex; align-items: center; gap: 10px; } /* Přepínač jazyka */ .lang { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); } .lang button { padding: 5px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-3); font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .lang button:hover { color: var(--ink); } .lang button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm); } .nav-toggle { display: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink); cursor: pointer; } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; padding: 76px 0 84px; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -30% 40% 30% -20%; background: radial-gradient(50% 50% at 50% 50%, var(--brand-tint) 0%, transparent 72%); opacity: .85; pointer-events: none; } .hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 56px; align-items: center; } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border: 1px solid var(--brand-tint-2); border-radius: 999px; background: #fff; color: var(--brand-dark); font-size: .84rem; font-weight: 600; box-shadow: var(--shadow-sm); } .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--brand-tint); } 50% { box-shadow: 0 0 0 6px rgba(14, 122, 82, .10); } } /* Obsazeno — odznáček zšedne, aby nesliboval volná místa */ .badge--full { border-color: var(--line-2); color: var(--ink-2); } .badge--full .dot { background: var(--ink-3); box-shadow: 0 0 0 3px var(--line); animation: none; } .hero h1 { margin: 22px 0 0; font-size: clamp(2.15rem, 5vw, 3.35rem); letter-spacing: -.032em; } .hero__lead { margin-top: 20px; font-size: 1.14rem; max-width: 33em; } /* Řádek tlačítek — kromě hero ho používá i sekce Lokalita */ .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } /* Foto v hero */ .hero__media { position: relative; } .hero__media .frame { box-shadow: var(--shadow-lg); } .price-chip { position: absolute; left: -18px; bottom: -22px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-md); } .price-chip__label { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); } .price-chip__value { margin-top: 3px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); } .price-chip__value small { font-size: .58em; font-weight: 600; color: var(--ink-3); } /* --- Rám pro obrázky + placeholder --------------------------------------- */ .frame { display: block; /* .frame je někdy — bez toho by zůstal inline */ position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--line); } .frame > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .5s cubic-bezier(.2, .7, .3, 1); } .frame--wide > img { aspect-ratio: 16 / 10; } /* Zástupný stav, když foto ještě není nahrané */ .frame.is-missing > img { display: none; } .frame.is-missing::after { content: attr(data-placeholder); display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 20px; text-align: center; background: linear-gradient(135deg, var(--brand-tint) 0%, var(--bg-soft) 60%), var(--bg-soft); color: var(--ink-3); font-size: .88rem; font-weight: 600; } .frame--wide.is-missing::after { aspect-ratio: 16 / 10; } /* --- Karty výhod --------------------------------------------------------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .card { padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-md); } .card__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 11px; background: var(--brand-tint); color: var(--brand-dark); } .card h3 { margin-bottom: 7px; } .card p { font-size: .95rem; } /* --- Ceník --------------------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; /* karty stejně vysoké, i když má jedna víc odrážek */ } .plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow-sm); } .plan--featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-md); } .plan__flag { position: absolute; top: -13px; left: 28px; padding: 5px 13px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .plan__name { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); } .plan__price { display: flex; align-items: baseline; gap: 7px; margin-top: 14px; color: var(--ink); } .plan__amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -.038em; line-height: 1; } .plan__unit { font-size: .95rem; font-weight: 600; color: var(--ink-3); } .plan__note { margin-top: 12px; font-size: .93rem; min-height: 3em; } .plan__list { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); } .plan__list li { display: flex; gap: 10px; padding: 5px 0; font-size: .93rem; } .plan__list svg { flex: none; margin-top: 5px; color: var(--brand); } .plans-foot { display: flex; align-items: flex-start; gap: 11px; margin-top: 26px; padding: 16px 18px; border: 1px dashed var(--line-2); border-radius: var(--r-md); font-size: .92rem; } .plans-foot svg { flex: none; margin-top: 4px; color: var(--ink-3); } /* --- Galerie ------------------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .gallery button { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; width: 100%; border-radius: var(--r-lg); } .gallery .frame:hover > img { transform: scale(1.045); } /* --- Lokalita ------------------------------------------------------------ */ .place { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; } /* adresa v nadpisu je dlouhá — o kousek menší, ať se vejde na jeden řádek */ .place h2 { font-size: clamp(1.55rem, 2.9vw, 2.05rem); } .facts { margin-top: 26px; } .facts li { display: flex; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); } .facts li:last-child { border-bottom: 1px solid var(--line); } .facts svg { flex: none; margin-top: 3px; color: var(--brand); } .facts strong { display: block; color: var(--ink); font-size: .95rem; } .facts span { font-size: .93rem; } .map { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); background: var(--bg-soft); } .map iframe { width: 100%; height: 430px; border: 0; } /* --- Kontakt / formulář -------------------------------------------------- */ .contact { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 44px; align-items: start; } .contact-lines { margin-top: 28px; display: grid; gap: 14px; } .contact-lines a, .contact-lines div { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--ink); text-decoration: none; font-weight: 600; transition: border-color .18s ease, box-shadow .18s ease; } .contact-lines a:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); } .contact-lines svg { flex: none; color: var(--brand); } .contact-lines small { display: block; font-weight: 500; font-size: .78rem; color: var(--ink-3); letter-spacing: .02em; } .form { padding: 30px 30px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow-md); } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: block; margin-bottom: 16px; } .field > span { display: block; margin-bottom: 7px; font-size: .85rem; font-weight: 600; color: var(--ink); } .field .req { color: var(--brand); } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; /* NESNIŽOVAT pod 16px: Safari na iPhonu při kliknutí do menšího políčka automaticky přiblíží celou stránku a návštěvník pak musí ručně oddalovat. */ font-size: 1rem; transition: border-color .16s ease, box-shadow .16s ease; } .field textarea { min-height: 108px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .field input:user-invalid, .field textarea:user-invalid { border-color: var(--danger); } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .form__fine { margin-top: 4px; font-size: .82rem; color: var(--ink-3); } .form__status { display: none; gap: 11px; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--r-sm); font-size: .93rem; } .form__status.is-shown { display: flex; } .form__status[data-kind="ok"] { background: var(--brand-tint); color: var(--brand-dark); border: 1px solid var(--brand-tint-2); } .form__status[data-kind="err"] { background: #fdf0ef; color: var(--danger); border: 1px solid #f5d7d4; } .form__status svg { flex: none; margin-top: 3px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- Footer -------------------------------------------------------------- */ .footer { padding: 44px 0 52px; border-top: 1px solid var(--line); background: var(--bg-soft); font-size: .9rem; color: var(--ink-3); } .footer__inner { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; } .footer a { color: var(--ink-2); text-decoration: none; } .footer a:hover { color: var(--brand-dark); text-decoration: underline; } .footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; } .footer__id strong { color: var(--ink); } .footer__tel { white-space: nowrap; } /* --- Lightbox ------------------------------------------------------------ */ .lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 24px; background: rgba(15, 18, 21, .88); backdrop-filter: blur(3px); } .lightbox.is-open { display: grid; } .lightbox img { max-width: min(1100px, 100%); max-height: 86vh; width: auto; border-radius: var(--r-md); box-shadow: var(--shadow-lg); } .lightbox__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background-color .18s ease; } .lightbox__close:hover { background: rgba(255, 255, 255, .26); } /* --- Sticky mobilní CTA -------------------------------------------------- */ .callbar { display: none; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; padding: 10px; gap: 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .callbar .btn { flex: 1; } /* --- Responzivita -------------------------------------------------------- */ @media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; gap: 44px; } .hero { padding-top: 56px; } .price-chip { left: auto; right: 16px; bottom: -18px; } .place, .contact { grid-template-columns: 1fr; gap: 32px; } .plans { grid-template-columns: 1fr; } .plan--featured { order: -1; } .map iframe { height: 340px; } } /* Jen telefony — na tabletu se galerie i dvojice políček ve formuláři vejdou vedle sebe, plná šířka by tam byla plýtvání místem. */ @media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; gap: 0; } } /* Tablety na výšku (iPad mini až iPad Pro). Bez tohoto bloku se ceník lámal do jednoho sloupce už pod 1000 px, takže na iPadu byly karty roztažené přes celou šířku a stránka o polovinu delší. */ @media (min-width: 680px) and (max-width: 1000px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .plan { padding: 26px 19px 28px; } .plan--featured { order: 0; } /* zruší přeskládání z mobilu */ .plan__amount { font-size: 2.05rem; } .plan__unit { font-size: .84rem; } .plan__price { gap: 5px; } .plan__note { font-size: .88rem; min-height: 4.6em; } .plan__list li { font-size: .87rem; padding: 4px 0; } .plan__flag { left: 19px; } } @media (max-width: 760px) { body { font-size: 16.5px; } .section { padding: 62px 0; } .nav { display: none; } .nav.is-open { position: absolute; top: var(--header-h); left: 12px; right: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-lg); } .nav.is-open a { padding: 12px 14px; font-size: 1rem; } .nav-toggle { display: grid; place-items: center; } .header__actions .btn--phone { display: none; } .form { padding: 24px 20px 26px; } .callbar { display: flex; } body { padding-bottom: 84px; } .footer { padding-bottom: 40px; } .hero__cta .btn { flex: 1 1 100%; } } /* --- Dotyková zařízení --------------------------------------------------- Platí pro telefony i tablety bez ohledu na šířku okna. Prstem se míří hůř než myší, proto všechny klikací prvky zvětšíme na 44 px podle doporučení Apple i Googlu. ------------------------------------------------------------------------ */ @media (pointer: coarse) { .lang button { padding: 10px 14px; font-size: .84rem; } .nav-toggle { width: 44px; height: 44px; } .brand { padding-block: 4px; } .btn--sm { padding: 12px 18px; } .nav a { padding: 11px 12px; } /* Odkazy v zápatí měly jen 24 px na výšku — prstem se do nich mířilo těžko */ .footer__links { gap: 2px 14px; } .footer__links a { display: block; padding: 10px 8px; margin-inline: -8px; } .contact-lines a { padding: 17px 18px; } /* Telefon v zápatí byl 16 px vysoký — prstem se do něj mířilo naslepo */ .footer__tel { display: inline-block; padding: 12px 10px; margin: -6px 0 -6px -10px; } } /* --- Místo v hlavičce ---------------------------------------------------- Přepínač jazyka musí být vidět na každé šířce. Kdo neumí česky, potřebuje ho najít hned — schovat ho pod hamburger by znamenalo nechat ho hledat v menu, jehož položky nepřečte. Ustupuje proto všechno ostatní: nejdřív číslo u telefonu, pak název firmy, nakonec podtitulek. Bloky jsou až tady, aby přebily nastavení pro dotyk výš. ------------------------------------------------------------------------ */ /* Tablet — z telefonu zůstane jen ikona (číslo je v aria-label i v úvodu) */ @media (min-width: 761px) and (max-width: 1000px) { .header__inner { gap: 12px; } .btn--phone { padding: 12px; } .btn--phone .btn__label { display: none; } .btn--phone svg { width: 18px; height: 18px; } .nav a { padding: 8px 9px; } } /* Telefon — kompaktnější přepínač, ale pořád v hlavičce */ @media (max-width: 760px) { .header__inner { gap: 10px; } .lang { padding: 2px; } /* Svislé odsazení je štědré kvůli velikosti terče pro prst, vodorovné úsporné, aby se hlavička vešla. */ .lang button { padding: 12px 10px; font-size: .78rem; letter-spacing: .02em; } } /* Úzké telefony — ustoupí podtitulek pod názvem */ @media (max-width: 430px) { .brand__sub { display: none; } .brand__name { font-size: .94rem; } .brand { gap: 9px; } } /* Nejužší telefony (iPhone SE) — zůstane jen značka bez názvu. Značka odkazuje na začátek stránky, proto má aria-label v HTML. */ @media (max-width: 370px) { .brand__text { display: none; } .lang button { padding: 12px 14px; } /* uvolněné místo jde do šířky tlačítek */ /* Ze značky zbyla jen ikona 36 px — rozšíříme terč, aniž bychom hnuli grafikou */ .brand { padding-inline: 4px; margin-inline: -4px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } @media print { .header, .callbar, .lightbox, .lang, .nav-toggle, .form { display: none !important; } body { font-size: 11pt; } .section { padding: 18px 0; } }