/* ========================================================================== TABLE OF CONTENTS ========================================================================== 1. CSS Variables (:root) 2. Base / Reset 3. Typography (h1-h6, .text-*, font classes) 4. Layout (.container, grid utilities) 5. Components - Buttons 6. Components - Cards 7. Components - Tables 8. Components - Forms 9. Components - Navigation 10. Modules (lightbox, tooltips, scrollbar) 11. Utilities (visibility, spacing, colors) 12. Responsive / Media Queries (component-specific queries inline) 13. Animations (@keyframes) ========================================================================== */ /* ========================================================================== 1. CSS VARIABLES ========================================================================== */ /* * CSS Custom Properties Overview * ============================== * * Variables defined here in :root are static defaults. * Most variables are set dynamically from Kirby Panel via inline styles * in head.php (injected into tag). * * CATEGORIES OF DYNAMIC VARIABLES (set in head.php): * * Typography: * --font-family-headings Heading font (from design page) * --font-family-body Body text font * --font-family-body-bold Bold variant of body font * --font-family-main-typeface Main brand typeface for showcases * --heading-scale Scale factor for heading sizes (0.8-1.2) * --heading-kerning Letter-spacing for headings (em) * --body-line-height Line height for body text * --base-font-size Base font size in px * * Colors - Brand: * --header-color Header background color * --title-color Main title color * --headings-color H1-H6 text color * --text-color Body text color * --link-color Anchor link color * --button-primary-color Primary button bg/border * --button-multibrand-color Multibrand button color * --button-multibrand-color-hover Multibrand button hover * * Colors - Gray Scale (--gray-00 to --gray-100): * Computed from base gray, used for subtle UI elements * * Colors - Status: * --success-color Success/allowed states (green) * --danger-color Error/forbidden states (red) * * Cards: * --card-logo-bg Logo card background * --card-color-bg Color palette card background * --card-typography-bg Typography card background * --card-bottom-bg-color Card footer background * --card-bottom-hover-color Card footer hover state * --card-bottom-heading-color Card footer heading color * --card-bottom-text-color Card footer text color * --dynamic-web-bg-color Page background color * --dynamic-blocks-bg-color Module blocks background * * Tables: * --table-color-bg Table background * --table-hover-bg Table row hover background * --table-font-size Table cell font size * --table-line-color Table border color * * UI Components: * --scrollbar-color Custom scrollbar track color * --tooltip-text-color Tooltip text * --tooltip-bg-color Tooltip background * --info-box-text-color Alert box text * --info-box-bg-color Alert box background * --info-badge-text-color Badge text * --info-badge-bg-color Badge background * --visualbook-description-color Description block text * * Border Radius: * --border-radius-card Cards, tables, modules * --border-radius-button Buttons * --border-radius-header-button Header/nav buttons * --border-radius-badge Badges * --border-radius-tooltip Tooltips * * Logo Backgrounds: * --logo-dark-bg Dark background for light logos * --logo-light-bg Light background for dark logos */ :root { /* ========================================================================== STATIC CSS VARIABLES (not set dynamically) ========================================================================== */ /* Logo sizing - default dimensions for logo containers Used with .logo-size class on body, affects elements in cards and headers */ --logo-header-size: 150px; /* Header logo max-width */ --logo-main-card-size: 50%; /* Main logo card width (primary logo) */ --logo-horizontal-size: 60%; /* Horizontal logo variant width */ --logo-vertical-size: 40%; /* Vertical logo variant width */ --logo-symbol-size: 25%; /* Symbol/icon logo width */ /* --body-kerning is set in dynamic-css/design.css from design.yml (bodyKerning) */ /* ========================================================================== BORDERS & LINES ========================================================================== */ --border-color: #e2e2e2; /* Primary border color */ --border-color-light: #ededed; /* Lighter border variant */ --line-color: #ebebeb; /* Decorative lines (cards, dividers) */ --table-line-color: #e2e2e2; /* Table row/column borders */ /* ========================================================================== BACKGROUNDS (static defaults) ========================================================================== */ --bg-subtle: #fbfbfb; /* Subtle background (bg-light) */ --bg-indicator: #fafafa; /* Indicator icons background */ --bg-input: #f3f3f6; /* Form input backgrounds */ --bg-meter: #f7f7f7; /* Meter/progress bar background */ /* ========================================================================== TEXT COLORS (static defaults) ========================================================================== */ --color-white: #ffffff; /* White color for badges, buttons etc. */ --text-muted: #6f6f6f; /* Muted text (table headers, etc.) */ --text-dark: #525252; /* Dark text for alerts, UI elements */ --indicator-color: #8d8d8d; /* Indicator icon color */ /* ========================================================================== SPACING ========================================================================== */ --spacing-card-mobile: 1.4rem; /* Card/table padding on mobile */ --spacing-card-desktop: 1.9rem; /* Card/table padding on desktop */ /* ========================================================================== TRANSITIONS ========================================================================== */ --transition-fast: 0.15s ease-in-out; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; /* ========================================================================== SHADOWS ========================================================================== */ --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.02); --shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* ========================================================================== BUTTON COLORS (secondary/dark variants - primary set dynamically in head.php) ========================================================================== */ --button-secondary-color: #898e9e; --button-secondary-hover: #7b8192; --button-secondary-focus: #73798c; --button-secondary-active: #6e7486; --button-dark-border: #4f525f; --button-dark-hover: #0150e3; --button-dark-focus: #3c3f49; --button-dark-active: #383a43; --button-dark-active-focus: #434651; --button-language-color: #a4a8b8; } /* ========================================================================== BREAKPOINT REFERENCE ========================================================================== * * This project follows Bootstrap 5 breakpoint system. * CSS custom properties cannot be used in media queries, so breakpoints * are documented here as a reference. * * BOOTSTRAP 5 STANDARD BREAKPOINTS: * +-----------+------------+------------------+--------------------+ * | Name | min-width | max-width | Description | * +-----------+------------+------------------+--------------------+ * | xs | 0 | 575.98px | Extra small phones | * | sm | 576px | 767.98px | Small phones | * | md | 768px | 991.98px | Tablets | * | lg | 992px | 1199.98px | Desktops | * | xl | 1200px | 1399.98px | Large desktops | * | xxl | 1400px | - | Extra large | * +-----------+------------+------------------+--------------------+ * * USAGE CONVENTIONS: * - Mobile-first: Use min-width for progressive enhancement * @media (min-width: 768px) { ... } * * - Desktop-first: Use max-width with .98px to avoid overlap * @media (max-width: 767.98px) { ... } * * BREAKPOINTS USED IN THIS PROJECT: * - 576px (sm) - Small devices, landscape phones * - 768px (md) - Tablets, primary breakpoint (23× used) * - 992px (lg) - Desktops * - 1200px (xl) - Large desktops * * CUSTOM BREAKPOINTS (non-Bootstrap): * - 400px - Extra small mobile (edge case) * - 480px - Small mobile landscape * - 700px - Custom tablet (legacy, consider migrating to 768px) * * NOTE: When using max-width, always use .98px suffix to prevent * overlap with min-width queries at the same breakpoint. * Example: max-width: 767.98px (not 768px or 767px) * * ========================================================================== */ /* White background mode - used for static export and print */ body.white-bg-mode { background-color: var(--color-white); --dynamic-blocks-bg-color: var(--bg-subtle); } /* ========================================================================== 2. BASE / RESET ========================================================================== */ html { position: relative; min-height: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; overflow: auto; /* !important: Bootstrap body uses system-ui stack and loads before this file */ font-family: var(--font-family-body) !important; letter-spacing: var(--body-kerning, 0); background-color: var(--dynamic-web-bg-color); margin: 0; padding-bottom: 200px; /* Footer height */ } body p { color: var(--text-color); font-size: calc(var(--base-font-size) * 0.9375); letter-spacing: var(--body-kerning, 0) !important; } body .table, body .alert, body .breadcrumb, body .nav { font-family: var(--font-family-body); font-size: calc(var(--base-font-size) * 0.9375); letter-spacing: var(--body-kerning, 0) !important; } a { color: var(--link-color) !important; } a:hover { color: var(--link-color); } li { color: var(--text-color); } section { position: relative; } header { position: relative; z-index: 2; } .footer { position: absolute; right: 0; bottom: 0; left: 0; } /* Header and background colors */ .header-bg-color { background-color: var(--header-color); } .header-content-bg-color { background-color: var(--header-color); } .header-text-color { color: var(--title-color) !important; } .breadcrumb-bg-color { background-color: var(--dynamic-web-bg-color); } .breadcrumb-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } nav[aria-label="breadcrumb"] .breadcrumb.flex-nowrap { flex-wrap: nowrap; white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 0.65rem 1rem; background: var(--title-color, #212529); color: #fff !important; text-decoration: none; font-size: 0.9rem; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; outline: 2px solid var(--button-primary-color, #fe1a3f); outline-offset: 2px; } /* Globální .alert má padding-bottom: 0 — pro empty state obnovit svislou symetrii */ .vb-empty-state.alert { padding-bottom: 0.75rem; } .vb-empty-state .vb-empty-state__icon { font-size: 1.35rem; line-height: 1.2; margin-right: 0.65rem; margin-top: 0.1rem; opacity: 0.75; } /* Decorative lines */ .color-swatch-card-line { position: absolute; width: 100%; bottom: 0; left: 0; height: 1px; background-color: var(--line-color); mix-blend-mode: multiply; } .color-card-line { position: absolute; width: 100% !important; bottom: 100%; left: 0; right: 0; z-index: 1; background-color: var(--line-color); height: 1px; mix-blend-mode: multiply; } .header-card-line { z-index: 1; background-color: var(--line-color); mix-blend-mode: multiply; } .main-card-line { z-index: 70; margin-top: -1px; background-color: var(--gray-15); mix-blend-mode: multiply; } /* Glyphs */ .glyphs { font-weight: 700; display: flex; flex-wrap: wrap; } .glyphs div { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gray-30); margin-left: -1px; margin-top: -1px; color: var(--gray-10); } .glyphs div:hover { background-color: var(--gray-10); } .glyphs div p { color: var(--text-color); margin-bottom: 0; } /* Ratio containers */ .ratio-main-card { position: relative; } .ratio-main-card:before { display: block; content: " "; width: 100%; padding-top: 68%; } .ratio-main-card > .logo-image, .ratio-main-card > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; } .ratio-16-9 { position: relative; overflow: hidden; } .ratio-16-9:before { display: block; content: " "; width: 100%; padding-top: 56.25%; } .ratio-16-9 > .logo-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .ratio-4-3 { position: relative; width: 100%; overflow: hidden; } .ratio-4-3:before { display: block; content: " "; width: 100%; padding-top: 75%; } .ratio-4-3 > .logo-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Logo transformations (not allowed examples) */ .not-allowed-logo-shadow { filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.4)); } .not-allowed-logo-transform { transform: rotate(10deg); } .not-allowed-logo-recolor { filter: invert(80%); } .not-allowed-logo-deformation { transform: scale(1, 0.8); } /* --------------------------------------------------------------------------- Base/Reset - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { body p { font-size: calc(var(--base-font-size) * 1); } body .table, body .alert, body .breadcrumb, body .nav { font-size: calc(var(--base-font-size) * 1); } } /* ========================================================================== 3. TYPOGRAPHY ========================================================================== */ /* --------------------------------------------------------------------------- 3.1 Headings (h1-h6) - Base styles (mobile-first) --------------------------------------------------------------------------- */ /* Shared heading properties (font-family, letter-spacing from --heading-kerning) */ body h1, body h2, body h3, body h4, body h5, body h6 { font-family: var(--font-family-headings); letter-spacing: var(--heading-kerning, 0) !important; } .font-name-display { font-family: var(--font-family-headings); letter-spacing: 0 !important; } /* Shared heading color (h2-h6 use --headings-color, h1 uses --title-color) */ body h2, body h3, body h4, body h5, body h6, .font-name-display { color: var(--headings-color) !important; } body h1 { color: var(--title-color) !important; font-size: calc(1.9rem * var(--heading-scale)); } body h2 { font-size: calc(1.8rem * var(--heading-scale)); } body h3 { font-size: calc(1.45rem * var(--heading-scale)); } body h4 { font-size: calc(1.35rem * var(--heading-scale)); } body h5 { font-size: calc(1.1rem * var(--heading-scale)); } body h6 { font-size: calc(0.9375rem * var(--heading-scale)); } /* --------------------------------------------------------------------------- 3.2 Font Display Classes - Base styles (mobile-first) --------------------------------------------------------------------------- */ .font-name-display { font-size: 1.8rem; line-height: 1.3; } /* Typography card font display */ body .card-typography .card-typography-font { font-size: 6.5rem; color: var(--card-typography-text-color) !important; line-height: 1.1; } .text-small { font-size: 0.875rem !important; } /* Display text styles */ body .text-display-additional { font-size: 9rem; color: var(--headings-color) !important; margin-bottom: -1rem; margin-top: -1rem; line-height: 1.1; } body .text-display-main { font-size: 9rem; color: var(--headings-color) !important; margin-bottom: -1rem; margin-top: -1rem; line-height: 1.1; } /* UI labels beside logo previews — vestavěná Mona Sans + ss05 (synchronizovat s visualbook_builtin_mona_builtin_feature_settings) */ .use-monasans-ui { font-family: 'Mona Sans', 'Mona Sans Fallback', var(--font-family-body, system-ui, sans-serif), sans-serif !important; font-weight: 500; font-feature-settings: "ss05" 0, "calt" 0, "rvrn" 0; } /* --------------------------------------------------------------------------- 3.3 Heading hierarchy – visual size preservation classes --------------------------------------------------------------------------- */ /* * When fixing the heading hierarchy (h3→h2, h5→h3, h6→h4), * these classes lock the visual font-size to the OLD heading level * so the rendered appearance stays identical. */ body .vb-h3 { font-size: calc(1.45rem * var(--heading-scale)); } body .vb-h5 { font-size: calc(1.1rem * var(--heading-scale)); } body .vb-h6 { font-size: calc(0.9375rem * var(--heading-scale)); } /* * Accordion (rozbalovací obsah) body text uses the same full TipTap toolbar as * the main text field, whose H3 (Nadpis) / H4 (Podnadpis) are too large inside a * collapsed panel. Render them one step down — H3 at H5 size, H4 at H6 size — * for every accordion item's content (acordeonTextarea everywhere; the font * module's accordion uses imageTextarea inside a .card-body). Sizes mirror the * h5/h6 scale, including the 768px / 992px breakpoints below. */ [data-field-name="acordeonTextarea"] h3, .card-body[data-field-name="imageTextarea"] h3 { font-size: calc(1.1rem * var(--heading-scale)); } [data-field-name="acordeonTextarea"] h4, .card-body[data-field-name="imageTextarea"] h4 { font-size: calc(0.9375rem * var(--heading-scale)); } @media (min-width: 768px) { [data-field-name="acordeonTextarea"] h3, .card-body[data-field-name="imageTextarea"] h3 { font-size: calc(1.15rem * var(--heading-scale)); } [data-field-name="acordeonTextarea"] h4, .card-body[data-field-name="imageTextarea"] h4 { font-size: calc(0.95rem * var(--heading-scale)); } } @media (min-width: 992px) { [data-field-name="acordeonTextarea"] h3, .card-body[data-field-name="imageTextarea"] h3 { font-size: calc(1.2rem * var(--heading-scale)); } [data-field-name="acordeonTextarea"] h4, .card-body[data-field-name="imageTextarea"] h4 { font-size: calc(1rem * var(--heading-scale)); } } /* Multi-line truncation: max 2 lines with ellipsis */ .vb-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; } /* * Line-clamp card footers: flex + vertical center. * Bootstrap .align-items-stretch uses !important — we must match it when the strip is display:flex. * Logos row (no .card-bottom-area): height ~ 1 text line (vb-h5 slot). * Homepage .card-bottom-area: lh 1.2, svislé mezery mezi plným paddingem .card-main a velmi úzkým pásem. */ .card-main:not(.card-bottom-area):has(.vb-line-clamp-2) { box-sizing: border-box; height: calc(2 * var(--spacing-card-mobile) + 1.1rem * var(--heading-scale, 1) * 1.4) !important; min-height: 0; flex-shrink: 0; display: flex; align-items: center !important; } .card-main.card-bottom-area:has(.vb-line-clamp-2) { box-sizing: border-box; /* svislý padding „napůl“ mezi plnou .card-main a příliš štíhlou variantou; height = horní+dolní + 2 řádky lh 1.2 */ padding: 1rem var(--spacing-card-mobile) !important; height: calc(2rem + 2 * 1.1rem * var(--heading-scale, 1) * 1.2) !important; min-height: 0; flex-shrink: 0; display: flex !important; align-items: center !important; } /* Flex item = nadpis, line-clamp jen uvnitř (ne kombinovat flex s -webkit-box na jednom prvku) */ .card-main.card-bottom-area:has(.vb-line-clamp-2) > h2 { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } /* Dědit typografii z h2.vb-h3 (span má display:-webkit-box) */ .card-main.card-bottom-area h2.vb-h3 > .vb-line-clamp-2 { width: 100%; font: inherit; line-height: 1.2; } @media (min-width: 768px) { .card-main:not(.card-bottom-area):has(.vb-line-clamp-2) { height: calc(2 * var(--spacing-card-desktop) + 1.15rem * var(--heading-scale, 1) * 1.4) !important; } .card-main.card-bottom-area:has(.vb-line-clamp-2) { padding: 1.3rem var(--spacing-card-desktop) !important; height: calc(2.6rem + 2 * 1.15rem * var(--heading-scale, 1) * 1.2) !important; } } @media (min-width: 992px) { .card-main:not(.card-bottom-area):has(.vb-line-clamp-2) { height: calc(2 * var(--spacing-card-desktop) + 1.2rem * var(--heading-scale, 1) * 1.4) !important; } .card-main.card-bottom-area:has(.vb-line-clamp-2) { padding: 1.35rem var(--spacing-card-desktop) !important; height: calc(2.7rem + 2 * 1.2rem * var(--heading-scale, 1) * 1.2) !important; } } /* --------------------------------------------------------------------------- 3.4 Anchor Points for H2 Section Headings --------------------------------------------------------------------------- */ section h2 { position: relative; cursor: pointer; } section h2.no-anchor { cursor: auto; } section h2:not(.homepage):not(.no-anchor)::before { content: ''; display: inline-block; position: absolute; left: -30px; top: 5px; width: 1.4rem; height: 1.4rem; opacity: 0; transition: opacity 0s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M18.3643 15.5353L16.95 14.1211L18.3643 12.7069C20.3169 10.7543 20.3169 7.58847 18.3643 5.63585C16.4116 3.68323 13.2458 3.68323 11.2932 5.63585L9.87898 7.05007L8.46477 5.63585L9.87898 4.22164C12.6127 1.48797 17.0448 1.48797 19.7785 4.22164C22.5121 6.95531 22.5121 11.3875 19.7785 14.1211L18.3643 15.5353ZM15.5358 18.3638L14.1216 19.778C11.388 22.5117 6.9558 22.5117 4.22213 19.778C1.48846 17.0443 1.48846 12.6122 4.22213 9.87849L5.63634 8.46428L7.05055 9.87849L5.63634 11.2927C3.68372 13.2453 3.68372 16.4112 5.63634 18.3638C7.58896 20.3164 10.7548 20.3164 12.7074 18.3638L14.1216 16.9496L15.5358 18.3638ZM14.8287 7.75717L16.2429 9.17139L9.17187 16.2425L7.75765 14.8282L14.8287 7.75717Z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } section h2:not(.homepage):not(.no-anchor).hover::before { opacity: 1; } body[data-frontend-editor-active="true"] section h2:not(.homepage):not(.no-anchor).hover::before, body[data-frontend-editor-active="true"] section h2:not(.homepage):not(.no-anchor).clicked::before { opacity: 0 !important; } section h2:not(.homepage):not(.no-anchor).clicked::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2328a745'%3E%3Cpath d='M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z'/%3E%3C/svg%3E"); opacity: 1; } /* --------------------------------------------------------------------------- 3.5 Typography - Responsive (sm: 576px) --------------------------------------------------------------------------- */ @media (min-width: 576px) { body .card-typography .card-typography-font { font-size: 5rem; } body .text-display-additional, body .text-display-main { font-size: 9rem; } } /* --------------------------------------------------------------------------- 3.6 Typography - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { /* Headings */ body h1 { font-size: calc(2.15rem * var(--heading-scale)); } body h2 { font-size: calc(1.9rem * var(--heading-scale)); } body h3 { font-size: calc(1.5375rem * var(--heading-scale)); } body h4 { font-size: calc(1.425rem * var(--heading-scale)); } body h5 { font-size: calc(1.15rem * var(--heading-scale)); } body h6 { font-size: calc(0.95rem * var(--heading-scale)); } /* Heading hierarchy – visual size preservation */ body .vb-h3 { font-size: calc(1.5375rem * var(--heading-scale)); } body .vb-h5 { font-size: calc(1.15rem * var(--heading-scale)); } body .vb-h6 { font-size: calc(0.95rem * var(--heading-scale)); } /* Font displays */ .font-name-display { font-size: 1.9rem; } body .card-typography .card-typography-font { font-size: 7.5rem; } body .text-display-additional, body .text-display-main { font-size: 9rem; } } /* --------------------------------------------------------------------------- 3.7 Typography - Responsive (lg: 992px) --------------------------------------------------------------------------- */ @media (min-width: 992px) { /* Headings */ body h1 { font-size: calc(2.25rem * var(--heading-scale)); } body h2 { font-size: calc(2rem * var(--heading-scale)); } body h3 { font-size: calc(1.625rem * var(--heading-scale)); } body h4 { font-size: calc(1.5rem * var(--heading-scale)); } body h5 { font-size: calc(1.2rem * var(--heading-scale)); } body h6 { font-size: calc(1rem * var(--heading-scale)); } /* Heading hierarchy – visual size preservation */ body .vb-h3 { font-size: calc(1.625rem * var(--heading-scale)); } body .vb-h5 { font-size: calc(1.2rem * var(--heading-scale)); } body .vb-h6 { font-size: calc(1rem * var(--heading-scale)); } /* Font displays */ .font-name-display { font-size: 2rem; } body .card-typography .card-typography-font { font-size: 6.5rem; } body .text-display-additional, body .text-display-main { font-size: 10rem; } } /* --------------------------------------------------------------------------- 3.8 Typography - Responsive (xl: 1200px) --------------------------------------------------------------------------- */ @media (min-width: 1200px) { body .card-typography .card-typography-font { font-size: 7.5rem; } body .text-display-additional, body .text-display-main { font-size: 12rem; } } /* ========================================================================== 4. LAYOUT ========================================================================== */ .container { padding-top: 2rem; padding-bottom: 1rem; } .homepage-padding-top { padding-top: 1px; } /* Aspect ratio containers */ .aspect-ratio-container { position: relative; width: 100%; overflow: hidden; border-radius: var(--border-radius-card) !important; } .aspect-ratio-container-module { position: relative; width: 100%; overflow: hidden; } .aspect-16-9 .aspect-ratio-container::before, .aspect-4-3 .aspect-ratio-container::before, .aspect-1-1 .aspect-ratio-container::before { content: ''; display: block; width: 100%; } .aspect-16-9 .aspect-ratio-container::before { padding-top: 56.25%; } .aspect-4-3 .aspect-ratio-container::before { padding-top: 75%; } .aspect-1-1 .aspect-ratio-container::before { padding-top: 100%; } .aspect-16-9 img, .aspect-4-3 img, .aspect-1-1 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Video containers (consolidated) */ video, .kirbytext video { width: 100% !important; height: auto; border-radius: var(--border-radius-card) !important; } video { max-width: 100%; } /* --------------------------------------------------------------------------- Layout - Responsive (sm: 576px, md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 576px) { .container { padding-top: 2rem; } } @media (min-width: 768px) { .container { padding-top: 2.5rem; } } /* ========================================================================== 5. COMPONENTS - BUTTONS ========================================================================== Button architecture: - Shared reset: box-shadow: none for all button states - Base styles: padding, border-radius, colors - State styles: :hover, :focus, :active grouped where identical ========================================================================== */ /* --------------------------------------------------------------------------- 5.1 Shared Button Reset - removes box-shadow from all states --------------------------------------------------------------------------- */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-dark, .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-secondary, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-multibrand:hover, .btn-multibrand:focus, .btn-multibrand:active, .btn-multibrand.active, .btn-multibrand.active:focus, #back-button:active, #back-button:focus { box-shadow: none; } /* --------------------------------------------------------------------------- 5.2 Button - Primary --------------------------------------------------------------------------- */ .btn-primary { color: white !important; z-index: 3; padding: 0.8rem; padding-left: 2em !important; padding-right: 2em !important; background-color: var(--button-primary-color); border-color: var(--button-primary-color); border-radius: var(--border-radius-button); } /* Primary: all states keep same bg/border, only hover adds brightness */ .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active:focus { background-color: var(--button-primary-color); border-color: var(--button-primary-color); } .btn-primary:hover { filter: brightness(110%); color: white !important; } /* --------------------------------------------------------------------------- 5.3 Button - Dark --------------------------------------------------------------------------- */ .btn-dark { color: white !important; z-index: 3; padding: 0.8rem; background-color: var(--gray-60); border-color: var(--button-dark-border); border-radius: var(--border-radius-button); } .btn-dark:hover { background-color: var(--button-dark-hover); border-color: var(--button-dark-hover); } .btn-dark:focus { background-color: var(--button-dark-focus); border-color: var(--button-dark-focus); } .btn-dark:active { background-color: var(--button-dark-active); border-color: var(--button-dark-active); } .btn-dark:not(:disabled):not(.disabled):active:focus { background-color: var(--button-dark-active-focus); border-color: var(--button-dark-active-focus); } /* --------------------------------------------------------------------------- 5.4 Button - Outline Primary --------------------------------------------------------------------------- */ .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle { color: white; background-color: var(--button-primary-color); border-color: var(--button-primary-color); } .btn-outline-primary { z-index: 3; padding: 0.8rem; color: var(--button-primary-color) !important; border-color: var(--button-primary-color); border-radius: var(--border-radius-button); } /* Outline Primary: hover/focus fill with primary color */ .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--button-primary-color); border-color: var(--button-primary-color); color: white !important; } .btn-outline-primary:focus { filter: brightness(110%); } .btn-outline-primary:active { background-color: var(--button-primary-color); border-color: var(--button-primary-color); color: var(--button-primary-color) !important; } .btn-outline-primary:not(:disabled):not(.disabled):active:focus { background-color: transparent; border-color: var(--button-primary-color); } /* --------------------------------------------------------------------------- 5.5 Button - Secondary (solid) --------------------------------------------------------------------------- */ .btn-secondary { padding: 0.8rem; background-color: var(--button-secondary-color); border-color: var(--button-secondary-color); border-radius: var(--border-radius-button); } .btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):active:focus { background-color: var(--button-secondary-hover); border-color: var(--button-secondary-hover); } .btn-secondary:focus { background-color: var(--button-secondary-focus); border-color: var(--button-secondary-focus); } .btn-secondary:active { background-color: var(--button-secondary-active); border-color: var(--button-secondary-active); } /* --------------------------------------------------------------------------- 5.6 Button - Outline Secondary --------------------------------------------------------------------------- */ .btn-outline-secondary { padding: 0.8rem; color: var(--button-secondary-color) !important; border-color: var(--button-secondary-color); border-radius: var(--border-radius-button); } .btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus { background-color: var(--button-secondary-hover); border-color: var(--button-secondary-hover); color: white !important; } .btn-outline-secondary:focus { background-color: var(--button-secondary-focus); border-color: var(--button-secondary-focus); } .btn-outline-secondary:active { background-color: var(--button-secondary-active); border-color: var(--button-secondary-active); } /* --------------------------------------------------------------------------- 5.8 Button - Multibrand --------------------------------------------------------------------------- */ .btn-multibrand { color: var(--button-multibrand-color) !important; border-color: var(--button-multibrand-color) !important; background-color: transparent; height: 42px; } .btn-multibrand:hover, .btn-multibrand:active, .btn-multibrand.active, .btn-multibrand.active:focus { color: var(--button-multibrand-color-hover) !important; background-color: transparent; border-color: var(--button-multibrand-color-hover) !important; } .btn-multibrand:focus, #back-button:active, #back-button:focus { color: var(--button-multibrand-color) !important; background-color: transparent !important; border-color: var(--button-multibrand-color) !important; } .btn-multibrand-radius { border-radius: var(--border-radius-header-button) !important; } /* ========================================================================== 6. COMPONENTS - CARDS ========================================================================== */ .card { border-radius: 0; margin-bottom: -1px; border: 1px solid var(--border-color); } .card-body img { width: 100%; height: auto; } .card-bottom-area { background-color: var(--card-bottom-bg-color); } .card-bottom-area h1, .card-bottom-area h2, .card-bottom-area h3, .card-bottom-area h4, .card-bottom-area h5, .card-bottom-area h6 { color: var(--card-bottom-heading-color) !important; } .card-bottom-area p { color: var(--card-bottom-text-color); } .card-bottom-area li { color: var(--card-bottom-text-color); } .card-bottom-area:hover { background-color: var(--card-bottom-hover-color); } .dynamic-block { background-color: var(--dynamic-blocks-bg-color); } /* * Textové karty (module-cards, portal-cards, group-page, default/multibrand secondary): * když je v rohu ikona, nadpis nesmí zasahovat pod ni — :has() vybírá jen tyto případy. */ article.card-module:has(.lock-indicator, .portal-indicator, .multibrand-indicator, .external-link-indicator, .portal-external-link-indicator) > h3.vb-h5, article.card-main.dynamic-block:has(.lock-indicator, .portal-indicator, .multibrand-indicator, .external-link-indicator, .portal-external-link-indicator) > h3.vb-h5:first-of-type, article.card-main.dynamic-block:has(.lock-indicator, .portal-indicator, .multibrand-indicator, .external-link-indicator, .portal-external-link-indicator) > h2.vb-h5:first-of-type { padding-right: 2rem; } .card-main, .card-module, .card-secondary { padding: var(--spacing-card-mobile); } /* Consolidated card hover text-decoration (was 4 separate rules) */ .card-main:hover, .card-main a:hover, .card-module:hover, .card-module a:hover { text-decoration: none !important; } /* Consolidated card header styles (was 2 separate rules) */ .card-header, .button-card-header { padding-left: var(--spacing-card-mobile); padding-right: var(--spacing-card-mobile); margin-bottom: -2px; vertical-align: middle; background-color: var(--gray-00); border-bottom: 1px solid var(--border-color) !important; } .card-header:hover { background-color: var(--gray-10); } .bg-card-logos { background-color: var(--card-logo-bg); } .carousel-typography { background-color: var(--card-typography-bg); } .carousel-typography .card-typography-font { color: var(--card-typography-text-color); } /* --------------------------------------------------------------------------- Cards - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { .card-main, .card-module, .card-secondary { padding: var(--spacing-card-desktop); } .card-header, .button-card-header { padding-left: var(--spacing-card-desktop); padding-right: var(--spacing-card-desktop); } } /* ========================================================================== 7. COMPONENTS - TABLES ========================================================================== */ /* Consolidated table styles (was 2 identical rules) */ .table, .table table { color: var(--text-color); width: 100%; margin-bottom: 0rem; background-color: var(--table-color-bg); border-radius: var(--border-radius-card) !important; } .table tr { border-top-left-radius: var(--border-radius-card); border-top-right-radius: var(--border-radius-card); } thead tr { border-top-left-radius: var(--border-radius-card); border-top-right-radius: var(--border-radius-card); font-size: var(--table-font-size); } .table td { padding-left: var(--spacing-card-mobile); padding-right: var(--spacing-card-mobile); height: 4rem; vertical-align: middle; border-top: 1px solid var(--table-line-color) !important; } .table th { padding-left: var(--spacing-card-mobile); padding-right: var(--spacing-card-mobile); border-top: none; height: 4rem; line-height: 1.2; vertical-align: middle; font-weight: 400; font-size: var(--table-font-size); background-color: var(--gray-00); color: var(--text-muted); height: 64px; } .table tbody tr { font-size: var(--table-font-size); } .table tbody { border-bottom-left-radius: var(--border-radius-card); border-bottom-right-radius: var(--border-radius-card); } .table tbody tr:hover { background-color: var(--table-hover-bg); color: var(--text-color); } .table thead th { vertical-align: middle; border-bottom: none; border-top: none; font-weight: 400; font-size: var(--table-font-size); background-color: var(--gray-00); height: 64px; } .table-condensed { background-color: var(--table-color-bg); } .table-condensed td { height: 20px !important; border-top: none !important; } .table-condensed th { background-color: var(--table-color-bg); border-top: none; border-bottom: none; height: 1.8rem; vertical-align: middle; font-weight: 400; background-color: var(--table-color-bg); } .table-condensed tbody tr:hover { background-color: var(--table-hover-bg); } .table-condensed thead th { vertical-align: middle; font-weight: 400; font-size: 0.875rem; background-color: var(--table-color-bg); color: var(--gray-60); height: 64px; } /* Consolidated table header font-size (was 5 separate rules) */ thead.bg-light, thead.bg-light th, .table thead.bg-light th, .table thead.bg-light th h4, .table thead.bg-light th span.vb-h6, thead.bg-light th h4, thead.bg-light th span.vb-h6 { font-size: var(--table-font-size) !important; } /* Yes/No icons in table cells */ .yes-icon { display: none !important; } .no-icon { display: none !important; } .table-cell-settings.add-yes-icon .yes-icon { display: inline !important; } .table-cell-settings.add-no-icon .no-icon { display: inline !important; } /* --------------------------------------------------------------------------- Tables - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { .table td, .table th { padding-left: var(--spacing-card-desktop); padding-right: var(--spacing-card-desktop); } } /* --------------------------------------------------------------------------- Tables - Style Variants Header bottom border (border-bottom-table class) is always preserved. --------------------------------------------------------------------------- */ /* Pod nadpisem tabulky bez popisku – stejná výška jako .frontend-editor-editable (20px) + mb-2 */ .vb-table-section-caption-gap { min-height: 20px; } /* Default style - clean, no cell borders (module-table + hardcoded page tables) */ .table.vb-table-default td { border: none !important; } /* Horizontal lines - row separators */ .table.vb-table-horizontal td { border-top: 1px solid var(--border-color, #e0e0e0) !important; border-left: none !important; border-right: none !important; border-bottom: none !important; } /* Vertical lines - column separators (header + body) */ .table.vb-table-vertical td, .table.vb-table-vertical th { border-top: none !important; border-bottom: none !important; border-right: none !important; border-left: 1px solid var(--border-color, #e0e0e0) !important; } .table.vb-table-vertical td:first-child, .table.vb-table-vertical th:first-child { border-left: none !important; } /* Preserve header bottom border for vertical style */ .table.vb-table-vertical thead th.border-bottom-table { border-bottom: 1px solid var(--border-color-light) !important; } /* Grid - internal borders only (header + body, outer border from container) */ .table.vb-table-grid td, .table.vb-table-grid th { border-right: 1px solid var(--border-color, #e0e0e0) !important; border-bottom: 1px solid var(--border-color, #e0e0e0) !important; border-top: none !important; border-left: none !important; } .table.vb-table-grid td:last-child, .table.vb-table-grid th:last-child { border-right: none !important; } .table.vb-table-grid tbody tr:last-child td { border-bottom: none !important; } /* ========================================================================== 8. COMPONENTS - FORMS ========================================================================== */ input, textarea { height: 40px; } input[type=range] { -webkit-appearance: none; appearance: none; background-color: var(--border-color); height: 6px; border-radius: 8px; border: solid var(--border-color-light) 1px; } input[type=number] { -webkit-appearance: none; appearance: none; background-color: var(--bg-input); height: 6px; border-radius: 4px; border: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; position: relative; top: 0px; z-index: 1; width: 18px; height: 18px; cursor: pointer; border-radius: 40px; background-color: var(--button-primary-color); } input[type=range]::-moz-range-thumb { position: relative; top: 0px; z-index: 1; width: 18px; height: 18px; cursor: pointer; border-color: transparent; border-radius: 40px; background-color: var(--button-primary-color); } .dropdown-menu { border-radius: var(--border-radius-card); } .dropdown-item { color: var(--text-color) !important; } .dropdown-item.active, .dropdown-item:active { color: var(--color-white) !important; background-color: var(--button-primary-color); } /* --------------------------------------------------------------------------- Forms - Responsive (max-width: 700px - larger slider thumbs on mobile) --------------------------------------------------------------------------- */ @media only screen and (max-width: 700px) { input[type=range]::-webkit-slider-thumb { width: 22px !important; height: 22px !important; } input[type=range]::-moz-range-thumb { width: 22px !important; height: 22px !important; } } /* Password fields with show/hide (locked page, link-lock modal, etc.) */ .vb-password-field { position: relative; display: block; width: 100%; } .vb-password-field .vb-password-field-input { padding-right: 2.75rem; width: 100%; } .vb-password-toggle { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; margin: 0; border: none; border-radius: var(--border-radius-button, 6px); background: transparent; color: inherit; cursor: pointer; line-height: 0; } .vb-password-toggle:focus-visible { outline: 2px solid var(--button-primary-color, #005B5B); outline-offset: 2px; } .vb-password-icon { display: block; flex-shrink: 0; } /* SVG ignores [hidden] inconsistently — toggle icons via wrapper class */ .vb-password-field:not(.vb-password-field--plain) .vb-password-icon--revealed { display: none !important; } .vb-password-field.vb-password-field--plain .vb-password-icon--masked { display: none !important; } /* ========================================================================== 9. COMPONENTS - NAVIGATION ========================================================================== */ .nav-tabs .nav-link.active { background-color: var(--logo-dark-bg); color: white; border-bottom-left-radius: 0em; border-bottom-right-radius: 0em; border: none; } .nav-tabs .nav-link { border: none; color: var(--link-color); border-top-left-radius: 0rem; border-top-right-radius: 0rem; } .nav-pills .nav-link.active { color: var(--gray-60); background-color: var(--gray-15); padding: 0.8rem 1rem; } .nav-pills .nav-link { color: var(--gray-40); border-radius: var(--border-radius-button); font-size: 14px; padding: 0.8rem 1rem; } #langlinks img { height: 18px; margin-right: 8px; } #langlinks .btn { text-transform: uppercase; } #language-nav { -webkit-appearance: none !important; appearance: none !important; } /* ========================================================================== 10. MODULES ========================================================================== */ /* TOOLTIP */ .tooltip.show { opacity: 1; } .tooltip-inner { color: var(--tooltip-text-color); text-align: center; background-color: var(--tooltip-bg-color); border-radius: var(--border-radius-tooltip); opacity: 1; font-weight: 600; padding-right: 10px; padding-left: 10px; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; font-size: 12px; } .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^=top] .arrow::before { border-top-color: var(--tooltip-bg-color); } .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^=right] .arrow::before { border-right-color: var(--tooltip-bg-color); } .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^=bottom] .arrow::before { border-bottom-color: var(--tooltip-bg-color); } .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^=left] .arrow::before { border-left-color: var(--tooltip-bg-color); } /* LIGHTBOX */ body.lb-disable-scrolling { overflow: hidden; } .lightboxOverlay { position: absolute; top: 0; left: 0; z-index: 12000; /* above frontend editor UI (up to ~1001) and protection-zone handles (10002) */ background-color: black; opacity: 0.8; display: none; } .lightbox { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: auto; max-width: 100vw; z-index: 12001; text-align: center; line-height: 0; font-weight: normal; outline: none; } .lightbox .lb-image { display: block; height: auto !important; width: auto !important; max-width: calc(100vw - 40px) !important; max-height: calc(100vh - 100px) !important; border-radius: var(--border-radius-card); border: none; object-fit: contain; } .lightbox a img { border: none; } .lb-outerContainer { position: relative; zoom: 1; width: 250px; height: 250px; max-width: calc(100vw - 40px) !important; max-height: calc(100vh - 120px) !important; margin: 0 auto; border-radius: var(--border-radius-card); background-color: black; overflow: hidden; } .lb-outerContainer:after { content: ""; display: table; clear: both; } .lb-loader { position: absolute; top: 43%; left: 0; height: 25%; width: 100%; text-align: center; line-height: 0; } .lb-cancel { display: block; width: 40px; height: 40px; margin: 0 auto; background: url(../../assets/img/tech/lightbox/spinner.svg) no-repeat; } .lb-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 40; } .lb-container > .nav { left: 0; } .lb-nav a { outline: none; background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); } .lb-prev, .lb-next { height: 100%; cursor: pointer; display: block; } .lb-nav a.lb-prev { width: 50%; left: 0; float: left; background: url(/assets/img/tech/lightbox/prev.svg) left 48% no-repeat; opacity: 0; transition: opacity 0.6s; background-size: 40px; } .lb-nav a.lb-prev:hover { opacity: 0.9; } .lb-nav a.lb-next { width: 50%; right: 0; float: right; background: url(/assets/img/tech/lightbox/next.svg) right 48% no-repeat; opacity: 0; transition: opacity 0.6s; background-size: 40px; } .lb-nav a.lb-next:hover { opacity: 0.9; } .lb-dataContainer { margin: 0 auto; padding-top: 5px; zoom: 1; width: 100%; max-width: calc(100vw - 40px); border-bottom-left-radius: var(--border-radius-card); border-bottom-right-radius: var(--border-radius-card); } .lb-dataContainer:after { content: ""; display: table; clear: both; } .lb-data { padding: 0 4px; color: #ccc; } .lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; } .lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; } .lb-data .lb-caption a { color: #4ae; } .lb-data .lb-number { display: block; clear: left; padding-bottom: 1em; font-size: 12px; color: #999999; } .lb-data .lb-close { display: block; float: right; width: 30px; height: 30px; background: url(/assets/img/tech/lightbox/close.svg) top right no-repeat; text-align: right; outline: none; opacity: 0.7; transition: opacity 0.2s; background-size: 25px; } .lb-data .lb-close:hover { cursor: pointer; opacity: 1; } /* Lightbox dark controls for light images */ .lightbox.lb-light-image .lb-nav a.lb-prev { background-image: url(/assets/img/tech/lightbox/prev-dark.svg); } .lightbox.lb-light-image .lb-nav a.lb-next { background-image: url(/assets/img/tech/lightbox/next-dark.svg); } .lightbox.lb-light-image .lb-data .lb-caption, .lightbox.lb-light-image .lb-data .lb-number { color: #222; } /* Lightbox responsive adjustments */ @media (max-width: 767.98px) { .lb-outerContainer { max-width: calc(100vw - 20px) !important; max-height: calc(100vh - 80px) !important; } .lightbox .lb-image { max-width: calc(100vw - 30px) !important; max-height: calc(100vh - 100px) !important; } .lb-dataContainer { max-width: calc(100vw - 20px); } .lb-nav a.lb-prev, .lb-nav a.lb-next { opacity: 0.7; } } @media (max-width: 480px) { .lb-outerContainer { max-width: calc(100vw - 10px) !important; max-height: calc(100vh - 60px) !important; } .lightbox .lb-image { max-width: calc(100vw - 20px) !important; max-height: calc(100vh - 80px) !important; } .lb-dataContainer { max-width: calc(100vw - 10px); } .lb-data .lb-details { width: 75%; } } /* PROTECTION ZONE ANIMATION */ .meter { height: auto; position: relative; } .meter > div { display: block; height: 100%; background-color: var(--bg-meter); position: relative; overflow: hidden; } .meter > div:after, .animate > div > div { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: linear-gradient(-45deg, white 25%, transparent 25%, transparent 50%, white 50%, white 75%, transparent 75%, transparent); z-index: 0; background-size: 25px 25px; animation: move 4s linear infinite; overflow: hidden; } .animate > div:after { display: none; } @keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } /* CONTRAST CHECKER MODULE */ .contrast-checker h4 { font-size: var(--table-font-size) !important; } .contrast-inputs h4 { font-size: var(--table-font-size) !important; } .contrast-inputs label h4 { font-size: var(--table-font-size) !important; } /* COLOR CIRCLES (responsive) */ .color-circle { width: 65px; height: 65px; min-width: 65px; min-height: 65px; flex-shrink: 0; } @media (max-width: 991.98px) { .color-circle { width: 55px; height: 55px; min-width: 55px; min-height: 55px; } } @media (max-width: 767.98px) { .color-circle { width: 50px; height: 50px; min-width: 50px; min-height: 50px; } } @media (max-width: 575.98px) { .color-circle { width: 45px; height: 45px; min-width: 45px; min-height: 45px; } } @media (max-width: 400px) { .color-circle { width: 40px; height: 40px; min-width: 40px; min-height: 40px; } } /* Colors hub card — “Kruhy na vlně” (snippet card-preview-colors + homepage templates) */ @keyframes gentleWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .color-circle-animated-1, .color-circle-animated-2, .color-circle-animated-3 { animation: gentleWave 2.5s ease-in-out infinite; transform: translateY(0); } .color-circle-animated-1 { animation-delay: 0s; } .color-circle-animated-2 { animation-delay: 0.25s; } .color-circle-animated-3 { animation-delay: 0.5s; } @media (prefers-reduced-motion: reduce) { .color-circle-animated-1, .color-circle-animated-2, .color-circle-animated-3 { animation: none !important; transform: none !important; } } /* INDICATOR ICONS Consolidated indicator styles - all indicators share base styles Individual icons are targeted via attribute selector [class^="ri-"] ========================================================================== */ /* Base indicator container - shared positioning */ .lock-indicator, .lock-image-indicator, .portal-indicator, .multibrand-indicator, .external-link-indicator, .portal-external-link-indicator { top: 0; right: 0; color: var(--indicator-color); z-index: 10; } /* Base indicator icon - shared icon styles */ .lock-indicator [class^="ri-"], .lock-image-indicator [class^="ri-"], .portal-indicator [class^="ri-"], .portal-indicator svg.vb-portal-hub-icon, .multibrand-indicator [class^="ri-"], .external-link-indicator [class^="ri-"], .portal-external-link-indicator [class^="ri-"] { font-size: 15px; color: inherit; position: absolute; top: 12px; right: 12px; background: var(--bg-indicator); padding: 0.6em; border-radius: 50%; border: 1px solid var(--border-color); width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; line-height: 1; } /* Modifier: portal-external-link has slightly different positioning */ .portal-external-link-indicator [class^="ri-"] { top: 13px; right: 13px; } /* ========================================================================== 11. UTILITIES ========================================================================== */ /* Logo sizing utilities (.logo-size-5 to .logo-size-100) */ .logo-size-100 .logo-size { width: 100%; } .logo-size-95 .logo-size { width: 95%; } .logo-size-90 .logo-size { width: 90%; } .logo-size-85 .logo-size { width: 85%; } .logo-size-80 .logo-size { width: 80%; } .logo-size-75 .logo-size { width: 75%; } .logo-size-70 .logo-size { width: 70%; } .logo-size-65 .logo-size { width: 65%; } .logo-size-60 .logo-size { width: 60%; } .logo-size-55 .logo-size { width: 55%; } .logo-size-50 .logo-size { width: 50%; } .logo-size-45 .logo-size { width: 45%; } .logo-size-40 .logo-size { width: 40%; } .logo-size-35 .logo-size { width: 35%; } .logo-size-30 .logo-size { width: 30%; } .logo-size-25 .logo-size { width: 25%; } .logo-size-20 .logo-size { width: 20%; } .logo-size-15 .logo-size { width: 15%; } .logo-size-10 .logo-size { width: 10%; } .logo-size-5 .logo-size { width: 5%; } /* Position utilities */ .position-relative { position: relative; } .position-absolute { position: absolute; } /* Background utilities */ .bg-light { background-color: var(--bg-subtle) !important; } /* Border utilities (consolidated .border and .border-table) */ .border, .border-table { border: 1px solid var(--border-color) !important; } .border-left { border-left: 1px solid var(--border-color) !important; } .border-right { border-right: 1px solid var(--border-color) !important; } .border-bottom { border-bottom: 1px solid var(--border-color) !important; } .border-top { border-top: 1px solid var(--border-color) !important; } .border-bottom-table { border-bottom: 1px solid var(--border-color-light) !important; } .border-light { border: 1px solid var(--border-color-light) !important; } .border-no-top { border-left: 1px solid var(--border-color) !important; border-right: 1px solid var(--border-color) !important; border-bottom: 1px solid var(--border-color) !important; } /* Shadow utilities */ .shadow-on-hover:hover { box-shadow: var(--shadow-hover) !important; } /* Radius utilities */ .radius { border-radius: var(--border-radius-card) !important; } .radius-button { border-radius: var(--border-radius-button) !important; } .radius-top-left { border-top-left-radius: var(--border-radius-card) !important; } .radius-top-right { border-top-right-radius: var(--border-radius-card) !important; } .radius-top { border-top-left-radius: var(--border-radius-card) !important; border-top-right-radius: var(--border-radius-card) !important; } .radius-right { border-top-right-radius: var(--border-radius-card) !important; border-bottom-right-radius: var(--border-radius-card) !important; } .radius-bottom { border-bottom-right-radius: var(--border-radius-card) !important; border-bottom-left-radius: var(--border-radius-card) !important; } .swatch-group { border-radius: var(--border-radius-card); overflow: hidden; } .swatch-group > div, .swatch-group > div * { border-radius: 0 !important; } /* Text color utilities */ .text-primary { color: var(--link-color) !important; } .text-danger-color { color: var(--danger-color) !important; } .text-danger-color strong { color: var(--danger-color) !important; } .text-success-color { color: var(--success-color) !important; } .text-success-color strong { color: var(--success-color) !important; } /* Transition utility */ .transition-all { transition: all var(--transition-fast); } .rotate { transform: rotate(180deg); transition: transform 0.3s ease-in-out; } .zoom:hover { transform: scale(1.016); } /* Blur effect */ .blur { background-color: var(--card-bottom-bg-color); position: relative; overflow: hidden; } .blur::before { background-color: var(--card-bottom-bg-color); position: absolute; content: ''; filter: blur(50px); inset: 3%; z-index: -1; } /* Stretched link */ .stretched-link::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: 1; } /* Alerts and badges */ .alert { border-radius: var(--border-radius-card); font-family: var(--font-family-body) !important; padding-bottom: 0rem; margin-bottom: var(--spacing-card-mobile); } .alert-info { color: var(--info-box-text-color) !important; background-color: var(--info-box-bg-color) !important; border-radius: var(--border-radius-card) !important; border-color: var(--info-box-bg-color) !important; font-family: var(--font-family-body) !important; } /* Consolidated alert-info text color (was 3 separate rules) */ .alert-info a, .alert-info .alert-link, .alert-info-link, .alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4, .alert-info h5, .alert-info h6, .alert-info ul, .alert-info ol, .alert-info li { color: var(--info-box-text-color) !important; } .alert-info a, .alert-info-link { text-decoration: underline; } /* Popisek pod nadpisem (Kirby textarea): odkaz bez podtržení, podtržení při hoveru */ .vb-kt-inline--caption a[href] { text-decoration: none !important; } .vb-kt-inline--caption a[href]:hover { text-decoration: underline !important; } /* Odkazy v barvách / ratio popiscích – stále podtržené */ [data-editable="mainColorsDescription"] a, [data-editable="colorRatioDescription"] a { text-decoration: underline; } /* Consolidated hover underline */ .alert-info a:hover, .alert-info-link:hover, [data-editable="mainColorsDescription"] a:hover, [data-editable="colorRatioDescription"] a:hover, .recent-updates-card a:hover { text-decoration: underline !important; } /* Recent updates card links — always underlined (must not override .alert-info a) */ .recent-updates-card a, .recent-updates-card li a { text-decoration: underline; } .alert-danger { background-color: var(--border-color); border: none; color: var(--text-dark); border-radius: 4px; font-size: 14px !important; padding-bottom: 10px; } .badge { border-radius: var(--border-radius-badge); font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important; padding-left: 0.8em; padding-right: 0.8em; transition: none; cursor: help; } .badge-info { color: var(--info-badge-text-color); background-color: var(--info-badge-bg-color); margin-right: 0.5rem; font-weight: 600; } .badge-danger { color: var(--color-white); background-color: var(--danger-color); } .badge-success { color: var(--color-white); background-color: var(--success-color); } .badge-large { font-size: 1.2rem; } /* Rules styling (allowed/forbidden) */ .allowed-rules { padding: var(--spacing-card-mobile); border-left: 3px solid var(--success-color); border-top: solid 1px var(--border-color); border-bottom: solid 1px var(--border-color); border-right: solid 1px var(--border-color); } .allowed-rules code { color: var(--success-color) !important; } .forbidden-rules { padding: var(--spacing-card-mobile); border-left: 3px solid var(--danger-color); border-top: solid 1px var(--border-color); border-bottom: solid 1px var(--border-color); border-right: solid 1px var(--border-color); } .forbidden-rules code { color: var(--danger-color); } #accordion-certificate .allowed-rules { background-color: var(--bg-subtle); } /* Logo rule icons */ .icon-allowed { position: absolute; top: 23px; left: 25px; transform: translate(-50%, -50%); font-size: 1.5em; color: var(--icon-allowed-color); z-index: 20; } .icon-yes { display: none !important; } /* Consolidated logo-rule-settings shared styles (was 11 separate rules with !important) */ .logo-rule-settings[class*="add-icon-yes"] .icon-yes { display: block !important; position: absolute; left: 13px; top: 13px; } /* Crossed line decorations */ .crossed-line { overflow: hidden; position: relative; } .ratio-4-3 > .crossed-line, .ratio-1-1 > .crossed-line, .aspect-ratio-container > .overlay.crossed-line { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .crossed-line::after { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: calc(var(--strikethrough-weight, 1px) * 2); background: var(--cross-color); transform: translate(-50%, -50%) rotate(var(--cross-angle, -37deg)); transform-origin: center; z-index: 20; border-radius: 1px; } .crossed-red { overflow: hidden; position: relative; } .crossed-red::after { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: calc(var(--strikethrough-weight, 1px) * 2); background: rgb(255, 76, 80); transform: translate(-50%, -50%) rotate(var(--cross-angle, -37deg)); transform-origin: center; border-radius: 1px; } .tba-item { overflow: hidden; position: relative; } /* Contact card email link follows the configured body text size ("Velikost textů"). Scoped to the mailto link so the other .tba-item cards are unaffected. */ @media (min-width: 768px) { .tba-item a[href^="mailto:"] { font-size: calc(var(--base-font-size) * 1); } } /* Swatch values */ .swatch-value { color: var(--gray-80); font-weight: 700; font-size: 1rem; text-transform: uppercase; } .hex-value { display: inline; } .color-value:hover { color: var(--gray-100); } .color-value { font-size: 0.875rem; } /* Visualbook description and language switcher */ #visualbook-description { color: var(--visualbook-description-color) !important; background-color: var(--header-color) !important; -webkit-appearance: none !important; } /* Keep transparent like other header multibrand controls (never match header bar fill) */ #language-switcher, #language-switcher:hover, #language-switcher:focus, #language-switcher:active, #language-switcher:not(:disabled):not(.disabled):active:focus, .show > #language-switcher.dropdown-toggle { background-color: transparent !important; -webkit-appearance: none !important; appearance: none !important; padding-top: 11px; } /* --------------------------------------------------------------------------- Utilities - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { .allowed-rules, .forbidden-rules { padding: var(--spacing-card-desktop); } } /* --------------------------------------------------------------------------- Module: Video – DotLottie (stejné rozvržení jako Panel / visualbook-lottie-file-preview) --------------------------------------------------------------------------- */ /* Kontejner pro Lottie (lottie-web může vykreslit SVG nebo canvas) */ .vb-module-video-dotlottie.vb-module-video-lottie-svg { position: relative; width: 100%; max-width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .vb-module-video-dotlottie.vb-module-video-lottie-svg > svg { width: 100%; height: auto; max-height: 100%; display: block; } .vb-module-video-dotlottie.vb-module-video-lottie-svg > canvas { width: 100% !important; height: 100% !important; max-height: 100%; display: block; } /* ========================================================================== 13. ANIMATIONS ========================================================================== */ /* ===================================================================== Dynamic CSS - Static blocks (moved from head.php inline styles) ===================================================================== */ @media (max-width: 767px) { .btn-multibrand span { display: none; } } .dropdown-item.active, .dropdown-item:active { color: #fff !important; background-color: var(--button-primary-color); } /* module-text: remove trailing margin from the last block's last element */ .module--module-text .col-md-8 > div > :last-child { margin-bottom: 0; } /* module-text: heading spacing in tiptap content (match left column title mb-3) */ .module--module-text .col-md-8 :is(h2, h3, h4, h5, h6) { margin-bottom: 1rem; } /* module-text: headings keep a top gap whenever ANY element precedes them. Only the very first item at the module top has no gap (:first-child). */ .module--module-text .col-md-8 > div > :is(h2, h3, h5, h6):not(:first-child) { margin-top: 2.5rem; } /* module-text: subsequent h4 only (tune margin-top here) */ .module--module-text .col-md-8 > div > h4:not(:first-child) { margin-top: 1.5rem; } /* module-text: spacing below paragraphs in tiptap content */ .module--module-text .col-md-8 > div p { margin-bottom: 1.25rem; } /* module-text: while editing, the TipTap editor wraps the content in .frontend-editor-tiptap-editor > .ProseMirror. Mirror the direct-child spacing rules above onto the editor's children so the layout matches the rendered view. */ .module--module-text .col-md-8 .ProseMirror > :last-child { margin-bottom: 0; } .module--module-text .col-md-8 .ProseMirror > :is(h2, h3, h5, h6):not(:first-child) { margin-top: 2.5rem; } .module--module-text .col-md-8 .ProseMirror > h4:not(:first-child) { margin-top: 1.5rem; } /* Accordion (rozbalovací obsah) content — same heading rhythm as module-text: a Podnadpis (H4) gets a top gap when it follows other content, and a subsequent Nadpis (H3/H2/H5/H6) a larger one. A heading that is the field's FIRST element (:first-child) stays flush — so a Podnadpis-first field keeps its current look. Both the rendered view and the live TipTap editor (.ProseMirror) are covered so editing matches the result. */ [data-field-name="acordeonTextarea"] > :is(h2, h3, h5, h6):not(:first-child), [data-field-name="acordeonTextarea"] .ProseMirror > :is(h2, h3, h5, h6):not(:first-child), .card-body[data-field-name="imageTextarea"] > :is(h2, h3, h5, h6):not(:first-child), .card-body[data-field-name="imageTextarea"] .ProseMirror > :is(h2, h3, h5, h6):not(:first-child) { margin-top: 2.5rem; } [data-field-name="acordeonTextarea"] > h4:not(:first-child), [data-field-name="acordeonTextarea"] .ProseMirror > h4:not(:first-child), .card-body[data-field-name="imageTextarea"] > h4:not(:first-child), .card-body[data-field-name="imageTextarea"] .ProseMirror > h4:not(:first-child) { margin-top: 1.5rem; } /* module-text: inline images from tiptap/kirbytext — fit column width */ .module--module-text .col-md-8 figure { display: block; width: 100%; max-width: 100%; margin: 2rem 0; } .module--module-text .col-md-8 figure img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; border-radius: var(--border-radius-card); } .module--module-text .col-md-8 figure figcaption { margin-top: 0.35rem; text-align: center; font-size: 14px; } /* module-text: blockquote from tiptap/kirbytext */ .module--module-text .col-md-8 blockquote { margin: 2rem 0; padding: 20px 20px 20px calc(1rem + 5px); border-inline-start: 3px solid var(--button-primary-color); background-color: #f2f2f2; color: var(--text-color); font-style: normal; } .module--module-text .col-md-8 blockquote :is(p, li, span, div) { font-style: normal; } .module--module-text .col-md-8 blockquote > :last-child { margin-bottom: 0; } /* module-text: code block from tiptap */ .module--module-text .col-md-8 pre { background-color: #f2f2f2; padding: 20px; margin: 2rem 0; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: calc(var(--base-font-size) * 0.9375); } /* module-text: inline code from tiptap */ .module--module-text .col-md-8 code { color: var(--headings-color); background-color: #e1e1e1; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: calc(var(--base-font-size) * 0.9375); padding: 0.25em 0.55em; border-radius: 0.25rem; } .module--module-text .col-md-8 pre code { background-color: transparent; padding: 0; color: inherit; font-size: inherit; border-radius: 0; } /* module-text: horizontal rule from tiptap */ .module--module-text .col-md-8 hr { margin: 2rem 0; } /* module-text: bullet/numbered/task list items follow the configured body text size ("Velikost textů"), just like paragraphs. In the published view TipTap strips the

wrapper inside

  • , leaving bare text that would otherwise not pick up the `body p` font-size rule and stay at the browser default. */ @media (min-width: 768px) { .module--module-text .col-md-8 :is(ul, ol) li { font-size: calc(var(--base-font-size) * 1); } } /* module-text: task list from tiptap JSON */ /* * TipTap task lists (checklists) — frontend rendered DOM: *