/* DBVYRO_PROFILE_NEON_GLASS_V17 */ @property --dbv-flow-angle{syntax:'';inherits:false;initial-value:0deg} :root{ --dbv-pe-panel:rgba(5,10,22,.72); --dbv-pe-panel-strong:rgba(6,13,28,.88); --dbv-pe-muted:#9ba9c4; --dbv-flow-a:var(--profile-accent,#7657ff); --dbv-flow-b:color-mix(in srgb,var(--profile-accent,#7657ff) 64%,#ffffff); --dbv-flow-c:color-mix(in srgb,var(--profile-secondary,#27dfff) 72%,var(--profile-accent,#7657ff)); --dbv-flow-speed:5.5s; } body.dbv-profile-experience-page{min-height:100vh!important;background:#02050b!important;overflow-x:hidden} body.dbv-profile-experience-page>.db-profile-background-layer{position:fixed!important;inset:0!important;z-index:0!important;width:100vw!important;height:100vh!important;border-radius:0!important} body.dbv-profile-experience-page:after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(1,4,10,.16),rgba(1,4,10,.48) 62%,rgba(1,4,10,.72)),radial-gradient(circle at 10% 10%,color-mix(in srgb,var(--dbv-flow-a) 18%,transparent),transparent 28%),radial-gradient(circle at 90% 14%,color-mix(in srgb,var(--dbv-flow-c) 14%,transparent),transparent 30%)} body.dbv-profile-experience-page .topbar{z-index:50!important;background:rgba(3,7,15,.76)!important;border-bottom:1px solid color-mix(in srgb,var(--dbv-flow-a) 38%,transparent)!important;backdrop-filter:blur(20px) saturate(1.18);-webkit-backdrop-filter:blur(20px) saturate(1.18)} .dbv-profile-experience-grid{position:relative;z-index:2;width:min(1600px,calc(100% - 28px));margin:82px auto 58px;display:grid;grid-template-columns:minmax(238px,270px) minmax(0,1fr) minmax(250px,292px);gap:14px;align-items:start} .dbv-profile-experience-grid>.profile-shell{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;overflow:visible!important;background:transparent!important;filter:none!important} /* Desktop rails remain in place while only the center page continues scrolling. */ .dbv-pe-rail{display:flex;flex-direction:column;gap:12px;position:sticky;top:78px;height:calc(100dvh - 92px);max-height:calc(100dvh - 92px);overflow-y:auto;overscroll-behavior:contain;padding:3px 3px 14px;scrollbar-width:none} .dbv-pe-rail::-webkit-scrollbar{display:none} /* Futuristic glass cards with thick outer current + inner glass line. */ .dbv-pe-card{position:relative;isolation:isolate;overflow:hidden;border-radius:19px;border:2px solid transparent;background:linear-gradient(180deg,var(--dbv-pe-panel-strong),var(--dbv-pe-panel)) padding-box;box-shadow:0 16px 48px rgba(0,0,0,.36),0 0 17px color-mix(in srgb,var(--dbv-flow-a) 22%,transparent),inset 0 0 0 1px rgba(255,255,255,.09),inset 0 0 24px rgba(42,125,255,.05);backdrop-filter:blur(22px) saturate(1.22);-webkit-backdrop-filter:blur(22px) saturate(1.22)} .dbv-pe-card::before{content:"";position:absolute;z-index:-2;inset:-3px;border-radius:21px;padding:3px;background:conic-gradient(from var(--dbv-flow-angle),transparent 0 7%,var(--dbv-flow-a) 11%,var(--dbv-flow-b) 16%,transparent 23% 39%,var(--dbv-flow-c) 45%,var(--dbv-flow-a) 52%,transparent 60% 78%,var(--dbv-flow-b) 84%,var(--dbv-flow-a) 91%,transparent 97%);animation:dbvCardCurrent var(--dbv-flow-speed) linear infinite;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--dbv-flow-a) 72%,transparent));pointer-events:none} .dbv-pe-card::after{content:"";position:absolute;z-index:-1;inset:3px;border-radius:15px;border:1px solid color-mix(in srgb,var(--dbv-flow-a) 52%,rgba(255,255,255,.16));box-shadow:inset 0 0 14px color-mix(in srgb,var(--dbv-flow-c) 16%,transparent),0 0 12px color-mix(in srgb,var(--dbv-flow-a) 22%,transparent);pointer-events:none} @keyframes dbvCardCurrent{to{--dbv-flow-angle:360deg}} /* Main profile panels receive the same double-glass language. */ .dbv-profile-experience-grid .profile-header-card, .dbv-profile-experience-grid .profile-posts, .dbv-profile-experience-grid #dbProfileMusicCatalogV2, .dbv-profile-experience-grid #dbProfileMusic, .dbv-profile-experience-grid .db-profile-music-v2{position:relative!important;border:2px solid color-mix(in srgb,var(--dbv-flow-a) 74%,rgba(255,255,255,.2))!important;background:linear-gradient(180deg,rgba(6,14,29,.78),rgba(3,8,18,.70))!important;backdrop-filter:blur(22px) saturate(1.18)!important;-webkit-backdrop-filter:blur(22px) saturate(1.18)!important;box-shadow:0 20px 62px rgba(0,0,0,.34),0 0 18px color-mix(in srgb,var(--dbv-flow-a) 24%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--dbv-flow-c) 30%,transparent)!important} .dbv-profile-experience-grid .profile-header-card{border-radius:23px!important;margin-bottom:13px!important} .dbv-profile-experience-grid .profile-posts{border-radius:22px!important;overflow:hidden!important} .dbv-profile-experience-grid .profile-tabs,.dbv-profile-experience-grid .profile-video-grid{background:rgba(2,6,14,.30)!important} .dbv-pe-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 14px 9px}.dbv-pe-head h3{margin:0;font-size:14px;letter-spacing:.012em}.dbv-pe-head a,.dbv-pe-link{color:var(--dbv-flow-b);text-decoration:none;font-size:11px;font-weight:900} .dbv-pe-list{position:relative;z-index:2;padding:0 12px 12px}.dbv-pe-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 2px;border-top:1px solid rgba(255,255,255,.06)}.dbv-pe-row:first-child{border-top:0}.dbv-pe-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--dbv-flow-a) 13%,rgba(8,15,28,.9));border:1px solid color-mix(in srgb,var(--dbv-flow-a) 34%,transparent);overflow:hidden}.dbv-pe-icon img{width:100%;height:100%;object-fit:cover}.dbv-pe-copy{min-width:0}.dbv-pe-copy b{display:block;font-size:12px}.dbv-pe-copy small{display:block;color:var(--dbv-pe-muted);font-size:10px;margin-top:2px}.dbv-pe-arrow{color:var(--dbv-flow-b)} .dbv-pe-highlight{position:relative;z-index:2;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:9px;align-items:center;margin:0 11px;padding:9px 2px;border-top:1px solid rgba(255,255,255,.07);color:inherit;text-decoration:none}.dbv-pe-highlight:first-child{border-top:0}.dbv-pe-highlight-media{position:relative;width:72px;height:50px;border-radius:10px;overflow:hidden;border:1px solid color-mix(in srgb,var(--dbv-flow-a) 48%,transparent);background:#050a13}.dbv-pe-highlight-media video,.dbv-pe-highlight-media img{width:100%;height:100%;object-fit:cover;display:block}.dbv-pe-highlight-tag{display:inline-flex;margin-bottom:3px;padding:2px 5px;border-radius:5px;background:color-mix(in srgb,var(--dbv-flow-a) 24%,rgba(5,9,18,.88));color:var(--dbv-flow-b);font-size:9px;font-weight:950}.dbv-pe-highlight-copy b{display:block;font-size:11px}.dbv-pe-highlight-copy small{display:block;color:var(--dbv-pe-muted);font-size:9px;margin-top:2px}.dbv-pe-highlight-arrow{color:var(--dbv-flow-b);font-size:18px} .dbv-pe-badges{display:grid;gap:6px;padding:0 12px 13px;position:relative;z-index:2}.dbv-pe-badge{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:850;padding:7px 8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--dbv-flow-a) 28%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--dbv-flow-a) 12%,rgba(5,10,20,.80)),rgba(5,10,20,.48))}.dbv-pe-badge::before{content:'◆';color:var(--dbv-flow-b);text-shadow:0 0 10px var(--dbv-flow-a)} .dbv-pe-arena{padding:0 12px 12px;position:relative;z-index:2}.dbv-pe-status{display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--dbv-pe-muted);font-size:10px;margin-bottom:8px}.dbv-pe-status-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-weight:900;color:#fff}.dbv-pe-status-pill.live{background:rgba(255,42,70,.16);color:#ff7185;border:1px solid rgba(255,42,70,.28)} .dbv-pe-media{position:relative;aspect-ratio:16/10;border-radius:13px;overflow:hidden;background:#050a13;border:1px solid color-mix(in srgb,var(--dbv-flow-a) 35%,rgba(255,255,255,.08))}.dbv-pe-media video,.dbv-pe-media img{width:100%;height:100%;object-fit:cover;display:block}.dbv-pe-media-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:#6d7d96}.dbv-pe-media-shade{position:absolute;inset:42% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.86))}.dbv-pe-pin{position:absolute;left:8px;top:8px;background:#ffc52e;color:#111;padding:5px 7px;border-radius:7px;font-size:9px;font-weight:950}.dbv-pe-media-copy{position:absolute;left:9px;right:9px;bottom:8px}.dbv-pe-media-copy b{display:block;font-size:13px}.dbv-pe-media-copy small{display:block;font-size:9px;color:#d5dbea;margin-top:2px} .dbv-pe-button{width:100%;margin-top:9px;border:1px solid color-mix(in srgb,var(--dbv-flow-a) 40%,transparent);border-radius:10px;padding:10px 12px;background:linear-gradient(135deg,var(--dbv-flow-a),var(--dbv-flow-c));box-shadow:0 0 14px color-mix(in srgb,var(--dbv-flow-a) 24%,transparent);color:#fff;font-size:11px;font-weight:950;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px}.dbv-pe-button.secondary{background:rgba(8,17,34,.82)} .dbv-pe-actions{position:relative;z-index:2;padding:0 12px 12px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.dbv-pe-actions .dbv-pe-button{margin:0}.dbv-pe-actions .wide{grid-column:1/-1}.dbv-pe-metrics{position:relative;z-index:2;padding:0 12px 12px}.dbv-pe-metric{display:grid;grid-template-columns:24px 42px minmax(0,1fr);gap:6px;align-items:center;padding:6px 0;font-size:10px}.dbv-pe-metric strong{font-size:14px;color:var(--dbv-flow-b)}.dbv-pe-empty{padding:3px 12px 14px;color:var(--dbv-pe-muted);font-size:11px;line-height:1.45;position:relative;z-index:2} .dbv-pe-dialog{border:1px solid color-mix(in srgb,var(--dbv-flow-a) 55%,transparent);border-radius:18px;background:#07101e;color:#fff;width:min(620px,calc(100vw - 26px));max-height:80vh;box-shadow:0 30px 90px rgba(0,0,0,.55);padding:0}.dbv-pe-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}.dbv-pe-dialog-head{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(255,255,255,.08)}.dbv-pe-dialog-close{border:0;background:transparent;color:#fff;font-size:24px}.dbv-pe-picker{padding:10px;display:grid;gap:8px;max-height:62vh;overflow:auto}.dbv-pe-pick{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:12px;padding:8px;color:#fff;text-align:left}.dbv-pe-pick-thumb{width:58px;height:46px;border-radius:8px;background:#111827;overflow:hidden}.dbv-pe-pick-thumb img{width:100%;height:100%;object-fit:cover} @media(prefers-reduced-motion:reduce){.dbv-pe-card::before{animation:none}} @media(max-width:1180px){.dbv-profile-experience-grid{grid-template-columns:210px minmax(0,1fr) 220px;gap:9px;width:calc(100% - 14px)}} @media(max-width:1020px){.dbv-profile-experience-grid{grid-template-columns:1fr;margin-top:72px;width:min(900px,calc(100% - 14px))}.dbv-pe-rail{position:static;height:auto;max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.dbv-pe-left{order:2}.dbv-profile-experience-grid>.profile-shell{order:1}.dbv-pe-right{order:3}} @media(max-width:720px){.dbv-profile-experience-grid{width:100%;margin-top:60px;gap:9px}.dbv-pe-rail{display:flex;padding:0 10px}.dbv-profile-experience-grid .profile-header-card,.dbv-profile-experience-grid .profile-posts{border-radius:0!important;border-left:0!important;border-right:0!important}.dbv-pe-card{border-radius:15px}} /* ========================================================== DBVYRO NEON V17 — CURRENT V16 COMPATIBILITY ========================================================== */ :root{ --dbv-flow-a: var( --dbv-neon-primary-fixed, var( --dbv-profile-primary-text, var(--profile-accent,#7657ff) ) ); --dbv-flow-c: var( --dbv-neon-secondary-fixed, var( --profile-secondary, var(--dbv-profile-secondary-text,#27dfff) ) ); } body.dbv-profile-experience-page{ min-height:100vh; background-color:#02050b !important; background-image: var(--dbv-neon-page-background,none) !important; background-position: var(--dbv-neon-bg-x,50%) var(--dbv-neon-bg-y,50%) !important; background-size: var(--dbv-neon-bg-size,cover) !important; background-repeat:no-repeat !important; background-attachment:fixed !important; } body.dbv-profile-experience-page .dbv-profile-catalog-background{ opacity:0 !important; } .dbv-profile-experience-grid > .profile-shell{ width:100% !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; } /* Existing Profile Header, Music and Videos get the same neon language. */ .dbv-profile-experience-grid .profile-header-card, .dbv-profile-experience-grid .profile-posts, .dbv-profile-experience-grid #dbProfileMusicCatalogV2, .dbv-profile-experience-grid #dbProfileMusic, .dbv-profile-experience-grid .db-profile-music-v2{ position:relative !important; border: 3px solid transparent !important; background: linear-gradient( 180deg, rgba(6,14,29,.83), rgba(3,8,18,.76) ) padding-box, conic-gradient( from var(--dbv-flow-angle), transparent 0 7%, var(--dbv-flow-a) 11%, color-mix( in srgb, var(--dbv-flow-a) 64%, #fff ) 16%, transparent 23% 39%, var(--dbv-flow-c) 45%, var(--dbv-flow-a) 52%, transparent 60% 78%, var(--dbv-flow-c) 84%, var(--dbv-flow-a) 91%, transparent 97% ) border-box !important; animation: dbvCardCurrent var(--dbv-flow-speed,5.5s) linear infinite; box-shadow: 0 20px 62px rgba(0,0,0,.38), 0 0 25px color-mix( in srgb, var(--dbv-flow-a) 33%, transparent ), inset 0 0 0 1px color-mix( in srgb, var(--dbv-flow-a) 54%, rgba(255,255,255,.17) ), inset 0 0 26px color-mix( in srgb, var(--dbv-flow-c) 13%, transparent ) !important; backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); } .dbv-profile-experience-grid .profile-header-card{ border-radius:23px !important; } /* Sticky rails + invisible independent scroll. */ .dbv-profile-experience-grid .dbv-pe-rail{ position:sticky !important; top:78px !important; height: calc(100dvh - 92px); max-height: calc(100dvh - 92px); overflow-y:auto !important; overscroll-behavior:contain; scrollbar-width:none; } .dbv-profile-experience-grid .dbv-pe-rail::-webkit-scrollbar{ display:none; } /* Save/renderHeader can never repaint buttons white. */ body.dbv-profile-experience-page .profile-actions .btn, body.dbv-profile-experience-page .profile-actions button, body.dbv-profile-experience-page .profile-actions a.btn, body.dbv-profile-experience-page #followButton, body.dbv-profile-experience-page #followButton.primary{ background: linear-gradient( 135deg, var(--dbv-flow-a), var(--dbv-flow-c) ) !important; background-color: var(--dbv-flow-a) !important; border-color: var(--dbv-flow-a) !important; color: var(--dbv-neon-button-text,#fff) !important; box-shadow: 0 0 18px color-mix( in srgb, var(--dbv-flow-a) 40%, transparent ) !important; } /* Old simple V16 rails must never coexist. */ body.dbv-profile-experience-page .dbv-vnext-left, body.dbv-profile-experience-page .dbv-vnext-right{ display:none !important; } @media(max-width:1020px){ .dbv-profile-experience-grid .dbv-pe-rail{ position:static !important; height:auto; max-height:none; overflow:visible !important; } } /* ========================================================== DBVYRO_PROFILE_BORDER_ORBIT_V18 IMPORTANT: Electricity exists ONLY in the border perimeter. It NEVER paints the content area. Color comes from current Appearance. ========================================================== */ @property --dbv-border-angle{ syntax:''; inherits:false; initial-value:0deg; } :root{ /* * These already receive the creator Appearance colors * from profile-neon-v17.js. */ --dbv-electric-primary: var( --dbv-neon-primary-fixed, var( --dbv-profile-primary-text, var(--profile-accent,#27dfff) ) ); --dbv-electric-secondary: var( --dbv-neon-secondary-fixed, var( --profile-secondary, var(--dbv-electric-primary) ) ); --dbv-electric-speed:4.2s; --dbv-electric-border:3px; --dbv-electric-panel: rgba(4,10,23,.88); --dbv-electric-panel-bottom: rgba(2,7,17,.93); } /* ========================================================== ELECTRIC ORBIT The angle changes. The element itself does NOT rotate. This prevents giant light wedges entering the card. ========================================================== */ @keyframes dbvElectricOrbit{ from{ --dbv-border-angle:0deg; } to{ --dbv-border-angle:360deg; } } /* ========================================================== LEFT / RIGHT RAIL CARDS Existing V17 ::before was responsible for the huge triangular light beams. V18 masks the effect so ONLY THE BORDER remains visible. ========================================================== */ .dbv-profile-experience-grid .dbv-pe-card{ position:relative; isolation:isolate; overflow:hidden; border: var(--dbv-electric-border) solid transparent !important; /* * Normal glass content background. * * Second background is a subtle always-visible * Appearance-colored perimeter. */ background: linear-gradient( 180deg, var(--dbv-electric-panel), var(--dbv-electric-panel-bottom) ) padding-box, linear-gradient( 135deg, color-mix( in srgb, var(--dbv-electric-primary) 58%, transparent ), color-mix( in srgb, var(--dbv-electric-secondary) 28%, transparent ), color-mix( in srgb, var(--dbv-electric-primary) 46%, transparent ) ) border-box !important; box-shadow: 0 18px 52px rgba(0,0,0,.48), 0 0 10px color-mix( in srgb, var(--dbv-electric-primary) 28%, transparent ), 0 0 28px color-mix( in srgb, var(--dbv-electric-primary) 16%, transparent ), inset 0 0 0 1px rgba(255,255,255,.05) !important; } /* * BRIGHT ELECTRICAL CURRENT. * * MASK = only 3px perimeter is visible. * Nothing can enter card content. */ .dbv-profile-experience-grid .dbv-pe-card::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:5 !important; padding: var(--dbv-electric-border) !important; border-radius: inherit !important; /* * Two energy heads travel around the entire perimeter. * * The rest of the border stays dimly illuminated. */ background: conic-gradient( from var(--dbv-border-angle), color-mix( in srgb, var(--dbv-electric-primary) 14%, transparent ) 0deg, color-mix( in srgb, var(--dbv-electric-primary) 14%, transparent ) 238deg, color-mix( in srgb, var(--dbv-electric-primary) 42%, transparent ) 248deg, var(--dbv-electric-primary) 257deg, #ffffff 263deg, var(--dbv-electric-primary) 269deg, color-mix( in srgb, var(--dbv-electric-primary) 32%, transparent ) 280deg, color-mix( in srgb, var(--dbv-electric-primary) 14%, transparent ) 302deg, var(--dbv-electric-secondary) 318deg, #ffffff 323deg, var(--dbv-electric-primary) 328deg, color-mix( in srgb, var(--dbv-electric-primary) 14%, transparent ) 344deg, color-mix( in srgb, var(--dbv-electric-primary) 14%, transparent ) 360deg ) !important; /* * THIS IS THE IMPORTANT PART: * remove the whole center of the pseudo-element. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; mask-composite: exclude !important; animation: dbvElectricOrbit var(--dbv-electric-speed) linear infinite !important; transform:none !important; filter: drop-shadow( 0 0 3px color-mix( in srgb, var(--dbv-electric-primary) 95%, transparent ) ) drop-shadow( 0 0 8px color-mix( in srgb, var(--dbv-electric-primary) 62%, transparent ) ) !important; pointer-events:none !important; } /* * INNER GLASS BORDER. * * This stays still while the exterior electricity * travels around it. */ .dbv-profile-experience-grid .dbv-pe-card::after{ content:"" !important; position:absolute !important; inset:6px !important; z-index:4 !important; border-radius: calc(19px - 5px) !important; border: 1px solid color-mix( in srgb, var(--dbv-electric-primary) 46%, rgba(255,255,255,.18) ) !important; background: transparent !important; box-shadow: inset 0 0 10px rgba(255,255,255,.035), inset 0 0 18px color-mix( in srgb, var(--dbv-electric-primary) 9%, transparent ), 0 0 9px color-mix( in srgb, var(--dbv-electric-primary) 13%, transparent ) !important; pointer-events:none !important; } /* ========================================================== CENTER PROFILE CARDS Header Profile Music Videos Here we use a layered border-box instead of a giant pseudo element. The electric segment is therefore physically confined to the transparent border. ========================================================== */ .dbv-profile-experience-grid .profile-header-card, .dbv-profile-experience-grid .profile-posts, .dbv-profile-experience-grid #dbProfileMusicCatalogV2, .dbv-profile-experience-grid #dbProfileMusic, .dbv-profile-experience-grid .db-profile-music-v2{ --dbv-center-radius:22px; border: var(--dbv-electric-border) solid transparent !important; /* * Layer 1 = actual panel. * * Layer 2 = electrical perimeter. * padding-box prevents Layer 2 from entering content. */ background: linear-gradient( 180deg, rgba(5,12,27,.88), rgba(2,7,17,.92) ) padding-box, conic-gradient( from var(--dbv-border-angle), color-mix( in srgb, var(--dbv-electric-primary) 18%, transparent ) 0deg, color-mix( in srgb, var(--dbv-electric-primary) 18%, transparent ) 226deg, color-mix( in srgb, var(--dbv-electric-primary) 48%, transparent ) 241deg, var(--dbv-electric-primary) 253deg, #ffffff 260deg, var(--dbv-electric-primary) 268deg, color-mix( in srgb, var(--dbv-electric-primary) 28%, transparent ) 284deg, color-mix( in srgb, var(--dbv-electric-primary) 16%, transparent ) 307deg, var(--dbv-electric-secondary) 321deg, #ffffff 327deg, var(--dbv-electric-primary) 334deg, color-mix( in srgb, var(--dbv-electric-primary) 18%, transparent ) 350deg, color-mix( in srgb, var(--dbv-electric-primary) 18%, transparent ) 360deg ) border-box !important; animation: dbvElectricOrbit var(--dbv-electric-speed) linear infinite !important; box-shadow: 0 18px 52px rgba(0,0,0,.43), 0 0 12px color-mix( in srgb, var(--dbv-electric-primary) 25%, transparent ), 0 0 30px color-mix( in srgb, var(--dbv-electric-primary) 12%, transparent ), inset 0 0 0 1px color-mix( in srgb, var(--dbv-electric-primary) 24%, rgba(255,255,255,.08) ) !important; } /* ========================================================== HEADER — slightly stronger electricity ========================================================== */ .dbv-profile-experience-grid .profile-header-card{ --dbv-electric-speed:3.7s; box-shadow: 0 20px 62px rgba(0,0,0,.48), 0 0 14px color-mix( in srgb, var(--dbv-electric-primary) 38%, transparent ), 0 0 38px color-mix( in srgb, var(--dbv-electric-primary) 16%, transparent ), inset 0 0 0 1px rgba(255,255,255,.07) !important; } /* ========================================================== ARENA — stronger perimeter ========================================================== */ .dbv-profile-experience-grid .dbv-pe-right .dbv-pe-card:first-child{ --dbv-electric-speed:3.5s; box-shadow: 0 18px 52px rgba(0,0,0,.50), 0 0 14px color-mix( in srgb, var(--dbv-electric-primary) 40%, transparent ), 0 0 34px color-mix( in srgb, var(--dbv-electric-primary) 18%, transparent ), inset 0 0 0 1px rgba(255,255,255,.06) !important; } /* ========================================================== APPEARANCE COLOR ALSO CONTROLS ACTIONS ========================================================== */ body.dbv-profile-experience-page .dbv-pe-button, body.dbv-profile-experience-page .profile-actions .btn, body.dbv-profile-experience-page .profile-actions button, body.dbv-profile-experience-page .profile-actions a.btn, body.dbv-profile-experience-page #followButton{ border-color: color-mix( in srgb, var(--dbv-electric-primary) 70%, transparent ) !important; box-shadow: 0 0 12px color-mix( in srgb, var(--dbv-electric-primary) 28%, transparent ) !important; } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .dbv-profile-experience-grid .dbv-pe-card::before, .dbv-profile-experience-grid .profile-header-card, .dbv-profile-experience-grid .profile-posts, .dbv-profile-experience-grid #dbProfileMusicCatalogV2, .dbv-profile-experience-grid #dbProfileMusic, .dbv-profile-experience-grid .db-profile-music-v2{ animation:none !important; } } /* ========================================================== DBVYRO_PROFILE_V19_SMOOTH_ELECTRIC_BORDER V18 animated full conic gradients using a custom property. That repaints the entire card on every frame. V19: - card itself is static - border itself is static - only a very small SVG stroke moves - electricity remains ONLY on perimeter ========================================================== */ /* * Stop ALL expensive V17/V18 full-card gradient animations. */ .dbv-profile-experience-grid .dbv-pe-card::before{ content:none !important; animation:none !important; background:none !important; filter:none !important; } .dbv-profile-experience-grid .profile-header-card, .dbv-profile-experience-grid .profile-posts, .dbv-profile-experience-grid #dbProfileMusicCatalogV2, .dbv-profile-experience-grid #dbProfileMusic, .dbv-profile-experience-grid .db-profile-music-v2{ animation:none !important; border: 2px solid color-mix( in srgb, var(--dbv-electric-primary) 44%, rgba(255,255,255,.18) ) !important; background: linear-gradient( 180deg, rgba(4,10,23,.88), rgba(2,7,17,.93) ) !important; } .dbv-profile-experience-grid .dbv-pe-card{ animation:none !important; border: 2px solid color-mix( in srgb, var(--dbv-electric-primary) 44%, rgba(255,255,255,.18) ) !important; background: linear-gradient( 180deg, rgba(4,10,23,.88), rgba(2,7,17,.93) ) !important; } /* * Keep the stationary INNER glass line. */ .dbv-profile-experience-grid .dbv-pe-card::after{ content:"" !important; position:absolute !important; inset:5px !important; z-index:4 !important; border-radius: calc(19px - 4px) !important; border: 1px solid color-mix( in srgb, var(--dbv-electric-primary) 28%, rgba(255,255,255,.13) ) !important; background:transparent !important; box-shadow: inset 0 0 10px rgba(255,255,255,.025) !important; pointer-events:none !important; } /* ========================================================== GPU-LIGHT SVG PERIMETER ========================================================== */ .dbv-v19-electric-host{ position:relative !important; } .dbv-v19-border-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:90; overflow:visible; pointer-events:none; contain:layout paint style; } .dbv-v19-border-base{ fill:none; stroke: var(--dbv-electric-primary); stroke-width:1.5; opacity:.32; vector-effect: non-scaling-stroke; } /* * Main electricity head. * * pathLength=100 in JS means: * 8 units bright + 92 empty. */ .dbv-v19-border-runner{ fill:none; stroke: var(--dbv-electric-primary); stroke-width:3; stroke-linecap:round; stroke-dasharray: 8 92; stroke-dashoffset:0; vector-effect: non-scaling-stroke; filter: drop-shadow( 0 0 2px var(--dbv-electric-primary) ) drop-shadow( 0 0 6px var(--dbv-electric-primary) ); animation: dbvV19ElectricTravel 3.25s linear infinite; } /* * White electrical core inside the moving head. */ .dbv-v19-border-core{ fill:none; stroke:#fff; stroke-width:1.05; stroke-linecap:round; stroke-dasharray: 2.6 97.4; stroke-dashoffset:0; opacity:.96; vector-effect: non-scaling-stroke; filter: drop-shadow( 0 0 3px var(--dbv-electric-primary) ); animation: dbvV19ElectricTravel 3.25s linear infinite; } /* * Second smaller energy pulse on the opposite side. */ .dbv-v19-border-runner-two{ fill:none; stroke: var(--dbv-electric-secondary); stroke-width:2; stroke-linecap:round; stroke-dasharray: 4 96; stroke-dashoffset:-50; opacity:.82; vector-effect: non-scaling-stroke; filter: drop-shadow( 0 0 4px var(--dbv-electric-secondary) ); animation: dbvV19ElectricTravelSecond 3.25s linear infinite; } @keyframes dbvV19ElectricTravel{ to{ stroke-dashoffset:-100; } } @keyframes dbvV19ElectricTravelSecond{ from{ stroke-dashoffset:-50; } to{ stroke-dashoffset:-150; } } /* * Browser only repaints a thin SVG stroke, * not a 1600px glass panel. */ .dbv-v19-border-runner, .dbv-v19-border-runner-two, .dbv-v19-border-core{ will-change:stroke-dashoffset; } /* ========================================================== V19 BACKGROUND OWNERSHIP ========================================================== */ #dbvV19ProfileBackground{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#02050b; } #dbvV19ProfileBackground .dbv-v19-bg-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; max-width:none; user-select:none; } #dbvV19ProfileBackground .dbv-v19-bg-overlay{ position:absolute; inset:0; pointer-events:none; } /* * V19 owns the exact saved image. * Disable duplicate older visual layers only after * V19 has successfully created its own layer. */ body.dbv-v19-background-owned .db-profile-background-layer, body.dbv-v19-background-owned .dbv-profile-catalog-background{ opacity:0 !important; visibility:hidden !important; } body.dbv-profile-experience-page.dbv-v19-background-owned{ background-image:none !important; background-color:#02050b !important; } /* * Keep background clearly visible. * Old V17 overlay was too dark. */ body.dbv-profile-experience-page.dbv-v19-background-owned::after{ background: linear-gradient( 180deg, rgba(1,4,10,.05), rgba(1,4,10,.14) 55%, rgba(1,4,10,.28) ) !important; } /* Content stays above V19 background. */ body.dbv-profile-experience-page .dbv-profile-experience-grid{ position:relative; z-index:2; } body.dbv-profile-experience-page .topbar{ position:relative; z-index:50 !important; } /* ========================================================== V19 ARENA ROTATION LABEL ========================================================== */ .dbv-v19-fair-label{ display:inline-flex; align-items:center; gap:4px; color: color-mix( in srgb, var(--dbv-electric-primary) 74%, #fff ); font-weight:800; } @media(prefers-reduced-motion:reduce){ .dbv-v19-border-runner, .dbv-v19-border-runner-two, .dbv-v19-border-core{ animation:none !important; } } /* ========================================================== DBVYRO_PROFILE_V20_PERFORMANCE ========================================================== */ /* * Retire V19 electrical layers. */ .dbv-v19-border-svg{ display:none !important; } .dbv-profile-experience-grid .dbv-pe-card::before{ content:none !important; display:none !important; animation:none !important; filter:none !important; } .dbv-profile-experience-grid .profile-header-card, .dbv-profile-experience-grid .profile-posts, .dbv-profile-experience-grid #dbProfileMusicCatalogV2, .dbv-profile-experience-grid #dbProfileMusic, .dbv-profile-experience-grid .db-profile-music-v2, .dbv-profile-experience-grid .dbv-pe-card{ animation:none !important; backface-visibility:hidden; transform:translateZ(0); } /* ========================================================== SINGLE PROFILE BACKGROUND ========================================================== */ #dbvV20Background{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#02050b; } #dbvV20Background .dbv-v20-bg-image{ position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; will-change:transform; } #dbvV20Background .dbv-v20-bg-overlay{ position:absolute; inset:0; pointer-events:none; } body.dbv-v20-bg-owned #dbvV19ProfileBackground, body.dbv-v20-bg-owned .db-profile-background-layer, body.dbv-v20-bg-owned .dbv-profile-catalog-background{ display:none !important; visibility:hidden !important; opacity:0 !important; } body.dbv-v20-bg-owned{ background:#02050b !important; background-image:none !important; } body.dbv-v20-bg-owned::before, body.dbv-v20-bg-owned::after{ background:none !important; background-image:none !important; pointer-events:none !important; } body.dbv-v20-bg-owned .dbv-profile-experience-grid{ position:relative; z-index:2; } body.dbv-v20-bg-owned .topbar{ position:relative; z-index:100 !important; } /* ========================================================== ONE ELECTRIC CURRENT PER CARD ========================================================== */ .dbv-v20-electric-host{ position:relative !important; } .dbv-v20-border{ position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; z-index:80; pointer-events:none; } .dbv-v20-border-static{ fill:none; stroke: color-mix( in srgb, var(--dbv-electric-primary) 45%, rgba(255,255,255,.20) ); stroke-width:1.2; opacity:.65; vector-effect:non-scaling-stroke; } .dbv-v20-border-electric{ fill:none; stroke: var(--dbv-electric-primary); stroke-width:2.8; stroke-linecap:round; stroke-dasharray: 7 93; stroke-dashoffset:0; vector-effect:non-scaling-stroke; filter: drop-shadow( 0 0 3px var(--dbv-electric-primary) ) drop-shadow( 0 0 6px color-mix( in srgb, var(--dbv-electric-primary) 60%, transparent ) ); animation: dbvV20Electric 3.6s linear infinite; will-change: stroke-dashoffset; } @keyframes dbvV20Electric{ to{ stroke-dashoffset:-100; } } .dbv-v20-border-paused .dbv-v20-border-electric{ animation-play-state:paused !important; } /* ========================================================== MEDIA ========================================================== */ .dbv-v20-video{ display:block; width:100%; height:100%; object-fit:cover; background:#02050b; } @media(prefers-reduced-motion:reduce){ .dbv-v20-border-electric{ animation:none !important; } }