:root { --market-pink: #f34f76; --market-blue: #0878df; --market-line: #dedede; --market-muted: #777777; } /* * style-4 is a fixed light storefront. The shared Vineps files still expose a * dark/light theme switch and set theme variables inline on ; pinning the * variables here prevents those legacy rules from turning this page black or * producing white text inside the white Seller panel. */ html.marketplace-template-root { --theme-primary: #0878df !important; --theme-primary-alpha: rgba(8, 120, 223, .10) !important; --theme-grad-start: #111111 !important; --theme-button: #111111 !important; --theme-button-hover: #333333 !important; --theme-button-text: #ffffff !important; --theme-base: #ffffff !important; --theme-card: #ffffff !important; --theme-dropdown: #ffffff !important; --theme-element: #fafafa !important; --theme-hover: #f5f5f5 !important; --theme-border-dark: #dedede !important; --theme-border: #dedede !important; --theme-border-light: #dedede !important; --theme-border-hover: #aaaaaa !important; --theme-text: #111111 !important; --theme-text-muted: #777777 !important; --theme-price: #111111 !important; color-scheme: only light; background: #ffffff !important; } html.marketplace-template-root[data-color-mode] body.marketplace-template, html.marketplace-template-root[data-color-mode] body.marketplace-template #productListPage, html.marketplace-template-root[data-color-mode] body.marketplace-template #productListNav, html.marketplace-template-root[data-color-mode] body.marketplace-template #productListFilters { color: #111111 !important; background: #ffffff !important; background-image: none !important; } body.marketplace-template { margin: 0; color: #111111 !important; background: #ffffff !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } .marketplace-template button, .marketplace-template input, .marketplace-template select { font: inherit; } .marketplace-template #globalAppLoader { background: #ffffff !important; color: #111111 !important; } /* The supplied reference page has only the wordmark and search field. */ .marketplace-template #globalSettingsMenuWrap, .marketplace-template #topBannerActions, .marketplace-template #creatorPromoLink, .marketplace-template #templateToggles, .marketplace-template #customVideoMessage { display: none !important; } .marketplace-template #productListNav { position: relative !important; z-index: 50; width: 100%; border-bottom: 1px solid #e6e6e6 !important; background: #ffffff !important; } .marketplace-template #productListNav > .product-list-content-shell { position: relative; max-width: 1180px !important; padding: 28px 22px 24px !important; gap: 0 !important; } .marketplace-template #mainNavTitle.site-text-logo-title, .marketplace-template #mainNavTitle:not(.site-logo-title) { color: #111111 !important; background: none !important; font-size: 34px !important; font-weight: 900 !important; letter-spacing: -1.8px !important; line-height: 1; text-transform: uppercase; -webkit-text-fill-color: currentColor !important; } .marketplace-template #mainNavTitle .market-logo-accent { color: var(--market-pink) !important; -webkit-text-fill-color: var(--market-pink) !important; } .marketplace-template #mainNavTitle.site-text-logo-title::first-letter { color: inherit; } .marketplace-template #globalSettingsBtn { width: 48px !important; height: 48px !important; border: 1px solid #dddddd !important; border-radius: 50% !important; color: var(--market-blue) !important; background: #ffffff !important; } .marketplace-template #globalSettingsBtn i { color: currentColor !important; font-size: 22px !important; } .marketplace-template #creatorPromoLink { margin-top: 18px; border-color: #111111 !important; background: #111111 !important; color: #ffffff !important; } .marketplace-template #productListNav > .product-list-content-shell > div:last-child { margin-top: 28px; } .marketplace-template #topBannerActions { position: absolute; top: 25px; right: 82px; width: auto !important; } .marketplace-template #topSignupBtn { min-height: 54px; border: 1px solid #dddddd !important; border-radius: 30px !important; background: #ffffff !important; color: var(--market-blue) !important; padding: 0 24px !important; } .marketplace-template #searchInput { height: 64px; border: 1.5px solid #dddddd !important; border-radius: 34px !important; outline: 0; background: #ffffff !important; color: #111111 !important; padding-left: 56px !important; padding-right: 24px !important; font-size: 20px !important; box-shadow: none !important; } .marketplace-template #searchInput::placeholder { color: #aaaaaa !important; -webkit-text-fill-color: #aaaaaa !important; opacity: 1 !important; } .marketplace-template #searchInput:focus { border-color: #aaaaaa !important; } .marketplace-template #searchInput + * { color: #111111; } .marketplace-template #productListNav .ph-magnifying-glass { color: #111111 !important; font-size: 26px !important; } .marketplace-template #productListFilters { position: relative !important; z-index: 40; width: 100%; padding: 0 !important; border: 0 !important; background: #ffffff !important; box-shadow: none !important; } .marketplace-template #productListFilters.seller-filter-hidden { display: none !important; } .marketplace-template #productListFilters > .product-list-content-shell { max-width: 1180px !important; padding: 34px 22px 0 !important; } .marketplace-template #categoryContainer { display: flex; gap: 12px !important; width: 100%; margin: 0 0 28px !important; padding: 0 !important; overflow-x: auto; } .marketplace-template #categoryContainer button { flex: 0 0 auto; border: 1px solid #dddddd !important; border-radius: 34px !important; background: #ffffff !important; color: var(--market-blue) !important; padding: 13px 28px !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.25; box-shadow: none !important; } .marketplace-template #categoryContainer button.bg-\[var\(--theme-button\)\] { border-color: #111111 !important; background: #111111 !important; color: #ffffff !important; } .marketplace-template #productListFilters .grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 18px !important; width: 100%; } .marketplace-template #subCategoryDropdownContainer, .marketplace-template #sortContainer { width: 100%; } .marketplace-template #subCategorySelectBtn, .marketplace-template #sortSelectBtn { width: 100%; height: 62px; border: 1px solid #dddddd !important; border-radius: 20px !important; background: #ffffff !important; color: var(--market-blue) !important; padding: 0 24px !important; font-size: 19px !important; font-weight: 400 !important; box-shadow: none !important; } .marketplace-template #subCategorySelectBtn i, .marketplace-template #sortSelectBtn i { color: var(--market-blue) !important; } .marketplace-template #subCategoryDropdownList, .marketplace-template #sortDropdownList { border: 1px solid #dddddd !important; border-radius: 18px !important; background: #ffffff !important; color: #111111 !important; box-shadow: 0 20px 45px rgba(0, 0, 0, .12) !important; } .marketplace-template #subCategoryDropdownList button, .marketplace-template #sortDropdownList button { color: #111111 !important; background: #ffffff !important; } .marketplace-template #subCategoryDropdownList button:hover, .marketplace-template #sortDropdownList button:hover { background: #f5f5f5 !important; } .marketplace-template #productListPage { max-width: 1180px !important; padding: 42px 22px 70px !important; } .marketplace-template .seller-box { margin-bottom: 58px; padding: 42px; border: 1px solid #dddddd; border-radius: 28px; background: #ffffff !important; color: #111111 !important; } .marketplace-template .eyebrow { color: var(--market-pink) !important; -webkit-text-fill-color: var(--market-pink) !important; font-size: 16px; font-weight: 800; letter-spacing: 4px; } .marketplace-template .seller-box h2 { margin: 14px 0 10px; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.12; } .marketplace-template .seller-box p { margin: 0 0 30px; color: var(--market-muted) !important; -webkit-text-fill-color: var(--market-muted) !important; font-size: 20px; line-height: 1.45; } .marketplace-template .seller-label { display: block; margin: 0 0 10px 6px; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-size: 17px; font-weight: 700; } .marketplace-template .seller-select { width: 100%; height: 60px; border: 1px solid #dddddd; border-radius: 18px; outline: 0; background: #f9f9f9 !important; color: var(--market-blue) !important; -webkit-text-fill-color: var(--market-blue) !important; padding: 0 20px; font-size: 19px; } .marketplace-template .seller-profile-page { margin-bottom: 42px; } .marketplace-template .seller-top { display: grid; grid-template-columns: auto 1fr minmax(220px, .45fr); align-items: center; gap: 24px; } .marketplace-template .seller-back { border: 1px solid #dddddd; border-radius: 18px; background: #ffffff; color: #111111; padding: 12px 18px; font-weight: 700; } .marketplace-template .seller-profile { display: flex; align-items: center; gap: 14px; } .marketplace-template .seller-avatar { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: #111111; color: #ffffff; font-size: 20px; font-weight: 900; } .marketplace-template .seller-profile h2 { margin: 0; color: #111111; font-size: 30px; font-weight: 800; } .marketplace-template .seller-profile p { margin: 4px 0 0; color: var(--market-muted); } .marketplace-template .seller-switch { width: 100%; height: 54px; border: 1px solid #dddddd; border-radius: 16px; background: #ffffff; color: var(--market-blue); padding: 0 16px; } .marketplace-template .market-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .marketplace-template .market-section-head h2 { margin: 0; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; } .marketplace-template .market-count { flex: 0 0 auto; color: var(--market-muted) !important; -webkit-text-fill-color: var(--market-muted) !important; font-size: 18px; } .marketplace-template #productGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; padding-bottom: 30px !important; } .marketplace-template .product-card { overflow: hidden; border: 1px solid #dddddd !important; border-radius: 24px !important; background: #ffffff !important; box-shadow: none !important; } .marketplace-template .product-card:hover { border-color: #dddddd !important; box-shadow: none !important; } .marketplace-template .product-card > div:first-child { height: 300px; aspect-ratio: auto !important; background: #fafafa !important; } .marketplace-template .product-card > div:first-child img { object-fit: cover !important; transform: none !important; } .marketplace-template .product-card > div:last-child { padding: 16px 18px 19px !important; border-top: 0 !important; } .marketplace-template .product-card h2 { margin-bottom: 7px !important; color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-size: 16px !important; font-weight: 400 !important; } .marketplace-template .product-card p { color: #111111 !important; -webkit-text-fill-color: #111111 !important; font-size: 16px !important; font-weight: 400 !important; } .marketplace-template .product-seller { margin-top: 8px; overflow: hidden; color: #888888 !important; -webkit-text-fill-color: #888888 !important; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .marketplace-template .product-card-buy-wrap { display: none !important; } .marketplace-template .product-card-buy-btn { border-radius: 18px !important; background: #111111 !important; color: #ffffff !important; } .marketplace-template #paginationControls, .marketplace-template #pageSizeSelect, .marketplace-template #paginationPrev, .marketplace-template #paginationNext, .marketplace-template #paginationNumbers button { color: #111111 !important; } .marketplace-template #paginationPrev, .marketplace-template #paginationNext, .marketplace-template #pageSizeSelect, .marketplace-template #paginationNumbers button { border-color: #dddddd !important; background: #ffffff !important; } /* The generic pagination rule above keeps inactive buttons white. Restore the * selected page after JavaScript adds its theme-button utility class. */ .marketplace-template #paginationNumbers button[class*="bg-[var(--theme-button)]"] { border-color: #111111 !important; background: #111111 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .marketplace-template #noResultsText { color: #777777 !important; } .marketplace-template #productDetailPage { color: var(--detail-text, #f8fafc); } @media (min-width: 900px) { .marketplace-template #productGrid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (max-width: 700px) { .marketplace-template #productListNav > .product-list-content-shell { padding: 24px 18px 22px !important; } .marketplace-template #mainNavTitle.site-text-logo-title, .marketplace-template #mainNavTitle:not(.site-logo-title) { font-size: 29px !important; } .marketplace-template #productListNav > .product-list-content-shell > div:last-child { margin-top: 22px; } .marketplace-template #searchInput { height: 58px; font-size: 17px !important; } .marketplace-template #productListFilters > .product-list-content-shell { padding: 30px 18px 0 !important; } .marketplace-template #categoryContainer button { padding: 12px 22px !important; font-size: 16px !important; } .marketplace-template #productListFilters .grid { grid-template-columns: 1fr !important; gap: 14px !important; } .marketplace-template #productListPage { padding: 34px 18px 60px !important; } .marketplace-template .seller-box { margin-bottom: 45px; padding: 30px 26px; } .marketplace-template .seller-box h2, .marketplace-template .market-section-head h2 { font-size: 34px; } .marketplace-template .seller-box p { font-size: 18px; } .marketplace-template .seller-top { grid-template-columns: 1fr; align-items: start; } .marketplace-template .seller-switch { width: 100%; } .marketplace-template #productGrid { gap: 22px !important; } .marketplace-template .product-card { border-radius: 24px !important; } .marketplace-template .product-card > div:first-child { height: 250px; } .marketplace-template .product-card > div:last-child { padding: 16px 18px 19px !important; } } @media (max-width: 460px) { .marketplace-template .market-section-head { align-items: start; } .marketplace-template .market-count { font-size: 15px; } }