/* "Skip to content" link (WCAG 2.4.1 Bypass Blocks) — first focusable element in (see portal/frontend/index.php), off-screen until tabbed to so mouse users never see it. z-index above the sticky header (max 9999 elsewhere in this file) so it isn't hidden under it when focused while scrolled down. */ .mu-skip-link { position: absolute; top: 0; left: 0; transform: translateY(-100%); z-index: 10000; padding: 12px 20px; background: #c01b21; color: #fff; font: bold 15px/1.4 sans-serif; text-decoration: none; } .mu-skip-link:focus { transform: translateY(0); } /* Small breathing room below the header divider before the filter row — the .mu-meta block that used to sit here (aktuální počet sbírkových předmětů, now moved to the footer) provided this spacing incidentally via its own margin; overrides the base styles.css padding-top:0. */ .mu-collection { padding-top: 20px; } /* Match MUO: the filter row has its own centered 1080px wrapper and four columns on desktop. */ .mu-filter-fields--centered { max-width: 1080px; margin-right: auto; margin-left: auto; } @media (min-width: 860px) { .mu-filter-fields--centered>.col--6 { width: 25%; } } /* Sticky header (logo/search/nav) — toggled by @layout.latte's script via the stickySearchFilterEnabled admin setting. The spacer's height is set by that same script, matching the header's own height while it's pinned, so the page content directly below doesn't jump up by that amount when
leaves normal flow.
already spans full width outside of any .container, so position:fixed;left:0;width:100% is correct as-is — no need to also track/copy the element's own left/width like the old sticky filter row did (that one lived *inside* a centered, max-width .container). */ .mu-sticky-header-spacer { height: 0; } .header.mu-sticky-header--fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* Homepage "Procházet vše" button, right below the filter row — .btn is inline-block by default (base styles.css), so centering needs a block-level text-align:center wrapper. */ .mu-browse-all { margin: 20px 0 0; text-align: center; } /* Nowhere on this page should text render ALL CAPS via CSS transform — the underlying labels (nav links, footer item count, "Detail" card action, autocomplete headings/categories/ filters) are already written in natural case (first letter up, rest down) in their templates/PHP; these were the base styles.css / cards.css rules still forcing uppercase display over them regardless. */ .nav a, .footer__info, .mu-demo-card-action-label, .mu-demo-collection-card-action-label, .mu-search-suggest__heading, .mu-search-suggest__category, .mu-search-suggest__filter-label { text-transform: none; } /* base styles.css has both h1{text-transform:uppercase} (0,0,1) and, more specifically, .header h1{...text-transform:uppercase} (0,1,1) — a bare .mu-collection__logo override (0,1,0) would still lose to the latter, so matching its two-class specificity here. */ .header .mu-collection__logo { text-transform: none; } .mu-search-suggest__filter-value { text-transform: none !important; } /* Nav link hover + active-page indicator (is-active set server-side in @layout.latte via $presenter->isLinkCurrent(), matching each link's own destination/params). Reuses the same red already used elsewhere as an accent (logo dot, .is-selected select2 state). */ .nav a { position: relative; padding-bottom: 3px; transition: color 140ms ease; } .nav a:hover, .nav a:focus-visible { color: #c01b21; } .nav a.is-active { color: #c01b21; font-weight: 700; } .nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #c01b21; } /* Jazykový přepínač — vlajka + dropdown (
/, viz @layout.latte), co nejméně místa v hlavičce. .nav li/.nav a base pravidla (inline-block, 40px mezera mezi
  • , podtržení is-active, ...) se kaskádují na VŠECHNY
  • / uvnitř .nav včetně téhle položky, proto je potřeba je tady výslovně přebít. */ .mu-lang-switch { position: relative; /* .nav li+li má 40px mezeru — u posledního nav itemu (samotná vlajka) je zbytečně velká, dropdown má být co nejblíž předchozímu odkazu. */ margin-left: 12px !important; } .mu-lang-switch__dropdown { display: inline-block; } .mu-lang-switch__dropdown>summary { list-style: none; cursor: pointer; /* Flags are emoji ({$localeFlags[...]} in @layout.latte), not — their rendered size is just this font-size. */ font-size: 24px; line-height: 1; padding: 2px 4px; border-radius: 4px; user-select: none; } .mu-lang-switch__dropdown>summary::-webkit-details-marker, .mu-lang-switch__dropdown>summary::marker { display: none; content: ''; } .mu-lang-switch__dropdown>summary:hover, .mu-lang-switch__dropdown[open]>summary { background: #f4ede1; } .mu-lang-switch__menu { position: absolute; z-index: 50; top: 100%; right: 0; left: auto; margin: 6px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid #eadfce; border-radius: 6px; box-shadow: 0 8px 20px rgba(32, 20, 10, 0.14); min-width: 0; white-space: nowrap; } .mu-lang-switch__menu li { display: block; margin: 0 !important; } /* The current-locale
  • (see @layout.latte's comment above the $enabledLocales loop) is hidden here by default since desktop already shows the current locale via ; the mobile breakpoint below re-enables it (using !important there, not extra specificity, since this element also needs to win against .mu-lang-switch__menu li{display:block} — same underlying fight as this rule itself needing 2 classes, not 1, to beat that same 1-class+tag rule regardless of source order). */ .mu-lang-switch__menu .mu-lang-switch__item--current { display: none; } .mu-lang-switch__menu a { display: flex; align-items: center; justify-content: center; padding: 6px 10px; font-size: 24px; line-height: 1; border-radius: 4px; text-decoration: none; } .mu-lang-switch__menu a:hover, .mu-lang-switch__menu a:focus-visible { background: #f4ede1; } /* Active-filter row's category label ("Materiál:" etc.) — same red + underline treatment as .nav a.is-active above (already bold via , so font-weight isn't repeated here). */ .mu-filter-label { position: relative; padding-bottom: 3px; color: #c01b21; } .mu-filter-label::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #c01b21; } /* "Kurátorský výběr"/"Kolekce" headings — overrides base styles.css's margin-bottom:45px, which left a much bigger gap before the item grid than the rest of the page's spacing. */ .mu-collection__title { margin-bottom: 15px; } /* a.btn.mu-browse-all__link (2 classes + tag) so this reliably wins over the base styles.css .btn rule's display:inline-block regardless of stylesheet load order. Without the flex actually taking effect, the SVG's default inline vertical-align:baseline sits its bottom edge on the text baseline instead of centering on the text — svg display:block + flex-shrink:0 is a second, independent safety net for the same reason. margin overrides .btn's own unconditional margin:30px 0 (base styles.css) — that plus this wrapper's own margin was stacking into a much bigger gap than intended before the next heading's own margin-top:25px (.mu-collection__title). */ a.btn.mu-browse-all__link { display: inline-flex; align-items: center; gap: 8px; margin: 0; } .mu-browse-all__link svg { display: block; flex-shrink: 0; } /* Filter labels (Instituce, Typ sbírky, ...) — overrides base styles.css's text-transform:uppercase, which forced ALL CAPS display regardless of the underlying text case. The labels themselves (getEnumFilterLabels(), @fakeSelectMulti.latte) already use proper sentence case ("Typ sbírky", not "Typ Sbírky"), so text-transform: none is enough — text-transform: capitalize would wrongly capitalize every word instead of just the first. .select2/.select2-dropdown are select2's own uppercase rules for the same filter widgets (closed label + open option list) — without these too, opening a dropdown would jarringly switch back to ALL CAPS. */ .mu-select-false__input, .mu-select-over__input, .select2, .select2-dropdown { text-transform: none; } /* select2.css's own .select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999} (3 classes, specificity 0,3,0) beat the earlier attempt at this (.mu-js-select-search .select2-selection__placeholder, only 2 classes) — that's why it never visibly changed. Matching the exact selector + !important this time so it's not still a specificity gamble. */ .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #000 !important; } /* Highlighted (hovered, or moved onto via arrow keys) option in ANY select2 dropdown in this template — base styles.css explicitly zeroes this out (".select2-container--default .select2-results__option--highlighted.select2-results__option--selectable, .select2-container--default .select2-results__option--selected{background-color:transparent; color:#000}"), so there was no visual feedback at all for which option the mouse/keyboard was actually over. Deliberately unscoped to a specific dropdown's id/class — every select2 widget here benefits the same way, both the plain filter dropdowns (@fakeSelectMulti.latte) and the sort/page-limit ones above. Matches the base rule's own selector + !important (same specificity, 3 classes) rather than relying on cards.css's later load order to win. */ .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #f0f0f0 !important; } /* Tabbing into a filter dropdown (spravceSbirky/typSbirky/material/..., @fakeSelectMulti.latte) showed no focus ring at all — NOT select2's own doing (its bundled default theme sets no outline on .select2-selection--single at all). The culprit is this project's own ".select2 *{outline:none!important}" further down in the SHARED portal/frontend/css/styles.css (loaded site-wide via in , not template-specific) — it blanket-strips outline from every descendant of every select2 widget, and being !important it beats any plain outline rule regardless of specificity or source order. select2.min.js toggles a "select2-container--focus" class on the outer .select2-container on real DOM focus/blur of the visible .select2-selection span (confirmed in the bundled JS) — hook the outline off that. Needs !important too (to win the specificity tie-break against the other !important rule) and lives here in the template-scoped cards.css rather than in the shared styles.css, so it doesn't affect select2 widgets in other templates. Same outline style as this file's other :focus-visible rules (mu-switch checkbox above); container--focus itself isn't scoped to real keyboard-only focus like :focus-visible is, but select2's focus/blur pair only fires from actual focus/blur events, not from a mouse click held down, so a mouse-triggered false positive isn't a real risk here. */ .select2-container--default.select2-container--focus .select2-selection--single { outline: 2px solid #000 !important; outline-offset: 2px; } /* Same problem as the select2 filters above, different cause: the shared styles.css base rule "input:focus,select:focus,textarea:focus{border-color:#283441;outline:0}" swaps the 1px border from #3c4d60 to #283441 on focus — two dark navy shades close enough to be practically indistinguishable, so the native sort ("mu-sort-select"/"mu-collist-raz") and items-per-page ("mu-page-limit-top/bottom"/"mu-collist-pl") ). All of these wrap their AND the big bold/uppercase look base styles.css's sitewide ".select2" rule gives the OTHER filter dropdowns (@fakeSelectMulti.latte). The rules right below this comment only style the plain, un-enhanced here) instead of inheriting the oversized bold-uppercase ".select2" rule meant for @fakeSelectMulti.latte's filter dropdowns. Scoped via "#id + .select2-container" (select2 always inserts its rendered container as the immediate next sibling of the original, now-hidden 's native rendered height), so their TEXT ended up sitting at different vertical offsets despite the boxes themselves being centered. Forcing all three to the same flex/min-height/margin recipe makes their text/controls land on the same line — desktop only (min-width mirrors the 1200px collapse breakpoint used elsewhere in this file), so it doesn't fight the existing mobile margin-bottom:6px stacking rule further down for the same three selectors. */ @media (min-width: 1201px) { /* Base .mu-meta__number{padding-right:40px} used to be the only thing separating these three items — fine between item 1 and 2, but nothing at all separated item 2 (checkbox) from item 3 (sort), so once their own margin:0 above stopped providing incidental horizontal space, "Pouze s obrázkem" ran straight into "Řazení:". gap on the shared flex row (.col) covers all three consistently instead of patching each one individually. */ .mu-meta .row>.col { gap: 32px; } .mu-meta__number, .mu-meta__checkbox, .mu-meta__sort { display: flex !important; align-items: center !important; min-height: 28px !important; margin: 0 !important; line-height: 1.2 !important; } .mu-meta__sort select { vertical-align: middle; margin-left: 6px; } } /* "Nalezeno předmětů:" — the label is now its own