/* ══════════════════════════════════════════════════════════════ HERO "CRIATIVO" — TESTE, camada isolada e reversível ────────────────────────────────────────────────────────────── Traduz o criativo-apresentacao.psd para a hero: faixa branca com serifada no topo, palco azul facetado, feixe de luz descendo no livro. COMO REVERTER: tire a classe `hero--creative` do
da hero no index.html. Nada aqui vaza para o resto da página — todo seletor está ancorado em .hero--creative. ══════════════════════════════════════════════════════════════ */ .hero--creative{ /* cores amostradas do PSD */ --c-ink:#1C2845; /* navy do texto serifado */ --c-royal:#4140C9; /* azul royal claro, canto superior */ --c-blue:#1941B1; /* azul médio */ --c-deep:#19243E; /* banda escura */ --c-beam:#A2D4EE; /* feixe de luz */ /* ATENÇÃO: a Playfair não é mais carregada no (o site inteiro virou Poppins). Se um dia ligar a classe hero--creative de novo, volte com o family=Playfair+Display no link de fontes — senão isto cai para Georgia. */ --font-serif:"Playfair Display",Georgia,serif; padding-top:var(--nav-h); background:var(--c-ink); } /* a grade tech não pertence a este registro */ .hero--creative .hero-grid{display:none} /* ── 1 · A FAIXA BRANCA ──────────────────────────────────────── Era o bloco preto da manchete-cartaz; aqui vira a faixa branca do criativo, e a sans dá lugar à serifada de alto contraste. ────────────────────────────────────────────────────────────── */ .hero--creative .hero-wide{ background:#fff; color:var(--c-ink); padding:clamp(2rem,5vw,3.4rem) clamp(1.5rem,4vw,3rem) clamp(2.2rem,5vw,3.6rem); z-index:3; } .hero--creative .eyebrow-hero{color:#8892A8} .hero--creative .poster{ font-family:var(--font-serif); font-weight:900; font-size:clamp(2.6rem,11vw,9rem); line-height:.94; letter-spacing:-.02em; /* serifada não aguenta tracking agressivo */ } .hero--creative .pl-2{padding-left:0} /* a chapa vira um fio: um bloco pesado brigaria com a serifada */ .hero--creative .mk::before{ bottom:-.02em; height:.09em; background:var(--c-royal); } /* ── 2 · O PALCO AZUL FACETADO ───────────────────────────────── Os planos angulares do criativo, em clip-path. É o mesmo gesto diagonal que já corta os painéis do resto da página — só que agora empilhado em camadas de azul. ────────────────────────────────────────────────────────────── */ .hero--creative .hero-stage{margin-top:0; isolation:isolate} .hero--creative .panel-shape{ background:linear-gradient(150deg,var(--c-royal) 0%,var(--c-blue) 42%,var(--c-deep) 100%); clip-path:none; } /* faceta escura entrando pela direita */ .hero--creative .hero-stage::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(200deg,rgba(25,36,62,0) 30%,var(--c-deep) 78%); clip-path:polygon(38% 0,100% 0,100% 100%,8% 100%); opacity:.92; pointer-events:none; } /* faceta royal subindo do canto de baixo à esquerda */ .hero--creative .hero-stage::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(20deg,var(--c-royal),rgba(65,64,201,0) 62%); clip-path:polygon(0 46%,62% 88%,100% 72%,100% 100%,0 100%); opacity:.85; pointer-events:none; } /* ── 3 · O FEIXE DE LUZ ──────────────────────────────────────── Desce do topo e bate no livro. Só opacidade animada — escalar forçaria re-rasterizar o blur a cada frame. ────────────────────────────────────────────────────────────── */ .hero--creative .hero-glow{ left:58%; top:-6%; width:min(760px,90vw); height:118%; aspect-ratio:auto; transform:translateX(-50%); z-index:2; background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(162,212,238,.34) 34%,rgba(162,212,238,0) 72%); clip-path:polygon(41% 0,59% 0,92% 100%,8% 100%); filter:blur(34px); mix-blend-mode:screen; animation:beam 9s ease-in-out infinite; } @keyframes beam{50%{opacity:.72}} .hero--creative .hero-grain{z-index:4; opacity:.07} /* ── 4 · O LIVRO ─────────────────────────────────────────────── No criativo ele é o centro, grande e levemente torto. Aqui ganha um giro de 2° no plano da tela — é o que dá o ar de foto de estúdio em vez de recorte alinhado à grade. ────────────────────────────────────────────────────────────── */ .hero--creative .panel-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; padding-block:clamp(2.5rem,6vw,4rem) clamp(3rem,7vw,5rem); color:#fff; z-index:3; } .hero--creative .panel-figure{justify-self:center; order:-1} .hero--creative .book-tilt{ width:min(460px,74vw); margin-top:0; transform:perspective(1600px) rotate(-2deg) rotateY(-3deg); filter:drop-shadow(0 46px 70px rgba(9,14,30,.62)); } .hero--creative .book-tilt:hover{ transform:perspective(1600px) rotate(-1deg) rotateY(0deg) translateY(-8px); } .hero--creative .panel-copy{margin-top:clamp(1.8rem,4vw,2.6rem)} .hero--creative .panel-sub{ font-family:var(--font-serif); font-weight:700; font-size:clamp(1.35rem,3.4vw,2.4rem); letter-spacing:-.01em; line-height:1.12; color:#fff; } .hero--creative .panel-meta{justify-content:center} .hero--creative .panel-meta span{ color:rgba(255,255,255,.72); border-top-color:rgba(255,255,255,.26); } /* ── 5 · EMENDA COM A PRÓXIMA SEÇÃO ──────────────────────────── Sem isto o azul termina num corte reto e o encontro fica duro. (Apontava para .pitch, a seção dos três cards, que não existe mais — agora a primeira seção do miolo é o respiro.) ────────────────────────────────────────────────────────────── */ .hero--creative + main .breath{clip-path:polygon(0 0,100% 3.5%,100% 100%,0 100%)} @media (max-width:900px){ .hero--creative .hero-stage::before{clip-path:polygon(24% 0,100% 0,100% 100%,0 100%)} .hero--creative .hero-glow{left:50%; width:min(560px,110vw)} } @media (prefers-reduced-motion:reduce){ .hero--creative .hero-glow{animation:none} .hero--creative .book-tilt{transform:perspective(1600px) rotate(-2deg) rotateY(-3deg)} }