/* * BTV Header Premium Actions v1.0.1 * Escopo: SOMENTE Clicky+ e Anuncie no header desktop. * #RMDEC: não reposiciona header, não altera sticky, menu, logo, busca ou mobile. */ :root{ --btv-hpa-blue: var(--blue-velho-chico, var(--tv-blue-velho-chico, var(--tuviu-blue-velho-chico, var(--tvg-bg, #0A2239)))); --btv-hpa-red: var(--red-sertao, var(--tv-red-sertao, var(--tuviu-red-sertao, var(--tvg-border, #B01F2E)))); --btv-hpa-white-gold: var(--branco-gold-premium, var(--white-gold-premium, var(--tv-white-gold-premium, var(--tuviu-white-gold-premium, var(--tvg-soft, #FFF9F2))))); } @media (min-width:1025px){ /* Base comum */ header .btv-hpa-clicky, header .btv-hpa-anuncie{ position:relative !important; isolation:isolate; overflow:hidden; transform:translateZ(0); border-radius:10px !important; transition: transform .18s ease, box-shadow .22s ease, filter .22s ease, background .22s ease, color .22s ease, border-color .22s ease !important; width:auto !important; max-width:none; align-self:center; } /* CLICKY+ * fundo = Branco Gold Premium * borda = Red Sertão * texto = Blue Velho Chico */ header .btv-hpa-clicky{ background: linear-gradient( 180deg, color-mix(in srgb, var(--btv-hpa-white-gold) 97%, white 3%) 0%, var(--btv-hpa-white-gold) 58%, color-mix(in srgb, var(--btv-hpa-white-gold) 93%, var(--btv-hpa-red) 7%) 100% ) !important; border:1.5px solid var(--btv-hpa-red) !important; color:var(--btv-hpa-blue) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 8px 20px color-mix(in srgb, var(--btv-hpa-blue) 10%, transparent) !important; min-height:44px !important; padding-inline:18px !important; } header .btv-hpa-clicky, header .btv-hpa-clicky *{ color:var(--btv-hpa-blue) !important; } /* * O nome Clicky+ fica realmente centralizado no centro geométrico do botão, * independente do ícone à esquerda e da seta à direita. */ header .btv-hpa-clicky .btv-hpa-clicky-label{ position:absolute !important; left:50%; top:50%; transform:translate(-50%,-50%); z-index:10; white-space:nowrap; font-size:14px !important; line-height:1 !important; font-weight:900 !important; letter-spacing:.01em; color:var(--btv-hpa-blue) !important; text-shadow:0 1px 0 rgba(255,255,255,.70); pointer-events:none; } header .btv-hpa-clicky .tvg-clicky-caret{ margin-left:auto !important; position:relative; z-index:5; font-weight:900; } /* Qualquer ícone/SVG que já exista permanece na esquerda. */ header .btv-hpa-clicky > svg, header .btv-hpa-clicky > .icon, header .btv-hpa-clicky > [class*="icon"]{ position:relative; z-index:5; margin-right:auto; } /* ANUNCIE * fundo = Red Sertão * borda = Blue Velho Chico * texto = Branco Gold Premium */ header .btv-hpa-anuncie{ background: linear-gradient( 180deg, color-mix(in srgb, var(--btv-hpa-red) 90%, white 10%) 0%, var(--btv-hpa-red) 48%, color-mix(in srgb, var(--btv-hpa-red) 86%, black 14%) 100% ) !important; border:1.5px solid var(--btv-hpa-blue) !important; color:var(--btv-hpa-white-gold) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 9px 22px color-mix(in srgb, var(--btv-hpa-blue) 15%, transparent) !important; } header .btv-hpa-anuncie, header .btv-hpa-anuncie *{ color:var(--btv-hpa-white-gold) !important; } /* * LUZ ANDANDO NO CONTORNO — v1.0.1 * * A luz NÃO gira a moldura. * Um pequeno segmento luminoso percorre o SVG do perímetro. */ header .btv-hpa-border-light{ position:absolute; inset:0; width:100%; height:100%; z-index:8; pointer-events:none; overflow:visible; } header .btv-hpa-border-light rect{ fill:none; vector-effect:non-scaling-stroke; stroke:var(--btv-hpa-white-gold); stroke-width:2.1; stroke-linecap:round; stroke-dasharray:8 92; stroke-dashoffset:0; filter: drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 4px color-mix(in srgb, var(--btv-hpa-white-gold) 82%, transparent)); animation:btvHpaLightWalk 5.2s linear infinite; } /* Anuncie: luz discretamente mais presente. */ header .btv-hpa-anuncie .btv-hpa-border-light rect{ stroke-width:2.35; stroke-dasharray:10 90; animation-duration:4.4s; } /* Profundidade estática suave — sem faixa giratória. */ header .btv-hpa-clicky::after, header .btv-hpa-anuncie::after{ content:""; position:absolute; inset:1px; border-radius:9px; pointer-events:none; z-index:0; background: linear-gradient( 135deg, rgba(255,255,255,.18) 0%, transparent 32%, transparent 72%, rgba(255,255,255,.06) 100% ); } header .btv-hpa-clicky > :not(.btv-hpa-border-light), header .btv-hpa-anuncie > :not(.btv-hpa-border-light){ position:relative; z-index:2; } /* CRITICAL FIX v1.0.2: * o SVG da luz nunca participa do fluxo/layout. */ header .btv-hpa-clicky > .btv-hpa-border-light, header .btv-hpa-anuncie > .btv-hpa-border-light{ position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; flex:none !important; z-index:8 !important; pointer-events:none !important; } header .btv-hpa-clicky:hover, header .btv-hpa-anuncie:hover{ transform:translateY(-2px); filter:saturate(1.03); } header .btv-hpa-clicky:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 12px 26px color-mix(in srgb, var(--btv-hpa-blue) 13%, transparent) !important; } header .btv-hpa-anuncie:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 14px 30px color-mix(in srgb, var(--btv-hpa-red) 23%, transparent) !important; } header .btv-hpa-clicky:focus-visible, header .btv-hpa-anuncie:focus-visible{ outline:3px solid color-mix(in srgb, var(--btv-hpa-white-gold) 80%, transparent) !important; outline-offset:3px !important; } } @keyframes btvHpaLightWalk{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-100; } } /* Acessibilidade */ @media (prefers-reduced-motion:reduce){ header .btv-hpa-border-light rect{ animation:none !important; } header .btv-hpa-clicky, header .btv-hpa-anuncie{ transition:none !important; } }