/* ========================================================================== MŠ Jizerská 2026 – vlastní styly (Bootstrap 5.3 doplňuje, nepřepisuje) Tokeny viz Dev/04-DESIGN.md. Všechny barvy textu ověřeny na kontrast ≥ 4.5:1. ========================================================================== */ :root { --msj-green-900: #2f5423; --msj-green-800: #365f28; --msj-green-700: #3f6b2d; --msj-green-600: #4f8a35; --msj-green-500: #6da33a; --msj-green-300: #a9c98a; --msj-green-200: #c4dcac; --msj-green-100: #dfeccd; --msj-green-50: #eef5e4; --msj-cream: #f6f0d2; --msj-cream-200: #efe6bf; --msj-sun: #f2b531; --msj-orange-700: #b9471c; --msj-orange-800: #9a3a15; --msj-red-100: #fdeaea; --msj-red-400: #d47a73; --msj-red-600: #c0392f; --msj-red-800: #a3231b; --msj-ink: #1f2a1a; --msj-ink-muted: #4d5a45; --msj-white: #ffffff; --msj-focus: #1d4ed8; --msj-font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --msj-font-heading: var(--msj-font-system); --msj-radius: .875rem; --msj-radius-sm: .5rem; --msj-shadow: 0 .25rem 1rem rgba(31, 42, 26, .12); --msj-shadow-lg: 0 .75rem 2rem rgba(31, 42, 26, .18); /* Bootstrap tokens */ --bs-body-font-family: var(--msj-font-system); --bs-body-font-size: 1rem; --bs-body-line-height: 1.55; --bs-body-color: var(--msj-ink); --bs-body-bg: var(--msj-cream); --bs-link-color: var(--msj-green-700); --bs-link-color-rgb: 63, 107, 45; --bs-link-hover-color: var(--msj-green-900); --bs-link-hover-color-rgb: 47, 84, 35; --bs-secondary-color: var(--msj-ink-muted); --bs-border-radius: var(--msj-radius-sm); --bs-primary: var(--msj-green-700); --bs-primary-rgb: 63, 107, 45; } html { scroll-behavior: smooth; scroll-padding-top: 1rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } body { min-height: 100vh; display: flex; flex-direction: column; text-rendering: optimizeLegibility; } .msj-main { flex: 1 0 auto; outline: none; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: var(--msj-font-heading); font-weight: 800; line-height: 1.2; color: var(--msj-green-900); } h1, .h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); } h2, .h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem); } h3, .h3 { font-size: 1.25rem; } p { max-width: 75ch; } /* Odstavec je kvůli čitelnosti omezený na 75 znaků. Když je text zarovnaný na střed (nebo doprava), musí se stejně zarovnat i samotný box – jinak text „ujíždí“ o rozdíl mezi 75ch a šířkou sloupce. */ p.text-center, .text-center > p, .msj-content [style*="text-align: center"], .msj-content [style*="text-align:center"] { margin-left: auto; margin-right: auto; } .msj-content [style*="text-align: right"], .msj-content [style*="text-align:right"] { margin-left: auto; margin-right: 0; } a { text-underline-offset: .15em; } a:hover { text-decoration-thickness: 2px; } img, svg, video, iframe { max-width: 100%; } img { height: auto; } /* Grid/flex položky nesmí roztáhnout stránku (reflow, WCAG 1.4.10) */ .msj-card, .msj-card__media, .msj-card__body, .msj-class-card, .msj-gallery__item, .msj-upcoming__item > div { min-width: 0; } /* Focus – viditelný na světlém i tmavém podkladu */ :focus-visible { outline: 3px solid var(--msj-focus); outline-offset: 2px; box-shadow: 0 0 0 6px #fff; border-radius: 2px; } .btn:focus-visible, .form-control:focus-visible { box-shadow: 0 0 0 6px #fff; } /* Skip link */ .msj-skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 3000; padding: .75rem 1.25rem; background: #fff; color: var(--msj-green-900); font-weight: 700; border-radius: var(--msj-radius-sm); box-shadow: var(--msj-shadow-lg); transform: translateY(-200%); } .msj-skip-link:focus { transform: none; outline-offset: 0; } .visually-hidden-sm { position: static; } @media (max-width: 575.98px) { .visually-hidden-sm { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } } .msj-icon { width: 1.25em; height: 1.25em; vertical-align: -.25em; flex-shrink: 0; } .msj-icon--sm { width: 1em; height: 1em; vertical-align: -.15em; } /* -------------------------------------------------------------------------- Tlačítka -------------------------------------------------------------------------- */ .msj-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 2.75rem; padding: .55rem 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; border-width: 2px; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--msj-green-700); --bs-btn-border-color: var(--msj-green-700); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--msj-green-900); --bs-btn-hover-border-color: var(--msj-green-900); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--msj-green-900); --bs-btn-active-border-color: var(--msj-green-900); --bs-btn-focus-shadow-rgb: 63, 107, 45; } .btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: var(--msj-orange-700); --bs-btn-border-color: var(--msj-orange-700); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--msj-orange-800); --bs-btn-hover-border-color: var(--msj-orange-800); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--msj-orange-800); --bs-btn-active-border-color: var(--msj-orange-800); } .btn-outline-primary { --bs-btn-color: var(--msj-green-900); --bs-btn-border-color: var(--msj-green-700); --bs-btn-bg: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--msj-green-700); --bs-btn-hover-border-color: var(--msj-green-700); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--msj-green-900); --bs-btn-active-border-color: var(--msj-green-900); } .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-color: var(--msj-green-900); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-color: var(--msj-green-900); --bs-btn-active-bg: #fff; } /* -------------------------------------------------------------------------- Oznámení -------------------------------------------------------------------------- */ .msj-notice { background: var(--msj-sun); color: var(--msj-ink); padding: .6rem 0; font-weight: 600; } .msj-notice__text { display: flex; align-items: flex-start; gap: .25rem; max-width: none; } .msj-notice a { color: var(--msj-ink); } /* -------------------------------------------------------------------------- Hlavička a navigace -------------------------------------------------------------------------- */ .msj-site-header { background: var(--msj-green-800); } .msj-navbar { padding: .5rem 0; } .msj-brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-family: var(--msj-font-heading); font-weight: 800; font-size: 1.35rem; text-decoration: none; padding: .25rem 0; } .msj-brand:hover, .msj-brand:focus { color: #fff; text-decoration: underline; } .msj-brand__logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; } .msj-navbar__toggler { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .4rem .9rem; color: #fff; border: 2px solid rgba(255, 255, 255, .7); border-radius: 999px; font-weight: 700; font-size: 1rem; } .msj-navbar__toggler:hover, .msj-navbar__toggler:focus { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); } .msj-navbar__toggler-icon { width: 1.5rem; height: 1.5rem; } .msj-nav .nav-link { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .7rem 1rem; min-height: 2.75rem; display: inline-flex; align-items: center; border-radius: var(--msj-radius-sm); border: 0; background: none; } .msj-nav .nav-link:hover, .msj-nav .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .14); text-decoration: underline; } .msj-nav .nav-link.active, .msj-nav .msj-nav-active > .nav-link { background: rgba(255, 255, 255, .2); text-decoration: underline; text-decoration-thickness: 2px; } .msj-nav .dropdown-toggle::after { margin-left: .4rem; } .msj-nav .dropdown-menu { --bs-dropdown-min-width: 18rem; --bs-dropdown-border-color: var(--msj-green-800); --bs-dropdown-border-width: 2px; --bs-dropdown-link-color: var(--msj-ink); --bs-dropdown-link-hover-bg: var(--msj-green-100); --bs-dropdown-link-active-bg: var(--msj-green-700); --bs-dropdown-link-active-color: #fff; --bs-dropdown-padding-y: .5rem; box-shadow: var(--msj-shadow-lg); border-radius: var(--msj-radius-sm); } .msj-nav .dropdown-item { padding: .6rem 1rem; font-weight: 600; white-space: normal; } .msj-nav .dropdown-item:focus-visible { outline-offset: -3px; box-shadow: none; } /* Vyhledávací formulář (v overlay dialogu, na stránce výsledků a 404) */ .msj-search .input-group { flex-wrap: nowrap; } .msj-search__input { min-height: 3rem; font-size: 1.05rem; border-radius: 999px 0 0 999px; border: 2px solid var(--msj-green-700); background: #fff; } .msj-search__input:focus { border-color: var(--msj-green-900); box-shadow: none; } .msj-search__button { background: var(--msj-green-700); color: #fff; border: 2px solid var(--msj-green-700); border-radius: 0 999px 999px 0; min-width: 3.25rem; } .msj-search__button:hover, .msj-search__button:focus { background: var(--msj-green-900); border-color: var(--msj-green-900); color: #fff; } /* Ikona hledání v liště + skupina akcí (ikona + Menu) */ .msj-navbar__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; } .msj-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); color: #fff; background: transparent; text-decoration: none; } .msj-search-toggle:hover, .msj-search-toggle:focus { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .14); } .msj-search-toggle .msj-icon { width: 1.35rem; height: 1.35rem; } @media (min-width: 992px) { .msj-navbar__collapse { order: 2; } .msj-navbar__actions { order: 3; margin-left: .5rem; } } /* Úzké telefony: lišta musí zůstat na jednom řádku (logo + název vlevo, lupa + Menu vpravo) */ @media (max-width: 479.98px) { .msj-brand { font-size: 1rem; gap: .35rem; } .msj-brand__logo { width: 36px; height: 36px; } .msj-navbar__actions { gap: .35rem; } .msj-navbar__toggler { padding: .35rem .7rem; } } @media (max-width: 359.98px) { .msj-navbar__toggler { padding: .35rem .55rem; } .msj-navbar__toggler-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* Overlay dialog hledání */ .msj-search-dialog { border: 0; padding: 0; width: min(40rem, calc(100vw - 2rem)); margin: 8vh auto auto; border-radius: var(--msj-radius); background: #fff; color: var(--msj-ink); box-shadow: var(--msj-shadow-lg); } .msj-search-dialog::backdrop { background: rgba(31, 42, 26, .62); } .msj-search-dialog__inner { padding: 1.25rem 1.5rem 1.5rem; } .msj-search-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .msj-search-dialog__close { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--msj-green-700); background: #fff; color: var(--msj-green-900); flex-shrink: 0; } .msj-search-dialog__close:hover, .msj-search-dialog__close:focus { border-color: var(--msj-green-700); background: var(--msj-green-100); } .msj-search-dialog__hint { margin-top: .75rem; font-size: .9rem; color: var(--msj-ink-muted); } @media (max-width: 575.98px) { .msj-search-dialog { margin-top: 4vh; } .msj-search-dialog__inner { padding: 1rem; } } @media (max-width: 991.98px) { .msj-navbar__collapse { padding: .5rem 0 .75rem; border-top: 1px solid rgba(255, 255, 255, .25); margin-top: .5rem; } .msj-nav .dropdown-menu { position: static !important; transform: none !important; box-shadow: none; background: rgba(255, 255, 255, .95); margin: 0 0 .5rem; } } /* Hero homepage */ .msj-hero-home { position: relative; background: var(--msj-green-500); } .msj-hero-home__picture { line-height: 0; } .msj-hero-home__img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; object-position: center bottom; } /* „Nálepky“ přes ilustraci: logo + název v pilulkách s vlastním podkladem (kontrast nezávislý na obrázku) */ .msj-hero-home__panel { position: absolute; left: 0; right: 0; top: 6%; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 0 1rem; text-align: center; } .msj-hero-home__logo { width: 110px; height: 110px; border-radius: 50%; background: #fff; border: 4px solid #fff; box-shadow: var(--msj-shadow-lg); } .msj-hero-home__title { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .45rem; font-size: clamp(1.25rem, .9rem + 1.6vw, 2rem); max-width: 100%; } .msj-hero-home__name { display: inline-block; max-width: 100%; background: #fff; color: var(--msj-green-900); padding: .3em .85em; border-radius: 999px; box-shadow: var(--msj-shadow-lg); line-height: 1.15; } .msj-hero-home__subtitle { display: inline-block; max-width: 100%; background: var(--msj-green-700); color: #fff; font-size: .5em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .5em 1.3em; border-radius: 999px; box-shadow: var(--msj-shadow); line-height: 1.2; } @media (max-width: 767.98px) { .msj-hero-home__panel { top: 5%; gap: .4rem; } .msj-hero-home__logo { width: 76px; height: 76px; border-width: 3px; } .msj-hero-home__title { gap: .35rem; } } /* Záhlaví podstránek: kompaktní, na světlém podkladu (žádný velký pruh) */ .msj-page-title { margin: 0 0 1.5rem; } .msj-page-title--center { text-align: center; max-width: 52rem; margin-left: auto; margin-right: auto; margin-bottom: 2rem; } .msj-page-title__kicker { margin: 0 0 .35rem; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--msj-green-900); } /* green-700 má na #b7d39a jen 3,8:1 */ .msj-page-title__heading { margin: 0 0 .5rem; color: var(--msj-green-900); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); } .msj-page-title__lead { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--msj-ink); max-width: 62ch; } /* horní část přechodu je tmavší, ink-muted by měla jen 4,47:1 */ .msj-page-title--center > * { margin-left: auto; margin-right: auto; } /* kicker/perex jsou

s max-width 75ch – bez toho se text posune doleva */ .msj-page-title__meta { margin: 0; color: var(--msj-ink); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; } .msj-page-title__meta > span { display: inline; } .msj-page-title__meta .msj-icon { vertical-align: -.15em; margin-right: .3rem; } .msj-page-title__meta strong { color: var(--msj-ink); } .msj-page-title--center .msj-page-title__meta { justify-content: center; } .msj-page-title__tags { margin-top: .6rem; } .msj-page-title--center .msj-page-title__tags { justify-content: center; } .msj-page-title__extra { margin-top: 1rem; } /* Úvodní (cover) obrázek */ .msj-cover { margin: 0 0 1.5rem; } .msj-cover__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 26rem; object-fit: cover; border-radius: var(--msj-radius); box-shadow: var(--msj-shadow); background: #fff; } .msj-cover--wide .msj-cover__img { aspect-ratio: 21 / 9; max-height: 18rem; } .msj-cover__caption { margin-top: .5rem; font-size: .9rem; color: var(--msj-ink); } /* Hlavička třídy: úzká fotka + maskot přes spodní okraj */ .msj-class-head { position: relative; margin-bottom: 3.75rem; } .msj-class-head .msj-cover { margin: 0; } .msj-class-head__icon { position: absolute; left: 1.5rem; bottom: -3rem; width: 6.5rem; height: 6.5rem; border-radius: 50%; object-fit: cover; background: #fff; border: 4px solid #fff; box-shadow: var(--msj-shadow-lg); } @media (max-width: 575.98px) { .msj-page-title { margin-bottom: 1rem; } .msj-cover__img { border-radius: var(--msj-radius-sm); max-height: 14rem; } .msj-class-head { margin-bottom: 2.75rem; } .msj-class-head__icon { width: 4.75rem; height: 4.75rem; bottom: -2.25rem; left: .75rem; } } /* Drobečky */ .msj-breadcrumbs { background: var(--msj-green-900); color: #fff; padding: .5rem 0; font-size: .9rem; } .msj-breadcrumbs .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .75); --bs-breadcrumb-item-active-color: #fff; --bs-breadcrumb-divider: "›"; } .msj-breadcrumbs a { color: #fff; display: inline-block; padding: .25rem 0; min-height: 1.5rem; } .msj-breadcrumbs .breadcrumb-item { display: inline-flex; align-items: center; } .msj-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .75); } /* -------------------------------------------------------------------------- Sekce a obsah -------------------------------------------------------------------------- */ .msj-section { padding: 2.5rem 0; } .msj-section--gradient { background: linear-gradient(180deg, #b7d39a 0%, var(--msj-green-100) 45%, var(--msj-cream) 100%); } .msj-section--cream { background: var(--msj-cream); } .msj-section--light { background: var(--msj-green-50); } .msj-section__title { color: var(--msj-green-900); margin-bottom: 1.25rem; padding-bottom: .5rem; border-bottom: 3px solid var(--msj-green-700); display: inline-block; } .msj-section__title--center { display: block; text-align: center; border: 0; } .msj-section__lead { color: var(--msj-ink-muted); } .msj-content { background: #fff; border-radius: var(--msj-radius); box-shadow: var(--msj-shadow); padding: 1.5rem; margin-bottom: 1.5rem; overflow-wrap: anywhere; } @media (min-width: 768px) { .msj-content { padding: 2rem 2.25rem; } } .msj-content > :last-child { margin-bottom: 0; } .msj-content img { max-width: 100%; height: auto; border-radius: var(--msj-radius-sm); } .msj-content figure { max-width: 100%; } .msj-content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; } .msj-content table td, .msj-content table th { border: 1px solid var(--msj-green-200); padding: .4rem .6rem; } .msj-content iframe { max-width: 100%; } .msj-content h1 { font-size: 1.6rem; } .msj-content h2 { font-size: 1.4rem; } .msj-content h3, .msj-content h4, .msj-content h5, .msj-content h6 { font-size: 1.15rem; } .msj-content ul, .msj-content ol { padding-left: 1.5rem; } .msj-content a { font-weight: 600; } .msj-content--intro { background: var(--msj-green-50); box-shadow: none; } /* Karty */ .msj-card-list { display: flex; flex-direction: column; gap: 1rem; } .msj-card { display: grid; grid-template-columns: 1fr; background: #fff; border-radius: var(--msj-radius); box-shadow: var(--msj-shadow); overflow: hidden; border: 3px solid transparent; transition: box-shadow .2s, transform .2s; } .msj-card:hover { box-shadow: var(--msj-shadow-lg); } .msj-card--highlight { border-color: var(--msj-sun); } .msj-card__media { background: var(--msj-green-50); } .msj-card__media a { display: block; height: 100%; } .msj-card__img { display: block; width: 100%; max-width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .msj-card__body { padding: 1rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; } .msj-card__title { font-size: 1.2rem; margin: 0; } .msj-card__title a { color: var(--msj-green-900); text-decoration: none; display: inline-block; padding: .2rem 0; margin: -.2rem 0; } .msj-card__title a:hover, .msj-card__title a:focus { text-decoration: underline; } .msj-card__meta { margin: 0; color: var(--msj-ink-muted); font-size: .9rem; } .msj-card__meta strong { color: var(--msj-ink); } .msj-card__excerpt { margin: 0; } /* Proběhlá událost – jemně červený štítek, ať se neplete s pilulkou data konání hned vedle (ta je zelená). Fotka karty se tlumí. Informaci nenese jen barva: je tam slovo „Proběhlo“, tečka i rámeček (WCAG 1.4.1). Kontrast textu 6,45:1, rámečku 3,07:1 proti bílé kartě. */ .msj-past-badge { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; padding: .1rem .6rem; border-radius: 999px; background: var(--msj-red-100); border: 1px solid var(--msj-red-400); color: var(--msj-red-800); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .msj-past-badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--msj-red-600); flex: none; } .msj-card--past .msj-card__img { filter: grayscale(.4); opacity: .85; } .msj-card__type { display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--msj-green-700); } @media (min-width: 576px) { .msj-card { grid-template-columns: 11rem 1fr; } .msj-card--compact { grid-template-columns: 8rem 1fr; } } /* Karta události – datum */ .msj-event-date { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--msj-green-900); background: var(--msj-green-100); border-radius: 999px; padding: .2rem .75rem .2rem .5rem; } /* Štítky */ .msj-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 0; padding: 0; } .msj-tags .list-inline-item { margin: 0; } .msj-tag { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.75rem; padding: .15rem .65rem .15rem .5rem; border-radius: 999px; background: #fff; border: 1px solid rgba(31, 42, 26, .3); color: var(--msj-ink); font-size: .85rem; font-weight: 600; text-decoration: none; line-height: 1.2; } .msj-tag:hover, .msj-tag:focus { background: var(--msj-green-100); border-color: var(--msj-green-700); color: var(--msj-green-900); text-decoration: underline; } .msj-tag__icon { width: 1em; height: 1em; color: var(--msj-tag-color, var(--msj-green-500)); stroke-width: 2.5; } .msj-tag__count { color: var(--msj-ink-muted); font-weight: 500; } .msj-tags--cloud { gap: .45rem; } .msj-tags--cloud .msj-tag { min-height: 2rem; } /* Sidebar */ .msj-sidebar { display: flex; flex-direction: column; gap: 2rem; } .msj-sidebar__box { } /* Otevírací doba */ .msj-hours { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; max-width: none; } .msj-hours__icon { width: 1.6rem; height: 1.6rem; color: var(--msj-green-700); flex-shrink: 0; } .msj-hours__value { font-size: 1.15rem; font-weight: 800; color: var(--msj-green-900); } .msj-hours__note { margin: 0 0 1rem; color: var(--msj-ink); font-size: .95rem; } .msj-class-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .msj-class-item { display: flex; align-items: center; gap: .85rem; background: #fff; border-radius: var(--msj-radius-sm); box-shadow: var(--msj-shadow); padding: .5rem .75rem; text-decoration: none; color: var(--msj-green-900); font-weight: 800; font-size: 1.1rem; min-height: 3.5rem; transition: transform .15s, box-shadow .15s; } .msj-class-item:hover, .msj-class-item:focus { transform: translateX(4px); box-shadow: var(--msj-shadow-lg); color: var(--msj-green-900); text-decoration: underline; } .msj-class-item__icon { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid var(--msj-green-200); flex-shrink: 0; } .msj-upcoming { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .msj-upcoming__item { background: #fff; border-radius: var(--msj-radius-sm); box-shadow: var(--msj-shadow); padding: .75rem 1rem; display: flex; gap: .75rem; align-items: flex-start; } .msj-upcoming__icon { color: var(--msj-green-700); flex-shrink: 0; margin-top: .15rem; } .msj-upcoming__title { margin: 0; font-size: 1.05rem; } .msj-upcoming__title a { color: var(--msj-green-900); display: inline-block; padding: .2rem 0; margin: -.2rem 0; } .msj-upcoming__date { margin: 0; font-size: .9rem; color: var(--msj-ink-muted); } /* Seznam tříd (archiv) */ .msj-class-card { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; background: #fff; border-radius: var(--msj-radius); box-shadow: var(--msj-shadow); padding: 1.25rem; } .msj-class-card__icon { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid var(--msj-green-200); justify-self: center; } .msj-class-card__title { margin: 0 0 .5rem; font-size: 1.5rem; } .msj-class-card__title a { color: var(--msj-green-900); text-decoration: none; display: inline-block; } .msj-class-card__title a:hover, .msj-class-card__title a:focus { text-decoration: underline; } .msj-class-card dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; } .msj-class-card dt { font-weight: 700; color: var(--msj-ink-muted); } .msj-class-card dd { margin: 0; } @media (min-width: 576px) { .msj-class-card { grid-template-columns: 130px 1fr; } } /* Kontakty třídy */ .msj-contact-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .msj-contact-box { background: var(--msj-green-50); border-radius: var(--msj-radius-sm); padding: 1rem 1.25rem; } .msj-contact-box h3 { display: flex; align-items: center; gap: .4rem; font-size: 1.05rem; margin-bottom: .5rem; } .msj-contact-box ul { margin: 0; padding-left: 0; list-style: none; } .msj-contact-box li { padding: .2rem 0; font-size: 1.05rem; } /* Galerie */ .msj-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; } .msj-gallery__item { margin: 0; } .msj-gallery__link { display: block; position: relative; border-radius: var(--msj-radius-sm); overflow: hidden; background: var(--msj-green-50); aspect-ratio: 4 / 3; } .msj-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; } .msj-gallery__link:hover .msj-gallery__img, .msj-gallery__link:focus .msj-gallery__img { transform: scale(1.05); } .msj-gallery__link::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--msj-green-700); transition: box-shadow .15s; } .msj-gallery__link:hover::after { box-shadow: inset 0 0 0 3px var(--msj-green-700); } .msj-gallery__caption { font-size: .85rem; color: var(--msj-ink-muted); margin-top: .25rem; } /* Lightbox */ .msj-lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; background: rgba(10, 16, 8, .96); color: #fff; display: none; grid-template-rows: auto 1fr; } .msj-lightbox[open] { display: grid; } .msj-lightbox::backdrop { background: rgba(0, 0, 0, .7); } .msj-lightbox-open { overflow: hidden; } .msj-lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; } .msj-lightbox__counter { margin: 0; font-weight: 600; } .msj-lightbox__btn { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #fff; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; } .msj-lightbox__btn:hover { background: #fff; color: var(--msj-green-900); } .msj-lightbox__btn:focus-visible { outline: 3px solid var(--msj-sun); outline-offset: 3px; box-shadow: none; } .msj-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 0 4.5rem 1.5rem; min-height: 0; } .msj-lightbox__img { max-width: 100%; max-height: calc(100dvh - 8rem); object-fit: contain; border-radius: var(--msj-radius-sm); background: #000; } .msj-lightbox__caption { color: #fff; text-align: center; max-width: 60ch; } .msj-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); } .msj-lightbox__nav--prev { left: .75rem; } .msj-lightbox__nav--next { right: .75rem; } @media (max-width: 575.98px) { .msj-lightbox__figure { padding: 0 .5rem 4rem; } .msj-lightbox__nav { top: auto; bottom: .75rem; transform: none; } } /* Soubory */ .msj-files { --bs-list-group-active-bg: var(--msj-green-700); } .msj-files .list-group-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; font-weight: 600; color: var(--msj-green-900); border-color: var(--msj-green-200); } .msj-files .list-group-item:hover, .msj-files .list-group-item:focus { background: var(--msj-green-50); text-decoration: underline; } .msj-files__icon { color: var(--msj-green-700); } .msj-files__meta { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--msj-ink-muted); white-space: nowrap; text-transform: uppercase; } /* Kalendář */ .msj-calendar-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .msj-calendar-nav__title { margin: 0; font-size: clamp(1.4rem, 1rem + 1.5vw, 1.9rem); text-transform: capitalize; } .msj-calendar-nav__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; } .msj-months { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; } .msj-months__link { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5.25rem; min-height: 3.5rem; padding: .35rem .6rem; border-radius: var(--msj-radius-sm); background: #fff; border: 2px solid transparent; color: var(--msj-ink); text-decoration: none; font-weight: 600; font-size: .9rem; box-shadow: var(--msj-shadow); } .msj-months__name { text-transform: capitalize; } .msj-months__link:hover, .msj-months__link:focus { border-color: var(--msj-green-700); color: var(--msj-green-900); } .msj-months__link[aria-current="page"] { border-color: var(--msj-green-700); background: var(--msj-green-100); color: var(--msj-green-900); } .msj-months__link--today { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; } .msj-months__count { font-size: .8rem; color: var(--msj-ink-muted); font-weight: 600; } .msj-months__link[aria-current="page"] .msj-months__count { color: var(--msj-green-900); } .msj-months__link--empty { color: var(--msj-ink-muted); } /* Stránkování */ .msj-pagination .page-link { --bs-pagination-color: var(--msj-green-900); --bs-pagination-bg: #fff; --bs-pagination-border-color: var(--msj-green-300); --bs-pagination-hover-color: #fff; --bs-pagination-hover-bg: var(--msj-green-700); --bs-pagination-hover-border-color: var(--msj-green-700); --bs-pagination-active-bg: var(--msj-green-700); --bs-pagination-active-border-color: var(--msj-green-700); --bs-pagination-focus-color: var(--msj-green-900); --bs-pagination-focus-bg: var(--msj-green-100); --bs-pagination-disabled-color: var(--msj-ink-muted); min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .msj-pagination .page-item.active .page-link { color: #fff; } /* Fasáda pro iframe (3D prohlídka) */ .msj-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--msj-green-900) url("../images/facade-tour.jpg") center / cover no-repeat; border-radius: var(--msj-radius); overflow: hidden; box-shadow: var(--msj-shadow-lg); } .msj-facade::before { content: ""; position: absolute; inset: 0; background: rgba(47, 84, 35, .55); } .msj-facade__button { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; width: 100%; border: 0; background: transparent; color: #fff; font-size: 1.25rem; font-weight: 800; cursor: pointer; padding: 1rem; } .msj-facade__button .msj-icon { width: 3rem; height: 3rem; } .msj-facade__button small { font-size: .85rem; font-weight: 500; background: rgba(0, 0, 0, .45); padding: .2rem .75rem; border-radius: 999px; } .msj-facade__button:hover, .msj-facade__button:focus-visible { background: rgba(0, 0, 0, .25); } .msj-facade__button:focus-visible { outline: 3px solid var(--msj-sun); outline-offset: -6px; box-shadow: none; } .msj-facade__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .msj-facade--loaded::before { display: none; } /* Důležité odkazy */ /* Důležité odkazy: 1 sloupec (mobil), 2 (≥ 576 px), 3 (≥ 992 px); poslední řádek na střed */ .msj-links { --msj-links-gap: .75rem; --msj-links-cols: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--msj-links-gap); margin: 0 auto; max-width: 62rem; } .msj-links__item { flex: 0 1 calc((100% - (var(--msj-links-cols) - 1) * var(--msj-links-gap)) / var(--msj-links-cols)); min-width: 0; } @media (min-width: 576px) { .msj-links { --msj-links-cols: 2; } } @media (min-width: 992px) { .msj-links { --msj-links-cols: 3; --msj-links-gap: 1rem; } } .msj-link-card { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 3rem; padding: .6rem 1rem; border: 2px solid var(--msj-green-300); border-radius: var(--msj-radius-sm); background: #fff; color: var(--msj-green-900); font-weight: 700; font-size: .95rem; line-height: 1.3; text-align: center; text-decoration: none; box-shadow: var(--msj-shadow); transition: border-color .15s, box-shadow .15s, transform .15s; } .msj-link-card:hover, .msj-link-card:focus-visible { border-color: var(--msj-green-700); color: var(--msj-green-900); text-decoration: underline; box-shadow: var(--msj-shadow-lg); transform: translateY(-1px); } .msj-link-card .msj-icon { flex-shrink: 0; color: var(--msj-green-700); } @media (max-width: 575.98px) { .msj-link-card { min-height: 2.6rem; padding: .45rem .8rem; font-size: .88rem; box-shadow: none; } .msj-links { --msj-links-gap: .5rem; } } /* Vyhledávání – stránka */ .msj-search-page .msj-search { max-width: 32rem; } /* Heslem chráněná stránka */ .post-password-form { background: #fff; border-radius: var(--msj-radius); padding: 1.5rem; box-shadow: var(--msj-shadow); max-width: 32rem; } .post-password-form label { display: block; font-weight: 700; margin-bottom: .5rem; } .post-password-form input[type="password"] { display: block; width: 100%; padding: .55rem .75rem; border: 2px solid var(--msj-green-700); border-radius: var(--msj-radius-sm); margin-bottom: .75rem; } .post-password-form input[type="submit"] { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.25rem; font-weight: 700; color: #fff; background: var(--msj-green-700); border: 0; border-radius: 999px; } /* -------------------------------------------------------------------------- Patička -------------------------------------------------------------------------- */ .msj-footer { background: var(--msj-green-900); color: #fff; padding: 3rem 0 1.5rem; margin-top: auto; } .msj-footer a { color: #fff; } .msj-footer__address a { display: inline-block; padding: .2rem 0; margin: -.2rem 0; } .msj-footer__logos a { display: inline-block; line-height: 0; } .msj-footer__heading { color: #fff; font-size: 1.3rem; margin-bottom: 1rem; } .msj-footer__address { font-style: normal; line-height: 1.7; } .msj-footer__label { color: var(--msj-green-100); } .msj-footer__note { color: var(--msj-green-100); font-size: .95rem; } .msj-footer__logos { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; } .msj-footer__logos img, .msj-footer__logo-pf { background: #fff; padding: .4rem; border-radius: var(--msj-radius-sm); width: 150px; height: auto; } .msj-footer__links { display: flex; flex-direction: column; gap: .35rem; margin: 0; } .msj-footer__link { display: inline-flex; align-items: center; gap: .2rem; min-height: 1.75rem; } .msj-footer__credit-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 1.75rem; color: #fff; text-decoration: none; } /* Podtržení patří textu, ne logu – inline-flex položky ho jinak dědí nejednotně. */ .msj-footer__credit-link > span[lang], .msj-footer__credit-name { text-decoration: underline; text-underline-offset: .15em; } .msj-footer__credit-link:hover > span[lang], .msj-footer__credit-link:hover .msj-footer__credit-name { text-decoration-thickness: 2px; } .msj-footer__credit-name { font-weight: 800; letter-spacing: .02em; } /* Značka FixLogic je zelená + bílá (varianta pro tmavé pozadí), podložku nepotřebuje. */ .msj-footer__credit-logo { height: 1.1rem; width: auto; margin-right: -.1rem; } .msj-footer__bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .25); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: .9rem; color: var(--msj-green-100); } /* -------------------------------------------------------------------------- Tisk -------------------------------------------------------------------------- */ @media print { .msj-site-header, .msj-footer, .msj-breadcrumbs, .msj-skip-link, .msj-notice, .msj-pagination, .msj-facade { display: none !important; } body { background: #fff; } .msj-content { box-shadow: none; } } /* -------------------------------------------------------------------------- Mega menu (desktop panel se sloupci, mobil akordeon) + kompaktní lišta na lg -------------------------------------------------------------------------- */ .msj-navbar > .container { position: relative; } @media (min-width: 992px) and (max-width: 1199.98px) { .msj-nav .nav-link { font-size: .82rem; padding: .6rem .55rem; letter-spacing: 0; } .msj-brand { font-size: 1.1rem; gap: .4rem; } } @media (min-width: 992px) { .msj-nav .msj-mega { position: static; } .msj-nav .msj-mega__panel { position: absolute; left: 0; right: 0; top: 100%; width: 100%; max-width: 100%; padding: 1.25rem 1.5rem 1.5rem; margin-top: .35rem; border-radius: var(--msj-radius); } .msj-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.5rem; } .msj-nav .dropdown-menu:not(.msj-mega__panel) { margin-top: .35rem; } } .msj-mega__col { min-width: 0; } .msj-mega__heading { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--msj-green-700); margin: 0 0 .35rem; padding: .35rem 1rem; border-bottom: 2px solid var(--msj-green-800); } .msj-mega__heading-link { color: inherit; text-decoration: none; display: inline-block; padding: .3rem 0; margin: -.3rem 0; } .msj-mega__heading-link:hover, .msj-mega__heading-link:focus { text-decoration: underline; } .msj-mega__list { list-style: none; margin: 0; padding: 0; } .msj-mega__list .dropdown-item, .msj-nav .dropdown-item { white-space: normal; padding: .5rem 1rem; border-radius: var(--msj-radius-sm); min-height: 2.5rem; display: flex; align-items: center; gap: .25rem; } @media (max-width: 991.98px) { .msj-nav .msj-mega__panel { padding: .25rem 0 .75rem; } .msj-mega__grid { display: flex; flex-direction: column; gap: .35rem; } .msj-mega__heading { margin-top: .5rem; color: var(--msj-green-900); } .msj-nav .nav-link { min-height: 2.75rem; width: 100%; justify-content: space-between; } .msj-nav .dropdown-toggle::after { margin-left: auto; } } /* -------------------------------------------------------------------------- Kompaktní karty na telefonu: malý náhled vlevo, text vpravo -------------------------------------------------------------------------- */ @media (max-width: 575.98px) { .msj-card { grid-template-columns: 6rem 1fr; border-width: 2px; } /* Náhled vyplní celou výšku karty: `align-self: start` + `height: auto` ho drželo jako malý čtverec nahoře a pod ním zůstávalo prázdné místo, když byl text delší. Poměr 1:1 dává minimální výšku u krátkých karet, `height: 100%` (základní pravidlo) je u delších roztáhne. */ .msj-card__img { aspect-ratio: 1 / 1; } .msj-card__body { padding: .65rem .8rem .75rem; gap: .2rem; } .msj-card__title { font-size: 1.02rem; line-height: 1.25; } .msj-card__meta { font-size: .78rem; } .msj-card__excerpt { font-size: .88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .msj-tag { font-size: .72rem; min-height: 1.5rem; padding: .1rem .5rem .1rem .4rem; } .msj-class-card { grid-template-columns: 5rem 1fr; gap: .75rem; padding: .85rem; } .msj-class-card__icon { width: 5rem; height: 5rem; } .msj-class-card__title { font-size: 1.2rem; } .msj-hero-home__img { height: 16rem; object-position: center 70%; } .msj-gallery { grid-template-columns: repeat(3, 1fr); gap: .4rem; } } /* -------------------------------------------------------------------------- Paleta obsahu a hotové styly z editoru (boxy, zvýraznění, tlačítko) -------------------------------------------------------------------------- */ :root { --msj-c-green: #3f6b2d; --msj-c-teal: #0e6b64; --msj-c-blue: #1d4ed8; --msj-c-purple: #6b21a8; --msj-c-pink: #b8145a; --msj-c-red: #b3261e; --msj-c-orange: #b9471c; --msj-c-amber: #8a5a00; --msj-c-brown: #7c4a1e; --msj-bg-sun: #fff1b8; --msj-bg-grass: #e3f1d6; --msj-bg-sky: #dbeafe; --msj-bg-rose: #fde2e7; } .msj-content .msj-lead { font-size: 1.15rem; color: var(--msj-ink-muted); } .msj-content mark.msj-mark, .msj-content mark { background: var(--msj-bg-sun); color: var(--msj-ink); padding: 0 .25em; border-radius: .25em; } .msj-content .msj-content-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.25rem; border-radius: 999px; background: var(--msj-green-700); color: #fff; font-weight: 700; text-decoration: none; } .msj-content .msj-content-btn:hover, .msj-content .msj-content-btn:focus { background: var(--msj-green-900); color: #fff; text-decoration: underline; } .msj-box { position: relative; margin: 1.25rem 0; padding: 1rem 1.25rem 1rem 3.4rem; border-radius: var(--msj-radius); border: 2px solid transparent; background: var(--msj-green-50); color: var(--msj-ink); } .msj-box > :last-child { margin-bottom: 0; } .msj-box::before { content: ""; position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background-color: var(--msj-green-700); background-repeat: no-repeat; background-position: center; background-size: 1rem; } .msj-box--important { background: var(--msj-bg-sun); border-color: var(--msj-sun); } .msj-box--important::before { background-color: var(--msj-c-amber); background-image: url("data:image/svg+xml;utf8,"); } .msj-box--info { background: var(--msj-bg-grass); border-color: var(--msj-green-300); } .msj-box--info::before { background-color: var(--msj-c-green); background-image: url("data:image/svg+xml;utf8,"); } .msj-box--tip { background: var(--msj-bg-sky); border-color: #93c5fd; } .msj-box--tip::before { background-color: var(--msj-c-blue); background-image: url("data:image/svg+xml;utf8,"); } .msj-box--contact { background: var(--msj-bg-rose); border-color: #f9a8b8; } .msj-box--contact::before { background-color: var(--msj-c-pink); background-image: url("data:image/svg+xml;utf8,"); }