/* ========================================================================== 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-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; } .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; } /* Typography card font display */ body .card-typography .card-typography-font { font-size: 6.5rem; color: var(--card-typography-text-color) !important; } .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; } body .text-display-main { font-size: 9rem; color: var(--headings-color) !important; margin-bottom: -1rem; margin-top: -1rem; } .font-showcase-color { color: var(--text-color) !important; } .use-inter { font-family: 'Inter', sans-serif !important; font-weight: 500; } /* --------------------------------------------------------------------------- 3.3 Anchor Points for H3 Headings --------------------------------------------------------------------------- */ section h3 { position: relative; cursor: pointer; } section h3.no-anchor { cursor: auto; } section h3:not(.homepage):not(.no-anchor)::before { content: '\EA2F'; font-family: 'remixicon' !important; font-size: 1.4rem; position: absolute; left: -30px; top: 3px; opacity: 0; color: var(--gray-40); transition: opacity 0s, color 0s; } section h3:not(.homepage):not(.no-anchor):hover::before { opacity: 1; } body[data-frontend-editor-active="true"] section h3:not(.homepage):not(.no-anchor):hover::before, body[data-frontend-editor-active="true"] section h3:not(.homepage):not(.no-anchor).clicked::before { opacity: 0 !important; } section h3:not(.homepage):not(.no-anchor).clicked::before { content: '\eb7b'; color: var(--success-color); opacity: 1; } /* --------------------------------------------------------------------------- 3.4 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.5 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)); } /* 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.6 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)); } /* 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.7 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 h5 { 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 h6, thead.bg-light th 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; } } /* ========================================================================== 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: 50; 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: 60; 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 h6 { font-size: var(--table-font-size) !important; } .contrast-inputs h6 { font-size: var(--table-font-size) !important; } .contrast-inputs label h6 { 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; } } /* 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-"], .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; } /* 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; } /* Links in left column should be underlined */ [data-editable="headerTextarea"] a, [data-editable="mainColorsDescription"] a, [data-editable="colorRatioDescription"] a { text-decoration: underline; } /* Consolidated hover underline (was 4 separate rules) */ .alert-info a:hover, .alert-info-link:hover, [data-editable="headerTextarea"] a:hover, [data-editable="mainColorsDescription"] a:hover, [data-editable="colorRatioDescription"] a:hover, .recent-updates-card a:hover { text-decoration: underline !important; } /* Recent updates cards links */ .recent-updates-card a { text-decoration: none; } .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; } #language-switcher { background-color: var(--header-color) !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; } } /* ========================================================================== 13. ANIMATIONS ========================================================================== */ /* .color-circle-animated and @keyframes gentleWave removed - unused (color-circle-animated-1/2/3 are defined inline in templates) */