/* ================= HOME ================= O que saiu daqui, e por quê: · selo giratório com textPath → clichê de template, sem relação com o conceito · letreiro/marquee infinito → o lema já aparecia 2× na mesma dobra · seta "desce ↓" animada → mobiliário de landing; ninguém precisa aprender a rolar · .hero__glow (blob radial) → luz de fundo, e a regra do sistema é "o fogo marca" · seção Drop inteira → suspensa pelo cliente (levou junto o zoom que seguia o cursor) ========================================= */ /* ---------- Hero ---------- Um gesto só: o risco a -24° corta a palavra IMPULSO ao meio e a metade de baixo escorrega. É o conceito do sistema aplicado ao nome da marca — não existe pronto em template nenhum, custa dois , e anima só transform (CLS 0). */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.2rem, 3.5vh, 2.4rem); padding-top: calc(72px + env(safe-area-inset-top)); padding-bottom: clamp(5rem, 12vh, 7.5rem); position: relative; overflow: hidden; } .hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; } .hero__titulo { position: relative; /* 22vw, e não 26,5vw: "IMPULSO" mede 3,847 x o corpo da fonte e a .wrap vale (100vw - 9vw). 3,847 x 22 = 84,6 < 91 — a palavra cabe numa linha em QUALQUER largura, de 320px pra cima. Antes quebrava em "IMPULS / O" a partir de ~1200px. */ font-size: clamp(4.2rem, 22vw, 20rem); line-height: .82; margin-left: -.045em; overflow-wrap: normal; /* anula o break-word global: o nome da marca não se parte */ /* obrigatório: sem contexto de empilhamento próprio, o .hero__risco (z-index -1) desce até atrás do fundo do e some da tela. */ isolation: isolate; } /* O RISCO — a mesma reta que corta a palavra, prolongada para fora dela. Fica ATRÁS do texto (z-index negativo): vê-se a linha chegar pela esquerda, sumir dentro da palavra exatamente na altura do corte e reaparecer à direita. O corte não é decoração: é o rastro de uma coisa que passou. Por estar dentro do

, herda o mesmo sistema de coordenadas da máscara — os dois nunca desalinham. / .herorisco { position: absolute; left: -60vw; right: -60vw; top: 50%; height: max(1px, .006em); / uma cor só, dissolvendo nas pontas: o traço é mais forte onde encostou na palavra e some no escuro. Não é gradiente decorativo (não muda de matiz) — é o rastro perdendo força. / / as paradas são calculadas sobre o elemento inteiro (-60vw a +60vw), do qual a tela mostra ~28%–74% em qualquer largura: com estes valores o traço nasce e morre DENTRO do quadro, em vez de ser cortado pela borda. / background: linear-gradient(to right, transparent 28%, var(--brasa) 45%, var(--brasa) 55%, transparent 72%); transform: translateY(-50%) rotate(var(--risco)); transform-origin: center; z-index: -1; / o traço se abre do centro para fora. Em CSS puro, e não no GSAP: a propriedade `scale` e o `transform` do GSAP se multiplicam, e a linha ficava presa em zero. Aqui anima só `scale` (composto). / scale: 0 1; transition: scale 1.2s var(--ease); } html.aceso .herorisco { scale: 1 1; } .herocima { display: block; white-space: nowrap; } .herobaixo { display: none; white-space: nowrap; } / O corte só entra onde a máscara existe. Sem suporte, a palavra aparece inteira e nada quebra. / @supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) { .herocima { -webkit-mask-image: linear-gradient(var(--risco), transparent 50.1%, #000 50.1%); mask-image: linear-gradient(var(--risco), transparent 50.1%, #000 50.1%); } .herobaixo { display: block; position: absolute; left: 0; top: 0; width: 100%; -webkit-mask-image: linear-gradient(var(--risco), #000 49.9%, transparent 49.9%); mask-image: linear-gradient(var(--risco), #000 49.9%, transparent 49.9%); transform: translateX(-.025em); } } .herobase { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.6rem 3rem; position: relative; z-index: 3; } .herolema { font-family: var(--display); font-stretch: 62.5%; font-weight: 700; text-transform: uppercase; line-height: 1.06; font-size: clamp(1.3rem, 4vw, 2.3rem); max-width: 14ch; } .herolema em { font-style: normal; color: var(--brasa); } .heroctas { display: flex; flex-wrap: wrap; gap: .9rem; } .herorodape { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: 1px solid var(--carvao); background: color-mix(in srgb, var(--breu) 55%, transparent); } .herorodape .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; } @media (max-width: 560px) { .herorodape .label { display: none; } / fica só o dado: quando é o culto / .herorodape .wrap { justify-content: flex-end; } } / ---------- Sobre ---------- / .sobregrade { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: 1.1fr .9fr; align-items: start; } .sobretexto p + p { margin-top: 1.3em; } .sobretexto strong { color: var(--osso); } .sobretexto { color: var(--cinza); max-width: 58ch; } .sobrefigura { aspect-ratio: 4 / 5; } .versiculo { margin-top: clamp(3rem, 7vw, 5rem); border-left: 3px solid var(--brasa); padding: .6rem 0 .6rem clamp(1.4rem, 4vw, 2.6rem); max-width: 62ch; } .versiculo p { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.5; color: var(--osso); } .versiculo cite { display: block; margin-top: 1.1rem; font-style: normal; color: var(--brasa); } @media (max-width: 860px) { .sobregrade { grid-template-columns: 1fr; } } / ---------- Agenda ---------- / .agendasemana { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); border: 1px solid var(--carvao); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--brasa) var(--fuligem); } .agendasemana::-webkit-scrollbar { height: 6px; } .agendasemana::-webkit-scrollbar-track { background: var(--fuligem); } .agendasemana::-webkit-scrollbar-thumb { background: var(--brasa); } .dia { border-right: 1px solid var(--carvao); min-height: 300px; display: flex; flex-direction: column; } .dia:last-child { border-right: 0; } / .dia__nome é

pela hierarquia do documento, mas visualmente é rótulo de coluna — daí a redefinição completa da tipografia. / .dianome { padding: 1rem; border-bottom: 1px solid var(--carvao); font-family: var(--mono); font-stretch: normal; font-weight: 400; font-size: .72rem; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; color: var(--cinza); display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .dia--hoje .dianome { color: var(--brasa); } / "hoje" é texto real inserido pelo JS, não content: "" de CSS: pseudo-elemento não é lido de forma confiável por leitor de tela. / .diahoje { font-size: .6rem; color: var(--breu); background: var(--brasa); padding: .25em .5em; letter-spacing: .14em; } .diaeventos { padding: .8rem; display: grid; gap: .8rem; align-content: start; flex: 1; } .evento { border: 1px solid var(--carvao); padding: .9rem; display: grid; gap: .3rem; position: relative; overflow: hidden; transition: border-color .3s; background: var(--breu); } .evento::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brasa); } .evento:hover { border-color: rgba(255, 74, 0, .5); } .evento time { color: var(--brasa); } .evento b { font-family: var(--display); font-stretch: 62.5%; text-transform: uppercase; font-size: 1.05rem; font-weight: 800; line-height: 1.15; } .evento span { color: var(--cinza); font-size: .82rem; } / o culto do Impulso se destaca pela borda e pelo fundo, não por um box-shadow pulsando: brilho ambiente saiu do sistema / .evento--impulso { background: linear-gradient(160deg, rgba(255, 74, 0, .16), var(--breu) 60%); border-color: rgba(255, 74, 0, .55); } / contraste: era 2,75:1, reprovava AA. Agora 5,15:1 sobre o breu. / .diavazio { color: #8A8072; font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; padding: .9rem; } / frase, não rótulo: corpo de texto legível no celular / .agendanota { margin-top: 1.2rem; color: var(--cinza); font-size: .95rem; } .agendaarraste { display: none; } @media (max-width: 1100px) { .agendasemana { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .dia { min-width: 220px; scroll-snap-align: start; flex-shrink: 0; } .agendaarraste { display: block; margin-bottom: 1rem; } } / ---------- Ferramentas (portais) ---------- Dois blocos lado a lado e a Biblioteca em largura inteira: ela tem 66 dossiês, artigos, curiosidades e um quiz. O layout passa a informar o tamanho real do conteúdo em vez de tratar tudo igual. / .ferramentasgrade { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; } .portal { position: relative; min-height: clamp(340px, 42vw, 460px); border: 1px solid var(--carvao); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.6rem, 3.5vw, 2.8rem); transition: border-color .4s; } .portal--largo { grid-column: 1 / -1; min-height: clamp(300px, 30vw, 400px); } .portal:hover, .portal:focus-visible { border-color: rgba(255, 74, 0, .55); } .portalfundo { position: absolute; inset: 0; z-index: -2; background: var(--fuligem); } / Sala de Guerra — o anel da própria página, parado. (Era um pulso radial infinito: luz ambiente, fora da regra.) / .portal--guerra .portalfundo::after { content: ""; position: absolute; left: 50%; top: 42%; width: 26vmin; height: 26vmin; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(255, 74, 0, .45); transition: transform .6s var(--ease), border-color .4s; } .portal--guerra:hover .portalfundo::after { transform: scale(1.06); border-color: rgba(255, 74, 0, .8); } / Palavra — linhas de texto que acendem ao passar / .portal--palavra .portalfundo { background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(154, 142, 127, .14) 34px 35px), var(--fuligem); } .portal--palavra .portalfundo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(255, 74, 0, .55) 34px 35px); clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); } .portal--palavra:hover .portalfundo::before { clip-path: inset(0 0% 0 0); } / Biblioteca — lombadas que acendem de baixo pra cima / .portal--biblioteca .portalfundo { background: repeating-linear-gradient(to right, transparent 0 26px, rgba(154, 142, 127, .13) 26px 34px), var(--fuligem); } .portal--biblioteca .portalfundo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to right, transparent 0 26px, rgba(255, 74, 0, .45) 26px 34px); clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease); } .portal--biblioteca:hover .portalfundo::before { clip-path: inset(0 0 0 0); } .portalveu { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 8, 6, .94) 14%, rgba(10, 8, 6, .3) 60%, transparent); } .portal h3 { font-size: clamp(1.8rem, 4.5vw, 3rem); margin-top: .8rem; } .portal p { color: var(--cinza); max-width: 40ch; margin-top: .7rem; } .portal--largo p { max-width: 58ch; } .portalentrar { margin-top: 1.6rem; display: inline-flex; align-items: center; gap: .8rem; font-family: var(--body); font-weight: 600; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brasa); } .portalentrar svg { width: 20px; height: 20px; transition: transform .4s var(--ease); } .portal:hover .portalentrar svg { transform: translateX(8px); } @media (max-width: 860px) { .ferramentasgrade { grid-template-columns: 1fr; } .portal, .portal--largo { min-height: 300px; } } / ---------- TES ---------- / .tes { background: var(--fuligem); border-block: 1px solid var(--carvao); } .tesgrade { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: .9fr 1.1fr; align-items: center; } .tesfigura { order: -1; aspect-ratio: 16 / 11; } .tesinfo h2 { font-size: clamp(2rem, 5.5vw, 3.6rem); margin-top: 1rem; } .tesinfo > p { color: var(--cinza); margin-top: 1.4rem; max-width: 52ch; } .tesdados { margin-top: 2rem; display: grid; gap: 0; border-top: 1px solid var(--carvao); } .tesdados div { display: flex; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--carvao); flex-wrap: wrap; } .tesdados dt { min-width: 9ch; } .tesdados dd { color: var(--osso); } @media (max-width: 860px) { .tesgrade { grid-template-columns: 1fr; } } / ---------- Faça parte ---------- / .participar { text-align: center; } .participar > .wrap > .label { display: block; margin-bottom: 1.1rem; } .participar h2 { font-size: clamp(2.6rem, 9vw, 6.5rem); max-width: 12ch; margin-inline: auto; } .participar h2 em { font-style: normal; color: var(--brasa); } .participar > .wrap > p { color: var(--cinza); max-width: 46ch; margin: 1.5rem auto 0; } .participarctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } / ---------- Ajuste fino ---------- */ @media (max-width: 480px) { .hero { padding-bottom: 5.5rem; } .hero__titulo { margin-left: -.03em; } }