/* ========================================================================== GRAVATAÍ SUMMIT — tema VIVO Versão colorida e tech: gradiente violeta → magenta → brasa, com verde-gravatá elétrico e ciano de acento. Ativa com . ========================================================================== */ html[data-tema='vivo'] { /* base — violeta profundo no lugar do basalto */ --breu: #0A0320; --breu-2: #140833; --breu-3: #1D0D45; --linha: #2E1466; --linha-forte: #4A1F9E; --linha-fraca: #6B34C9; /* primária elétrica */ --gravata-000: #7CFFD4; --gravata-viva:#00F5A8; --gravata: #00E58F; --gravata-funda:#00B37A; --gravata-noite:#046B52; /* violeta e magenta entram como cor de marca */ --violeta: #8B2CF5; --violeta-viva:#A855F7; --magenta: #F0189B; --magenta-viva:#FF4FC0; --agua-clara: #A5F3FC; --agua-viva: #22D3EE; --agua: #06B6D4; --agua-funda: #0891B2; --forja-clara: #FFA94D; --forja: #FF7A18; --forja-funda: #E85D04; --campo-claro: #FFE066; --campo: #FFD400; --giz: #FFFFFF; --giz-suave: #D9CCF5; --giz-fraco: #A08FCC; --asfalto: #7C6BA8; --carta: rgba(255,255,255,.055); --carta-alta: rgba(255,255,255,.10); --vidro: rgba(10,3,32,.78); --raio: 18px; --raio-g: 30px; --grad-marca: linear-gradient(115deg, #8B2CF5 0%, #F0189B 46%, #FF7A18 100%); --grad-frio: linear-gradient(115deg, #00E58F 0%, #22D3EE 55%, #8B2CF5 100%); } /* ---------- herói ---------- */ html[data-tema='vivo'] .heroi__fundo::before { background: radial-gradient(52% 46% at 14% 8%, rgba(139,44,245,.55), transparent 64%), radial-gradient(46% 44% at 88% 4%, rgba(240,24,155,.45), transparent 62%), radial-gradient(60% 50% at 62% 96%, rgba(255,122,24,.38), transparent 66%), radial-gradient(44% 40% at 8% 88%, rgba(0,229,143,.30), transparent 64%); animation: respira 13s ease-in-out infinite alternate; } html[data-tema='vivo'] .heroi__malha { opacity: .28; mask-image: radial-gradient(circle at 50% 34%, #000 6%, transparent 66%); } html[data-tema='vivo'] .heroi h1 { letter-spacing: -.05em; } html[data-tema='vivo'] .heroi h1 em { background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-tema='vivo'] .heroi__meta dd { background: var(--grad-frio); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.6rem; } html[data-tema='vivo'] .selo { border-color: var(--linha-forte); background: rgba(139,44,245,.18); } html[data-tema='vivo'] .selo b { background: var(--grad-marca); color: #fff; } /* ---------- botões ---------- */ html[data-tema='vivo'] .btn { font-weight: 700; padding: .95rem 1.7rem; } html[data-tema='vivo'] .btn--forte { background: var(--grad-marca); color: #fff; box-shadow: 0 14px 40px -14px rgba(240,24,155,.9); } html[data-tema='vivo'] .btn--forte:hover { filter: brightness(1.12) saturate(1.1); background: var(--grad-marca); } html[data-tema='vivo'] .btn--forja { background: linear-gradient(115deg, #FF7A18, #FFD400); color: #2B1000; } html[data-tema='vivo'] .btn--linha { border-color: var(--linha-forte); background: rgba(255,255,255,.04); } html[data-tema='vivo'] .btn--linha:hover { border-color: var(--magenta-viva); background: rgba(240,24,155,.14); } /* ---------- faixa ---------- */ html[data-tema='vivo'] .faixa { background: var(--grad-marca); border: 0; padding-block: 1rem; } html[data-tema='vivo'] .faixa span { color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } html[data-tema='vivo'] .faixa span::after { content: '✦'; color: rgba(255,255,255,.75); } /* ---------- olho e títulos ---------- */ html[data-tema='vivo'] .olho { color: var(--magenta-viva); } html[data-tema='vivo'] .olho::before { background: var(--grad-marca); width: 34px; height: 3px; border-radius: 3px; } html[data-tema='vivo'] .destaque-txt { color: var(--gravata-viva); } /* ---------- cartões e números ---------- */ html[data-tema='vivo'] .cartao { background: linear-gradient(160deg, rgba(139,44,245,.16), rgba(255,255,255,.03) 62%); border-color: var(--linha); } html[data-tema='vivo'] .cartao:hover { border-color: var(--magenta); box-shadow: 0 20px 50px -26px rgba(240,24,155,.7); } html[data-tema='vivo'] .numero { background: linear-gradient(160deg, rgba(0,229,143,.12), rgba(34,211,238,.06) 60%, transparent); border-color: var(--linha); position: relative; overflow: hidden; } html[data-tema='vivo'] .numero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-frio); } html[data-tema='vivo'] .numero__v { background: var(--grad-frio); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-tema='vivo'] .numero:nth-child(2n)::before { background: var(--grad-marca); } html[data-tema='vivo'] .numero:nth-child(2n) .numero__v { background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; } /* ---------- trilhas: cor cheia ---------- */ html[data-tema='vivo'] .trilha { background: linear-gradient(158deg, color-mix(in srgb, var(--cor) 26%, #140833), #140833 66%); border-color: color-mix(in srgb, var(--cor) 42%, transparent); } html[data-tema='vivo'] .trilha::before { height: 5px; } html[data-tema='vivo'] .trilha::after { opacity: .22; } html[data-tema='vivo'] .trilha:hover { box-shadow: 0 24px 60px -30px var(--cor); } html[data-tema='vivo'] .trilha:hover::after { opacity: .4; } html[data-tema='vivo'] .trilha h3 { color: #fff; } html[data-tema='vivo'] .trilha__dado { border-top-color: color-mix(in srgb, var(--cor) 34%, transparent); color: var(--giz-suave); } /* ---------- eixos ---------- */ html[data-tema='vivo'] .eixo { background: linear-gradient(100deg, color-mix(in srgb, var(--cor) 20%, #140833), #140833 58%); border-left-width: 6px; border-radius: 0 var(--raio-g) var(--raio-g) 0; } /* ---------- sessões ---------- */ html[data-tema='vivo'] .sessao { background: rgba(255,255,255,.045); } html[data-tema='vivo'] .sessao:hover { background: color-mix(in srgb, var(--cor) 14%, transparent); box-shadow: 0 16px 40px -26px var(--cor); } html[data-tema='vivo'] .sessao__barra { width: 6px; } html[data-tema='vivo'] .pilula[aria-pressed='true'] { color: #fff; box-shadow: 0 8px 22px -10px var(--cor, var(--magenta)); } html[data-tema='vivo'] .bloco-hora__h { background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- ingressos ---------- */ html[data-tema='vivo'] .ingresso { background: linear-gradient(165deg, rgba(139,44,245,.18), #140833 62%); } html[data-tema='vivo'] .ingresso--eleito { border-color: transparent; background: linear-gradient(165deg, rgba(240,24,155,.28), #1D0D45 66%); box-shadow: 0 0 0 2px var(--magenta), 0 26px 60px -28px rgba(240,24,155,.85); } html[data-tema='vivo'] .ingresso--eleito::before { background: var(--grad-marca); color: #fff; } html[data-tema='vivo'] .ingresso__p { background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-tema='vivo'] .ingresso li::before { background: var(--gravata-viva); } /* ---------- patrocínio ---------- */ html[data-tema='vivo'] .patro-mestre { border-color: transparent; background: linear-gradient(125deg, rgba(139,44,245,.34), rgba(240,24,155,.22) 45%, rgba(0,229,143,.14)); box-shadow: 0 0 0 1px var(--linha-forte), 0 30px 70px -40px rgba(139,44,245,.9); } html[data-tema='vivo'] .patro-mestre__selo { color: var(--gravata-viva); } html[data-tema='vivo'] .patro-logo { background: rgba(10,3,32,.72); border-color: var(--linha-forte); } html[data-tema='vivo'] .patro-vaga:hover { border-color: var(--magenta); color: var(--magenta-viva); background: rgba(240,24,155,.1); } /* ---------- topo e rodapé ---------- */ html[data-tema='vivo'] .marca span { background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-tema='vivo'] .rodape { background: linear-gradient(180deg, #140833, #0A0320); } html[data-tema='vivo'] .rodape a:hover { color: var(--magenta-viva); } /* ---------- credencial do app ---------- */ html[data-tema='vivo'] .credencial { background: linear-gradient(150deg, #8B2CF5, #F0189B 52%, #FF7A18); border-color: transparent; box-shadow: 0 30px 70px -34px rgba(240,24,155,.95); } html[data-tema='vivo'] .credencial__tipo { color: #fff; } html[data-tema='vivo'] .credencial__org { color: rgba(255,255,255,.85); } html[data-tema='vivo'] .credencial__off { color: #fff; } html[data-tema='vivo'] .app__barra a[aria-current] { color: var(--magenta-viva); } html[data-tema='vivo'] .selo-v[data-feito='sim'] { border-color: var(--magenta); background: rgba(240,24,155,.16); color: var(--magenta-viva); } html[data-tema='vivo'] .barra-progresso div { background: var(--grad-marca); } /* ---------- alternador de tema ---------- */ .tema-bt { display: inline-flex; align-items: center; gap: .45rem; border: var(--borda); background: var(--carta); border-radius: 100px; padding: .42rem .8rem; font-size: var(--t-xs); font-weight: 700; cursor: pointer; color: var(--giz-suave); letter-spacing: .04em; transition: all var(--transicao); white-space: nowrap; } .tema-bt:hover { color: var(--giz); border-color: var(--linha-forte); } .tema-bt__ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--gravata); flex: none; } html[data-tema='vivo'] .tema-bt__ponto { background: linear-gradient(115deg, #8B2CF5, #F0189B 50%, #FF7A18); } @media (max-width: 1040px) { .tema-bt span:last-child { display: none; } }