/* ===================================================================== Hormones Mentoring ELITE — sistema visual Marrom · ouro · terroso · paleta por dobra A jogada central: todo componente herdado da LP do Essentials é comandado pelo token --neon. Aqui --neon aponta para o DOURADO, então botão, filete, marcador, brilho de card e o próprio shader nascem dourados sem uma única regra nova. Verde não sobra em lugar nenhum. Diferença de temperamento em relação ao Essentials: lá o neon BRILHA; aqui o ouro é metálico e contido. Halos menores, glow mais fraco, contorno em vez de luz. Marrom com ouro pede sobriedade. ===================================================================== */ /* ---------- tokens fixos ---------- */ :root{ --maxw:1140px; --gutter:24px; --dur-theme:.85s; --ease:cubic-bezier(.22,.68,.16,1); --step--2:clamp(13px,.82rem + .05vw,14px); --step--1:clamp(15px,.92rem + .08vw,16px); --step-0:clamp(17px,1.02rem + .12vw,18px); --step-1:clamp(17px,.95rem + .3vw,19px); --step-2:clamp(21px,1.05rem + .8vw,27px); --step-3:clamp(25px,1.2rem + 1.5vw,36px); --step-4:clamp(30px,1.4rem + 2.4vw,50px); --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:32px; --sp-5:48px; --sp-6:72px; --sp-7:106px; } /* ===================================================================== PALETAS — trocadas via data-palette no pelo JS ===================================================================== */ /* topo e autoridade — quase-preto amarronzado */ html[data-palette="noir"]{ --bg:#0E0906; --bg-2:#150E07; --bg-3:#1E140A; --fg:#F6EBD8; --fg-dim:#B39A78; --accent:#D9A83C; --accent-hi:#F3D68B; --neon:#D9A83C; --neon-hi:#F3D68B; --glow:rgba(217,168,60,.42); --line:rgba(217,168,60,.22); --card:rgba(217,168,60,.045); --wash:rgba(217,168,60,.09); --shade:rgba(0,0,0,.6); } /* dobras de conteúdo — marrom profundo */ html[data-palette="cacau"]{ --bg:#1A1109; --bg-2:#22160C; --bg-3:#2C1D10; --fg:#F7EEDE; --fg-dim:#BEA483; --accent:#E0B04A; --accent-hi:#F7DE9C; --neon:#E0B04A; --neon-hi:#F7DE9C; --glow:rgba(224,176,74,.4); --line:rgba(224,176,74,.24); --card:rgba(224,176,74,.05); --wash:rgba(224,176,74,.1); --shade:rgba(12,6,0,.55); } /* dobras alternadas — marrom quente, terroso */ html[data-palette="terra"]{ --bg:#291910; --bg-2:#322013; --bg-3:#3C2717; --fg:#FBF2E2; --fg-dim:#C9AE88; --accent:#EBBE5C; --accent-hi:#FFE6B0; --neon:#EBBE5C; --neon-hi:#FFE6B0; --glow:rgba(235,190,92,.4); --line:rgba(235,190,92,.26); --card:rgba(235,190,92,.055); --wash:rgba(235,190,92,.11); --shade:rgba(20,10,2,.5); } /* dobra clara — a galeria dos encontros. Sem token de luz: --neon vira marrom escuro legível, senão o ouro vaza em título, marcador e ícone e some contra o bege. */ html[data-palette="areia"]{ --bg:#EFE6D5; --bg-2:#E7DCC7; --bg-3:#DBCEB4; --fg:#1C1308; --fg-dim:#6B5843; --accent:#8A6516; --accent-hi:#A87D1E; --neon:#7A5A14; --neon-hi:#4A3608; --glow:rgba(122,90,20,.16); --line:rgba(28,19,8,.16); --card:rgba(255,255,255,.6); --wash:rgba(255,255,255,.6); --shade:rgba(70,52,26,.16); } /* CTA final — preto com ouro alto */ html[data-palette="onix"]{ --bg:#070402; --bg-2:#0D0805; --bg-3:#150D06; --fg:#FBF3E4; --fg-dim:#A18C6E; --accent:#F0C766; --accent-hi:#FFE7AE; --neon:#F0C766; --neon-hi:#FFE7AE; --glow:rgba(240,199,102,.45); --line:rgba(240,199,102,.24); --card:rgba(255,255,255,.032); --wash:rgba(240,199,102,.09); --shade:rgba(0,0,0,.85); } /* ---------- reset ---------- */ *{margin:0;padding:0;box-sizing:border-box} /* clip, NUNCA hidden: hidden cria contêiner de rolagem e quebra sticky */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} img{max-width:100%;display:block} a{color:inherit} button{font:inherit} /* a troca de dobra: só props de cor na transição global */ *,*::before,*::after{ transition:background-color var(--dur-theme) var(--ease), color var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease), box-shadow var(--dur-theme) var(--ease), text-shadow var(--dur-theme) var(--ease); } body{ background:var(--bg); color:var(--fg); font-family:'Jost',system-ui,sans-serif; font-weight:300; font-size:var(--step-0); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip; } h1,h2,h3,.display{ font-family:'Sora',system-ui,sans-serif;font-weight:600; letter-spacing:-.01em;line-height:1.2; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2} .h2{font-size:var(--step-3);color:var(--fg)} .lead{font-size:var(--step-1);color:var(--fg-dim);max-width:64ch;font-weight:300} .center{text-align:center} .center .lead{margin-left:auto;margin-right:auto} .section-head{margin-bottom:var(--sp-6)} .section-head.center{margin-left:auto;margin-right:auto} .eyebrow{ font-family:'Sora',sans-serif;font-weight:400;font-size:var(--step--2); letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-2); } .eyebrow.gold{color:var(--neon);text-shadow:0 0 10px var(--glow)} /* ===================================================================== LUZ NAS DOBRAS — opt-in, nunca em todas O facho morre antes das bordas da seção; se tocasse a borda, a costura entre uma dobra e a seguinte apareceria como um corte horizontal. ===================================================================== */ section{padding:var(--sp-7) 0;position:relative;background:var(--bg);isolation:isolate} section[data-lit]::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(62% 42% at 50% 34%,var(--wash),transparent 70%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 26%,#000 74%,transparent 100%); } section[data-lit="areia"]::before{ /* na dobra clara: luz difusa em cima, sombra fechando embaixo — volume em vez de bege chapado, sem nenhuma aresta visível */ background: radial-gradient(58% 40% at 50% 26%,var(--wash),transparent 70%), radial-gradient(76% 32% at 50% 80%,var(--shade),transparent 74%); } /* ===================================================================== OURO — utilitários O contorno escuro é desenhado ATRÁS do preenchimento (paint-order): ele separa a letra do halo em vez de engordar a fonte. ===================================================================== */ .gold,.final em{ paint-order:stroke fill; -webkit-text-stroke:.05em color-mix(in srgb,var(--bg) 84%,#000); color:var(--neon-hi); text-shadow: 0 0 8px color-mix(in srgb,var(--glow) 50%,transparent), 0 0 24px color-mix(in srgb,var(--glow) 24%,transparent); } .gold-soft{color:var(--neon);text-shadow:0 0 8px color-mix(in srgb,var(--glow) 45%,transparent)} /* moldura de ouro: contorno fino, halo contido */ .gold-box{ --stroke:color-mix(in srgb,var(--neon-hi) 55%,transparent); box-shadow: inset 0 0 0 1px var(--stroke), inset 0 0 40px -24px var(--glow), 0 0 16px -8px var(--glow), 0 0 54px -28px var(--glow); } .gold-rule{ height:1px;border:0;background:var(--neon); box-shadow:0 0 6px var(--glow),0 0 18px var(--glow); opacity:.8; } /* ===================================================================== LOGO ===================================================================== */ .wordmark{text-align:center;line-height:1} .logo-hero{ width:min(560px,84vw);height:auto;margin:0 auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)) drop-shadow(0 0 30px color-mix(in srgb,var(--glow) 40%,transparent)); } /* ===================================================================== BRILHO VARRENDO A LOGO A logo é raster, então não dá pra animar parte dela. O que dá é passar um facho por cima e RECORTAR esse facho pela alpha da própria logo (mask-image), de modo que a luz corra só pelo desenho da águia e das letras — nunca por um retângulo em volta. Três armadilhas, todas já pagas: · **NUNCA ponha o url() numa custom property.** Dentro de var() ele resolve relativo ao DOCUMENTO, não ao arquivo CSS — some em silêncio. Por isso o mask vai escrito direto na regra de cada logo. · o url() escrito na regra resolve relativo ao ARQUIVO CSS. Daqui (assets/css/) o caminho certo é ../img/. · o invólucro precisa ter o tamanho EXATO da imagem, senão o mask-size:contain escala contra o contêiner e o brilho sai torto. Por isso o com display:inline-block e line-height:0. ===================================================================== */ .logo-luz{position:relative;display:inline-block;line-height:0} .logo-luz::after{ content:"";position:absolute;inset:0;pointer-events:none; /* a mesma cor em todas as paradas, variando só o alfa. Interpolar até `transparent` passaria por preto e sujaria as bordas do facho. */ background-image:linear-gradient(104deg, rgba(255,244,214,0) 40%, rgba(255,244,214,.10) 46%, rgba(255,244,214,.30) 50%, rgba(255,244,214,.10) 54%, rgba(255,244,214,0) 60%); background-size:260% 100%; background-repeat:no-repeat; background-position:200% 0; /* linear de propósito: velocidade constante lê como uma luz atravessando. Com aceleração vira "efeito", que é o oposto de sutil. */ animation:logo-varre 9s linear infinite; } /* cada logo recorta pela PRÓPRIA imagem — a máscara tem que ser o arquivo que está ali embaixo, senão o recorte não bate com o desenho */ .logo-luz-elite::after{ -webkit-mask:url('../img/logo-elite.webp') center/contain no-repeat; mask:url('../img/logo-elite.webp') center/contain no-repeat; } .logo-luz-ess::after{ -webkit-mask:url('../img/logo-essentials.webp') center/contain no-repeat; mask:url('../img/logo-essentials.webp') center/contain no-repeat; } @keyframes logo-varre{ 0%{background-position:200% 0} /* a travessia leva ~5,8s dos 9s; o resto é pausa. É a pausa que faz o brilho parecer uma luz que passou, e não uma esteira girando. */ 65%,100%{background-position:-100% 0} } .logo-foot{width:200px;height:auto;margin:0 auto 14px;opacity:.85} .wm-flank{display:flex;align-items:center;gap:18px;justify-content:center;margin-top:16px} .wm-flank .gold-rule{flex:1;max-width:120px} .wm-flank span{ font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.32em; text-transform:uppercase;color:var(--fg-dim); } /* ===================================================================== BOTÕES ===================================================================== */ .btn{ position:relative;display:inline-block;text-decoration:none; font-family:'Sora',sans-serif;font-weight:600;letter-spacing:.12em; text-transform:uppercase;font-size:var(--step--1); padding:17px 34px;border-radius:2px;text-align:center;min-height:44px;cursor:pointer; transition:transform .3s var(--ease),box-shadow .35s var(--ease), background-color var(--dur-theme) var(--ease),color var(--dur-theme) var(--ease); } /* dourado: facho varrendo a superfície, sem pseudo-elemento */ .btn-gold{ color:#1A1301; background-image: linear-gradient(112deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%), linear-gradient(135deg,#A97C1F,#F6D77B 52%,#C1922A); background-size:260% 100%,100% 100%; background-position:210% 0,0 0; background-repeat:no-repeat; box-shadow:0 0 0 1px rgba(246,215,123,.55),0 10px 34px -8px rgba(216,167,58,.5); animation:sheen 5s cubic-bezier(.4,0,.2,1) infinite; } .btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(246,215,123,.95),0 16px 46px -8px rgba(216,167,58,.7)} /* contorno: o secundário. Sem pulso — no Elite o ouro não pisca. */ .btn-ghost{ background:transparent;color:var(--neon-hi); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neon) 70%,transparent); } .btn-ghost:hover{ transform:translateY(-2px); background:color-mix(in srgb,var(--neon) 8%,transparent); box-shadow:inset 0 0 0 1px var(--neon),0 0 26px -12px var(--glow); } .btn-lg{font-size:var(--step-0);padding:22px 42px;letter-spacing:.14em} .btn-note{display:block;margin-top:12px;font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim)} .cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:var(--sp-4)} .center .cta-row,.cta-row.center{justify-content:center} @keyframes sheen{ 0%{background-position:210% 0,0 0} 58%,100%{background-position:-90% 0,0 0} } /* ===================================================================== CTA FLUTUANTE — só no desktop A borda é um conic-gradient girando ATRÁS do painel: o miolo opaco cobre o centro e sobra o anel de 1,5px. Confinado ao anel, o conic não vira raio solto. ===================================================================== */ .float-cta{ position:fixed;right:18px;bottom:18px;z-index:70; padding:1.5px;border-radius:5px;overflow:hidden; width:min(268px,calc(100vw - 36px)); opacity:0;transform:translateY(150%);pointer-events:none; transition:opacity .55s var(--ease),transform .7s var(--ease); filter:drop-shadow(0 0 22px color-mix(in srgb,var(--glow) 40%,transparent)) drop-shadow(0 20px 40px rgba(0,0,0,.6)); } .float-cta.is-in{opacity:1;transform:none;pointer-events:auto} .float-cta::before{ content:"";position:absolute;inset:-45%; background:conic-gradient(from 0deg, transparent 0 58%, color-mix(in srgb,var(--neon) 50%,transparent) 70%, var(--neon-hi) 80%, color-mix(in srgb,var(--neon) 50%,transparent) 88%, transparent 98%); animation:orbit 4.5s linear infinite; } .fc-inner{ position:relative;border-radius:4px;padding:20px 22px 22px;text-align:center; background:linear-gradient(158deg,rgba(255,255,255,.06),rgba(255,255,255,.02) 50%,transparent), color-mix(in srgb,var(--bg) 88%,#000); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); } .fc-tag{ display:block;font-family:'Sora',sans-serif;font-size:11px; letter-spacing:.3em;text-transform:uppercase;color:var(--neon-hi); text-shadow:0 0 10px var(--glow);margin-bottom:8px; } .fc-title{ display:block;font-family:'Sora',sans-serif;font-weight:600; font-size:var(--step-1);letter-spacing:.06em;text-transform:uppercase; color:var(--fg);margin-bottom:16px;line-height:1.2; } .fc-btn{display:block;width:100%;padding:15px 18px;font-size:12px;letter-spacing:.14em} @keyframes orbit{to{transform:rotate(1turn)}} /* ===================================================================== HERO — texto à esquerda, VSL à direita (composição da página atual) ===================================================================== */ .hero{ min-height:100vh;min-height:100svh;display:grid;align-items:center; padding:118px var(--gutter) var(--sp-6);position:relative;isolation:isolate; background:var(--bg); } /* ===================================================================== FUNDO DA DOBRA 1 Opacidade em 70% e uma máscara que dissolve o pé da imagem, para a passagem do topo para a dobra seguinte não ter costura. A máscara é em dois estágios (100% → 55% → 0) porque um degradê linear puro deixa uma faixa média visível justamente onde a imagem ainda tem desenho. ===================================================================== */ .hero-bg{ position:absolute;inset:0;z-index:0;pointer-events:none; background-size:cover;background-position:center;background-repeat:no-repeat; opacity:.7; -webkit-mask-image:linear-gradient(180deg, #000 0,#000 46%,rgba(0,0,0,.55) 72%,transparent 100%); mask-image:linear-gradient(180deg, #000 0,#000 46%,rgba(0,0,0,.55) 72%,transparent 100%); } .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(52% 40% at 32% 30%,rgba(217,168,60,.14),transparent 70%), radial-gradient(56% 40% at 72% 82%,rgba(140,86,26,.18),transparent 72%); /* zera a luz na saída do hero — senão a borda do overlay vira uma linha de tom contra a dobra seguinte */ -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%); } .hero-inner{ max-width:var(--maxw);margin:0 auto;position:relative;z-index:2;width:100%; display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.4vw,64px);align-items:center; } .hero-col{min-width:0} .hero .wordmark{text-align:left;margin-bottom:var(--sp-4)} /* vw e não %: a logo agora vive dentro do .logo-luz, que é inline-block e encolhe pro conteúdo. Largura em % ali dentro vira dependência circular (o pai depende do filho, que depende do pai) e o resultado é imprevisível. */ .hero .logo-hero{margin:0;width:min(430px,42vw)} .hero h1{font-size:var(--step-3);max-width:20ch;font-weight:600} .hero .sub{margin-top:var(--sp-3);max-width:46ch;color:var(--fg-dim);font-size:var(--step--1)} /* os três selos abaixo do subtítulo */ .selos{margin-top:var(--sp-4);display:grid;gap:2px} .selos li{ list-style:none;position:relative;padding:11px 0 11px 30px; font-family:'Sora',sans-serif;font-size:var(--step--1);font-weight:400; color:var(--fg);border-top:1px solid var(--line); } .selos li:last-child{border-bottom:1px solid var(--line)} .selos li::before{ content:"";position:absolute;left:2px;top:18px;width:11px;height:5px; border-left:1px solid var(--neon);border-bottom:1px solid var(--neon); transform:rotate(-45deg);filter:drop-shadow(0 0 4px var(--glow)); } /* os três selos entram UM POR UM, sem depender de rolagem: só luz e um avanço lateral curto. O check desenha meio instante depois do texto, o que dá a leitura de item sendo marcado. */ .selos li[data-anim]{transition-delay:calc(260ms + var(--i,0) * 150ms)} .selos li[data-anim]::before{ opacity:0;transform:rotate(-45deg) scale(.55); transition:opacity .45s var(--ease),transform .45s var(--ease); transition-delay:calc(400ms + var(--i,0) * 150ms); } .selos li.is-in::before{opacity:1;transform:rotate(-45deg) scale(1)} /* o botão fecha a sequência, depois do último selo */ .hero .cta-row[data-anim]{transition-delay:720ms} /* o botão agora mora na coluna do vídeo: centrado sob ele, no mesmo eixo */ .hero-col-video .cta-row{justify-content:center;margin-top:var(--sp-3)} /* atravessa as duas colunas do topo e fica centrado */ .hero .scroll-hint{grid-column:1 / -1;justify-self:center;text-align:center} .scroll-hint{margin-top:var(--sp-5);font-size:var(--step--2);letter-spacing:.32em;text-transform:uppercase;color:var(--fg-dim)} .scroll-hint::after{ content:"";display:block;width:1px;height:40px;margin:12px auto 0; background:linear-gradient(180deg,var(--neon),transparent); box-shadow:0 0 8px var(--glow); } /* ===================================================================== FACHADA DE VÍDEO DO YOUTUBE A miniatura é servida local e o iframe só nasce no clique. 23 embeds na carga seriam ~15 MB de script de terceiro antes do primeiro texto. ===================================================================== */ .yt{ position:relative;display:block;width:100%;padding:0;border:0; aspect-ratio:16/9;border-radius:3px;overflow:hidden;cursor:pointer; background:var(--bg-2); box-shadow:0 26px 60px -42px #000; transition:box-shadow .4s var(--ease),transform .4s var(--ease); } .yt-v{aspect-ratio:9/16} .yt img,.yt iframe{ position:absolute;inset:0;width:100%;height:100%;display:block;border:0; } .yt img{object-fit:cover} /* o filete vive num pseudo ACIMA da capa: sombra inset é pintada abaixo dos filhos posicionados, então na moldura do próprio botão ela ficaria escondida atrás da imagem */ .yt::before{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:3px; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .4s var(--ease); } .yt:hover::before{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neon) 60%,transparent)} /* véu quente: assenta as capas antigas (verdes) na página dourada. Some no hover — a capa volta ao original quando a pessoa mira nela. */ .yt::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(168deg,rgba(64,38,8,.34),rgba(20,10,2,.5)); transition:opacity .4s var(--ease); } .yt:hover{ transform:translateY(-3px); box-shadow:0 30px 66px -40px #000,0 0 40px -26px var(--glow); } .yt:hover::after{opacity:.35} .yt.is-playing::after,.yt.is-playing .yt-play,.yt.is-playing .yt-cap{display:none} .yt.is-playing{cursor:default} /* O play NÃO segue a paleta. Ele sempre fica sobre a capa do vídeo, que é escura — e na dobra clara os tokens de luz viram marrom escuro de propósito, o que deixava o triângulo invisível contra a foto. Aqui vale valor fixo claro: é o fundo real embaixo dele que manda, não a dobra. */ .yt-play{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:66px;height:66px;border-radius:50%;pointer-events:none; box-shadow:inset 0 0 0 1.5px rgba(255,231,174,.9), 0 0 30px -8px rgba(240,199,102,.55), 0 2px 14px rgba(0,0,0,.45); background:rgba(12,7,2,.42); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); transition:transform .3s var(--ease),background .3s; } .yt-play::after{ content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%); border-style:solid;border-width:11px 0 11px 18px; border-color:transparent transparent transparent #FFF3D6; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); } .yt:hover .yt-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(12,7,2,.62)} /* ===================================================================== MOLDURA DO VÍDEO DO TOPO — versão fina A arte fica POR CIMA do vídeo, com o vídeo encaixado no vão. Os quatro valores de encaixe foram medidos no arquivo, varrendo o alfa do centro para fora até achar o primeiro pixel opaco — não são estimativa no olho. O vão desta moldura tem proporção 1,780, que é 16:9 na prática. Ou seja, o vídeo entra inteiro: não há corte de altura, ao contrário da moldura larga anterior (vão 1,934), que exigia comer 4,4% em cada ponta. ===================================================================== */ .moldura{position:relative;width:100%;aspect-ratio:1200/676} .moldura-arte{ position:absolute;inset:0;z-index:3;pointer-events:none; width:100%;height:100%; } .moldura .yt{ position:absolute; left:.33%;right:.50%;top:.59%;bottom:.59%; width:auto;height:auto;aspect-ratio:auto; border-radius:0;box-shadow:none; } /* quem desenha a borda agora é a moldura: o filete do card sai de cena */ .moldura .yt::before{display:none} .moldura .yt:hover{transform:none;box-shadow:none} /* legenda sobre a capa */ .yt-cap{ position:absolute;left:0;right:0;bottom:0;z-index:2;padding:32px 16px 14px; font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.16em; text-transform:uppercase;color:#F6EBD8;text-align:center;pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.78),transparent); } /* ===================================================================== REVEAL bidirecional ===================================================================== */ [data-anim]{ opacity:0; transition:opacity .7s var(--ease),transform .8s var(--ease),filter .8s var(--ease), background-color var(--dur-theme) var(--ease),color var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease),box-shadow var(--dur-theme) var(--ease); transition-delay:calc(var(--i,0) * 80ms); } [data-anim="up"]{transform:translateY(34px)} /* "soft" é a entrada discreta: avanço curto, quase só luz */ [data-anim="soft"]{transform:translateX(-12px)} [data-anim="left"]{transform:translateX(-34px)} [data-anim="right"]{transform:translateX(34px)} [data-anim="scale"]{transform:scale(.96)} .is-in[data-anim]{opacity:1;transform:none;filter:none} /* ===================================================================== FUNDO ANIMADO (WebGL) — atrás de tudo na dobra. As cores entram como uniform lidas de --neon/--neon-hi: o efeito é dourado porque a paleta é dourada, sem tocar no shader. ===================================================================== */ .bg{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 84%,transparent 100%); } /* --fx-op é a sutileza do fundo na página inteira. O valor .55 saiu do laboratório, olhando a tela: acima disso o fundo começa a competir com o texto, abaixo ele desaparece. Mexer aqui vale para todas as dobras. */ .bg-canvas{width:100%;height:100%;display:block;opacity:var(--fx-op,.55);mix-blend-mode:screen;transition:opacity .6s var(--ease)} .bg.is-off .bg-canvas{opacity:0} /* sem WebGL (ou no celular): o gradiente assume e ninguém percebe */ .bg.bg-fallback{background:radial-gradient(60% 45% at 50% 42%,var(--wash),transparent 72%)} /* ===================================================================== FX — pulso na virada de dobra ===================================================================== */ .fx{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0} .fx i{ position:absolute;left:-10%;right:-10%;height:78vh;top:-78vh; background:linear-gradient(180deg,transparent,var(--glow) 52%,transparent); filter:blur(70px);mix-blend-mode:screen; } .fx.fx-on{animation:fxsweep 2.4s cubic-bezier(.36,0,.22,1) forwards} @keyframes fxsweep{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:.24} 70%{opacity:.18} 100%{opacity:0;transform:translateY(186vh)} } /* ===================================================================== RODAPÉ ===================================================================== */ footer{ background:var(--bg-2);border-top:1px solid var(--line); padding:44px var(--gutter);text-align:center;color:var(--fg-dim);font-size:var(--step--2); } /* ---------- foco / acessibilidade ---------- */ :focus-visible{outline:2px solid var(--neon);outline-offset:3px} .skip{position:absolute;left:-9999px} .skip:focus{left:12px;top:12px;z-index:99;background:var(--bg);padding:10px 16px;box-shadow:inset 0 0 0 1px var(--neon)} /* ===================================================================== MOBILE ===================================================================== */ @media(max-width:960px){ .hero-inner{grid-template-columns:1fr;gap:var(--sp-3)} /* ordem no celular: logo, título, vídeo, botão, subtítulo, selos. Para intercalar o vídeo ENTRE o título e o resto, os filhos da coluna de texto precisam virar itens do grid — daí o display:contents. O :not(.hero-col-video) é obrigatório: a coluna do vídeo também tem a classe .hero-col, e com contents nela o botão virava item solto. */ .hero-col:not(.hero-col-video){display:contents} .hero .wordmark{order:1;text-align:center} .hero h1{order:2} .hero-col-video{order:3} /* leva o vídeo e, dentro dele, o botão */ .hero .sub{order:4} .hero .selos{order:5} .hero .scroll-hint{order:6} .hero .logo-hero{margin:0 auto;width:min(400px,84vw)} .hero h1,.hero .sub{max-width:none} } @media(max-width:860px){ .hero{min-height:auto;padding:92px var(--gutter) var(--sp-5)} .hero h1{font-size:clamp(25px,6vw,32px)} .cta-row .btn{width:100%;padding:16px 20px;font-size:12px} /* o CTA flutuante não entra no celular: competia com o botão da própria dobra e roubava a última tela */ .float-cta{display:none !important} .scroll-hint{display:none} .yt-play{width:54px;height:54px} .yt-play::after{border-width:9px 0 9px 15px} section{padding:var(--sp-6) 0} .section-head{margin-bottom:var(--sp-5)} } /* ===================================================================== MOVIMENTO REDUZIDO — estado de design, não interruptor geral. Critério: muda luz e cor FICA. Move objeto pela tela SAI. Precisa vir DEPOIS dos @media(max-width): mesma especificidade, quem vem por último vence. ===================================================================== */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} [data-anim]{transform:none !important;filter:none !important} .btn:hover,.yt:hover{transform:none} .fx{display:none} .float-cta::before{animation:none;background:var(--neon)} /* MANTIDOS de propósito: o brilho que varre o botão dourado (sheen) e as transições de cor entre dobras — nenhum desloca objeto. */ }