@font-face{font-family:'Sora';src:url('fonts/sora-var.woff2') format('woff2');font-weight:400 800;font-display:swap} @font-face{font-family:'Figtree';src:url('fonts/figtree-var.woff2') format('woff2');font-weight:300 900;font-display:swap} @font-face{font-family:'Spline Sans Mono';src:url('fonts/splinemono-500.woff2') format('woff2');font-weight:500;font-display:swap} :root{ --abissal:#081C15; --verde:#83B860; --teal:#42A1B1; --creme:#FFEFCC; --nevoa:#DDE3DF; --tinta:#17171C; --abissal-70:rgba(8,28,21,.70); --tinta-70:rgba(23,23,28,.70); --branco:#fff; --superficie:#F4F7F4; --fonte-titulo:'Sora',system-ui,sans-serif; --fonte-corpo:'Figtree',system-ui,sans-serif; --fonte-mono:'Spline Sans Mono',ui-monospace,monospace; --raio:16px; --raio-sm:10px; --e1:.5rem; --e2:1rem; --e3:1.5rem; --e4:2.5rem; --e5:4rem; --e6:6rem; --largura:1160px; --sombra:0 18px 48px -24px rgba(8,28,21,.35); --trans:280ms cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--fonte-corpo);color:var(--tinta);background:var(--branco); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--fonte-titulo);line-height:1.1;letter-spacing:-.02em;margin:0 0 var(--e2)} img{max-width:100%;height:auto;display:block} a{color:inherit} :focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ===================================================================== Task 7: V1 storytelling. A pagina atravessa um dia de Brasilia, das 14h00 (sol a pino, ar seco do Planalto) as 23h00 (noite fresca). O fundo inteiro e uma unica camada fixa, .ceu, escrita pelo app.js em funcao PURA do scroll. Nada aqui pinta fundo proprio de secao: o que costura a pagina e o ceu por tras dela. Tokens que o motor escreve em a cada quadro: --tinta-cap cor de texto da parada corrente (Step 2 do brief) --tinta-leitura mesma cor, com a virada claro/escuro concentrada na fronteira do capitulo 3 (ver nota de contraste abaixo) --contra-cap cor oposta a de leitura, usada em vidros e veus --calor 1 as 14h00, 0 as 23h00 --fase-norm 0 a 1, fase corrente normalizada --veu quanto de abissal cobre o ceu no crepusculo NOTA DE CONTRASTE: o conteudo de cada capitulo fica centrado, ou seja, e lido na fase k+0.5, no meio do caminho entre duas paradas. Entre as paradas 2 e 3 a tinta do motor interpola de #17171C para #FFFFFF, o que da cinza medio exatamente onde o capitulo das 17h00 e lido (razao de contraste 1.5:1 sobre aquele ceu). Por isso todo texto usa --tinta-leitura, que e a mesma tinta do motor com essa virada concentrada em uma janela curta em torno da fase 3.0, onde a fronteira entre capitulos deixa a tela quase sem texto no centro. ===================================================================== */ :root{ /* valores de partida: sem JS a pagina inteira fica no estado das 14h00 */ --tinta-cap:#17171C; --tinta-leitura:var(--tinta-cap); --contra-cap:#FFFFFF; --calor:1; --noite:0; --fase-norm:0; --veu:0; /* superficies derivadas: o vidro usa a cor OPOSTA a do texto, entao ele escurece sob ceu claro e clareia sob ceu escuro, sempre a favor da legibilidade */ --vidro:color-mix(in srgb,var(--contra-cap) 9%,transparent); --vidro-forte:color-mix(in srgb,var(--contra-cap) 16%,transparent); --fio:color-mix(in srgb,var(--tinta-leitura) 22%,transparent); --fio-fraco:color-mix(in srgb,var(--tinta-leitura) 12%,transparent); --tinta-72:color-mix(in srgb,var(--tinta-leitura) 74%,transparent); --tinta-55:color-mix(in srgb,var(--tinta-leitura) 58%,transparent); /* o vermelho de erro da V2 (#C1443B) some sobre o ceu da noite, que e onde o formulario vive; este e o mesmo tom clareado ate passar em contraste sobre abissal */ --erro:#F08074; } /* O scroll da V1 e instantaneo por padrao. Sao dois motivos: o ceu e funcao direta de scrollY e precisa de leitura imediata, e o ScrollTrigger que a Task 8 vai pinar nao convive bem com scroll-behavior:smooth. O deslize suave dos links internos fica por conta do app.js, que ainda respeita prefers-reduced-motion. */ html{scroll-behavior:auto} /* sem JS a pagina inteira fica no ceu das 14h00, entao o fundo de emergencia e o topo daquele degrade e o texto escuro continua legivel */ body{background:#F3E7C9;color:var(--tinta-leitura)} /* --- as tres camadas fixas do dia (todas atras do conteudo) --- */ .ceu{position:fixed;inset:0;z-index:-1; background:linear-gradient(180deg,#F3E7C9 0%,#E7D9B4 100%)} /* veu do crepusculo: firma o contraste do texto claro no fim da tarde, quando o ceu ainda esta em meio tom */ .veu{position:fixed;inset:0;z-index:-1;pointer-events:none; background:var(--abissal);opacity:var(--veu)} /* ar tremendo do Planalto: sobe do chao e so existe enquanto ha calor. Bandas largas e muito borradas de proposito, para ler como ar quente subindo e nao como listra de tela. */ .tremor{position:fixed;inset:-6% 0 -2%;z-index:-1;pointer-events:none; opacity:calc(var(--calor) * .55); background:repeating-linear-gradient(180deg, rgba(255,252,240,.42) 0 3px,rgba(255,252,240,0) 3px 17px); filter:blur(5px); -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 46%,#000 82%,#000 100%); mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 46%,#000 82%,#000 100%); animation:tremula 6.5s ease-in-out infinite} @keyframes tremula{ 0%{transform:translate3d(0,0,0) scaleY(1)} 50%{transform:translate3d(0,-7px,0) scaleY(1.02)} 100%{transform:translate3d(0,0,0) scaleY(1)} } @media (prefers-reduced-motion:reduce){ .tremor{animation:none} } /* ===================================================================== Cabecalho: fica transparente sobre o ceu e so ganha um fio quando sai do topo. O logo troca de versao junto com o dia, por --calor. ===================================================================== */ .topo{position:fixed;top:0;left:0;right:0;z-index:100} /* Fora do topo o cabecalho vira uma faixa OPACA da cor oposta a do texto. Opaca mesmo, sem translucidez: os capitulos sao mais altos que a tela e passam por baixo dele, e qualquer sobra de transparencia (testei 9%, 62% e 88%) deixava o titulo do capitulo e os campos do formulario aparecendo por tras dos itens do menu. O valor vem de --contra-cap, escrito pelo motor do ceu a cada quadro, entao a faixa e branca as 14h00 e abissal as 23h00 sem nenhuma regra por tema, e vira junto com o logo. */ .topo::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0; background:var(--contra-cap); border-bottom:1px solid var(--fio-fraco); transition:opacity var(--trans)} .topo.preso::before{opacity:1} .topo-linha{display:flex;align-items:center;justify-content:space-between;gap:var(--e3); max-width:var(--largura);margin-inline:auto;padding-inline:var(--e3); min-height:92px;transition:min-height var(--trans)} .topo.preso .topo-linha{min-height:72px} /* A marca tem duas artes empilhadas (dia e noite), entao ela precisa de caixa propria com proporcao travada: o flex do cabecalho espremia a largura e a linha "Solar & Climatização" virava borrao. Mesma correcao da V2: 64px de altura, 40px no estado preso, flex:none, e a proporcao real do arquivo (720x198) no lugar de largura chutada. */ .marca{position:relative;display:block;flex:none;height:64px;aspect-ratio:720 / 198; transition:height var(--trans)} .topo.preso .marca{height:40px} .marca img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center} .marca-dia{opacity:calc(1 - var(--noite))} .marca-noite{opacity:var(--noite)} .trilha{display:flex;align-items:center;gap:var(--e4);list-style:none;margin:0;padding:0} .trilha a{position:relative;text-decoration:none;font-family:var(--fonte-mono);font-size:.8rem; letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-72);padding:.35rem 0; transition:color var(--trans)} .trilha a:hover{color:var(--tinta-leitura)} .trilha a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--verde);transition:right var(--trans)} .trilha a:hover::after{right:0} .topo-acoes{display:flex;align-items:center;gap:var(--e3)} /* ===================================================================== Sistema de botoes. Mesmas medidas da V2 de proposito: as duas versoes sao comparadas lado a lado na auditoria da Task 10. ===================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.95rem 1.75rem;border-radius:999px;border:1.5px solid transparent; font-family:var(--fonte-titulo);font-weight:600;font-size:.98rem;line-height:1; text-decoration:none;cursor:pointer;white-space:nowrap; transition:transform var(--trans),box-shadow var(--trans),background var(--trans),border-color var(--trans)} .btn:active{transform:translateY(1px)} .btn-primario{background:var(--verde);color:var(--abissal);box-shadow:0 14px 26px -16px rgba(131,184,96,.7)} .btn-primario:hover{background:#94c775;box-shadow:0 18px 32px -16px rgba(131,184,96,.85);transform:translateY(-1px)} .btn-fantasma{background:transparent;color:var(--tinta-leitura); border-color:color-mix(in srgb,var(--tinta-leitura) 40%,transparent)} .btn-fantasma:hover{background:var(--vidro);border-color:var(--tinta-leitura)} .btn-sm{padding:.6rem 1.3rem;font-size:.88rem} /* ===================================================================== Capitulos. Cada um ocupa a tela inteira e tem duas colunas: a esquerda e o registro do dia (horario em mono, legenda e o fio vertical que atravessa a pagina inteira), a direita e o conteudo. O fio nao e enfeite: ele e a linha do tempo do dia, e o ponto verde marca o capitulo que esta sendo lido. ===================================================================== */ main{display:block} /* A altura do capitulo acompanha o conteudo: 72vh e piso, nao medida. Com 100vh fixo, os capitulos curtos (o das 15h30 tem tres beats e nada mais) sobravam quase 500px de nada antes do proximo, o que le como bug e nao como respiro. O capitulo de abertura e a excecao: o hero continua valendo a tela inteira, porque ali a tela cheia E a peca. */ .cap{position:relative;display:flex;align-items:stretch; min-height:72vh;padding-block:var(--e6)} .cap-abertura{min-height:100vh;min-height:100svh} .cap-quadro{display:grid;grid-template-columns:minmax(128px,15%) minmax(0,1fr); gap:var(--e4);align-items:center; width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--e3)} .cap-marca{position:relative;align-self:stretch;display:flex;flex-direction:column; justify-content:center;gap:.55rem;padding-left:var(--e3)} .cap-marca::before{content:'';position:absolute;left:0;top:calc(var(--e6) * -1); bottom:calc(var(--e6) * -1);width:1px;background:var(--fio)} .cap-marca::after{content:'';position:absolute;left:-4px;top:50%;width:9px;height:9px; border-radius:50%;background:var(--verde);transform:translateY(-50%); box-shadow:0 0 0 5px color-mix(in srgb,var(--verde) 20%,transparent)} .cap:first-of-type .cap-marca::before{ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%); mask-image:linear-gradient(180deg,transparent 0,#000 26%)} .cap:last-of-type .cap-marca::before{ -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 100%); mask-image:linear-gradient(180deg,#000 74%,transparent 100%)} .hora{margin:0;font-family:var(--fonte-mono);font-weight:500;font-size:1.4rem; line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums; color:var(--tinta-leitura)} .cap-legenda{margin:0;font-family:var(--fonte-mono);font-size:.72rem;letter-spacing:.13em; text-transform:uppercase;line-height:1.5;color:var(--tinta-55);max-width:15ch} .cap-miolo{max-width:52rem} .cap-largo .cap-miolo{max-width:none} .rotulo{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 var(--e3); font-family:var(--fonte-mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; color:var(--tinta-55)} .rotulo::before{content:'';width:22px;height:1px;background:var(--verde);flex:none} .cap-titulo{margin:0 0 var(--e3);color:var(--tinta-leitura); font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.03em;line-height:1.05;text-wrap:balance} .cap-texto{margin:0 0 var(--e3);max-width:56ch;font-size:1.06rem;color:var(--tinta-72); text-wrap:pretty} .cap-texto:last-child{margin-bottom:0} /* espaco onde a Task 8 encaixa o conteudo de cada capitulo */ .cap-conteudo{margin-top:var(--e4)} .cap-conteudo:empty{margin-top:0} /* capitulo 0: abre embaixo do cabecalho e com o maior corpo tipografico da pagina */ .cap-abertura{padding-block-start:calc(var(--e6) + 52px)} .cap-abertura .cap-titulo{font-size:clamp(2.4rem,5.8vw,4.4rem)} .cap-abertura .cap-texto{font-size:1.15rem;max-width:52ch} .cap-acoes{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e3);margin-top:var(--e4)} /* ===================================================================== Pecas de conteudo que a Task 8 vai preencher. Todas flutuam sobre o ceu: fundo de vidro na cor oposta a do texto, fio de 1px e nenhuma sombra pesada, que sujaria o degrade. ===================================================================== */ .ficha{background:var(--vidro);border:1px solid var(--fio-fraco);border-radius:var(--raio); padding:var(--e3);transition:background var(--trans),border-color var(--trans),transform var(--trans)} .ficha-titulo{margin:0 0 .4rem;font-size:1.05rem;color:var(--tinta-leitura)} .ficha-texto{margin:0;font-size:.95rem;line-height:1.55;color:var(--tinta-72)} .ficha-numero{display:block;font-family:var(--fonte-mono);font-size:.78rem;letter-spacing:.12em; color:var(--verde);margin-bottom:var(--e2)} .grade-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3)} .grade-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e3)} .grade-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e3)} /* beats: as frases curtas do capitulo das 15h30, uma por linha do fio */ .beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e3)} .beat{display:flex;gap:var(--e3);align-items:baseline;padding-bottom:var(--e3); border-bottom:1px solid var(--fio-fraco)} .beat:last-child{border-bottom:0;padding-bottom:0} .beat-marca{flex:none;font-family:var(--fonte-mono);font-size:.8rem;letter-spacing:.1em; color:var(--teal)} .beat p{margin:0;color:var(--tinta-72)} /* ===================================================================== HUD fixo: o instrumento que acompanha o dia inteiro. Temperatura e umidade sao funcao da mesma fase do ceu e sao escritas no mesmo requestAnimationFrame do motor, nunca em listener proprio. ===================================================================== */ .hud-fixo{position:fixed;left:var(--e3);bottom:var(--e3);z-index:90;min-width:186px; display:flex;flex-direction:column;gap:.3rem;padding:.85rem 1rem .9rem; border:1px solid var(--fio);border-radius:var(--raio-sm); /* mesmo tratamento da faixa do cabecalho: com os capitulos longos, o registro de hora de cada capitulo passa por baixo do HUD enquanto a pagina rola, e vidro a 16% deixava os dois textos misturados. Sem backdrop-filter de proposito: com o ceu numa camada fixa atras de tudo, o desfoque de fundo sai errado e escurece a peca inteira. */ background:color-mix(in srgb,var(--contra-cap) 52%,transparent); color:var(--tinta-leitura); transition:opacity var(--trans),visibility var(--trans),transform var(--trans)} /* o instrumento e do dia: quando o rodape entra, o dia acabou e ele sai de cena (tambem e o unico jeito de nao cobrir a linha de copyright) */ .hud-fixo.escondido{opacity:0;visibility:hidden;transform:translateY(10px)} .hud-linha{display:flex;align-items:baseline;gap:.35rem;margin:0} .hud-num{font-family:var(--fonte-mono);font-weight:500;font-size:1.5rem;line-height:1; font-variant-numeric:tabular-nums} .hud-un{font-family:var(--fonte-mono);font-size:.82rem;color:var(--tinta-72)} .hud-rot{margin-left:auto;font-family:var(--fonte-mono);font-size:.68rem;letter-spacing:.12em; text-transform:uppercase;color:var(--tinta-55)} .hud-barra{margin-top:.45rem;height:2px;border-radius:2px;background:var(--fio);overflow:hidden} .hud-barra span{display:block;height:100%;width:calc(var(--fase-norm) * 100%); background:linear-gradient(90deg,var(--verde),var(--teal))} /* ===================================================================== Reveals ao rolar, iguais aos da V2. O CSS so esconde .revelar quando tem .js-ativo, entao se o app.js nao rodar nada fica invisivel. ===================================================================== */ .revelar{transition:opacity 600ms var(--trans),transform 600ms cubic-bezier(.22,.61,.36,1)} .js-ativo .revelar:not(.revelado){opacity:0;transform:translateY(18px)} .revelado{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .revelar{opacity:1!important;transform:none!important;transition:none!important} } /* ===================================================================== Task 8: conteudo dos capitulos. Regra unica deste bloco: nenhuma peca pinta cor fixa. Texto sempre em --tinta-leitura (ou nos seus derivados de opacidade) e superficie sempre em --vidro, que e a cor OPOSTA a do texto. E isso que faz o mesmo componente escurecer as 14h00 e clarear as 23h00 sem uma unica regra duplicada por tema. As duas excecoes sao deliberadas e estao comentadas onde aparecem: a legenda das fotos (que fica sobre a propria imagem) e o rodape (que so existe depois das 23h00). ===================================================================== */ /* lista que virou grade nao carrega marcador nem recuo */ .grade-2,.grade-3,.grade-4{list-style:none;margin:0;padding:0} /* segundo assunto dentro do mesmo capitulo (os passos, os depoimentos, o fecho): respiro maior que o do grid, para o olho entender que mudou de bloco sem precisar de mais uma linha divisoria */ .bloco{margin-top:var(--e5)} .bloco-titulo{margin:0 0 var(--e4);color:var(--tinta-leitura); font-size:clamp(1.35rem,2.3vw,1.9rem);letter-spacing:-.02em;line-height:1.15;text-wrap:balance} /* --- 14h00: prova social do hero, em mono, sem caixa --- */ .provas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem 1.7rem; font-family:var(--fonte-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase; color:var(--tinta-55)} .prova{display:flex;align-items:center;gap:.6rem} .prova::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--verde)} /* --- 17h00 e 20h30: fichas com icone --- */ .ficha-icone{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px; margin-bottom:var(--e2);border-radius:var(--raio-sm);border:1px solid var(--fio-fraco); background:var(--vidro);color:var(--teal)} .ficha-icone svg{width:24px;height:24px} .pilares .ficha-texto,.selos .ficha-texto{margin-top:.35rem} /* o verde puro do token some sobre o ceu claro do meio da tarde: aqui ele e puxado na direcao da tinta de leitura, entao mantem o acento verde e continua legivel nas duas pontas do dia */ .passos .ficha-numero{font-size:.74rem; color:color-mix(in srgb,var(--verde) 62%,var(--tinta-leitura))} .passos .ficha,.pilares .ficha,.selos .ficha{height:100%} /* --- 19h00: galeria. A legenda mora sobre a foto, entao ela e a unica peca da pagina que usa creme fixo: o degrade escuro embaixo dela ja e o "tema" local, independente da hora do dia. --- */ .cartao{position:relative;overflow:hidden;border-radius:var(--raio); border:1px solid var(--fio-fraco);background:var(--vidro); transition:transform var(--trans),border-color var(--trans)} .cartao img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 420ms ease} .cartao:hover{transform:translateY(-4px);border-color:var(--fio)} .cartao:hover img{transform:scale(1.04)} .cartao-legenda{position:absolute;left:0;right:0;bottom:0;padding:var(--e4) var(--e3) 1.15rem; background:linear-gradient(180deg,rgba(8,28,21,0) 0%,rgba(8,28,21,.86) 62%)} .cartao-legenda h3{margin:0 0 .2rem;color:var(--creme);font-size:1.02rem} .cartao-legenda p{margin:0;color:rgba(255,239,204,.78);font-size:.87rem;line-height:1.45} /* --- 20h30: depoimentos --- */ .depoimento{display:flex;flex-direction:column;gap:var(--e3);padding:var(--e4) var(--e3)} .depoimento-texto{margin:0;font-style:italic;font-size:1rem;line-height:1.6; color:var(--tinta-leitura)} .depoimento-texto::before{content:'\201C'} .depoimento-texto::after{content:'\201D'} .depoimento-rodape{display:flex;align-items:center;gap:.85rem;margin-top:auto} .depoimento-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none; width:46px;height:46px;border-radius:50%;border:1px solid var(--fio); background:var(--vidro-forte);color:var(--tinta-leitura); font-family:var(--fonte-mono);font-size:.92rem;font-weight:500} .depoimento-nome{margin:0;font-weight:700;font-size:.98rem;color:var(--tinta-leitura)} .depoimento-cargo{margin:0;font-size:.85rem;color:var(--tinta-55)} /* ===================================================================== 22h00: formulario. Mesmos ids, mesmos campos e mesma validacao da V2, so que em vidro sobre o ceu da noite em vez de cartao branco. ===================================================================== */ .formulario{max-width:760px;background:var(--vidro-forte);border:1px solid var(--fio-fraco); border-radius:var(--raio);padding:var(--e4)} .chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--e4)} .chip{position:relative;cursor:pointer} .chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .chip span{display:inline-flex;align-items:center;padding:.55rem 1.15rem;border-radius:999px; border:1.5px solid var(--fio);background:var(--vidro);color:var(--tinta-leitura); font-size:.9rem;font-weight:600; transition:background var(--trans),border-color var(--trans),color var(--trans)} .chip input:checked + span{background:var(--verde);border-color:var(--verde);color:var(--abissal)} .chip input:focus-visible + span{outline:3px solid var(--teal);outline-offset:2px} .form-grade{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);margin-bottom:var(--e3)} .campo{display:flex;flex-direction:column;gap:.4rem} .campo-largo{grid-column:1 / -1} .campo label{font-size:.88rem;font-weight:600;color:var(--tinta-leitura)} .campo input,.campo select{font:inherit;font-family:var(--fonte-corpo);color:var(--tinta-leitura); padding:.8rem .95rem;border-radius:var(--raio-sm);border:1.5px solid var(--fio); background:var(--vidro);transition:border-color var(--trans),background var(--trans)} .campo input::placeholder{color:var(--tinta-55)} .campo input:focus,.campo select:focus{border-color:var(--teal)} .campo input:focus:not(:focus-visible),.campo select:focus:not(:focus-visible){outline:none} .campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:var(--erro)} /* a seta do select e desenhada em creme porque este capitulo e sempre noite: a fase 5 nunca volta ao ceu claro */ .campo select{appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFEFCC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .85rem center;background-size:18px; padding-right:2.4rem} .campo select option{color:#17171C;background:#fff} .erro{margin:0;font-size:.82rem;color:var(--erro)} .form-enviar{width:100%;margin-top:.3rem} .form-nota{margin:var(--e3) 0 0;text-align:center;font-size:.86rem;color:var(--tinta-55)} /* ===================================================================== 23h00: FAQ, fecho e rodape ===================================================================== */ .faq-lista{max-width:760px;display:flex;flex-direction:column;gap:var(--e2)} .faq-item{background:var(--vidro);border:1px solid var(--fio-fraco);border-radius:var(--raio-sm); transition:border-color var(--trans)} .faq-item:hover{border-color:var(--fio)} .faq-cabecalho-item{margin:0} .faq-pergunta{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);width:100%; border:none;background:transparent;cursor:pointer;text-align:left;padding:1.1rem 1.3rem; font-family:var(--fonte-titulo);font-size:1.02rem;font-weight:600;color:var(--tinta-leitura)} .faq-icone{position:relative;flex:none;width:20px;height:20px} .faq-icone::before,.faq-icone::after{content:'';position:absolute;top:50%;left:50%;background:var(--teal); transform:translate(-50%,-50%);transition:transform var(--trans)} .faq-icone::before{width:14px;height:2px} .faq-icone::after{width:2px;height:14px} .faq-pergunta[aria-expanded="true"] .faq-icone::after{transform:translate(-50%,-50%) rotate(90deg) scale(0)} .faq-resposta{display:grid;grid-template-rows:0fr;transition:grid-template-rows 320ms var(--trans)} .faq-resposta.aberto{grid-template-rows:1fr} .faq-resposta-miolo{overflow:hidden} .faq-resposta p{margin:0 1.3rem 1.2rem;color:var(--tinta-72);font-size:.96rem;line-height:1.6} .fecho{max-width:760px;padding-top:var(--e5);border-top:1px solid var(--fio-fraco)} .fecho-titulo{margin:0 0 var(--e2);color:var(--tinta-leitura); font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:-.02em;line-height:1.15;text-wrap:balance} .fecho-nota{margin:0;font-family:var(--fonte-mono);font-size:.82rem;letter-spacing:.06em; text-transform:uppercase;color:var(--verde)} /* o rodape so aparece depois das 23h00, quando o ceu ja e abissal: aqui o creme fixo e a leitura correta e nao depende mais da fase */ .rodape{position:relative;padding-block:var(--e5) var(--e3);color:rgba(255,239,204,.78); border-top:1px solid rgba(255,239,204,.14)} .rodape-quadro{max-width:var(--largura);margin-inline:auto;padding-inline:var(--e3)} .rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--e5);padding-bottom:var(--e5); border-bottom:1px solid rgba(255,239,204,.14)} .rodape-marca img{width:186px;height:auto;margin-bottom:var(--e2)} .rodape-marca p{margin:0;max-width:38ch;font-size:.92rem;line-height:1.6} .rodape-coluna h3{font-family:var(--fonte-mono);font-size:.78rem;letter-spacing:.08em; text-transform:uppercase;color:var(--creme);margin:0 0 var(--e2)} .rodape-coluna ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem} .rodape-coluna a{text-decoration:none;font-size:.92rem;transition:color var(--trans)} .rodape-coluna a:hover{color:var(--creme)} .rodape-copy{padding-top:var(--e3)} .rodape-copy p{margin:0;font-family:var(--fonte-mono);font-size:.78rem;color:rgba(255,239,204,.55)} /* WhatsApp flutuante: canto inferior DIREITO, porque o HUD do dia mora no esquerdo. Os dois nunca se cruzam. */ .whats-flutuante{position:fixed;right:var(--e3);bottom:var(--e3);z-index:90; display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px; border-radius:50%;border:none;background:var(--verde);color:var(--abissal);cursor:pointer; box-shadow:0 16px 32px -14px rgba(8,28,21,.5); transition:transform var(--trans),opacity var(--trans),visibility var(--trans)} .whats-flutuante:hover{transform:translateY(-2px) scale(1.04)} .whats-flutuante svg{width:27px;height:27px} .whats-flutuante.escondido{opacity:0;visibility:hidden;transform:translateY(12px)} /* --- breakpoint 980: some a trilha do cabecalho, o registro encolhe --- */ @media (max-width:980px){ :root{--e6:4rem} .trilha{display:none} .cap-quadro{grid-template-columns:minmax(104px,17%) minmax(0,1fr);gap:var(--e3)} .cap-marca{padding-left:var(--e2)} .hora{font-size:1.2rem} .grade-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grade-3{grid-template-columns:repeat(2,minmax(0,1fr))} .selos{grid-template-columns:1fr} .rodape-grade{grid-template-columns:1fr 1fr;gap:var(--e4)} .rodape-marca{grid-column:1 / -1} } /* --- breakpoint 680: conteudo centralizado, horario em faixa, HUD fora --- */ @media (max-width:680px){ body{font-size:16px} /* o capitulo continua valendo uma tela cheia no celular: e o que faz o arco do dia ser sentido mesmo sem os pins do desktop */ .cap{padding-block:var(--e5)} .cap-abertura{padding-block-start:calc(var(--e5) + 52px)} .cap-quadro{grid-template-columns:1fr;gap:var(--e3);justify-items:center;text-align:center} .cap-marca{align-self:auto;flex-direction:row;align-items:baseline;justify-content:center; gap:.8rem;padding-left:0;padding-bottom:var(--e2)} .cap-marca::before,.cap-marca::after{display:none} .cap-legenda{max-width:none} .cap-miolo{max-width:none;width:100%} .cap-texto{margin-inline:auto} .cap-acoes{justify-content:center} .btn{width:100%} .rotulo{justify-content:center} /* mesmo tratamento do eyebrow da V2: em 375px o rotulo quebra em duas linhas e o traco fica preso na margem esquerda, longe do texto */ .rotulo::before{display:none} .grade-2,.grade-3{grid-template-columns:repeat(2,minmax(0,1fr))} .beat{flex-direction:column;align-items:center;gap:.4rem} .hud-fixo{display:none} /* sem trilha e sem menu no celular, o cabecalho esconde o CTA (igual a V2) e a marca fica no mesmo tamanho da V2, ja que nao ha mais nada disputando espaco com ela em 375px */ .topo-acoes .btn{display:none} .marca{height:64px} .topo.preso .marca{height:32px} .topo-linha{gap:var(--e2);min-height:74px} .topo.preso .topo-linha{min-height:62px} /* cards com paragrafo longo nao cabem em duas colunas de celular */ .provas{justify-content:center} .passos,.selos,.depoimentos,.galeria{grid-template-columns:1fr} /* a legenda do cartao nao pode chegar ate o canto inferior direito, onde mora o botao flutuante de WhatsApp */ .cartao-legenda{padding-right:5.5rem} .formulario{padding:var(--e3)} .form-grade{grid-template-columns:1fr} .chips{justify-content:center} .campo label,.campo input,.campo select{text-align:left} .faq-pergunta{text-align:left} .depoimento-rodape{flex-direction:column;text-align:center;gap:.5rem} /* o botao flutuante de WhatsApp mora no canto inferior direito e no celular ele cai justamente sobre a linha de copyright */ .rodape{text-align:center;padding-bottom:calc(var(--e3) + 74px)} .rodape-grade{grid-template-columns:1fr;gap:var(--e4)} .rodape-marca img{margin-inline:auto} .rodape-marca p{margin-inline:auto} .rodape-coluna ul{align-items:center} .fecho{text-align:center} } /* --- breakpoint 380: aperta o respiro lateral e o corpo dos titulos --- */ @media (max-width:380px){ .cap-quadro{padding-inline:18px} .cap-abertura .cap-titulo{font-size:2rem} .cap-titulo{font-size:1.8rem} .grade-2,.grade-3,.grade-4{gap:1rem} .cap-acoes{gap:.75rem} }