/* |-------------------------------------------------------------------------- | MONOSTORE Seller Store Template |-------------------------------------------------------------------------- | Berlaku hanya untuk halaman toko seller: | .seller-store-page.store-template-ready |-------------------------------------------------------------------------- */ .seller-store-page.store-template-ready{ --store-accent:#22a6ff; --store-accent-2:#4df3ff; --store-accent-soft:rgba(77,243,255,.16); } .seller-store-page.store-accent-blue{--store-accent:#22a6ff;--store-accent-2:#4df3ff;--store-accent-soft:rgba(77,243,255,.16)} .seller-store-page.store-accent-cyan{--store-accent:#00d4ff;--store-accent-2:#8fffff;--store-accent-soft:rgba(143,255,255,.16)} .seller-store-page.store-accent-green{--store-accent:#28e7a2;--store-accent-2:#8dffd0;--store-accent-soft:rgba(40,231,162,.16)} .seller-store-page.store-accent-purple{--store-accent:#8b5cf6;--store-accent-2:#d8b4fe;--store-accent-soft:rgba(139,92,246,.17)} .seller-store-page.store-accent-red{--store-accent:#ff4f7b;--store-accent-2:#ff9db6;--store-accent-soft:rgba(255,79,123,.17)} .seller-store-page.store-accent-orange{--store-accent:#ff8a00;--store-accent-2:#ffd166;--store-accent-soft:rgba(255,138,0,.17)} .seller-store-page.store-accent-gold{--store-accent:#facc15;--store-accent-2:#fff3a3;--store-accent-soft:rgba(250,204,21,.17)} .seller-store-page.store-accent-ice{--store-accent:#7dd3fc;--store-accent-2:#e0faff;--store-accent-soft:rgba(125,211,252,.17)} /* Accent umum */ .seller-store-page.store-template-ready .seller-premium-avatar, .seller-store-page.store-template-ready .store-hero-avatar, .seller-store-page.store-template-ready .seller-search-avatar{ border-color:var(--store-accent-2)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--store-accent-2) 18%,transparent),0 0 32px color-mix(in srgb,var(--store-accent) 45%,transparent)!important; } .seller-store-page.store-template-ready .seller-real-verified, .seller-store-page.store-template-ready .seller-verified-badge, .seller-store-page.store-template-ready .preview-verified{ background:linear-gradient(135deg,var(--store-accent-2),var(--store-accent))!important; } .seller-store-page.store-template-ready .seller-contact-btn, .seller-store-page.store-template-ready .seller-chat-btn, .seller-store-page.store-template-ready .btn-main[href*="livechat"], .seller-store-page.store-template-ready .btn-main[href*="wa.me"]{ background:linear-gradient(135deg,var(--store-accent-2),var(--store-accent))!important; color:#000!important; border:0!important; box-shadow:0 18px 44px color-mix(in srgb,var(--store-accent) 34%,transparent)!important; } .seller-store-page.store-template-ready .seller-rating-fill, .seller-store-page.store-template-ready .rating-progress-fill, .seller-store-page.store-template-ready .seller-rating-bar-fill, .seller-store-page.store-template-ready .rating-fill{ background:linear-gradient(90deg,var(--store-accent-2),var(--store-accent))!important; box-shadow:0 0 14px color-mix(in srgb,var(--store-accent) 45%,transparent)!important; } .seller-store-page.store-template-ready .seller-filter-count, .seller-store-page.store-template-ready .category-count, .seller-store-page.store-template-ready .filter-count, .seller-store-page.store-template-ready .count-badge{ background:var(--store-accent-soft)!important; border-color:color-mix(in srgb,var(--store-accent-2) 40%,transparent)!important; color:var(--store-accent-2)!important; } .seller-store-page.store-template-ready .seller-filter-link.active, .seller-store-page.store-template-ready .seller-filter-item.active, .seller-store-page.store-template-ready .seller-filter-sidebar .active, .seller-store-page.store-template-ready .seller-store-sidebar .active{ color:var(--store-accent-2)!important; } .seller-store-page.store-template-ready .seller-description-panel, .seller-store-page.store-template-ready .seller-profile-panel, .seller-store-page.store-template-ready .seller-transaction-panel, .seller-store-page.store-template-ready .seller-rating-panel, .seller-store-page.store-template-ready .seller-filter-sidebar, .seller-store-page.store-template-ready .seller-product-card, .seller-store-page.store-template-ready .product-card{ border-color:color-mix(in srgb,var(--store-accent-2) 16%,rgba(255,255,255,.10))!important; } /* Hide dari kostomisasi */ .seller-store-page.store-hide-rating .seller-rating-panel{ display:none!important; } .seller-store-page.store-hide-description .seller-description-panel{ display:none!important; } /* Banner/background opsional */ .seller-store-page.store-template-ready.store-has-banner .seller-premium-top{ position:relative; overflow:hidden; } .seller-store-page.store-template-ready.store-has-banner .seller-premium-top::before{ content:""; position:absolute; inset:0; background: linear-gradient(135deg,rgba(2,7,18,.72),rgba(2,7,18,.88)), var(--seller-template-bg, none); background-size:cover; background-position:center; opacity:.55; pointer-events:none; } .seller-store-page.store-template-ready.store-has-banner .seller-premium-top>*{ position:relative; z-index:1; } /* ===== TEMPLATE VARIANTS SESUAI template-demo.php ===== */ /* PREMIUM TEMPLATE */ .seller-store-page.store-template-premium .seller-description-panel{ background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important; box-shadow:0 24px 70px rgba(0,0,0,.30),0 0 32px color-mix(in srgb,var(--store-accent) 11%,transparent)!important; } .seller-store-page.store-template-premium .seller-profile-panel, .seller-store-page.store-template-premium .seller-transaction-panel, .seller-store-page.store-template-premium .seller-rating-panel{ background:none!important; } /* ESPORT TEMPLATE */ .seller-store-page.store-template-esport .seller-description-panel{ border-radius:10px 28px 10px 28px!important; background:linear-gradient(135deg,color-mix(in srgb,var(--store-accent) 18%,transparent),rgba(255,255,255,.045))!important; } .seller-store-page.store-template-esport .seller-profile-panel, .seller-store-page.store-template-esport .seller-transaction-panel, .seller-store-page.store-template-esport .seller-rating-panel{ background:none!important; } /* MINIMAL TEMPLATE */ .seller-store-page.store-template-minimal .seller-description-panel{ background:rgba(255,255,255,.035)!important; box-shadow:none!important; border-color:rgba(255,255,255,.10)!important; } .seller-store-page.store-template-minimal .seller-profile-panel, .seller-store-page.store-template-minimal .seller-transaction-panel, .seller-store-page.store-template-minimal .seller-rating-panel, .seller-store-page.store-template-minimal .seller-filter-sidebar{ background:none!important; } /* CYBER TEMPLATE */ .seller-store-page.store-template-cyber .seller-description-panel{ background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 22px),linear-gradient(180deg,rgba(77,243,255,.075),rgba(255,255,255,.035))!important; } .seller-store-page.store-template-cyber .seller-profile-panel, .seller-store-page.store-template-cyber .seller-transaction-panel, .seller-store-page.store-template-cyber .seller-rating-panel{ background:none!important; } /* DARKVAULT TEMPLATE */ .seller-store-page.store-template-darkvault{ background:radial-gradient(circle at 16% 12%,rgba(34,166,255,.14),transparent 28%),linear-gradient(135deg,#02050d,#07111f 56%,#01030a)!important; } .seller-store-page.store-template-darkvault .seller-description-panel{ background:radial-gradient(circle at 16% 12%,rgba(34,166,255,.14),transparent 28%),linear-gradient(135deg,#02050d,#07111f 56%,#01030a)!important; } .seller-store-page.store-template-darkvault .seller-profile-panel, .seller-store-page.store-template-darkvault .seller-transaction-panel, .seller-store-page.store-template-darkvault .seller-rating-panel{ background:none!important; } /* ULTRAVOID TEMPLATE */ .seller-store-page.store-template-ultravoid{ background:radial-gradient(circle at 18% 8%,rgba(139,92,246,.24),transparent 30%),radial-gradient(circle at 80% 20%,rgba(77,243,255,.10),transparent 28%),linear-gradient(135deg,#090217,#130829 55%,#020712)!important; } .seller-store-page.store-template-ultravoid .seller-profile-panel, .seller-store-page.store-template-ultravoid .seller-transaction-panel, .seller-store-page.store-template-ultravoid .seller-rating-panel{ background:none!important; } /* MIDNIGHT TEMPLATE */ .seller-store-page.store-template-midnight{ background:radial-gradient(circle at 20% 8%,rgba(255,138,0,.17),transparent 30%),linear-gradient(135deg,#040814,#0b152a 55%,#160703)!important; } /* BUSHIDO TEMPLATE */ .seller-store-page.store-template-bushido{ background:radial-gradient(circle at 18% 8%,rgba(255,79,123,.13),transparent 30%),linear-gradient(135deg,#0b111f,#17101a 55%,#06070d)!important; } /* ALPHAPRO TEMPLATE */ .seller-store-page.store-template-alphapro .seller-profile-panel, .seller-store-page.store-template-alphapro .seller-transaction-panel, .seller-store-page.store-template-alphapro .seller-rating-panel{ border-color:rgba(40,231,162,.20)!important; } /* FROSTBYTE TEMPLATE */ .seller-store-page.store-template-frostbyte{ background:radial-gradient(circle at 12% 8%,rgba(224,250,255,.22),transparent 30%),linear-gradient(135deg,#041421,#082b43 55%,#020712)!important; } /* CRIMSON TEMPLATE */ .seller-store-page.store-template-crimson{ background:radial-gradient(circle at 16% 8%,rgba(255,31,61,.20),transparent 30%),linear-gradient(135deg,#12030a,#1c0a16 55%,#03050c)!important; } /* ===== LAYOUT VARIANTS ===== */ .seller-store-page.store-layout-hero-left .seller-premium-top{ grid-template-columns:1.15fr .85fr .85fr!important; align-items:stretch!important; } .seller-store-page.store-layout-hero-left .seller-profile-panel{ min-height:230px!important; } .seller-store-page.store-layout-compact .seller-premium-top{ gap:12px!important; } .seller-store-page.store-layout-compact .seller-profile-panel, .seller-store-page.store-layout-compact .seller-transaction-panel, .seller-store-page.store-layout-compact .seller-rating-panel{ padding:16px!important; } .seller-store-page.store-layout-compact .seller-description-panel{ max-height:240px!important; } .seller-store-page.store-layout-magazine .seller-store-content, .seller-store-page.store-layout-catalog .seller-store-content{ grid-template-columns:220px 1fr!important; } .seller-store-page.store-layout-magazine .seller-product-grid, .seller-store-page.store-layout-catalog .seller-product-grid, .seller-store-page.store-layout-wide .seller-product-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } .seller-store-page.store-layout-wide .container, .seller-store-page.store-layout-wide .seller-store-wrap{ max-width:1460px!important; } @media(max-width:992px){ .seller-store-page.store-layout-magazine .seller-store-content, .seller-store-page.store-layout-catalog .seller-store-content, .seller-store-page.store-layout-hero-left .seller-premium-top{ grid-template-columns:1fr!important; } .seller-store-page.store-layout-magazine .seller-product-grid, .seller-store-page.store-layout-catalog .seller-product-grid, .seller-store-page.store-layout-wide .seller-product-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* ========================================================================== MONOSTORE STORE ACCENT EXTENDED Warna tema ikut mengubah elemen penting toko seller. ========================================================================== */ .seller-store-page.store-template-ready .seller-store-name, .seller-store-page.store-template-ready .seller-profile-panel h1, .seller-store-page.store-template-ready .seller-profile-panel h2, .seller-store-page.store-template-ready .seller-profile-panel .seller-name, .seller-store-page.store-template-ready .seller-premium-name, .seller-store-page.store-template-ready .seller-title{ color:#fff!important; text-shadow: 0 0 12px color-mix(in srgb,var(--store-accent) 28%,transparent), 0 0 24px color-mix(in srgb,var(--store-accent-2) 16%,transparent)!important; } .seller-store-page.store-template-ready .seller-username, .seller-store-page.store-template-ready .seller-profile-panel .username, .seller-store-page.store-template-ready .seller-profile-panel a[href*="seller"], .seller-store-page.store-template-ready .seller-profile-panel .text-gradient{ color:var(--store-accent-2)!important; -webkit-text-fill-color:var(--store-accent-2)!important; text-shadow:0 0 12px color-mix(in srgb,var(--store-accent-2) 28%,transparent)!important; } .seller-store-page.store-template-ready .seller-premium-top h3, .seller-store-page.store-template-ready .seller-premium-top h4, .seller-store-page.store-template-ready .seller-transaction-panel > b, .seller-store-page.store-template-ready .seller-transaction-panel > strong, .seller-store-page.store-template-ready .seller-rating-panel > b, .seller-store-page.store-template-ready .seller-rating-panel > strong, .seller-store-page.store-template-ready .seller-description-title, .seller-store-page.store-template-ready .seller-description-panel h3, .seller-store-page.store-template-ready .seller-description-panel h4, .seller-store-page.store-template-ready .seller-products-title, .seller-store-page.store-template-ready .seller-products-head h2, .seller-store-page.store-template-ready .seller-products-head h3, .seller-store-page.store-template-ready .seller-store-products h2, .seller-store-page.store-template-ready .seller-store-products h3, .seller-store-page.store-template-ready .seller-filter-sidebar h3, .seller-store-page.store-template-ready .seller-filter-sidebar h4, .seller-store-page.store-template-ready .seller-filter-title{ color:var(--store-accent-2)!important; text-shadow:0 0 12px color-mix(in srgb,var(--store-accent-2) 24%,transparent)!important; } .seller-store-page.store-template-ready .seller-stat-value, .seller-store-page.store-template-ready .seller-transaction-value, .seller-store-page.store-template-ready .seller-transaction-panel b:not(:first-child), .seller-store-page.store-template-ready .seller-transaction-panel strong:not(:first-child), .seller-store-page.store-template-ready .seller-rating-score, .seller-store-page.store-template-ready .seller-rating-count, .seller-store-page.store-template-ready .rating-count, .seller-store-page.store-template-ready .seller-review-link, .seller-store-page.store-template-ready a[href*="ulasan"], .seller-store-page.store-template-ready .seller-rating-panel a{ color:var(--store-accent-2)!important; text-shadow:0 0 10px color-mix(in srgb,var(--store-accent) 28%,transparent)!important; } .seller-store-page.store-template-ready .seller-rating-stars, .seller-store-page.store-template-ready .seller-rating-star, .seller-store-page.store-template-ready .rating-stars, .seller-store-page.store-template-ready .rating-star, .seller-store-page.store-template-ready .seller-rating-panel .fa-star, .seller-store-page.store-template-ready .seller-rating-panel i[class*="star"]{ color:var(--store-accent-2)!important; text-shadow:0 0 10px color-mix(in srgb,var(--store-accent-2) 32%,transparent)!important; } .seller-store-page.store-template-ready .seller-filter-sidebar a, .seller-store-page.store-template-ready .seller-filter-sidebar button, .seller-store-page.store-template-ready .seller-filter-link, .seller-store-page.store-template-ready .seller-filter-item, .seller-store-page.store-template-ready .seller-filter-all, .seller-store-page.store-template-ready .seller-filter-submenu a{ color:#cbd4e8!important; } .seller-store-page.store-template-ready .seller-filter-sidebar a:hover, .seller-store-page.store-template-ready .seller-filter-sidebar button:hover, .seller-store-page.store-template-ready .seller-filter-link:hover, .seller-store-page.store-template-ready .seller-filter-item:hover, .seller-store-page.store-template-ready .seller-filter-all:hover, .seller-store-page.store-template-ready .seller-filter-all.active, .seller-store-page.store-template-ready .seller-filter-link.active, .seller-store-page.store-template-ready .seller-filter-item.active, .seller-store-page.store-template-ready .seller-filter-submenu a.active, .seller-store-page.store-template-ready .seller-filter-sidebar .active{ color:var(--store-accent-2)!important; text-shadow:0 0 10px color-mix(in srgb,var(--store-accent-2) 24%,transparent)!important; } .seller-store-page.store-template-ready .seller-filter-count, .seller-store-page.store-template-ready .category-count, .seller-store-page.store-template-ready .filter-count, .seller-store-page.store-template-ready .count-badge, .seller-store-page.store-template-ready .seller-filter-sidebar b:last-child, .seller-store-page.store-template-ready .seller-filter-sidebar em{ background:linear-gradient(135deg,var(--store-accent-soft),color-mix(in srgb,var(--store-accent) 22%,transparent))!important; border:1px solid color-mix(in srgb,var(--store-accent-2) 36%,transparent)!important; color:var(--store-accent-2)!important; box-shadow:0 0 14px color-mix(in srgb,var(--store-accent) 22%,transparent)!important; } .seller-store-page.store-template-ready .seller-rating-track, .seller-store-page.store-template-ready .rating-progress, .seller-store-page.store-template-ready .seller-rating-bar, .seller-store-page.store-template-ready .rating-track{ background:color-mix(in srgb,var(--store-accent) 14%,rgba(25,37,58,.86))!important; } .seller-store-page.store-template-ready .seller-rating-fill, .seller-store-page.store-template-ready .rating-progress-fill, .seller-store-page.store-template-ready .seller-rating-bar-fill, .seller-store-page.store-template-ready .rating-fill{ background:linear-gradient(90deg,var(--store-accent-2),var(--store-accent))!important; box-shadow: 0 0 10px color-mix(in srgb,var(--store-accent-2) 48%,transparent), 0 0 20px color-mix(in srgb,var(--store-accent) 28%,transparent)!important; } .seller-store-page.store-template-ready .seller-description-panel i, .seller-store-page.store-template-ready .seller-transaction-panel i, .seller-store-page.store-template-ready .seller-filter-sidebar i, .seller-store-page.store-template-ready .seller-products-head i, .seller-store-page.store-template-ready .seller-store-products i{ color:var(--store-accent-2)!important; } .seller-store-page.store-template-ready .seller-online-status.online{ color:var(--store-accent-2)!important; } .seller-store-page.store-template-ready .seller-online-status.online .status-dot{ background:var(--store-accent-2)!important; box-shadow: 0 0 8px color-mix(in srgb,var(--store-accent-2) 70%,transparent), 0 0 18px color-mix(in srgb,var(--store-accent) 44%,transparent)!important; } .seller-store-page.store-template-ready .seller-premium-top .fw-bold, .seller-store-page.store-template-ready .seller-premium-top .fw-black, .seller-store-page.store-template-ready .seller-premium-top .section-title{ color:var(--store-accent-2)!important; }