/* THEME — moteur de DA randomisée Les palettes vivent dans js/themes.js et sont appliquées dynamiquement via des variables CSS + classes fx-* sur . */ :root { --bg: #ebe8e0; --fg: #0a0a0a; --muted: #888; --accent: #ff2d2d; --grid-line: rgba(10, 10, 10, 0.08); --font-display: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif; --font-mono: "Courier New", ui-monospace, monospace; --font-tee: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif; --grain-opacity: 0.06; --tee-skew: 0deg; --page-letter-spacing: 0.02em; } /* === fx-glow : CRT glow sur tout le texte === */ body.fx-glow, body.fx-glow nav, body.fx-glow main, body.fx-glow footer { text-shadow: 0 0 2px currentColor; } body.fx-glow .tee-design .text-design { text-shadow: none; /* le tee imprimé reste net */ } /* === fx-scanlines : CRT === */ body.fx-scanlines::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, currentColor 2px, currentColor 3px ); opacity: 0.04; z-index: 999; } /* === fx-prompt : "> BRAND_" === */ body.fx-prompt .brand::before { content: "> "; color: var(--muted); } body.fx-prompt .brand::after { content: "_"; display: inline-block; margin-left: 4px; animation: rc-blink 1s steps(1) infinite; } @keyframes rc-blink { 50% { opacity: 0; } } /* === fx-tilt : tout le site légèrement skewé === */ body.fx-tilt main, body.fx-tilt nav, body.fx-tilt footer { transform: skewY(-0.5deg); } /* === fx-invert-tee : tee noir, design blanc (pour thèmes sombres) === */ /* On inverse le mockup ET l'overlay design : tout ce qui était noir sur blanc */ /* devient blanc sur noir sans forcer fill/stroke au cas par cas. */ body.fx-invert-tee .tee-mockup { filter: invert(1); } /* ========================================================== Éléments injectés par themes.js ========================================================== */ #top-banner { position: relative; z-index: 20; padding: 8px 16px; text-align: center; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--fg); color: var(--bg); border-bottom: 1px solid var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-meta { font-size: 11px; letter-spacing: 0.05em; color: var(--muted); margin-top: 8px; line-height: 1.5; } .mock-strike { font-family: var(--font-mono); font-size: 0.55em; text-decoration: line-through; color: var(--muted); margin-left: 10px; vertical-align: middle; letter-spacing: 0; } /* ========================================================== Breadcrumb (Amazon-style fil d'ariane) ========================================================== */ #crumb { display: none; padding: 10px 28px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--grid-line); margin: 0 -28px 24px; } /* ========================================================== Tics visuels par DA — LOGOS + CHROME ========================================================== */ /* ---------- TEMU ---------- */ body.theme-temu .brand { font-family: Arial, sans-serif; font-weight: 900; font-style: italic; letter-spacing: -0.02em; font-size: 28px; text-transform: lowercase; } body.theme-temu .brand::after { content: " 🛍️"; font-size: 20px; } /* ---------- AMAZON ---------- */ body.theme-amazon .brand { font-family: "Amazon Ember", "Helvetica Neue", Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; text-transform: lowercase; font-size: 24px; position: relative; padding-bottom: 4px; } body.theme-amazon .brand::after { content: ""; position: absolute; left: 10%; right: 5%; bottom: -4px; height: 10px; border: 2px solid #ff9900; border-color: transparent #ff9900 #ff9900 transparent; border-radius: 0 0 50% 50%; transform: rotate(-8deg); } /* ---------- ASOS ---------- */ body.theme-asos .brand { font-family: "Arial Black", Helvetica, sans-serif; font-weight: 900; letter-spacing: 0; text-transform: uppercase; font-size: 24px; } /* ---------- ALIEXPRESS ---------- */ body.theme-aliexpress .brand { font-family: "Arial Black", Impact, sans-serif; font-style: italic; color: #e62e04; letter-spacing: -0.03em; font-size: 24px; } body.theme-aliexpress .brand::before { content: "🔻 "; font-style: normal; } /* ---------- SHEIN ---------- */ body.theme-shein .brand { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 22px; } /* ---------- VINTED ---------- */ body.theme-vinted .brand { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-style: italic; text-transform: lowercase; font-size: 26px; color: var(--accent); letter-spacing: -0.02em; } /* ---------- ZALANDO ---------- */ body.theme-zalando .brand { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 900; letter-spacing: 0.02em; font-size: 22px; } body.theme-zalando .brand::after { content: "."; color: var(--accent); font-weight: 900; } /* ---------- EBAY ---------- */ body.theme-ebay .brand { font-family: "Market Sans", Arial, sans-serif; font-weight: 900; font-style: italic; text-transform: lowercase; font-size: 32px; letter-spacing: -0.04em; } body.theme-ebay .brand .ebay-char:nth-child(5n+1) { color: #e53238; } body.theme-ebay .brand .ebay-char:nth-child(5n+2) { color: #0064d2; } body.theme-ebay .brand .ebay-char:nth-child(5n+3) { color: #f5af02; } body.theme-ebay .brand .ebay-char:nth-child(5n+4) { color: #86b817; } body.theme-ebay .brand .ebay-char:nth-child(5n+5) { color: #e53238; } /* ---------- WISH ---------- */ body.theme-wish .brand { font-family: "Arial Black", Impact, sans-serif; text-transform: lowercase; color: var(--fg); font-size: 26px; letter-spacing: -0.02em; } /* ---------- DEPOP ---------- */ body.theme-depop .brand { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 900; font-style: italic; text-transform: lowercase; font-size: 26px; letter-spacing: -0.04em; } /* ---------- ETSY ---------- */ body.theme-etsy .brand { font-family: "Guardian Egyptian", Georgia, serif; font-weight: 400; font-style: italic; text-transform: none; color: var(--accent); font-size: 26px; letter-spacing: 0; } /* ---------- SSENSE ---------- */ body.theme-ssense .brand { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 300; text-transform: lowercase; letter-spacing: 0; font-size: 16px; } /* ---------- BARBER POLITIQUE ---------- */ body.theme-barber .brand { font-family: "Avebury", "Archivo Black", "Arial Black", sans-serif; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; font-size: 22px; color: var(--accent); } body.theme-barber .brand::before { content: "💈 "; } body.theme-barber #top-banner { background: var(--accent); color: #fff; font-weight: 900; letter-spacing: 0.06em; } /* ========================================================== Countdown (Temu, Ali, Wish, Shein, eBay, Zalando) ========================================================== */ #rc-countdown { margin-top: 10px; padding: 8px 12px; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; display: inline-flex; gap: 10px; align-items: center; animation: rc-cd-pulse 1s ease-in-out infinite; } #rc-countdown .cd-label { font-weight: 700; } #rc-countdown .cd-time { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 14px; } @keyframes rc-cd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } } body.theme-shein #rc-countdown { animation: none; background: #000; color: var(--accent); border: 1px solid var(--accent); } body.theme-zalando #rc-countdown { animation: none; background: #000; color: #fff; } body.theme-ebay #rc-countdown { animation: none; background: #e53238; color: #fff; font-weight: 900; } body.theme-amazon #rc-countdown { animation: none; background: #067d62; color: #fff; border-radius: 3px; letter-spacing: 0; text-transform: none; font-weight: 700; } body.theme-vinted #rc-countdown { animation: none; background: var(--accent); color: #fff; border-radius: 999px; text-transform: none; letter-spacing: 0; } body.theme-etsy #rc-countdown { animation: none; background: #fff; color: var(--fg); border: 1px solid var(--accent); text-transform: none; letter-spacing: 0; font-family: Georgia, serif; font-style: italic; } body.theme-asos #rc-countdown { animation: none; background: #000; color: #fff; letter-spacing: 0.2em; font-weight: 900; } /* Countdown 2 : flottant en bas à gauche (bandeau "encore plus urgent") */ #rc-countdown-2 { position: fixed; bottom: 20px; left: 20px; z-index: 400; padding: 10px 14px; background: var(--fg); color: var(--bg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; border: 2px solid var(--accent); animation: rc-cd2-shake 3s ease-in-out infinite; } #rc-countdown-2 .cd-label { font-weight: 700; opacity: 0.9; } #rc-countdown-2 .cd-time { font-weight: 900; color: var(--accent); font-size: 14px; font-variant-numeric: tabular-nums; } @keyframes rc-cd2-shake { 0%, 86%, 100% { transform: translateX(0); } 88% { transform: translateX(-3px) rotate(-1deg); } 92% { transform: translateX(3px) rotate(1deg); } 96% { transform: translateX(-2px); } } /* Coupons volants (cliquables) */ .rc-coupon { position: fixed; left: -220px; z-index: 350; padding: 10px 18px; background: var(--accent); color: #000; font-family: "Arial Black", Impact, sans-serif; font-weight: 900; font-size: 16px; letter-spacing: 0.04em; pointer-events: auto; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); animation: rc-coupon-fly 10s linear; transform: rotate(var(--rot-start, -6deg)); white-space: nowrap; border-left: 4px dashed rgba(0, 0, 0, 0.25); border-right: 4px dashed rgba(0, 0, 0, 0.25); user-select: none; transition: filter 0.15s; } .rc-coupon:hover { filter: brightness(1.15) saturate(1.2); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); } .rc-coupon.rc-claimed { animation: rc-coupon-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; pointer-events: none; } @keyframes rc-coupon-pop { 0% { transform: scale(1) rotate(0); opacity: 1; } 40% { transform: scale(1.4) rotate(-4deg); opacity: 1; } 100% { transform: scale(0.2) rotate(20deg); opacity: 0; } } /* Toast de notification (claim, roulette, etc.) */ .rc-toast { position: fixed; top: 88px; left: 50%; transform: translateX(-50%) translateY(-12px); background: var(--fg); color: var(--bg); padding: 14px 26px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; z-index: 1200; border: 2px solid var(--accent); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; } .rc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Confetti */ .rc-confetti { position: fixed; width: 10px; height: 14px; z-index: 1100; pointer-events: none; animation: rc-confetti-fly 1.2s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards; border-radius: 2px; } @keyframes rc-confetti-fly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx, 100px), var(--dy, 200px)) rotate(var(--dr, 360deg)); opacity: 0; } } /* Roulette flottante (visible sur thèmes paris/jeux) */ #rc-roulette { position: fixed; bottom: 24px; right: 24px; z-index: 550; width: 108px; height: 108px; cursor: pointer; display: none; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3)); } #rc-roulette.active { display: block; } #rc-roulette:hover { transform: scale(1.05); } #rc-roulette .rc-wheel { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient( #cf1624 0deg 45deg, #0a0a0a 45deg 90deg, #cf1624 90deg 135deg, #0a0a0a 135deg 180deg, #cf1624 180deg 225deg, #0a0a0a 225deg 270deg, #ffdc00 270deg 315deg, #0a0a0a 315deg 360deg ); border: 5px solid #ffdc00; box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px #ffdc00; transition: transform 4s cubic-bezier(0.18, 0.68, 0.22, 1); transform-origin: 50% 50%; } #rc-roulette .rc-pointer { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid #ffdc00; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); } #rc-roulette .rc-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: #ffdc00; color: #000; border: 3px solid #000; border-radius: 50%; font-family: "Arial Black", sans-serif; font-weight: 900; font-size: 10px; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* Palettes roulette par thème */ body.theme-pokerstars #rc-roulette .rc-wheel { background: conic-gradient( #cf1624 0deg 45deg, #fff 45deg 90deg, #cf1624 90deg 135deg, #fff 135deg 180deg, #cf1624 180deg 225deg, #fff 225deg 270deg, #cf1624 270deg 315deg, #fff 315deg 360deg ); border-color: #fff; } body.theme-pokerstars #rc-roulette .rc-pointer { border-top-color: #cf1624; } body.theme-pokerstars #rc-roulette .rc-hub { background: #cf1624; color: #fff; } body.theme-pmu #rc-roulette .rc-wheel { background: conic-gradient( #003c78 0deg 45deg, #ffcc00 45deg 90deg, #003c78 90deg 135deg, #ffcc00 135deg 180deg, #003c78 180deg 225deg, #ffcc00 225deg 270deg, #003c78 270deg 315deg, #ffcc00 315deg 360deg ); border-color: #ffcc00; } body.theme-pmu #rc-roulette .rc-pointer { border-top-color: #ffcc00; } body.theme-pmu #rc-roulette .rc-hub { background: #ffcc00; color: #003c78; } body.theme-unibet #rc-roulette .rc-wheel { background: conic-gradient( #14805e 0deg 45deg, #fff 45deg 90deg, #14805e 90deg 135deg, #fff 135deg 180deg, #14805e 180deg 225deg, #fff 225deg 270deg, #14805e 270deg 315deg, #ff6b00 315deg 360deg ); border-color: #14805e; } body.theme-unibet #rc-roulette .rc-hub { background: #ff6b00; color: #fff; border-color: #14805e; } body.theme-stake #rc-roulette .rc-wheel { background: conic-gradient( #00e701 0deg 45deg, #1a2c38 45deg 90deg, #00e701 90deg 135deg, #1a2c38 135deg 180deg, #00e701 180deg 225deg, #1a2c38 225deg 270deg, #00e701 270deg 315deg, #1a2c38 315deg 360deg ); border-color: #00e701; } body.theme-stake #rc-roulette .rc-hub { background: #00e701; color: #1a2c38; border-color: #1a2c38; } body.theme-betclic #rc-roulette .rc-wheel { background: conic-gradient( #ff4300 0deg 45deg, #000 45deg 90deg, #ff4300 90deg 135deg, #000 135deg 180deg, #ff4300 180deg 225deg, #000 225deg 270deg, #ff4300 270deg 315deg, #000 315deg 360deg ); border-color: #ff4300; } body.theme-betclic #rc-roulette .rc-hub { background: #ff4300; color: #fff; border-color: #000; } /* Variantes par thème pour les coupons */ .rc-coupon::before { content: "🎟️ "; margin-right: 6px; } @keyframes rc-coupon-fly { 0% { left: -220px; transform: rotate(var(--rot-start, -6deg)) translateY(0); } 50% { transform: rotate(calc((var(--rot-start, -6deg) + var(--rot-end, 6deg)) / 2)) translateY(-12px); } 100% { left: calc(100vw + 40px); transform: rotate(var(--rot-end, 6deg)) translateY(0); } } /* Variantes par thème pour les coupons */ body.theme-aliexpress .rc-coupon { background: #ff2300; color: #fff; } body.theme-wish .rc-coupon { background: #fa2a56; color: #fff; font-style: italic; } body.theme-shein .rc-coupon { background: #ff5b9f; color: #000; border: 2px solid #000; } body.theme-temu .rc-coupon { background: #fff23a; color: #000; } /* ========================================================== Banner marquee (Temu, Ali, Wish) ========================================================== */ #top-banner.marquee { overflow: hidden; text-overflow: clip; padding: 8px 0; white-space: nowrap; } #top-banner.marquee .bn-track { display: inline-block; white-space: nowrap; animation: rc-marquee 22s linear infinite; will-change: transform; } @keyframes rc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } body.theme-wish #top-banner.marquee .bn-track { animation-duration: 14s; } body.theme-temu #top-banner.marquee .bn-track { animation-duration: 18s; } /* ========================================================== Buy button pulse (Temu, Ali, Wish) ========================================================== */ body.theme-temu button.primary, body.theme-aliexpress button.primary, body.theme-wish button.primary { animation: rc-buy-pulse 1.4s ease-in-out infinite; } @keyframes rc-buy-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* WISH : badge -85% qui vibre */ body.theme-wish .price::before { animation: rc-wobble 0.7s ease-in-out infinite; } @keyframes rc-wobble { 0%, 100% { transform: rotate(-8deg) scale(1); } 25% { transform: rotate(-18deg) scale(1.08); } 75% { transform: rotate(2deg) scale(1.04); } } /* WISH : brand en rainbow shift */ body.theme-wish .brand { background: linear-gradient(90deg, #fa2a56, #2fb7ec, #ffcd00, #fa2a56); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: rc-rainbow 3s linear infinite; } @keyframes rc-rainbow { to { background-position: 300% 0; } } /* TEMU : badge -80% qui tourne sur le tee */ body.theme-temu .tee-wrap::after { content: "-80%"; position: absolute; top: 8px; right: -4px; background: var(--accent); color: #000; font-family: "Arial Black", sans-serif; font-weight: 900; font-size: 18px; padding: 0; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 5; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15); animation: rc-badge-spin 2.4s ease-in-out infinite; } @keyframes rc-badge-spin { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.12); } } /* ALIEXPRESS : tee qui shake subtilement */ body.theme-aliexpress .tee-wrap { animation: rc-ali-shake 4s ease-in-out infinite; } @keyframes rc-ali-shake { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-1.5deg); } 94% { transform: rotate(1.5deg); } 98% { transform: rotate(-0.8deg); } } /* ========================================================== Entry animation (à chaque applyTheme) ========================================================== */ .rc-enter > * { animation: rc-stage-fade 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } .rc-enter > *:nth-child(2) { animation-delay: 0.08s; } @keyframes rc-stage-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================== fx-polished : micro-animations pour les thèmes "pro" (Amazon, ASOS, Zalando, Vinted, SSENSE, Etsy) ========================================================== */ body.fx-polished nav a, body.fx-polished button, body.fx-polished .btn, body.fx-polished .price-tag, body.fx-polished .cross-links a { transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); } body.fx-polished .tee-wrap { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); animation: rc-tee-breath 5s ease-in-out infinite; } body.fx-polished .tee-wrap:hover { transform: scale(1.04); animation-play-state: paused; } @keyframes rc-tee-breath { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.012) translateY(-2px); } } body.fx-polished .drop-badge, body.fx-polished .design-name { animation: rc-text-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } body.fx-polished .design-name { animation-delay: 0.06s; } body.fx-polished .price { animation: rc-text-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; } @keyframes rc-text-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } body.fx-polished button.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); } body.fx-polished .mock-meta { animation: rc-text-up 0.5s ease 0.18s both; } /* Vinted : bouncy sur les boutons arrondis */ body.theme-vinted button:hover, body.theme-vinted button.primary:hover { transform: translateY(-2px) scale(1.02); } /* Amazon : smile swoosh s'étire au hover du brand */ body.theme-amazon .brand { transition: letter-spacing 0.3s ease; } body.theme-amazon .brand:hover { letter-spacing: 0.02em; } body.theme-amazon .brand::after { transition: border-color 0.3s ease; } body.theme-amazon .brand:hover::after { border-color: transparent #ff9900 #ff9900 transparent; filter: brightness(1.15); } /* SSENSE : letter-spacing glisse au hover */ body.theme-ssense .design-name, body.theme-ssense .drop-badge { transition: letter-spacing 0.4s ease; } body.theme-ssense .design-name:hover, body.theme-ssense .drop-badge:hover { letter-spacing: 0.3em; } /* Etsy : tee idle très doux */ body.theme-etsy .tee-wrap { animation-duration: 8s; } /* ========================================================== Tics visuels par DA — PROMO / BOUTONS (suite) ========================================================== */ /* TEMU & ALIEXPRESS & WISH : boutons pill, bandeau coloré agressif */ body.theme-temu button.primary, body.theme-aliexpress button.primary, body.theme-wish button.primary { border-radius: 999px; font-weight: 900; padding: 18px 24px; } body.theme-temu #top-banner, body.theme-aliexpress #top-banner, body.theme-wish #top-banner { background: var(--accent); color: #000; font-weight: 900; animation: rc-banner-shake 2.5s infinite; } @keyframes rc-banner-shake { 0%, 90%, 100% { transform: translateX(0); } 92% { transform: translateX(-2px); } 94% { transform: translateX(2px); } 96% { transform: translateX(-1px); } } /* AMAZON : bouton jaune-brun arrondi, bandeau navy */ body.theme-amazon button.primary { background: linear-gradient(#f7dfa5, #f0c14b); color: #111; border: 1px solid #a88734; border-radius: 100px; font-weight: 700; text-transform: none; letter-spacing: 0.02em; } body.theme-amazon #top-banner { background: #131921; color: #fff; border-bottom: 3px solid #ff9900; } /* ASOS : boutons sharp, typo hyper letter-spaced, bandeau fin noir */ body.theme-asos button.primary, body.theme-zalando button.primary { border-radius: 0; font-weight: 900; letter-spacing: 0.22em; padding: 22px; text-transform: uppercase; } body.theme-asos #top-banner, body.theme-zalando #top-banner { background: #000; color: #fff; font-weight: 700; } /* SHEIN : bandeau noir + accent rose, bouton rectangle */ body.theme-shein #top-banner { background: var(--accent); color: #000; font-weight: 900; } /* VINTED : boutons arrondis doux, bandeau teal pâle */ body.theme-vinted button, body.theme-vinted button.primary, body.theme-vinted .dice-btn { border-radius: 999px; } body.theme-vinted #top-banner { background: var(--accent); color: #fff; font-weight: 600; } /* EBAY : bandeau multicolore, bouton bleu arrondi */ body.theme-ebay button.primary { background: var(--fg); color: #fff; border-radius: 999px; font-weight: 700; } body.theme-ebay #top-banner { background: linear-gradient(90deg, #e53238 0 25%, #0064d2 25% 50%, #f5af02 50% 75%, #86b817 75% 100%); color: #fff; font-weight: 900; text-shadow: 0 1px 0 rgba(0,0,0,0.4); } /* WISH : ajout d'un sale burst derrière le prix (placé via ::after) */ body.theme-wish .price::before { content: "-85%"; display: inline-block; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 0.45em; padding: 4px 10px; margin-right: 10px; transform: rotate(-8deg); vertical-align: middle; } /* DEPOP : sobre, juste des touches */ body.theme-depop .drop-meta::before { content: "♡ "; } /* ETSY : police serif sur tout, bandeau warm */ body.theme-etsy, body.theme-etsy .drop-badge, body.theme-etsy .design-name { font-family: "Guardian Egyptian", Georgia, serif; } body.theme-etsy #top-banner { background: var(--accent); color: #fff; letter-spacing: 0.04em; text-transform: none; font-family: Georgia, serif; font-style: italic; } /* SSENSE : whitespace massif, caps ultra spaced */ body.theme-ssense main { padding-top: 120px; padding-bottom: 200px; } body.theme-ssense .drop-badge, body.theme-ssense .design-name, body.theme-ssense .brand { font-family: "Times New Roman", Georgia, serif; font-weight: 400; letter-spacing: 0.2em; } body.theme-ssense button.primary { border-radius: 0; font-size: 10px; letter-spacing: 0.3em; padding: 24px; font-weight: 400; } body.theme-ssense #top-banner { background: #fff; color: #000; border-bottom: 1px solid #000; letter-spacing: 0.4em; font-size: 10px; } /* ========================================================== LOGO SVG — overrides par DA (sticker = .cls-2, lettres+dés = .cls-1, ids = r/a/n/d/o/m/c/l/o-2/t/h/es) --rc-sil-color : couleur silhouette dynamique (= ancienne .cls-2) --rc-pip-color : couleur des pips de dés (doit contraster avec les dés) ========================================================== */ /* Variables logo par thème — silhouette + pip color choisies pour lisibilité */ body.theme-amazon { --rc-sil-color: #131921; --rc-pip-color: #131921; } body.theme-temu { --rc-sil-color: #ff6f1f; --rc-pip-color: #0b0b0b; } body.theme-shein { --rc-sil-color: #ffffff; --rc-pip-color: #000000; } body.theme-vinted { --rc-sil-color: #07bebe; --rc-pip-color: #07bebe; } body.theme-ebay { --rc-sil-color: #ffffff; --rc-pip-color: #ffffff; } body.theme-wish { --rc-sil-color: #fa2a56; --rc-pip-color: #fa2a56; } body.theme-ssense { --rc-sil-color: transparent; --rc-pip-color: #ffffff; } body.theme-winamax { --rc-sil-color: #0b0b0b; --rc-pip-color: #0b0b0b; } body.theme-betclic { --rc-sil-color: #ffffff; --rc-pip-color: #ffffff; } body.theme-pmu { --rc-sil-color: #003c78; --rc-pip-color: #003c78; } body.theme-unibet { --rc-sil-color: #14805e; --rc-pip-color: #ffffff; } body.theme-pokerstars { --rc-sil-color: #0a0a0a; --rc-pip-color: #ffffff; } body.theme-stake { --rc-sil-color: #1a2c38; --rc-pip-color: #1a2c38; } /* AMAZON : sticker navy, lettres blanches, dés orange swoosh */ /* TEMU : sticker orange, lettres blanches, dés jaune */ /* SHEIN : sticker blanc, lettres noires, dés pink */ /* VINTED : sticker teal, lettres blanches */ /* EBAY : sticker blanc, lettres 4-colors cycle, dés noirs */ body.theme-ebay .brand--logo #r, body.theme-ebay .brand--logo #o, body.theme-ebay .brand--logo #l { fill: #e53238; } body.theme-ebay .brand--logo #a, body.theme-ebay .brand--logo #m, body.theme-ebay .brand--logo #o-2 { fill: #0064d2; } body.theme-ebay .brand--logo #n, body.theme-ebay .brand--logo #c, body.theme-ebay .brand--logo #t { fill: #f5af02; } body.theme-ebay .brand--logo #d, body.theme-ebay .brand--logo #h, body.theme-ebay .brand--logo #es { fill: #86b817; } /* WISH : rainbow via hue-rotate */ body.theme-wish .brand--logo svg { animation: rc-logo-hue 4s linear infinite; } @keyframes rc-logo-hue { to { filter: hue-rotate(360deg); } } /* SSENSE : ultra minimal, sticker transparent, contours fins */ /* WINAMAX : sticker noir, lettres jaune fluo, dés cyan */ /* BETCLIC : sticker blanc, lettres orange-rouge, dés noirs */ /* PMU : sticker bleu nuit, lettres jaune, dés blancs */ /* UNIBET : sticker vert foncé, lettres blanches, dés orange */ /* POKERSTARS : sticker noir, lettres blanches, dés rouges (pique rouge) */ /* ★ clin d'œil poker : alterne les lettres rouge/noir façon cartes */ body.theme-pokerstars .brand--logo #r, body.theme-pokerstars .brand--logo #n, body.theme-pokerstars .brand--logo #o, body.theme-pokerstars .brand--logo #l, body.theme-pokerstars .brand--logo #t, body.theme-pokerstars .brand--logo #es { fill: #cf1624; } /* STAKE : sticker dark navy, lettres blanches, dés vert néon */ /* ========================================================== LOGO SVG — animations par DA ========================================================== */ /* SSENSE : minimal, on désactive tout */ body.theme-ssense .brand--logo svg path[id] { animation: none !important; } /* TEMU / WISH / WINAMAX / POKERSTARS : bob plus rapide, dés qui tournent */ body.theme-temu .brand--logo [id]:not([id^="dice"]), body.theme-wish .brand--logo [id]:not([id^="dice"]), body.theme-winamax .brand--logo [id]:not([id^="dice"]), body.theme-pokerstars .brand--logo [id]:not([id^="dice"]) { animation-duration: 1.4s !important; } body.theme-temu .brand--logo #dice-1, body.theme-temu .brand--logo #dice-2, body.theme-wish .brand--logo #dice-1, body.theme-wish .brand--logo #dice-2, body.theme-winamax .brand--logo #dice-1, body.theme-winamax .brand--logo #dice-2, body.theme-pokerstars .brand--logo #dice-1, body.theme-pokerstars .brand--logo #dice-2 { animation: rc-dice-spin 1.5s linear infinite !important; } /* PMU / STAKE : plus calme */ body.theme-pmu .brand--logo svg path[id], body.theme-stake .brand--logo svg path[id] { animation-duration: 4s !important; } /* === bouton dés flottant === */ .dice-btn { position: fixed; bottom: 20px; right: 20px; z-index: 500; width: 48px; height: 48px; padding: 0; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } .dice-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: rotate(12deg); } /* sur les thèmes paris/jeux la roulette occupe le coin bas-droit : on décale le dé */ #rc-roulette.active ~ .dice-btn { right: 144px; } .dice-btn .die { font-size: 22px; line-height: 1; }