/* ========================================================== HERO EXPO THEME — Main Stylesheet Suporte a Light/Dark Mode ========================================================== */ /* v1.45.16 — Inter pra areas internas (perfil/painel/modais/legal/edicao single). Display Bangers continua nas paginas de hype (atracoes, cronograma, home). v1.89.6 — Inter migrou do @import (render-blocking) pra wp_enqueue_style com preconnect, ver functions.php. Não redeclarar @import aqui. */ /* v1.89.6 — Design System 2026: fontes self-hospedadas da LANDING (não mexe em Outfit, que continua a fonte única da área Hero/comunidade). Arquivos em assets/fonts/, baixados do Google Fonts (subset latin) — ver PLANO-IMPLEMENTACAO do handoff, Marco 0. font-display:swap evita bloqueio; o peso mais usado acima da dobra (800) tem preload no , ver header.php. */ @font-face{font-family:'League Spartan';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/league-spartan-700.woff2') format('woff2')} @font-face{font-family:'League Spartan';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/league-spartan-800.woff2') format('woff2')} @font-face{font-family:'League Spartan';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/league-spartan-900.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-400.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-500.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/geist-600.woff2') format('woff2')} @font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/geist-700.woff2') format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-mono-400.woff2') format('woff2')} @font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-mono-500.woff2') format('woff2')} /* ── Reset & Variables ── */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --lime:#a6df00;--lime-dark:#92c800;--lime-glow:#c6f000; /* v2.3.0 — papel que faltava: texto/hover lime sobre superfície CLARA. --lime-dark é claro demais pra legibilidade de corpo de texto — hero-market e hero-social, cada um por conta própria, já tinham inventado #5a7a00 pra isso (achado na migração de tokens desses 2 módulos). Invariante, igual --lime/--lime-dark (nunca muda com o modo). */ --lime-text:#5a7a00; --charcoal:#2D2D2D;--dark:#1A1A1A;--mid-gray:#4A4A4A; --light-gray:#F5F5F5;--white:#FFFFFF; --pink:#FF4D8D;--cyan:#00D4FF;--orange:#FF8C42;--purple:#9B59FF;--red:#FF3B3B; --gold:#E6B325; /* v1.80.6 — dourado canônico (Geek Coin), harmonizado com a paleta */ /* v1.90.3 — âmbar de escassez ("Restam N", barra quase cheia). Depende da POLARIDADE, não do modo: escurece sobre fundo claro, clareia sobre escuro. Por isso é redeclarado também nos blocos de banda mais abaixo. */ --warn-text:#D9480F;--warn-bar-a:#E8A33D;--warn-bar-b:#F76707;--error-text:#B02020; /* v1.89.6 — Design System 2026: League Spartan é o novo --font-display, só no escopo da LANDING (títulos de seção, hero, etc.) — Outfit (--font-body) continua intocado, é a fonte única da área Hero/comunidade (não migra). --font-landing-sans/--font-landing-mono ficam registrados aqui (fontes já baixadas + @font-face acima) prontos pra próxima fase (Header/seções), que vai aplicá-los no escopo certo das seções da landing sem arriscar trocar a fonte de corpo em componentes já em produção. */ --font-display:'League Spartan',sans-serif;--font-body:'Outfit',sans-serif; --font-landing-sans:'Geist',system-ui,sans-serif;--font-landing-mono:'Geist Mono',ui-monospace,monospace; /* v1.45.16 — fonte limpa pra UI interna (Inter: padrao Figma/Linear/Vercel) */ --font-clean:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; /* v1.85.0 — botão passa a ser CANTO SUAVE (8px), não pílula. O README do pacote se contradiz: a tabela de raios diz "12 · botão, tile" e o texto logo abaixo diz "botão é sempre pílula (999px)". O site de referência implementa a TABELA (7–8px medidos), e o usuário confirmou esse formato. A pílula continua existindo — mas no papel que a mesma tabela dá a ela: "999 · tag, eyebrow, arrow". Chip e selo seguem redondos. */ --r-btn:8px; --r-chip:999px; /* tag, eyebrow, chip de filtro — o que a pílula realmente é */ /* Glow do botão primário, medido na referência (0 8px 24px a ~15% do volt). Reintroduzido de propósito: a Fase 1 tinha removido por causa da frase "sem glow em nenhum modo" do README, que descreve o protótipo antigo. */ --btn-glow:none; /* glow lime de botao ABOLIDO (decisao do user, ago/2026) */ /* v1.89.8 — Design System 2026 (Fase 4, Home): cards/mídia têm canto quadrado NUNCA pílula — mas isso não significa canto RETO. --r-card/--r-media vêm do tokens.css do handoff e substituem o visual "HUD" anguloso (clip-path + --hud-clip) que várias seções usavam antes — confirmado com o usuário e com o site de referência (chatgpt.site) que TODOS os cards arredondam. */ --r-card:20px;--r-media:28px; /* Design System 2026 — papéis de banda (base/contraste/elevado), usados pelo campo bg_role por seção (ver [data-bg-role] mais abaixo) e, na próxima fase, pelo Header. --paper e --ink são propositalmente PRÓXIMOS de --bg-alt/--bg-inverted (não idênticos) — vêm do tokens.css do handoff. */ --paper:#F3F4F0;--ink:#090A09; /* Semantic */ --bg-body:#FFF;--bg-surface:#FFF;--bg-alt:#F5F5F5;--bg-elevated:#FFF;--bg-inverted:#1A1A1A; --text-primary:#2D2D2D;--text-secondary:#4A4A4A;--text-on-dark:#FFF; --border:#EBEBEB;--border-hover:#D0D0D0;--card-bg:#FFF;--card-border:#EBEBEB; --input-bg:#FFF;--input-border:#E0E0E0; --shadow:rgba(0,0,0,.08);--shadow-strong:rgba(0,0,0,.15); /* v1.89.7 — --nav-scrolled/--logo-filter removidos: declarados, nunca consumidos por nenhuma regra .navbar/.nav-logo (tokens mortos). --bg-body-rgb: canais separados pra usar --bg-body dentro de rgba() com alpha (a navbar precisa de translucência) — ver header.php e as regras .navbar abaixo, que antes hardcodeavam rgba(255,255,255,...) solto. */ --bg-body-rgb:255,255,255; } [data-theme="dark"]{ /* v1.89.6 — Design System 2026, recalibração das 4 superfícies do modo Blade (era #121212/#161616/#1E1E1E/#2A2A2A — valores próximos, ajustados pro tokens.css do handoff). --bg-body já batia (#0A0A0A), não mudou. */ --bg-body:#0A0A0A;--bg-surface:#121214;--bg-alt:#17171B;--bg-elevated:#202027;--bg-inverted:#080808; --bg-body-rgb:10,10,10; --text-primary:#E8E8E8;--text-secondary:#8A8A8A;--text-on-dark:#E8E8E8; --border:#2A2A30;--border-hover:#3D3D3D;--card-bg:#17171B;--card-border:#252525; --input-bg:#1A1A1A;--input-border:#333; --shadow:rgba(0,0,0,.3);--shadow-strong:rgba(0,0,0,.5); --white:#0A0A0A;--light-gray:#121212;--charcoal:#E8E8E8;--mid-gray:#8A8A8A;--dark:#080808; --gold:#F0C24B; /* dourado um pouco mais claro no dark p/ legibilidade */ --warn-text:#FFB020;--warn-bar-a:#A06A00;--warn-bar-b:#FFB020;--error-text:#FF8A8A; } /* ══════════════════════════════════════════════════════════════════════ v1.90.2 — PAPÉIS DE BANDA (Design System 2026, §01b) Fonte: "Design System Expo Nerd 2026.dc.html" — matriz das 14 seções. Duas camadas que NÃO se confundem: o MODO do site (preferência do usuário, vira o tema inteiro) e o RITMO das seções (decisão editorial). Cada seção declara um PAPEL, nunca uma cor. v1.99.0 — DIVERGÊNCIA DELIBERADA DO PACOTE, decisão do usuário: o pacote manda inverter a polaridade no escuro ("a alternância continua existindo nos dois modos, apenas com a polaridade invertida" — texto literal do Design System). O usuário pediu o OPOSTO: trocar de modo não deve reacender a zebra — deve só aplicar o estilo real do modo escuro. Ou seja, "base" e "contraste" agora resolvem em DOIS TONS DE ESCURO no modo Blade (nunca clareiam), não mais um claro/um escuro invertido: base claro #F3F4F0 escuro #090A09 (--ink) — o "silêncio" contraste claro #090A09 escuro #17171B (--bg-alt) — a batida, sem clarear elevado claro #FFFFFF escuro #111311 — NÃO conta como batida (não mudou) mídia escuro nos dois modos — invariante (não mudou) O papel vem do PHP (class-helpers.php, hook hero_before_section), fixo por seção; o campo bg_role do Editor Visual sobrescreve seção a seção. Por que o bloco de tokens abaixo: uma seção "contraste" no modo claro é um fundo ESCURO dentro de uma página CLARA. O pacote chama isso de "4 combinações, não 2" — todo componente precisa funcionar sobre base e sobre contraste nos dois modos. Como o tema já inverte --white/--charcoal/ --mid-gray/--border/... no bloco [data-theme="dark"] acima, basta reaplicar esse mesmo conjunto LOCALMENTE na banda: as ~97 regras de componente que consomem esses tokens passam a acertar sozinhas por herança, sem precisar ser reescritas uma a uma. Esse bloco NÃO tem `[data-theme]` — vale nos dois modos, porque "contraste" sempre foi/continua sendo uma superfície escura; só o `--band-bg` (mais abaixo) muda de tom entre os modos. ══════════════════════════════════════════════════════════════════════ */ /* Polaridade ESCURA dentro de página clara (contraste + mídia no modo Hero). Mesmos valores do bloco [data-theme="dark"] lá em cima. */ .hero-section-role[data-band="contraste"] > section, .hero-section-role[data-band="midia"] > section, .hero-section-role[data-bg-role="escuro"] > section{ --bg-body:#0A0A0A;--bg-surface:#121214;--bg-alt:#17171B;--bg-elevated:#202027;--bg-inverted:#080808; --bg-body-rgb:10,10,10; --text-primary:#E8E8E8;--text-secondary:#8A8A8A;--text-on-dark:#E8E8E8; --border:#2A2A30;--border-hover:#3D3D3D;--card-bg:#17171B;--card-border:#252525; --input-bg:#1A1A1A;--input-border:#333; --shadow:rgba(0,0,0,.3);--shadow-strong:rgba(0,0,0,.5); --white:#0A0A0A;--light-gray:#121212;--charcoal:#E8E8E8;--mid-gray:#8A8A8A;--dark:#080808; --gold:#F0C24B; --warn-text:#FFB020;--warn-bar-a:#A06A00;--warn-bar-b:#FFB020;--error-text:#FF8A8A; --hud-line:#233021;--hud-line-hover:#7ba300;--hud-rail:rgba(255,255,255,.14); --band-bg:var(--ink); background-color:var(--band-bg);color:#FFFFFF; } /* v1.99.0 — era um flip inteiro pra valores CLAROS (polaridade invertida, como o pacote pede). Decisão do usuário: no modo Blade, "contraste" NUNCA clareia — só troca de tom de escuro. Os outros tokens (--card-bg, --text-primary, --border...) já vêm certos do bloco incondicional acima (contraste é sempre superfície escura); só o --band-bg muda aqui, pra --bg-alt (um degrau diferente do --ink que "base" usa no escuro) — dá ritmo sem nunca acender a seção. Mídia continua invariante (nunca entrou nesta regra). */ [data-theme="dark"] .hero-section-role[data-band="contraste"] > section, [data-theme="dark"] .hero-section-role[data-bg-role="claro"] > section{ --band-bg:var(--bg-alt); background-color:var(--band-bg); } /* base e elevado acompanham o modo — só o valor do fundo muda. --band-bg fica exposto pra quem precisa CASAR com o fundo da seção (o picote do ingresso finge um furo pintando círculos da cor do fundo da seção). */ .hero-section-role[data-band="base"] > section, .hero-section-role[data-bg-role="base"] > section, .hero-section-role[data-bg-role="claro"] > section{--band-bg:var(--paper);background-color:var(--band-bg)} .hero-section-role[data-band="elevado"] > section, .hero-section-role[data-bg-role="elevado"] > section{--band-bg:#FFFFFF;background-color:var(--band-bg)} [data-theme="dark"] .hero-section-role[data-band="base"] > section, [data-theme="dark"] .hero-section-role[data-bg-role="base"] > section{--band-bg:var(--ink);background-color:var(--band-bg)} [data-theme="dark"] .hero-section-role[data-band="elevado"] > section, [data-theme="dark"] .hero-section-role[data-bg-role="elevado"] > section{--band-bg:#111311;background-color:var(--band-bg)} /* ── Componentes "chapado escuro" que precisam não-derreter na banda ── O botão pintado com var(--dark) derrete no fundo de uma banda escura (--dark vira #080808, praticamente o --ink da banda) e o CTA some visualmente. v1.99.0 — antes havia uma 2ª direção pra desfazer isso quando "contraste" invertia pra claro no modo escuro; como a banda NÃO inverte mais (decisão do usuário — contraste é sempre escuro, só muda de tom entre os modos), só esta única direção é necessária: já vale nos dois modos. */ .hero-section-role[data-band="contraste"] .btn-ingresso, .hero-section-role[data-band="midia"] .btn-ingresso{background:var(--accent);color:#1a1a1a;border-color:var(--accent)} .hero-section-role[data-band="contraste"] .btn-ingresso:hover:not(:disabled), .hero-section-role[data-band="midia"] .btn-ingresso:hover:not(:disabled){background:transparent;color:var(--accent)} .hero-section-role[data-band="contraste"] .btn-enviar, .hero-section-role[data-band="midia"] .btn-enviar{background:var(--lime);color:#0A0A0A} .hero-section-role[data-band="contraste"] .btn-enviar:hover, .hero-section-role[data-band="midia"] .btn-enviar:hover{background:var(--lime-glow);color:#0A0A0A} .hero-section-role[data-band="contraste"] .crono-tab.active, .hero-section-role[data-band="midia"] .crono-tab.active, .hero-section-role[data-band="contraste"] .crono-filter.active, .hero-section-role[data-band="midia"] .crono-filter.active{background:var(--lime);border-color:var(--lime);color:#0A0A0A} .hero-section-role[data-band="contraste"] .crono-tab.active i, .hero-section-role[data-band="midia"] .crono-tab.active i{color:#0A0A0A} .hero-section-role[data-band="contraste"] .depoimento-avatar, .hero-section-role[data-band="midia"] .depoimento-avatar{background:var(--lime);color:#0A0A0A} /* overflow-x:clip (não :hidden) corta o transbordo horizontal SEM criar um container de rolagem — :hidden no html/body quebrava o position:sticky das laterais do feed. clip mantém o sticky funcionando. */ html{scroll-behavior:smooth;overflow-x:clip} body{font-family:var(--font-body);color:var(--text-primary);background:var(--bg-body);overflow-x:clip} /* Comunidade — fundo cinza-claro no modo Hero (claro) pra os cards brancos destacarem (estilo BuddyBoss). No dark mantém o --bg-body escuro. */ html:not([data-theme="dark"]) body.hero-community{background:#EEF0F4} /* v1.80.86 — Dark: a navbar é #0A0A0A e o body também era #0A0A0A → a página ficava da MESMA cor do menu. Aqui o fundo da página vai um tom ABAIXO da navbar (#08080A), criando a aresta no rodapé do menu e deixando os cards (#161616) "pularem" mais. Modelo de elevação: página < navbar < cards. */ [data-theme="dark"] body.hero-community{background:#08080A} /* Respiro entre o conteúdo da comunidade (feed/amigos/grupos/mensagens) e o rodapé. */ body.hero-community .hero-page-content{padding-bottom:64px} a{text-decoration:none;color:inherit} ul{list-style:none} img{max-width:100%;display:block} /* v1.46.8 — Scrollbar discreta. Antes track preto + thumb lime grossa atrapalhavam visualmente o navbar fixed branco translucido (efeito de "barra cortando" o header em telas com scroll). Agora: track invisivel, thumb cinza translucido que vira lime no hover (mantem a brand sem agredir). Firefox usa scrollbar-color (gracioso). */ ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:10px; border:2px solid transparent; background-clip:padding-box; transition:background .2s; } ::-webkit-scrollbar-thumb:hover{ background:rgba(166,223,0,.7); background-clip:padding-box; } ::-webkit-scrollbar-corner{background:transparent} html{scrollbar-color:rgba(0,0,0,.25) transparent;scrollbar-width:thin} /* ── Section Shared ── */ section{padding:100px 40px} /* Gutter lateral padrão das páginas "boxed" de plugin (feed, grupos, amigos, conta, anúncios, marketplace). 24px no desktop, 16px no mobile. Containers usam var(--hero-gutter,16px) pra ficarem consistentes e nunca colarem nas bordas. */ :root{--hero-gutter:24px} @media(max-width:768px){:root{--hero-gutter:16px}} .section-header{text-align:center;margin-bottom:64px} .section-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(166,223,0,.1);border:1px solid rgba(166,223,0,.25);color:var(--lime-dark);padding:6px 16px;border-radius:50px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px} /* v1.90.2 — era var(--dark), que NÃO inverte de polaridade (é escuro nos dois modos) e sumia dentro de banda escura. --text-primary vira com o modo E com a banda, cobrindo as 4 combinações do pacote. Mesma troca nas regras abaixo que pintam texto sobre o FUNDO DA SEÇÃO — texto sobre preenchimento lime ou branco continua com var(--dark), que ali é o valor certo. */ /* v2.6.0 — tipografia de título alinhada à referência de UX (medida no código-fonte real: h2{font-size:clamp(46px,5vw,74px);line-height:.94; letter-spacing:-.055em;text-transform:uppercase} + .section-title h2{ font-weight:800;line-height:.91}). O tracking é o que mais muda a leitura: era +2px (esparramado), vira -.055em (apertado). PISO DO CLAMP DIVERGE da referência (34px, não 46px) por motivo medido: em caixa alta, "PATROCINADORES" a 46px ocupa 352px e a coluna no celular de 390px tem 302px — estourava a caixa. O protótipo de referência não tem palavra portuguesa longa assim. O 5.6vw (em vez de 5vw) compensa a queda, chegando ao teto de 74px por volta de 1320px de largura. overflow-wrap é rede de segurança: se um título futuro tiver palavra ainda maior, ele quebra em vez de vazar a largura da página. ATENÇÃO: o mesmo clamp está duplicado em hero_title_scale_inline_css() (functions.php) — os dois têm que andar juntos, senão a escala de título do Customizer devolve o tamanho antigo. DIVERGÊNCIA DELIBERADA do usuário: a referência usa título de UMA cor só (verde só no kicker); mantemos o destaque lime no , que já é padrão de marca do site inteiro. */ .section-title{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,5.6vw,74px);letter-spacing:-.055em;line-height:.91;text-transform:uppercase;color:var(--text-primary);overflow-wrap:break-word} .section-title span{color:var(--lime-dark)} /* v1.79.8 — Outfit nos títulos (estilo Imagineland): precisa de peso BLACK (900) + tracking apertado. Bangers/Anton/Archivo já são pesadas por si só. */ .hero-font-outfit .section-title, .hero-font-outfit .ig-cat, .hero-font-outfit .ig-val, .hero-font-outfit .hero-marquee__word, .hero-font-outfit .hero-date, .hero-font-outfit .countdown-num, .hero-font-outfit .atracao-name, .hero-font-outfit .concurso-row__title, .hero-font-outfit .stat-item .stat-num, .hero-font-outfit .mapa-address h3, .hero-font-outfit .contato-info h3, .hero-font-outfit .footer h4, .hero-font-outfit .account-title, .hero-font-outfit .account-panel-title, .hero-font-outfit .thank-you-title, .hero-font-outfit .venue-popup__name{font-weight:900;letter-spacing:-.5px} .section-desc{color:var(--mid-gray);font-size:17px;max-width:600px;margin:16px auto 0;line-height:1.7} /* v1.94.0 — variante de cabeçalho em 2 colunas (Design System 2026: kicker+h2 numa coluna, parágrafo solto na outra), medida na referência ao vivo (687.5/412.5px num container de 1200px, gap 80px ≈ proporção 1.67fr/1fr). Modificador isolado — NÃO altera `.section-header` padrão, usado centralizado por praticamente todas as outras seções da home. */ .section-header--split{display:grid;grid-template-columns:1.67fr 1fr;gap:80px;align-items:end;text-align:left;max-width:1200px;margin:0 auto 64px} .section-header--split .section-desc{margin:0;max-width:none} .section-header--split .section-title{margin:0} @media(max-width:900px){ .section-header--split{grid-template-columns:1fr;gap:20px;align-items:start} } /* ── Buttons ── */ .btn-primary{background:var(--lime);color:var(--dark);padding:16px 40px;border-radius:var(--r-btn);box-shadow:var(--btn-glow);font-weight:700;font-size:16px;letter-spacing:.5px;border:2px solid var(--lime);transition:all .3s;cursor:pointer;display:inline-flex;align-items:center;gap:8px} .btn-primary:hover{background:var(--lime-dark);border-color:var(--lime-dark);color:var(--dark);transform:translateY(-2px)} .btn-secondary{background:transparent;color:var(--white);padding:16px 40px;border-radius:var(--r-btn);font-weight:600;font-size:16px;border:2px solid rgba(255,255,255,.3);transition:all .3s;cursor:pointer} .btn-secondary:hover{border-color:var(--white);transform:translateY(-2px)} /* ── Reveal Animations ── */ .reveal{opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.16,1,.3,1)} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s} .reveal-delay-4{transition-delay:.4s} @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}} /* ── Navbar ── */ /* v1.90.0 — repouso vira SÓLIDO de verdade (era rgba(...,.95)) — divergência deliberada do pacote Header/Modos 2026 (que pede transparente→sólido ao rolar; aqui é o oposto: sólido→transparente, e só se o Customizer ligar "Barra translúcida"). Altura ~70px no repouso (13px padding + 44px logo). */ .navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:13px 40px;display:flex;align-items:center;justify-content:space-between;transition:all .4s ease;background:rgb(var(--bg-body-rgb))} .navbar.scrolled{background:rgb(var(--bg-body-rgb));padding-top:10px;padding-bottom:10px;box-shadow:0 2px 20px rgba(0,0,0,.08)} /* v1.79.21 — topo translúcido ao rolar (Customizer → Barra de menu). 3 classes (.navbar.nav-translucent.scrolled) vencem a regra .navbar.scrolled. rgba() com alpha em % é suportado nos browsers atuais; o blur reforça o vidro fosco. */ .navbar.nav-translucent.scrolled{background:rgba(var(--bg-body-rgb),var(--nav-scroll-alpha,80%));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} [data-theme="dark"] .navbar.nav-translucent.scrolled{background:rgba(var(--bg-body-rgb),var(--nav-scroll-alpha-dark,var(--nav-scroll-alpha,80%)))} /* v1.80.76 — FALLBACK sem media-query: o problema do "conteúdo vazando atrás" no mobile NÃO é largura de tela — é o navegador não renderizar backdrop-filter (vidro fosco). Então gateamos exatamente esse caso com @supports (não com breakpoint, que era chute): onde NÃO há backdrop-filter, a barra vira opaca e nada vaza; onde HÁ, mantém o translúcido igual desktop. O fundo da navbar também é emitido INLINE no header.php (imune ao "Remove Unused CSS" do WP Rocket, que apagava as regras .scrolled porque a classe só entra via JS). v1.89.7 — background agora via --bg-body-rgb (era rgba(255,255,255,...)/ rgba(10,10,10,...) hardcoded, duplicado aqui e em header.php). */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .navbar, .navbar.nav-translucent, .navbar.nav-translucent.scrolled{background:rgb(var(--bg-body-rgb))} [data-theme="dark"] .navbar, [data-theme="dark"] .navbar.nav-translucent, [data-theme="dark"] .navbar.nav-translucent.scrolled{background:rgb(var(--bg-body-rgb))} } .nav-logo{height:44px;transition:height .3s} .nav-logo-light{display:block} .nav-logo-dark{display:none} .navbar.scrolled .nav-logo{height:36px} /* v1.79.26 — botão de modo claro/escuro (SVG configurável; crossfade + rotação). grid + place-items centraliza os 2 ícones empilhados (corrige o bug de ficarem descentralizados); fundo SEMPRE visível (não só no hover). Tamanho/cor por var. */ /* Centralização à prova de bug: position:absolute + margin:auto (o grid auto-size deixava o ícone no canto). Em repouso = só o ícone; hover/foco = fundo cinza sutil nos 2 modos; SEM borda e SEM anel verde (outline). Tb está inline no header (à prova do "Remove Unused CSS" do WP Rocket). */ /* v1.90.0 — medidas do pacote Header/Modos 2026 (fallback caso o bloco inline hero-tt-css não carregue): 44px altura, raio 12px, vidro permanente. Este bloco normalmente perde a cascata pro inline (que vem depois no DOM), que é quem de fato manda — mantido em paridade só pra não sobrar fallback obsoleto. */ .theme-toggle{position:relative;display:inline-flex;align-items:center;gap:9px;width:auto;height:44px;flex:none;margin-left:6px;padding:12px 15px;border:1px solid rgba(9,10,9,.12);border-radius:12px;cursor:pointer;background:rgba(9,10,9,.05);transition:background .16s,border-color .16s,color .16s} .theme-toggle:hover,.theme-toggle:focus-visible{background:rgba(9,10,9,.1)} .theme-toggle:focus,.theme-toggle:focus-visible,.theme-toggle:active{outline:none;box-shadow:none} [data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)} [data-theme="dark"] .theme-toggle:hover,[data-theme="dark"] .theme-toggle:focus-visible{background:rgba(255,255,255,.12)} .theme-toggle .tt-icon{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:block;width:var(--tt-size,14px);height:var(--tt-size,14px);transition:opacity .3s ease,transform .45s cubic-bezier(.5,1.5,.4,1)} /* No modo claro mostra o ícone "light" (lua = ir pro escuro); no escuro o "dark" (sol). */ .theme-toggle .tt-show-light{opacity:1;transform:rotate(0) scale(1)} .theme-toggle .tt-show-dark{opacity:0;transform:rotate(-90deg) scale(.4)} [data-theme="dark"] .theme-toggle .tt-show-light{opacity:0;transform:rotate(90deg) scale(.4)} [data-theme="dark"] .theme-toggle .tt-show-dark{opacity:1;transform:rotate(0) scale(1)} @media (prefers-reduced-motion:reduce){.theme-toggle .tt-icon{transition:opacity .2s}} /* v1.79.17 — brilho colorido animado na logo do topo (Customizer → Logos). O drop-shadow colore só o HALO (não tinge a logo). Cicla por 5 cores vivas. */ .nav-logo-link.has-logo-glow .nav-logo, .nav-logo-link.has-logo-glow .site-name{ animation:heroLogoGlow var(--logo-glow-speed,6s) linear infinite; will-change:filter; } @keyframes heroLogoGlow{ 0% {filter:drop-shadow(0 0 var(--logo-glow-size,12px) rgba(255,40,120,.9))} 20% {filter:drop-shadow(0 0 var(--logo-glow-size,12px) rgba(255,170,0,.9))} 40% {filter:drop-shadow(0 0 var(--logo-glow-size,12px) rgba(166,223,0,.95))} 60% {filter:drop-shadow(0 0 var(--logo-glow-size,12px) rgba(0,200,255,.9))} 80% {filter:drop-shadow(0 0 var(--logo-glow-size,12px) rgba(175,90,255,.9))} 100%{filter:drop-shadow(0 0 var(--logo-glow-size,12px) rgba(255,40,120,.9))} } /* Acessibilidade: sem piscar/animar — mantém um halo estático suave. */ @media (prefers-reduced-motion:reduce){ .nav-logo-link.has-logo-glow .nav-logo, .nav-logo-link.has-logo-glow .site-name{ animation:none; filter:drop-shadow(0 0 var(--logo-glow-size,12px) rgba(166,223,0,.7)); } } .nav-links{display:flex;gap:28px;align-items:center} .nav-links a{color:var(--dark);font-size:14px;font-weight:500;letter-spacing:.3px;transition:color .3s;position:relative} .nav-links a:hover{color:var(--lime-dark)} .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--lime);transition:width .3s} .nav-links a:hover::after{width:100%} /* v1.46.9 — Active link: section visivel ganha cor lime + underline persistente. Observe que hover ainda funciona (override no a:hover acima). Aria opcional via data-section pra futuro polish. */ .nav-links a.is-active{color:var(--lime-dark);font-weight:600} .nav-links a.is-active::after{width:100%;background:var(--lime-dark)} /* ── Menu gerenciável (Aparência → Menus) com suporte a subníveis (dropdown) — v1.56.9 ── */ .nav-menu{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0} .nav-menu li{position:relative} /* itens herdam o estilo de .nav-links a (cor/hover/underline) */ .nav-menu .menu-item-has-children > a{padding-right:14px} .nav-menu .menu-item-has-children > a::before{ content:'\25BE';position:absolute;right:0;top:50%;transform:translateY(-50%); font-size:10px;opacity:.55;transition:opacity .2s } .nav-menu li:hover > a::before{opacity:1} /* Dropdown (nível 1) */ .nav-menu .sub-menu{ position:absolute;top:100%;left:0;min-width:200px; list-style:none;margin:0;padding:8px; background:rgba(255,255,255,.98);backdrop-filter:blur(16px); border:1px solid rgba(0,0,0,.06);border-radius:12px; box-shadow:0 14px 38px rgba(0,0,0,.14); display:flex;flex-direction:column;gap:2px; opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:1001 } .nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)} .nav-menu .sub-menu li a{display:block;padding:8px 12px;border-radius:8px;font-size:13px;white-space:nowrap} .nav-menu .sub-menu li a:hover{background:rgba(166,223,0,.14);color:var(--lime-dark)} .nav-menu .sub-menu a::after{display:none!important} /* sem underline animado no dropdown */ .nav-menu .sub-menu .menu-item-has-children > a::before{ /* caret de flyout aponta pro lado */ content:'\25B8';right:6px } /* Flyout (nível 2+) — abre pro lado */ .nav-menu .sub-menu .sub-menu{top:-9px;left:100%;margin-left:6px} [data-theme="dark"] .nav-menu .sub-menu{background:rgba(20,20,22,.98);border-color:rgba(255,255,255,.08)} [data-theme="dark"] .nav-menu .sub-menu li a{color:#E0E0E0} [data-theme="dark"] .nav-menu .sub-menu li a:hover{background:rgba(166,223,0,.16);color:var(--lime)} .nav-cta{background:var(--lime)!important;color:var(--dark)!important;padding:10px 24px;border-radius:var(--r-btn);box-shadow:var(--btn-glow);font-weight:700;font-size:14px;letter-spacing:.5px;transition:all .3s!important;border:2px solid var(--lime)} .nav-cta:hover{background:var(--dark)!important;color:var(--lime)!important;transform:scale(1.05);border-color:var(--dark)!important} .nav-cta::after{display:none!important} /* v1.46.9 — Pulse sutil no CTA "COMPRAR INGRESSO" quando vendas estao abertas. key=available eh o unico estado que renderiza no nav (v1.46.8). Animacao leve de respiracao: scale 1.0 -> 1.04 a cada 3s. Pausa no hover (combina com o scale 1.05 do :hover, evita conflito visual). prefers-reduced-motion respeitado pra acessibilidade. */ @keyframes navCtaPulse{ 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(166,223,0,.4); } 50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(166,223,0,0); } } .nav-cta--available{animation: navCtaPulse 3s ease-in-out infinite} .nav-cta--available:hover{animation: none} @media (prefers-reduced-motion: reduce){ .nav-cta--available{animation: none} } /* v1.45.20 — CTAs dinamicos de ingressos: estados desabilitados (engine_off, event_passed, sales_closed_admin, sales_ended, no_tickets, sold_out). Mantem mesma altura/posicao do CTA habilitado, so muda visual pra "frio". */ .nav-cta.is-disabled, .btn-primary.is-disabled, .edicao-single__cta-btn.is-disabled, .hero-buy-cta.is-disabled{ background:#e8e8e6!important;color:#7a7a78!important;border-color:#d4d4d2!important; cursor:not-allowed!important;opacity:.85;pointer-events:none; box-shadow:none!important;transform:none!important; } .nav-cta.is-disabled:hover, .btn-primary.is-disabled:hover{background:#e8e8e6!important;color:#7a7a78!important;transform:none!important} /* Banner de status acima da grid de ingressos (sales_closed, sold_out, etc.) */ .ingressos-status{ display:inline-flex;align-items:center;gap:10px;margin-top:16px; /* v1.90.3 — eram pastéis chapados (#FFF4E0/#EEE8FE/#FFE5E5): não tinham nenhuma variante de modo escuro (já quebravam hoje) e o estado "sem ingressos" usava ROXO (#EEE8FE/#4a2e8a/#7B5BD9), fora da paleta ("zero azul e zero roxo"). Agora o tint é em alfa — compõe sobre o fundo real, seja ele qual for — e o texto vem de token que inverte com a banda. */ background:rgba(230,179,37,.14);color:var(--warn-text);border:1px solid rgba(230,179,37,.34); padding:10px 20px;border-radius:50px;font-size:14px;font-weight:600; } .ingressos-status i{font-size:18px;color:var(--warn-text)} .ingressos-status--no_tickets,.ingressos-status--event_passed{background:rgba(128,128,128,.12);color:var(--text-secondary);border-color:var(--border)} .ingressos-status--no_tickets i,.ingressos-status--event_passed i{color:var(--text-secondary)} .ingressos-status--sold_out{background:rgba(255,59,59,.12);color:var(--error-text);border-color:rgba(255,59,59,.32)} .ingressos-status--sold_out i{color:var(--error-text)} /* v1.76.0 — selo de meios de pagamento (PIX · Cartão · parcelas) */ .ing-methods{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px;padding:9px 18px;background:var(--card-bg,#fff);border:1px solid var(--border,#ececec);border-radius:50px;box-shadow:0 2px 10px rgba(0,0,0,.04)} .ing-methods__item{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text-primary,#1a1a1a)} .ing-methods__item .ti{font-size:18px;color:var(--lime,#a6df00)} .ing-methods__item--em{background:rgba(166,223,0,.14);border:1px solid rgba(166,223,0,.34);border-radius:50px;padding:3px 12px} .ing-methods__sep{color:var(--mid-gray,#bbb);font-weight:700} [data-theme="dark"] .ing-methods{background:var(--card-bg,#1f1f23);border-color:var(--border,#33343a)} [data-theme="dark"] .ing-methods__item{color:var(--text-primary,#fff)} /* v1.79.24 — Contador de virada de lote: BARRA FIXA full-width no rodapé (estilo BGS), dispensável (X) com memória por deadline. */ .lote-bar{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;padding:14px 64px 14px 28px;background:var(--dark,#1A1A1A);color:#fff;box-shadow:0 -8px 30px rgba(0,0,0,.22);transform:translateY(110%);transition:transform .38s cubic-bezier(.16,.84,.44,1)} .lote-bar.is-visible{transform:translateY(0)} .lote-bar[hidden]{display:none} .lote-bar__clock{display:flex;align-items:flex-start;gap:10px} .lote-bar .lc-unit{display:flex;flex-direction:column;align-items:center;min-width:48px} .lote-bar .lc-num{font-family:var(--font-display,'Bangers'),sans-serif;font-size:42px;line-height:1;color:var(--lime,#a6df00);letter-spacing:1px;font-variant-numeric:tabular-nums} .lote-bar .lc-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1.4px;color:rgba(255,255,255,.6);margin-top:5px;font-weight:700;text-align:center} .lote-bar .lc-sep{font-family:var(--font-display,'Bangers'),sans-serif;font-size:36px;line-height:1;color:rgba(255,255,255,.32);margin-top:2px} .lote-bar__label{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;max-width:200px;line-height:1.2} .lote-bar__cta{background:#fff;color:var(--dark,#1A1A1A);font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:14px;padding:12px 26px;border-radius:8px;text-decoration:none;box-shadow:4px 4px 0 var(--lime,#a6df00);transition:transform .15s,box-shadow .15s} .lote-bar__cta:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--lime,#a6df00)} .lote-bar__close{position:absolute;top:50%;right:18px;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.1);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .15s} .lote-bar__close:hover{background:rgba(255,255,255,.22)} .lote-bar.is-urgent .lc-num{color:#FF8C42} /* v1.80.83 — modo COMPRA da mesma barra (sem countdown ativo). Blocos escondidos usam [hidden], então basta não sobrescrever display neles. */ .lote-bar [hidden]{display:none} .lote-bar--buy{justify-content:space-between;padding:12px 64px 12px 28px;gap:16px} .lote-bar__info{display:flex;flex-direction:column;line-height:1.15} .lote-bar__info small{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.55)} .lote-bar__info b{font-size:17px;font-weight:800;margin-top:2px} .lote-bar__info em{font-style:normal;color:var(--lime,#a6df00);font-variant-numeric:tabular-nums} @media (max-width:768px){ .lote-bar--buy{padding:10px 52px 10px 14px} .lote-bar__info small{display:none} /* no celular o rótulo some; o preço basta */ .lote-bar__info b{font-size:15px} } @media (max-width:760px){ .lote-bar{gap:14px;padding:12px 54px 12px 14px} .lote-bar__label{font-size:12px;max-width:120px} .lote-bar .lc-num{font-size:30px} .lote-bar .lc-sep{font-size:24px} .lote-bar .lc-unit{min-width:34px} .lote-bar__cta{padding:10px 16px;font-size:12px} } /* v1.79.0 — Seção FAQ (acordeão + chips de filtro) */ .faq-wrap{max-width:840px;margin:28px auto 0} .faq-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px} .faq-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:50px;border:1.5px solid var(--border,#e6e6e6);background:var(--card-bg,#fff);color:var(--mid-gray,#666);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s} .faq-chip .ti{font-size:16px} .faq-chip:hover{border-color:var(--lime,#a6df00);color:var(--dark,#1a1a1a)} .faq-chip.is-active{background:var(--lime,#a6df00);border-color:var(--lime,#a6df00);color:#1a1a1a} .faq-list{display:flex;flex-direction:column;gap:12px} .faq-item{border:1px solid var(--border,#ececec);border-radius:var(--r-card);background:var(--card-bg,#fff);overflow:hidden;transition:border-color .15s,box-shadow .15s} .faq-item[open]{border-color:rgba(166,223,0,.5);box-shadow:0 6px 22px var(--shadow)} .faq-q{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;list-style:none;font-weight:600;font-size:15.5px;color:var(--text-primary,#1a1a1a)} .faq-q::-webkit-details-marker{display:none} .faq-q-ic{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(166,223,0,.14);color:var(--lime-dark,#7ab800);font-size:18px;border:1px solid rgba(166,223,0,.25)} .faq-q-text{flex:1;line-height:1.4} .faq-q-chev{flex:none;color:var(--mid-gray,#999);font-size:20px;display:flex;transition:transform .2s} .faq-item[open] .faq-q-chev{transform:rotate(180deg);color:var(--lime-dark,#7ab800)} .faq-a{padding:0 18px 18px 66px;color:var(--mid-gray,#555);font-size:14.5px;line-height:1.7} @media (max-width:560px){.faq-a{padding-left:18px}} [data-theme="dark"] .faq-chip{background:var(--card-bg,#1f1f23);border-color:var(--border,#33343a);color:var(--text-secondary,#bbb)} [data-theme="dark"] .faq-chip.is-active{background:var(--lime,#a6df00);color:#1a1a1a} [data-theme="dark"] .faq-item{background:var(--card-bg,#1f1f23);border-color:var(--border,#33343a)} [data-theme="dark"] .faq-q{color:var(--text-primary,#fff)} [data-theme="dark"] .faq-a{color:var(--text-secondary,#aaa)} .mobile-menu{display:none;background:none;border:none;color:var(--dark);font-size:28px;cursor:pointer} /* v1.38.1 — nav-auth: bloco discreto Login/Registrar OU saudação do logado. Separado por "|" estilo barra de menu top-right. */ .nav-auth{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap} .nav-auth__link,.nav-auth__greet{ color:var(--dark)!important;font-weight:500;letter-spacing:.2px;opacity:.82; transition:opacity .15s,color .15s;padding:0;text-decoration:none; } .nav-auth__link:hover,.nav-auth__greet:hover{opacity:1;color:var(--lime-dark)!important} /* Mata o sublinhado animado dos links da nav padrão pra esses */ .nav-auth__link::after,.nav-auth__greet::after{display:none!important} .nav-auth__greet strong{font-weight:700;letter-spacing:.1px} /* v1.54.7 — "Ola, Nome" em lime (solicitado explicitamente). Hover vai pra lime-dark. "Sair" permanece em grafite neutro pra nao competir visualmente. */ .nav-auth--logged .nav-auth__greet{color:var(--lime)!important;opacity:1} .nav-auth--logged .nav-auth__greet:hover{color:var(--lime-dark,#7DA800)!important;opacity:1} .nav-auth--logged .nav-auth__greet strong{color:inherit;font-weight:700} .nav-auth--logged .nav-auth__link{color:#2D2D2D!important;opacity:.82} .nav-auth--logged .nav-auth__link:hover{color:#1a1a1a!important;opacity:1} [data-theme="dark"] .nav-auth--logged .nav-auth__greet strong{color:#f0f0f0} [data-theme="dark"] .nav-auth--logged .nav-auth__link{color:#d8d8d8!important} /* v1.79.25 — completa o dark mode da navbar: links do menu e "Entrar/Criar conta" usavam var(--dark) (continua escuro no tema escuro) → ficariam invisíveis. */ [data-theme="dark"] .nav-links a{color:var(--text-primary,#E8E8E8)} [data-theme="dark"] .nav-links a:hover,[data-theme="dark"] .nav-links a.is-active{color:var(--lime,#a6df00)} [data-theme="dark"] .nav-auth__link,[data-theme="dark"] .nav-auth__greet{color:#d8d8d8!important} [data-theme="dark"] .nav-auth--logged .nav-auth__greet{color:var(--lime,#a6df00)!important} .nav-auth__sep{ color:var(--text-secondary,#aaa);opacity:.45;font-weight:300; user-select:none;padding:0 1px;font-size:13px; } /* Dark mode */ [data-theme="dark"] .nav-auth__link, [data-theme="dark"] .nav-auth__greet{color:#d8d8d8!important} [data-theme="dark"] .nav-auth__link:hover, [data-theme="dark"] .nav-auth__greet:hover{color:var(--lime)!important} [data-theme="dark"] .nav-auth__sep{color:#777;opacity:.4} /* Navbar dark mode — v1.89.7: rgba(10,10,10,...) hardcoded → --bg-body-rgb */ [data-theme="dark"] .navbar{background:rgba(var(--bg-body-rgb),.95)} [data-theme="dark"] .navbar.scrolled{background:rgba(var(--bg-body-rgb),.98);box-shadow:0 2px 20px rgba(0,0,0,.4)} [data-theme="dark"] .nav-links a{color:#E0E0E0} [data-theme="dark"] .nav-links a:hover{color:var(--lime)} [data-theme="dark"] .mobile-menu{color:#E0E0E0} [data-theme="dark"] .nav-logo-light{display:none} [data-theme="dark"] .nav-logo-dark{display:block} /* ── Hero ── */ .hero{min-height:100vh;background:#0A0A0A;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden} /* v1.43.1 — 6 layouts do Hero (full | cinema | right | left | top | bottom) */ /* CINEMA — letterbox 21:9 com bordas pretas */ .hero--layout-cinema{ min-height: auto; height: auto; padding: 60px 0; background: #0A0A0A; } .hero--layout-cinema .hero-media{ position: relative; inset: auto; width: 100%; aspect-ratio: 21 / 9; margin: 0 auto; } .hero--layout-cinema .hero-overlay, .hero--layout-cinema .hero-bg, .hero--layout-cinema .hero-grid, .hero--layout-cinema .hero-particles{ inset: 60px 0; height: calc(100% - 120px); } .hero--layout-cinema .hero-content{ position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; } /* RIGHT — texto esquerda, imagem direita (split 50/50) */ .hero--layout-right{ min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; justify-items: stretch; background: #0A0A0A; } .hero--layout-right .hero-media{ position: relative; inset: auto; grid-column: 2; grid-row: 1; z-index: 0; } .hero--layout-right .hero-overlay, .hero--layout-right .hero-bg, .hero--layout-right .hero-grid, .hero--layout-right .hero-particles{ grid-column: 2; grid-row: 1; position: relative; inset: auto; } .hero--layout-right .hero-content{ grid-column: 1; grid-row: 1; text-align: left; align-self: center; padding: 60px 40px 60px 60px; max-width: 640px; } .hero--layout-right .hero-ctas{ justify-content: flex-start; } /* LEFT — imagem esquerda, texto direita (split 50/50) */ .hero--layout-left{ min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; justify-items: stretch; background: #0A0A0A; } .hero--layout-left .hero-media{ position: relative; inset: auto; grid-column: 1; grid-row: 1; z-index: 0; } .hero--layout-left .hero-overlay, .hero--layout-left .hero-bg, .hero--layout-left .hero-grid, .hero--layout-left .hero-particles{ grid-column: 1; grid-row: 1; position: relative; inset: auto; } .hero--layout-left .hero-content{ grid-column: 2; grid-row: 1; text-align: left; align-self: center; padding: 60px 60px 60px 40px; max-width: 640px; } .hero--layout-left .hero-ctas{ justify-content: flex-start; } /* TOP — imagem em cima, texto embaixo */ .hero--layout-top{ min-height: 100vh; display: grid; grid-template-rows: 50vh 1fr; background: #0A0A0A; } .hero--layout-top .hero-media{ position: relative; inset: auto; grid-row: 1; } .hero--layout-top .hero-overlay, .hero--layout-top .hero-bg, .hero--layout-top .hero-grid, .hero--layout-top .hero-particles{ grid-row: 1; position: relative; inset: auto; } .hero--layout-top .hero-content{ grid-row: 2; align-self: center; padding: 40px 20px; } /* BOTTOM — texto em cima, imagem embaixo */ .hero--layout-bottom{ min-height: 100vh; display: grid; grid-template-rows: 1fr 50vh; background: #0A0A0A; } .hero--layout-bottom .hero-content{ grid-row: 1; align-self: center; padding: 40px 20px; color: var(--text-primary, #1a1a1a); } .hero--layout-bottom{ background: #fff; } [data-theme="dark"] .hero--layout-bottom{ background: #0A0A0A; } .hero--layout-bottom .hero-content .hero-subtitle, .hero--layout-bottom .hero-content .hero-date{ color: var(--text-secondary, #555); } [data-theme="dark"] .hero--layout-bottom .hero-content .hero-subtitle, [data-theme="dark"] .hero--layout-bottom .hero-content .hero-date{ color: rgba(255,255,255,.85); } .hero--layout-bottom .hero-media{ position: relative; inset: auto; grid-row: 2; } .hero--layout-bottom .hero-overlay, .hero--layout-bottom .hero-bg, .hero--layout-bottom .hero-grid, .hero--layout-bottom .hero-particles{ grid-row: 2; position: relative; inset: auto; } /* Mobile: split layouts (right/left) viram top stack — mais legível em touch */ @media (max-width: 880px){ .hero--layout-right, .hero--layout-left{ grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; min-height: 100vh; } .hero--layout-right .hero-media, .hero--layout-right .hero-overlay, .hero--layout-right .hero-bg, .hero--layout-right .hero-grid, .hero--layout-right .hero-particles{ grid-column: 1; grid-row: 1; } .hero--layout-right .hero-content{ grid-column: 1; grid-row: 2; padding: 32px 20px; text-align: center; max-width: 100%; } .hero--layout-right .hero-ctas{ justify-content: center; } .hero--layout-left .hero-media, .hero--layout-left .hero-overlay, .hero--layout-left .hero-bg, .hero--layout-left .hero-grid, .hero--layout-left .hero-particles{ grid-column: 1; grid-row: 1; } .hero--layout-left .hero-content{ grid-column: 1; grid-row: 2; padding: 32px 20px; text-align: center; max-width: 100%; } .hero--layout-left .hero-ctas{ justify-content: center; } .hero--layout-cinema{ padding: 24px 0; } .hero--layout-cinema .hero-media{ aspect-ratio: 16 / 9; } .hero--layout-top, .hero--layout-bottom{ grid-template-rows: 35vh 1fr; } .hero--layout-bottom{ grid-template-rows: 1fr 35vh; } } /* Quando ha imagem de fundo, o overlay escuro respeita a opacidade configurada (--hero-overlay-opacity vem do template hero.php a partir do Hero Editor). */ .hero:has(.hero-media:not(.hero-media--hidden)){background:#000} /* WP Admin bar: navbar fixo precisa descer 32px (46 no mobile <=782px) */ .admin-bar .navbar{top:32px} @media screen and (max-width:782px){ .admin-bar .navbar{top:46px} /* v1.80.76 — SÓ ADMIN LOGADO: no mobile o WP torna a barra de admin position:ABSOLUTE (ela rola junto e some ao rolar), mas a navbar fixa reserva 46px no topo pra ela → quando ela sai, sobra um vão de 46px por onde o conteúdo "aparece atrás". Travamos a barra de admin como FIXED pra ela sempre preencher esse vão. Não afeta visitante (barra só existe logado). */ #wpadminbar{position:fixed !important} } /* v1.54.7 — Paginas internas via page.php precisam de clearance pra navbar fixa (76px). O hero da homepage ocupa 100vh entao nao precisa. v1.80.69 — folga aumentada 80→96 (a navbar tem 76px; 80 dava só 4px de respiro e o topo do conteúdo ficava "grudado" no menu). Agora ~20px de respiro. */ .hero-page-content{padding-top:96px} /* v1.79.44 — quando a barra do admin do WP está presente, a navbar fixa desce 32px (46 no mobile), então o clearance precisa somar essa altura — senão o conteúdo das páginas internas fica sob a navbar pra quem está logado. */ .admin-bar .hero-page-content{padding-top:128px} @media screen and (max-width:782px){.admin-bar .hero-page-content{padding-top:142px}} .hero-media{position:absolute;inset:0;z-index:0} .hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;display:block} .hero-media--hidden{display:none} /* v1.45.0 — Efeito Ken Burns (zoom cinematográfico suave e contínuo). Aplicado quando hero--ken-burns está na
+ media_type=image. */ .hero--ken-burns .hero-media img{ animation: hero-ken-burns 25s ease-in-out infinite alternate; will-change: transform; } @keyframes hero-ken-burns{ 0% { transform: scale(1) translate3d(0, 0, 0); } 100% { transform: scale(1.15) translate3d(-2%, 1%, 0); } } @media (prefers-reduced-motion: reduce){ .hero--ken-burns .hero-media img{ animation: none; } } /* v1.43.3 — Backdrop blur (modo "contain-blur"): mesma imagem como fundo em cover + blur, preenchendo as bordas que sobram quando object-fit:contain. Crítico pra UX premium tipo Apple TV / Netflix em imagens com aspect-ratio diferente do hero. */ .hero-media-backdrop{ position: absolute; inset: 0; z-index: 0; background-size: cover; background-repeat: no-repeat; filter: blur(28px) saturate(1.2); transform: scale(1.1); /* esconde bordas claras do blur */ opacity: .55; pointer-events: none; } [data-theme="dark"] .hero-media-backdrop{ opacity: .4; } /* Pra modos não-contain, esconde o backdrop (defensivo) */ .hero:not(.hero--fit-contain-blur) .hero-media-backdrop{ display: none; } /* Pra contain puro (sem blur): adiciona fundo dark sólido pra bordas */ .hero--fit-contain .hero-media{ background: #0A0A0A; } .hero--fit-scale-down .hero-media{ background: #0A0A0A; } .hero--fit-none .hero-media{ background: #0A0A0A; overflow: hidden; } .hero-overlay{position:absolute;inset:0;z-index:1;background:var(--dark);opacity:var(--hero-overlay-opacity,.7);pointer-events:none;transition:opacity .6s} .hero-bg{position:absolute;inset:0;z-index:2;pointer-events:none;background:none} .hero-grid{position:absolute;inset:0;z-index:3;background-image:linear-gradient(rgba(166,223,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(166,223,0,.06) 1px,transparent 1px);background-size:60px 60px;animation:gridMove 20s linear infinite;pointer-events:none} @keyframes gridMove{to{background-position:60px 60px}} .hero-particles{position:absolute;inset:0;overflow:hidden;z-index:4;pointer-events:none} .particle{position:absolute;width:4px;height:4px;background:var(--lime);border-radius:50%;opacity:.6;animation:float 8s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0) scale(1);opacity:.6}50%{transform:translateY(-120px) scale(1.5);opacity:.2}} .hero-content{position:relative;z-index:5;text-align:center;padding:0 20px;max-width:900px} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(166,223,0,.15);border:1px solid rgba(166,223,0,.3);border-radius:50px;padding:8px 20px;margin-bottom:32px;animation:fadeInDown .8s ease} .hero-badge span{color:var(--lime);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase} .hero-badge .dot{width:8px;height:8px;background:var(--lime);border-radius:50%;animation:pulse 2s ease infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}} .hero-logo-img{width:min(500px,80vw);margin:0 auto 20px;filter:brightness(0) invert(1);animation:fadeInUp .8s ease .2s both} .hero-subtitle{color:rgba(255,255,255,.7);font-size:clamp(16px,2.5vw,22px);font-weight:300;margin-bottom:12px;letter-spacing:.5px;animation:fadeInUp .8s ease .4s both} .hero-subtitle strong{color:var(--lime);font-weight:600} /* v1.87.3 — era var(--white): esse token inverte pra #0A0A0A no modo escuro (serve de FUNDO em outras seções), então o texto virava quase-preto sobre a foto do Hero no modo Blade. Hero é seção "mídia" (foto+shade, sempre escura nos dois modos) — aqui "branco" é literal, mesmo padrão já usado em .concursos .section-title/.duelo-home .section-title/.social-card. Exceção pontual autorizada pelo usuário à regra geral de não mexer no Hero. */ .hero-date{color:#FFF;font-family:var(--font-display);font-size:clamp(20px,3vw,32px);letter-spacing:3px;margin-bottom:40px;animation:fadeInUp .8s ease .5s both} .hero-date span{color:var(--lime)} .countdown{display:flex;gap:16px;justify-content:center;margin-bottom:48px;animation:fadeInUp .8s ease .6s both} .countdown-item{background:rgba(255,255,255,.05);border:1px solid rgba(166,223,0,.2);border-radius:16px;padding:16px 20px;min-width:80px;backdrop-filter:blur(10px)} .countdown-num{font-family:var(--font-display);font-size:36px;color:var(--lime);line-height:1} .countdown-label{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;margin-top:4px} .hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:fadeInUp .8s ease .7s both} .scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);animation:bounce 2s ease infinite} @keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}} .scroll-indicator i{color:rgba(255,255,255,.4);font-size:28px} /* ── Atrações ── */ .atracoes{background:var(--white)} /* v1.80.79 — Filtro em abas sublinhadas (mesmo padrão do .hp-tab-nav do perfil / .hms-tab do painel do vendedor): divisória 1px, aba ativa em lime, alinhada à esquerda na mesma largura (1200px) da .atracoes-grid. */ .atracoes-filters{display:flex;gap:4px;justify-content:flex-start;flex-wrap:wrap;max-width:1200px;margin:0 auto 40px;border-bottom:1px solid var(--border,#ececec)} .filter-btn{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 15px;font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--mid-gray,#8a8a8a);white-space:nowrap;cursor:pointer;transition:color .15s,border-color .15s} .filter-btn:hover{color:var(--text-primary)} /* v1.90.3 — era #555: sumia no hover dentro de banda escura */ .filter-btn.active{color:var(--text-primary,#1a1a1a);border-bottom-color:var(--lime,#a6df00)} .atracoes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;max-width:1200px;margin:0 auto} /* v2.0.0 — vitrine "Vozes que você conhece de cor": sempre 3 colunas fixas (nunca mais que os 3 dubladores em destaque), não a grade auto-fill geral. */ .atracoes-grid--vozes{grid-template-columns:repeat(3,1fr);gap:14px} /* v2.0.2 — ALTURA FIXA, não proporção. Dois motivos, os dois medidos: 1) A variável global --atracao-img-aspect vem do Customizer (padrão "3 / 2", paisagem — anterior ao Design System 2026) e vencia o fallback 3/4 de .atracao-card, achatando os cards. Era a causa do card "deitado". 2) A referência usa `.guest{height:510px}`, não aspect-ratio — e isso importa: em tablet o último card ocupa a fileira inteira, e com proporção ele esticaria pra ~1111px de altura (medido no navegador). Com altura fixa ele só fica mais largo, que é o comportamento certo. Só a vitrine é travada; a grade geral de Atrações segue configurável. */ .atracoes-grid--vozes .atracao-card{aspect-ratio:auto;height:510px} /* Responsivo da vitrine — breakpoints da referência: 980px vira 2 colunas com o ÚLTIMO card ocupando a fileira inteira; 680px vira 1 coluna, card mais baixo. A dupla classe (.atracoes-grid.atracoes-grid--vozes) NÃO é enfeite: as regras responsivas gerais de .atracoes-grid ficam bem mais abaixo neste arquivo e, com a mesma especificidade, venceriam por ordem de cascata. */ @media(max-width:980px){ .atracoes-grid.atracoes-grid--vozes{grid-template-columns:1fr 1fr} .atracoes-grid--vozes .atracao-card:last-child{grid-column:1/3} } @media(max-width:680px){ .atracoes-grid.atracoes-grid--vozes{grid-template-columns:1fr;gap:14px} .atracoes-grid--vozes .atracao-card, .atracoes-grid--vozes .atracao-card:last-child{grid-column:auto;height:450px} /* mantém a escala do card grande (as regras mobile gerais encolhem pra 18px e 14px de recuo, calibradas pra grade de 2 colunas — aqui o card ocupa a tela inteira). */ .atracoes-grid--vozes .atracao-name{font-size:31px} .atracoes-grid--vozes .atracao-top{top:20px;left:20px;right:20px} .atracoes-grid--vozes .atracao-copy{bottom:24px;left:24px;right:24px} } .atracoes-vozes__more{max-width:1200px;margin:32px auto 0;text-align:center} .atracoes-vozes__link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--text-primary,#1a1a1a);text-decoration:none;border-bottom:2px solid var(--lime,#a6df00);padding-bottom:3px;transition:opacity .2s} .atracoes-vozes__link:hover{opacity:.7} /* ══════════════════════════════════════════════════════════════════════ v1.80.81 — CAMADA "HUD" (moldura + linha de borda nos cards de conteúdo) v1.89.8 — Design System 2026 (Fase 4): o chanfro (clip-path) e o tick de canto foram REMOVIDOS — cards agora são sempre arredondados (--r-card), seguindo o pacote de design e o site de referência. --hud-line/-hover e --hud-rail continuam em uso (só nomes de token de borda, não o efeito angular); --hud-clip/--hud-tick foram removidos por não terem mais nenhum consumidor. ══════════════════════════════════════════════════════════════════════ */ :root{ --hud-line:#E4E7E0; --hud-line-hover:var(--lime-dark,#92c800); --hud-rail:rgba(0,0,0,.12); } [data-theme="dark"]{ --hud-line:#233021; --hud-line-hover:#7ba300; --hud-rail:rgba(255,255,255,.14); } /* .hud continua servindo .ed-after/.ed-mo/.ed-quote (edicoes.php) — só a borda arredondada padrão. .atracao-card SAIU deste grupo na v1.94.0: virou um card de mídia (foto full-bleed), raio próprio (--r-media) e SEM borda (a referência mede border:0 no card de convidado — a separação vem da sombra de hover, não de um fio). */ .hud{ position:relative; border-radius:var(--r-card); } /* ══════════════════════════════════════════════════════════════════════ v1.94.0 — CARD "CONVIDADO" (Design System 2026, seção 02 da matriz) Retrato full-bleed (foto cobre o card inteiro) + degradê preto (contraste normal) + número sequencial/rótulo no topo + nome grande sobreposto embaixo. Sem foto: fundo lime sólido + degradê volt + iniciais gigantes como marca d'água (hero_theme_initials(), functions.php) — nunca um ícone genérico. v2.0.1 — medidas e cores re-calibradas 1:1 com o código-fonte real da referência (expo-nerd-ux-source/app/page.tsx + globals.css, classe .guest). ══════════════════════════════════════════════════════════════════════ */ .atracao-card{ position:relative; aspect-ratio:var(--atracao-img-aspect, 3/4); /* v2.0.1 — medido no código-fonte real da referência (.guest{border-radius: 12px}): mais reto que o --r-media (28px) genérico de "card de mídia". */ border-radius:12px; overflow:hidden; cursor:pointer; display:block; container-type:inline-size; /* pro monograma escalar com o card (cqi) */ transition:transform .25s ease,box-shadow .25s ease; background:var(--atracao-img-bg, var(--dark)); /* v2.0.1 — cor base branca (como .guest{color:white} na referência): todo texto do card (número, rótulo, dia, nome, link) herda daqui, e .lime-guest sobrescreve pra ink numa única declaração — sem repetir "color" em cada elemento filho. */ color:#fff; } .atracao-card:hover{transform:translateY(-3px)} /* box-shadow: ver preset --card-hover-shadow mais abaixo */ .atracao-img{position:absolute;inset:0} .atracao-img img{width:100%;height:100%;display:block;object-fit:var(--atracao-img-fit, cover);object-position:var(--atracao-img-position, center);transition:transform .5s ease} .atracao-card:hover .atracao-img img{transform:scale(1.04)} /* v1.59.3 — Enquadramento da imagem destacada (object-fit/position). cover-center é o default (.atracao-img img já é cover/center); os modificadores ajustam. */ .atracao-img--cover-top img{ object-fit:cover; object-position:center top; } .atracao-img--cover-bottom img{ object-fit:cover; object-position:center bottom; } .atracao-img--cover-left img{ object-fit:cover; object-position:left center; } .atracao-img--cover-right img{ object-fit:cover; object-position:right center; } .atracao-img--cover-top-right img{ object-fit:cover; object-position:right top; } .atracao-img--cover-bottom-right img{ object-fit:cover; object-position:right bottom; } .atracao-img--cover-bottom-left img{ object-fit:cover; object-position:left bottom; } .atracao-img--contain img{ object-fit:contain; background:#0a0a0a; } .atracao-img--zoom img{ object-fit:cover; object-position:center; transform:scale(1.15); } .atracao-card:hover .atracao-img--zoom img{ transform:scale(1.22); } /* v2.0.1 — degradê medido no código-fonte real da referência: FOTO leva shade PRETO (contraste normal, sem tingir a imagem) — o volt/lime é exclusivo do card SEM foto (.lime-guest), onde não há imagem pra proteger. */ .atracao-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,8,8,.94) 100%);pointer-events:none} /* Sem foto: fundo lime sólido + iniciais como marca d'água. */ .lime-guest{background:var(--lime);color:var(--ink,#090A09)} .lime-guest .atracao-shade{background:linear-gradient(180deg,transparent,rgba(146,194,0,.93))} .atracao-mono{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:800;line-height:1; font-size:58cqi;color:rgba(0,0,0,.08); pointer-events:none;user-select:none; } .atracao-top{position:absolute;top:20px;left:20px;right:20px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:10px} .atracao-num{font-size:9px;opacity:.6} /* Rótulo vira chip de vidro (borda + fundo translúcido) — igual à referência, inclusive sobre fundo lime: só o TEXTO herda ink lá (via .lime-guest{color}), o vidro branco continua branco nos dois casos. */ .atracao-kind{font-size:8px;font-weight:700;text-transform:uppercase;padding:8px 11px;border:1px solid rgba(255,255,255,.33);background:rgba(255,255,255,.094);border-radius:var(--r-chip,999px)} .atracao-kind--destaque{background:var(--lime);color:#1a1a1a;border-color:transparent;padding:4px 10px} .lime-guest .atracao-kind--destaque{background:var(--ink,#090A09);color:var(--lime)} .atracao-copy{position:absolute;left:24px;right:24px;bottom:24px;z-index:2} .atracao-copy .atracao-time{display:block;font-size:9px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:var(--lime,#a6df00)} .atracao-copy .atracao-time.is-tbd{opacity:.75;font-style:italic} .lime-guest .atracao-copy .atracao-time{color:var(--ink,#090A09)} .atracao-name{font-family:var(--font-display);font-weight:800;font-size:31px;letter-spacing:-.04em;text-transform:uppercase;line-height:.92;margin:8px 0 22px} .atracao-link{display:flex;align-items:center;justify-content:space-between;padding-top:17px;border-top:1px solid rgba(255,255,255,.23);font-size:9px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;text-decoration:none;transition:opacity .2s} .atracao-link:hover{opacity:.75} .atracao-link span{color:var(--lime,#a6df00)} .lime-guest .atracao-link{border-top-color:rgba(0,0,0,.2)} .lime-guest .atracao-link span{color:var(--ink,#090A09)} /* Nome/link/dia sobre fundo lime herdam ink automaticamente de .lime-guest {color} acima — mesmo mecanismo da referência, sem precisar redeclarar cada elemento. */ /* ══════════════════════════════════════════════════════════════════════ v1.94.1 — EXPERIÊNCIAS (Design System 2026, seção 03 da matriz) Bento: 1 principal + 3 largos (grid 2fr/3fr) + fileira de mini (flex-wrap). Portado de theme/hero-expo-2026/assets/css/home.css (outra sessão construiu essa seção do zero, num tema à parte) — mesma estrutura, tokens trocados pelos equivalentes que já existem aqui: --volt→--lime, --surface/--border/ --text→--card-bg/--border/--text-primary (já invertem sozinhos dentro da banda "base", motor da Fase 5/6), --r-media é o MESMO nome/valor nos dois. Cabeçalho reaproveita .section-header--split (Fase 7, criada pra Atrações) em vez de um wrapper novo — é a mesma composição (kicker+h2 numa coluna, parágrafo na outra). ══════════════════════════════════════════════════════════════════════ */ .experiencias{background:var(--paper)} /* papel de banda "base" cuida disso; fallback caso o wrapper não esteja presente */ /* v2.7.0 — geometria medida no código-fonte da referência (.experience-grid / .experience / .mini-experience / .more-attractions em globals.css). Antes eram dois wrappers em flex (2fr/3fr), o que deixava o card principal MENOR que o da referência e transformava os "mini" numa linha baixa com miniatura ao lado. Agora: uma grade só de 2 colunas x 3 faixas de 210px (o principal ocupa as 3 faixas) + uma fileira separada de 3 cards de foto de 360px. */ .exp-bento{display:block;max-width:1200px;margin:0 auto} .exp-bento__grid{display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:repeat(3,210px);gap:14px} .exp-bento__card--main{grid-row:1/4} .exp-bento__mini-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px} .exp-bento__card{ position:relative;display:flex;flex-direction:column;justify-content:space-between; overflow:hidden;padding:25px;border-radius:15px; background:#171917;border:1px solid rgba(255,255,255,.19);color:#FFF; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); isolation:isolate; /* segura os z-index negativos da mídia dentro do card */ text-decoration:none;transition:transform .25s ease,box-shadow .25s ease; } .exp-bento__card:hover{transform:translateY(-3px);box-shadow:0 20px 46px -18px var(--shadow-strong)} .exp-bento__card--mini{height:360px;padding:24px;background:none;box-shadow:none} .exp-bento__media{position:absolute;z-index:-3;inset:0;background-size:cover;background-position:center;transition:transform .55s ease,filter .55s ease;filter:brightness(1.12) saturate(.98) contrast(1.02)} .exp-bento__card:hover .exp-bento__media{transform:scale(1.045);filter:brightness(1.18) saturate(1.08) contrast(1.02)} .exp-bento__card--main .exp-bento__media{background-position:center 28%} /* Shade por tamanho: o largo escurece da ESQUERDA (o texto fica à esquerda), o principal e o mini escurecem de BAIXO. Valores da referência. */ .exp-bento__shade{position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,rgba(8,10,8,.72) 0%,rgba(8,10,8,.3) 54%,rgba(8,10,8,.04) 100%),linear-gradient(0deg,rgba(8,10,8,.66) 0%,transparent 65%)} .exp-bento__card--main .exp-bento__shade{background:linear-gradient(0deg,rgba(8,10,8,.82) 0%,rgba(8,10,8,.32) 43%,rgba(8,10,8,.02) 72%),linear-gradient(90deg,rgba(8,10,8,.2),transparent 60%)} .exp-bento__card--mini .exp-bento__shade{background:linear-gradient(0deg,rgba(6,8,6,.9) 0%,rgba(6,8,6,.22) 65%,rgba(6,8,6,.05) 100%)} /* Anel volt estourando o canto inferior direito — assinatura da seção. */ .exp-bento__card--main::after, .exp-bento__card--wide::after{content:'';position:absolute;z-index:-1;width:200px;height:200px;border:44px solid rgba(166,223,0,.11);border-radius:50%;right:-74px;bottom:-116px;transition:transform .45s ease} .exp-bento__card--main::after{width:500px;height:500px;border-width:95px;border-color:rgba(166,223,0,.09);right:-270px;bottom:-180px} .exp-bento__card--main:hover::after, .exp-bento__card--wide:hover::after{transform:scale(1.12)} /* Sem foto: card lime sólido + monograma gigante — mesmo princípio do card de convidado (Atrações), não é um placeholder cinza. */ .exp-bento__card--sem-foto{background:var(--lime);border-color:var(--lime);color:var(--ink,#090A09)} .exp-bento__card--sem-foto::after{display:none} .exp-bento__monogram{position:absolute;z-index:-1;right:12px;bottom:12px;font-family:var(--font-display);font-weight:900;font-size:5rem;line-height:1;opacity:.22;pointer-events:none} /* Etiqueta de acesso: topo à DIREITA. A de inscrição é lime sólido; a de acesso livre é vidro escuro. */ .exp-bento__tags{position:relative;z-index:3;align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px} .exp-bento__tag{padding:7px 10px;border:1px solid rgba(223,255,127,.6);border-radius:var(--r-chip,999px);background:rgba(10,12,9,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#eaffac;font-size:7px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.33)} .exp-bento__tag--signup{border-color:var(--lime);background:var(--lime);color:var(--ink,#090A09)} /* No mini a etiqueta é mais discreta (branca, sem preenchimento lime). */ .exp-bento__card--mini .exp-bento__tag{border-color:rgba(255,255,255,.36);background:rgba(10,12,10,.44);color:#FFF;box-shadow:none;letter-spacing:.1em} .exp-bento__card--mini .exp-bento__tag--signup{border-color:rgba(166,223,0,.5);color:#c6f000} .exp-bento__card--sem-foto .exp-bento__tag{border-color:rgba(9,10,9,.3);background:rgba(9,10,9,.1);color:var(--ink,#090A09);box-shadow:none} .exp-bento__card--sem-foto .exp-bento__tag--signup{background:var(--ink,#090A09);border-color:var(--ink,#090A09);color:var(--lime)} .exp-bento__body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;max-width:78%;text-shadow:0 2px 12px #000} .exp-bento__card--sem-foto .exp-bento__body{text-shadow:none} .exp-bento__card--main .exp-bento__body{max-width:88%} .exp-bento__card--mini .exp-bento__body{max-width:none} .exp-bento__kicker{color:var(--lime,#a6df00);font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase} .exp-bento__card--sem-foto .exp-bento__kicker{color:rgba(9,10,9,.6)} .exp-bento__title{font-family:var(--font-display);font-weight:800;margin:9px 0 7px;font-size:29px;line-height:.95;letter-spacing:-.045em;text-transform:uppercase} .exp-bento__card--main .exp-bento__title{margin:13px 0;font-size:68px;line-height:.92} .exp-bento__card--mini .exp-bento__title{margin:10px 0;font-size:38px;line-height:.92;letter-spacing:-.05em} .exp-bento__desc{margin:0;max-width:390px;color:rgba(255,255,255,.88);font-size:11px;line-height:1.5} .exp-bento__card--main .exp-bento__desc{max-width:430px;font-size:14px} .exp-bento__card--mini .exp-bento__desc{margin-bottom:18px} .exp-bento__card--sem-foto .exp-bento__desc{color:rgba(9,10,9,.68)} /* Chamada do principal e do mini: link sublinhado. */ .exp-bento__cta{display:inline-flex;align-items:center;gap:38px;margin-top:24px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.69);font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:color .25s,border-color .25s} .exp-bento__card--mini .exp-bento__cta{gap:8px;margin-top:0;padding-bottom:7px;border-bottom-color:rgba(255,255,255,.56);font-size:8px} .exp-bento__card:hover .exp-bento__cta{color:var(--lime);border-bottom-color:var(--lime)} .exp-bento__card--sem-foto .exp-bento__cta{border-bottom-color:rgba(9,10,9,.45)} .exp-bento__card--sem-foto:hover .exp-bento__cta{color:var(--ink,#090A09);border-bottom-color:var(--ink,#090A09)} /* Chamada do largo: botão circular com seta, canto inferior direito. */ .exp-bento__go{position:absolute;z-index:3;right:25px;bottom:25px;width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(11,12,11,.44);color:#c6f000;font-size:13px;transition:.25s} .exp-bento__card--wide:hover .exp-bento__go{background:var(--lime);color:var(--ink,#090A09);border-color:var(--lime);transform:rotate(8deg)} .exp-bento__card--sem-foto .exp-bento__go{border-color:rgba(9,10,9,.35);background:rgba(9,10,9,.08);color:var(--ink,#090A09)} @media(max-width:980px){ /* Principal passa a ocupar a largura toda (fica na faixa de 450px) e os 3 largos viram 2+1. */ .exp-bento__grid{grid-template-columns:1fr 1fr;grid-template-rows:450px 300px 300px} .exp-bento__card--main{grid-row:auto;grid-column:1/3} .exp-bento__card--main .exp-bento__title{font-size:52px} .exp-bento__card--wide:nth-of-type(4){grid-column:1/3} .exp-bento__mini-row{grid-template-columns:1fr 1fr} .exp-bento__card--mini:last-child{grid-column:1/3} } @media(max-width:680px){ .exp-bento__grid{grid-template-columns:1fr;grid-template-rows:none} .exp-bento__card{min-height:300px} /* O principal continua MAIOR que os outros no celular (480 contra 300) — na referência isto vem DEPOIS da regra de 300px de propósito: as duas têm a mesma especificidade, então quem vence é a ordem. Sem esta linha o card principal encolhe pro mesmo tamanho dos demais. */ .exp-bento__card--main{min-height:480px} .exp-bento__card--main, .exp-bento__card--wide:nth-of-type(4){grid-column:auto} .exp-bento__body{max-width:88%} .exp-bento__title{font-size:32px} /* 52px é a intenção declarada da referência pro título do principal no celular; lá ela é anulada 2 linhas depois por `.experience h3{32px}` (mesma especificidade, vem depois) — copiar esse acidente deixaria o card grande com título de card pequeno. Aqui a classe do principal é mais específica, então a intenção vale. */ .exp-bento__card--main .exp-bento__title{font-size:52px} .exp-bento__mini-row{grid-template-columns:1fr} .exp-bento__card--mini, .exp-bento__card--mini:last-child{grid-column:auto;height:340px} } @media(prefers-reduced-motion:reduce){ .exp-bento__card,.exp-bento__media,.exp-bento__go{transition:none} .exp-bento__card:hover{transform:none} .exp-bento__card:hover .exp-bento__media{transform:none} .exp-bento__card--main:hover::after,.exp-bento__card--wide:hover::after{transform:none} } /* ── Concursos / Inscrições ── */ /* v1.95.0 — Design System 2026: papel virou "elevado" (era "midia", sempre escura). O pacote pede um degrau acima da base, não uma faixa fixa — "04 Competições" na matriz. --bg-elevated já é EXATAMENTE esse token (branco no claro, #202027 no escuro) e o wrapper de banda (hero-section-role) já pinta o fundo por cima; esta regra é só o fallback caso o wrapper não esteja presente. color virou --text-primary: com --ink fixo, título/linhas ficariam brancos sobre fundo agora claro. */ .concursos{background:var(--bg-elevated);color:var(--text-primary);position:relative;overflow:hidden} /* ══════════════════════════════════════════════════════════════════════ v2.8.0 — "Entre no jogo" é um CONTAINER dentro do bloco de Experiências, não uma faixa própria. Na referência, .registration-panel é aninhado na seção #experiencias com 70px de respiro; aqui as duas continuam sendo seções separadas (o Editor Visual mantém ordem/liga-desliga/campos de cada uma), mas quando `concursos` vem LOGO DEPOIS de `experiencias` elas se fundem visualmente: mesmo fundo e sem a emenda de espaçamento. :has() é de propósito: se o admin reordenar as seções, a regra deixa de casar e cada uma volta a ser uma faixa independente com seu próprio papel de banda — nada quebra. A especificidade (0,4,0 / 0,5,0) vence de propósito a regra de banda (0,2,1 / 0,3,1), que senão pintaria o fundo "elevado". ══════════════════════════════════════════════════════════════════════ */ .hero-section-role:has(> .experiencias):has(+ .hero-section-role > .concursos) > .experiencias{padding-bottom:0} .hero-section-role:has(> .experiencias) + .hero-section-role > .concursos{ --band-bg:var(--paper);background-color:var(--band-bg);padding-top:70px; } [data-theme="dark"] .hero-section-role:has(> .experiencias) + .hero-section-role > .concursos{ --band-bg:var(--ink);background-color:var(--band-bg); } .concursos::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 10% 80%,rgba(166,223,0,.1) 0%,transparent 40%),radial-gradient(circle at 90% 20%,rgba(255,77,141,.08) 0%,transparent 40%)} .concursos .section-tag{background:rgba(166,223,0,.15);border-color:rgba(166,223,0,.3)} /* ══════════════════════════════════════════════════════════════════════ v1.94.0 — LINHA DE INSCRIÇÃO (Design System 2026, "04 Competições"): era grade de cards, virou lista de linhas horizontais (thumb 68px + texto + CTA), medido na referência. Pills/descrição/regulamento (que a referência não mostra, mas são dados reais que não podem desaparecer) viraram um disclosure compacto — o MESMO
de antes, só reestilizado como um painel que se abre por cima da lista, ancorado na própria linha. ══════════════════════════════════════════════════════════════════════ */ /* v2.0.0 — "Entre no jogo": texto à esquerda + lista de inscrição num cartão claro flutuando à direita (referência de design), lado a lado. */ /* v2.8.0 — O PAINEL É O PRÓPRIO GRID (era um grid transparente com um cartão branco só em volta da lista, deixando o título "Entre no jogo" FORA do branco). Na referência, `.registration-panel` é uma coisa só: o cartão claro contém as duas colunas — intro à esquerda e lista à direita. Medidas da referência: .68fr/1.32fr, gap 70, padding 55, raio 20, intro grudada no topo ao rolar. O painel é SEMPRE claro (não acompanha o modo escuro do site): flutua sobre o fundo da seção nos dois modos. Reescrevendo aqui os mesmos tokens que os filhos já consomem, nada interno precisa de regra nova pra "forçar" claro. */ .concursos-panel{ --text-primary:#1a1a1a;--text-secondary:#737373;--mid-gray:#686868; --border:rgba(9,10,9,.14);--border-hover:#ccc; /* v2.9.0 — âmbar de escassez travado na variante de SUPERFÍCIE CLARA. Sem isto, no modo escuro o --warn-text global vira #FFB020 (âmbar claro, feito pra fundo escuro) e ficaria ilegível sobre este painel branco. O texto usa um tom MAIS ESCURO que o --warn-text global (#D9480F): medido, aquele dá 4.3:1 sobre branco, abaixo do mínimo de 4.5 pra texto de 11px. A barra pode continuar com o âmbar vivo (elemento gráfico, não texto). */ --warn-text:#B23A05;--warn-bar-a:#E8A33D;--warn-bar-b:#F76707; --bg-alt:#f3f4f0;--card-bg:#fff;--card-border:#ececec;--lime-dark:#5a7a00;--shadow-strong:rgba(0,0,0,.3); display:grid;grid-template-columns:.68fr 1.32fr;gap:70px;align-items:start; max-width:1200px;margin:0 auto;position:relative;z-index:1; background:#fff;color:var(--text-primary);border-radius:var(--r-card,20px);padding:55px; box-shadow:0 30px 60px -30px rgba(0,0,0,.4); } .concursos-panel__intro{position:sticky;top:40px} .concursos-panel__intro .section-title{text-align:left;margin:14px 0 16px} .concursos-panel__intro .section-desc{text-align:left;max-width:340px;margin:0} /* v2.9.0 — dentro do painel o kicker é TEXTO, não pílula (a moldura de vidro existe pra kicker sobre foto/faixa; aqui é sobre papel branco e a pílula pesava). Escopo local de propósito: o padrão de pílula do resto do site continua intacto. */ /* O 2º seletor não é redundante: existe um `[data-theme="dark"] .section-tag` mais abaixo no arquivo que repõe o fundo da pílula com a MESMA especificidade e venceria por ordem de cascata. */ .concursos-panel__intro .section-tag, [data-theme="dark"] .concursos-panel__intro .section-tag{ display:block;background:none;border:0;padding:0;border-radius:0;margin-bottom:0; font-family:var(--font-landing-mono,ui-monospace,monospace); font-size:11px;font-weight:500;letter-spacing:.16em;color:var(--lime-dark); } .concursos-panel__intro .section-tag .ti{display:none} /* Nota curta: bolinha lime + texto miúdo. */ .concursos-panel__note{ display:flex;align-items:center;gap:9px;margin:28px 0 0; font-family:var(--font-landing-mono,ui-monospace,monospace); font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary); } .concursos-panel__note i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--lime)} @media(max-width:900px){ .concursos-panel{grid-template-columns:1fr;gap:38px;padding:42px} .concursos-panel__intro{position:static} .concursos-panel__intro .section-desc{max-width:none} } @media(max-width:560px){ .concursos-panel{padding:26px 20px} } .concursos-list{display:flex;flex-direction:column;margin:0 auto;position:relative;z-index:1;border-top:1px solid var(--border)} .concurso-row{ position:relative; display:grid;grid-template-columns:68px 1fr auto;column-gap:17px;align-items:center; min-height:135px;padding:22px 0;border-bottom:1px solid var(--border); transition:background-color .2s; } .concurso-row:hover{background:rgba(0,0,0,.03)} [data-theme="dark"] .concurso-row:hover{background:rgba(255,255,255,.03)} .concurso-row__thumb{width:68px;height:68px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--bg-alt)} .concurso-row__img{width:100%;height:100%;object-fit:cover;display:block} .concurso-image--cover-top .concurso-row__img{object-position:center top} .concurso-image--cover-bottom .concurso-row__img{object-position:center bottom} .concurso-image--cover-left .concurso-row__img{object-position:left center} .concurso-image--cover-right .concurso-row__img{object-position:right center} .concurso-image--cover-top-right .concurso-row__img{object-position:right top} .concurso-image--cover-bottom-right .concurso-row__img{object-position:right bottom} .concurso-image--cover-bottom-left .concurso-row__img{object-position:left bottom} .concurso-image--contain .concurso-row__img{object-fit:contain;background:#0a0a0a} .concurso-row__icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px} .concurso-row__body{min-width:0} /* --lime-dark, não --lime: o pacote reprova volt puro como texto pequeno ("kicker volt em seção clara reprova contraste"), agora que a seção pode ficar clara. */ /* v2.7.0 — escalas da referência (.tournament-row): rótulo 7px, título 18px em caixa alta com tracking negativo, meta 9px. --lime-dark, não --lime: o pacote reprova volt puro como texto pequeno ("kicker volt em seção clara reprova contraste"), e este painel é claro. */ /* v2.9.0 — rótulo em monoespaçada (Geist Mono), como no alvo. */ .concurso-row__kind{display:block;font-family:var(--font-landing-mono,ui-monospace,monospace);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-dark);margin-bottom:0} .concurso-row__title{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.025em;text-transform:uppercase;color:var(--text-primary);margin:7px 0 6px;line-height:1.15} .concurso-row__meta{font-size:11px;color:var(--text-secondary);margin:0;line-height:1.5} /* v2.9.0 — VAGAS em destaque: monoespaçada + negrito, porque é o número que decide a inscrição. Três estados: normal (ink), poucas (âmbar) e esgotado (cinza + riscado). Os tokens de aviso/erro já existem nos 4 escopos. */ .concurso-row__slots{font-family:var(--font-landing-mono,ui-monospace,monospace);font-weight:500;font-size:11px;letter-spacing:.01em;color:var(--text-primary);white-space:nowrap} .concurso-row__metatxt+.concurso-row__slots::before{content:'·';margin:0 7px;color:var(--border-hover);font-weight:400} .concurso-row__slots.is-low{color:var(--warn-text)} .concurso-row__slots.is-out{color:var(--text-secondary);text-decoration:line-through} /* Barra de ocupação: enche conforme lota (não é "quanto sobra"). */ .concurso-row__gauge{position:relative;height:5px;margin-top:9px;max-width:270px;border-radius:var(--r-chip,999px);background:var(--bg-alt);overflow:hidden} .concurso-row__gauge>span{display:block;height:100%;border-radius:inherit;background:var(--lime);transition:width .4s ease} .concurso-row__gauge.is-low>span{background:linear-gradient(90deg,var(--warn-bar-a),var(--warn-bar-b))} .concurso-row__gauge.is-out>span{background:var(--text-secondary)} @media(prefers-reduced-motion:reduce){.concurso-row__gauge>span{transition:none}} /* v2.9.0 — mobile do contador. Este bloco fica AQUI (depois das regras base) de propósito: as duas têm a mesma especificidade, então quem vence é a ordem no arquivo. Colocado junto do `.concursos-panel` lá acima, o `nowrap` base vencia e a linha estourava a largura no celular. */ @media(max-width:560px){ .concurso-row__slots{display:block;white-space:normal;margin-top:3px} .concurso-row__metatxt+.concurso-row__slots::before{content:none;margin:0} } .concurso-row__cta{display:flex;flex-direction:column;align-items:flex-end;gap:6px} /* Botão-contorno da linha: ink 1px, preenche no hover (referência). */ .concurso-row__cta .btn-inscricao{width:auto;white-space:nowrap;min-height:42px;padding:0 14px;gap:23px;border-width:1px;border-color:var(--text-primary);font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase} .concurso-row__cta .btn-inscricao:hover:not(:disabled){background:var(--text-primary);color:#FFF;border-color:var(--text-primary)} .btn-inscricao{border-radius:var(--r-btn);border:1.5px solid var(--border-hover);background:transparent;color:var(--text-primary);font-family:var(--font-body);font-size:13.5px;font-weight:700;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:6px} .btn-inscricao:hover:not(:disabled){background:var(--lime);color:var(--dark);border-color:var(--lime)} .btn-inscricao:disabled{opacity:.5;cursor:not-allowed} .concurso-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .concurso-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.3px;padding:4px 10px;border-radius:var(--r-chip,999px);background:color-mix(in srgb,var(--pill,#a6df00) 16%,transparent);color:var(--pill,#a6df00)} .concurso-desc{color:var(--text-secondary);font-size:13.5px;line-height:1.6;margin:0 0 12px} .concurso-rules-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;color:var(--text-secondary);font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:color .15s} .concurso-rules-btn:hover{color:var(--lime)} .concurso-rules-btn--pdf{color:var(--error-text)} /* v1.95.0 — era #FF8071 fixo: baixo contraste sobre fundo agora possivelmente branco */ .concurso-rules-btn--pdf:hover{opacity:.8} .concurso-rules-btn + .concurso-rules-btn{margin-top:8px;display:flex} /* Contagem regressiva embutida na linha (estado "em breve"). */ .concurso-countdown{margin-top:8px;display:flex;flex-direction:column;gap:4px} .concurso-countdown__label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-secondary)} .concurso-countdown__timer{display:flex;align-items:baseline;gap:5px;font-family:var(--font-display);color:var(--text-primary);font-size:13px} .concurso-countdown__timer .cc-lbl{font-size:9px;color:var(--text-secondary);margin-right:3px} .concurso-countdown.is-live .cc-num{color:var(--lime)} .concurso-countdown.is-live .concurso-countdown__label i{animation:pulse 1.2s ease infinite} @media(max-width:640px){ .concurso-row{grid-template-columns:52px 1fr auto;column-gap:12px} .concurso-row__thumb{width:52px;height:52px;border-radius:10px} .concurso-row__title{font-size:16px} .concurso-row__cta .btn-inscricao{padding:9px 14px;font-size:12.5px} .concurso-row__cta .btn-inscricao span{display:none} } /* ── Ingressos ── */ .ingressos{background:var(--light-gray)} /* v1.79.3 — Cards de ingresso "Bilhete de Festival" (cor por categoria + picote) */ .ingressos{--ig-notch:var(--band-bg,var(--light-gray,#f1f1ef))} /* v1.90.1 — segue a zebra automática (--band-bg) */ /* v1.79.5 — abas de filtro por categoria */ /* v1.80.79 — Filtro de tipos em abas sublinhadas (mesmo padrão do .hp-tab-nav do perfil / .hms-tab do painel do vendedor): divisória 1px, aba ativa em lime, alinhada à esquerda na mesma largura (1040px) da .ingressos-grid. */ /* v2.0.0 — .ig-filter e .ing-methods agora vivem lado a lado dentro de .ig-tools (referência: filtros à esquerda + selo de pagamento à direita, mesma linha). .ig-filter perde o auto-centering próprio — quem centraliza e limita a largura agora é o wrapper. */ .ig-tools{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:1040px;margin:0 auto 28px} .ig-tools .ig-filter{margin:0 0 -1px;flex:1 1 320px;min-width:0} .ig-tools .ing-methods{margin-top:0;flex-shrink:0} @media (max-width:900px){ .ig-tools{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:24px} .ig-tools .ing-methods{align-self:flex-start} } .ig-filter{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-start;border-bottom:1px solid var(--border,#ececec)} /* v1.80.81 — em telas estreitas as abas rolam na horizontal em vez de quebrar em várias linhas (a divisória embaixo só faz sentido numa linha só). */ @media (max-width:768px){ .ig-filter{flex-wrap:nowrap;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;gap:2px} .ig-filter::-webkit-scrollbar{display:none} .ig-filter__chip{padding:9px 12px;font-size:12.5px} } .ig-filter__chip{display:inline-flex;align-items:center;gap:6px;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 15px;font-family:inherit;font-size:14px;font-weight:700;color:var(--mid-gray,#8a8a8a);white-space:nowrap;cursor:pointer;transition:color .15s,border-color .15s} .ig-filter__chip:hover{color:var(--text-primary)} /* v1.90.3 — era #555 */ .ig-filter__chip.is-on{color:var(--text-primary,#1a1a1a);border-bottom-color:#a6df00} [data-theme="dark"] .ig-filter{border-bottom-color:var(--card-border,#262626)} [data-theme="dark"] .ig-filter__chip{color:var(--text-secondary)} [data-theme="dark"] .ig-filter__chip.is-on{color:var(--text-primary,#e8e8e8);border-bottom-color:#a6df00} .ingressos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;max-width:1040px;margin:0 auto} .ingresso-card{ --accent:var(--lime,#a6df00);--accent-dark:#6f9e00;--accent-soft:rgba(166,223,0,.14);--accent-bd:rgba(166,223,0,.34); --card-hover-y:-6px;--card-hover-border:var(--accent-bd);--card-hover-shadow:0 22px 50px -16px var(--accent-soft),0 14px 34px rgba(0,0,0,.08); position:relative;display:flex;flex-direction:column;background:var(--white);border:1.5px solid var(--card-border,#ECECEC);border-radius:var(--r-card);padding:0 30px 30px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;text-align:center} .ingresso-card.cat-inteira{--accent:#a6df00;--accent-dark:#6f9e00;--accent-soft:rgba(166,223,0,.14);--accent-bd:rgba(166,223,0,.34)} .ingresso-card.cat-meia{--accent:#23B5C4;--accent-dark:#117a85;--accent-soft:rgba(35,181,196,.13);--accent-bd:rgba(35,181,196,.34)} .ingresso-card.cat-vip{--accent:#F2B229;--accent-dark:#a8760a;--accent-soft:rgba(242,178,41,.16);--accent-bd:rgba(242,178,41,.4)} .ingresso-card.cat-cosplay{--accent:#B07BFF;--accent-dark:#6b3fc0;--accent-soft:rgba(176,123,255,.14);--accent-bd:rgba(176,123,255,.34)} .ig-accent{position:absolute;top:0;left:0;right:0;height:5px;background:var(--accent)} .ingresso-card.featured{border-color:var(--accent);transform:scale(1.035)} .ingresso-card.featured::before{content:'MAIS POPULAR';position:absolute;top:15px;right:14px;z-index:3;background:var(--accent);color:#1a1a1a;padding:5px 12px;border-radius:50px;font-size:10px;font-weight:800;letter-spacing:1px} .ig-lote{position:absolute;top:16px;left:0;background:var(--accent-soft);color:var(--accent-dark);font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 13px 4px 14px;border:1px solid var(--accent-bd);border-left:0;border-radius:0 50px 50px 0} .ig-head{padding-top:36px} .ig-day{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--accent-dark);background:var(--accent-soft);border:1px solid var(--accent-bd);padding:5px 13px;border-radius:50px;letter-spacing:.3px} .ig-day .ti{font-size:15px} .ig-cat{font-family:var(--font-display,'Bangers');font-size:31px;letter-spacing:1.5px;color:var(--text-primary);margin:14px 0 0;line-height:1;text-transform:uppercase} .ig-price{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:16px} .ig-cur{font-size:20px;color:var(--mid-gray);font-weight:600} .ig-val{font-family:var(--font-display,'Bangers');font-size:62px;color:var(--text-primary);line-height:.9;letter-spacing:1px} .ig-install{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:7px;font-size:13px;color:var(--mid-gray)} .ig-install__sj{font-weight:700;color:var(--accent-dark)} .ig-install .ti{font-size:15px;color:var(--accent-dark)} /* v1.90.3 — era #bcbcbc: além de não inverter com a banda, dava só 2,3:1 sobre branco (reprova WCAG). --text-secondary inverte e passa. */ .ig-old{color:var(--text-secondary);font-size:13px;text-decoration:line-through;margin-top:4px} .ig-perf{position:relative;height:0;border-top:2px dashed var(--accent-bd);margin:22px -30px} .ig-perf::before,.ig-perf::after{content:'';position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--ig-notch)} .ig-perf::before{left:-12px}.ig-perf::after{right:-12px} /* v1.80.84 — linha condensada dos benefícios BÁSICOS (o que todo ingresso já dá). Discreta de propósito: ela informa, os diferenciais é que vendem. GOTCHA: .ig-check está DEPOIS neste arquivo e tem a mesma especificidade (0,1,0). Por isso o modificador usa seletor descendente — senão .ig-check venceria a cascata e devolveria o círculo colorido. */ .ig-feats-base{display:flex;align-items:flex-start;gap:8px;text-align:left;margin:0 0 12px;font-size:12.5px;line-height:1.35;color:var(--mid-gray,#6b6b6b)} .ig-feats-base .ig-check--base{width:18px;height:18px;font-size:12px;background:transparent;border:1px solid var(--border,#e0e0e0);color:var(--mid-gray,#8a8a8a)} [data-theme="dark"] .ig-feats-base{color:var(--text-secondary)} [data-theme="dark"] .ig-feats-base .ig-check--base{border-color:var(--card-border);color:var(--text-secondary)} .ig-feats-head{text-align:left;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent-dark);margin-bottom:6px} .ig-feats{list-style:none;margin:0;padding:0;text-align:left} .ig-feats li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:14px;color:var(--mid-gray);line-height:1.45} /* v1.79.16 — benefícios extras (4º+) ficam ocultos até expandir. A classe vence a regra base .ig-feats li (especificidade 0,2,1 > 0,1,1), ao contrário do atributo [hidden], que era sobreposto pelo display:flex. */ .ig-feats li.ig-feat-extra{display:none} .ig-feats.is-expanded li.ig-feat-extra{display:flex;animation:igFeatIn .32s cubic-bezier(.16,.84,.44,1) both;animation-delay:calc(var(--ig-fi,0) * 45ms)} @keyframes igFeatIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.ig-feats.is-expanded li.ig-feat-extra{animation:none}} .ig-check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:1px} .ig-feats-toggle{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:4px 0;background:none;border:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--accent-dark);font-family:inherit} .ig-feats-toggle .ti{font-size:16px;transition:transform .2s} .ig-feats-toggle.is-open .ti{transform:rotate(180deg)} .ig-feats-toggle:hover{text-decoration:underline} /* empurra a barra/CTA pro fim do card mesmo com a lista variável */ .ig-perf + .ig-feats-head{margin-top:0} .ingresso-card .ig-sold{margin-top:auto} .ig-sold{margin:16px 0 18px} /* v1.90.3 — trilho da barra era #ededed fixo: em banda escura virava uma faixa quase branca de ponta a ponta e o medidor parecia sempre 100% cheio. */ .ig-sold-bar{height:8px;border-radius:50px;background:var(--border);overflow:hidden} .ig-sold-bar span{display:block;height:100%;background:var(--accent);border-radius:50px;transition:width 1s ease} .ig-sold-txt{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:7px;font-size:11.5px;font-weight:700;color:var(--mid-gray)} .ig-sold-txt.is-low{color:var(--warn-text)} /* v1.90.3 — âmbar agora inverte por banda, não só por modo */ .ig-sold-txt.is-low .ti{color:var(--warn-text);font-size:14px} /* v1.80.81 — escassez (>=80%): a barra acompanha o texto e vira âmbar. Gradiente dá direção de leitura (o "cheio" fica quente na ponta). */ .ig-sold.is-low .ig-sold-bar span{background:linear-gradient(90deg,var(--warn-bar-a),var(--warn-bar-b))} .ig-cta-wrap{margin-top:auto} .btn-ingresso{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border-radius:var(--r-btn);font-family:var(--font-body);font-size:15px;font-weight:800;cursor:pointer;transition:all .25s;letter-spacing:.4px;text-decoration:none;border:2px solid var(--dark);background:var(--dark);color:var(--accent)} .btn-ingresso:hover:not(:disabled){background:var(--accent);color:#1a1a1a;border-color:var(--accent);transform:translateY(-2px)} .btn-ingresso.featured{background:var(--accent);color:#1a1a1a;border-color:var(--accent)} .btn-ingresso.featured:hover:not(:disabled){background:var(--dark);color:var(--accent);border-color:var(--dark)} /* v1.90.3 — era #e6e6e6 fixo: dentro de card escuro o botão MORTO virava o elemento mais luminoso, chamando mais atenção que os ativos. */ .btn-ingresso:disabled{opacity:.55;cursor:not-allowed;background:var(--border);color:var(--text-secondary);border-color:var(--border)} .btn-ingresso .ti{font-size:18px;transition:transform .2s} .btn-ingresso:hover:not(:disabled) .ti{transform:translateX(3px)} /* ── Edições Anteriores ── */ .edicoes{background:var(--white)} .edicoes-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:900px;margin:0 auto 64px;text-align:center} .stat-item .stat-num{font-family:var(--font-display);font-size:48px;color:var(--text-primary);letter-spacing:1px;font-variant-numeric:tabular-nums} .stat-item .stat-num span{color:var(--lime-dark)} .stat-item .stat-label{font-size:13px;color:var(--mid-gray);text-transform:uppercase;letter-spacing:1px;font-weight:500;margin-top:4px} /* ══════════════════════════════════════════════════════════════════════ v1.80.82 — RECAP (aftermovie + momentos + depoimento) na seção Edições. Usa a camada .hud (chanfro + tick). Blocos são opt-in no Editor Visual: sem vídeo não há reel, sem depoimento a linha vira só os números. ══════════════════════════════════════════════════════════════════════ */ .ed-reel{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;max-width:1200px;margin:0 auto 20px;align-items:stretch} .ed-reel--solo{grid-template-columns:1fr;max-width:900px} /* Facade do aftermovie: é um