/* ========================================================== STEVE BOSTON ACCESS — VERSION 2.0S GLOBAL ANIMATED TRIM ENGINE One renderer for every Animated Trim. Profile Rings remain a completely separate avatar-only layer. ========================================================== */ .access-trim-surface{ --access-trim-primary:#ff6a00; --access-trim-secondary:#ffbf42; --access-trim-highlight:#fff0b0; --access-trim-width:2px; --access-trim-radius:16px; --access-trim-speed:1.5s; --access-trim-intensity:.75; --access-trim-frame-image:none; position:relative; isolation:isolate; } /* The engine intentionally does not target avatar classes. */ .access-trim-surface .ap-avatar, .access-trim-surface .ap-avatar-wrap, .access-trim-surface .dm-avatar, .access-trim-surface .member-avatar, .access-trim-surface .network-avatar, .access-trim-surface .network-quick-avatar{ /* Profile Ring / legacy accent system remains authoritative. */ } .access-trim-surface::after{ content:""; position:absolute; inset:-1px; z-index:20; pointer-events:none; border-radius:inherit; padding:var(--access-trim-width); background: linear-gradient(110deg, var(--access-trim-primary), var(--access-trim-secondary), var(--access-trim-highlight), var(--access-trim-primary), var(--access-trim-secondary)); background-size:280% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:var(--access-trim-intensity); filter: drop-shadow(0 0 3px color-mix(in srgb,var(--access-trim-primary) 72%,transparent)) drop-shadow(0 0 8px color-mix(in srgb,var(--access-trim-secondary) 28%,transparent)); } /* Optional image-frame engine. Image is masked into a thin perimeter so artwork can never cover profile/content text. */ .access-trim-surface.access-trim-image::before{ content:""; position:absolute; inset:-2px; z-index:19; pointer-events:none; border-radius:inherit; background-image:var(--access-trim-frame-image); background-size:100% 100%; background-position:center; background-repeat:no-repeat; opacity:var(--access-trim-intensity); padding:calc(var(--access-trim-width) * 3); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter: drop-shadow(0 0 4px color-mix(in srgb,var(--access-trim-primary) 68%,transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--access-trim-secondary) 22%,transparent)); } /* Animation modes are generic. New trims select a mode in visual_config. */ .access-trim-surface.access-trim-flow::after{ animation:accessTrimFlow var(--access-trim-speed) linear infinite; } .access-trim-surface.access-trim-flicker::after, .access-trim-surface.access-trim-flicker.access-trim-image::before{ animation:accessTrimFlicker var(--access-trim-speed) ease-in-out infinite alternate; } .access-trim-surface.access-trim-pulse::after, .access-trim-surface.access-trim-pulse.access-trim-image::before{ animation:accessTrimPulse var(--access-trim-speed) ease-in-out infinite alternate; } .access-trim-surface.access-trim-flow.access-trim-image::before{ animation:accessTrimImageHeat var(--access-trim-speed) ease-in-out infinite alternate; } /* Pill/component targets. The engine can decorate these inside a full profile without putting Animated Trim art around the avatar. */ .access-trim-part{ --access-trim-radius:999px; position:relative!important; isolation:isolate; overflow:visible!important; } .access-trim-part::after{ content:""; position:absolute; inset:-1px; z-index:18; pointer-events:none; border-radius:inherit; padding:var(--access-trim-width,2px); background: linear-gradient(110deg, var(--access-trim-primary,#ff6a00), var(--access-trim-secondary,#ffbf42), var(--access-trim-highlight,#fff0b0), var(--access-trim-primary,#ff6a00)); background-size:280% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:var(--access-trim-intensity,.75); filter:drop-shadow(0 0 5px color-mix(in srgb,var(--access-trim-primary,#ff6a00) 38%,transparent)); } .access-trim-part.access-trim-flow::after{animation:accessTrimFlow var(--access-trim-speed,1.5s) linear infinite} .access-trim-part.access-trim-flicker::after{animation:accessTrimFlicker var(--access-trim-speed,1.5s) ease-in-out infinite alternate} .access-trim-part.access-trim-pulse::after{animation:accessTrimPulse var(--access-trim-speed,1.5s) ease-in-out infinite alternate} @keyframes accessTrimFlow{ to{background-position:280% 0} } @keyframes accessTrimFlicker{ 0%{opacity:calc(var(--access-trim-intensity) * .72);filter:brightness(.96)} 28%{opacity:var(--access-trim-intensity);filter:brightness(1.12)} 55%{opacity:calc(var(--access-trim-intensity) * .82);filter:brightness(1.01)} 100%{opacity:var(--access-trim-intensity);filter:brightness(1.18)} } @keyframes accessTrimPulse{ from{opacity:calc(var(--access-trim-intensity) * .58);filter:brightness(.95)} to{opacity:var(--access-trim-intensity);filter:brightness(1.18)} } @keyframes accessTrimImageHeat{ from{opacity:calc(var(--access-trim-intensity) * .72);filter:brightness(.96) saturate(1)} to{opacity:var(--access-trim-intensity);filter:brightness(1.11) saturate(1.14)} } @media(prefers-reduced-motion:reduce){ .access-trim-surface::before, .access-trim-surface::after, .access-trim-part::after{animation:none!important} } /* VERSION 2.0U — shape alignment + full profile coverage */ .access-trim-surface, .access-trim-part{ border-radius:inherit; } /* Trim hugs the exact existing component geometry instead of imposing a generic 16px shape. */ .access-trim-surface::after, .access-trim-surface.access-trim-image::before, .access-trim-part::after{ border-radius:inherit!important; } /* Cards/sections are not pills; preserve their original radius. */ .access-trim-card-part{ position:relative!important; isolation:isolate; overflow:visible!important; } .access-trim-card-part::after{ content:""; position:absolute; inset:-1px; z-index:18; pointer-events:none; border-radius:inherit; padding:var(--access-trim-width,2px); background:linear-gradient(110deg, var(--access-trim-primary,#ff6a00), var(--access-trim-secondary,#ffbf42), var(--access-trim-highlight,#fff0b0), var(--access-trim-primary,#ff6a00)); background-size:280% 100%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:var(--access-trim-intensity,.75); filter:drop-shadow(0 0 4px color-mix(in srgb,var(--access-trim-primary,#ff6a00) 34%,transparent)); } .access-trim-card-part.access-trim-flow::after{animation:accessTrimFlow var(--access-trim-speed,1.5s) linear infinite} .access-trim-card-part.access-trim-flicker::after{animation:accessTrimFlicker var(--access-trim-speed,1.5s) ease-in-out infinite alternate} .access-trim-card-part.access-trim-pulse::after{animation:accessTrimPulse var(--access-trim-speed,1.5s) ease-in-out infinite alternate} /* Full profile: trim inner sections and stat/button surfaces while leaving avatar/profile-ring cosmetic untouched. */ .ap-profile.access-trim-surface .ap-section, .ap-profile.access-trim-surface .access-discovery-stats{ overflow:visible!important; } /* ========================================================== VERSION 2.0AJ — ACCESS MATCHED TRIM PACK 01 Layered effects. Keeps the stabilized global trim geometry. Profile-picture rings remain a separate cosmetic layer. ========================================================== */ .access-trim-surface::before,.access-trim-part::before,.access-trim-card-part::before{ pointer-events:none;position:absolute;content:"";z-index:17;border-radius:inherit; } /* Black Diamond: faceted stones + sparse hard white catches. */ [data-access-trim-effect*="black-diamond"]::after{ background:repeating-linear-gradient(120deg,#050608 0 7px,#343943 7px 10px,#090a0d 10px 16px,#eef4ff 16px 17px,#11141a 17px 24px)!important; background-size:180% 100%!important;filter:drop-shadow(0 0 2px #fff8) drop-shadow(0 0 7px #79869a66)!important; } [data-access-trim-effect*="black-diamond"]::before{inset:-5px;background:radial-gradient(circle at 18% 8%,#fff 0 1px,transparent 2px),radial-gradient(circle at 78% 92%,#fff 0 1px,transparent 2px),radial-gradient(circle at 95% 22%,#dce9ff 0 1px,transparent 2px);opacity:.8;animation:accessDiamondTwinkle 2.4s steps(2,end) infinite} /* Ember: blended flame edge, embers and heat glow; no solid bar. */ [data-access-trim-effect*="ember"]::after{background:linear-gradient(100deg,transparent,#ff3b00,#ffd15c,#ff5a00,transparent,#ffb000,#ff2600,transparent)!important;background-size:320% 100%!important;filter:drop-shadow(0 0 4px #ff4b00) drop-shadow(0 0 10px #ff7a004d)!important} [data-access-trim-effect*="ember"]::before{inset:-8px;background:radial-gradient(circle at 12% 20%,#ffb000 0 1px,transparent 2px),radial-gradient(circle at 82% 72%,#ff5a00 0 1px,transparent 2px),radial-gradient(circle at 54% 8%,#ffd36a 0 1px,transparent 2px);filter:blur(.2px);animation:accessEmberLift 1.8s ease-in-out infinite alternate} /* Mist: border dissolves into drifting vapor. */ [data-access-trim-effect*="mist"]::after{background:linear-gradient(100deg,transparent,#c9dded99,#fff,#8ba9c4aa,transparent,#e8f5ff,transparent)!important;background-size:300% 100%!important;filter:blur(.35px) drop-shadow(0 0 7px #d8edff99)!important} [data-access-trim-effect*="mist"]::before{inset:-8px;background:radial-gradient(ellipse at 20% 0,#d9edff55,transparent 35%),radial-gradient(ellipse at 80% 100%,#b9d7ee44,transparent 38%);filter:blur(6px);animation:accessMistDrift 4.2s ease-in-out infinite alternate} /* Neon Energy: electric purple/blue arcs. */ [data-access-trim-effect*="neon-energy"]::after{background:linear-gradient(95deg,#6d32ff,#ff35e8,#42d8ff,#8b4cff,#fff,#5b27ff)!important;background-size:360% 100%!important;filter:drop-shadow(0 0 3px #b34cff) drop-shadow(0 0 9px #463cff88)!important} [data-access-trim-effect*="neon-energy"]::before{inset:-4px;border:1px solid #9b4dff88;box-shadow:0 0 9px #7a35ff88,0 0 16px #2f8cff44;animation:accessElectricJitter 1.1s steps(3,end) infinite} /* Gold Luxe: engraved-looking metallic highlights, restrained/static. */ [data-access-trim-effect*="gold-luxe"]::after{background:repeating-linear-gradient(115deg,#5e3c05 0 8px,#f5c84e 8px 10px,#8b5a08 10px 16px,#fff0a6 16px 17px,#a66d0b 17px 24px)!important;background-size:100% 100%!important;filter:drop-shadow(0 0 4px #d99c294d)!important;animation:none!important} /* Frost: crystalline shards and cold halo. */ [data-access-trim-effect*="frost"]::after{background:repeating-linear-gradient(125deg,#76d9ff 0 5px,#e9fbff 5px 7px,#9feaff 7px 12px,#fff 12px 13px,#56bfe8 13px 20px)!important;filter:drop-shadow(0 0 4px #a8eaff) drop-shadow(0 0 9px #67cfff55)!important} [data-access-trim-effect*="frost"]::before{inset:-5px;background:radial-gradient(circle at 10% 10%,#fff 0 1px,transparent 2px),radial-gradient(circle at 72% 90%,#d8f7ff 0 1px,transparent 2px);animation:accessDiamondTwinkle 3s steps(2,end) infinite} /* Toxic: irregular acid/slime glow + bubbles. */ [data-access-trim-effect*="toxic"]::after{background:linear-gradient(100deg,#203800,#a8ff00,#e2ff3b,#57d400,#111f00,#baff16)!important;background-size:300% 100%!important;filter:drop-shadow(0 0 4px #8dff00) drop-shadow(0 0 10px #79ff004d)!important} [data-access-trim-effect*="toxic"]::before{inset:-7px;background:radial-gradient(circle at 14% 15%,#caff3b 0 2px,transparent 3px),radial-gradient(circle at 74% 85%,#80ff00 0 2px,transparent 3px),radial-gradient(circle at 92% 32%,#d9ff58 0 1px,transparent 2px);animation:accessToxicBubble 2.2s ease-in-out infinite alternate} /* Rose Gold: polished metal with gentle sparkle. */ [data-access-trim-effect*="rose-gold"]::after{background:linear-gradient(110deg,#6c342f,#e6a091,#fff0e8,#b95f54,#f2b7a7,#7d3c35)!important;background-size:260% 100%!important;filter:drop-shadow(0 0 4px #e99c8d66)!important} /* Ocean Wave: flowing cyan water, bubbles. */ [data-access-trim-effect*="ocean-wave"]::after{background:linear-gradient(95deg,#006e87,#24e2ff,#b8f7ff,#009cc1,#41ddff,#005b79)!important;background-size:360% 100%!important;filter:drop-shadow(0 0 4px #27dfff) drop-shadow(0 0 9px #00a8d455)!important} [data-access-trim-effect*="ocean-wave"]::before{inset:-6px;background:radial-gradient(circle at 20% 10%,#b9f8ff 0 1px,transparent 2px),radial-gradient(circle at 75% 88%,#70eaff 0 2px,transparent 3px);animation:accessOceanBubble 2.8s ease-in-out infinite alternate} /* Purple Haze: no hard solid rail; layered purple vapor. */ [data-access-trim-effect*="purple-haze"]::after{background:linear-gradient(100deg,transparent,#6d22c9aa,#d05cff,#8c32e8aa,transparent,#b548ff,transparent)!important;background-size:330% 100%!important;filter:blur(.25px) drop-shadow(0 0 6px #a43cffaa)!important} [data-access-trim-effect*="purple-haze"]::before{inset:-9px;background:radial-gradient(ellipse at 20% 0,#a83cff66,transparent 34%),radial-gradient(ellipse at 80% 100%,#6822bb55,transparent 38%);filter:blur(7px);animation:accessMistDrift 3.5s ease-in-out infinite alternate} @keyframes accessDiamondTwinkle{0%,45%{opacity:.25}50%,55%{opacity:1}60%,100%{opacity:.35}} @keyframes accessEmberLift{from{transform:translateY(2px);opacity:.35}to{transform:translateY(-3px);opacity:.9}} @keyframes accessMistDrift{from{transform:translateX(-2px) scale(.99);opacity:.35}to{transform:translateX(3px) scale(1.01);opacity:.75}} @keyframes accessElectricJitter{0%,100%{opacity:.35}45%{opacity:.95}48%{opacity:.2}52%{opacity:.9}} @keyframes accessToxicBubble{from{transform:translateY(2px);opacity:.4}to{transform:translateY(-3px);opacity:.9}} @keyframes accessOceanBubble{from{transform:translateY(2px);opacity:.3}to{transform:translateY(-2px);opacity:.8}} @media(prefers-reduced-motion:reduce){.access-trim-surface::before,.access-trim-part::before,.access-trim-card-part::before{animation:none!important}} /* ========================================================== STEVE BOSTON ACCESS — VERSION 2.0AK CANONICAL MULTI-LAYER ANIMATED TRIM ENGINE GOALS - One ACCESS trim renderer everywhere. - Equipped ACCESS trim replaces legacy/default accent trimming. - Multiple visual layers: energy rail, atmosphere, particles. - Softer/blended treatments where appropriate. - Profile photo + Profile Ring are NEVER touched by trim effects. ========================================================== */ .access-trim-surface, .access-trim-part, .access-trim-card-part{ --access-trim-softness:.55; --access-trim-particle-opacity:.72; } /* Remove legacy/default accent outlines once an ACCESS trim is active. */ [data-access-animated-trim]{ border-color:transparent!important; outline-color:transparent!important; } [data-access-animated-trim] .ap-section, [data-access-animated-trim] .access-discovery-stats, [data-access-animated-trim] .access-discovery-stat, [data-access-animated-trim] .discover-btn, [data-access-animated-trim] .dm-btn, [data-access-animated-trim] .member-actions button, [data-access-animated-trim] .member-actions a, [data-access-animated-trim] .network-request-actions button, [data-access-animated-trim] .mbx-skin-control{ border-color:transparent!important; outline-color:transparent!important; } /* Never inherit trim FX into the avatar / Profile Ring system. */ .ap-avatar-wrap, .ap-avatar, .dm-avatar, .member-avatar, .network-avatar, .network-quick-avatar, .access-ring-anchor, .access-profile-ring-layer{ --access-trim-primary:initial; --access-trim-secondary:initial; --access-trim-highlight:initial; } [data-access-animated-trim] :is( .ap-avatar-wrap,.ap-avatar,.dm-avatar,.member-avatar, .network-avatar,.network-quick-avatar,.access-ring-anchor, .access-profile-ring-layer )::before, [data-access-animated-trim] :is( .ap-avatar-wrap,.ap-avatar,.dm-avatar,.member-avatar, .network-avatar,.network-quick-avatar,.access-ring-anchor, .access-profile-ring-layer )::after{ content:unset!important; } /* The actual reusable FX stack. */ .access-trim-fx{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; overflow:visible; z-index:16; } .access-trim-fx > i{ position:absolute; inset:0; display:block; border-radius:inherit; pointer-events:none; } .access-trim-fx .access-trim-fx-atmosphere{z-index:1} .access-trim-fx .access-trim-fx-energy{z-index:2} .access-trim-fx .access-trim-fx-particles{z-index:3} /* Energy rail: hollow border so it cannot cover content. */ .access-trim-fx-energy{ inset:-1px!important; padding:var(--access-trim-width,2px); background:linear-gradient( 110deg, var(--access-trim-primary), var(--access-trim-secondary), var(--access-trim-highlight), var(--access-trim-primary) ); background-size:320% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:var(--access-trim-intensity,.8); filter:drop-shadow(0 0 4px color-mix(in srgb,var(--access-trim-primary) 54%,transparent)); } /* Atmosphere layer deliberately extends outward and fades. */ .access-trim-fx-atmosphere{ inset:-8px!important; opacity:var(--access-trim-softness,.55); filter:blur(7px); } /* Particle layer. */ .access-trim-fx-particles{ inset:-9px!important; opacity:var(--access-trim-particle-opacity,.72); } /* ---------- EMBER ---------- */ [data-access-trim-effect*="ember"] .access-trim-fx-energy{ background: linear-gradient(100deg, transparent 0 4%, #ff2400 7%, #ff7a00 11%, #ffe07a 14%, #ff3b00 19%, transparent 27%, #ff9a00 36%, #ffd05a 42%, #ff3100 49%, transparent 58%, #ff8a00 69%, #fff0a0 74%, #ff2600 81%, transparent 92%); background-size:340% 100%; filter: drop-shadow(0 0 3px rgba(255,55,0,.95)) drop-shadow(0 0 9px rgba(255,105,0,.55)); animation:accessTrimEnergyFlow 2.2s linear infinite; } [data-access-trim-effect*="ember"] .access-trim-fx-atmosphere{ background: radial-gradient(ellipse at 8% 20%,rgba(255,70,0,.38),transparent 28%), radial-gradient(ellipse at 88% 30%,rgba(255,139,0,.34),transparent 25%), radial-gradient(ellipse at 40% 100%,rgba(255,43,0,.31),transparent 30%); animation:accessTrimHeatBreathe 1.5s ease-in-out infinite alternate; } [data-access-trim-effect*="ember"] .access-trim-fx-particles{ background: radial-gradient(circle at 7% 86%,#ffd977 0 1.2px,transparent 2px), radial-gradient(circle at 18% 22%,#ff8b00 0 1.3px,transparent 2.2px), radial-gradient(circle at 48% 94%,#fff1aa 0 1px,transparent 1.8px), radial-gradient(circle at 77% 13%,#ff5b00 0 1.4px,transparent 2.3px), radial-gradient(circle at 96% 68%,#ffc43b 0 1.1px,transparent 1.9px); filter:drop-shadow(0 0 4px #ff6a00); animation:accessTrimParticleRise 1.9s ease-out infinite; } /* ---------- MIST / PURPLE HAZE ---------- */ [data-access-trim-effect*="mist"] .access-trim-fx-energy, [data-access-trim-effect*="purple-haze"] .access-trim-fx-energy{ opacity:.50; filter:blur(.25px) drop-shadow(0 0 6px color-mix(in srgb,var(--access-trim-primary) 52%,transparent)); animation:accessTrimEnergyFlow 4.1s linear infinite; } [data-access-trim-effect*="mist"] .access-trim-fx-atmosphere{ background: radial-gradient(ellipse at 8% 20%,rgba(228,244,255,.42),transparent 34%), radial-gradient(ellipse at 87% 35%,rgba(166,204,232,.33),transparent 31%), radial-gradient(ellipse at 45% 95%,rgba(223,240,255,.27),transparent 35%); animation:accessTrimMistDrift 4.7s ease-in-out infinite alternate; } [data-access-trim-effect*="purple-haze"] .access-trim-fx-atmosphere{ background: radial-gradient(ellipse at 10% 25%,rgba(181,70,255,.43),transparent 35%), radial-gradient(ellipse at 88% 35%,rgba(91,32,188,.38),transparent 32%), radial-gradient(ellipse at 50% 100%,rgba(207,84,255,.30),transparent 36%); animation:accessTrimMistDrift 3.9s ease-in-out infinite alternate; } [data-access-trim-effect*="mist"] .access-trim-fx-particles, [data-access-trim-effect*="purple-haze"] .access-trim-fx-particles{ background: radial-gradient(circle at 14% 18%,rgba(255,255,255,.72) 0 1px,transparent 2px), radial-gradient(circle at 72% 90%,rgba(255,255,255,.55) 0 1px,transparent 2px), radial-gradient(circle at 91% 27%,rgba(255,255,255,.50) 0 1px,transparent 2px); animation:accessTrimSparkFade 3s ease-in-out infinite alternate; } /* ---------- NEON ENERGY ---------- */ [data-access-trim-effect*="neon-energy"] .access-trim-fx-energy{ background:linear-gradient(100deg,#5a22ff,#ff39e8,#4cdfff,#813cff,#fff,#5d2cff); background-size:380% 100%; filter: drop-shadow(0 0 3px #b842ff) drop-shadow(0 0 9px rgba(78,77,255,.62)); animation:accessTrimEnergyFlow 1.65s linear infinite; } [data-access-trim-effect*="neon-energy"] .access-trim-fx-atmosphere{ inset:-5px!important; background: linear-gradient(90deg,transparent,rgba(136,48,255,.28),transparent), linear-gradient(0deg,transparent,rgba(44,195,255,.20),transparent); filter:blur(5px); animation:accessTrimElectricPulse 1.15s steps(3,end) infinite; } [data-access-trim-effect*="neon-energy"] .access-trim-fx-particles{ background: radial-gradient(circle at 8% 15%,#fff 0 1px,transparent 1.8px), radial-gradient(circle at 82% 12%,#6ce7ff 0 1px,transparent 1.8px), radial-gradient(circle at 94% 78%,#dc72ff 0 1px,transparent 1.8px), radial-gradient(circle at 28% 93%,#fff 0 1px,transparent 1.8px); animation:accessTrimSparkFade 1.2s steps(2,end) infinite; } /* ---------- FROST ---------- */ [data-access-trim-effect*="frost"] .access-trim-fx-energy{ background: repeating-linear-gradient(125deg,#70d9ff 0 5px,#effdff 5px 7px,#a9efff 7px 12px,#fff 12px 13px,#5dbfe6 13px 20px); filter: drop-shadow(0 0 4px #b8efff) drop-shadow(0 0 9px rgba(83,194,255,.48)); animation:accessTrimIceShift 2.4s linear infinite; } [data-access-trim-effect*="frost"] .access-trim-fx-atmosphere{ background: radial-gradient(ellipse at 0 50%,rgba(160,229,255,.28),transparent 28%), radial-gradient(ellipse at 100% 45%,rgba(216,249,255,.30),transparent 27%); animation:accessTrimIceBreath 2.8s ease-in-out infinite alternate; } [data-access-trim-effect*="frost"] .access-trim-fx-particles{ background: radial-gradient(circle at 10% 12%,#fff 0 1.1px,transparent 2px), radial-gradient(circle at 78% 91%,#dff9ff 0 1px,transparent 2px), radial-gradient(circle at 92% 22%,#a9eaff 0 1.2px,transparent 2.1px); animation:accessTrimSparkFade 2.5s steps(2,end) infinite; } /* ---------- TOXIC ---------- */ [data-access-trim-effect*="toxic"] .access-trim-fx-energy{ opacity:.74; background:linear-gradient(100deg, transparent,#648f00,#c7ff21,#7dff00,#eaff52,#4ac900,transparent,#b6ff15); background-size:330% 100%; filter: blur(.15px) drop-shadow(0 0 4px rgba(142,255,0,.92)) drop-shadow(0 0 10px rgba(101,255,0,.42)); animation:accessTrimEnergyFlow 2.6s linear infinite; } [data-access-trim-effect*="toxic"] .access-trim-fx-atmosphere{ inset:-11px!important; background: radial-gradient(ellipse at 12% 25%,rgba(178,255,29,.34),transparent 33%), radial-gradient(ellipse at 88% 38%,rgba(58,255,94,.30),transparent 31%), radial-gradient(ellipse at 48% 100%,rgba(141,255,20,.28),transparent 34%); filter:blur(8px); animation:accessTrimToxicMist 3.4s ease-in-out infinite alternate; } [data-access-trim-effect*="toxic"] .access-trim-fx-particles{ background: radial-gradient(circle at 12% 16%,rgba(210,255,70,.92) 0 1.8px,transparent 2.8px), radial-gradient(circle at 75% 10%,rgba(98,255,112,.82) 0 1.3px,transparent 2.3px), radial-gradient(circle at 93% 72%,rgba(194,255,55,.90) 0 1.6px,transparent 2.6px), radial-gradient(circle at 29% 94%,rgba(91,255,103,.82) 0 1.4px,transparent 2.4px); filter:drop-shadow(0 0 5px rgba(130,255,24,.64)); animation:accessTrimToxicBubble 2.4s ease-in-out infinite; } /* ---------- OCEAN WAVE ---------- */ [data-access-trim-effect*="ocean-wave"] .access-trim-fx-energy{ opacity:.70; background:linear-gradient(95deg,transparent,#007e9e,#35e7ff,#c6fbff,#00a9c9,#44e5ff,transparent); background-size:380% 100%; filter:drop-shadow(0 0 5px rgba(35,223,255,.78)); animation:accessTrimEnergyFlow 3s linear infinite; } [data-access-trim-effect*="ocean-wave"] .access-trim-fx-atmosphere{ background: radial-gradient(ellipse at 10% 40%,rgba(18,190,225,.30),transparent 32%), radial-gradient(ellipse at 90% 60%,rgba(101,230,255,.25),transparent 30%); animation:accessTrimOceanSwell 3.2s ease-in-out infinite alternate; } [data-access-trim-effect*="ocean-wave"] .access-trim-fx-particles{ background: radial-gradient(circle at 14% 18%,#c7fbff 0 1.1px,transparent 2px), radial-gradient(circle at 82% 86%,#78efff 0 1.5px,transparent 2.5px), radial-gradient(circle at 92% 30%,#a9f6ff 0 1px,transparent 1.9px); animation:accessTrimToxicBubble 3.1s ease-in-out infinite; } /* ---------- PRISM SHIFT compatibility ---------- */ [data-access-trim-effect*="prism"] .access-trim-fx-energy{ background:linear-gradient(95deg,#ff4f92,#ffad4f,#ffe45f,#7fff8a,#5fd8ff,#786cff,#cf5fff,#ff4fb3); background-size:420% 100%; filter:drop-shadow(0 0 6px rgba(188,87,255,.65)); animation:accessTrimEnergyFlow 2.8s linear infinite; } [data-access-trim-effect*="prism"] .access-trim-fx-particles{ background: radial-gradient(circle at 9% 18%,#fff 0 1px,transparent 2px), radial-gradient(circle at 78% 12%,#fff2a9 0 1px,transparent 2px), radial-gradient(circle at 94% 75%,#b9f7ff 0 1px,transparent 2px), radial-gradient(circle at 27% 92%,#f5c0ff 0 1px,transparent 2px); filter:drop-shadow(0 0 5px #fff); animation:accessTrimPrismStars 1.55s ease-in-out infinite alternate; } /* ---------- SOLID / PREMIUM TRIMS ---------- */ /* Keep Black Diamond, Gold Luxe and Rose Gold more structured. */ [data-access-trim-effect*="black-diamond"] .access-trim-fx-atmosphere, [data-access-trim-effect*="gold-luxe"] .access-trim-fx-atmosphere, [data-access-trim-effect*="rose-gold"] .access-trim-fx-atmosphere{ opacity:.20; filter:blur(4px); } [data-access-trim-effect*="black-diamond"] .access-trim-fx-energy{ background:repeating-linear-gradient(120deg,#030405 0 7px,#303641 7px 10px,#08090c 10px 15px,#eef4ff 15px 17px,#101217 17px 24px); background-size:180% 100%; filter:drop-shadow(0 0 2px rgba(255,255,255,.65)); animation:accessTrimMetalShimmer 4s linear infinite; } [data-access-trim-effect*="gold-luxe"] .access-trim-fx-energy{ background:repeating-linear-gradient(115deg,#604006 0 8px,#f5c84e 8px 10px,#90610b 10px 16px,#fff0a6 16px 17px,#aa710d 17px 24px); filter:drop-shadow(0 0 4px rgba(218,157,41,.35)); animation:none; } [data-access-trim-effect*="rose-gold"] .access-trim-fx-energy{ background:linear-gradient(110deg,#6c342f,#e6a091,#fff0e8,#b95f54,#f2b7a7,#7d3c35); background-size:260% 100%; filter:drop-shadow(0 0 4px rgba(233,156,141,.38)); animation:accessTrimMetalShimmer 5s linear infinite; } /* Generic keyframes */ @keyframes accessTrimEnergyFlow{to{background-position:320% 0}} @keyframes accessTrimHeatBreathe{from{transform:scale(.985);opacity:.30}to{transform:scale(1.035);opacity:.74}} @keyframes accessTrimParticleRise{0%{transform:translateY(5px);opacity:.18}50%{opacity:1}100%{transform:translateY(-8px);opacity:0}} @keyframes accessTrimMistDrift{from{transform:translate(-3px,2px) scale(.99);opacity:.32}to{transform:translate(4px,-2px) scale(1.035);opacity:.72}} @keyframes accessTrimSparkFade{from{opacity:.20;transform:scale(.96)}to{opacity:.95;transform:scale(1.05)}} @keyframes accessTrimElectricPulse{0%,100%{opacity:.25}45%{opacity:.90}48%{opacity:.12}52%{opacity:.95}} @keyframes accessTrimIceShift{to{background-position:180px 0}} @keyframes accessTrimIceBreath{from{opacity:.22;transform:scale(.98)}to{opacity:.56;transform:scale(1.03)}} @keyframes accessTrimToxicMist{from{transform:translate(-3px,3px) scale(.97);opacity:.30}to{transform:translate(3px,-3px) scale(1.06);opacity:.68}} @keyframes accessTrimToxicBubble{0%,100%{transform:translateY(4px);opacity:.28}50%{transform:translateY(-5px);opacity:.88}} @keyframes accessTrimOceanSwell{from{transform:translateX(-3px) scale(.99);opacity:.25}to{transform:translateX(3px) scale(1.04);opacity:.60}} @keyframes accessTrimPrismStars{from{opacity:.18;filter:brightness(.9)}to{opacity:1;filter:brightness(1.45)}} @keyframes accessTrimMetalShimmer{to{background-position:180% 0}} @media(prefers-reduced-motion:reduce){ .access-trim-fx > i{animation:none!important} } /* ========================================================== STEVE BOSTON ACCESS — VERSION 2.0AL CANONICAL SITE-WIDE TRIM RENDERER The same equipped trim recipe is rendered everywhere. Only the target surface geometry changes (size/radius). Default/legacy accent borders are suppressed when a trim is active. Profile Rings / avatars remain a separate system. ========================================================== */ .access-canonical-trim-host{ position:relative!important; isolation:isolate; overflow:visible!important; } .access-canonical-trim-layer{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:30; overflow:visible; } .access-canonical-trim-layer > span{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; } .access-canonical-trim-layer .access-canonical-trim-atmosphere{z-index:1} .access-canonical-trim-layer .access-canonical-trim-energy{z-index:2} .access-canonical-trim-layer .access-canonical-trim-particles{z-index:3} /* Always hollow — never covers the UI surface. */ .access-canonical-trim-energy{ inset:-1px!important; padding:var(--access-trim-width,2px); background:linear-gradient( 110deg, var(--access-trim-primary,#7f5cff), var(--access-trim-secondary,#4ce7ff), var(--access-trim-highlight,#ffffff), var(--access-trim-primary,#7f5cff) ); background-size:320% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:var(--access-trim-intensity,.82); filter:drop-shadow(0 0 var(--access-trim-glow,5px) color-mix(in srgb,var(--access-trim-primary,#7f5cff) 55%,transparent)); } .access-canonical-trim-atmosphere{ inset:calc(var(--access-trim-atmosphere-gap,8px) * -1)!important; opacity:var(--access-trim-softness,.55); filter:blur(var(--access-trim-blur,7px)); } .access-canonical-trim-particles{ inset:calc(var(--access-trim-particle-gap,10px) * -1)!important; opacity:var(--access-trim-particle-opacity,.72); } /* When canonical trim is active, remove legacy/default accent trim visually. */ [data-access-canonical-trim]{ border-color:transparent!important; outline-color:transparent!important; } [data-access-canonical-trim]::before, [data-access-canonical-trim]::after{ border-color:transparent!important; } /* Never apply to profile ring/avatar system. */ .ap-avatar-wrap, .ap-avatar, .dm-avatar, .member-avatar, .network-avatar, .network-quick-avatar, .access-ring-anchor, .access-profile-ring-layer{ --access-trim-width:0px!important; } /* EFFECT RECIPES — same on every surface */ /* Ember */ [data-access-trim-effect="ember"] .access-canonical-trim-energy{ background:linear-gradient(100deg, transparent 0 4%,#ff2400 7%,#ff7a00 11%,#ffe07a 14%,#ff3b00 19%, transparent 27%,#ff9a00 36%,#ffd05a 42%,#ff3100 49%,transparent 58%, #ff8a00 69%,#fff0a0 74%,#ff2600 81%,transparent 92%); background-size:340% 100%; filter:drop-shadow(0 0 3px rgba(255,55,0,.95)) drop-shadow(0 0 9px rgba(255,105,0,.55)); animation:accessCanonicalTrimFlow 2.2s linear infinite; } [data-access-trim-effect="ember"] .access-canonical-trim-atmosphere{ background: radial-gradient(ellipse at 8% 20%,rgba(255,70,0,.38),transparent 28%), radial-gradient(ellipse at 88% 30%,rgba(255,139,0,.34),transparent 25%), radial-gradient(ellipse at 40% 100%,rgba(255,43,0,.31),transparent 30%); animation:accessCanonicalTrimHeat 1.5s ease-in-out infinite alternate; } [data-access-trim-effect="ember"] .access-canonical-trim-particles{ background: radial-gradient(circle at 7% 86%,#ffd977 0 1.2px,transparent 2px), radial-gradient(circle at 18% 22%,#ff8b00 0 1.3px,transparent 2.2px), radial-gradient(circle at 48% 94%,#fff1aa 0 1px,transparent 1.8px), radial-gradient(circle at 77% 13%,#ff5b00 0 1.4px,transparent 2.3px), radial-gradient(circle at 96% 68%,#ffc43b 0 1.1px,transparent 1.9px); filter:drop-shadow(0 0 4px #ff6a00); animation:accessCanonicalTrimRise 1.9s ease-out infinite; } /* Mist */ [data-access-trim-effect="mist"] .access-canonical-trim-energy{ opacity:.48; animation:accessCanonicalTrimFlow 4.2s linear infinite; } [data-access-trim-effect="mist"] .access-canonical-trim-atmosphere{ background: radial-gradient(ellipse at 8% 20%,rgba(228,244,255,.42),transparent 34%), radial-gradient(ellipse at 87% 35%,rgba(166,204,232,.33),transparent 31%), radial-gradient(ellipse at 45% 95%,rgba(223,240,255,.27),transparent 35%); animation:accessCanonicalTrimMist 4.7s ease-in-out infinite alternate; } [data-access-trim-effect="mist"] .access-canonical-trim-particles{ background: radial-gradient(circle at 14% 18%,rgba(255,255,255,.72) 0 1px,transparent 2px), radial-gradient(circle at 72% 90%,rgba(255,255,255,.55) 0 1px,transparent 2px), radial-gradient(circle at 91% 27%,rgba(255,255,255,.50) 0 1px,transparent 2px); animation:accessCanonicalTrimSpark 3s ease-in-out infinite alternate; } /* Neon Energy */ [data-access-trim-effect="neon-energy"] .access-canonical-trim-energy{ background:linear-gradient(100deg,#5a22ff,#ff39e8,#4cdfff,#813cff,#fff,#5d2cff); background-size:380% 100%; filter:drop-shadow(0 0 3px #b842ff) drop-shadow(0 0 9px rgba(78,77,255,.62)); animation:accessCanonicalTrimFlow 1.65s linear infinite; } [data-access-trim-effect="neon-energy"] .access-canonical-trim-atmosphere{ background: linear-gradient(90deg,transparent,rgba(136,48,255,.28),transparent), linear-gradient(0deg,transparent,rgba(44,195,255,.20),transparent); animation:accessCanonicalTrimElectric 1.15s steps(3,end) infinite; } [data-access-trim-effect="neon-energy"] .access-canonical-trim-particles{ background: radial-gradient(circle at 8% 15%,#fff 0 1px,transparent 1.8px), radial-gradient(circle at 82% 12%,#6ce7ff 0 1px,transparent 1.8px), radial-gradient(circle at 94% 78%,#dc72ff 0 1px,transparent 1.8px), radial-gradient(circle at 28% 93%,#fff 0 1px,transparent 1.8px); animation:accessCanonicalTrimSpark 1.2s steps(2,end) infinite; } /* Frost */ [data-access-trim-effect="frost"] .access-canonical-trim-energy{ background:repeating-linear-gradient(125deg, #70d9ff 0 5px,#effdff 5px 7px,#a9efff 7px 12px,#fff 12px 13px,#5dbfe6 13px 20px); filter:drop-shadow(0 0 4px #b8efff) drop-shadow(0 0 9px rgba(83,194,255,.48)); animation:accessCanonicalTrimIce 2.4s linear infinite; } [data-access-trim-effect="frost"] .access-canonical-trim-atmosphere{ background: radial-gradient(ellipse at 0 50%,rgba(160,229,255,.28),transparent 28%), radial-gradient(ellipse at 100% 45%,rgba(216,249,255,.30),transparent 27%); animation:accessCanonicalTrimIceBreath 2.8s ease-in-out infinite alternate; } [data-access-trim-effect="frost"] .access-canonical-trim-particles{ background: radial-gradient(circle at 10% 12%,#fff 0 1.1px,transparent 2px), radial-gradient(circle at 78% 91%,#dff9ff 0 1px,transparent 2px), radial-gradient(circle at 92% 22%,#a9eaff 0 1.2px,transparent 2.1px); animation:accessCanonicalTrimSpark 2.5s steps(2,end) infinite; } /* Toxic */ [data-access-trim-effect="toxic"] .access-canonical-trim-energy{ opacity:.72; background:linear-gradient(100deg, transparent,#648f00,#c7ff21,#7dff00,#eaff52,#4ac900,transparent,#b6ff15); background-size:330% 100%; filter:blur(.15px) drop-shadow(0 0 4px rgba(142,255,0,.92)) drop-shadow(0 0 10px rgba(101,255,0,.42)); animation:accessCanonicalTrimFlow 2.6s linear infinite; } [data-access-trim-effect="toxic"] .access-canonical-trim-atmosphere{ background: radial-gradient(ellipse at 12% 25%,rgba(178,255,29,.34),transparent 33%), radial-gradient(ellipse at 88% 38%,rgba(58,255,94,.30),transparent 31%), radial-gradient(ellipse at 48% 100%,rgba(141,255,20,.28),transparent 34%); animation:accessCanonicalTrimToxic 3.4s ease-in-out infinite alternate; } [data-access-trim-effect="toxic"] .access-canonical-trim-particles{ background: radial-gradient(circle at 12% 16%,rgba(210,255,70,.92) 0 1.8px,transparent 2.8px), radial-gradient(circle at 75% 10%,rgba(98,255,112,.82) 0 1.3px,transparent 2.3px), radial-gradient(circle at 93% 72%,rgba(194,255,55,.90) 0 1.6px,transparent 2.6px), radial-gradient(circle at 29% 94%,rgba(91,255,103,.82) 0 1.4px,transparent 2.4px); filter:drop-shadow(0 0 5px rgba(130,255,24,.64)); animation:accessCanonicalTrimBubble 2.4s ease-in-out infinite; } /* Ocean Wave */ [data-access-trim-effect="ocean-wave"] .access-canonical-trim-energy{ opacity:.68; background:linear-gradient(95deg,transparent,#007e9e,#35e7ff,#c6fbff,#00a9c9,#44e5ff,transparent); background-size:380% 100%; filter:drop-shadow(0 0 5px rgba(35,223,255,.78)); animation:accessCanonicalTrimFlow 3s linear infinite; } [data-access-trim-effect="ocean-wave"] .access-canonical-trim-atmosphere{ background: radial-gradient(ellipse at 10% 40%,rgba(18,190,225,.30),transparent 32%), radial-gradient(ellipse at 90% 60%,rgba(101,230,255,.25),transparent 30%); animation:accessCanonicalTrimOcean 3.2s ease-in-out infinite alternate; } [data-access-trim-effect="ocean-wave"] .access-canonical-trim-particles{ background: radial-gradient(circle at 14% 18%,#c7fbff 0 1.1px,transparent 2px), radial-gradient(circle at 82% 86%,#78efff 0 1.5px,transparent 2.5px), radial-gradient(circle at 92% 30%,#a9f6ff 0 1px,transparent 1.9px); animation:accessCanonicalTrimBubble 3.1s ease-in-out infinite; } /* Purple Haze */ [data-access-trim-effect="purple-haze"] .access-canonical-trim-energy{ opacity:.52; background:linear-gradient(110deg,#5525a4,#a143ff,#f17cff,#6d2cd4,#b85dff); background-size:320% 100%; animation:accessCanonicalTrimFlow 3.8s linear infinite; } [data-access-trim-effect="purple-haze"] .access-canonical-trim-atmosphere{ background: radial-gradient(ellipse at 10% 25%,rgba(181,70,255,.43),transparent 35%), radial-gradient(ellipse at 88% 35%,rgba(91,32,188,.38),transparent 32%), radial-gradient(ellipse at 50% 100%,rgba(207,84,255,.30),transparent 36%); animation:accessCanonicalTrimMist 3.9s ease-in-out infinite alternate; } [data-access-trim-effect="purple-haze"] .access-canonical-trim-particles{ background: radial-gradient(circle at 14% 18%,rgba(255,255,255,.64) 0 1px,transparent 2px), radial-gradient(circle at 72% 90%,rgba(227,180,255,.66) 0 1px,transparent 2px), radial-gradient(circle at 91% 27%,rgba(255,255,255,.55) 0 1px,transparent 2px); animation:accessCanonicalTrimSpark 2.8s ease-in-out infinite alternate; } /* Prism */ [data-access-trim-effect="prism"] .access-canonical-trim-energy{ background:linear-gradient(95deg,#ff4f92,#ffad4f,#ffe45f,#7fff8a,#5fd8ff,#786cff,#cf5fff,#ff4fb3); background-size:420% 100%; filter:drop-shadow(0 0 6px rgba(188,87,255,.65)); animation:accessCanonicalTrimFlow 2.8s linear infinite; } [data-access-trim-effect="prism"] .access-canonical-trim-particles{ background: radial-gradient(circle at 9% 18%,#fff 0 1px,transparent 2px), radial-gradient(circle at 78% 12%,#fff2a9 0 1px,transparent 2px), radial-gradient(circle at 94% 75%,#b9f7ff 0 1px,transparent 2px), radial-gradient(circle at 27% 92%,#f5c0ff 0 1px,transparent 2px); filter:drop-shadow(0 0 5px #fff); animation:accessCanonicalTrimPrism 1.55s ease-in-out infinite alternate; } /* Structured trims */ [data-access-trim-effect="black-diamond"] .access-canonical-trim-energy{ background:repeating-linear-gradient(120deg, #030405 0 7px,#303641 7px 10px,#08090c 10px 15px,#eef4ff 15px 17px,#101217 17px 24px); background-size:180% 100%; filter:drop-shadow(0 0 2px rgba(255,255,255,.65)); animation:accessCanonicalTrimMetal 4s linear infinite; } [data-access-trim-effect="black-diamond"] .access-canonical-trim-atmosphere{ background:radial-gradient(ellipse at 50% 50%,rgba(190,205,225,.18),transparent 60%); opacity:.18; } [data-access-trim-effect="black-diamond"] .access-canonical-trim-particles{ background: radial-gradient(circle at 8% 18%,#fff 0 1px,transparent 2px), radial-gradient(circle at 73% 10%,#d8e6ff 0 1px,transparent 2px), radial-gradient(circle at 92% 76%,#fff 0 1px,transparent 2px), radial-gradient(circle at 28% 94%,#cfd7e5 0 1px,transparent 2px); animation:accessCanonicalTrimSpark 2.2s steps(2,end) infinite; } [data-access-trim-effect="gold-luxe"] .access-canonical-trim-energy{ background:repeating-linear-gradient(115deg, #604006 0 8px,#f5c84e 8px 10px,#90610b 10px 16px,#fff0a6 16px 17px,#aa710d 17px 24px); filter:drop-shadow(0 0 4px rgba(218,157,41,.35)); } [data-access-trim-effect="gold-luxe"] .access-canonical-trim-atmosphere{ background:radial-gradient(ellipse at 50% 50%,rgba(255,205,90,.16),transparent 62%); opacity:.16; } [data-access-trim-effect="rose-gold"] .access-canonical-trim-energy{ background:linear-gradient(110deg,#6c342f,#e6a091,#fff0e8,#b95f54,#f2b7a7,#7d3c35); background-size:260% 100%; filter:drop-shadow(0 0 4px rgba(233,156,141,.38)); animation:accessCanonicalTrimMetal 5s linear infinite; } [data-access-trim-effect="rose-gold"] .access-canonical-trim-atmosphere{ background:radial-gradient(ellipse at 50% 50%,rgba(242,183,167,.18),transparent 60%); opacity:.18; } @keyframes accessCanonicalTrimFlow{to{background-position:320% 0}} @keyframes accessCanonicalTrimHeat{from{transform:scale(.985);opacity:.30}to{transform:scale(1.035);opacity:.74}} @keyframes accessCanonicalTrimRise{0%{transform:translateY(5px);opacity:.18}50%{opacity:1}100%{transform:translateY(-8px);opacity:0}} @keyframes accessCanonicalTrimMist{from{transform:translate(-3px,2px) scale(.99);opacity:.32}to{transform:translate(4px,-2px) scale(1.035);opacity:.72}} @keyframes accessCanonicalTrimSpark{from{opacity:.20;transform:scale(.96)}to{opacity:.95;transform:scale(1.05)}} @keyframes accessCanonicalTrimElectric{0%,100%{opacity:.25}45%{opacity:.90}48%{opacity:.12}52%{opacity:.95}} @keyframes accessCanonicalTrimIce{to{background-position:180px 0}} @keyframes accessCanonicalTrimIceBreath{from{opacity:.22;transform:scale(.98)}to{opacity:.56;transform:scale(1.03)}} @keyframes accessCanonicalTrimToxic{from{transform:translate(-3px,3px) scale(.97);opacity:.30}to{transform:translate(3px,-3px) scale(1.06);opacity:.68}} @keyframes accessCanonicalTrimBubble{0%,100%{transform:translateY(4px);opacity:.28}50%{transform:translateY(-5px);opacity:.88}} @keyframes accessCanonicalTrimOcean{from{transform:translateX(-3px) scale(.99);opacity:.25}to{transform:translateX(3px) scale(1.04);opacity:.60}} @keyframes accessCanonicalTrimPrism{from{opacity:.18;filter:brightness(.9)}to{opacity:1;filter:brightness(1.45)}} @keyframes accessCanonicalTrimMetal{to{background-position:180% 0}} @media(prefers-reduced-motion:reduce){ .access-canonical-trim-layer > span{animation:none!important} } /* ========================================================== STEVE BOSTON ACCESS — VERSION 2.0AM TRIM MOTION POLISH + BLACK DIAMOND STONE BORDER - Slows/smooths animated trim motion. - Black Diamond becomes STATIC. - Black Diamond border is built from connected faceted stones. - No shimmer, no particles, no motion for Black Diamond. ========================================================== */ /* Global motion polish: slower and smoother. */ [data-access-trim-effect="ember"] .access-canonical-trim-energy{ animation-duration:4.2s!important; animation-timing-function:linear!important; } [data-access-trim-effect="ember"] .access-canonical-trim-atmosphere{ animation-duration:2.8s!important; animation-timing-function:ease-in-out!important; } [data-access-trim-effect="ember"] .access-canonical-trim-particles{ animation-duration:3.4s!important; animation-timing-function:ease-out!important; } [data-access-trim-effect="mist"] .access-canonical-trim-energy{ animation-duration:7s!important; } [data-access-trim-effect="mist"] .access-canonical-trim-atmosphere{ animation-duration:6.8s!important; } [data-access-trim-effect="mist"] .access-canonical-trim-particles{ animation-duration:4.8s!important; } [data-access-trim-effect="neon-energy"] .access-canonical-trim-energy{ animation-duration:3.6s!important; } [data-access-trim-effect="neon-energy"] .access-canonical-trim-atmosphere{ animation-duration:2.4s!important; animation-timing-function:ease-in-out!important; } [data-access-trim-effect="neon-energy"] .access-canonical-trim-particles{ animation-duration:2.6s!important; animation-timing-function:ease-in-out!important; } [data-access-trim-effect="frost"] .access-canonical-trim-energy{ animation-duration:4.8s!important; } [data-access-trim-effect="frost"] .access-canonical-trim-atmosphere{ animation-duration:4.6s!important; } [data-access-trim-effect="frost"] .access-canonical-trim-particles{ animation-duration:4.2s!important; } [data-access-trim-effect="toxic"] .access-canonical-trim-energy{ animation-duration:5s!important; } [data-access-trim-effect="toxic"] .access-canonical-trim-atmosphere{ animation-duration:5.6s!important; } [data-access-trim-effect="toxic"] .access-canonical-trim-particles{ animation-duration:4.4s!important; } [data-access-trim-effect="ocean-wave"] .access-canonical-trim-energy{ animation-duration:5.6s!important; } [data-access-trim-effect="ocean-wave"] .access-canonical-trim-atmosphere{ animation-duration:5.8s!important; } [data-access-trim-effect="ocean-wave"] .access-canonical-trim-particles{ animation-duration:4.8s!important; } [data-access-trim-effect="purple-haze"] .access-canonical-trim-energy{ animation-duration:6.2s!important; } [data-access-trim-effect="purple-haze"] .access-canonical-trim-atmosphere{ animation-duration:6.4s!important; } [data-access-trim-effect="purple-haze"] .access-canonical-trim-particles{ animation-duration:4.8s!important; } [data-access-trim-effect="prism"] .access-canonical-trim-energy{ animation-duration:5.2s!important; } [data-access-trim-effect="prism"] .access-canonical-trim-particles{ animation-duration:3.2s!important; } /* ---------------- BLACK DIAMOND ---------------- Static connected faceted stones form the border itself. The old shimmer/particle treatment is fully disabled. */ [data-access-trim-effect="black-diamond"] .access-canonical-trim-energy, [data-access-trim-effect="black-diamond"] .access-canonical-trim-atmosphere, [data-access-trim-effect="black-diamond"] .access-canonical-trim-particles{ display:none!important; animation:none!important; } .access-black-diamond-trim-stones{ position:absolute; inset:0; border-radius:inherit; overflow:visible; pointer-events:none; z-index:40; } .access-black-diamond-trim-stone{ --bd-size:10px; position:absolute; width:var(--bd-size); height:var(--bd-size); transform:translate(-50%,-50%) rotate(45deg); border-radius:16% 34% 16% 34%; border:1px solid rgba(215,224,236,.42); background: linear-gradient(135deg, rgba(245,248,255,.75) 0 8%, #171a20 9% 28%, #050608 29% 48%, #3e4652 49% 63%, #08090c 64% 82%, #909aa8 83% 88%, #020304 89% 100%); box-shadow: inset 1px 1px 1px rgba(255,255,255,.22), inset -1px -1px 2px rgba(0,0,0,.95), 0 0 1px rgba(255,255,255,.28); } .access-black-diamond-trim-stone::before{ content:""; position:absolute; inset:22%; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background: linear-gradient(135deg, rgba(228,236,246,.58) 0 16%, #08090c 17% 44%, #424b57 45% 60%, #030405 61% 100%); opacity:.88; } /* Slight corner emphasis while staying static. */ .access-black-diamond-trim-stone[data-corner="1"]{ --bd-size:12px; border-color:rgba(238,243,250,.58); } /* Remove any old trim border color beneath Black Diamond. */ [data-access-trim-effect="black-diamond"]{ border-color:transparent!important; outline-color:transparent!important; } /* Small controls/pills get slightly smaller stones. */ .access-canonical-trim-host.access-black-diamond-small .access-black-diamond-trim-stone{ --bd-size:8px; } /* ========================================================== STEVE BOSTON ACCESS — VERSION 2.0AN TOXIC TRIM PERFORMANCE FIX Keeps the Toxic look while reducing mobile GPU load: - lighter mist - smaller blur radius - fewer heavy animated particles - opacity/translate drift instead of continuous scale - off-screen animation pausing ========================================================== */ /* Toxic rail: smoother and cheaper */ [data-access-trim-effect="toxic"] .access-canonical-trim-energy{ animation-duration:6.2s!important; animation-timing-function:linear!important; filter: drop-shadow(0 0 3px rgba(142,255,0,.78)) drop-shadow(0 0 7px rgba(101,255,0,.30))!important; } /* Toxic mist: reduce blur + remove scale animation */ [data-access-trim-effect="toxic"] .access-canonical-trim-atmosphere{ inset:-7px!important; filter:blur(4px)!important; opacity:.48!important; background: radial-gradient(ellipse at 14% 28%,rgba(178,255,29,.28),transparent 34%), radial-gradient(ellipse at 86% 42%,rgba(58,255,94,.24),transparent 33%), radial-gradient(ellipse at 50% 96%,rgba(141,255,20,.20),transparent 35%)!important; animation:accessToxicDriftLite 7.2s ease-in-out infinite alternate!important; will-change:transform,opacity; } /* Toxic particles: fewer bubbles and no filter-heavy glow */ [data-access-trim-effect="toxic"] .access-canonical-trim-particles{ inset:-7px!important; filter:none!important; opacity:.68!important; background: radial-gradient(circle at 15% 18%,rgba(210,255,70,.88) 0 1.5px,transparent 2.3px), radial-gradient(circle at 78% 15%,rgba(98,255,112,.76) 0 1.2px,transparent 2px), radial-gradient(circle at 89% 76%,rgba(194,255,55,.82) 0 1.4px,transparent 2.2px)!important; animation:accessToxicBubbleLite 5.6s ease-in-out infinite!important; will-change:transform,opacity; } /* Off-screen pause flag applied by JS */ .access-trim-paused .access-canonical-trim-energy, .access-trim-paused .access-canonical-trim-atmosphere, .access-trim-paused .access-canonical-trim-particles{ animation-play-state:paused!important; } /* Prefer composited transforms over filter/scale churn */ @keyframes accessToxicDriftLite{ 0%{transform:translate3d(-2px,2px,0);opacity:.32} 100%{transform:translate3d(3px,-2px,0);opacity:.54} } @keyframes accessToxicBubbleLite{ 0%,100%{transform:translate3d(0,3px,0);opacity:.35} 50%{transform:translate3d(0,-4px,0);opacity:.82} } /* Mobile-specific reduction */ @media(max-width:640px){ [data-access-trim-effect="toxic"] .access-canonical-trim-atmosphere{ inset:-5px!important; filter:blur(3px)!important; opacity:.40!important; } [data-access-trim-effect="toxic"] .access-canonical-trim-particles{ inset:-5px!important; opacity:.58!important; } } /* ========================================================== STEVE BOSTON ACCESS — VERSION 2.0AO TOXIC STATIC RAIL + HEAVY MIST - Toxic border/rail is static. - More mist and vapor depth. - Slow bubbles/particles remain animated. - No fast border flow. - Profile Rings remain untouched. ========================================================== */ [data-access-trim-effect="toxic"] .access-canonical-trim-energy{ animation:none!important; background: linear-gradient( 100deg, #5e8500 0%, #98d800 18%, #c7ff21 34%, #7dff00 52%, #b8f530 70%, #6cb700 86%, #8ee600 100% )!important; background-size:100% 100%!important; opacity:.78!important; filter: drop-shadow(0 0 3px rgba(142,255,0,.82)) drop-shadow(0 0 8px rgba(92,255,0,.28))!important; } /* Heavier but slow atmospheric vapor. */ [data-access-trim-effect="toxic"] .access-canonical-trim-atmosphere{ inset:-10px!important; opacity:.64!important; filter:blur(5px)!important; background: radial-gradient(ellipse at 8% 22%,rgba(185,255,28,.34),transparent 36%), radial-gradient(ellipse at 90% 30%,rgba(60,255,96,.31),transparent 34%), radial-gradient(ellipse at 18% 82%,rgba(120,255,18,.26),transparent 35%), radial-gradient(ellipse at 82% 78%,rgba(54,255,84,.23),transparent 33%), radial-gradient(ellipse at 50% 50%,rgba(139,255,24,.18),transparent 48%)!important; animation:accessToxicHeavyMist 8.4s ease-in-out infinite alternate!important; will-change:transform,opacity; } /* More visible bubbles/particles, still deliberately slow. */ [data-access-trim-effect="toxic"] .access-canonical-trim-particles{ inset:-9px!important; opacity:.78!important; filter:none!important; background: radial-gradient(circle at 10% 18%,rgba(218,255,85,.96) 0 1.8px,transparent 2.8px), radial-gradient(circle at 27% 86%,rgba(97,255,110,.88) 0 1.4px,transparent 2.4px), radial-gradient(circle at 48% 10%,rgba(194,255,52,.90) 0 1.6px,transparent 2.6px), radial-gradient(circle at 72% 92%,rgba(81,255,101,.82) 0 1.3px,transparent 2.3px), radial-gradient(circle at 90% 24%,rgba(205,255,67,.92) 0 1.7px,transparent 2.7px), radial-gradient(circle at 95% 70%,rgba(105,255,116,.82) 0 1.3px,transparent 2.2px)!important; animation:accessToxicParticlesSlow 6.8s ease-in-out infinite!important; will-change:transform,opacity; } @keyframes accessToxicHeavyMist{ 0%{ transform:translate3d(-3px,2px,0); opacity:.42; } 50%{ transform:translate3d(2px,-1px,0); opacity:.68; } 100%{ transform:translate3d(4px,-3px,0); opacity:.56; } } @keyframes accessToxicParticlesSlow{ 0%,100%{ transform:translate3d(0,4px,0); opacity:.38; } 50%{ transform:translate3d(0,-5px,0); opacity:.92; } } @media(max-width:640px){ [data-access-trim-effect="toxic"] .access-canonical-trim-atmosphere{ inset:-7px!important; filter:blur(4px)!important; opacity:.56!important; } [data-access-trim-effect="toxic"] .access-canonical-trim-particles{ inset:-7px!important; opacity:.70!important; } } /* VERSION 2.0CK — Vault asset-based animated trims */ /* ========================================================== V2.1 CAPABILITY — ELECTRIC TRIM Unlike the older named effects, every colour here resolves from the --access-trim-* custom properties the renderer sets from visual_config. That makes 'electric' fully colour-parameterisable through the Skin Vault: new electric variants need a pack, never a deployment. Geometry/sizing still come exclusively from the canonical renderer. ========================================================== */ [data-access-trim-effect="electric"] .access-canonical-trim-energy{ background:linear-gradient( 100deg, var(--access-trim-secondary,#4a7bff), var(--access-trim-primary,#4ff0ff), var(--access-trim-highlight,#ffffff), var(--access-trim-primary,#4ff0ff), var(--access-trim-secondary,#4a7bff) ); background-size:340% 100%; filter: drop-shadow(0 0 3px var(--access-trim-primary,#4ff0ff)) drop-shadow(0 0 9px var(--access-trim-secondary,#4a7bff)); animation:accessCanonicalTrimFlow var(--access-trim-speed,1.5s) linear infinite, accessElectricSurge calc(var(--access-trim-speed,1.5s) * 1.6) steps(4,end) infinite; } /* Hollow, masked halo. Without the xor mask the background fills the whole surface and the blur turns it into fog across the card content. */ [data-access-trim-effect="electric"] .access-canonical-trim-atmosphere{ inset:calc(var(--access-trim-atmosphere-gap,8px) * -0.55)!important; padding:calc(var(--access-trim-width,2px) + 1px); background:linear-gradient( 115deg, var(--access-trim-secondary,#4a7bff), var(--access-trim-primary,#4ff0ff), var(--access-trim-secondary,#4a7bff) ); background-size:280% 100%; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:blur(calc(var(--access-trim-blur,7px) * .45)); opacity:calc(var(--access-trim-intensity,.75) * .34); animation:accessCanonicalTrimFlow var(--access-trim-speed,1.5s) linear infinite; } [data-access-trim-effect="electric"] .access-canonical-trim-particles{ background: radial-gradient(circle at 12% 18%,var(--access-trim-highlight,#fff) 0 1px,transparent 1.9px), radial-gradient(circle at 78% 9%, var(--access-trim-primary,#4ff0ff) 0 1px,transparent 1.9px), radial-gradient(circle at 91% 74%,var(--access-trim-highlight,#fff) 0 1px,transparent 1.9px), radial-gradient(circle at 24% 88%,var(--access-trim-secondary,#4a7bff) 0 1px,transparent 1.9px); animation:accessElectricSpark calc(var(--access-trim-speed,1.5s) * .92) steps(2,end) infinite; } @keyframes accessElectricSurge{ 0%,72%,100%{filter:drop-shadow(0 0 3px var(--access-trim-primary,#4ff0ff)) drop-shadow(0 0 9px var(--access-trim-secondary,#4a7bff))} 78%{filter:drop-shadow(0 0 6px var(--access-trim-highlight,#fff)) drop-shadow(0 0 16px var(--access-trim-primary,#4ff0ff))} } @keyframes accessElectricArc{ 0%,100%{opacity:calc(var(--access-trim-softness,.55) * .45);transform:translate3d(0,0,0)} 33% {opacity:calc(var(--access-trim-softness,.55) * .85);transform:translate3d(.6px,-.4px,0)} 66% {opacity:calc(var(--access-trim-softness,.55) * .30);transform:translate3d(-.5px,.5px,0)} } @keyframes accessElectricSpark{ 0%,100%{opacity:calc(var(--access-trim-particle-opacity,.72) * .35)} 50% {opacity:var(--access-trim-particle-opacity,.72)} } @media (prefers-reduced-motion:reduce){ [data-access-trim-effect="electric"] .access-canonical-trim-energy, [data-access-trim-effect="electric"] .access-canonical-trim-atmosphere, [data-access-trim-effect="electric"] .access-canonical-trim-particles{animation:none!important} } /* ========================================================== V2.2 CAPABILITY — LIGHTNING TRIM Erratic arc discharge confined strictly to the perimeter. Every layer is xor-masked so nothing can bleed across card content, and every colour resolves from --access-trim-*, keeping the effect fully Vault-parameterisable. ========================================================== */ [data-access-trim-effect="lightning"] .access-canonical-trim-energy{ background:linear-gradient( 100deg, var(--access-trim-secondary,#2f5bd0) 0%, var(--access-trim-primary,#7de8ff) 18%, var(--access-trim-highlight,#ffffff) 24%, var(--access-trim-primary,#7de8ff) 30%, var(--access-trim-secondary,#2f5bd0) 48%, var(--access-trim-secondary,#2f5bd0) 100% ); background-size:420% 100%; opacity:var(--access-trim-intensity,.86); filter:drop-shadow(0 0 calc(var(--access-trim-glow,5px) * .8) color-mix(in srgb,var(--access-trim-primary,#7de8ff) 70%,transparent)); animation: accessLightningTravel calc(var(--access-trim-speed,1.5s) * 2.1) steps(7,end) infinite, accessLightningStrike calc(var(--access-trim-speed,1.5s) * 3.4) steps(1,end) infinite; } /* Tight halo only — masked hollow, minimal blur, low opacity. */ [data-access-trim-effect="lightning"] .access-canonical-trim-atmosphere{ inset:calc(var(--access-trim-atmosphere-gap,8px) * -0.4)!important; padding:var(--access-trim-width,2px); background:var(--access-trim-primary,#7de8ff); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:blur(calc(var(--access-trim-blur,7px) * .38)); opacity:calc(var(--access-trim-intensity,.86) * .26); animation:accessLightningHalo calc(var(--access-trim-speed,1.5s) * 3.4) steps(1,end) infinite; } /* Arc sparks that jump between points on the border. */ [data-access-trim-effect="lightning"] .access-canonical-trim-particles{ inset:calc(var(--access-trim-particle-gap,10px) * -0.45)!important; padding:calc(var(--access-trim-width,2px) + 2px); background: radial-gradient(circle at 18% 0%, var(--access-trim-highlight,#fff) 0 1.2px,transparent 2.4px), radial-gradient(circle at 63% 0%, var(--access-trim-primary,#7de8ff) 0 1.2px,transparent 2.4px), radial-gradient(circle at 100% 34%,var(--access-trim-highlight,#fff) 0 1.2px,transparent 2.4px), radial-gradient(circle at 81% 100%,var(--access-trim-primary,#7de8ff) 0 1.2px,transparent 2.4px), radial-gradient(circle at 29% 100%,var(--access-trim-highlight,#fff) 0 1.2px,transparent 2.4px), radial-gradient(circle at 0% 68%, var(--access-trim-primary,#7de8ff) 0 1.2px,transparent 2.4px); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:calc(var(--access-trim-intensity,.86) * .9); animation:accessLightningSpark calc(var(--access-trim-speed,1.5s) * 1.15) steps(1,end) infinite; } @keyframes accessLightningTravel{ 0% {background-position:0% 50%} 100%{background-position:400% 50%} } @keyframes accessLightningStrike{ 0%,88%,100%{filter:drop-shadow(0 0 calc(var(--access-trim-glow,5px) * .8) color-mix(in srgb,var(--access-trim-primary,#7de8ff) 70%,transparent))} 90%{filter:drop-shadow(0 0 calc(var(--access-trim-glow,5px) * 2.2) color-mix(in srgb,var(--access-trim-highlight,#fff) 92%,transparent)) brightness(1.5)} 93%{filter:drop-shadow(0 0 calc(var(--access-trim-glow,5px) * .5) color-mix(in srgb,var(--access-trim-primary,#7de8ff) 40%,transparent)) brightness(.9)} 96%{filter:drop-shadow(0 0 calc(var(--access-trim-glow,5px) * 1.7) color-mix(in srgb,var(--access-trim-highlight,#fff) 80%,transparent)) brightness(1.35)} } @keyframes accessLightningHalo{ 0%,88%,100%{opacity:calc(var(--access-trim-intensity,.86) * .18)} 90%{opacity:calc(var(--access-trim-intensity,.86) * .5)} 96%{opacity:calc(var(--access-trim-intensity,.86) * .38)} } @keyframes accessLightningSpark{ 0%,100%{opacity:calc(var(--access-trim-intensity,.86) * .12);transform:translate3d(0,0,0)} 12%{opacity:calc(var(--access-trim-intensity,.86) * .95);transform:translate3d(.4px,-.3px,0)} 24%{opacity:calc(var(--access-trim-intensity,.86) * .1)} 47%{opacity:calc(var(--access-trim-intensity,.86) * .8);transform:translate3d(-.4px,.3px,0)} 58%{opacity:calc(var(--access-trim-intensity,.86) * .08)} 76%{opacity:calc(var(--access-trim-intensity,.86) * .9);transform:translate3d(.3px,.4px,0)} 88%{opacity:calc(var(--access-trim-intensity,.86) * .1)} } @media (prefers-reduced-motion:reduce){ [data-access-trim-effect="lightning"] .access-canonical-trim-energy, [data-access-trim-effect="lightning"] .access-canonical-trim-atmosphere, [data-access-trim-effect="lightning"] .access-canonical-trim-particles{animation:none!important} } /* V2.2 — when SVG bolts are mounted, silence the gradient layers so the two implementations cannot stack into fog. The SVG owns the look. */ .access-canonical-trim-layer[data-lightning-svg="1"] .access-canonical-trim-energy, .access-canonical-trim-layer[data-lightning-svg="1"] .access-canonical-trim-atmosphere, .access-canonical-trim-layer[data-lightning-svg="1"] .access-canonical-trim-particles{ display:none!important; } /* V2.2h — Storm trim is circuit + crackling electricity, not a plain moving border */ .access-trim-surface[data-access-trim-effect="storm"]{ --storm-grid:rgba(85,239,255,.10); background-image: linear-gradient(90deg,transparent 0 92%,rgba(85,239,255,.05) 92% 93%,transparent 93%), linear-gradient(0deg,transparent 0 92%,rgba(106,71,255,.04) 92% 93%,transparent 93%)!important; background-size:42px 42px!important; } .access-trim-surface[data-access-trim-effect="storm"] .access-canonical-trim-energy{ opacity:.18!important; } /* V2.2i — STORM ACCEPTANCE RULE For storm, the SVG crackle/circuit system is the visible trim. Smooth gradient rails are forbidden. */ [data-access-trim-effect="storm"] .access-canonical-trim-energy, [data-access-trim-effect="storm"] .access-canonical-trim-atmosphere, [data-access-trim-effect="storm"] .access-canonical-trim-particles{ display:none!important; } [data-access-trim-effect="storm"]>.access-canonical-trim-layer{ filter:drop-shadow(0 0 3px rgba(85,239,255,.60)) drop-shadow(0 0 7px rgba(106,71,255,.32))!important; } /* V2.2j — storm trim is isolated strikes/circuits, not a continuous cage */ [data-access-trim-effect="storm"] .access-canonical-trim-energy, [data-access-trim-effect="storm"] .access-canonical-trim-atmosphere, [data-access-trim-effect="storm"] .access-canonical-trim-particles{display:none!important} [data-access-trim-effect="storm"]>.access-canonical-trim-layer{ filter:drop-shadow(0 0 2px rgba(85,239,255,.48)) drop-shadow(0 0 5px rgba(106,71,255,.26))!important; } /* V2.3 atmospheric trim capabilities: native FX layer owns the visible treatment */ [data-access-trim-effect="liquid"] .access-canonical-trim-energy, [data-access-trim-effect="liquid"] .access-canonical-trim-atmosphere, [data-access-trim-effect="liquid"] .access-canonical-trim-particles, [data-access-trim-effect="snow"] .access-canonical-trim-energy, [data-access-trim-effect="snow"] .access-canonical-trim-atmosphere, [data-access-trim-effect="snow"] .access-canonical-trim-particles, [data-access-trim-effect="rain"] .access-canonical-trim-energy, [data-access-trim-effect="rain"] .access-canonical-trim-atmosphere, [data-access-trim-effect="rain"] .access-canonical-trim-particles, [data-access-trim-effect="reactor"] .access-canonical-trim-energy, [data-access-trim-effect="reactor"] .access-canonical-trim-atmosphere, [data-access-trim-effect="reactor"] .access-canonical-trim-particles{display:none!important} /* Premium trim: avoid large filtered compositing surfaces during mobile scrolling. */ .access-canonical-trim-layer[data-premium-trim="1"] > .access-canonical-trim-atmosphere, .access-canonical-trim-layer[data-premium-trim="1"] > .access-canonical-trim-particles{display:none!important} .access-canonical-trim-layer[data-premium-trim="1"] > .access-canonical-trim-energy{filter:none!important;animation:none!important;box-shadow:none!important} .access-canonical-trim-layer[data-premium-static="1"] *{animation:none!important;filter:none!important;will-change:auto!important}