/* ========================================================================= Emin zámek - vlastní šablona Vizuál je PŘEPIS produkčního webu eminzamek.cz (Bricks + AutomaticCSS + Frames). Barvy, typografická stupnice, mezery a rozložení jsou převzaté 1:1 z produkčního CSS (notes/production-reference/*.css a inline styly v notes/production-reference/*.html). Nic se tady nevymýšlí. Zdroje hodnot: - paleta a fluidní stupnice: automatic.css :root / .color-scheme--alt - layout sekcí a kontejnerů: bricks frontend (.brxe-section/container/block) - komponenty: inline Bricks styly jednotlivých šablon (BEM .hp-hero__*, ...) Žádné externí fonty ani knihovny. Helvetica jako na produkci. ========================================================================= */ /* ------------------------------ 1. Tokeny ------------------------------- */ :root { color-scheme: light; /* Násobitel pro ovládání velikosti písma (čtyři kroky, viz main.js). */ --step: 1; /* --- Paleta (automatic.css: :root, .color-scheme--main) --- */ --primary: #ec6608; --primary-hover: #49b3d0; --secondary: #8594ad; --base: #222c3b; --base-hover: #273344; --base-ultra-light: #eff2f6; --base-light: #ced7e3; --base-semi-light: #8594ad; --base-semi-dark: #415471; --base-dark: #2f3c51; --base-ultra-dark: #131820; --neutral: #e7ecf0; --neutral-hover: #ffffff; --neutral-ultra-light: #f6f7f9; --neutral-light: #d3d4d4; --neutral-semi-light: #91a8ba; --neutral-semi-dark: #455b6e; --neutral-dark: #31414e; --neutral-ultra-dark: #141a1f; --white: #ffffff; --black: #000000; /* Šedá z produkce pro drobné texty v hlavičce a patičce. */ --grey-text: #7b879a; /* Datum u aktualit. */ --date-grey: #d1d2d4; --focus-color: var(--primary); --focus-width: 2px; --focus-offset: 2px; /* --- Fluidní typografie (automatic.css @supports clamp blok) --- */ --text-xs: calc(clamp(0.75rem, calc(-0.1858782904vw + 0.7918226153rem), 0.6331290249rem) * var(--step)); --text-s: calc(clamp(0.8125rem, calc(0.1988071571vw + 0.7677683897rem), 0.9375rem) * var(--step)); --text-m: calc(clamp(1rem, calc(0.1988071571vw + 0.9552683897rem), 1.125rem) * var(--step)); --text-l: calc(clamp(1.2rem, calc(0.0795228628vw + 1.1821073559rem), 1.25rem) * var(--step)); --text-xl: calc(clamp(1.44rem, calc(0.8890658052vw + 1.2399601938rem), 1.999000125rem) * var(--step)); --text-xxl: calc(clamp(1.728rem, calc(1.489729092vw + 1.3928109543rem), 2.6646671666rem) * var(--step)); --h6: calc(clamp(0.75rem, calc(-0.073993329vw + 0.766648499rem), 0.7034766944rem) * var(--step)); --h5: calc(clamp(0.8125rem, calc(0.1991800137vw + 0.7676844969rem), 0.9377344336rem) * var(--step)); --h4: calc(clamp(1.125rem, calc(0.6958250497vw + 0.9684393638rem), 1.5625rem) * var(--step)); --h3: calc(clamp(1.35rem, calc(0.5029821074vw + 1.2368290258rem), 1.66625rem) * var(--step)); --h2: calc(clamp(1.62rem, calc(1.3996023857vw + 1.3050894632rem), 2.5rem) * var(--step)); --h1: calc(clamp(1.944rem, calc(1.8783300199vw + 1.5213757455rem), 3.125rem) * var(--step)); /* --- Mezery (automatic.css fluidní varianty) --- */ --gutter: clamp(1.25rem, calc(3.9761431412vw + 0.3553677932rem), 3.75rem); --space-xs: clamp(0.8333333333rem, calc(-0.0172384889vw + 0.8480506933rem), 0.8441720333rem); --space-s: clamp(1.1252813203rem, calc(0.1983597291vw + 1.0806503813rem), 1.25rem); --space-m: clamp(1.5rem, calc(0.5964214712vw + 1.365805169rem), 1.875rem); --space-l: clamp(1.9995rem, calc(1.2930417495vw + 1.7085656064rem), 2.8125rem); --space-xl: clamp(2.6653335rem, calc(2.4706425447vw + 2.1094389274rem), 4.21875rem); --section-space-xs: clamp(1.6883440665rem, calc(1.2909040692vw + 1.3978906509rem), 2.5rem); --section-space-s: clamp(2.2505626407rem, calc(2.3847910288vw + 1.7139846592rem), 3.75rem); --section-space-m: clamp(3rem, calc(4.1749502982vw + 2.0606361829rem), 5.625rem); --section-space-l: clamp(3.999rem, calc(7.0592445328vw + 2.4106699801rem), 8.4375rem); /* Řádkování jako na produkci. */ --text-line-height: calc(6px + 2ex); --heading-line-height: calc(4px + 2ex); /* Výchozí mezery vrstev z automatic.css. Produkce je nastavuje globálně: section {gap: var(--container-gap)}, .brxe-container / .brxe-block {gap: var(--content-gap)} a mřížky {gap: var(--grid-gap)}. Bez nich se rozestupy uvnitř sekcí rozjedou. */ --container-gap: var(--space-xl); --content-gap: var(--space-m); --grid-gap: var(--space-m); /* Šířka obsahu: .brxe-container {width: 1100px}. */ --wrap: 1100px; /* Výška pevné hlavičky - používá se pro odsazení odkazů na #kotvy. */ --header-height: 113px; /* Produkce má výslednou rodinu přesně Helvetica. Vlastní název "Helvetica Neue LT Com" tahá lokálně nainstalovaný těžší řez. */ --font-body: Helvetica, Arial, sans-serif; } html[data-textsize="0"] { --step: 0.9; } html[data-textsize="1"] { --step: 1; } html[data-textsize="2"] { --step: 1.2; } html[data-textsize="3"] { --step: 1.4; } /* Tmavý režim = produkční .color-scheme--alt. Výchozí je světlý (produkce má color_mode: light a preferenci OS nepoužívá), tmavý jen po volbě uživatele. */ html[data-theme="dark"] { color-scheme: dark; --base: #cdd7dd; --base-hover: #f6f8f9; --base-ultra-light: #f0f3f5; --base-light: #d1dae0; --base-semi-light: #95aab7; --base-semi-dark: #485d6a; --base-dark: #34434c; --base-ultra-dark: #151b1e; --neutral: #222c3b; --neutral-hover: #273344; --neutral-ultra-light: #141a1f; --neutral-light: #ced7e3; --neutral-semi-light: #8ea1be; --neutral-semi-dark: #415471; --neutral-dark: #2f3c51; --neutral-ultra-dark: #131820; --white: #000000; --black: #ffffff; } /* --------------------------- 2. Základ a reset -------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-block-size: 100vh; background-color: var(--white); color: var(--base); font-family: var(--font-body); font-size: var(--text-m); line-height: var(--text-line-height); text-align: justify; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--base); font-family: var(--font-body); font-weight: 700; line-height: var(--heading-line-height); text-align: left; text-wrap: pretty; } h1 { font-size: var(--h1); font-weight: 900; } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); } h4 { font-size: var(--h4); } h5 { font-size: var(--h5); } h6 { font-size: var(--h6); } p, ul, ol, li, dl, dd, dt { margin-block: 0; } /* automatic.css: `p, li {line-height: var(--text-line-height)}`. Řádkování se tedy dopočítává z velikosti daného prvku, nedědí se hotová hodnota z body. Na tom stojí drobné texty (patička 14,829/21,5054) i šedé menu v hlavičce (14/20,875) - bez tohoto pravidla by měly řádek 24,6431. */ p, li { line-height: var(--text-line-height); } a { color: inherit; text-decoration: none; transition: color 0.2s; } a:hover { color: var(--primary); } strong, b { font-weight: 700; } img, svg, video { max-width: 100%; height: auto; display: block; } svg { flex-shrink: 0; } button { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--primary); color: #fff; } :focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } /* Odkazy na kotvy nesmí skončit pod pevnou hlavičkou. */ [id] { scroll-margin-top: calc(var(--header-height) + 20px); } .visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 12px 20px; background: var(--primary); color: #fff; font-weight: 700; } .skip-link:focus { left: 0; } /* ------------------------- 3. Layout primitivy -------------------------- */ /* .section = .brxe-section + ACSS :where(section) padding a gap. */ .section, .page-hero { display: flex; flex-direction: column; align-items: center; width: 100%; margin-inline: auto; gap: var(--container-gap); } .section { padding-block: var(--section-space-m); padding-inline: var(--gutter); background-color: var(--white); } /* .wrap = .brxe-container. */ .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); width: var(--wrap); max-width: 100%; margin-inline: auto; } /* .block = .brxe-block: sloupec na plnou šířku s mezerou --content-gap. */ .block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); width: 100%; } .block--auto { width: auto; } .block--row { flex-direction: row; } .block--center { justify-content: center; } .block--tight { gap: 10px; } .block--flat { gap: 0; } /* ACSS pomocné třídy pro položku mřížky přes více sloupců. `1 / -1` je bezpečnější než `span 3` - drží celý řádek i tehdy, když má mřížka na daném zlomu méně sloupců. */ .col-span--full { grid-column: 1 / -1; } @media (min-width: 49.4375em) { .col-span--2 { grid-column: span 2; } } .section--alt { background-color: var(--neutral); } .section--ink { background-color: var(--neutral-ultra-light); } .section--tight { padding-block: var(--section-space-s); } .split { display: grid; grid-template-columns: var(--grid-1, repeat(1, minmax(0, 1fr))); gap: var(--grid-gap); width: 100%; align-items: start; } .split img { width: 100%; height: 100%; object-fit: cover; } .grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; } /* Hlavička sekce je běžný .brxe-block - sloupec s mezerou --content-gap. Odsazení od následujícího obsahu řeší mezera kontejneru, ne margin. */ .section__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); width: 100%; } /* Produkce nemá žádné dekorativní linky nad nadpisy. */ .rule { display: none; } /* Cíle služby: produkce ukazuje jen text ve sloupcích, číslo je skryté (.poslani__cislo {display: none}). Žádné karty. */ .goal { text-align: left; } .goal > p:first-child { display: none; } .goal > p { text-align: left; } hr { border: 0; border-top: 1px solid var(--neutral-semi-light); width: 100%; margin: var(--space-m) 0; } /* --------------------------- 4. Texty a proza --------------------------- */ .prose > * + * { margin-top: 1em; } .prose > * + h3, .prose > * + h4 { margin-top: 1.2em; } .prose a { color: var(--primary); text-decoration: underline; } .prose a:hover { color: var(--base); } .prose ul, .prose ol { padding-left: 0; list-style: none; } .prose ol { padding-left: 2em; list-style: decimal; } /* Odrážky jako na produkci: plný černý čtvereček, vnořené prázdné. */ .prose > ul > li, .prose ul > li { position: relative; padding-left: 20px; margin-bottom: 10px; line-height: 1.4; } .prose ul > li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; background-color: var(--base); } .prose li > ul { list-style: none; padding-left: 20px; margin-top: 8px; } .prose li > ul > li { margin-bottom: 5px; } .prose li > ul > li::before { background-color: var(--white); border: 1px solid var(--base); box-sizing: border-box; } .prose ol > li::before { content: none; } .prose ol > li { padding-left: 0; } .prose h3 { margin-top: 1.2em; font-size: var(--h3); } .prose--wide { width: 100%; } @media (min-width: 62em) { /* Produkce dává vybraným textům polovinu kontejneru (.poslani__poslani-text {width: 50%}), a to až nad zlomem 991 px. */ .prose--wide { width: 50%; } } .lede { font-size: var(--text-m); } /* Eyebrow produkce nemá. */ .eyebrow { display: none; } .notice { width: 100%; padding: var(--space-s); background-color: var(--neutral); font-size: var(--text-s); } /* ------------------------------ 5. Tlačítka ----------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 220px; padding: 15px 40px; border-radius: 4px; font-size: var(--text-l); font-weight: 600; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-image 0.3s ease, color 0.2s, border-color 0.2s; } .btn--primary { position: relative; z-index: 1; border: 3.25px solid var(--primary); background-image: linear-gradient(to right, #fd951c, #b92907); color: var(--white); } .btn--primary:hover { background-image: linear-gradient(to right, #fca912, #d23305); color: var(--white); } .btn--primary:focus-visible { color: var(--white); } .btn--ghost { border: 3.25px solid var(--base); background-color: transparent; color: var(--base); } .btn--ghost:hover { border-color: var(--primary); color: var(--primary); } .btn--ghost:focus-visible { color: var(--base); } /* Textový odkaz se šipkou (produkce: .hp-novinky__link, .dokumenty__zobrazit). */ .link-more { display: inline-flex; align-items: center; gap: 15px; font-size: var(--text-s); font-weight: 600; color: var(--primary); text-transform: uppercase; } .link-more svg { width: 26px; height: 26px; color: currentColor; } .link-more:hover { color: var(--base); } /* ------------------------------ 6. Hlavička ----------------------------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 998; width: 100%; transition: background-color 0.2s, box-shadow 0.2s; } .site-header__bar { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 25px var(--gutter); background-color: var(--white); } .site-header__inner { flex-direction: row; align-items: center; column-gap: var(--space-s); } .site-header__logo { display: block; width: auto; } .site-header__logo-img { width: 170px; height: auto; } .site-header__logo-img--dark { display: none; } html[data-theme="dark"] .site-header__logo-img--light { display: none; } html[data-theme="dark"] .site-header__logo-img--dark { display: block; width: 172px; height: 80px; object-fit: contain; object-position: left center; } /* .menu-wrapper.brxe-block {align-items: flex-end; row-gap: 10px} */ .site-header__right { display: flex; flex: 1; flex-direction: column; align-items: flex-end; row-gap: 10px; } .site-nav__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } /* Horní tučný řádek služeb: 16px / 600, barva --base. Produkce tu nemá seznam, ale blokové .brxe-text-basic prvky - řádek je proto vysoký 24,64 px (zděděné řádkování těla), ne 18,5 px jako inline text. Proto blokové `a` a řádkování zděděné z li (17,829 -> 24,6431). */ .site-nav--services .site-nav__list { justify-content: flex-end; column-gap: var(--space-m); row-gap: 4px; } .site-nav--services a { display: block; font-size: calc(16px * var(--step)); font-weight: 600; color: var(--base); text-align: left; } .site-nav--services a:hover, .site-nav--services a[aria-current="page"] { color: var(--primary); } .site-header__utility { display: flex; flex-direction: row; align-items: center; column-gap: var(--space-m); } /* Spodní šedý řádek: produkce má na navigaci `.header__sede-menu.brxe-nav-menu {font-size: 14px; font-weight: 600}`. Velikost i řez musí sedět na navigaci, ne až na odkazu: `li` z nich dopočítá `line-height: calc(6px + 2ex)` = 20,875 px (při weight 400 by vyšlo 20,6426). Odkaz je jako v Bricks `display: flex`, takže je vysoký celé řádkování, ne jen 16 px inline boxu. */ .site-nav--secondary { font-size: calc(14px * var(--step)); font-weight: 600; } .site-nav--secondary .site-nav__list { gap: 15px; } .site-nav--secondary a { display: flex; color: var(--neutral-semi-dark); } .site-nav--secondary a:hover, .site-nav--secondary .current-menu-item > a { color: var(--primary); } /* .header__icon-wrapper.brxe-block {width: 23px; display: flex; flex-direction: row; align-self: center; justify-content: center; align-items: center} - uvnitř je obyčejný odkaz s inline SVG 23 × 22,908. Odkaz tedy tvoří řádkový box (zděděné řádkování těla), a wrapper je proto vysoký 29,5469 px, ne 23 px; z toho plyne výška hlavičky 114,1875 px. */ .site-header__social { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 23px; color: var(--base); } .site-header__social-link { display: block; color: inherit; } /* Globální `img, svg, video {display: block}` by ikonu vyřadil z řádkového boxu - produkce ji má inline, odtud výška wrapperu 29,5469 px. */ .site-header__social-link svg { display: inline; } .site-header__social-link:hover { color: var(--primary); } .site-header__toggle { display: none; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--base); cursor: pointer; } .site-header__toggle-bars { display: block; width: 36px; } .site-header__toggle-bars span { display: block; height: 3px; background: currentColor; transition: transform 0.2s, opacity 0.2s; } .site-header__toggle-bars span + span { margin-top: 7px; } .site-header__toggle-label { font-size: var(--text-s); font-weight: 600; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(1) { transform: translateY(10px) rotate(45deg); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(2) { opacity: 0; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } /* Mobilní menu */ .mobile-menu { display: none; width: 100%; background-color: var(--neutral); padding-block: var(--space-m); padding-inline: var(--gutter); } .mobile-menu[hidden] { display: none; } .mobile-menu__inner { row-gap: var(--space-s); } .mobile-menu__list { list-style: none; margin: 0; padding: 0; width: 100%; } .mobile-menu__list a { display: block; padding-block: 10px; font-weight: 600; line-height: 1.5; color: var(--neutral-semi-dark); } .mobile-menu__list a:hover, .mobile-menu__list .current-menu-item > a { color: var(--primary); } .mobile-menu__contact { display: flex; flex-wrap: wrap; gap: var(--space-s); font-size: var(--text-s); font-weight: 600; color: var(--primary); } /* Hlavní obsah začíná pod pevnou hlavičkou. Hero a pruh s názvem stránky si horní odsazení drží samy (jako na produkci); ostatní šablony - detail aktuality, pozice, dokumentu, obecná stránka - ho dostanou tady, aby jim hlavička nepřekryla nadpis. */ .site-main { display: block; } .site-main > :first-child:not(.hero):not(.page-hero):not(.docs-page):not(.listing):not(.section--detail) { padding-top: calc(var(--header-height) + var(--section-space-s)); } /* --------------- 7. Plovoucí panel přístupnosti (vpravo) ---------------- */ /* Produkce: section.page-setting {position: fixed; top: 300px; right: 0}. */ .site-tools { position: fixed; top: 300px; right: 0; z-index: 5; width: auto; } /* Produkce: panel je 73 x 328,5 px - skupina textu (179) + mezera --space-m + skupina motivu (120,0156). */ .site-tools__inner { display: flex; flex-direction: column; gap: var(--space-m); width: auto; align-items: stretch; background-color: var(--neutral-ultra-light); } .site-tools__group { display: flex; flex-direction: column; padding: 10px; } .site-tools__btn { display: flex; align-items: center; justify-content: center; width: 53px; height: 53px; padding: 0; margin: 0; border: none; background-color: var(--white); color: var(--primary); font-weight: 700; font-size: 26px; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, filter 0.2s ease; } .site-tools__btn:hover { filter: brightness(95%); } .site-tools__btn--reset { background-color: var(--neutral); } .site-tools__btn svg { width: 24px; height: 24px; color: var(--primary); } /* Reset "T" je v produkci šedý, plus/minus zůstávají oranžové. */ .site-tools__btn--reset svg { width: 26px; height: 26px; color: var(--base); } .site-tools__theme { display: flex; flex-direction: column; align-items: center; gap: var(--space-m); padding: 15px; background-color: var(--neutral-ultra-light); } .site-tools__icon { width: 39.532px; height: 39.532px; color: var(--base); } .site-tools__btn--theme { width: 40px; height: 21px; border-radius: 10px; background-color: rgb(48, 41, 41); position: relative; padding: 0; justify-content: flex-start; } .site-tools__btn--theme .site-tools__ball { position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 8px; background-color: rgb(201, 188, 188); transition: transform 0.15s linear; } .site-tools__btn--theme[aria-pressed="true"] { background-color: rgb(201, 188, 188); } .site-tools__btn--theme[aria-pressed="true"] .site-tools__ball { background-color: rgb(72, 64, 64); transform: translateX(19px); } .site-tools__theme-on, .site-tools__theme-off { position: absolute; display: flex; align-items: center; justify-content: center; width: 17px; height: 17px; top: 2px; font-size: 11px; color: rgb(72, 64, 64); pointer-events: none; } .site-tools__theme-on { left: 2px; } .site-tools__theme-off { right: 2px; } /* ----------------------- 8. Pruh s názvem stránky ---------------------- */ /* Bez obrázku (Kontakty, Dokumenty, Aktuality, Kariéra): produkce = sekce s --neutral a padding-top 200px. */ .page-hero { position: relative; justify-content: center; overflow: hidden; width: 100%; padding: 200px var(--gutter) var(--section-space-s); background-color: var(--neutral); } .page-hero__title-wrap { width: var(--wrap); max-width: 100%; } .page-hero__title { width: 100%; font-size: var(--h2); font-weight: 700; } .page-hero__meta { margin-top: var(--space-s); font-size: var(--text-s); color: var(--neutral-semi-dark); } /* S obrázkem (stránky služeb a Zájemci): produkce = .hero s obrázkem absolutně od left:50%, min-height 30rem. */ .page-hero--band { min-height: 30rem; padding-top: 150px; padding-bottom: var(--section-space-m); } /* Produkce přepisuje horní padding hera per-ID: Sociální rehabilitace (#brxe-lwzrka), Chráněné bydlení (#brxe-xzgvuj) a Zájemci o službu (#brxe-aunwje) mají 170px, Domov se zvláštním režimem zůstává na 150px. */ .page-hero--top-170 { padding-top: 170px; } .page-hero--band .page-hero__band { position: absolute; left: 50%; right: 0; top: 0; height: 100%; width: auto; overflow: hidden; } .page-hero--band .page-hero__band img { width: 100%; height: 100%; object-fit: cover; } .page-hero--band .page-hero__title-wrap { position: relative; z-index: 1; } /* Výjimka: produkční H1 služeb má doslova `font-family: ""` (prázdný název rodiny). Prohlížeč pak sáhne po výchozím patkovém písmu - a protože řádkování je `calc(4px + 2ex)`, musí sedět i jeho x-výška. Explicitní "Times New Roman" dá jiné metriky, proto tu je prázdný řetězec z produkce. Ostatní nadpisy stránek zůstávají Helvetica. */ .page-hero--band .page-hero__title { width: 100%; min-width: 100%; font-family: ""; font-size: var(--h1); font-weight: 900; } /* @media (max-width: 790px) {.hero__heading-wrapper {width: 70%}} Obrázek si i na mobilu drží left: 50% - produkce ho nijak nepřepisuje. */ @media (max-width: 49.375em) { .page-hero--band .page-hero__title-wrap { width: 70%; } } /* ----------------------------- 9. Úvodní strana ------------------------- */ /* .hero = .hp-hero: neutrální plocha, obří motýl absolutně vpravo, záměrně přetékající mimo výřez, dole odkaz Pokračovat. */ .hero { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--section-space-m) var(--gutter) 250px; background-color: var(--neutral); overflow: hidden; } .hero__inner { margin-top: 130px; width: var(--wrap); max-width: 100%; } /* Sloupec je flex, aby se odsazení nesléval (margin collapsing) - produkční prázdný H1 tvořil mezeru nad textem i mezi textem a tlačítky. */ .hero__content { display: flex; flex-direction: column; width: 55%; } .hero__title { /* Produkční H1 je prázdný; my držíme smysluplný nadpis pro čtečky. */ position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hero__text { margin-top: var(--space-m); margin-right: 26px; } .hero__actions { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 10px; row-gap: 10px; margin: var(--space-m) 0 0; } .hero__media { position: absolute; left: 54%; top: var(--section-space-m); width: 752px; max-width: none; pointer-events: none; } .hero__media img { width: 752px; max-width: none; height: auto; } .hero__continue { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: row; align-items: center; column-gap: 15px; width: auto; color: var(--base); } .hero__continue svg { width: 26px; height: 26px; } .hero__continue a { font-weight: 500; color: var(--base); } .hero__continue:hover, .hero__continue:hover a { color: var(--primary); } /* Blok "Dáváme našim klientům šanci na lepší život". */ .section--about { background-color: var(--neutral); } /* .hp-o-nas__heading-part.brxe-block {width: 75%} - sloupec s --content-gap. */ .about__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); width: 75%; } /* Čtyři ikonové sloupce vedle sebe (produkce: .hp-o-nas__grid = grid-4). Odsazení od nadpisové části dělá mezera kontejneru, ne margin. */ .pillars { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; align-items: start; } /* .hp-o-nas__icon-box je běžný blok: ikona / nadpis / text s --content-gap. */ .pillar { display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); text-align: left; } .pillar__icon { color: var(--base); } /* Produkční ikony se vykreslují ve své vlastní velikosti (135,728 x 108,423 a 112,881 x 117,321), proto se nesmí srovnat na jednu výšku. */ .pillar__icon svg { width: auto; max-width: 100%; color: var(--base); } .pillar h3 { font-size: var(--h3); } .pillar p { text-align: left; font-size: var(--text-m); } /* Sekce volný čas / historie (produkce: .hp-content-section). */ .section--story { position: relative; background-color: var(--neutral-ultra-light); padding-top: 200px; padding-bottom: 200px; } .section--story .wrap { row-gap: 200px; z-index: 1; } .story__wordcloud { position: absolute; left: 15%; top: 30px; width: 538px; max-width: none; z-index: 0; pointer-events: none; } .story { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 8%; width: 100%; align-items: stretch; } .story__media img { width: 100%; height: 100%; object-fit: cover; } /* .hp-content-section__text-wrapper.brxe-block {justify-content: center} */ .story__text { display: flex; flex-direction: column; justify-content: center; row-gap: var(--content-gap); } /* ------------------------- 10. Kotvy na podstránkách ------------------- */ .anchor-nav { display: none; width: 100%; margin-block: 30px; padding: 20px var(--gutter); background-color: var(--white); } .anchor-nav > .wrap { width: var(--wrap); max-width: 100%; } .anchor-nav__list { display: flex; flex-direction: row; justify-content: space-between; gap: var(--space-s); width: 100%; list-style: none; margin: 0; padding: 0; } .anchor-nav__list a { font-size: calc(16px * var(--step)); font-weight: 600; color: var(--base); text-transform: uppercase; } .anchor-nav__list a:hover { color: var(--primary); } @media (min-width: 62em) { .anchor-nav { display: flex; flex-direction: column; align-items: center; } } /* --------------------- 11. Poslání služby (jedna sekce) ---------------- */ /* Produkce má celý blok cíle / poslání / cílová skupina / zásady v JEDNÉ sekci `.poslani`, ne v pěti samostatných. Odtud plyne rytmus stránky: .poslani.brxe-section {border-top: 3px solid var(--neutral); padding-top: 100px} .poslani__container.brxe-container {row-gap: 110px} */ .poslani { border-top: 3px solid var(--neutral); padding-top: 100px; } .poslani > .wrap { row-gap: 110px; } /* .poslani__cile-postup = grid-3 (CHB 4 body -> 3+1, SR 3 body). */ .poslani__goals { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; list-style: none; margin: 0; padding: 0; } /* DZR má místo číslovaných bodů dva odstavce vedle sebe pod nadpisem (.poslani__cile-grid {grid-template-columns: var(--grid-2); grid-gap: 5%}). */ .poslani__cile-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 5%; row-gap: var(--space-m); width: 100%; } /* .poslani__cilova-skupina.brxe-block {row-gap: 5px} */ .poslani__skupina { row-gap: 5px; } /* .poslani__duvody.brxe-block {margin-top: 30px} */ .poslani__duvody { margin-top: 30px; } /* .poslani__duvody-grid {grid-2, grid-gap: 5%} */ .poslani__duvody-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 5%; row-gap: var(--space-m); width: 100%; } /* .poslani__zasady-grid {grid-2, grid-gap: 10%} - při 1100 px tedy dva sloupce 495 px s mezerou 110 px. */ .poslani__zasady-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10%; row-gap: var(--space-m); width: 100%; } /* .poslani__skupina-text {width: 50%; padding-block: 20px} */ .poslani__skupina-text { padding-block: 20px; } /* Sociální rehabilitace: texty v blocích sekce `.poslani` jdou v produkci přes celou šířku kontejneru (1100 px). Bez explicitní šířky by se `.prose` jako položka flex sloupce s `align-items: flex-start` smrštila na obsah (1046,414). Scopnuto na `.block`, aby zůstal zachovaný smrštěný `.brxe-text` u terénní formy ve `.facts` (produkce 601,125 v buňce 723,5), a na stránku, aby se nehnula ověřená geometrie CHB a DZR. */ .page-id-1121 .poslani .block .prose { width: 100%; } @media (min-width: 62em) { .page-id-1121 .poslani .block .prose--wide { width: 50%; } } /* .poslani__skupina-podnadpis je h4 (24,4016), ne h3. */ .poslani__skupina-podnadpis { font-size: var(--h4); } @media (min-width: 62em) { .poslani__goals { grid-template-columns: repeat(3, minmax(0, 1fr)); } .poslani__cile-grid, .poslani__duvody-grid, .poslani__zasady-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 49.4375em) and (max-width: 61.9375em) { /* @media (max-width: 790px) {.poslani__cile-postup {grid-2}} */ .poslani__goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .poslani__cile-grid, .poslani__duvody-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); } } /* ---------------------------- Fakta služby ----------------------------- */ /* Produkce: .poslani__main-info = grid-3, label tučně ve velikosti text-m. */ .facts { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; margin: 0 0 30px; } .facts__row { display: flex; flex-direction: column; row-gap: 5px; } /* Na Sociální rehabilitaci má blok "Prostředí poskytované služby" třídu col-span--2 a chová se jako běžný .brxe-block (mezera --content-gap), uvnitř má dvě samostatné dvojice popisek/hodnota s mezerou 5 px. */ .facts__row--wide { row-gap: var(--content-gap); } .facts__group { display: flex; flex-direction: column; row-gap: var(--content-gap); } .facts__sub { display: flex; flex-direction: column; row-gap: 5px; } .facts__sub-label { font-weight: 700; text-align: left; } .facts__label { font-size: var(--text-m); font-weight: 700; text-align: left; text-transform: uppercase; } /* Produkce má za popiskem dvojtečku (NÁZEV POSKYTOVATELE:). */ .facts__label::after { content: ":"; } .facts__value { margin: 0; width: 100%; text-align: left; } .facts__value p { margin: 0; } /* ------------------------------ 12. Ceníky ----------------------------- */ .pricing { width: 100%; margin-top: 60px; } .pricing__head { display: flex; flex-direction: row; align-items: flex-end; column-gap: 10px; margin-bottom: var(--space-s); } .pricing__head h3 { font-size: var(--h4); } .pricing__valid { font-size: var(--text-s); color: var(--neutral-light); } .table-scroll { width: 100%; overflow-x: auto; } .price-table { width: 100%; text-align: left; } .price-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .price-table th, .price-table td { padding: 20px; font-size: var(--text-l); text-align: left; vertical-align: middle; } .price-table thead th { background-color: var(--base-semi-light); color: var(--white); font-weight: 600; height: 90px; } .price-table thead th small { display: block; font-size: var(--text-s); font-weight: 400; color: var(--white); } .price-table tbody th, .price-table tbody td { height: 90px; border-bottom: 1px solid var(--base-light); font-weight: 400; } .price-table tbody th { font-weight: 400; } /* ---------------------------- 13. Dokumenty ---------------------------- */ /* Produkce: .dokumenty__grid = grid-3, karty na bílé ploše, ikona + název. */ .doc-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px; width: 100%; list-style: none; margin: 0; padding: 0; } .doc-item { display: flex; flex-direction: row; column-gap: 15px; align-items: flex-start; padding: var(--space-m); background-color: var(--white); } .doc-item__icon { display: block; color: var(--base); } .doc-item__icon svg { width: 30px; height: 30px; } .doc-item__title { font-size: var(--h4); } .doc-item__title a { color: inherit; } .doc-item:hover .doc-item__title a { color: var(--primary); } .doc-item__meta { margin-top: 5px; font-size: var(--text-s); color: var(--neutral-semi-dark); } .doc-item__excerpt { margin-top: 10px; font-size: var(--text-s); } /* .dokumenty__text.brxe-text {width: 50%} - úvodní text nad výpisem dokumentů drží polovinu kontejneru, ne celou šířku. */ .docs-intro { width: 100%; } @media (min-width: 62em) { .docs-intro { width: 50%; } } .doc-group { width: 100%; } .doc-group + .doc-group { margin-top: 130px; } /* Produkce: .dokumenty__h4-heading, tedy velikost --h4. */ .doc-group__title { margin-bottom: var(--space-m); font-size: var(--h4); } /* Druhá sekce: .dokumenty-typy na bílé ploše. Prostý seznam odkazů (.dokumenty-typy__grid = grid-3 s mezerou kontejneru), žádné karty. */ .doc-types__group { width: 100%; } .doc-types__group + .doc-types__group { margin-top: 130px; } .doc-types__title { margin-bottom: var(--space-m); font-size: var(--h3); } .doc-links { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-m); width: 100%; list-style: none; margin: 0; padding: 0; } .doc-link { display: flex; flex-direction: row; column-gap: 15px; align-items: flex-start; } .doc-link__icon { display: block; flex: none; color: var(--base); } .doc-link__icon svg { width: 18.244px; height: 22.58px; } .doc-link__text { font-size: var(--text-m); font-weight: 600; color: var(--base); text-decoration: none; } .doc-link__text:hover, .doc-link:hover .doc-link__text { color: var(--primary); } /* Stránka Dokumenty je v produkci jedna sekce: .dokumenty.brxe-section {background: var(--neutral-ultra-light); padding-top: 190px; padding-bottom: 190px} a první podnadpis má margin-top 100px nad mezerou kontejneru. */ /* Stránka Dokumenty má rozestupy skupin řešené marginem 130px, ne mezerou kontejneru - ověřená geometrie (H1 na y190) se tím nesmí posunout. */ .docs-page .wrap { gap: 0; } .docs-page .page-hero { padding-top: 190px; padding-bottom: 0; background-color: var(--neutral-ultra-light); } .docs-page .section--ink { padding-top: 0; padding-bottom: 190px; } .docs-page .doc-group:first-child .doc-group__title { margin-top: 130px; } @media (max-width: 49.375em) { .docs-page .page-hero { padding-top: 160px; } .docs-page .section--ink { padding-bottom: var(--section-space-m); } .docs-page .doc-group:first-child .doc-group__title { margin-top: var(--section-space-s); } } /* Zájemci o službu: sekce dokumentů je v produkci `.dokumenty.brxe-section` s paddingem 190px nahoře i dole (#brxe-aunwje stránka, zdroj notes/precision-reference/zajemci-o-sluzbu.css). Výchozí --section-space-m (86,4) posouvá formulář o ~268 px nahoru. Produkce nemá pro tuto sekci žádný mobilní přepis, takže tu není ani tady. */ .page-id-57 #dokumenty.section--ink, .page-id-58 #dokumenty.section--ink, .page-id-63 #dokumenty.section--ink { padding-block: 190px; } .filter-bar { width: 100%; margin-bottom: var(--space-l); } .filter-bar__list { display: flex; flex-wrap: wrap; gap: 15px var(--space-m); list-style: none; margin: 0; padding: 0; } .filter-bar__list a { font-size: var(--text-s); font-weight: 600; color: var(--base); text-transform: uppercase; } .filter-bar__list a:hover { color: var(--primary); } .filter-bar__list a[aria-current="true"] { color: var(--primary); text-decoration: underline; } /* --------------------------- 14. Kontakty ------------------------------ */ /* Produkce: kontaktní bloky začínají na y325 (nadpis zůstává na y200). Spodní padding hera a horní padding sekce se jinak sčítají a rozestup se zdvojuje - hero proto končí bez paddingu a sekce navazuje --space-m. */ .page-id-59 .page-hero { padding-bottom: 0; } .page-id-59 #pracoviste { padding-top: var(--space-m); } /* Stránka Kontakty: tři rovnocenné bloky (produkce .kontakty-page__grid). */ .contact-blocks { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; margin-top: 50px; padding-bottom: 90px; border-bottom: 1px solid var(--neutral-semi-light); } .contact-block { text-align: left; } .contact-block__title { font-size: var(--h4); margin-bottom: var(--space-s); } .contact-block__addresses { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-s); list-style: none; margin: 0 0 var(--space-s); padding: 0; } .contact-block__addresses li { padding-left: 10px; border-left: 1px solid var(--neutral-semi-light); } .contact-block__addresses address { font-style: normal; text-align: left; } .contact-block__detail { margin-top: var(--space-s); text-align: left; } .contact-block__label { display: block; font-weight: 700; text-transform: uppercase; } .contact-block__links { display: flex; flex-direction: column; row-gap: 5px; list-style: none; margin: var(--space-s) 0 0; padding: 0; } .contact-block__links li { display: flex; flex-direction: row; align-items: center; column-gap: 15px; } .contact-block__links .icon { width: 20px; height: 20px; color: var(--base); } .contact-block__links a { font-weight: 600; } .contact-block__more { margin-top: var(--space-s); } /* Lidé. Dvě různé karty, které se nesmí slít dohromady: - stránka Kontakty: .kontakty-lide__grid = grid-3 (mezera --grid-gap), karta má NEJPRVE funkci jako nadpis h4 a pod ní jméno; - stránky služeb: .kontakty__grid = grid-2 (mezera --space-l), karta má sloupec fotografie (grid 1fr / 3fr) a nejprve jméno, pak funkci. */ .team-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; list-style: none; margin: 0; padding: 0; } .person__links { display: flex; flex-direction: column; row-gap: 5px; list-style: none; margin: 0; padding: 0; } .person__links li { display: flex; flex-direction: row; align-items: center; column-gap: 15px; } .person__links .icon { width: 18px; height: 18px; color: var(--base); } .person__links a { font-weight: 600; } /* .kontakty__heading.brxe-heading {font-size: var(--text-l)} - platí pro nadpis sekce i pro jméno člověka na stránkách služeb. */ .service-contacts__title { font-size: var(--text-l); } /* --- Karta na stránce služby (.kontakty__kontakt-wrapper) --- */ /* grid-template-columns: var(--grid-1-3) = minmax(0,1fr) minmax(0,3fr). Sloupec fotografie zůstává i bez obrázku, jinak by se jména posunula doleva proti produkci (x 236,625 / 808,5625 při šířce 1265). */ .person--service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--content-gap); align-items: start; } .person--service .person__photo { width: 100%; } .person--service .person__photo img { width: 140px; max-width: 100%; height: auto; object-fit: cover; } .person--service .person__body { display: flex; flex-direction: column; row-gap: 0; width: 100%; min-width: 0; } .person--service .person__name { font-size: var(--text-l); font-weight: 700; } /* .kontakty__text {color: var(--base-semi-light); padding-bottom: 15px} */ .person--service .person__role { margin-top: 0; padding-bottom: 15px; color: var(--base-semi-light); text-align: left; } /* --- Karta na stránce Kontakty (.kontakty-lide__clovek) --- */ /* row-gap: 0; funkce je nadpis h4 (24,4016/700) s odsazením 15 px nahoře i dole, jméno pod ní je text 17,829/600. */ .person--team { display: flex; flex-direction: column; align-items: flex-start; row-gap: 0; } .person--team .person__body { display: flex; flex-direction: column; align-items: flex-start; row-gap: 0; width: 100%; } .person--team .person__photo { margin-bottom: var(--space-s); } .person--team .person__photo img { width: 86px; height: 86px; object-fit: cover; } .person--team .person__role { padding-block: 15px; color: var(--base); font-size: var(--h4); font-weight: 700; line-height: var(--heading-line-height); text-align: left; } /* Produkce má jméno jako `.brxe-text-basic` (div), ne odstavec - řádkování proto dědí spočítané z těla (24,6431 px) a nepřepočítává se z tučného řezu (to by dalo 24,939 px). */ .person--team .person__name { font-size: var(--text-m); font-weight: 600; line-height: inherit; } .person--team .person__note { color: var(--base-semi-light); text-align: left; } /* ------------------- 15. Výpisy aktualit, pozic, hledání --------------- */ /* Výpisové stránky (Aktuality, Kariéra) mají v produkci jednu sekci `.aktuality` s horním odsazením 200 px na ploše --neutral. Nadpis a stránkování jsou v jednom řádku (.aktuality__heading-grid). */ .listing { padding-top: 200px; background-color: var(--neutral); } .listing__head { display: flex; flex-direction: row; align-items: stretch; justify-content: space-between; gap: var(--content-gap); width: 100%; } .listing__title { font-size: var(--h2); font-weight: 700; } .listing__foot { display: flex; justify-content: flex-end; width: 100%; } /* .kariera-info-text {font-size: var(--text-xl); line-height: 1.2em} přes celou šířku kontejneru (col-span--3 v mřížce výpisu). */ .listing__intro { width: 100%; font-size: var(--text-xl); line-height: 1.2em; } /* Řádkování 1.2em platí jen na wrapperu. Odstavce uvnitř si ho v produkci přebijí pravidlem `p, li {line-height: var(--text-line-height)}`, takže při 31,2194 px vyjde 38,6477 px (ne 37,4633 px z 1.2em). */ .listing__intro p { font-size: inherit; line-height: var(--text-line-height); } .listing__intro > * + * { margin-top: 0.6em; } @media (max-width: 29.875em) { .listing { padding-top: 190px; } } /* Produkce .hp-novinky__aktualita-block: plocha --neutral-hover, datum šedé, odkaz oranžový, sekce na --neutral. */ .entry-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--space-s); width: 100%; align-items: stretch; } .entry-card { display: flex; flex-direction: column; justify-content: space-between; row-gap: 5px; padding: var(--space-m); background-color: var(--neutral-hover); } /* Datum je v produkci `.brxe-text-basic` (div): 14,829 px, ale s řádkováním zděděným z těla (24,6431 px), ne přepočítaným z vlastní velikosti (21,5). */ .entry-card__date { font-size: var(--text-s); line-height: inherit; color: var(--date-grey); } .entry-card__title { font-size: var(--h4); } .entry-card__title a { color: inherit; } .entry-card:hover .entry-card__title a { color: var(--primary); } .entry-card__excerpt { font-size: var(--text-s); } .entry-card__more { margin-top: var(--space-s); } .entry-card__more .link-more { color: var(--primary); } .card { width: 100%; padding: var(--space-m); background-color: var(--neutral-ultra-light); } .card__title { font-size: var(--h4); } .card__meta { font-size: var(--text-s); color: var(--date-grey); } .card__body { margin-top: var(--space-s); } .card__foot { margin-top: var(--space-m); } .entry-header { width: 100%; margin-bottom: var(--space-m); } .entry-header__date { font-size: var(--text-s); color: var(--date-grey); } .pagination { width: 100%; } .pagination .nav-links { display: flex; justify-content: flex-end; } .pagination ul { display: flex; gap: 15px; list-style: none; margin: 0; padding: 0; } .pagination .page-numbers { color: var(--base); font-weight: 600; } .pagination .page-numbers:hover { color: var(--primary); } .pagination .page-numbers.current { color: var(--primary); } .search-form { display: flex; gap: 10px; width: 100%; max-width: 520px; } .search-form input[type="search"] { flex: 1; padding: 15px 30px; border: 0; border-radius: 0; background-color: var(--neutral-ultra-light); color: var(--base); font: inherit; } .search-form button { padding: 15px 30px; border: 0; border-radius: 4px; background-image: linear-gradient(to right, #fd951c, #b92907); color: #fff; font-weight: 700; text-transform: uppercase; cursor: pointer; } .search-form button:hover { background-image: linear-gradient(to right, #fca912, #d23305); } .attachment-preview { width: 100%; margin-top: var(--space-m); } .attachment-preview img { width: 100%; height: auto; } /* ---------------------------- 16. Fotogalerie -------------------------- */ /* Jednotné náhledy 240 px a funkční lightbox (schválená odchylka od produkčního mozaikového gridu, viz notes/theme-review-result.md). */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; width: 100%; list-style: none; margin: 0; padding: 0; } .gallery__link { display: block; overflow: hidden; height: 240px; cursor: pointer; } .gallery__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease, filter 0.3s ease; } .gallery__link:hover img { transform: scale(1.05); filter: brightness(1.1); } dialog.lightbox { max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(0, 0, 0, 0.9); color: #fff; } dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.9); } .lightbox__bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 20px; } .lightbox__btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 20px; cursor: pointer; } .lightbox__btn:hover { background: rgba(255, 255, 255, 0.4); } .lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; height: calc(100% - 80px); } .lightbox__figure img { max-width: 90%; max-height: 90%; object-fit: contain; } .lightbox__caption { margin-top: 10px; font-size: var(--text-s); } /* ------------------- 17. Postup podání žádosti (Zájemci) --------------- */ /* Rozcestník tří služeb: .sluzby__container je mřížka se dvěma sloupci, úvodní text v ní zabírá oba (col-span--2), karty pak padnou 2 + 1. */ .service-picker { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; } /* .postup-sluzby.brxe-section {padding-bottom: 120px} */ .section--apply { padding-bottom: 120px; } /* .postup-sluzby__heading je h4 (24,4016), ne --h2. */ .apply-row__title { font-size: var(--h4); } /* Horní řádek postupu: .postup-sluzby__texty-horni {flex-direction: row; margin-bottom: 50px}. Levý sloupec má width 30 %, pravý dědí width 100 % z .brxe-block - po smrštění vyjde 247 / 823 px při šířce 1100. */ .apply-row { display: flex; flex-direction: row; gap: var(--content-gap); width: 100%; margin-bottom: 50px; } .apply-row__main { display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px; width: 30%; } /* .postup-sluzby__odrazky-wrapper {row-gap: 10px; padding-top: 40px} */ .apply-row__aside { display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px; width: 100%; padding-top: 40px; } /* .postup-sluzby__maly-nadpis má font-size var(--text-m), ne --h2. */ .apply-row__aside > h2, .apply-row__aside > h3, .apply-row__aside > h4 { font-size: var(--text-m); } /* .postup-sluzby__odrazky {flex-direction: row}, položky width 33 %. */ .apply-cols { display: flex; flex-direction: row; gap: var(--content-gap); width: 100%; } .apply-col { width: 33%; } /* Ikona kroku + vodorovná linka (.postup-sluzby__cisla / __cislo-wrapper). */ .step-line { display: flex; flex-direction: row; align-items: center; column-gap: 10px; width: 100%; } .step-line__icon { display: block; min-width: 70px; color: var(--base); } .step-line__icon svg { width: auto; height: auto; color: var(--base); } .step-line__rule { flex: 0 1 200px; height: 2px; background-color: var(--neutral); } /* Horní řádek (.postup-sluzby__cisla) má mezeru bloku a linku přes zbytek šířky; u jednotlivých kroků je mezera 10 px a linka 200 px. */ .step-line--wide { column-gap: var(--content-gap); } .step-line--wide .step-line__rule { flex: 1 1 auto; } /* Čtyři následné kroky: .postup-sluzby__cisla-dolni = grid-4. */ .steps { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--grid-gap); width: 100%; list-style: none; margin: 0; padding: 0; } .step { display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); position: relative; } .step__body { display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px; width: 100%; } .step__body h3, .step__body h4 { font-size: var(--h4); } /* .postup-sluzby__text-spodni {font-size: var(--text-s)} */ .step__body p { font-size: var(--text-s); text-align: left; } .step::after { content: none; } .apply-col h3, .apply-col h4 { font-size: var(--h4); margin-bottom: 10px; } .apply-col ul { list-style: none; margin: 0; padding: 0; } .apply-col ul li { position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 1.4; } .apply-col ul li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; background-color: var(--base); } .apply-col address { font-style: normal; } .apply-col a { color: var(--primary); font-weight: 600; } /* Karta služby v rozcestníku (Zájemci) - produkce .sluzby__sluzba-wrapper. */ .service-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; row-gap: var(--content-gap); padding: var(--space-m); background-color: var(--neutral-ultra-light); } .service-card__title { font-size: var(--h4); } .service-card__title a { color: inherit; } .service-card:hover .service-card__title a { color: var(--primary); } .service-card__perex { font-size: var(--text-s); } .service-card__facts { font-style: normal; font-size: var(--text-s); color: var(--neutral-semi-dark); } /* ------------------- 18. Kontaktní blok s formulářem ------------------- */ /* Produkce .form-sekce - jen na Kontaktech a Zájemcích o službu. */ .contact-cta { background-color: var(--neutral); } /* .form-sekce__heading.brxe-heading {width: 55%} */ .contact-cta__title { width: 100%; } @media (min-width: 62em) { .contact-cta__title { width: 55%; } } @media (min-width: 49.4375em) and (max-width: 61.9375em) { .contact-cta__title { width: 70%; } } /* .form-sekce__grid je flex řádek se dvěma bloky na plnou šířku, které se srovnají na 535,2578 px s mezerou --content-gap (29,487 při 1265 px). Mřížka se dvěma stejnými sloupci a stejnou mezerou dá totéž. */ .contact-cta__grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--content-gap); width: 100%; } .contact-cta__form { display: flex; flex-direction: column; row-gap: var(--content-gap); width: 100%; } .contact-cta__ways { display: flex; flex-direction: column; row-gap: var(--content-gap); } /* .form-sekce__icon-block {height: 120px; width: 390px; padding: 15px} */ .contact-cta__way { display: flex; flex-direction: row; align-items: center; column-gap: var(--space-s); justify-content: center; height: 120px; width: 390px; max-width: 100%; padding: 15px; background-color: var(--neutral-ultra-light); } /* .form-sekce__text-wrapper.brxe-block {row-gap: 0} */ .contact-cta__way-text { display: flex; flex-direction: column; row-gap: 0; } .contact-cta__way .icon { height: 42px; width: auto; color: var(--base); } .contact-cta__way h3 { font-size: var(--h4); } .contact-cta__way a { font-size: var(--text-l); font-weight: 600; color: var(--base); } .contact-cta__way a:hover { color: var(--primary); } /* .form-sekce__xfluentform.brxe-xfluentform {font-size: 12px; display: block} Odtud má text souhlasu 12 px / řádek 18,5508. */ .form-shell { width: 100%; font-size: 12px; } .form-shell label { display: block; margin-bottom: 5px; } .form-shell input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), .form-shell textarea, .form-shell select { width: 100%; padding: 15px 30px; border: 0; border-radius: 0; background-color: var(--neutral-ultra-light); color: var(--base); font: inherit; font-size: var(--text-s); } .form-shell textarea { min-height: 140px; } .form-shell button, .form-shell input[type="submit"] { width: 220px; padding: 15px 40px; border: 0; border-radius: 4px; background-image: linear-gradient(to right, #fd951c, #b92907); color: #fff; font-weight: 700; font-size: var(--text-l); text-transform: uppercase; cursor: pointer; } .form-shell button:hover, .form-shell input[type="submit"]:hover { background-image: linear-gradient(to right, #fca912, #d23305); } /* Fluent Form (ID 2) - sjednocení s produkcí. Velikost písma dědí 12 px z obalu (.form-shell), stejně jako v Bricks. */ .form-shell .fluentform .ff-el-group { margin-bottom: 10px; } .form-shell .fluentform .ff-btn-submit { width: 220px; padding: 15px 40px; border: 0; border-radius: 4px; background-image: linear-gradient(to right, #fd951c, #b92907); background-color: transparent; color: #fff; font-weight: 700; font-size: var(--text-l); text-transform: uppercase; } .form-shell .fluentform .ff-btn-submit:hover { background-image: linear-gradient(to right, #fca912, #d23305); } .form-shell .fluentform input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="file"]), .form-shell .fluentform textarea, .form-shell .fluentform select { background-color: var(--neutral-ultra-light); border-style: none; border-radius: 0; padding: 15px 30px; } .form-shell .fluentform ::placeholder { font-size: 14px; color: rgba(34, 44, 59, 0.3); } .grecaptcha-badge { visibility: hidden; } /* ------------------------------ 19. Patička ---------------------------- */ /* .footer.brxe-section - běžná sekce, tedy i svislé odsazení --section-space-m a mezera --container-gap. Bez horního odsazení začínal obsah patičky příliš vysoko. */ .site-footer { display: flex; flex-direction: column; align-items: center; gap: var(--container-gap); width: 100%; background-color: var(--base); color: var(--white); padding-block: var(--section-space-m); padding-inline: var(--gutter); } .site-footer a { color: var(--white); } .site-footer a:hover { color: var(--primary); } /* .footer__container.brxe-container {flex-direction: row} */ .site-footer__grid { flex-direction: row; flex-wrap: wrap; column-gap: var(--content-gap); width: var(--wrap); max-width: 100%; padding-bottom: 50px; } .site-footer__brand { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); width: 30%; padding-top: 110px; } .site-footer__logo { position: absolute; top: 0; left: -30px; width: 180px; } .site-footer__logo-img { width: 180px; height: auto; } /* .footer__adresa-wrapper.brxe-block {row-gap: 5px} - tři samostatné řádky s vlastním boxem, ne jeden odstavec s
a řádkováním 1,6. */ .site-footer__address { display: flex; flex-direction: column; row-gap: 5px; font-style: normal; font-size: var(--text-s); color: var(--white); text-align: left; } .site-footer__contacts { display: flex; flex-direction: column; row-gap: 5px; list-style: none; margin: 0; padding: 0; font-size: var(--text-s); } .site-footer__contacts li { display: flex; flex-direction: row; align-items: center; column-gap: 20px; /* Produkce má spojení v blocích, ne v seznamu - řádek proto zůstává na zděděné hodnotě 24,6431, ne na dopočítané pro 14,829. */ line-height: inherit; } /* .footer__kontakt-text {font-size: var(--text-s); color: var(--white)} - bez zvýrazněného řezu, produkce má běžnou tloušťku 400. */ .site-footer__contacts a { font-weight: 400; } .site-footer__contacts .icon { width: 22px; height: 22px; color: var(--neutral); } .site-footer__nav { flex: 1; min-width: 0; display: flex; flex-direction: column; row-gap: 0; } /* .footer__top.brxe-block {padding-top: 20px; padding-bottom: 50px} - dvě navigace pod sebou s mezerou bloku (--content-gap, tedy 29,487). */ .site-footer__links { display: flex; flex-direction: column; row-gap: var(--content-gap); width: 100%; padding-top: 20px; padding-bottom: 50px; border-bottom: 1px solid var(--neutral-semi-light); } /* .footer__top-menu .bricks-nav-menu {gap: 50px}, písmo --text-s / 400. */ .site-footer__list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 50px; list-style: none; margin: 0; padding: 0; font-size: var(--text-s); text-align: left; } /* .footer__bottom.brxe-block {padding-top: 50px}, nadpis je h4. */ .site-footer__docs { display: flex; flex-direction: column; align-items: flex-start; gap: var(--content-gap); width: 100%; padding-top: 50px; } .site-footer__heading { color: var(--white); font-size: var(--h4); text-transform: uppercase; } .site-footer__docs .site-footer__list { flex-direction: column; gap: var(--content-gap); } .site-footer__docs .site-footer__list li { display: flex; flex-direction: row; align-items: center; column-gap: 10px; line-height: inherit; } .site-footer__docs .icon { width: 18px; height: 22px; color: var(--neutral); } .site-footer__docs a { color: var(--grey-text); font-size: var(--text-s); } .site-footer__docs a:hover { color: var(--primary); } /* .copyright.brxe-section je samostatná sekce ZA tmavou patičkou: padding-block 10px, bez vlastního pozadí (tedy bílá plocha stránky), text --text-s / 700 v základní barvě a vodorovně na střed (.copyright__container {align-items: center}). */ .site-copyright { display: flex; flex-direction: column; align-items: center; width: 100%; padding-block: 10px; padding-inline: var(--gutter); background-color: var(--white); } .site-copyright__inner { align-items: center; } .site-copyright p { margin: 0; font-size: var(--text-s); font-weight: 700; color: var(--base); } /* ---------------------------- 20. Responzivita ------------------------- */ /* Produkce používá body 478 / 790 / 991 px. */ @media (min-width: 30em) { .facts { grid-template-columns: repeat(1, minmax(0, 1fr)); } .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc-list { grid-template-columns: repeat(1, minmax(0, 1fr)); } /* Produkce drží .dokumenty-typy__grid na třech sloupcích až do 478 px. */ .doc-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .entry-list { grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media (min-width: 49.4375em) { /* > 790px */ .grid--2, .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .entry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .entry-list--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } .story { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-cta__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 62em) { /* > 991px */ .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .doc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .entry-list, .entry-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .contact-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* .kontakty__grid = grid-2 s mezerou --space-l (43,888 při 1265 px). */ .service-contacts .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); } } /* Tablet a mobil: hlavička se sbalí do tlačítka, panel přístupnosti zmizí. */ @media (max-width: 62em) { .site-header__toggle { display: inline-flex; } .site-nav--services { display: none; } /* Otevřené mobilní menu (main.js sundá atribut `hidden`). */ .mobile-menu:not([hidden]) { display: block; } } @media (max-width: 49.3125em) { /* <= 789px, jako produkce */ .site-nav--secondary { display: none; } .site-tools { display: none; } /* Produkční hlavička je na mobilu vysoká 80 px: pruh má padding 10px 0 a vnitřek jen pravou mezeru 30 px, logo tedy sedí na x = 0. */ .site-header__bar { padding: 10px 0; } .site-header__inner { width: 100%; max-width: 100%; margin: 0; padding: 0 30px 0 0; } /* Produkce má hamburger PŘED odkazem na Facebook. */ .site-header__toggle { order: -1; } .site-header__toggle-bars { width: 25px; } .site-header__toggle-bars span + span { margin-top: 3.5px; } .hero { padding-bottom: 100px; } .hero__content { width: 100%; } .hero__media { position: static; width: 100%; margin-top: var(--space-l); } .hero__media img { width: 100%; } .about__head { width: 100%; } /* Motýlí wordcloud přetéká záměrně; na mobilu ho ořízne sekce, ne body. */ .section--story { overflow: hidden; padding-top: var(--section-space-l); padding-bottom: var(--section-space-l); } .section--story .wrap { row-gap: var(--section-space-l); } .story__wordcloud { left: -20%; opacity: 0.5; } .story__media { order: -1; height: 20rem; } .site-footer__grid { flex-direction: column; } .site-footer__brand { width: 100%; } .site-footer__logo { position: static; left: 0; margin-bottom: var(--space-s); } .site-footer__brand { padding-top: var(--section-space-s); } .site-footer__list { flex-direction: column; gap: 10px; } .page-hero { padding-top: 160px; } .page-hero--band { padding-top: 150px; } .person--service { grid-template-columns: minmax(0, 1fr); } .person--service .person__photo:empty { display: none; } .person--service .person__photo img { width: 86px; height: 86px; } .contact-cta__way { width: 100%; height: auto; padding: var(--space-s); } /* .postup-sluzby: sloupce se skládají pod sebe (produkční zlom 790 px). */ .apply-row { flex-direction: column; } .apply-row__main { width: 100%; } .apply-row__aside { padding-top: var(--space-m); } .poslani { padding-top: var(--section-space-m); } .poslani > .wrap { row-gap: var(--section-space-m); } .listing { padding-top: 160px; } .listing__head { flex-direction: column; align-items: flex-start; } } @media (max-width: 29.875em) { /* <= 478px */ .apply-cols { flex-direction: column; } .apply-col { width: 100%; } } @media (max-width: 29.875em) { /* <= 478px */ /* Produkce drží zarovnání do bloku i na mobilu - žádný přepis na left. */ .price-table th, .price-table td { padding: 12px; font-size: var(--text-m); } .price-table thead th small { font-size: 10px; } /* Tlačítka se na mobilu neroztahují na plnou šířku, drží min-width 220. */ .hero__actions { flex-direction: column; align-items: flex-start; row-gap: var(--space-m); } .gallery { grid-template-columns: minmax(0, 1fr); } } /* V tmavém režimu se patička obrací stejně jako na produkci: plocha --base (světlá) a text --white (černý). Proto se tady nic nepřepisuje. */ @media print { .site-header, .site-tools, .site-footer__links { display: none !important; } body { color: #000; background: #fff; } } /* -------------------- 21. Detailové šablony ----------------------------- */ /* --------------------------------------------------------------------------- * Detailové šablony (aktualita / kariéra / dokument) - přesná geometrie podle * produkce eminzamek.cz. * * Zdroj: notes/precision-reference/single-news.css, single-job.css, * single-document.css (sekce `.obsah*`) + notes/production-reference/ * single-news.html, single-job.html, single-document.html. * * Scope: pouze `.section--detail` / `.detail-entry` - nové třídy, které nosí * výhradně single-aktualita.php, single-kariera.php a single-dokument.php. * Žádný selektor nemíří na sdílené sekce, archivy, homepage ani stránky služeb. * * Doplněk k `.site-main > :first-child` (sekce 6): ten selektor má * `:not(.section--detail)`, jinak by svou specificitou přebil padding 200px. * ------------------------------------------------------------------------- */ /* `.obsah.brxe-section {background-color: var(--neutral); padding-top: 200px}` Produkce přepisuje jen horní padding, spodní zůstává na výchozí sekci (--section-space-m). Proto tady NE `.section--tight`. */ .section--detail { padding-block: 200px var(--section-space-m); background-color: var(--neutral); } /* `.obsah__container.brxe-container {row-gap: 0px}` - mezery řeší až vnitřní wrapper. */ .section--detail > .wrap { gap: 0; } /* `.obsah__content-wrapper.brxe-block {width: 70%; row-gap: var(--space-s)}` 70 % z --wrap (1100px) = 770px na desktopu 1265px. */ .detail-entry { width: 70%; gap: var(--space-s); } /* `@media (max-width: 790px) {.obsah__content-wrapper {width: 100%}}` */ @media (max-width: 49.375em) { .detail-entry { width: 100%; } } /* Produkce má titulek jako h2 (var(--h2) = 38.8px @1280). Držíme sémantické H1 a srovnáváme jen velikost - stejný vzor jako `.page-hero__title`. */ .detail-entry__title { width: 100%; font-size: var(--h2); font-weight: 700; } /* `.obsah__datum.brxe-text-basic {font-weight: 600}` - bez přepisu velikosti i barvy, takže dědí tělo: var(--text-m) = 17.829px a var(--base). Formulace data zůstává ze šablony (srozumitelnější než produkce). */ .detail-entry__date { font-size: var(--text-m); font-weight: 600; color: var(--base); } /* `.obsah__excerpt.brxe-text {margin-top: 40px; margin-bottom: 40px}` */ .detail-entry__excerpt { font-size: var(--text-m); margin-block: 40px; } /* `.obsah__obsah.brxe-text {font-size: var(--text-s)}` + odkazy dědí. */ .detail-entry__content { font-size: var(--text-s); } .detail-entry__content a { font-size: inherit; } /* Sdílené komponenty uvnitř detailu: jejich vlastní vertikální margin by se sčítal s row-gapem wrapperu, v produkci odstup dělá jen gap. Scopnuto na `.detail-entry`, globální pravidla zůstávají. */ .detail-entry .attachment-preview { margin-top: 0; } .detail-entry .filter-bar { margin-bottom: 0; } /* Tlačítko k souboru: v produkci (pozice) je to přímý potomek wrapperu a odstup dělá jen row-gap - žádný extra margin, `.detail-entry__action` je proto jen hook pro případné budoucí doladění. Doplňkové řádky, které produkce na detailu nemá (kontakt u pozice, zpětný odkaz u dokumentu) drží původní odstup šablony var(--space-l), zmenšený o row-gap wrapperu. */ .detail-entry__note { margin-top: calc(var(--space-l) - var(--space-s)); } /* ========================================================================= Precision mobile finish - dopiš na KONEC theme/eminzamek/assets/css/main.css (za blok @media print, aby přepis fungoval bez !important). Opravy proti produkci (eminzamek.cz), měřeno na 375 px. Desktop homepage se nemění: mobilní pravidla jsou uvnitř media dotazů, patička/spojení kopíruje produkční kaskádu a na desktopu dává stejné hodnoty jako dnes (14,829 / 24,6431). Poslední blok (detail) je oprava šířky, která se desktopu naopak týká - viz komentář u něj. ========================================================================= */ /* 1) Sekce Volný čas / Historie (.hp-content-section) Produkce drží 200 px na VŠECH šířkách - padding-top, padding-bottom i row-gap kontejneru. Mobilní přepis na --section-space-l v main.css (~ř. 2032-2037) sekci zkrátil (1667,578 px místo 2004,523 px). Ořez motýla (overflow: hidden), .story gap 8 % a .story__media 20rem zůstávají beze změny. */ @media (max-width: 49.3125em) { /* <= 789 px, stejný zlom jako zbytek souboru */ .section--story { padding-top: 200px; padding-bottom: 200px; } .section--story .wrap { row-gap: 200px; } } /* 1b) Hero - mezera nad motýlem na mobilu Produkční obrázek NENÍ dítě .hp-hero__container, ale jeho SOUROZENEC uvnitř sekce. Na mobilu (position: static) ho tedy odděluje mezera sekce --container-gap (43,3865 px), ne mezera kontejneru --content-gap (24,1789 px). My máme --space-l (32,3799 px) - odtud přesně chybějících 11,0078 px (obrázek y 691,2422 místo 702,25) a konstantní posun -11 px na všech uzlech pod hero. Vnitřek i výška obrázku sedí přesně (container y 179,25 / h 479,6172, obrázek h 324,6563), proto stačí srovnat tuhle jedinou mezeru. */ @media (max-width: 49.3125em) { /* <= 789 px */ .hero__media { margin-top: var(--container-gap); } } /* 2) Patička - spojení (.footer__kontakty / .footer__kontakt-text) Produkce nemá velikost písma na obalu seznamu, jen na textu odkazu. Tím řádek zůstává na zděděné hodnotě těla (22,7919 na mobilu, 24,6431 na desktopu) a odkaz má --text-s (13,0596 / 14,829). U nás velikost seděla na