/** * Vandeto Badges — styles front * Reskin non-destructif des badges AdForest (span.verified + .owner-status). * Tout est piloté par les classes posées sur (vsb-cert-*, vsb-status-*, vsb-anim-*) * et par les variables --vsb-* injectées inline. */ /* ===================================================================== VARIABLES DE REPLI ===================================================================== */ :root { --vsb-size: 1; --vsb-cert-c1: #22c55e; --vsb-cert-c2: #0e9f6e; --vsb-cert-check: #ffffff; --vsb-pro-c1: #ff1700; --vsb-pro-c2: #ff4d2e; --vsb-part-c1: #11151c; --vsb-part-c2: #2b3340; --vsb-status-text: #ffffff; --vsb-cert-d: calc(38px * var(--vsb-size)); } /* On masque l'ancien contenu déplacé (préserve le nœud + les listeners). */ .vsb-orig { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; pointer-events: none !important; } /* ===================================================================== BADGE CERTIFIÉ — base ===================================================================== */ .vsb-verified { position: relative; /* pilotée en inline par le JS pour préserver le placement AdForest */ display: inline-flex !important; align-items: center; justify-content: center; width: var(--vsb-cert-d) !important; height: var(--vsb-cert-d) !important; min-width: var(--vsb-cert-d); box-sizing: border-box !important; padding: 0 !important; margin: 0; background: none !important; border: 0 !important; border-radius: 999px; line-height: 1 !important; overflow: visible; vertical-align: middle; isolation: isolate; -webkit-font-smoothing: antialiased; } .vsb-verified .vsb-core { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: inherit; color: var(--vsb-cert-check); } .vsb-verified .vsb-core svg { width: 52%; height: 52%; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); } .vsb-verified .vsb-ring { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; } /* ---- Modèle SHIELD ---- */ .vsb-cert-shield .vsb-verified .vsb-core { background: linear-gradient(145deg, color-mix(in srgb, var(--vsb-cert-c1) 92%, #fff) 0%, var(--vsb-cert-c1) 45%, var(--vsb-cert-c2) 100%); border-radius: 46% 46% 46% 46% / 42% 42% 58% 58%; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(0, 0, 0, .18), 0 6px 14px -4px color-mix(in srgb, var(--vsb-cert-c2) 55%, transparent); } .vsb-cert-shield .vsb-verified .vsb-ring { border-radius: 46% 46% 46% 46% / 42% 42% 58% 58%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--vsb-cert-c1) 30%, transparent); } .vsb-cert-shield .vsb-verified .vsb-ring--2 { inset: -5px; border-radius: 46% 46% 46% 46% / 42% 42% 58% 58%; background: radial-gradient(closest-side, color-mix(in srgb, var(--vsb-cert-c1) 40%, transparent), transparent 78%); opacity: .55; } /* ---- Modèle ORBIT ---- */ .vsb-cert-orbit .vsb-verified .vsb-core { background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--vsb-cert-c1) 90%, #fff), var(--vsb-cert-c2)); box-shadow: inset 0 1px 2px rgba(255, 255, 255, .5), 0 5px 12px -3px color-mix(in srgb, var(--vsb-cert-c2) 55%, transparent); } .vsb-cert-orbit .vsb-verified .vsb-ring { inset: -3px; border: 1.5px dashed color-mix(in srgb, var(--vsb-cert-c1) 65%, transparent); } .vsb-cert-orbit .vsb-verified .vsb-ring--2 { inset: -3px; border: 0; } .vsb-cert-orbit .vsb-verified .vsb-ring--2::after { content: ""; position: absolute; top: -2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--vsb-cert-c1); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--vsb-cert-c1) 80%, transparent); transform-origin: 2.5px calc(var(--vsb-cert-d) / 2 + 5px); } /* ---- Modèle GEM (losange facetté) ---- */ .vsb-cert-gem .vsb-verified { border-radius: 10px; } .vsb-cert-gem .vsb-verified .vsb-core { border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--vsb-cert-c1) 96%, #fff) 0%, var(--vsb-cert-c1) 40%, var(--vsb-cert-c2) 100%); transform: rotate(45deg); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .22), 0 6px 14px -4px color-mix(in srgb, var(--vsb-cert-c2) 55%, transparent); overflow: hidden; } .vsb-cert-gem .vsb-verified .vsb-core svg { transform: rotate(-45deg); } .vsb-cert-gem .vsb-verified .vsb-ring, .vsb-cert-gem .vsb-verified .vsb-ring--2 { border-radius: 10px; transform: rotate(45deg); inset: -3px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--vsb-cert-c1) 35%, transparent); } /* ---- Modèle MINIMAL ---- */ .vsb-cert-minimal .vsb-verified .vsb-core { background: transparent; color: var(--vsb-cert-c2); border: 2px solid color-mix(in srgb, var(--vsb-cert-c1) 70%, transparent); box-shadow: none; transition: box-shadow .35s ease, transform .35s ease; } .vsb-cert-minimal .vsb-verified .vsb-core svg { filter: none; } .vsb-cert-minimal .vsb-verified:hover .vsb-core { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vsb-cert-c1) 18%, transparent); transform: translateY(-1px); } .vsb-cert-minimal .vsb-verified .vsb-ring, .vsb-cert-minimal .vsb-verified .vsb-ring--2 { display: none; } /* ---- Modèle HOLO ---- */ .vsb-cert-holo .vsb-verified .vsb-core { background: conic-gradient(from 0deg, var(--vsb-cert-c1), #7dd3fc, var(--vsb-cert-c2), #c084fc, var(--vsb-cert-c1)); background-size: 180% 180%; box-shadow: inset 0 1px 2px rgba(255, 255, 255, .6), 0 5px 14px -3px color-mix(in srgb, var(--vsb-cert-c1) 45%, transparent); } .vsb-cert-holo .vsb-verified .vsb-core::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .35), transparent 60%); } .vsb-cert-holo .vsb-verified .vsb-ring { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); } .vsb-cert-holo .vsb-verified .vsb-ring--2 { inset: -4px; background: radial-gradient(closest-side, color-mix(in srgb, var(--vsb-cert-c1) 35%, transparent), transparent 78%); opacity: .6; } /* ===================================================================== BADGE STATUT — base ===================================================================== */ .vsb-status { position: relative; /* pilotée en inline par le JS pour préserver le placement AdForest */ display: inline-flex !important; align-items: center; gap: calc(6px * var(--vsb-size)); padding: calc(6px * var(--vsb-size)) calc(13px * var(--vsb-size)) !important; font-size: calc(12px * var(--vsb-size)) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .2px; color: var(--vsb-status-text) !important; background: none !important; border: 0 !important; border-radius: 999px; text-transform: none !important; white-space: nowrap; vertical-align: middle; overflow: hidden; isolation: isolate; -webkit-font-smoothing: antialiased; } .vsb-status .vsb-label { position: relative; z-index: 2; } .vsb-status .vsb-dot { position: relative; z-index: 2; width: calc(7px * var(--vsb-size)); height: calc(7px * var(--vsb-size)); border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); flex: 0 0 auto; } /* Couleurs selon le type */ .vsb-status--pro { --vsb-s1: var(--vsb-pro-c1); --vsb-s2: var(--vsb-pro-c2); } .vsb-status--part { --vsb-s1: var(--vsb-part-c1); --vsb-s2: var(--vsb-part-c2); } /* ---- Modèle GLASS PILL ---- */ .vsb-status-pill .vsb-status { background: linear-gradient(135deg, color-mix(in srgb, var(--vsb-s1) 88%, transparent), color-mix(in srgb, var(--vsb-s2) 88%, transparent)) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22), inset 0 -2px 4px rgba(0, 0, 0, .18), 0 6px 16px -6px color-mix(in srgb, var(--vsb-s2) 60%, transparent); border: 1px solid rgba(255, 255, 255, .16) !important; } /* ---- Modèle GRADIENT TAG ---- */ .vsb-status-gradient .vsb-status { background: linear-gradient(90deg, var(--vsb-s1), var(--vsb-s2), var(--vsb-s1)) !important; background-size: 220% 100% !important; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--vsb-s2) 60%, transparent); } /* ---- Modèle OUTLINE LUXE ---- */ .vsb-status-outline .vsb-status { color: var(--vsb-s1) !important; background: color-mix(in srgb, var(--vsb-s1) 6%, transparent) !important; border: 1.5px solid transparent !important; background-clip: padding-box; } .vsb-status-outline .vsb-status::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, var(--vsb-s1), var(--vsb-s2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .vsb-status-outline .vsb-status .vsb-dot { background: var(--vsb-s1); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--vsb-s1) 70%, transparent); } /* ---- Modèle NEON ---- */ .vsb-status-neon .vsb-status { color: var(--vsb-status-text) !important; background: color-mix(in srgb, var(--vsb-s1) 22%, #0b0e13) !important; border: 1.5px solid var(--vsb-s1) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--vsb-s1) 40%, transparent), 0 0 14px -2px color-mix(in srgb, var(--vsb-s1) 70%, transparent), inset 0 0 10px -4px color-mix(in srgb, var(--vsb-s1) 60%, transparent); text-shadow: 0 0 6px color-mix(in srgb, var(--vsb-s1) 50%, transparent); } .vsb-status-neon .vsb-status .vsb-dot { box-shadow: 0 0 8px 1px color-mix(in srgb, var(--vsb-s1) 90%, transparent); } /* ===================================================================== DISPOSITION GROUPÉE — rangée unifiée (mode « group ») ===================================================================== */ .vsb-strip { display: flex !important; align-items: center; flex-wrap: wrap; gap: calc(10px * var(--vsb-size)); width: 100%; order: -1; margin: 0 0 12px 0; padding: 0; line-height: 1; } /* Dans la rangée, on annule tout placement absolu résiduel du thème. */ .vsb-strip .vsb-verified, .vsb-strip .vsb-status { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; float: none !important; margin: 0 !important; transform: none; } /* ===================================================================== ANIMATIONS (activées par classe globale) ===================================================================== */ /* HALO — auréole pulsée autour du badge certifié */ .vsb-anim-halo .vsb-verified .vsb-ring--2 { animation: vsb-halo 2.6s ease-in-out infinite; } @keyframes vsb-halo { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .8; transform: scale(1.12); } } /* En modèle orbit, le halo devient rotation du point orbital. */ .vsb-anim-halo.vsb-cert-orbit .vsb-verified .vsb-ring--2::after { animation: vsb-orbit 4.5s linear infinite; } @keyframes vsb-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* PULSE — pulsation douce du cœur / de la pastille */ .vsb-anim-pulse .vsb-verified .vsb-core { animation: vsb-pulse 2.4s ease-in-out infinite; } .vsb-anim-pulse .vsb-status .vsb-dot { animation: vsb-dot-pulse 1.8s ease-in-out infinite; } @keyframes vsb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .vsb-anim-pulse.vsb-cert-gem .vsb-verified .vsb-core { animation: vsb-pulse-gem 2.4s ease-in-out infinite; } @keyframes vsb-pulse-gem { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.05); } } @keyframes vsb-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } } /* SHEEN — reflet balayant */ .vsb-anim-sheen .vsb-verified .vsb-core::before, .vsb-anim-sheen .vsb-status::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 4; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: vsb-sheen 3.4s ease-in-out infinite; pointer-events: none; } .vsb-anim-sheen .vsb-status::after { z-index: 1; } @keyframes vsb-sheen { 0% { left: -60%; } 55%, 100% { left: 130%; } } /* Le sheen suit la rotation du losange en modèle gem. */ .vsb-anim-sheen.vsb-cert-gem .vsb-verified .vsb-core::before { transform: skewX(-18deg) rotate(-45deg); } /* GRADIENT (statut) — le tag gradient s'anime toujours si sheen off ; on lie l'anim de fond à pulse pour rester cohérent */ .vsb-status-gradient .vsb-status { animation: vsb-gradient-shift 4s linear infinite; } @keyframes vsb-gradient-shift { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } } .vsb-cert-holo .vsb-verified .vsb-core { animation: vsb-holo-spin 6s linear infinite; } @keyframes vsb-holo-spin { 0% { background-position: 0% 50%; } 100% { background-position: 180% 50%; } } /* FLOAT — léger flottement vertical */ .vsb-anim-float .vsb-verified, .vsb-anim-float .vsb-status { animation: vsb-float 3.2s ease-in-out infinite; } @keyframes vsb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* ===================================================================== ACCESSIBILITÉ / MOUVEMENT RÉDUIT ===================================================================== */ @media (prefers-reduced-motion: reduce) { .vsb-verified *, .vsb-status, .vsb-status * { animation: none !important; } } /* ===================================================================== COMPAT YELLOW PENCIL — on n'altère rien dans l'éditeur ===================================================================== */ .yp-yellow-pencil .vsb-verified, .yp-yellow-pencil .vsb-status { overflow: visible; }