/* ========================================================================== Todix Style Variants Custom brand themes applied via ?style= query parameter. Sets data-style attribute on , used as CSS selector. ========================================================================== */ /* ========================================================================== SHELVED — Premium British shelving brand Brand: #596D69 (dark teal), #EBD7D8 (blush pink), #F2EFEE (warm grey) Fonts: Montserrat (headings), Roboto (body), weights 300/400/600 Buttons: square (border-radius: 0) Usage: &style=shelved ========================================================================== */ body[data-style="shelved"] { /* Primary accent — Shelved dark teal */ --accent-color: #596D69; /* Scene background */ --scene-bg-top: #ffffff; --scene-bg-bottom: #ffffff; /* Surface tokens */ --md3-surface: #ffffff; --md3-surface-variant: #F2EFEE; --md3-outline: #ABABAB; --md3-outline-variant: #E0E0E0; --md3-on-surface: #0D0D0D; --md3-on-surface-variant: #2E2E2E; /* Switch */ --md3-switch-track: #E0E0E0; --md3-switch-track-checked: #596D69; --md3-switch-thumb-checked: #fff; --md3-switch-focus: rgba(46, 75, 76, 0.15); --md3-switch-ripple: rgba(46, 75, 76, 0.15); /* Slider */ --md3-slider-track: #E0E0E0; --md3-slider-track-active: #596D69; --md3-slider-thumb: #596D69; --md3-slider-thumb-border: #596D69; --md3-slider-focus: rgba(46, 75, 76, 0.12); --md3-slider-value-bg: #596D69; --md3-slider-value-color: #fff; /* Swatch */ --md3-swatch-outline: #596D69; --md3-swatch-selected-outline: #596D69; --md3-swatch-unselected-outline: #E0E0E0; --md3-swatch-focus: rgba(46, 75, 76, 0.1); --md3-swatch-label: #2E2E2E; --md3-swatch-label-selected: #0D0D0D; /* Base overrides */ --controls-bg: #ffffff; --controls-label: #0D0D0D; --border-colour: #E0E0E0; --highlight-blue: #596D69; --header-bg: #596D69; --header-text-colour: #ffffff; } /* -------------------------------------------------------------------------- Shelved — Header: teal background -------------------------------------------------------------------------- */ body[data-style="shelved"] .simple-header { background-color: #596D69 !important; color: #ffffff !important; border-bottom-color: #596D69 !important; } body[data-style="shelved"] .simple-header .configurator-title, body[data-style="shelved"] .simple-header .header-title { color: #ffffff !important; } /* -------------------------------------------------------------------------- Shelved — Control Tabs: Montserrat, teal active state -------------------------------------------------------------------------- */ body[data-style="shelved"] #control-tabs { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #E0E0E0 !important; } body[data-style="shelved"] .control-tab { font-family: 'Montserrat', sans-serif !important; font-weight: 400 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; font-size: 0.72rem !important; border-radius: 0 !important; } body[data-style="shelved"] .control-tab.active, body[data-style="shelved"] .control-tab.run-tab.active { background: #596D69 !important; color: #ffffff !important; font-weight: 600 !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="shelved"] .control-tab.active *, body[data-style="shelved"] .control-tab.run-tab.active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="shelved"] .control-tab:hover { color: #596D69 !important; } @media (max-width: 768px) { body[data-style="shelved"] #control-tabs { border-radius: 0 !important; border: none !important; border-top: 1px solid #E0E0E0 !important; border-bottom: 1px solid #E0E0E0 !important; } body[data-style="shelved"] .control-tab { border-radius: 0 !important; } body[data-style="shelved"] .control-tab.active, body[data-style="shelved"] .control-tab.run-tab.active { background: transparent !important; color: #596D69 !important; -webkit-text-fill-color: #596D69 !important; } body[data-style="shelved"] .control-tab.active *, body[data-style="shelved"] .control-tab.run-tab.active * { color: #596D69 !important; -webkit-text-fill-color: #596D69 !important; } body[data-style="shelved"] .control-tab.active::after { background: #596D69 !important; } } body[data-style="shelved"] #control-tabs .control-tab.first-visible { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } body[data-style="shelved"] #control-tabs .control-tab.last-visible { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* -------------------------------------------------------------------------- Shelved — Controls Panel -------------------------------------------------------------------------- */ body[data-style="shelved"] #controls { background: #F5F5F5 !important; border-left-color: #E0E0E0 !important; margin: 0 !important; padding: 8px !important; border-radius: 0 !important; height: calc(100vh - var(--footer-height, 60px)) !important; } /* -------------------------------------------------------------------------- Shelved — Labels: Montserrat, uppercase -------------------------------------------------------------------------- */ body[data-style="shelved"] .control-label { font-family: 'Montserrat', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.3px !important; color: #2E2E2E !important; } body[data-style="shelved"] .value-display { color: #596D69 !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- Shelved — Thumbnail Buttons: square corners, teal active border -------------------------------------------------------------------------- */ body[data-style="shelved"] .thumbnail-select { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body[data-style="shelved"] .thumbnail-button { border-radius: 3px !important; border-color: #E0E0E0 !important; aspect-ratio: 1 / 1 !important; justify-content: center !important; padding: 8px !important; overflow: hidden !important; } /* Shelved — fullImageLarge brand-color overrides */ body[data-style="shelved"] .thumbnail-button.fullImageLarge { background: #f5f3f1 !important; border-radius: 6px !important; } body[data-style="shelved"] .thumbnail-button.fullImageLarge:hover { background: #ebe8e5 !important; } body[data-style="shelved"] .thumbnail-button.fullImageLarge.active { border-color: #2E4B4C !important; box-shadow: 0 1px 4px rgba(46, 75, 76, 0.15) !important; } body[data-style="shelved"] .thumbnail-button.fullImageLarge.active .thumbnail-label { color: #2E4B4C !important; } body[data-style="shelved"] .thumbnail-button:hover { border-color: #ABABAB !important; } body[data-style="shelved"] .thumbnail-button.active { border-color: #596D69 !important; } body[data-style="shelved"] .thumbnail-button.active .thumbnail-label { color: #0D0D0D !important; font-weight: 600 !important; } body[data-style="shelved"] .thumbnail-label { font-weight: 300 !important; color: #2E2E2E !important; } /* -------------------------------------------------------------------------- Shelved — Child Tiles: square corners, teal active border -------------------------------------------------------------------------- */ body[data-style="shelved"] .child-parts-title { font-size: 0.85rem !important; margin-bottom: 2px !important; } body[data-style="shelved"] .child-group-title { font-size: 0.75rem !important; } body[data-style="shelved"] .control-group-container { padding: 12px 12px 10px !important; border-bottom-color: #E0E0E0 !important; } body[data-style="shelved"] .child-group-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 16px !important; } @media (max-width: 1024px) { body[data-style="shelved"] .child-group-tiles { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important; gap: 10px !important; } } body[data-style="shelved"] .child-tile { border: 2px solid transparent !important; border-radius: 12px !important; background: #f5f3f1 !important; padding: 4px 3px 3px !important; justify-content: center !important; overflow: hidden !important; box-shadow: none !important; } body[data-style="shelved"] .child-tile:hover { background: #ebe8e5 !important; border-color: transparent !important; } body[data-style="shelved"] .child-tile.active { background: #ffffff !important; border-color: #2E4B4C !important; box-shadow: 0 1px 4px rgba(46, 75, 76, 0.15) !important; } body[data-style="shelved"] .child-tile-label { font-weight: 400 !important; color: #666 !important; font-size: 0.65rem !important; } body[data-style="shelved"] .child-tile.active .child-tile-label { color: #2E4B4C !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- Shelved — Control Groups: lighter weight body text -------------------------------------------------------------------------- */ body[data-style="shelved"] .control-wrapper { border-bottom-color: #E0E0E0 !important; } /* -------------------------------------------------------------------------- Shelved — Build Size Badge: teal accent -------------------------------------------------------------------------- */ body[data-style="shelved"] #build-size-floating { border-color: #E0E0E0 !important; } /* -------------------------------------------------------------------------- Shelved — Viewer Background: warm grey -------------------------------------------------------------------------- */ body[data-style="shelved"] #viewer-container { background: #F7F7F7 !important; } body[data-style="shelved"] #main-container { background: #F2EFEE !important; } /* -------------------------------------------------------------------------- Shelved — Scrollbar -------------------------------------------------------------------------- */ body[data-style="shelved"] ::-webkit-scrollbar-thumb { background: #ABABAB !important; } body[data-style="shelved"] ::-webkit-scrollbar-thumb:hover { background: #596D69 !important; } /* -------------------------------------------------------------------------- Shelved — Blush pink accent for secondary elements -------------------------------------------------------------------------- */ body[data-style="shelved"] .dimension-badge, body[data-style="shelved"] .info-badge { background: #EBD7D8 !important; color: #2E2E2E !important; } /* -------------------------------------------------------------------------- Shelved — Section Tiles -------------------------------------------------------------------------- */ body[data-style="shelved"] .section-tile.active { border-color: #596D69 !important; background: rgba(46, 75, 76, 0.08) !important; } body[data-style="shelved"] .section-tile.active .section-tile-icon { background: #596D69 !important; } /* -------------------------------------------------------------------------- Shelved — Creator Logo -------------------------------------------------------------------------- */ body[data-style="shelved"] #creator-logo .brand { color: #596D69 !important; } /* -------------------------------------------------------------------------- Shelved — MOQ Warning: teal themed -------------------------------------------------------------------------- */ body[data-style="shelved"] #moq-warning-floating { background: rgba(46, 75, 76, 0.08) !important; border-color: #596D69 !important; color: #596D69 !important; } body[data-style="shelved"] #moq-warning-floating .moq-warning-text { color: #596D69 !important; } /* -------------------------------------------------------------------------- Shelved — Custom Loader: pulsing logo + thin progress bar -------------------------------------------------------------------------- */ #loader.shelved-loader { flex-direction: column !important; align-items: center !important; justify-content: center !important; background-color: #ffffff !important; font-family: Arial, sans-serif !important; } #loader.shelved-loader .logo-container { margin-bottom: 10px; animation: shelvedPulseLogo 2s infinite ease-in-out; } #loader.shelved-loader .logo-container img { width: 250px; height: auto; display: block; } #loader.shelved-loader .progress-bar-container { width: 250px; } #loader.shelved-loader .progress-bar { width: 100%; height: 4px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden; margin-bottom: 12px; } #loader.shelved-loader .progress-bar-fill { height: 100%; background-color: #596D69; transition: width 0.3s ease; } #loader.shelved-loader .loader-text { display: flex; justify-content: space-between; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #596D69; } #loader.shelved-loader .loader-text .loader-status { color: #596D69 !important; -webkit-text-fill-color: #596D69 !important; font-family: 'Montserrat', sans-serif !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } #loader.shelved-loader .loader-text .loader-percentage { color: #596D69 !important; -webkit-text-fill-color: #596D69 !important; font-family: 'Montserrat', sans-serif !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; } @keyframes shelvedPulseLogo { 0% { opacity: 0.5; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } 100% { opacity: 0.5; transform: scale(0.97); } } /* ========================================================================== BOF — British Office Furniture brand Brand: #2a2a2a (charcoal), #d4614e (coral/red), #6aabcf (blue), #e8a838 (yellow) Fonts: Segoe UI / Arial (system), weights 400/600/700 Buttons: pill (border-radius: 30px) Usage: &style=bof ========================================================================== */ body[data-style="bof"] { --accent-color: #d4614e; --md3-surface: #ffffff; --md3-surface-variant: #f7f7f5; --md3-outline: #999; --md3-outline-variant: #e8e8e6; --md3-on-surface: #2a2a2a; --md3-on-surface-variant: #7a7a7a; --md3-switch-track: #e5e5e5; --md3-switch-track-checked: #d4614e; --md3-switch-thumb-checked: #fff; --md3-switch-focus: rgba(212, 97, 78, 0.15); --md3-switch-ripple: rgba(212, 97, 78, 0.15); --md3-slider-track: #e5e5e5; --md3-slider-track-active: #d4614e; --md3-slider-thumb: #d4614e; --md3-slider-thumb-border: #d4614e; --md3-slider-focus: rgba(212, 97, 78, 0.12); --md3-slider-value-bg: #d4614e; --md3-slider-value-color: #fff; --md3-swatch-outline: #2a2a2a; --md3-swatch-selected-outline: #d4614e; --md3-swatch-unselected-outline: #e8e8e6; --md3-swatch-focus: rgba(212, 97, 78, 0.1); --md3-swatch-label: #7a7a7a; --md3-swatch-label-selected: #2a2a2a; --controls-bg: #ffffff; --controls-label: #2a2a2a; --border-colour: #e8e8e6; --highlight-blue: #d4614e; --header-bg: #ffffff; --header-text-colour: #2a2a2a; } body[data-style="bof"] .simple-header { background-color: #ffffff !important; color: #2a2a2a !important; border-bottom: 1px solid #e8e8e6 !important; } body[data-style="bof"] .simple-header .configurator-title, body[data-style="bof"] .simple-header .header-title { color: #2a2a2a !important; } body[data-style="bof"] #control-tabs { border-radius: 30px !important; border: 1px solid #e8e8e6 !important; box-shadow: none !important; } body[data-style="bof"] .control-tab { font-weight: 500 !important; font-size: 0.82rem !important; border-radius: 30px !important; } body[data-style="bof"] .control-tab.active, body[data-style="bof"] .control-tab.run-tab.active { background: #d4614e !important; color: #ffffff !important; font-weight: 600 !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="bof"] .control-tab.active *, body[data-style="bof"] .control-tab.run-tab.active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="bof"] .control-tab:hover { color: #d4614e !important; } @media (max-width: 768px) { body[data-style="bof"] #control-tabs { border-radius: 0 !important; border: none !important; border-top: 1px solid #e8e8e6 !important; border-bottom: 1px solid #e8e8e6 !important; } body[data-style="bof"] .control-tab { border-radius: 0 !important; } body[data-style="bof"] .control-tab.active, body[data-style="bof"] .control-tab.run-tab.active { background: transparent !important; color: #d4614e !important; -webkit-text-fill-color: #d4614e !important; } body[data-style="bof"] .control-tab.active *, body[data-style="bof"] .control-tab.run-tab.active * { color: #d4614e !important; -webkit-text-fill-color: #d4614e !important; } body[data-style="bof"] .control-tab.active::after { background: #d4614e !important; } } body[data-style="bof"] #controls { background: #ffffff !important; border-left: 1px solid #e8e8e6 !important; } body[data-style="bof"] .control-label { font-weight: 600 !important; color: #2a2a2a !important; } body[data-style="bof"] .value-display { color: #d4614e !important; font-weight: 600 !important; } body[data-style="bof"] .thumbnail-button { border-radius: 8px !important; border-color: #e8e8e6 !important; } body[data-style="bof"] .thumbnail-button:hover { border-color: #d4614e !important; } body[data-style="bof"] .thumbnail-button.active { border-color: #d4614e !important; } body[data-style="bof"] .thumbnail-button.active .thumbnail-label { color: #2a2a2a !important; font-weight: 700 !important; } /* BOF — fullImageLarge brand-color overrides */ body[data-style="bof"] .thumbnail-button.fullImageLarge.active { border-color: #d4614e !important; box-shadow: 0 1px 4px rgba(212, 97, 78, 0.15) !important; } body[data-style="bof"] .thumbnail-button.fullImageLarge.active .thumbnail-label { color: #2a2a2a !important; } body[data-style="bof"] .child-tile { border-radius: 8px !important; border-color: #e8e8e6 !important; } body[data-style="bof"] .child-tile:hover { border-color: #d4614e !important; } body[data-style="bof"] .child-tile.active { border-color: #d4614e !important; } body[data-style="bof"] .child-tile.active .child-tile-label { color: #2a2a2a !important; font-weight: 700 !important; } body[data-style="bof"] .control-group-container { border-bottom-color: #e8e8e6 !important; } body[data-style="bof"] .control-wrapper { border-bottom-color: #e8e8e6 !important; } body[data-style="bof"] #viewer-container { background: #f7f7f5 !important; } body[data-style="bof"] #main-container { background: #f7f7f5 !important; } body[data-style="bof"] .section-tile.active { border-color: #d4614e !important; background: rgba(212, 97, 78, 0.08) !important; } body[data-style="bof"] .section-tile.active .section-tile-icon { background: #d4614e !important; } body[data-style="bof"] .checkboxStyle1 input[type="checkbox"]:checked { background-color: #d4614e !important; } body[data-style="bof"] #creator-logo .brand { color: #d4614e !important; } body[data-style="bof"] ::-webkit-scrollbar-thumb { background: #ccc !important; } body[data-style="bof"] ::-webkit-scrollbar-thumb:hover { background: #d4614e !important; } /* ========================================================================== WORKSTORIES — Dark premium workspace brand Brand: #0a0a0a (black), #e8e0d5 (warm beige accent), #f5f3ef (off-white) Fonts: DM Sans (body), DM Serif Display (headings), weights 300/400/500 Buttons: subtle (border-radius: 4px) Usage: &style=workstories ========================================================================== */ body[data-style="workstories"] { --accent-color: #0a0a0a; --md3-surface: #ffffff; --md3-surface-variant: #f5f3ef; --md3-outline: #888; --md3-outline-variant: #e8e0d5; --md3-on-surface: #0a0a0a; --md3-on-surface-variant: #3a3a3a; --md3-switch-track: #c8c8c8; --md3-switch-track-checked: #0a0a0a; --md3-switch-thumb-checked: #fff; --md3-switch-focus: rgba(10, 10, 10, 0.15); --md3-switch-ripple: rgba(10, 10, 10, 0.15); --md3-slider-track: #e8e0d5; --md3-slider-track-active: #0a0a0a; --md3-slider-thumb: #0a0a0a; --md3-slider-thumb-border: #0a0a0a; --md3-slider-focus: rgba(10, 10, 10, 0.12); --md3-slider-value-bg: #0a0a0a; --md3-slider-value-color: #fff; --md3-swatch-outline: #0a0a0a; --md3-swatch-selected-outline: #0a0a0a; --md3-swatch-unselected-outline: #e8e0d5; --md3-swatch-focus: rgba(10, 10, 10, 0.1); --md3-swatch-label: #3a3a3a; --md3-swatch-label-selected: #0a0a0a; --controls-bg: #ffffff; --controls-label: #0a0a0a; --border-colour: #e8e0d5; --highlight-blue: #0a0a0a; --header-bg: #0a0a0a; --header-text-colour: #ffffff; } body[data-style="workstories"] .simple-header { background-color: #0a0a0a !important; color: #ffffff !important; border-bottom-color: #1c1c1c !important; } body[data-style="workstories"] .simple-header .configurator-title, body[data-style="workstories"] .simple-header .header-title { color: #ffffff !important; font-family: 'DM Serif Display', serif !important; font-weight: 400 !important; } body[data-style="workstories"] #control-tabs { border-radius: 4px !important; border: 1px solid #e8e0d5 !important; box-shadow: none !important; } body[data-style="workstories"] .control-tab { font-family: 'DM Sans', sans-serif !important; font-weight: 400 !important; font-size: 0.8rem !important; letter-spacing: 0.02em !important; border-radius: 4px !important; } body[data-style="workstories"] .control-tab.active, body[data-style="workstories"] .control-tab.run-tab.active { background: #0a0a0a !important; color: #ffffff !important; font-weight: 500 !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="workstories"] .control-tab.active *, body[data-style="workstories"] .control-tab.run-tab.active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="workstories"] .control-tab:hover { color: #0a0a0a !important; } @media (max-width: 768px) { body[data-style="workstories"] #control-tabs { border-radius: 0 !important; border: none !important; border-top: 1px solid #e8e0d5 !important; border-bottom: 1px solid #e8e0d5 !important; } body[data-style="workstories"] .control-tab { border-radius: 0 !important; } body[data-style="workstories"] .control-tab.active, body[data-style="workstories"] .control-tab.run-tab.active { background: transparent !important; color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; } body[data-style="workstories"] .control-tab.active *, body[data-style="workstories"] .control-tab.run-tab.active * { color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; } body[data-style="workstories"] .control-tab.active::after { background: #0a0a0a !important; } } body[data-style="workstories"] #controls { background: #ffffff !important; border-left: 1px solid #e8e0d5 !important; } body[data-style="workstories"] .control-label { font-family: 'DM Sans', sans-serif !important; font-weight: 500 !important; color: #0a0a0a !important; } body[data-style="workstories"] .value-display { color: #0a0a0a !important; font-weight: 500 !important; font-family: 'DM Sans', sans-serif !important; } body[data-style="workstories"] .thumbnail-button { border-radius: 4px !important; border-color: #e8e0d5 !important; } body[data-style="workstories"] .thumbnail-button:hover { border-color: #888 !important; } body[data-style="workstories"] .thumbnail-button.active { border-color: #0a0a0a !important; } body[data-style="workstories"] .thumbnail-button.active .thumbnail-label { color: #0a0a0a !important; font-weight: 500 !important; } /* Workstories — fullImageLarge brand-color overrides */ body[data-style="workstories"] .thumbnail-button.fullImageLarge { border-radius: 4px !important; } body[data-style="workstories"] .thumbnail-button.fullImageLarge.active { border-color: #0a0a0a !important; } body[data-style="workstories"] .thumbnail-button.fullImageLarge.active .thumbnail-label { color: #0a0a0a !important; } body[data-style="workstories"] .thumbnail-label { font-family: 'DM Sans', sans-serif !important; color: #3a3a3a !important; } body[data-style="workstories"] .child-tile { border-radius: 4px !important; border-color: #e8e0d5 !important; } body[data-style="workstories"] .child-tile:hover { border-color: #888 !important; } body[data-style="workstories"] .child-tile.active { border-color: #0a0a0a !important; } body[data-style="workstories"] .child-tile-label { font-family: 'DM Sans', sans-serif !important; color: #3a3a3a !important; } body[data-style="workstories"] .child-tile.active .child-tile-label { color: #0a0a0a !important; font-weight: 500 !important; } body[data-style="workstories"] .control-group-container { border-bottom-color: #e8e0d5 !important; } body[data-style="workstories"] .control-wrapper { border-bottom-color: #e8e0d5 !important; } body[data-style="workstories"] #viewer-container { background: #f5f3ef !important; } body[data-style="workstories"] #main-container { background: #f5f3ef !important; } body[data-style="workstories"] #build-size-floating { border-color: #e8e0d5 !important; background: rgba(245, 243, 239, 0.95) !important; } body[data-style="workstories"] .section-tile.active { border-color: #0a0a0a !important; background: rgba(10, 10, 10, 0.05) !important; } body[data-style="workstories"] .section-tile.active .section-tile-icon { background: #0a0a0a !important; } body[data-style="workstories"] .checkboxStyle1 input[type="checkbox"]:checked { background-color: #0a0a0a !important; } body[data-style="workstories"] #creator-logo .brand { color: #0a0a0a !important; } body[data-style="workstories"] ::-webkit-scrollbar-thumb { background: #c8c8c8 !important; } body[data-style="workstories"] ::-webkit-scrollbar-thumb:hover { background: #0a0a0a !important; } /* ========================================================================== KI EUROPE — Contract furniture brand Brand: #085995 (blue), #21396d (dark blue), #ef3c34 (red accent) Fonts: Source Sans 3 (all), weights 300/400/500/600/700 Buttons: subtle (border-radius: 2px) Usage: &style=ki ========================================================================== */ body[data-style="ki"] { --accent-color: #085995; --md3-surface: #ffffff; --md3-surface-variant: #f9f9f8; --md3-outline: #888888; --md3-outline-variant: #e5e5e5; --md3-on-surface: #333333; --md3-on-surface-variant: #555555; --md3-switch-track: #e5e5e5; --md3-switch-track-checked: #085995; --md3-switch-thumb-checked: #fff; --md3-switch-focus: rgba(8, 89, 149, 0.15); --md3-switch-ripple: rgba(8, 89, 149, 0.15); --md3-slider-track: #e5e5e5; --md3-slider-track-active: #085995; --md3-slider-thumb: #085995; --md3-slider-thumb-border: #085995; --md3-slider-focus: rgba(8, 89, 149, 0.12); --md3-slider-value-bg: #085995; --md3-slider-value-color: #fff; --md3-swatch-outline: #333333; --md3-swatch-selected-outline: #085995; --md3-swatch-unselected-outline: #e5e5e5; --md3-swatch-focus: rgba(8, 89, 149, 0.1); --md3-swatch-label: #555555; --md3-swatch-label-selected: #333333; --controls-bg: #ffffff; --controls-label: #333333; --border-colour: #e5e5e5; --highlight-blue: #085995; --header-bg: #ffffff; --header-text-colour: #21396d; } /* -------------------------------------------------------------------------- KI — Header: white background, dark blue text -------------------------------------------------------------------------- */ body[data-style="ki"] .simple-header { background-color: #ffffff !important; color: #21396d !important; border-bottom: 1px solid #e5e5e5 !important; } body[data-style="ki"] .simple-header .configurator-title, body[data-style="ki"] .simple-header .header-title { font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important; color: #21396d !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- KI — Control Tabs: Source Sans 3, blue active state -------------------------------------------------------------------------- */ body[data-style="ki"] #control-tabs { border-radius: 2px !important; border: 1px solid #e5e5e5 !important; box-shadow: none !important; } body[data-style="ki"] .control-tab { font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important; font-weight: 500 !important; font-size: 0.8rem !important; border-radius: 2px !important; } body[data-style="ki"] .control-tab.active, body[data-style="ki"] .control-tab.run-tab.active { background: #085995 !important; color: #ffffff !important; font-weight: 600 !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="ki"] .control-tab.active *, body[data-style="ki"] .control-tab.run-tab.active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="ki"] .control-tab:hover { color: #085995 !important; } @media (max-width: 768px) { body[data-style="ki"] #control-tabs { border-radius: 0 !important; border: none !important; border-top: 1px solid #e5e5e5 !important; border-bottom: 1px solid #e5e5e5 !important; } body[data-style="ki"] .control-tab { border-radius: 0 !important; } body[data-style="ki"] .control-tab.active, body[data-style="ki"] .control-tab.run-tab.active { background: transparent !important; color: #085995 !important; -webkit-text-fill-color: #085995 !important; } body[data-style="ki"] .control-tab.active *, body[data-style="ki"] .control-tab.run-tab.active * { color: #085995 !important; -webkit-text-fill-color: #085995 !important; } body[data-style="ki"] .control-tab.active::after { background: #085995 !important; } } body[data-style="ki"] #control-tabs .control-tab.first-visible { border-top-left-radius: 2px !important; border-bottom-left-radius: 2px !important; } body[data-style="ki"] #control-tabs .control-tab.last-visible { border-top-right-radius: 2px !important; border-bottom-right-radius: 2px !important; } /* -------------------------------------------------------------------------- KI — Controls Panel -------------------------------------------------------------------------- */ body[data-style="ki"] #controls { background: #ffffff !important; border-left: 1px solid #e5e5e5 !important; } /* -------------------------------------------------------------------------- KI — Labels: Source Sans 3 -------------------------------------------------------------------------- */ body[data-style="ki"] .control-label { font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important; font-weight: 600 !important; color: #333333 !important; } body[data-style="ki"] .value-display { color: #085995 !important; font-weight: 600 !important; font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important; } /* -------------------------------------------------------------------------- KI — Thumbnail Buttons: subtle radius, blue active border -------------------------------------------------------------------------- */ body[data-style="ki"] .thumbnail-button { border-radius: 2px !important; border-color: #e5e5e5 !important; } body[data-style="ki"] .thumbnail-button:hover { border-color: #085995 !important; } body[data-style="ki"] .thumbnail-button.active { border-color: #085995 !important; } body[data-style="ki"] .thumbnail-button.active .thumbnail-label { color: #333333 !important; font-weight: 600 !important; } /* KI — fullImageLarge brand-color overrides */ body[data-style="ki"] .thumbnail-button.fullImageLarge { border-radius: 2px !important; } body[data-style="ki"] .thumbnail-button.fullImageLarge.active { border-color: #085995 !important; box-shadow: 0 1px 4px rgba(8, 89, 149, 0.15) !important; } body[data-style="ki"] .thumbnail-button.fullImageLarge.active .thumbnail-label { color: #333333 !important; } body[data-style="ki"] .thumbnail-label { font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important; color: #555555 !important; } /* -------------------------------------------------------------------------- KI — Child Tiles: subtle radius, blue active border -------------------------------------------------------------------------- */ body[data-style="ki"] .child-tile { border-radius: 2px !important; border-color: #e5e5e5 !important; } body[data-style="ki"] .child-tile:hover { border-color: #085995 !important; } body[data-style="ki"] .child-tile.active { border-color: #085995 !important; } body[data-style="ki"] .child-tile-label { font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important; color: #555555 !important; } body[data-style="ki"] .child-tile.active .child-tile-label { color: #333333 !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- KI — Control Groups -------------------------------------------------------------------------- */ body[data-style="ki"] .control-group-container { border-bottom-color: #e5e5e5 !important; } body[data-style="ki"] .control-wrapper { border-bottom-color: #e5e5e5 !important; } /* -------------------------------------------------------------------------- KI — Viewer Background: light warm grey -------------------------------------------------------------------------- */ body[data-style="ki"] #viewer-container { background: #f9f9f8 !important; } body[data-style="ki"] #main-container { background: #f9f9f8 !important; } /* -------------------------------------------------------------------------- KI — Build Size Badge -------------------------------------------------------------------------- */ body[data-style="ki"] #build-size-floating { border-color: #e5e5e5 !important; } /* -------------------------------------------------------------------------- KI — MOQ Warning: blue themed -------------------------------------------------------------------------- */ body[data-style="ki"] #moq-warning-floating { background: rgba(8, 89, 149, 0.06) !important; border-color: #085995 !important; color: #085995 !important; } body[data-style="ki"] #moq-warning-floating .moq-warning-text { color: #085995 !important; } /* -------------------------------------------------------------------------- KI — Section Tiles -------------------------------------------------------------------------- */ body[data-style="ki"] .section-tile.active { border-color: #085995 !important; background: rgba(8, 89, 149, 0.06) !important; } body[data-style="ki"] .section-tile.active .section-tile-icon { background: #085995 !important; } /* -------------------------------------------------------------------------- KI — Checkboxes -------------------------------------------------------------------------- */ body[data-style="ki"] .checkboxStyle1 input[type="checkbox"]:checked { background-color: #085995 !important; } /* -------------------------------------------------------------------------- KI — Creator Logo -------------------------------------------------------------------------- */ body[data-style="ki"] #creator-logo .brand { color: #085995 !important; } /* -------------------------------------------------------------------------- KI — Scrollbar -------------------------------------------------------------------------- */ body[data-style="ki"] ::-webkit-scrollbar-thumb { background: #ccc !important; } body[data-style="ki"] ::-webkit-scrollbar-thumb:hover { background: #085995 !important; } /* ========================================================================== DEMO1 — Horizon Interiors demo theme Based on Shelved layout/structure Brand: #1a1a2e (deep navy), #e94560 (coral-red accent), #f8f9fb (cloud) Fonts: Inter (headings & body), weights 300/400/500/600/700 Buttons: rounded (border-radius: 8px) Usage: &style=style1 ========================================================================== */ body[data-style="style1"] { /* Primary accent — Horizon coral-red */ --accent-color: #e94560; /* Scene background */ --scene-bg-top: #ffffff; --scene-bg-bottom: #ffffff; /* Surface tokens */ --md3-surface: #ffffff; --md3-surface-variant: #f8f9fb; --md3-outline: #b0b8c1; --md3-outline-variant: #e8ecf1; --md3-on-surface: #1a1a2e; --md3-on-surface-variant: #3a3a4e; /* Switch */ --md3-switch-track: #e8ecf1; --md3-switch-track-checked: #e94560; --md3-switch-thumb-checked: #fff; --md3-switch-focus: rgba(233, 69, 96, 0.15); --md3-switch-ripple: rgba(233, 69, 96, 0.15); /* Slider */ --md3-slider-track: #e8ecf1; --md3-slider-track-active: #e94560; --md3-slider-thumb: #e94560; --md3-slider-thumb-border: #e94560; --md3-slider-focus: rgba(233, 69, 96, 0.12); --md3-slider-value-bg: #e94560; --md3-slider-value-color: #fff; /* Swatch */ --md3-swatch-outline: #1a1a2e; --md3-swatch-selected-outline: #e94560; --md3-swatch-unselected-outline: #e8ecf1; --md3-swatch-focus: rgba(233, 69, 96, 0.1); --md3-swatch-label: #3a3a4e; --md3-swatch-label-selected: #1a1a2e; /* Base overrides */ --controls-bg: #ffffff; --controls-label: #1a1a2e; --border-colour: #e8ecf1; --highlight-blue: #e94560; --header-bg: #1a1a2e; --header-text-colour: #ffffff; } /* -------------------------------------------------------------------------- Demo1 — Header: deep navy background -------------------------------------------------------------------------- */ body[data-style="style1"] .simple-header { background-color: #1a1a2e !important; color: #ffffff !important; border-bottom-color: #1a1a2e !important; } body[data-style="style1"] .simple-header .configurator-title, body[data-style="style1"] .simple-header .header-title { color: #ffffff !important; } /* -------------------------------------------------------------------------- Demo1 — Control Tabs: Inter font, rounded, coral-red active state -------------------------------------------------------------------------- */ body[data-style="style1"] #control-tabs { border-radius: 8px !important; box-shadow: none !important; border: 1px solid #e8ecf1 !important; } body[data-style="style1"] .control-tab { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.3px !important; text-transform: none !important; font-size: 0.75rem !important; border-radius: 8px !important; } body[data-style="style1"] .control-tab.active, body[data-style="style1"] .control-tab.run-tab.active { background: #e94560 !important; color: #ffffff !important; font-weight: 600 !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="style1"] .control-tab.active *, body[data-style="style1"] .control-tab.run-tab.active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="style1"] .control-tab:hover { color: #e94560 !important; } @media (max-width: 768px) { body[data-style="style1"] #control-tabs { border-radius: 0 !important; border: none !important; border-top: 1px solid #e8ecf1 !important; border-bottom: 1px solid #e8ecf1 !important; } body[data-style="style1"] .control-tab { border-radius: 0 !important; } body[data-style="style1"] .control-tab.active, body[data-style="style1"] .control-tab.run-tab.active { background: transparent !important; color: #e94560 !important; -webkit-text-fill-color: #e94560 !important; } body[data-style="style1"] .control-tab.active *, body[data-style="style1"] .control-tab.run-tab.active * { color: #e94560 !important; -webkit-text-fill-color: #e94560 !important; } body[data-style="style1"] .control-tab.active::after { background: #e94560 !important; } } body[data-style="style1"] #control-tabs .control-tab.first-visible { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; } body[data-style="style1"] #control-tabs .control-tab.last-visible { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; } /* -------------------------------------------------------------------------- Demo1 — Controls Panel -------------------------------------------------------------------------- */ body[data-style="style1"] #controls { background: #f8f9fb !important; border-left-color: #e8ecf1 !important; margin: 0 !important; padding: 8px !important; border-radius: 0 !important; height: calc(100vh - var(--footer-height, 60px)) !important; } /* -------------------------------------------------------------------------- Demo1 — Labels: Inter font -------------------------------------------------------------------------- */ body[data-style="style1"] .control-label { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.2px !important; color: #3a3a4e !important; } body[data-style="style1"] .value-display { color: #e94560 !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- Demo1 — Thumbnail Buttons: rounded corners, coral-red active border -------------------------------------------------------------------------- */ body[data-style="style1"] .thumbnail-select { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body[data-style="style1"] .thumbnail-button { border-radius: 8px !important; border-color: #e8ecf1 !important; aspect-ratio: 1 / 1 !important; justify-content: center !important; padding: 8px !important; overflow: hidden !important; } body[data-style="style1"] .thumbnail-button:hover { border-color: #b0b8c1 !important; } body[data-style="style1"] .thumbnail-button.active { border-color: #e94560 !important; } body[data-style="style1"] .thumbnail-button.active .thumbnail-label { color: #1a1a2e !important; font-weight: 600 !important; } /* Demo1 — fullImageLarge brand-color overrides */ body[data-style="style1"] .thumbnail-button.fullImageLarge { background: #f0f2f5 !important; } body[data-style="style1"] .thumbnail-button.fullImageLarge:hover { background: #e8ecf1 !important; } body[data-style="style1"] .thumbnail-button.fullImageLarge.active { border-color: #e94560 !important; box-shadow: 0 1px 4px rgba(233, 69, 96, 0.15) !important; } body[data-style="style1"] .thumbnail-button.fullImageLarge.active .thumbnail-label { color: #1a1a2e !important; } body[data-style="style1"] .thumbnail-label { font-weight: 400 !important; color: #3a3a4e !important; } /* -------------------------------------------------------------------------- Demo1 — Child Tiles: rounded corners, coral-red active border -------------------------------------------------------------------------- */ body[data-style="style1"] .child-parts-title { font-size: 0.85rem !important; margin-bottom: 2px !important; } body[data-style="style1"] .child-group-title { font-size: 0.75rem !important; } body[data-style="style1"] .control-group-container { padding: 12px 12px 10px !important; border-bottom-color: #e8ecf1 !important; } body[data-style="style1"] .child-group-tiles { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; gap: 16px !important; } body[data-style="style1"] .child-tile { border: 1px solid transparent !important; border-radius: 8px !important; background: #f0f2f5 !important; padding: 4px 3px 3px !important; justify-content: center !important; overflow: hidden !important; box-shadow: none !important; } body[data-style="style1"] .child-tile:hover { background: #e8ecf1 !important; border-color: transparent !important; } body[data-style="style1"] .child-tile.active { background: #ffffff !important; border-color: #e94560 !important; box-shadow: 0 1px 4px rgba(233, 69, 96, 0.15) !important; } body[data-style="style1"] .child-tile-label { font-weight: 400 !important; color: #666 !important; font-size: 0.65rem !important; } body[data-style="style1"] .child-tile.active .child-tile-label { color: #1a1a2e !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- Demo1 — Control Groups -------------------------------------------------------------------------- */ body[data-style="style1"] .control-wrapper { border-bottom-color: #e8ecf1 !important; } /* -------------------------------------------------------------------------- Demo1 — Build Size Badge -------------------------------------------------------------------------- */ body[data-style="style1"] #build-size-floating { border-color: #e8ecf1 !important; } /* -------------------------------------------------------------------------- Demo1 — Viewer Background: light cloud -------------------------------------------------------------------------- */ body[data-style="style1"] #viewer-container { background: #f8f9fb !important; } body[data-style="style1"] #main-container { background: #f8f9fb !important; } /* -------------------------------------------------------------------------- Demo1 — Scrollbar -------------------------------------------------------------------------- */ body[data-style="style1"] ::-webkit-scrollbar-thumb { background: #b0b8c1 !important; } body[data-style="style1"] ::-webkit-scrollbar-thumb:hover { background: #e94560 !important; } /* -------------------------------------------------------------------------- Demo1 — Accent badges -------------------------------------------------------------------------- */ body[data-style="style1"] .dimension-badge, body[data-style="style1"] .info-badge { background: rgba(233, 69, 96, 0.1) !important; color: #1a1a2e !important; } /* -------------------------------------------------------------------------- Demo1 — Section Tiles -------------------------------------------------------------------------- */ body[data-style="style1"] .section-tile.active { border-color: #e94560 !important; background: rgba(233, 69, 96, 0.06) !important; } body[data-style="style1"] .section-tile.active .section-tile-icon { background: #e94560 !important; } /* -------------------------------------------------------------------------- Demo1 — Creator Logo -------------------------------------------------------------------------- */ body[data-style="style1"] #creator-logo .brand { color: #e94560 !important; } /* -------------------------------------------------------------------------- Demo1 — MOQ Warning: coral-red themed -------------------------------------------------------------------------- */ body[data-style="style1"] #moq-warning-floating { background: rgba(233, 69, 96, 0.06) !important; border-color: #e94560 !important; color: #e94560 !important; } body[data-style="style1"] #moq-warning-floating .moq-warning-text { color: #e94560 !important; } /* ========================================================================== KODXX — Kodxx portal brand theme Brand: #085995 (blue), #21396d (dark blue), #064578 (hover blue) Fonts: Source Sans 3 (headings), Inter (body), weights 300/400/600 Buttons: square (border-radius: 0) Usage: &style=kodxx ========================================================================== */ body[data-style="kodxx"] { /* Primary accent — Kodxx blue */ --accent-color: #085995; /* Scene background */ --scene-bg-top: #ffffff; --scene-bg-bottom: #ffffff; /* Surface tokens */ --md3-surface: #ffffff; --md3-surface-variant: #f4f6f8; --md3-outline: #ABABAB; --md3-outline-variant: #E0E0E0; --md3-on-surface: #0D0D0D; --md3-on-surface-variant: #2E2E2E; /* Switch */ --md3-switch-track: #E0E0E0; --md3-switch-track-checked: #085995; --md3-switch-thumb-checked: #fff; --md3-switch-focus: rgba(8, 89, 149, 0.15); --md3-switch-ripple: rgba(8, 89, 149, 0.15); /* Slider */ --md3-slider-track: #E0E0E0; --md3-slider-track-active: #085995; --md3-slider-thumb: #085995; --md3-slider-thumb-border: #085995; --md3-slider-focus: rgba(8, 89, 149, 0.12); --md3-slider-value-bg: #085995; --md3-slider-value-color: #fff; /* Swatch */ --md3-swatch-outline: #085995; --md3-swatch-selected-outline: #085995; --md3-swatch-unselected-outline: #E0E0E0; --md3-swatch-focus: rgba(8, 89, 149, 0.1); --md3-swatch-label: #2E2E2E; --md3-swatch-label-selected: #0D0D0D; /* Base overrides */ --controls-bg: #ffffff; --controls-label: #0D0D0D; --border-colour: #E0E0E0; --highlight-blue: #085995; --header-bg: #21396d; --header-text-colour: #ffffff; } /* -------------------------------------------------------------------------- Kodxx — Header: dark blue background -------------------------------------------------------------------------- */ body[data-style="kodxx"] .simple-header { background-color: #21396d !important; color: #ffffff !important; border-bottom-color: #21396d !important; } body[data-style="kodxx"] .simple-header .configurator-title, body[data-style="kodxx"] .simple-header .header-title { color: #ffffff !important; } /* -------------------------------------------------------------------------- Kodxx — Control Tabs: Source Sans 3, blue active state -------------------------------------------------------------------------- */ body[data-style="kodxx"] #control-tabs { border-radius: 0 !important; box-shadow: none !important; border: 1px solid #E0E0E0 !important; } body[data-style="kodxx"] .control-tab { font-family: 'Source Sans 3', 'Inter', sans-serif !important; font-weight: 400 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; font-size: 0.72rem !important; border-radius: 0 !important; } body[data-style="kodxx"] .control-tab.active, body[data-style="kodxx"] .control-tab.run-tab.active { background: #085995 !important; color: #ffffff !important; font-weight: 600 !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="kodxx"] .control-tab.active *, body[data-style="kodxx"] .control-tab.run-tab.active * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body[data-style="kodxx"] .control-tab:hover { color: #085995 !important; } @media (max-width: 768px) { body[data-style="kodxx"] #control-tabs { border-radius: 0 !important; border: none !important; border-top: 1px solid #E0E0E0 !important; border-bottom: 1px solid #E0E0E0 !important; } body[data-style="kodxx"] .control-tab { border-radius: 0 !important; } body[data-style="kodxx"] .control-tab.active, body[data-style="kodxx"] .control-tab.run-tab.active { background: transparent !important; color: #085995 !important; -webkit-text-fill-color: #085995 !important; } body[data-style="kodxx"] .control-tab.active *, body[data-style="kodxx"] .control-tab.run-tab.active * { color: #085995 !important; -webkit-text-fill-color: #085995 !important; } body[data-style="kodxx"] .control-tab.active::after { background: #085995 !important; } } body[data-style="kodxx"] #control-tabs .control-tab.first-visible { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } body[data-style="kodxx"] #control-tabs .control-tab.last-visible { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* -------------------------------------------------------------------------- Kodxx — Controls Panel -------------------------------------------------------------------------- */ body[data-style="kodxx"] #controls { background: #F5F5F5 !important; border-left-color: #E0E0E0 !important; margin: 0 !important; padding: 8px !important; border-radius: 0 !important; height: calc(100vh - var(--footer-height, 60px)) !important; } @media (max-width: 768px) { body[data-style="kodxx"] #controls { height: calc(50dvh - 44px) !important; padding: 0 !important; } } /* -------------------------------------------------------------------------- Kodxx — Labels: Source Sans 3 -------------------------------------------------------------------------- */ body[data-style="kodxx"] .control-label { font-family: 'Source Sans 3', 'Inter', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.3px !important; color: #2E2E2E !important; } body[data-style="kodxx"] .value-display { color: #085995 !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- Kodxx — Thumbnail Buttons: square corners, blue active border -------------------------------------------------------------------------- */ body[data-style="kodxx"] .thumbnail-select { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } body[data-style="kodxx"] .thumbnail-button { border-radius: 3px !important; border-color: #E0E0E0 !important; aspect-ratio: 1 / 1 !important; justify-content: center !important; padding: 8px !important; overflow: hidden !important; } /* Kodxx — fullImageLarge brand-color overrides */ body[data-style="kodxx"] .thumbnail-button.fullImageLarge { background: #f4f6f8 !important; border-radius: 6px !important; } body[data-style="kodxx"] .thumbnail-button.fullImageLarge:hover { background: #e8ecf0 !important; } body[data-style="kodxx"] .thumbnail-button.fullImageLarge.active { border-color: #21396d !important; box-shadow: 0 1px 4px rgba(8, 89, 149, 0.15) !important; } body[data-style="kodxx"] .thumbnail-button.fullImageLarge.active .thumbnail-label { color: #21396d !important; } body[data-style="kodxx"] .thumbnail-button:hover { border-color: #ABABAB !important; } body[data-style="kodxx"] .thumbnail-button.active { border-color: #085995 !important; } body[data-style="kodxx"] .thumbnail-button.active .thumbnail-label { color: #0D0D0D !important; font-weight: 600 !important; } body[data-style="kodxx"] .thumbnail-label { font-weight: 300 !important; color: #2E2E2E !important; } /* -------------------------------------------------------------------------- Kodxx — Child Tiles: blue active border -------------------------------------------------------------------------- */ body[data-style="kodxx"] .child-parts-title { font-size: 0.85rem !important; margin-bottom: 2px !important; } body[data-style="kodxx"] .child-group-title { font-size: 0.75rem !important; } body[data-style="kodxx"] .control-group-container { padding: 12px 12px 10px !important; border-bottom-color: #E0E0E0 !important; } body[data-style="kodxx"] .child-group-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 16px !important; } body[data-style="kodxx"] .child-tile { border: 2px solid transparent !important; border-radius: 12px !important; background: #f4f6f8 !important; padding: 4px 3px 3px !important; justify-content: center !important; overflow: hidden !important; box-shadow: none !important; } body[data-style="kodxx"] .child-tile:hover { background: #e8ecf0 !important; border-color: transparent !important; } body[data-style="kodxx"] .child-tile.active { background: #ffffff !important; border-color: #21396d !important; box-shadow: 0 1px 4px rgba(8, 89, 149, 0.15) !important; } body[data-style="kodxx"] .child-tile-label { font-weight: 400 !important; color: #666 !important; font-size: 0.65rem !important; } body[data-style="kodxx"] .child-tile.active .child-tile-label { color: #21396d !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- Kodxx — Control Groups -------------------------------------------------------------------------- */ body[data-style="kodxx"] .control-wrapper { border-bottom-color: #E0E0E0 !important; } /* -------------------------------------------------------------------------- Kodxx — Build Size Badge -------------------------------------------------------------------------- */ body[data-style="kodxx"] #build-size-floating { border-color: #E0E0E0 !important; } /* -------------------------------------------------------------------------- Kodxx — Viewer Background: light blue-grey -------------------------------------------------------------------------- */ body[data-style="kodxx"] #viewer-container { background: #f4f6f8 !important; } body[data-style="kodxx"] #main-container { background: #f4f6f8 !important; } /* -------------------------------------------------------------------------- Kodxx — Scrollbar -------------------------------------------------------------------------- */ body[data-style="kodxx"] ::-webkit-scrollbar-thumb { background: #ABABAB !important; } body[data-style="kodxx"] ::-webkit-scrollbar-thumb:hover { background: #085995 !important; } /* -------------------------------------------------------------------------- Kodxx — Badge accents: light blue -------------------------------------------------------------------------- */ body[data-style="kodxx"] .dimension-badge, body[data-style="kodxx"] .info-badge { background: rgba(8, 89, 149, 0.08) !important; color: #21396d !important; } /* -------------------------------------------------------------------------- Kodxx — Section Tiles -------------------------------------------------------------------------- */ body[data-style="kodxx"] .section-tile.active { border-color: #085995 !important; background: rgba(8, 89, 149, 0.08) !important; } body[data-style="kodxx"] .section-tile.active .section-tile-icon { background: #085995 !important; } /* -------------------------------------------------------------------------- Kodxx — Creator Logo -------------------------------------------------------------------------- */ body[data-style="kodxx"] #creator-logo .brand { color: #085995 !important; } /* -------------------------------------------------------------------------- Kodxx — MOQ Warning: blue themed -------------------------------------------------------------------------- */ body[data-style="kodxx"] #moq-warning-floating { background: rgba(8, 89, 149, 0.08) !important; border-color: #085995 !important; color: #085995 !important; } body[data-style="kodxx"] #moq-warning-floating .moq-warning-text { color: #085995 !important; } /* -------------------------------------------------------------------------- Kodxx — Spin Pills & Control Labels: blue active state -------------------------------------------------------------------------- */ body[data-style="kodxx"] .spin-pill.active { background: #085995 !important; border-color: #085995 !important; color: #ffffff !important; } body[data-style="kodxx"] .spin-pill:hover { border-color: #085995 !important; color: #085995 !important; } body[data-style="kodxx"] .spin-control-label { color: #085995 !important; } /* -------------------------------------------------------------------------- Kodxx — Checkboxes -------------------------------------------------------------------------- */ body[data-style="kodxx"] .checkboxStyle1 input[type="checkbox"]:checked { background-color: #085995 !important; } /* -------------------------------------------------------------------------- Kodxx — Custom Loader: pulsing logo + thin progress bar -------------------------------------------------------------------------- */ #loader.kodxx-loader { flex-direction: column !important; align-items: center !important; justify-content: center !important; background-color: #ffffff !important; font-family: Arial, sans-serif !important; } #loader.kodxx-loader .logo-container { margin-bottom: 10px; animation: kodxxPulseLogo 2s infinite ease-in-out; } #loader.kodxx-loader .logo-container img { width: 250px; height: auto; display: block; } #loader.kodxx-loader .progress-bar-container { width: 250px; } #loader.kodxx-loader .progress-bar { width: 100%; height: 4px; background-color: #f0f0f0; border-radius: 4px; overflow: hidden; margin-bottom: 12px; } #loader.kodxx-loader .progress-bar-fill { height: 100%; background-color: #085995; transition: width 0.3s ease; } #loader.kodxx-loader .loader-text { display: flex; justify-content: space-between; font-family: 'Source Sans 3', 'Inter', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #085995; } #loader.kodxx-loader .loader-text .loader-status { color: #085995 !important; -webkit-text-fill-color: #085995 !important; font-family: 'Source Sans 3', 'Inter', sans-serif !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } #loader.kodxx-loader .loader-text .loader-percentage { color: #085995 !important; -webkit-text-fill-color: #085995 !important; font-family: 'Source Sans 3', 'Inter', sans-serif !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; } @keyframes kodxxPulseLogo { 0% { opacity: 0.5; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } 100% { opacity: 0.5; transform: scale(0.97); } }