/* Otlio Dark Mode - activated via data-theme="dark" on */ /* ===================== CSS VARIABLES ===================== */ [data-theme="dark"] { --orange: #FF5A00; --blue: #2268FF; --text: #e8e8e8; --muted: #888; --white: #1a1a1a; --radius-lg: 22px; --shadow: 0 18px 40px rgba(0,0,0,0.4); --font: system-ui, -apple-system, "SF Pro Text", sans-serif; --bg: #0f0f0f; --paper: rgba(26,26,26,0.72); --paper2: rgba(26,26,26,0.92); --paper3: #242424; --ink: #e8e8e8; --ink2: #ccc; --sub: rgba(255,255,255,0.55); --line: rgba(255,255,255,0.10); --line2: rgba(255,255,255,0.06); --shadow-soft: 0 18px 60px rgba(0,0,0,0.4); --shadow-hair: 0 10px 25px rgba(0,0,0,0.35); } /* ===================== RESET / BODY ===================== */ [data-theme="dark"] body { background: #0f0f0f; color: #e8e8e8; } /* ===================== TOOLTIP ===================== */ [data-theme="dark"] #tooltip-portal { background: rgba(255, 255, 255, 0.88); color: #111; } /* ===================== NAV ===================== */ [data-theme="dark"] .nav.nav--solid { background: rgba(26, 26, 26, 0.95) !important; background-color: rgba(26, 26, 26, 0.95) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .nav.nav--solid .nav-logo-img { filter: brightness(0) invert(1) !important; } [data-theme="dark"] .nav.nav--solid .nav-burger { color: #e8e8e8 !important; } [data-theme="dark"] .nav.nav--solid .nav-sport-mobile { color: rgba(232, 232, 232, 0.78) !important; } [data-theme="dark"] .nav.nav--solid .nav-search-btn { color: #e8e8e8 !important; } /* NAV Premium */ [data-theme="dark"] .nav--premium { background: rgba(26, 26, 26, 0.70) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .nav--premium .nav-logo-img { filter: brightness(0) invert(1) !important; } [data-theme="dark"] .nav--premium .nav-sport-mobile { color: rgba(232, 232, 232, 0.78); } [data-theme="dark"] .nav--premium .nav-sport-mobile:hover { color: rgba(232, 232, 232, 1); } [data-theme="dark"] .nav--premium .nav-search-btn { color: #e8e8e8; } [data-theme="dark"] .nav--premium .nav-search-btn:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .nav--premium .nav-burger { color: #e8e8e8; } [data-theme="dark"] .nav--premium .nav-burger:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .nav--premium .nav-dept-emoji, [data-theme="dark"] .nav.nav--solid .nav-dept-emoji { filter: grayscale(1) brightness(10); } [data-theme="dark"] .nav--premium .nav-profile-btn { color: #e8e8e8; } [data-theme="dark"] .nav.nav--solid .nav-profile-btn { color: #e8e8e8; } [data-theme="dark"] .nav-profile-initial { background: #1a1a1a; color: #e8e8e8; } [data-theme="dark"] .nav--premium .nav-profile-initial, [data-theme="dark"] .nav.nav--solid .nav-profile-initial { background: #e8e8e8; color: #1a1a1a; } /* ===================== PRODUCT CARD (basic) ===================== */ [data-theme="dark"] .product-card { background: #1a1a1a; box-shadow: 0 18px 40px rgba(0,0,0,0.4); } [data-theme="dark"] .product-card:hover { box-shadow: 0 24px 50px rgba(0,0,0,0.5); } [data-theme="dark"] .card-img { background-color: #242424; } [data-theme="dark"] .card-body h4 { color: #e8e8e8; } [data-theme="dark"] .shop-count { background: rgba(255,255,255,0.06); color: #888; } /* ===================== WIZARD ===================== */ [data-theme="dark"] .wizard-backdrop { background: rgba(0,0,0,0.65); } [data-theme="dark"] .wizard-card { background: rgba(26, 26, 26, 0.92); box-shadow: 0 26px 70px rgba(0,0,0,0.5); } [data-theme="dark"] .wizard-progress { background: rgba(255,255,255,0.08); } [data-theme="dark"] .wizard-close { background: rgba(255,255,255,0.08); color: #e8e8e8; } [data-theme="dark"] .wizard-title { color: #e8e8e8; } [data-theme="dark"] .wizard-subtitle { color: rgba(255,255,255,0.55); } [data-theme="dark"] .wizard-option { border: 1px solid rgba(255,255,255,0.10); background: #1a1a1a; color: #e8e8e8; } [data-theme="dark"] .wizard-option:hover { border-color: rgba(34,104,255,0.35); box-shadow: 0 14px 30px rgba(0,0,0,0.4); } [data-theme="dark"] .wizard-btn.ghost { background: rgba(255,255,255,0.08); color: #e8e8e8; } [data-theme="dark"] .wizard-summary { color: #e8e8e8; } [data-theme="dark"] .wizard-spinner { border: 4px solid rgba(255,255,255,0.12); border-top-color: rgba(34,104,255,0.95); } [data-theme="dark"] .wizard-loading-title { color: #e8e8e8; } [data-theme="dark"] .wizard-loading-sub { color: rgba(255,255,255,0.55); } /* ===================== GLOBAL LOADER ===================== */ [data-theme="dark"] .global-loader { background: radial-gradient(1100px 600px at 20% 0%, rgba(34,104,255,0.08), transparent 60%), radial-gradient(900px 540px at 100% 15%, rgba(255,90,0,0.08), transparent 55%), #0f0f0f; } /* ===================== SHOP PAGE PREMIUM ===================== */ [data-theme="dark"] .shop-page--premium { background: radial-gradient(1100px 600px at 20% 0%, rgba(34,104,255,0.06), transparent 60%), radial-gradient(900px 540px at 100% 15%, rgba(255,90,0,0.06), transparent 55%), #0f0f0f; color: #e8e8e8; } [data-theme="dark"] .shop-page-title { color: rgba(232, 232, 232, 0.92); } [data-theme="dark"] .shop-page-sub { color: rgba(232, 232, 232, 0.55); } /* ===================== FILTERS PREMIUM ===================== */ [data-theme="dark"] .filters-premium { border: 1px solid rgba(255,255,255,0.10); background: rgba(26, 26, 26, 0.92); box-shadow: 0 26px 70px rgba(0,0,0,0.5); } [data-theme="dark"] .filters-premium-head { border-bottom: 1px solid rgba(255,255,255,0.06); } [data-theme="dark"] .filters-premium-title { color: rgba(232, 232, 232, 0.72); } [data-theme="dark"] .filters-premium-label { color: rgba(232, 232, 232, 0.72); } [data-theme="dark"] .filters-close-btn { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.08); color: #e8e8e8; } [data-theme="dark"] .btn-quiet { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.08); color: #e8e8e8; } [data-theme="dark"] .btn-quiet:hover { background: rgba(255,255,255,0.14); } [data-theme="dark"] .filters-premium-block { border-bottom: 1px solid rgba(255,255,255,0.06); } [data-theme="dark"] .chk-premium { color: rgba(232, 232, 232, 0.74); } [data-theme="dark"] .filters-bottom-actions { border-top: 1px solid rgba(255,255,255,0.10); background: rgba(26, 26, 26, 0.92); } [data-theme="dark"] .filters-bottom-btn--cancel { background: #242424; color: #e8e8e8; } [data-theme="dark"] .filters-bottom-btn--cancel:hover { background: #333; } [data-theme="dark"] .filters-bottom-btn--apply { background: #e8e8e8; color: #1a1a1a; } [data-theme="dark"] .filters-bottom-btn--apply:hover { background: #ccc; } /* Filters backdrop */ [data-theme="dark"] body.filters-open::before { background: rgba(0,0,0,0.65); } /* Price inputs */ [data-theme="dark"] .price-row-premium input { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: #e8e8e8; } [data-theme="dark"] .price-meta { color: rgba(232, 232, 232, 0.72); } [data-theme="dark"] .price-hint { color: rgba(232, 232, 232, 0.58); } /* Range track */ [data-theme="dark"] .range-wrap input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.10); } [data-theme="dark"] .range-wrap input[type="range"]::-moz-range-track { background: rgba(255,255,255,0.10); } /* Scrollbar in filters */ [data-theme="dark"] .filters-premium::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); } [data-theme="dark"] .filters-premium::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); } /* Accordion blocks */ [data-theme="dark"] .filters-acc-block { border-bottom: 1px solid rgba(255,255,255,0.06); } [data-theme="dark"] .filters-acc-head { color: rgba(232, 232, 232, 0.72); } /* Category tree */ [data-theme="dark"] .cat-tree-group { border-bottom: 1px solid rgba(255,255,255,0.06); } [data-theme="dark"] .cat-tree-head-check, [data-theme="dark"] .cat-tree-head--check { color: rgba(232, 232, 232, 0.72); } [data-theme="dark"] .cat-tree-head-check:hover, [data-theme="dark"] .cat-tree-head--check:hover { color: #e8e8e8; } [data-theme="dark"] .cat-tree-group.is-active .cat-tree-head-check, [data-theme="dark"] .cat-tree-group.is-active .cat-tree-head--check { color: #e8e8e8; } [data-theme="dark"] .cat-tree-head-check input, [data-theme="dark"] .cat-tree-head--check input { accent-color: #e8e8e8; } [data-theme="dark"] .cat-tree-toggle:hover { background: rgba(255,255,255,0.06); } [data-theme="dark"] .cat-tree-sub-label { color: rgba(232, 232, 232, 0.55); } [data-theme="dark"] .cat-tree-sub-label:hover { color: rgba(232, 232, 232, 0.85); } [data-theme="dark"] .cat-tree-sub-label input { accent-color: #e8e8e8; } /* Search input in filter */ [data-theme="dark"] .search-premium input { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: #e8e8e8; } /* Sort in filter */ [data-theme="dark"] .sort-premium { color: rgba(232, 232, 232, 0.70); } [data-theme="dark"] .sort-premium select { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: #e8e8e8; } /* Select premium */ [data-theme="dark"] .select-premium span { color: rgba(232, 232, 232, 0.58); } [data-theme="dark"] .select-premium select { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06); color: #e8e8e8; } [data-theme="dark"] .tiny-hint { color: rgba(232, 232, 232, 0.52); } /* ===================== PILL BUTTONS ===================== */ [data-theme="dark"] .pill { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); color: rgba(232, 232, 232, 0.68); } [data-theme="dark"] .pillbtn { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06) !important; color: rgba(232, 232, 232, 0.76); } [data-theme="dark"] .pillbtn:hover { background: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .pillbtn.is-active { border-color: rgba(255,255,255,0.18) !important; background: rgba(255,255,255,0.10) !important; color: #e8e8e8 !important; } /* ===================== PRODUCT CARD (PREMIUM) ===================== */ [data-theme="dark"] .pcard-premium { border: 1px solid rgba(255,255,255,0.10); background: rgba(26, 26, 26, 0.82); box-shadow: 0 1px 0 rgba(0,0,0,0.3); } [data-theme="dark"] .pcard-premium:hover { border-color: rgba(255,255,255,0.14); box-shadow: 0 18px 60px rgba(0,0,0,0.4); } [data-theme="dark"] .pcard-media { background-color: #1f1f1f; } [data-theme="dark"] .pcard-kicker { color: rgba(232, 232, 232, 0.58); } [data-theme="dark"] .pcard-title { color: #e8e8e8; } [data-theme="dark"] .pcard-meta { color: rgba(232, 232, 232, 0.55); } [data-theme="dark"] .pcard-price { color: #e8e8e8; } /* Sizes row */ [data-theme="dark"] .pcard-sizes-row { border-top: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .pcard-sizes { color: rgba(232, 232, 232, 0.55); } [data-theme="dark"] .pcard-premium:hover .pcard-sizes { color: rgba(232, 232, 232, 0.75); } [data-theme="dark"] .pcard-size-pill { color: rgba(232, 232, 232, 0.6); background: rgba(255, 255, 255, 0.06); } /* Heart button on card */ [data-theme="dark"] .pcard-heart-btn { background: rgba(0, 0, 0, 0.6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .pcard-heart-btn:hover { background: rgba(0, 0, 0, 0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .pcard-heart-btn svg { stroke: #aaa; } /* Outfit button on card */ [data-theme="dark"] .pcard-outfit-btn { background: rgba(0, 0, 0, 0.6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .pcard-outfit-btn:hover { background: rgba(0, 0, 0, 0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .pcard-outfit-btn svg { stroke: #aaa; } /* ===================== BTN SOLID ===================== */ [data-theme="dark"] .btn-solid { background: linear-gradient(135deg, rgba(232,232,232,1), rgba(232,232,232,0.86)); color: #1a1a1a; box-shadow: 0 18px 40px rgba(0,0,0,0.3); } /* ===================== COMPARISON PAGE ===================== */ [data-theme="dark"] .cmp-page { background: #0f0f0f; color: #e8e8e8; } [data-theme="dark"] .cmp-page > .footer, [data-theme="dark"] .cmp-page > .footer--premium { background: #0f0f0f; } [data-theme="dark"] .cmp-back { color: rgba(232, 232, 232, 0.70); } [data-theme="dark"] .cmp-back:hover { color: #e8e8e8; } /* AI Decision card */ [data-theme="dark"] .cmp-decision--top { border: 1px solid rgba(255,255,255,0.10); background: linear-gradient( 135deg, rgba(34,104,255,0.08), rgba(255,90,0,0.06), rgba(26,26,26,0.80) ); box-shadow: 0 10px 25px rgba(0,0,0,0.35); } [data-theme="dark"] .cmp-ai-title { color: rgba(232, 232, 232, 0.70); } [data-theme="dark"] .cmp-decision-badge { border: 1px solid rgba(255,255,255,0.10); background: rgba(26, 26, 26, 0.86); color: rgba(232, 232, 232, 0.86); } [data-theme="dark"] .cmp-decision-text { color: rgba(232, 232, 232, 0.92); } [data-theme="dark"] .cmp-decision-sub { color: rgba(232, 232, 232, 0.55); } /* Product card */ [data-theme="dark"] .cmp-product { border: 1px solid rgba(255,255,255,0.10); background: rgba(26, 26, 26, 0.82); box-shadow: 0 10px 25px rgba(0,0,0,0.35); } [data-theme="dark"] .cmp-product-media { background-color: #1a1a1a; } [data-theme="dark"] .cmp-brand { color: rgba(232, 232, 232, 0.58); } [data-theme="dark"] .cmp-title { color: #e8e8e8; } /* CTA row */ [data-theme="dark"] .cmp-cta-row--sticky { border: 1px solid rgba(255,255,255,0.08); background: rgba(26, 26, 26, 0.92); } /* Heart button */ [data-theme="dark"] .cmp-heart-btn { border: 1px solid rgba(255, 255, 255, 0.12); background: #1a1a1a; } [data-theme="dark"] .cmp-heart-btn:hover { border-color: rgba(255, 255, 255, 0.2); background: #242424; } [data-theme="dark"] .cmp-heart-btn svg { stroke: #aaa; } [data-theme="dark"] .cmp-heart-btn.is-liked { background: #3a1515; border-color: #e53935; } [data-theme="dark"] .cmp-heart-btn.is-liked:hover { background: #4a1a1a; } /* Outfit button */ [data-theme="dark"] .cmp-outfit-btn { border: 1px solid rgba(255, 255, 255, 0.12); background: #1a1a1a; } [data-theme="dark"] .cmp-outfit-btn:hover { border-color: rgba(255, 255, 255, 0.2); background: #242424; } [data-theme="dark"] .cmp-outfit-btn svg { stroke: #aaa; } [data-theme="dark"] .cmp-outfit-btn.in-outfit { background: #153015; border-color: #4CAF50; } [data-theme="dark"] .cmp-outfit-btn.in-outfit:hover { background: #1a3a1a; } /* Right cards */ [data-theme="dark"] .cmp-card { border: 1px solid rgba(255,255,255,0.10); background: rgba(26, 26, 26, 0.74); box-shadow: 0 10px 25px rgba(0,0,0,0.35); } [data-theme="dark"] .cmp-card-head { border-bottom: 1px solid rgba(255,255,255,0.06); } [data-theme="dark"] .cmp-card-title { color: #e8e8e8; } [data-theme="dark"] .cmp-card-sub { color: rgba(232, 232, 232, 0.55); } /* Offers */ [data-theme="dark"] .cmp-offer { border: 1px solid rgba(255,255,255,0.06); background: rgba(26, 26, 26, 0.80); } [data-theme="dark"] .cmp-offer-shop { color: rgba(232, 232, 232, 0.88); } [data-theme="dark"] .cmp-offer-meta { color: rgba(232, 232, 232, 0.55); } [data-theme="dark"] .cmp-offer-price { color: #e8e8e8; } [data-theme="dark"] .cmp-offer-btn { background: rgba(232, 232, 232, 0.92); color: #1a1a1a; } /* Chart */ [data-theme="dark"] .cmp-chart-wrap { border: 1px solid rgba(255,255,255,0.06); background: rgba(26, 26, 26, 0.82); } [data-theme="dark"] .cmp-chart-tip { border: 1px solid rgba(255,255,255,0.10); background: rgba(26, 26, 26, 0.92); box-shadow: 0 16px 30px rgba(0,0,0,0.4); color: rgba(232, 232, 232, 0.86); } /* Delivery info */ [data-theme="dark"] .cmp-offer-delivery { color: rgba(232, 232, 232, 0.5); } /* Dev panel */ [data-theme="dark"] .cmp-dev-panel { border: 2px dashed #ef4444; background: #2a1515; color: #e8e8e8; } [data-theme="dark"] .cmp-dev-row select { border: 1px solid #333; background: #1a1a1a; color: #e8e8e8; } /* Gallery thumbnails */ [data-theme="dark"] .cmp-gallery-thumb { border: 2px solid transparent; } [data-theme="dark"] .cmp-gallery-thumb--active { border-color: #e8e8e8; } /* ===================== ABOUT SECTION ===================== */ [data-theme="dark"] .about-section { background: radial-gradient(900px 540px at 18% 20%, rgba(34,104,255,0.06), transparent 60%), radial-gradient(900px 540px at 100% 15%, rgba(255,90,0,0.06), transparent 55%), #0f0f0f; } [data-theme="dark"] .about-image-link { border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 18px 60px rgba(0,0,0,0.4); } [data-theme="dark"] .about-card { border: 1px solid rgba(255,255,255,0.10); background: rgba(26, 26, 26, 0.86); box-shadow: 0 10px 25px rgba(0,0,0,0.35); } [data-theme="dark"] .about-kicker { color: rgba(232, 232, 232, 0.60); } [data-theme="dark"] .about-title { color: rgba(232, 232, 232, 0.92); } [data-theme="dark"] .about-text { color: rgba(232, 232, 232, 0.70); } [data-theme="dark"] .about-note { color: rgba(232, 232, 232, 0.62); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } /* ===================== FOOTER ===================== */ [data-theme="dark"] .footer { color: #888; } [data-theme="dark"] .footer .footer-links a:hover { background: rgba(255,255,255,0.06); } [data-theme="dark"] .footer--premium { border-top: 1px solid rgba(255,255,255,0.06); color: rgba(232, 232, 232, 0.55); } [data-theme="dark"] body.shop-page--premium .footer--premium { border-top: 1px solid rgba(255,255,255,0.08) !important; } /* ===================== DRAWER ===================== */ [data-theme="dark"] .drawer-overlay { background: rgba(0,0,0,0.65); } [data-theme="dark"] .drawer { background: #1a1a1a; box-shadow: 0 18px 50px rgba(0,0,0,0.5); } [data-theme="dark"] .drawer .drawer-head { border-bottom: 1px solid rgba(255,255,255,0.08); } [data-theme="dark"] .drawer-title { color: #e8e8e8; } [data-theme="dark"] .drawer-close { background: rgba(255,255,255,0.06); color: #e8e8e8; } [data-theme="dark"] .drawer-user-greeting { color: #e8e8e8; } [data-theme="dark"] .drawer-user-greeting:hover { background: rgba(255,255,255,0.04); } [data-theme="dark"] .drawer-user-section { border-bottom: 1px solid rgba(255,255,255,0.08); } [data-theme="dark"] .drawer-user-login { color: #e8e8e8; background: rgba(255,255,255,0.03); } [data-theme="dark"] .drawer-user-feed { color: #aaa; background: rgba(255,255,255,0.03); } [data-theme="dark"] .drawer-user-feed:hover { background: rgba(255,255,255,0.06); color: #e8e8e8; } [data-theme="dark"] .drawer-links a { color: #e8e8e8; background: rgba(255,255,255,0.03); } [data-theme="dark"] .drawer-footer { border-top: 1px solid rgba(255,255,255,0.08); } [data-theme="dark"] .drawer-settings { color: #999; background: rgba(255,255,255,0.03); } [data-theme="dark"] .drawer-settings:hover { background: rgba(255,255,255,0.06); color: #e8e8e8; } /* ===================== CHANGE FILTERS BUTTON ===================== */ [data-theme="dark"] .change-filters-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #e8e8e8; } [data-theme="dark"] .change-filters-btn:hover { background: rgba(255,255,255,0.10); box-shadow: 0 8px 16px rgba(0,0,0,0.3); } /* ===================== GCBAR (Gender + Category Bar) ===================== */ [data-theme="dark"] .gcbar-left { border: 1px solid rgba(255,255,255,0.12); background: #1a1a1a; } [data-theme="dark"] .gcbar-gbtn { background: #1a1a1a; color: #e8e8e8; } [data-theme="dark"] .gcbar-gbtn + .gcbar-gbtn { border-top: 1px solid rgba(255,255,255,0.12); } [data-theme="dark"] .gcbar-gbtn.is-active { background: #e8e8e8; color: #1a1a1a; } /* Department toggle */ [data-theme="dark"] .gcbar-department { border: 1px solid rgba(255,255,255,0.12); background: #1a1a1a; } [data-theme="dark"] .gcbar-dbtn { background: #1a1a1a; color: #e8e8e8; } [data-theme="dark"] .gcbar-dbtn + .gcbar-dbtn { border-left: 1px solid rgba(255,255,255,0.12); } [data-theme="dark"] .gcbar-dbtn:hover { background: #242424; color: #e8e8e8; } [data-theme="dark"] .gcbar-dbtn.is-active { background: #e8e8e8; color: #1a1a1a; } [data-theme="dark"] .gcbar-dbtn.is-active:hover { background: #e8e8e8; color: #1a1a1a; } /* Text-only category pills */ [data-theme="dark"] .gcat.gcat--text { background: #242424; } [data-theme="dark"] .gcat.gcat--text .gcat-label { color: #e8e8e8; } [data-theme="dark"] .gcat.gcat--text.is-active { background: #e8e8e8; border-color: #e8e8e8; } [data-theme="dark"] .gcat.gcat--text.is-active .gcat-label { color: #1a1a1a; } /* Active category image border */ [data-theme="dark"] .gcat.is-active::before { border: 4px solid #e8e8e8; } /* Sort label */ [data-theme="dark"] .gcbar-sort-label { color: #e8e8e8; } /* SHOP watermark */ [data-theme="dark"] .gcbar-shop-vert > span { color: rgba(200, 200, 200, 0.1); } [data-theme="dark"] .gcbar-department-label > span { color: rgba(200, 200, 200, 0.15); } /* ===================== GCBAR CHAT ===================== */ [data-theme="dark"] .gcbar-chatbox { border: 1px solid rgba(255,255,255,0.15); background: rgba(26, 26, 26, 0.92); } [data-theme="dark"] .gcbar-chat-input { color: #e8e8e8; } [data-theme="dark"] .gcbar-chat-input::placeholder { color: rgba(232, 232, 232, 0.42); } [data-theme="dark"] .gcbar-chat-title { color: rgba(232, 232, 232, 0.62); } [data-theme="dark"] .gcbar-chat-send { border: 1px solid rgba(255,255,255,0.15); } /* ===================== SHOP CONTROLS ROW ===================== */ [data-theme="dark"] .shop-department-buttons { border: 1px solid rgba(255, 255, 255, 0.15); } [data-theme="dark"] .shop-dept-btn { background: #1a1a1a; color: #e8e8e8; } [data-theme="dark"] .shop-dept-btn + .shop-dept-btn { border-left: 1px solid rgba(255, 255, 255, 0.15); } [data-theme="dark"] .shop-dept-btn:hover { background: #242424; color: #e8e8e8; } [data-theme="dark"] .shop-dept-btn.is-active { background: #e8e8e8; color: #1a1a1a; } [data-theme="dark"] .shop-dept-btn.is-active:hover { background: #e8e8e8; color: #1a1a1a; } [data-theme="dark"] .shop-filter-btn { border: 1px solid rgba(255, 255, 255, 0.15); background: #1a1a1a; color: #e8e8e8; } [data-theme="dark"] .shop-filter-btn:hover { background: #242424; border-color: rgba(255, 255, 255, 0.25); } [data-theme="dark"] .shop-filter-btn:active { background: #333; } /* Sort select in controls row */ [data-theme="dark"] .shop-controls-row .gcbar-sort select, [data-theme="dark"] .shop-controls-row #gcbarSortSelect { border: 1px solid rgba(255, 255, 255, 0.15) !important; background: #1a1a1a !important; color: #e8e8e8; } [data-theme="dark"] #gcbarSortSelect { color: rgba(232, 232, 232, 0.88); } /* ===================== FILTER FAB ===================== */ [data-theme="dark"] body.shop-page--premium .filter-fab, [data-theme="dark"] body.shop-page--premium .listing-premium .filter-fab { background: #1a1a1a !important; background-color: #1a1a1a !important; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.4) !important; color: #e8e8e8 !important; } [data-theme="dark"] body.shop-page--premium .filter-fab *, [data-theme="dark"] body.shop-page--premium .listing-premium .filter-fab * { color: #e8e8e8 !important; } [data-theme="dark"] body.shop-page--premium .filter-fab .fab-divider { background: rgba(255,255,255,0.25) !important; } [data-theme="dark"] .filter-fab-btn:hover { background: rgba(255,255,255,0.06); } [data-theme="dark"] .fab-label { color: #e8e8e8; } /* Filter FAB divider */ [data-theme="dark"] .filter-fab-divider { background: rgba(255,255,255,0.25); } /* ===================== FLOATING BUTTONS ===================== */ [data-theme="dark"] .scroll-top-desktop { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .scroll-top-desktop:hover { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); } [data-theme="dark"] .scroll-top-desktop:active { background: rgba(255, 255, 255, 0.28); } [data-theme="dark"] .filter-float-desktop { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .filter-float-desktop:hover { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); } [data-theme="dark"] .filter-float-desktop:active { background: rgba(255, 255, 255, 0.28); } [data-theme="dark"] .sort-float-desktop { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.6); } [data-theme="dark"] .sort-float-desktop:hover { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); } [data-theme="dark"] .sort-float-desktop:active { background: rgba(255, 255, 255, 0.28); } /* Mobile floating buttons */ [data-theme="dark"] .scroll-top-mobile, [data-theme="dark"] .filter-float-mobile { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); } [data-theme="dark"] .scroll-top-mobile:active, [data-theme="dark"] .filter-float-mobile:active { background: rgba(255, 255, 255, 0.25); } [data-theme="dark"] .sort-float-mobile { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.55); } [data-theme="dark"] .sort-float-mobile:active { background: rgba(255, 255, 255, 0.25); } /* ===================== HERO PARTNERS ===================== */ [data-theme="dark"] .hero-partners { background: rgba(26, 26, 26, 0.85); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .hero-partners-label { color: rgba(232, 232, 232, 0.5); } [data-theme="dark"] .hero-partner-logo { filter: brightness(0) invert(1) opacity(0.7); } [data-theme="dark"] .hero-partner-link:hover .hero-partner-logo { filter: brightness(0) invert(1) opacity(0.9); } /* ===================== FILTERED PRODUCTS SECTION ===================== */ [data-theme="dark"] .filter-results-header h2 { color: #e8e8e8; } [data-theme="dark"] .shop-header h3 { color: #e8e8e8; } [data-theme="dark"] .shop-header p { color: #888; } /* ===================== STYLES/INSPIRATION PAGE ===================== */ [data-theme="dark"] .styles-page { background: #0f0f0f; } [data-theme="dark"] .styles-hero { background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%); border-bottom: 1px solid rgba(255,255,255,0.10); } [data-theme="dark"] .styles-hero h1 { color: #e8e8e8; } [data-theme="dark"] .styles-hero p { color: rgba(232, 232, 232, 0.55); } [data-theme="dark"] .styles-gender-selector .pillbtn { border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.06) !important; color: rgba(232, 232, 232, 0.76); } [data-theme="dark"] .styles-gender-selector .pillbtn:hover { background: rgba(255,255,255,0.10) !important; } [data-theme="dark"] .styles-gender-selector .pillbtn.is-active { border-color: rgba(34,104,255,0.55) !important; box-shadow: 0 0 0 6px rgba(34,104,255,0.10) !important; color: #e8e8e8; background: #1a1a1a !important; } [data-theme="dark"] .styles-outfit-card { border: 1px solid rgba(255,255,255,0.10); background: rgba(26, 26, 26, 0.92); box-shadow: 0 1px 0 rgba(0,0,0,0.3); } [data-theme="dark"] .styles-outfit-card:hover { border-color: rgba(255,255,255,0.14); box-shadow: 0 18px 60px rgba(0,0,0,0.4); } [data-theme="dark"] .styles-outfit-card-image { background-color: #1f1f1f; } [data-theme="dark"] .styles-outfit-card-title { color: #e8e8e8; } [data-theme="dark"] .styles-outfit-card-subtitle { color: rgba(232, 232, 232, 0.58); } [data-theme="dark"] .styles-outfit-card-price { color: #e8e8e8; } [data-theme="dark"] .styles-outfit-card-price span { color: rgba(232, 232, 232, 0.52); } [data-theme="dark"] .styles-outfit-thumb { border: 1px solid rgba(255,255,255,0.10); } [data-theme="dark"] .styles-outfit-thumb:hover { border-color: rgba(255,255,255,0.22); } [data-theme="dark"] .styles-like-btn { border: 1px solid rgba(255, 255, 255, 0.1); background: #1a1a1a; color: #999; } [data-theme="dark"] .styles-like-btn:hover { border-color: rgba(255, 255, 255, 0.2); color: #1877f2; } [data-theme="dark"] .styles-like-btn.is-liked { background: #1a2a4a; border-color: #1877f2; color: #4a9eff; } [data-theme="dark"] .styles-save-btn { background: linear-gradient(135deg, rgba(232,232,232,1), rgba(232,232,232,0.86)); color: #1a1a1a; } /* Empty state */ [data-theme="dark"] .styles-empty-icon { background: rgba(255,255,255,0.04); } [data-theme="dark"] .styles-empty-icon svg { stroke: rgba(232, 232, 232, 0.32); } [data-theme="dark"] .styles-empty h3 { color: #e8e8e8; } [data-theme="dark"] .styles-empty p { color: rgba(232, 232, 232, 0.58); } /* ===================== LEGAL / IMPRESSUM / DATENSCHUTZ PAGES ===================== */ [data-theme="dark"] .legal-page, [data-theme="dark"] .impressum-page, [data-theme="dark"] .datenschutz-page { background: #0f0f0f; color: #e8e8e8; } /* ===================== HERO CHAT ===================== */ [data-theme="dark"] .hero-chat-box { background: rgba(26, 26, 26, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06); } [data-theme="dark"] .hero-chat-box:focus-within { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06); } [data-theme="dark"] .hero-chat-input { color: #e8e8e8; } [data-theme="dark"] .hero-chat-input::placeholder { color: rgba(255, 255, 255, 0.4); } [data-theme="dark"] .hero-chat-actions { border-top: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .hero-chat-hint { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.5); } [data-theme="dark"] .hero-chat-hint:hover { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.7); } [data-theme="dark"] .hero-chat-send { background: #e8e8e8; color: #1a1a1a; } [data-theme="dark"] .hero-chat-send:hover { background: #ccc; } [data-theme="dark"] .hero-chat-send:disabled { background: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .hero-chat-response { background: rgba(255, 255, 255, 0.03); border-top: 1px solid rgba(255, 255, 255, 0.06); color: #ccc; } [data-theme="dark"] .hero-chat-suggestion { background: rgba(26, 26, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.65); } [data-theme="dark"] .hero-chat-suggestion:hover { background: rgba(26, 26, 26, 0.95); color: #e8e8e8; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* ===================== CONSENT BANNER ===================== */ [data-theme="dark"] .consent-banner-card { background: rgba(26, 26, 26, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3), 0 -1px 4px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .consent-banner-title { color: rgba(232, 232, 232, 0.92); } [data-theme="dark"] .consent-banner-desc { color: rgba(232, 232, 232, 0.5); } [data-theme="dark"] .consent-banner-desc a { color: rgba(232, 232, 232, 0.5); } [data-theme="dark"] .consent-banner-desc a:hover { color: rgba(232, 232, 232, 0.7); } [data-theme="dark"] .consent-btn--primary { background: rgba(232, 232, 232, 0.92); color: #1a1a1a; } [data-theme="dark"] .consent-btn--primary:hover { background: rgba(232, 232, 232, 1); } [data-theme="dark"] .consent-btn--secondary { background: rgba(255, 255, 255, 0.06); color: rgba(232, 232, 232, 0.75); } [data-theme="dark"] .consent-btn--secondary:hover { background: rgba(255, 255, 255, 0.10); color: rgba(232, 232, 232, 0.9); } [data-theme="dark"] .consent-btn--ghost { color: rgba(232, 232, 232, 0.45); } [data-theme="dark"] .consent-btn--ghost:hover { color: rgba(232, 232, 232, 0.65); } [data-theme="dark"] .consent-btn--save { background: rgba(255, 255, 255, 0.08); color: rgba(232, 232, 232, 0.7); } [data-theme="dark"] .consent-btn--save:hover { background: rgba(255, 255, 255, 0.12); color: rgba(232, 232, 232, 0.85); } /* ===================== CONSENT MODAL ===================== */ [data-theme="dark"] .consent-modal-backdrop { background: rgba(0, 0, 0, 0.7); } [data-theme="dark"] .consent-modal-card { background: #1a1a1a; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .consent-modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .consent-modal-title { color: rgba(232, 232, 232, 0.92); } [data-theme="dark"] .consent-modal-close { background: rgba(255, 255, 255, 0.06); color: rgba(232, 232, 232, 0.6); } [data-theme="dark"] .consent-modal-close:hover { background: rgba(255, 255, 255, 0.10); color: rgba(232, 232, 232, 0.9); } [data-theme="dark"] .consent-modal-intro { color: rgba(232, 232, 232, 0.7); } [data-theme="dark"] .consent-category { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="dark"] .consent-category-name { color: rgba(232, 232, 232, 0.9); } [data-theme="dark"] .consent-category-desc { color: rgba(232, 232, 232, 0.6); } [data-theme="dark"] .consent-toggle-track { background: rgba(255, 255, 255, 0.15); } [data-theme="dark"] .consent-toggle input:disabled + .consent-toggle-track { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .consent-toggle-thumb { background: #e8e8e8; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .consent-modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); } /* ===================== BRAND MARQUEE ===================== */ /* Already dark themed (#28282B background), minimal overrides needed */ [data-theme="dark"] .brand-marquee { border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); } /* ===================== MOBILE: gcbar adjustments ===================== */ @media (max-width: 560px) { [data-theme="dark"] .gcbar-gbtn + .gcbar-gbtn { border-left: 1px solid rgba(255,255,255,0.12); } } /* ===================== MOBILE: shop controls row ===================== */ @media (max-width: 768px) { [data-theme="dark"] .shop-controls-row .gcbar-sort { border: 1px solid rgba(255, 255, 255, 0.15); background: #1a1a1a; } [data-theme="dark"] .shop-controls-row .gcbar-sort select, [data-theme="dark"] .shop-controls-row #gcbarSortSelect { background: transparent !important; color: #e8e8e8; border: none !important; } } /* ===================== FILTER FAB MOBILE ===================== */ @media (max-width: 1100px) { [data-theme="dark"] .filter-fab { background: #1a1a1a !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #e8e8e8 !important; } [data-theme="dark"] .filter-fab * { color: #e8e8e8 !important; } } /* ===================== GCBAR ARROWS ===================== */ [data-theme="dark"] .gcbar-arrow { background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.9); } [data-theme="dark"] .gcbar-arrow:hover { background: rgba(255, 255, 255, 0.25); } /* ===================== IMAGE SELECTION ===================== */ [data-theme="dark"] img { /* Slight reduction to avoid blinding white on product images */ /* Only applied to container backgrounds, images stay as-is */ } /* ===================== SCROLLBAR GLOBAL ===================== */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0f0f0f; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #444; } /* ===================== MISC LINK / SELECTION COLORS ===================== */ [data-theme="dark"] ::selection { background: rgba(34, 104, 255, 0.3); color: #e8e8e8; } [data-theme="dark"] a { color: inherit; } /* ===================== MOBILE FILTER PANEL (max 560px) ===================== */ @media (max-width: 560px) { [data-theme="dark"] .filter-fab { background: #1a1a1a !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #e8e8e8 !important; box-shadow: 0 12px 30px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .filter-fab * { color: #e8e8e8 !important; } } /* ===================== SPORT CTA SECTION (Landing Page) ===================== */ [data-theme="dark"] .landing-sport-cta { background: #0f0f0f; } [data-theme="dark"] .landing-sport-cta-inner { background: #0f0f0f; } [data-theme="dark"] body.sport-cta-locked .landing-sport-cta-inner { background: #0f0f0f; } /* ===================== SORT FAB ===================== */ [data-theme="dark"] .sort-fab { background: rgba(26, 26, 26, 0.92) !important; border: 1px solid rgba(255,255,255,0.18) !important; color: #e8e8e8 !important; } [data-theme="dark"] .sort-fab * { color: #e8e8e8 !important; } [data-theme="dark"] .sort-fab:hover { background: rgba(26, 26, 26, 1) !important; }