/* ========================================================================== 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 */ /* Typography - letter-spacing baseline (overridden in head.php) */ --body-kerning: 0; /* Default: no extra letter-spacing */ /* ========================================================================== BORDERS & LINES ========================================================================== */ --border-color: #e2e2e2; /* Primary border color */ --border-color-light: #ededed; /* Lighter border variant */ --line-color: #ebebeb; /* Decorative lines (cards, dividers) */ /* ========================================================================== 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); } /* Font preview classes removed - unused (.font-additional, .font-main) */ /* ========================================================================== 2. BASE / RESET ========================================================================== */ html { position: relative; min-height: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; overflow: auto; font-family: var(--font-family-body); letter-spacing: var(--body-kerning); 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) !important; } body .table, body .alert, body .breadcrumb, body .nav { font-family: var(--font-family-body); font-size: 0.9375rem; letter-spacing: var(--body-kerning) !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); } .logo-bg-color { background-color: var(--logo-dark-bg); } .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; } .breadcrumb-line { border-top: none; border-bottom: solid 1px var(--border-color); } /* 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; } .homepage-card-line { 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; } .ratio-1-1 { position: relative; } .ratio-1-1:before { display: block; content: " "; width: 100%; padding-top: 100%; } .ratio-1-1 > .logo-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Logo on image */ .logo-on-image { background-size: cover; background-position: center; } /* 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: 1rem; } } /* ========================================================================== 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; } .font-showcase-color { color: var(--text-color) !important; } .use-inter { font-family: 'Inter', sans-serif !important; font-weight: 500; } /* --------------------------------------------------------------------------- 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)); } /* 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; } /* .description-padding removed - unused */ /* 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%; } .video-container { position: relative; overflow: hidden; } .video-container.aspect-ratio-16-9 { padding-top: 56.25%; } .video-container.aspect-ratio-4-3 { padding-top: 75%; } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-container.aspect-ratio-original iframe, .video-container.aspect-ratio-original video { position: static; width: 100%; height: auto; } /* --------------------------------------------------------------------------- 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; } /* btn-language has !important due to Bootstrap override */ .btn-language, .btn-language:hover, .btn-language:focus, .btn-language:active, .btn-language:not(:disabled):not(.disabled):active:focus { box-shadow: none !important; } /* --------------------------------------------------------------------------- 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.7 Button - Language Switcher --------------------------------------------------------------------------- */ .btn-language { padding: 0.8rem; color: var(--button-language-color); background-color: transparent !important; border-color: var(--button-language-color); border-radius: var(--border-radius-card) !important; } .btn-language:hover { border-color: var(--button-language-color) !important; } .btn-language:focus, .btn-language:active, .btn-language:not(:disabled):not(.disabled):active:focus { border-color: white; } /* --------------------------------------------------------------------------- 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); } .card-bottom-area-multibrand { background-color: white; } .card-typography-bg { background-color: var(--card-typography-bg); } .dynamic-block { background-color: var(--dynamic-blocks-bg-color); } .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); } .bg-card-typography { background-color: var(--card-typography-bg) !important; } .bg-card-swatch { background-color: var(--card-color-bg); } .carousel-typography { background-color: var(--card-typography-bg); } .carousel-typography .card-typography-font { color: var(--card-typography-text-color); } .custom-link:hover .card-main h2 { text-decoration: none !important; } /* --------------------------------------------------------------------------- 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); } } /* ========================================================================== 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; } /* .chart-tab styles removed - unused */ .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; } .accordion-settings-arrow { font-size: 0.8125rem; color: var(--link-color); } /* ========================================================================== 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-close { background-image: url(/assets/img/tech/lightbox/close-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-module .color-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none !important; background-color: transparent; height: 36px; width: 36px; outline: none; cursor: pointer; padding: 0px; margin-left: 3px; } .contrast-module .hex-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: white; color: black; border: none; font-size: 16px; font-weight: 700; outline: none; } .contrast-module .hex-input:active { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: white; color: black; border: none; font-size: 16px; font-weight: 700; height: 40px; } .contrast-module .d-flex.flex-md-row { flex-direction: column !important; } .contrast-module .row-contrast-checker:hover { background-color: white !important; } .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%; } /* .ncs and .ral visibility utilities removed - unused (data-format attributes are used instead) */ /* 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; } .shadow-tiny { box-shadow: var(--shadow-sm); } /* 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-top-20 removed - unused */ .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; } .radius-left { border-top-left-radius: var(--border-radius-card); border-bottom-left-radius: var(--border-radius-card); } .radius-group-horizontal :first-child { border-top-left-radius: var(--border-radius-card); border-bottom-left-radius: var(--border-radius-card); } .radius-group-horizontal :last-child { border-top-right-radius: var(--border-radius-card); border-bottom-right-radius: var(--border-radius-card); } .radius-group-vertical :first-child { border-top-left-radius: var(--border-radius-card); border-top-right-radius: var(--border-radius-card); } .radius-group-vertical :last-child { border-bottom-left-radius: var(--border-radius-card); border-bottom-right-radius: var(--border-radius-card); } .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-link-color { color: var(--link-color); } .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 */ .logo-rule-no .icon-yes { display: none; } .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; } /* Logo icon color variants */ .logo-rule-settings.add-icon-yes-green .icon-yes { color: var(--success-color); } .logo-rule-settings.add-icon-yes-black .icon-yes { color: black; } .logo-rule-settings.add-icon-yes-white .icon-yes { color: white; } .logo-rule-settings.add-icon-yes-black-30 .icon-yes { color: rgba(0, 0, 0, 0.3); } .logo-rule-settings.add-icon-yes-black-40 .icon-yes { color: rgba(0, 0, 0, 0.4); } .logo-rule-settings.add-icon-yes-black-50 .icon-yes { color: rgba(0, 0, 0, 0.5); } .logo-rule-settings.add-icon-yes-black-60 .icon-yes { color: rgba(0, 0, 0, 0.6); } .logo-rule-settings.add-icon-yes-white-30 .icon-yes { color: rgba(255, 255, 255, 0.3); } .logo-rule-settings.add-icon-yes-white-40 .icon-yes { color: rgba(255, 255, 255, 0.4); } .logo-rule-settings.add-icon-yes-white-50 .icon-yes { color: rgba(255, 255, 255, 0.5); } .logo-rule-settings.add-icon-yes-white-60 .icon-yes { color: rgba(255, 255, 255, 0.6); } /* 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; } /* Logo protection zone */ .logo-protection-zone { border: 1px dashed var(--danger-color); width: 100%; } /* Ribbon (TBA items) */ .ribbon { display: none; } .tba-item .ribbon { display: block; width: 120px; height: 28px; font-size: 12px; text-align: center; color: black; font-weight: 700; background: var(--gray-20); transform: rotate(45deg); position: absolute; right: -35px; top: 12px; padding-top: 7px; } .tba-item { overflow: hidden; position: relative; } /* Swatch values */ .main-swatch-settings .swatch-value { color: var(--gray-80); } .secondary-swatch-settings .swatch-value { color: var(--gray-80) !important; } .gradients-settings .swatch-value { color: var(--gray-80) !important; } .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; } /* .page-logo-formats .alert-logo-formats removed - unused */ /* 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; } /* Image textarea styling */ .image-textarea { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .image-textarea img { max-width: 100%; height: auto; display: block; margin-bottom: 1em; } .image-textarea p { margin-bottom: 1em; } /* --------------------------------------------------------------------------- Utilities - Responsive (md: 768px) --------------------------------------------------------------------------- */ @media (min-width: 768px) { .allowed-rules, .forbidden-rules { padding: var(--spacing-card-desktop); } } @media (max-width: 767.98px) { .image-textarea { padding: 0 15px; } } /* --------------------------------------------------------------------------- Module: Video – DotLottie (stejné rozvržení jako Panel / 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 > :last-child { margin-bottom: 0; }