/* ========================================================================== TWE — The World Evolution Identidade: #0FC599 · preto · branco Linguagem visual: cantos chanfrados, brackets de canto, malha tecnológica. ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root { --verde: #0fc599; --verde-claro: #4ff0c6; --verde-escuro: #0a8a6c; --preto: #000000; --carvao: #07100d; --grafite: #0d1512; --branco: #ffffff; --cinza: rgba(255, 255, 255, 0.62); --cinza-fraco: rgba(255, 255, 255, 0.34); --linha: rgba(15, 197, 153, 0.22); --linha-forte: rgba(15, 197, 153, 0.55); --chanfro: 18px; --chanfro-btn: 11px; --fonte-titulo: 'Chakra Petch', 'Segoe UI Semibold', 'Segoe UI', sans-serif; --fonte-texto: 'Barlow', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --max: 1240px; --transicao: 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- 2. Base ------------------------------------------------------ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* O preto fica no : assim o fundo do body não é propagado para o canvas e as camadas de z-index negativo (.fundo-tec, #particulas) continuam visíveis. */ html { background: var(--preto); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: transparent; color: var(--branco); font-family: var(--fonte-texto); font-size: 17px; line-height: 1.72; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--verde); color: #04120e; } /* Barra de rolagem */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #050807; } ::-webkit-scrollbar-thumb { background: var(--verde-escuro); } ::-webkit-scrollbar-thumb:hover { background: var(--verde); } h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; } .container { width: min(100% - 3rem, var(--max)); margin-inline: auto; } /* Barra de progresso de leitura */ .progresso-topo { position: fixed; inset: 0 auto auto 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--verde-escuro), var(--verde-claro)); box-shadow: 0 0 14px var(--verde); z-index: 200; } /* ---------- 3. Fundo tecnológico global ---------------------------------- */ .fundo-tec { position: fixed; inset: 0; z-index: -3; background: var(--preto); } .fundo-tec__malha { position: absolute; inset: -50%; background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.16; animation: deriva 26s linear infinite; } .fundo-tec__halo { position: absolute; inset: 0; background: radial-gradient(60vw 60vw at 12% 8%, rgba(15, 197, 153, 0.16), transparent 62%), radial-gradient(50vw 50vw at 88% 72%, rgba(15, 197, 153, 0.11), transparent 60%); } #particulas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.5; } @keyframes deriva { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(64px, 64px, 0); } } /* ---------- 4. Navegação ------------------------------------------------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.9rem clamp(1rem, 4vw, 2.6rem); background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid transparent; backdrop-filter: blur(2px); transition: background var(--transicao), border-color var(--transicao), padding var(--transicao); } .nav.compacta { background: rgba(4, 8, 7, 0.9); border-bottom-color: var(--linha); backdrop-filter: blur(16px); padding-block: 0.6rem; } .nav__marca { display: flex; align-items: center; gap: 0.85rem; } .nav__marca img { width: 108px; } .nav__links { display: flex; gap: 0.35rem; align-items: center; } .nav__links a { position: relative; padding: 0.5rem 0.85rem; font-family: var(--fonte-titulo); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cinza); transition: color 0.25s; } .nav__links a::after { content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.28rem; height: 1px; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav__links a:hover, .nav__links a.ativo { color: var(--branco); } .nav__links a:hover::after, .nav__links a.ativo::after { transform: scaleX(1); } .nav__menu { display: none; width: 44px; height: 40px; background: transparent; border: 1px solid var(--linha-forte); color: var(--verde); cursor: pointer; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); } .nav__menu span { display: block; width: 18px; height: 1.5px; margin: 3.5px auto; background: currentColor; transition: 0.3s; } .nav.aberta .nav__menu span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .nav.aberta .nav__menu span:nth-child(2) { opacity: 0; } .nav.aberta .nav__menu span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } @media (max-width: 940px) { .nav__menu { display: block; } .nav__links { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(4, 8, 7, 0.97); border-bottom: 1px solid var(--linha); backdrop-filter: blur(18px); max-height: 0; overflow: hidden; transition: max-height 0.45s ease; } .nav.aberta .nav__links { max-height: 70vh; } .nav__links a { padding: 1rem 1.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } } /* ---------- 5. Formas da marca: chanfro + brackets ----------------------- */ .chanfro { clip-path: polygon( var(--chanfro) 0, 100% 0, 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, 0 100%, 0 var(--chanfro) ); } /* Brackets nos cantos — assinatura visual da plataforma */ .brackets { position: relative; } .brackets::before, .brackets::after { content: ''; position: absolute; width: 24px; height: 24px; border: 1px solid var(--verde); opacity: 0.75; transition: var(--transicao); pointer-events: none; } .brackets::before { top: 8px; right: 8px; border-left: 0; border-bottom: 0; } .brackets::after { bottom: 8px; left: 8px; border-right: 0; border-top: 0; } .brackets:hover::before, .brackets:hover::after { width: 34px; height: 34px; opacity: 1; } /* ---------- 6. Botões ---------------------------------------------------- */ .btn { --c: var(--verde); position: relative; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.9rem; font-family: var(--fonte-titulo); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c); background: rgba(15, 197, 153, 0.06); border: 1px solid var(--c); cursor: pointer; overflow: hidden; transition: color 0.3s, box-shadow 0.35s, transform 0.35s; clip-path: polygon( var(--chanfro-btn) 0, 100% 0, 100% calc(100% - var(--chanfro-btn)), calc(100% - var(--chanfro-btn)) 100%, 0 100%, 0 var(--chanfro-btn) ); } .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, var(--verde-escuro), var(--verde)); transform: translateX(-101%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; } .btn > * { position: relative; z-index: 1; } .btn:hover { color: #03130f; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(15, 197, 153, 0.3); } .btn:hover::before { transform: translateX(0); } .btn:focus-visible { outline: 2px solid var(--verde-claro); outline-offset: 3px; } .btn--solido { background: linear-gradient(120deg, var(--verde-escuro), var(--verde)); color: #03130f; } .btn--solido::before { background: #ffffff; } .btn--fantasma { border-color: rgba(255, 255, 255, 0.3); color: var(--branco); background: transparent; } .btn--pequeno { padding: 0.6rem 1.3rem; font-size: 0.7rem; } /* ---------- 7. Hero ------------------------------------------------------ */ .hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 7rem 1.5rem 5rem; overflow: hidden; } .hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; background: url('../img/poster.jpg') center / cover no-repeat; } .hero__veu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 38%, rgba(0,0,0,0.92) 100%), repeating-linear-gradient(0deg, rgba(15,197,153,0.05) 0 1px, transparent 1px 4px); } .hero__conteudo { max-width: 940px; } .hero__logo { width: min(430px, 78vw); margin-inline: auto; filter: drop-shadow(0 0 30px rgba(15, 197, 153, 0.35)); animation: subirSuave 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero__marcador { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 2rem; padding: 0.4rem 1.1rem; border: 1px solid var(--linha-forte); font-family: var(--fonte-titulo); font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--verde-claro); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); animation: subirSuave 1.1s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero__marcador::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 10px var(--verde); animation: pulsar 2s ease-in-out infinite; } .hero h1 { margin-top: 1.6rem; font-size: clamp(2.1rem, 6.2vw, 4.4rem); text-transform: uppercase; letter-spacing: -0.02em; animation: subirSuave 1.1s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero h1 em { font-style: normal; color: var(--verde); } .hero__texto { max-width: 62ch; margin: 1.5rem auto 0; font-size: clamp(1rem, 2vw, 1.15rem); color: rgba(255, 255, 255, 0.8); animation: subirSuave 1.1s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero__acoes { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.6rem; animation: subirSuave 1.1s 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero__rolar { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-family: var(--fonte-titulo); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cinza-fraco); } .hero__rolar span:last-child { width: 1px; height: 46px; background: linear-gradient(180deg, var(--verde), transparent); animation: descer 2.2s ease-in-out infinite; } @keyframes subirSuave { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes pulsar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } } @keyframes descer { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- 8. Seções ---------------------------------------------------- */ .secao { position: relative; padding: clamp(4.5rem, 10vw, 8rem) 0; } .secao--linha { border-top: 1px solid rgba(255, 255, 255, 0.06); } .secao__cabeca { max-width: 780px; margin-bottom: 3.5rem; } .etiqueta { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--fonte-titulo); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--verde); } .etiqueta::before { content: ''; width: 26px; height: 1px; background: var(--verde); } .secao__cabeca h2 { margin-top: 1rem; font-size: clamp(1.9rem, 4.6vw, 3.1rem); text-transform: uppercase; } .secao__cabeca p { margin-top: 1.1rem; color: var(--cinza); font-size: 1.06rem; } /* ---------- 9. Linha do tempo -------------------------------------------- */ .linha-tempo { position: relative; } .linha-tempo__trilho { position: absolute; top: 0; bottom: 0; left: 27px; width: 2px; background: rgba(255, 255, 255, 0.08); } .linha-tempo__trilho span { display: block; width: 100%; height: 0%; background: linear-gradient(180deg, var(--verde-claro), var(--verde), var(--verde-escuro)); box-shadow: 0 0 16px rgba(15, 197, 153, 0.6); } .capitulo { position: relative; padding-left: 76px; padding-bottom: clamp(3.5rem, 8vw, 6rem); } .capitulo__no { position: absolute; left: 0; top: 4px; width: 56px; height: 56px; display: grid; place-items: center; font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 700; color: var(--verde); background: var(--carvao); border: 1px solid var(--linha-forte); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: var(--transicao); } .capitulo.visivel .capitulo__no { color: #03130f; background: linear-gradient(140deg, var(--verde-claro), var(--verde)); box-shadow: 0 0 34px rgba(15, 197, 153, 0.55); } .capitulo__titulo { font-size: clamp(1.5rem, 3.4vw, 2.3rem); text-transform: uppercase; } .capitulo__local { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; font-family: var(--fonte-titulo); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cinza-fraco); } .capitulo__local b { color: var(--verde); font-weight: 600; } .capitulo__corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(1.5rem, 4vw, 3.2rem); align-items: start; margin-top: 1.3rem; } .capitulo__corpo p + p { margin-top: 1rem; } .capitulo__corpo p { color: rgba(255, 255, 255, 0.78); } .capitulo--invertido .capitulo__corpo { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); } .capitulo--invertido .capitulo__texto { order: 2; } @media (max-width: 900px) { .capitulo__corpo, .capitulo--invertido .capitulo__corpo { grid-template-columns: 1fr; } .capitulo--invertido .capitulo__texto { order: 0; } .capitulo { padding-left: 60px; } .capitulo__no { width: 44px; height: 44px; font-size: 0.95rem; } .linha-tempo__trilho { left: 21px; } } .destaque { margin-top: 1.5rem; padding: 1.1rem 1.4rem; background: rgba(15, 197, 153, 0.07); border-left: 2px solid var(--verde); font-family: var(--fonte-titulo); font-size: 1.02rem; font-weight: 500; color: var(--branco); } /* ---------- 10. Molduras de mídia ---------------------------------------- */ .moldura { position: relative; background: var(--grafite); border: 1px solid var(--linha); padding: 10px; overflow: hidden; } .moldura img, .moldura video { width: 100%; height: 100%; object-fit: cover; } .moldura__janela { position: relative; overflow: hidden; aspect-ratio: 4 / 3; } .moldura__janela::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.72)); pointer-events: none; } .moldura__legenda { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; font-family: var(--fonte-titulo); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .moldura img { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s; filter: saturate(0.85); } .moldura:hover img { transform: scale(1.06); filter: saturate(1.05); } /* Varredura tecnológica sobre a imagem */ .moldura__scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(15, 197, 153, 0.16) 50%, transparent 100%); height: 40%; transform: translateY(-120%); animation: varrer 5.5s ease-in-out infinite; } @keyframes varrer { 0%, 100% { transform: translateY(-130%); } 50% { transform: translateY(330%); } } .galeria-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .galeria-dupla { grid-template-columns: 1fr; } } /* ---------- 11. Mapa ----------------------------------------------------- */ .mapa { position: relative; background: radial-gradient(70% 70% at 50% 45%, rgba(15, 197, 153, 0.09), transparent 70%), #050b09; border: 1px solid var(--linha); padding: 1rem; } .mapa__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0.4rem 0.8rem; font-family: var(--fonte-titulo); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cinza-fraco); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .mapa__topo b { color: var(--verde); font-weight: 700; letter-spacing: 0.18em; } .mapa-svg { width: 100%; height: auto; } .uf { fill: rgba(255, 255, 255, 0.035); stroke: rgba(15, 197, 153, 0.42); stroke-width: 1; stroke-linejoin: round; transition: fill 0.4s, stroke 0.4s; opacity: 0; animation: acender 0.5s ease forwards; animation-delay: var(--atraso, 0ms); animation-play-state: paused; } .mapa.visivel .uf { animation-play-state: running; } .uf--aceso { fill: rgba(15, 197, 153, 0.14); stroke: rgba(15, 197, 153, 0.7); } .uf--ativo { fill: url(#nada) var(--verde); fill-opacity: 0.9; stroke: var(--verde-claro); stroke-width: 1.6; } .mapa.visivel .uf--ativo { animation: acender 0.5s ease forwards, respirarUF 3.2s 0.9s ease-in-out infinite; } .uf:hover { fill: rgba(15, 197, 153, 0.3); stroke: var(--verde-claro); } @keyframes acender { to { opacity: 1; } } @keyframes respirarUF { 0%, 100% { fill-opacity: 0.9; } 50% { fill-opacity: 0.55; } } .mapa-rota { fill: none; stroke: var(--verde-claro); stroke-width: 1.8; stroke-dasharray: 7 9; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--verde)); animation: correrRota 1.6s linear infinite; } @keyframes correrRota { to { stroke-dashoffset: -32; } } .pino-nucleo { fill: var(--verde-claro); filter: drop-shadow(0 0 8px var(--verde)); } .pino-onda { fill: none; stroke: var(--verde); stroke-width: 1.4; opacity: 0; animation: onda 2.4s ease-out infinite; } @keyframes onda { 0% { r: 5; opacity: 0.9; } 100% { r: 26; opacity: 0; } } .pino-rotulo { fill: var(--branco); font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700; letter-spacing: 1.2px; paint-order: stroke; stroke: rgba(0, 0, 0, 0.75); stroke-width: 4px; } /* ---------- 12. Números / estatísticas ----------------------------------- */ .numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 2rem; } .numero { padding: 1.6rem 1.4rem; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.09); } .numero b { display: block; font-family: var(--fonte-titulo); font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--verde); } .numero span { display: block; margin-top: 0.6rem; font-size: 0.9rem; color: var(--cinza); } .numero--alerta b { color: var(--branco); } .numero--palavra b { font-size: 1.3rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- 13. Método transversal --------------------------------------- */ .faixa-metodo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 2.6rem; } .pilar { position: relative; padding: 1.8rem 1.4rem 1.6rem; background: linear-gradient(160deg, rgba(15, 197, 153, 0.09), rgba(255, 255, 255, 0.02)); border: 1px solid var(--linha); transition: var(--transicao); } .pilar:hover { transform: translateY(-6px); border-color: var(--linha-forte); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55); } .pilar__indice { font-family: var(--fonte-titulo); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--verde); } .pilar h4 { margin-top: 0.7rem; font-size: 1.08rem; text-transform: uppercase; } .pilar p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--cinza); } .trio-mvv { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .mvv { padding: 2.2rem 1.9rem; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.09); transition: var(--transicao); } .mvv:hover { border-color: var(--linha-forte); background: rgba(15, 197, 153, 0.06); } .mvv h3 { font-size: 1.25rem; text-transform: uppercase; color: var(--verde); } .mvv p { margin-top: 0.9rem; color: var(--cinza); } /* ---------- 14. Produtos ------------------------------------------------- */ .produtos { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 18px; } .produto { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: 2.2rem 1.9rem 2rem; background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.1); transition: var(--transicao); overflow: hidden; } .produto::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 60% at 50% 0%, rgba(15, 197, 153, 0.2), transparent 70%); opacity: 0; transition: opacity var(--transicao); } .produto > * { position: relative; z-index: 1; } .produto:hover { transform: translateY(-8px); border-color: var(--linha-forte); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6); } .produto:hover::before { opacity: 1; } .produto__logo { height: 92px; display: flex; align-items: center; } .produto__logo img { max-height: 78px; max-width: 100%; width: auto; object-fit: contain; } /* O brasão do Champions é quadrado: precisa de mais altura para ter o mesmo peso visual. */ .produto__logo img.alto { max-height: 92px; } .produto h3 { margin-top: 1.4rem; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.06em; } .produto p { margin-top: 0.85rem; font-size: 0.95rem; color: var(--cinza); flex: 1; } .produto .btn { margin-top: 1.7rem; align-self: flex-start; } /* ---------- 15. Galeria do evento ---------------------------------------- */ .galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .galeria figure { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--grafite); } .galeria img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.55) contrast(1.05); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s; } .galeria figure:hover img { transform: scale(1.08); filter: grayscale(0) contrast(1); } .galeria figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15, 197, 153, 0.18)); opacity: 0; transition: opacity 0.4s; } .galeria figure:hover::after { opacity: 1; } /* ---------- 16. Vídeo / trailer ------------------------------------------ */ .trailer { position: relative; } .trailer video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; } .trailer__play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; gap: 1rem; background: rgba(0, 0, 0, 0.55); border: 0; cursor: pointer; color: var(--branco); transition: background 0.4s; } .trailer__play:hover { background: rgba(0, 0, 0, 0.35); } .trailer__play[hidden] { display: none; } /* Hexágono preenchido: com clip-path a borda some nas arestas cortadas, então o contorno vem de um segundo hexágono atrás (padding + gradiente). */ .trailer__play i { display: grid; place-items: center; width: 78px; height: 78px; padding: 1px; background: linear-gradient(150deg, var(--verde-claro), var(--verde-escuro)); color: var(--verde-claro); font-style: normal; font-size: 1.5rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 0 22px rgba(15, 197, 153, 0.55)); animation: pulsarAro 2.6s ease-in-out infinite; } .trailer__play i::before { content: '\25B6'; display: grid; place-items: center; width: 100%; height: 100%; padding-left: 5px; background: #04140f; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } @keyframes pulsarAro { 0%, 100% { box-shadow: 0 0 30px rgba(15,197,153,.3); } 50% { box-shadow: 0 0 60px rgba(15,197,153,.6); } } .trailer__play em { font-style: normal; font-family: var(--fonte-titulo); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; } /* ---------- 17. Chamada final + rodapé ----------------------------------- */ .chamada { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5.5rem) clamp(1.6rem, 5vw, 4rem); text-align: center; background: linear-gradient(150deg, rgba(15, 197, 153, 0.16), rgba(0, 0, 0, 0.4)); border: 1px solid var(--linha-forte); } .chamada h2 { font-size: clamp(1.7rem, 4.4vw, 2.9rem); text-transform: uppercase; } .chamada p { max-width: 60ch; margin: 1.1rem auto 0; color: rgba(255, 255, 255, 0.82); } .chamada .btn { margin-top: 2.2rem; } .rodape { padding: 4rem 0 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(0, 0, 0, 0.6); } .rodape__topo { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.5rem; align-items: start; } .rodape img { width: 130px; } .rodape h5 { font-family: var(--fonte-titulo); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--verde); margin-bottom: 1rem; } .rodape ul { list-style: none; display: grid; gap: 0.55rem; } .rodape a { color: var(--cinza); font-size: 0.94rem; transition: color 0.25s; } .rodape a:hover { color: var(--verde); } .rodape__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--cinza-fraco); text-transform: uppercase; } /* ---------- 18. Revelação no scroll -------------------------------------- */ .revelar { opacity: 0; transform: translateY(34px); transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); } .revelar.visivel { opacity: 1; transform: none; } .revelar[data-atraso="1"] { transition-delay: 0.1s; } .revelar[data-atraso="2"] { transition-delay: 0.2s; } .revelar[data-atraso="3"] { transition-delay: 0.3s; } .revelar[data-atraso="4"] { transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .revelar { opacity: 1; transform: none; } }