/* =========================================================================== BORA yoga · sistema do site Os componentes deste arquivo vêm da peça de branding, e não de invenção nova: palco/fala, cena, trilho, sangria, publicos, rot, tex e o botão de sombra dura são os mesmos dispositivos, portados para um site de várias páginas. O que o site acrescenta é a régua de acessibilidade, o espaço marcado de foto e o perfil de movimento por território. Contrastes conferidos pela fórmula WCAG 2.1 contra --papel #F7F8F6. Onde diz REPROVA, a cor é superfície e nunca texto. =========================================================================== */ /* --- 1. Fontes ---------------------------------------------------------- */ @font-face{font-family:'Fraunces';src:url('../fonts/fraunces.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Fraunces';src:url('../fonts/fraunces-italic.woff2') format('woff2-variations');font-weight:100 900;font-style:italic;font-display:swap} @font-face{font-family:'Nunito Sans';src:url('../fonts/nunito-sans.woff2') format('woff2-variations');font-weight:200 1000;font-style:normal;font-display:swap} @font-face{font-family:'Nunito Sans';src:url('../fonts/nunito-sans-italic.woff2') format('woff2-variations');font-weight:200 1000;font-style:italic;font-display:swap} /* --- 2. Reset ----------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} img,video,svg,canvas{display:block;max-width:100%} img,video{height:auto} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer} a{color:inherit} ul,ol{list-style:none} :target{scroll-margin-top:calc(var(--altura-topo) + var(--e-4))} /* --- 3. Tokens ---------------------------------------------------------- */ :root{ /* Núcleo, travado. verde 7,95:1 → AAA. Carrega toda ação, e serve nos dois sentidos. caramelo 2,16:1 → REPROVA como texto. Superfície, com tinta a 6,88:1. tinta 14,83:1 → AAA. */ --papel:#F7F8F6; --superficie:#EDEFEB; --elevada:#FCFBF8; --tinta:#23231D; --verde:#46503F; --caramelo:#CBA47D; /* Camada infantil, tirada do logotipo Yoga Kids. As quatro são superfície. Nenhuma passa como texto sobre claro, e a tinta lê sobre todas, de 4,58:1 a 9,07:1. rosa 2,83:1 · tinta sobre ela 5,24:1 roxo 3,24:1 · tinta sobre ela 4,58:1 agua 2,15:1 · tinta sobre ela 6,89:1 sol 1,63:1 · tinta sobre ela 9,07:1 Sobre fundo escuro elas voltam a servir como texto, e é assim que a peça as usa na seção da respiração. */ --rosa:#EB6A8B; --roxo:#9380C0; --agua:#6DB9A8; --sol:#F4BB4C; /* Derivadas de estado. Nenhum matiz novo. */ --verde-claro:#515C48; --verde-escuro:#2F3729; --sol-escuro:#CE9530; --fio:rgba(35,35,29,0.14); --fio-forte:rgba(35,35,29,0.28); /* Papéis semânticos. As páginas usam estes, nunca o hex direto. */ --fundo:var(--papel); --texto-cor:var(--tinta); --acao:var(--verde); --acao-hover:var(--verde-claro); --acao-sombra:var(--verde-escuro); --sobre-acao:var(--papel); /* Tipografia */ --display:'Fraunces',Georgia,'Times New Roman',serif; --texto:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif; /* Escala. O 60+ multiplica isto e nada mais precisa mudar. O piso de 17px vale no site inteiro, porque contraste e alvo grande não atrapalham ninguém. O que varia por território é o movimento, não a legibilidade. */ --escala:1; --t-base:calc(clamp(17px,.28vw + 15.9px,19px) * var(--escala)); --t--1:calc(clamp(14px,.14vw + 13.5px,15px) * var(--escala)); --t--2:calc(clamp(12px,.14vw + 11.5px,13px) * var(--escala)); --t-1:calc(clamp(20px,.42vw + 18.3px,23px) * var(--escala)); --t-2:calc(clamp(24px,.84vw + 20.6px,30px) * var(--escala)); --t-3:calc(clamp(30px,1.7vw + 23.2px,42px) * var(--escala)); --t-4:calc(clamp(38px,3.4vw + 24.4px,62px) * var(--escala)); --t-5:calc(clamp(46px,6.2vw + 21.2px,90px) * var(--escala)); /* ---------------- Espaço ---------------- A escala é fluida entre 390px e 1440px de tela, e cada degrau tem um trabalho. Antes era fixa, o que dava o mesmo vão de 32px num celular e num monitor: apertado lá, mesquinho aqui. Os três primeiros são fixos de propósito. São distâncias dentro de um componente, entre um ícone e o texto dele, entre um rótulo e o valor. Não devem crescer com a tela, senão o componente se desmonta. e-1 4px colado e-2 8px ícone e texto e-3 12px legenda e a imagem dela, rótulo e valor e-4 16 a 20 texto e texto, título e o parágrafo dele e-5 24 a 40 IMAGEM E TEXTO, vídeo e texto e-6 32 a 62 bloco e bloco dentro da mesma seção e-7 48 a 104 grupo e grupo e-8 64 a 152 respiro de seção A lei da proximidade manda no resto: o vão ACIMA de um título tem que ser visivelmente maior que o vão ABAIXO dele, senão o título cola no texto errado. Por isso título recebe e-6 em cima e e-4 embaixo, nunca o contrário. O intercepto vai em rem, e não em px, para o espaço acompanhar quem aumenta o corpo do texto no navegador. */ --e-1:4px; --e-2:8px; --e-3:12px; --e-4:clamp(16px, 0.38vw + 0.907rem, 20px); --e-5:clamp(24px, 1.52vw + 1.129rem, 40px); --e-6:clamp(32px, 2.86vw + 1.304rem, 62px); --e-7:clamp(48px, 5.33vw + 1.700rem, 104px); --e-8:clamp(64px, 8.38vw + 1.957rem, 152px); --respiro:clamp(90px,14vh,190px); /* Grade */ --gut:clamp(20px,4.5vw,72px); --max:1320px; --coluna:56ch; --altura-topo:72px; /* Forma. O raio 18 é o da peça. */ --r:18px; --r-pilula:1000px; --r-mini:8px; --alvo-min:48px; /* Movimento. Nomenclatura do GSAP, espelhada em CSS. */ --d-toque:.12s; --d-curta:.5s; --d-secao:.95s; --ease-saida:cubic-bezier(.22,.61,.36,1); --ease-volta:cubic-bezier(.34,1.56,.64,1); --ease-calma:cubic-bezier(.37,0,.63,1); --stagger:.08s; } /* --- 4. Territórios ------------------------------------------------------ Cada um ajusta o núcleo, nenhum o substitui. Teste de calibragem: um botão do site principal, colocado aqui, precisa parecer que pertence. ------- */ /* 60+ · amplia legibilidade, reduz movimento. Nenhuma cor nova, porque dar paleta própria a esse público é o primeiro passo para estética de folheto de plano de saúde. O argumento da página é autonomia. */ [data-territorio="60"]{ --escala:1.125; --fio:rgba(35,35,29,0.24); --alvo-min:56px; --respiro:clamp(110px,16vh,220px); --stagger:0s; } /* Yoga Kids · amplia expressão. O verde continua sendo a ação: o que muda é a variante .bt.sol do botão, e o entorno ganhar as quatro cores em área. */ [data-territorio="kids"]{ --alvo-min:52px; --stagger:.06s; } /* --- 5. Base ------------------------------------------------------------ */ body{ background:var(--fundo); color:var(--texto-cor); font-family:var(--texto); font-size:var(--t-base); line-height:1.66; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{ font-family:var(--display); font-weight:300; font-variation-settings:'SOFT' 45,'WONK' 0; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; } h1{font-size:var(--t-5)} h2{font-size:var(--t-4)} h3{font-size:var(--t-2)} h4{font-size:var(--t-1);line-height:1.2} h1 em,h2 em,h3 em{font-style:italic;font-variation-settings:'SOFT' 75,'WONK' 1} p{text-wrap:pretty} p + p{margin-top:var(--e-4)} strong,b{font-weight:700} .lk{ color:var(--acao);text-decoration:underline; text-decoration-thickness:1px;text-underline-offset:.22em; transition:text-decoration-thickness var(--d-curta) var(--ease-saida); } .lk:hover{text-decoration-thickness:3px} /* --- 6. Acessibilidade -------------------------------------------------- */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid var(--acao);outline-offset:3px;border-radius:var(--r-mini); } .pula{ position:absolute;left:var(--e-4);top:-100px;z-index:100; padding:var(--e-3) var(--e-4);background:var(--acao);color:var(--sobre-acao); border-radius:var(--r-mini);transition:top .3s var(--ease-saida); } .pula:focus{top:var(--e-4)} .so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* --- 7. Grade ----------------------------------------------------------- */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} .narrow{max-width:var(--coluna)} .sec{position:relative;padding-block:var(--respiro)} .sec.papel{background:var(--papel);color:var(--tinta)} .sec.superficie{background:var(--superficie);color:var(--tinta)} .sec.elevada{background:var(--elevada);color:var(--tinta)} .sec.verde{background:var(--verde);color:var(--elevada)} .sec.escura{background:var(--tinta);color:var(--elevada)} .sec.verde,.sec.escura{--fio:rgba(252,251,248,0.2)} .duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(26px,4vw,72px);align-items:start} .trio{display:grid;gap:var(--e-5);grid-template-columns:1fr} @media (min-width:700px){.trio{grid-template-columns:repeat(2,1fr)}} @media (min-width:1040px){.trio{grid-template-columns:repeat(3,1fr)}} /* --- 8. Rótulos --------------------------------------------------------- */ /* O rótulo numerado da peça: número em Fraunces caramelo, legenda versalete, e um fio que corre até o fim da largura. */ .rot{display:flex;align-items:center;gap:16px;margin-bottom:clamp(26px,4vw,52px)} .rot i{font-style:normal;font-family:var(--display);font-size:13px;color:var(--caramelo);font-variant-numeric:tabular-nums} .rot span{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:800;opacity:.5} .rot::after{content:'';flex:1;height:1px;background:currentColor;opacity:.16} .mini{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:800;opacity:.5} .cap{font-size:var(--t--1);line-height:1.55;opacity:.62;max-width:50ch} .tit{font-size:clamp(30px,4.2vw,62px)} .lead{font-size:var(--t-1);line-height:1.5;opacity:.84} /* O traço que afina, átomo do sistema. Desenhado, nunca uma linha de 1px. */ .tra{display:block;width:34px;height:3px;background:currentColor; clip-path:polygon(0 0,100% 38%,100% 62%,0 100%)} /* --- 9. Botão ----------------------------------------------------------- Objeto sobre a superfície, e não área desenhada nela: sombra dura de 6px que some no clique enquanto o botão afunda. É o peso físico que a peça usa, e é ele que transforma clicar em apertar. ----------------------- */ .bt{ display:inline-flex;align-items:center;justify-content:center;gap:14px; min-height:var(--alvo-min); padding:17px 26px;border-radius:var(--r); background:var(--acao);color:var(--sobre-acao); text-decoration:none;border:0;cursor:pointer; font-family:var(--texto);font-size:12px;letter-spacing:.18em; text-transform:uppercase;font-weight:800; box-shadow:0 6px 0 var(--acao-sombra); transition:transform var(--d-toque) ease,box-shadow var(--d-toque) ease,background .3s ease; } .bt:hover{background:var(--acao-hover)} .bt:active{transform:translateY(6px);box-shadow:0 0 0 var(--acao-sombra)} .bt svg{flex:none} /* A variante de festa do Kids. O verde continua sendo a ação, e esta entra onde a página pede alegria. Sol com tinta por cima lê a 9,07:1. */ .bt.sol{background:var(--sol);color:var(--tinta);box-shadow:0 6px 0 var(--sol-escuro)} .bt.sol:hover{background:#F8C864} .bt.sol:active{box-shadow:0 0 0 var(--sol-escuro)} .bt.fantasma{background:transparent;color:var(--acao);box-shadow:none;border:2px solid rgba(70,80,63,0.3)} .bt.fantasma:hover{background:rgba(70,80,63,0.07);border-color:var(--acao)} .bt.fantasma:active{transform:translateY(2px)} /* Sobre fundo escuro o fantasma inverte, senão o verde some na foto. */ .sec.verde .bt.fantasma,.sec.escura .bt.fantasma,.capa .bt.fantasma,.sangria .bt.fantasma{ color:var(--elevada);border-color:rgba(252,251,248,0.4)} .sec.verde .bt.fantasma:hover,.sec.escura .bt.fantasma:hover,.capa .bt.fantasma:hover,.sangria .bt.fantasma:hover{ background:rgba(252,251,248,0.12);border-color:var(--elevada)} .bt.pequeno{padding:11px 18px;font-size:11px;min-height:40px} .acoes{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:clamp(26px,3.5vw,44px);align-items:center} /* No 60+ o botão perde o exagero: afunda 3px em vez de 6. */ [data-territorio="60"] .bt{box-shadow:0 4px 0 var(--acao-sombra)} [data-territorio="60"] .bt:active{transform:translateY(4px)} /* --- 10. Texturas ------------------------------------------------------- Cinco SVG de repertório indiano, gerados por código. A cor vem de currentColor, então basta pintar o container. ------------------------ */ .tex{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .tex-svg{position:absolute;color:currentColor} .tex.md .tex-svg{width:min(150vh,150vw);left:50%;top:50%;translate:-50% -50%;opacity:.10} .tex.kl .tex-svg{width:180%;left:-40%;top:-20%;opacity:.07} .tex.bl .tex-svg{width:70%;right:-12%;bottom:-14%;opacity:.10} .tex.gr .tex-svg{width:130%;left:-15%;bottom:0;opacity:.13} .tex.esp .tex-svg{width:100%;left:0;bottom:0;opacity:.24} .sec > .wrap{position:relative;z-index:2} /* --- 10b. Capa ---------------------------------------------------------- Fotografia sangrando a tela, com o texto na janela limpa da direita, fora da silhueta de quem está na foto. A foto do hero foi recortada para isso: saiu a planta da direita e o chão vazio da esquerda, nada embaixo, então o corpo inteiro dela e o tapete continuam na imagem. A janela livre vale 372px em 1320. O véu é de PAPEL, e não de sombra: aquele lado é parede clara em luz de sol, onde texto branco lê entre 1,71 e 2,36 e reprova. Texto tinta passa. Sem véu o pior ponto da região dá 2,00; papel a 60% leva a 7,68, que é AAA. Uso 0,68 no corpo e 0,92 na borda, com folga. ------------ */ .capa{position:relative;min-height:82vh;min-height:82svh;overflow:hidden;background:var(--papel); display:grid;align-items:center} .capa-img{position:absolute;inset:0;z-index:0} .capa-img img{width:100%;height:100%;object-fit:cover; /* A cabeça dela começa a 8,1% da altura do arquivo. Com a âncora embaixo o recorte tirava 130px do topo e cortava a cabeça. Ancorada em 14% o recorte sai quase todo do pé, e o quadro termina na linha do tapete. Sobram 52px de folga acima da cabeça em 1320 de largura. */ object-position:50% 14%} .capa-veu{position:absolute;inset:0;z-index:1; background:linear-gradient(270deg, rgba(247,248,246,.92) 0%, rgba(247,248,246,.82) 16%, rgba(247,248,246,.68) 28%, rgba(247,248,246,.32) 38%, rgba(247,248,246,0) 48%)} .capa-bloco{position:relative;z-index:2;justify-self:end; width:28%;min-width:330px;margin-right:clamp(20px,2.6%,44px); /* recuo interno: o texto afasta da silhueta em vez de encostar nela */ padding:clamp(36px,5vh,70px) 0 clamp(36px,5vh,70px) clamp(18px,1.9%,30px)} .capa-bloco h1{font-size:clamp(34px,3.5vw,54px);font-weight:250;letter-spacing:-.025em} .capa-bloco .lead{margin-top:var(--e-4);font-size:var(--t-base);opacity:.84} .capa-bloco .acoes{margin-top:clamp(24px,3vw,38px)} .capa-bloco .bt{font-size:13px;padding:18px 28px} .capa-marca{display:flex;flex-direction:column;gap:var(--e-3);margin-bottom:var(--e-5)} /* O cabeçalho já carrega o lockup horizontal. Repetir o mesmo desenho no hero, a 90px de distância, lê como erro de montagem, não como reforço de marca. O hero usa o vertical, que é quase quadrado (proporção 1,02) e funciona como selo dentro da coluna estreita. */ .capa-marca img{height:clamp(76px,6.4vw,104px);width:auto;align-self:flex-start} /* Quando a capa empilha, a marca do bloco fica a poucos pixels da marca do cabeçalho. Duas vezes o mesmo logo em meia tela é erro, não reforço: fica só a etiqueta que diz de que página se trata. */ @media (max-width:1180px){.capa-marca img{display:none} .capa-marca{margin-bottom:var(--e-4)}} .capa-lista{margin-top:clamp(22px,3vh,38px);border-top:1px solid var(--fio-forte)} .capa-lista a{display:flex;align-items:baseline;gap:var(--e-3);padding:11px 0; border-bottom:1px solid var(--fio-forte);text-decoration:none; transition:padding-left .4s var(--ease-saida)} .capa-lista a:hover{padding-left:9px} .capa-lista b{font-family:var(--display);font-weight:300;font-size:var(--t-1);line-height:1.1} .capa-lista span{margin-left:auto;font-size:var(--t--2);letter-spacing:.14em; text-transform:uppercase;font-weight:800;opacity:.5;white-space:nowrap} /* Abaixo de 1180px a janela limpa fica estreita demais para esse corpo de texto, então o bloco desce para o papel. Brigar com o recorte ali custaria o contraste que o cálculo garantiu. */ @media (max-width:1180px){ .capa{min-height:0;display:block} /* A moldura segue a orientação do arquivo. Uma foto deitada de 3:2 dentro de uma janela 5:4 perde 11% das laterais, o que é aceitável. A mesma janela numa foto em pé de 3:4 jogaria fora 39%, e some justamente o rosto. Por isso existe a variante retrato. */ .capa-img{position:relative;aspect-ratio:5/4} .capa-img.retrato{aspect-ratio:4/5} .capa-img img{object-position:46% 100%} .capa-img.retrato img{object-position:50% 22%} .capa-veu{display:none} /* width:100% e justify-self explícitos: com width:auto o bloco cai em shrink-to-fit e encolhe para a largura do próprio conteúdo */ /* quando a capa empilha, este padding de cima deixa de ser respiro de bloco e passa a ser o vão entre a foto e o texto, que é e-5 */ .capa-bloco{width:100%;min-width:0;margin-right:0;justify-self:stretch; padding:var(--e-5) var(--gut) clamp(40px,7vw,56px)} .capa-bloco h1{max-width:15ch} .capa-bloco .lead{max-width:46ch} } /* Variante em duas colunas, para quando a foto é retrato e não comporta texto por cima. Sem véu: cada um no seu lado. */ .capa.dupla{min-height:0;display:grid;grid-template-columns:1fr;align-items:stretch; background:var(--papel);color:var(--texto-cor)} .capa.dupla .capa-veu{display:none} .capa.dupla .capa-img{position:relative;inset:auto} .capa.dupla .capa-img img{object-position:50% 26%;width:100%;height:100%} /* empilhado, o topo deste padding é o vão entre a foto e o texto */ .capa.dupla .capa-bloco{width:auto;min-width:0;margin:0;justify-self:stretch; padding:var(--e-5) var(--gut) clamp(44px,7vw,80px)} @media (min-width:900px){ /* minmax(0,..) porque fr tem mínimo automático: sem isso a foto de 1094px empurra a própria coluna e desequilibra a grade */ .capa.dupla{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)} .capa.dupla .capa-img{order:2} .capa.dupla .capa-img img{aspect-ratio:auto;min-height:100%} /* lado a lado a foto não encosta no texto, então o padding volta a ser respiro interno e pode crescer */ .capa.dupla .capa-bloco{order:1;padding-block:clamp(48px,6vw,88px); padding-inline:clamp(40px,6vw,96px)} } /* --- 10c. Filme em sangria ---------------------------------------------- Vídeo ocupando a tela, em laço e mudo. Com preload="none" e poster ele não custa byte nenhum até alguém rolar até lá: o motion.js dá play quando entra em cena e pausa quando sai. ---------------------------- */ .filme{position:relative;min-height:86vh;min-height:86svh;overflow:hidden;background:#14140f; display:grid;align-items:end;color:var(--elevada)} .filme video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover} .filme::after{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(20,20,15,.36) 0%,rgba(20,20,15,.06) 32%, rgba(20,20,15,.54) 70%,rgba(20,20,15,.90) 100%)} .filme .wrap{position:relative;z-index:2;padding-block:clamp(44px,8vh,96px)} .filme h2{font-weight:250;max-width:17ch} .filme p{margin-top:var(--e-4);max-width:46ch;opacity:.88} .filme .rot span,.filme .rot i{opacity:.72} .filme .rot::after{opacity:.24} /* --- 10d. Painel de trilho com foto ------------------------------------- A foto entra como fundo do painel e o texto pousa sobre ela, então a imagem vira elemento da composição em vez de ter destaque de fotografia. Alterna com painel chapado para o trilho não virar parede de imagem. --------------------------------------------------------- */ .painel.foto{color:var(--elevada);background:#14140f} .painel.foto picture,.painel.foto img{position:absolute;inset:0;z-index:0; width:100%;height:100%;object-fit:cover} .painel.foto::after{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(20,20,15,.34) 0%,rgba(20,20,15,.10) 30%, rgba(20,20,15,.62) 72%,rgba(20,20,15,.90) 100%)} .painel.foto > *{position:relative;z-index:2} /* --- 11. Palco e fala --------------------------------------------------- Uma tela inteira com uma frase só, que se monta palavra por palavra conforme a pessoa rola. O JS envolve cada palavra num .pal. --------- */ .palco{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:grid;place-items:center; padding-block:var(--e-7);padding-inline:var(--gut)} .palco.verde{background:var(--verde);color:var(--elevada)} .palco.escura{background:var(--tinta);color:var(--elevada)} /* O conteúdo do palco fica centralizado na página, como na peça: a frase dividindo o mesmo eixo da mandala. */ .ato{position:relative;z-index:2;width:100%;text-align:center} .fala{ font-family:var(--display);font-weight:250;letter-spacing:-.025em;line-height:1.08; font-size:clamp(32px,5.6vw,86px);max-width:18ch;text-wrap:balance; margin-inline:auto; } .fala.pequena{font-size:clamp(23px,3.4vw,50px);max-width:26ch;margin-inline:auto} .pal{display:inline-block;overflow:hidden;vertical-align:top} .pal > span{display:inline-block;will-change:transform} /* --- 12. Cena: foto de largura inteira com o texto por cima ------------- Sem trava de rolagem. A trava existe no trilho, onde prender a tela é o próprio mecanismo do componente. Aqui ela parecia defeito. ---------- */ .cena{position:relative} .cena-fix{position:relative;overflow:hidden; min-height:clamp(440px,74vh,780px);min-height:clamp(440px,74svh,780px)} .cena-fix img,.cena-fix video,.cena-fix picture{position:absolute;inset:0; width:100%;height:100%;object-fit:cover;will-change:transform} .cena-veu{position:absolute;inset:0;z-index:2; background:linear-gradient(90deg,rgba(20,20,15,.80) 0%,rgba(20,20,15,.22) 48%,rgba(20,20,15,0) 72%)} .cena-txt{position:absolute;inset:0;z-index:3;display:grid;align-content:center; padding-block:clamp(44px,8vh,90px);color:var(--elevada)} .cena-txt .bloco{max-width:34ch;max-height:100%} /* No celular a cena deixa de ser texto sobre foto. Numa tela estreita e alta, a janela vira quase um retrato e uma foto deitada perde dois terços da área. Aqui a foto fica numa janela 4:3, que é o recorte que ela aguenta, e o texto desce para fundo sólido, onde também lê melhor do que sobre imagem. */ @media (max-width:760px){ .cena-fix{min-height:0;overflow:visible;display:grid;grid-template-rows:auto auto} .cena-fix > picture,.cena-fix > img,.cena-fix > video{position:relative;inset:auto; aspect-ratio:4/3;width:100%;height:100%} .cena-veu{display:none} .cena-txt{position:relative;inset:auto;background:var(--tinta);color:var(--elevada); padding:var(--e-5) var(--gut) clamp(34px,7vw,52px)} .cena-txt .bloco{max-width:none} } /* ---------- foto inteira no celular ---------------------------------- Numa foto deitada cujo assunto ocupa a largura toda, recortar para caber numa janela alta come o assunto: na foto da mãe e da filha em chamada de vídeo, o que sai são os pés das duas, que é o encontro da imagem. Nesses casos a foto aparece inteira, com as bordas laterais encostando nos limites da tela, e o texto sobe, respeitando a regra de e-5 entre imagem e texto. Isto é uma exceção marcada à mão, e não o padrão. Foto com folga, como a do hero do index, continua recortando: ali o corte não custa assunto nenhum e a janela cheia vale mais. Marcação: class="inteira" no contêiner que segura a foto. */ @media (max-width:760px){ /* A classe vem escrita duas vezes de propósito. * * `.inteira` e `.sangria` pesam igual na cascata, e quem pesa igual é * decidido por ordem no arquivo. Como `.sangria` está 50 linhas abaixo, * ela ganhava: a imagem continuava `absolute` dentro de um de * altura automática, e elemento absoluto não dá altura ao pai. O * ficava com zero, a foto com zero, e a seção virava um * retângulo chapado da cor do fundo no /pratica-de-yoga. * * Dobrar a classe dobra o peso, e a regra passa a ganhar onde quer que * esteja no arquivo. Sem isso, o próximo bloco de CSS escrito no fim * derruba o recorte de novo, e ninguém vai lembrar por quê. * * O `position:relative` na imagem de dentro do é a outra * metade: sem ele o continua sem altura mesmo ganhando o * resto da disputa. */ .inteira.inteira{aspect-ratio:auto;min-height:0;height:auto} .inteira.inteira > picture,.inteira.inteira > img{position:relative;inset:auto; aspect-ratio:auto;width:100%;height:auto;display:block} .inteira.inteira img{position:relative;inset:auto; width:100%;height:auto;object-fit:fill;object-position:50% 50%} } .cena-txt h2{font-size:clamp(25px,3.5vw,50px);font-weight:250} .cena-txt p{margin-top:16px;font-size:clamp(14px,.95vw,16.5px);line-height:1.6;opacity:.86;max-width:38ch} @media (max-width:760px){ .cena-veu{background:linear-gradient(180deg,rgba(20,20,15,.30) 0%,rgba(20,20,15,.72) 58%,rgba(20,20,15,.88) 100%)} .cena-txt{align-content:end} } /* --- 13. Trilho horizontal --------------------------------------------- A seção prende a tela e a linha anda para o lado. A altura da seção vem do scrollWidth da linha, calculada pelo JS. ------------------------- */ /* O fundo escuro aqui não é decoração, é remendo de uma coisa que o celular faz: `100svh` é a altura da tela COM a barra de endereço à mostra, e quando ela se recolhe na rolagem a tela fica maior que o painel grudado. Sobrava uma faixa do fundo da página embaixo, branca. Pintada da cor dos painéis, a faixa deixa de existir aos olhos. Trocar para `dvh` resolveria a altura, mas a altura mudaria durante a rolagem e o trilho horizontal é medido pelo ScrollTrigger uma vez. */ .trilho{position:relative;background:#14140f} .trilho-fix{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center} /* Segurar o dedo na tela é gesto de jogo, não de seleção de texto. Sem isto o celular abre a alça de seleção e o menu de copiar em cima do jogo justamente quando a criança está jogando. */ .palco-jogo,.palco-jogo *{-webkit-user-select:none;user-select:none; -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent} .trilho-linha{display:flex;height:100%;will-change:transform} .painel{ flex:0 0 clamp(300px,52vw,540px);height:100%; display:grid;grid-template-rows:auto 1fr auto;gap:18px; padding:clamp(34px,5vw,76px);position:relative;overflow:hidden; } .painel > .p-topo{position:relative;z-index:2;display:flex;align-items:baseline;gap:16px} .painel > .p-meio{position:relative;z-index:2;align-self:center} .painel > .p-pe{position:relative;z-index:2;height:clamp(38px,6.5vh,68px);opacity:.55;overflow:hidden} .painel .num{font-family:var(--display);font-size:clamp(34px,4.4vw,64px);font-weight:200;opacity:.32;line-height:1} .painel h3{font-size:clamp(28px,3.2vw,46px);font-weight:280;max-width:11ch} .painel p{margin-top:18px;font-size:clamp(15px,1.15vw,18px);line-height:1.6;max-width:34ch;opacity:.88} /* No celular cada painel ocupa a largura inteira, porque o recorte que convida no desktop corta a frase no meio na tela pequena. */ @media (max-width:760px){.painel{flex:0 0 100vw}} /* --- 14. Sangria: imagem sozinha, com deriva lenta ---------------------- */ .sangria{position:relative;height:96vh;height:96svh;overflow:hidden;background:#14140f} .sangria img,.sangria video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform} .sangria::after{content:'';position:absolute;inset:0;z-index:2; background:linear-gradient(180deg,rgba(20,20,15,.18) 0%,rgba(20,20,15,0) 34%,rgba(20,20,15,.58) 100%)} .sangria .selo{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(24px,5vh,48px); z-index:3;max-width:34ch;color:var(--elevada)} .sangria .selo p{font-size:var(--t--1);line-height:1.5;opacity:.82;margin-top:8px} /* --- 15. Galeria de público, com parallax ------------------------------- */ .publicos{display:grid;grid-template-columns:1fr;gap:2px} @media (min-width:820px){.publicos{grid-template-columns:repeat(3,1fr)}} .publico{position:relative;overflow:hidden;background:#14140f; height:clamp(420px,86vh,900px);height:clamp(420px,86svh,900px)} .publicos.baixos .publico{height:clamp(340px,54vh,600px);height:clamp(340px,54svh,600px)} .publico img{width:100%;height:100%;object-fit:cover;will-change:transform;scale:1.14} /* No celular a porta vira quase um retrato: 390 de largura por 726 de altura, onde uma foto deitada de 3:2 perde 64% da área, e a folga de 14% do paralaxe come mais um pedaço. Aqui a janela volta para 5:4, que custa 17%, e o paralaxe desliga: numa tela de dedo ele quase não aparece e cobra caro em imagem. */ @media (max-width:819px){ .publico{height:auto;aspect-ratio:5/4} .publico img{scale:1} } .publico .leg{position:absolute;inset:auto 0 0 0;z-index:2;color:var(--elevada); padding:clamp(20px,2.4vw,32px); background:linear-gradient(180deg,rgba(20,20,15,0),rgba(20,20,15,.78))} .publico .leg h3{font-size:clamp(24px,2.4vw,36px);font-weight:300} .publico .leg p{margin-top:8px;font-size:var(--t--1);opacity:.84;max-width:30ch} .publico .leg a{text-decoration:none} .publico a.cobre::after{content:'';position:absolute;inset:0;z-index:3} .publico:hover img{scale:1.2} .publico img{transition:scale .9s var(--ease-saida)} /* --- 15b. Componentes de página de informação -------------------------- Estes são do /sobre e das páginas de serviço, e de propósito não são os da home. A home é cinema de tela cheia; estas páginas são editoriais e densas, e a diferença entre elas precisa se ver. ------------------- */ /* Ficha: os números que respondem a pergunta antes de o texto começar. */ .ficha{display:grid;gap:1px;background:var(--fio); border-block:1px solid var(--fio);margin-top:clamp(30px,4vw,56px)} @media (min-width:560px){.ficha{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.ficha{grid-template-columns:repeat(4,1fr)}} .ficha > div{background:var(--fundo);padding:clamp(22px,2.6vw,34px) var(--e-4)} .ficha b{display:block;font-family:var(--display);font-weight:200; font-size:clamp(34px,3.4vw,52px);line-height:1;font-variant-numeric:tabular-nums} .ficha span{display:block;margin-top:var(--e-3);font-size:10.5px;letter-spacing:.26em; text-transform:uppercase;font-weight:800;opacity:.55;line-height:1.5} /* Linha do tempo vertical. O trilho horizontal é da home. */ .tempo{margin-top:clamp(30px,4vw,56px);border-top:1px solid var(--fio)} .marco{display:grid;grid-template-columns:1fr;gap:var(--e-2); padding-block:clamp(18px,2.2vw,28px);border-bottom:1px solid var(--fio)} @media (min-width:680px){ .marco{grid-template-columns:132px 34px 1fr;gap:var(--e-4);align-items:baseline} } .marco time{font-size:var(--t--1);font-weight:800;letter-spacing:.06em; font-variant-numeric:tabular-nums;opacity:.5;white-space:nowrap} .marco .tra{display:none;width:30px;height:3px;background:var(--acao);align-self:center; clip-path:polygon(0 0,100% 38%,100% 62%,0 100%)} @media (min-width:680px){.marco .tra{display:block}} .marco b{display:block;font-family:var(--display);font-weight:300; font-size:var(--t-1);line-height:1.2} .marco p{margin-top:5px;font-size:var(--t--1);opacity:.78;max-width:56ch} .marco.forma b{color:var(--acao)} .marco.forma .tra{background:var(--caramelo)} /* Faixa de macro: imagem abstrata de um lado, texto do outro. */ .macro{position:relative;display:grid;grid-template-columns:1fr; background:var(--tinta);color:var(--elevada)} @media (min-width:860px){.macro{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .macro .foto{position:relative;min-height:clamp(300px,50vh,560px);min-height:clamp(300px,50svh,560px)} .macro .foto picture,.macro .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .macro .txt{display:flex;flex-direction:column;justify-content:center; padding:clamp(40px,6vw,92px) var(--gut)} .macro h2{font-weight:250;max-width:16ch} .macro p{margin-top:var(--e-4);max-width:44ch;opacity:.86} /* Lista de instituições, em vez de cartão com foto. */ .instituicoes{margin-top:clamp(30px,4vw,56px);border-top:1px solid var(--fio)} .inst{display:grid;grid-template-columns:1fr;gap:var(--e-2); padding-block:clamp(18px,2.2vw,26px);border-bottom:1px solid var(--fio)} @media (min-width:760px){ .inst{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:var(--e-5);align-items:baseline} } .inst b{font-family:var(--display);font-weight:300;font-size:var(--t-2);line-height:1.1} .inst span{font-size:var(--t--1);opacity:.78} .inst time{font-size:var(--t--2);letter-spacing:.1em;opacity:.5; font-variant-numeric:tabular-nums;white-space:nowrap} /* --- 15c. Componentes das páginas de serviço -------------------------- Cada página de serviço tem a sua forma. A home é cinema, o /sobre é editorial, e aqui entram os dispositivos que respondem "como funciona": comparação de formatos, sequência de etapas e a narrativa em ziguezague. Nenhum deles aparece nas duas primeiras páginas. ------------------ */ /* Comparação de formatos: três colunas que se leem de uma vez. */ .formatos{display:grid;gap:1px;background:var(--fio); border-block:1px solid var(--fio);margin-top:clamp(30px,4vw,56px)} @media (min-width:820px){.formatos{grid-template-columns:repeat(3,1fr)}} .formato{background:var(--fundo);padding:clamp(26px,3vw,42px) clamp(22px,2.4vw,32px); display:flex;flex-direction:column;gap:var(--e-3)} .formato .mini{opacity:.5} .formato h3{font-size:var(--t-2);font-weight:300} .formato p{font-size:var(--t--1);opacity:.82;flex:1} .formato dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--e-3); margin-top:var(--e-4);padding-top:var(--e-4);border-top:1px solid var(--fio);font-size:var(--t--2)} .formato dt{opacity:.5;white-space:nowrap} .formato dd{font-weight:700} /* Sequência de etapas: o que acontece numa aula, em ordem. */ .etapas{counter-reset:etapa;margin-top:clamp(30px,4vw,56px);display:grid;gap:1px;background:var(--fio)} @media (min-width:700px){.etapas{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.etapas{grid-template-columns:repeat(4,1fr)}} .etapa{background:var(--fundo);padding:clamp(24px,2.8vw,38px) clamp(20px,2.2vw,30px); position:relative;display:flex;flex-direction:column;gap:var(--e-3)} .etapa::before{counter-increment:etapa;content:counter(etapa,decimal-leading-zero); font-family:var(--display);font-size:clamp(28px,3vw,44px);font-weight:200; opacity:.28;line-height:1;font-variant-numeric:tabular-nums} .etapa b{font-family:var(--display);font-weight:300;font-size:var(--t-1);line-height:1.2} .etapa p{font-size:var(--t--1);opacity:.8} /* Ziguezague: foto de um lado, texto do outro, alternando a cada linha. É a forma de contar um processo em etapas grandes. */ .zigue{display:grid;gap:2px;background:var(--fio)} .zigue > .par{display:grid;grid-template-columns:1fr;background:var(--fundo)} /* A coluna da foto é menor que a do texto. Com as duas iguais, o quadrado ficava com 713px de altura e sobravam 200px de ar em cima e embaixo do texto. Assim o quadrado encolhe e o texto respira certo. */ @media (min-width:880px){ .zigue > .par{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)} } /* Moldura quadrada. Com altura livre a caixa ficava em 1,66 e a foto da praticante em casa, que é quase quadrada, perdia 35% em cima e embaixo. O quadrado custa 33% nas duas deitadas, mas nelas o assunto está no centro e o que sai é fundo. Também dá ritmo às três linhas, que antes eram três faixas iguais. */ .zigue .foto{position:relative;aspect-ratio:1/1;background:#14140f} @media (max-width:879px){ /* empilhado, o quadrado empurra o texto para muito longe da dobra */ .zigue .foto{aspect-ratio:4/3} } .zigue .foto picture,.zigue .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .zigue .txt{display:flex;flex-direction:column;justify-content:center; padding:clamp(34px,5vw,76px) clamp(26px,4vw,64px)} /* Empilhado, a foto encosta no texto e o padding de cima vira o vão entre os dois. Lado a lado não encosta, e aí o padding volta a ser respiro interno do bloco. */ @media (max-width:879px){ .zigue .txt{padding-top:var(--e-5)} } .zigue .txt h3{font-size:clamp(24px,2.6vw,38px);font-weight:280;max-width:18ch} .zigue .txt p{margin-top:var(--e-4);max-width:44ch;opacity:.84} /* A foto vem primeiro no HTML em todas as linhas, porque na coluna única do celular a imagem tem que abrir cada etapa. O zigue-zague acontece só no desktop, invertendo a ordem visual das linhas pares. */ @media (min-width:880px){ .zigue > .par:nth-child(even) .foto{order:2} .zigue > .par:nth-child(even) .txt{order:1} /* O `order` troca a ordem dos itens, não a largura das trilhas. Sem inverter as trilhas junto, na linha par a foto caía na coluna larga e ficava maior que as outras duas. */ .zigue > .par:nth-child(even){grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)} } /* Perguntas diretas, em lista aberta. Nada de acordeão: esconder resposta numa página que existe para responder é trabalhar contra si. */ .perguntas{margin-top:clamp(30px,4vw,56px);border-top:1px solid var(--fio)} .pergunta{padding-block:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--fio); display:grid;grid-template-columns:1fr;gap:var(--e-2)} @media (min-width:760px){.pergunta{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:var(--e-5)}} .pergunta b{font-family:var(--display);font-weight:300;font-size:var(--t-1);line-height:1.25} .pergunta p{font-size:var(--t--1);opacity:.82;max-width:52ch} /* --- 16. Espaço marcado de foto ----------------------------------------- Onde a fotografia vai entrar enquanto ela não existe. Ocupa a proporção final, então trocar por não mexe em mais nada. ------------ */ .slot{ position:relative;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:var(--e-2); padding:var(--e-5) var(--e-4);text-align:center; border-radius:var(--r);border:1.5px dashed var(--fio-forte); min-height:fit-content;overflow:hidden; background:repeating-linear-gradient(-45deg,transparent 0 8px, rgba(35,35,29,0.05) 8px 9px),var(--superficie); } .slot .etiqueta{font-size:var(--t--1);font-weight:700;opacity:.76;max-width:28ch;line-height:1.4} .slot .formato{font-size:var(--t--2);letter-spacing:.14em;text-transform:uppercase;opacity:.5;font-variant-numeric:tabular-nums} .slot::before{ content:'foto a entrar';position:absolute;top:var(--e-3);left:var(--e-3); font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--tinta);background:var(--caramelo);padding:3px 9px;border-radius:var(--r-pilula); } .sec.verde .slot,.sec.escura .slot,.sangria .slot{ border-color:rgba(252,251,248,0.32);color:var(--elevada); background:repeating-linear-gradient(-45deg,transparent 0 8px, rgba(252,251,248,0.1) 8px 9px),rgba(20,20,15,.34); } /* --- 17. Topo, menu e rodapé -------------------------------------------- */ .topo{ position:sticky;top:0;z-index:50;height:var(--altura-topo);display:flex;align-items:center; background:rgba(247,248,246,0.88); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--fio); } .topo .wrap{display:flex;align-items:center;gap:var(--e-5)} .topo .marca{flex:none;color:var(--tinta);display:flex;align-items:center; /* alvo de toque de 44px sem mudar o tamanho do logotipo */ min-height:44px;padding-block:9px} .topo .marca img{height:26px;width:auto} .nav{display:none;margin-left:auto;gap:var(--e-4);align-items:center} @media (min-width:1080px){.nav{display:flex}} .nav a{font-size:var(--t--1);text-decoration:none;opacity:.7;position:relative; /* o menu aparece a partir de 1080px, o que inclui tablet em paisagem, onde estes links são tocados com o dedo e não clicados */ display:inline-flex;align-items:center;min-height:44px; transition:opacity var(--d-curta) var(--ease-saida)} .nav a:hover,.nav a[aria-current="page"]{opacity:1} /* o traço fica preso ao texto, e não ao fundo da caixa de 44px */ .nav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0; bottom:calc(50% - .92em);height:3px; background:var(--acao);clip-path:polygon(0 0,100% 38%,100% 62%,0 100%)} /* 44px é o mínimo que o dedo acerta, e vale também no desktop: o mouse de quem tem 70 anos não é mais firme que o de quem tem 30. */ .nav .bt{padding:12px 22px;font-size:var(--t--2);min-height:44px; box-shadow:0 4px 0 var(--acao-sombra);opacity:1} .nav .bt:active{transform:translateY(4px);box-shadow:0 0 0 var(--acao-sombra)} .menu-btn{margin-left:auto;display:flex;align-items:center;gap:var(--e-2); min-height:44px;padding:0 var(--e-3);font-size:var(--t--1);font-weight:700;opacity:.8} @media (min-width:1080px){.menu-btn{display:none}} .menu-btn .barras{display:grid;gap:4px;width:20px} .menu-btn .barras i{display:block;height:2px;background:currentColor;border-radius:2px} .menu{position:fixed;inset:var(--altura-topo) 0 0;z-index:49;background:var(--papel); padding:var(--e-5) var(--gut) var(--e-7);overflow-y:auto;display:flex;flex-direction:column;gap:var(--e-2)} /* o display:flex acima vence o padrão do atributo, então o hidden precisa ser dito de novo com mais peso que a classe */ .menu[hidden]{display:none} @media (min-width:1080px){.menu{display:none}} .menu a{display:flex;align-items:center;min-height:var(--alvo-min);padding:var(--e-3) 0; font-family:var(--display);font-size:var(--t-2);font-weight:300;text-decoration:none; border-bottom:1px solid var(--fio)} .menu a[aria-current="page"]{color:var(--acao)} /* `.menu a` tem mais peso que `.bt` e ganhava a disputa do tamanho da letra: o botão do WhatsApp herdava o corpo grande do menu e somava o caixa-alta e o espaçamento de .18em do botão. Virava um bloco de duas linhas. Aqui o tamanho e a família voltam a ser os do botão. */ .menu .bt{margin-top:var(--e-4);border-bottom:none;justify-content:center; font-family:var(--texto);font-size:12px} .rodape{position:relative;background:var(--tinta);color:var(--elevada);padding-block:var(--e-7) var(--e-5);overflow:hidden} .rodape a{text-decoration:none;opacity:.78} .rodape a:hover{opacity:1} .rodape-grade{display:grid;gap:var(--e-6);grid-template-columns:1fr} @media (min-width:760px){.rodape-grade{grid-template-columns:1.4fr 1fr 1fr}} .rodape h4{font-family:var(--texto);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase; font-weight:800;opacity:.5;margin-bottom:var(--e-3)} .rodape ul{display:grid;gap:var(--e-2)} .rodape ul a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t--1)} .rodape .fim{margin-top:var(--e-7);padding-top:var(--e-4); border-top:1px solid rgba(252,251,248,0.18); display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-5);font-size:var(--t--2);opacity:.55} /* --- 18. Barra de progresso e seta de continua -------------------------- */ .prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60; background:var(--caramelo);transform:scaleX(0);transform-origin:0 50%} .continua{position:fixed;left:50%;bottom:clamp(18px,3.5vh,34px);translate:-50% 0;z-index:40; display:grid;place-items:center;width:44px;height:44px;border-radius:50%; background:rgba(35,35,29,0.8);color:var(--elevada); opacity:0;pointer-events:none;transition:opacity .45s var(--ease-saida)} .continua.visivel{opacity:1} .continua svg{width:16px;height:16px} .continua.lado svg{rotate:-90deg} /* --- 19. Estados de movimento ------------------------------------------ O escondido só existe quando o JS assumiu, e some sozinho se o motion.js não subir em 2,5s. Sem isso, um script bloqueado entregaria um site em branco, que é pior do que um site sem animação. -------------------- */ html.js [data-entra]{opacity:0;transform:translateY(24px)} html.js-pronto [data-entra]{will-change:transform,opacity} html.motion-falhou [data-entra]{opacity:1 !important;transform:none !important} html.motion-falhou .pal > span{transform:none !important;opacity:1 !important} /* Resposta desenhada, e não movimento desligado: a página chega inteira, com os trilhos horizontais virando pilha vertical. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important} [data-entra]{opacity:1 !important;transform:none !important} .pal > span{transform:none !important;opacity:1 !important} .bt:active{transform:none} .trilho{height:auto !important} .trilho-fix{position:relative;height:auto;display:block} .trilho-linha{flex-direction:column;transform:none !important} .painel{flex:none;width:100%;height:auto;min-height:60vh;min-height:60svh} .palco{min-height:auto;padding-block:var(--respiro)} .continua{display:none} } /* O 60+ não recebe movimento contínuo em área grande. */ [data-territorio="60"] [data-loop]{animation:none !important} /* --- 20. Impressão ------------------------------------------------------ */ @media print{ .topo,.rodape,.acoes,.pula,.prog,.continua,.menu{display:none} body{background:#fff;color:#000;font-size:11pt} [data-entra]{opacity:1;transform:none} .trilho{height:auto} .trilho-fix{position:relative;height:auto} } /* ==================================================================== */ /* PÁGINA DE ORGANIZAÇÕES */ /* ==================================================================== */ /* Frentes em ficha larga. Quem lê esta página decide por orçamento, e a pergunta que ele tem é sempre a mesma: o que eu preciso ter e o que vem junto. Então cada frente responde as duas em colunas paralelas, uma ao lado da outra, sem o leitor precisar procurar. */ .frentes{border-top:1px solid var(--fio)} .frente{border-bottom:1px solid var(--fio);padding-block:clamp(34px,4.6vw,66px); display:grid;gap:clamp(20px,3vw,44px)} @media (min-width:900px){.frente{grid-template-columns:minmax(0,7fr) minmax(0,11fr)}} .frente-nome{display:flex;flex-direction:column;gap:var(--e-3)} .frente-nome .num{font-family:var(--display);font-size:var(--t-1);opacity:.42; font-variant-numeric:tabular-nums;line-height:1} .frente-nome h3{font-size:clamp(25px,2.9vw,42px);font-weight:280;line-height:1.04;max-width:14ch} .frente-nome .quem{font-size:var(--t--2);letter-spacing:.2em;text-transform:uppercase; font-weight:800;color:var(--acao);opacity:.9} .frente-corpo > p{max-width:52ch;opacity:.86} .frente-troca{margin-top:clamp(22px,2.6vw,34px);display:grid;gap:clamp(18px,2.4vw,34px)} @media (min-width:620px){.frente-troca{grid-template-columns:1fr 1fr}} .frente-troca h4{font-size:var(--t--2);letter-spacing:.2em;text-transform:uppercase; font-weight:800;opacity:.55;margin-bottom:var(--e-3)} .frente-troca ul{list-style:none;display:grid;gap:9px} .frente-troca li{position:relative;padding-left:20px;font-size:var(--t--1);line-height:1.55;opacity:.86} .frente-troca li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px; background:var(--acao);opacity:.7} /* Onde já aconteceu. Prova social sem depoimento, que é o que existe hoje. Cada linha traz o vínculo, o período e o que era a aula. */ .provas{margin-top:clamp(26px,3.4vw,48px);border-top:1px solid currentColor} .prova{border-bottom:1px solid currentColor;padding-block:clamp(18px,2.2vw,30px); display:grid;gap:6px 26px} @media (min-width:760px){.prova{grid-template-columns:minmax(0,5fr) 9ch minmax(0,10fr);align-items:baseline}} .prova b{font-family:var(--display);font-size:var(--t-1);font-weight:300;line-height:1.1} .prova .quando{font-size:var(--t--2);letter-spacing:.14em;text-transform:uppercase; font-weight:800;opacity:.6;font-variant-numeric:tabular-nums} .prova p{font-size:var(--t--1);opacity:.82;line-height:1.55} /* ==================================================================== */ /* A BOIA DO YOGA KIDS */ /* ==================================================================== */ /* Uma faixa pode ser rolada por cima sem ser vista. Um elemento que fica não pode, e a exigência aqui era garantia: quem entra no site tem que descobrir que existe uma página infantil. Então o Nelson Mandala aparece depois que a capa sai da tela, fica num canto respirando, e se esconde sozinho quando a porta do Yoga Kids entra em cena, porque ali ele já cumpriu o trabalho. Tem botão de fechar, e fechado fica fechado até a aba ser aberta de novo: elemento fixo sem saída é hostil, não é insistência. */ .boia{ /* Canto superior esquerdo, logo abaixo do cabeçalho. No rodapé da tela ele desaparecia contra fundo claro e ficava fora do campo de leitura. Aqui ele entra no caminho do olho, que percorre a página de cima para baixo e da esquerda para a direita. O `top` desce a altura do cabeçalho para não encavalar nele. */ position:fixed;z-index:48;left:var(--gut); top:calc(var(--altura-topo) + clamp(14px,2.2vh,24px)); display:flex;align-items:center;gap:12px; padding:10px 20px 10px 10px;border-radius:999px; color:var(--tinta);text-decoration:none; /* O contorno é do botão, e traz as quatro cores do Yoga Kids numa volta só. Dois fundos empilhados: o claro preenche até a borda (padding-box) e o degradê cônico pinta só a faixa da borda (border-box). Com a borda transparente, o que aparece na moldura é o degradê. */ border:3.5px solid transparent; background: linear-gradient(var(--elevada),var(--elevada)) padding-box, conic-gradient(from 210deg, var(--rosa) 0deg, var(--sol) 90deg, var(--agua) 180deg, var(--roxo) 270deg, var(--rosa) 360deg) border-box; /* Sombra de elevação, e não a sombra dura de botão que o resto do site usa. Aqui a metáfora é outra: o botão não está afundando na página quando pressionado, está pairando acima dela. Sombra dura numa peça que sobe e desce fica presa nela e denuncia o truque. */ box-shadow:0 6px 14px rgba(35,35,29,.20), 0 1px 3px rgba(35,35,29,.12); /* fora da tela e invisível até o JS chamar */ opacity:0;transform:translateY(-20px) scale(.94);pointer-events:none; transition:opacity .5s var(--ease-saida), transform .5s var(--ease-saida)} .boia[hidden]{display:none} html.boia-a-vista .boia{opacity:1;transform:none;pointer-events:auto} .boia .flor{width:40px;height:40px;flex:none; transition:rotate .5s cubic-bezier(.34,1.56,.64,1), scale .5s cubic-bezier(.34,1.56,.64,1)} .boia:hover .flor{rotate:14deg;scale:1.14} .boia:active{scale:.97;box-shadow:0 3px 8px rgba(35,35,29,.22)} /* o lockup horizontal do Yoga Kids, que já traz as cores da camada infantil e diz o nome melhor do que texto composto na hora */ /* A relação entre os dois é a de um logotipo: o mascote é o ícone e o lockup é a assinatura. Com a flor a três vezes a altura da palavra, o nome sumia. Aqui a flor fica em torno de 1,9 vez a altura do lockup, que é a proporção usual entre ícone e assinatura, e os dois passam a ser lidos como uma peça só. */ .boia .lockup{width:clamp(128px,11.7vw,155px);height:auto;flex:none} /* Flutuar. A animação usa `translate`, que é propriedade própria e não mexe no `transform`, que a entrada já ocupa. Se as duas disputassem a mesma propriedade, uma cancelaria a outra. A flor perdeu o balanço dela: dois ritmos ao mesmo tempo brigam, e o que se quer é a peça subindo e descendo como uma só. */ @media (prefers-reduced-motion:no-preference){ html.boia-a-vista .boia{animation:boia-flutua 5.2s ease-in-out infinite} } /* A sombra abre e amolece conforme a peça sobe, que é o que faz o olho ler voo em vez de tremor. */ @keyframes boia-flutua{ 0%,100%{translate:0 0; box-shadow:0 6px 14px rgba(35,35,29,.20), 0 1px 3px rgba(35,35,29,.12)} 50%{translate:0 -8px; box-shadow:0 17px 26px rgba(35,35,29,.15), 0 3px 6px rgba(35,35,29,.09)} } /* o X é um botão separado, com alvo próprio de 44px */ /* Com a boia no alto, o X desce para o canto de baixo à direita: em cima ele bateria no cabeçalho. */ .boia-fecha{position:absolute;bottom:-13px;right:-13px; width:var(--alvo-min);height:var(--alvo-min); display:grid;place-items:center;border:0;background:none;cursor:pointer; color:var(--tinta);opacity:.5;padding:0} .boia-fecha:hover,.boia-fecha:focus-visible{opacity:1} .boia-fecha i{display:grid;place-items:center; width:24px;height:24px;border-radius:999px; background:var(--elevada);box-shadow:0 2px 8px rgba(35,35,29,.24); font-style:normal;font-size:14px;line-height:1} @media (max-width:620px){ .boia{left:12px;right:auto;bottom:auto; top:calc(var(--altura-topo) + 10px); padding:8px 15px 8px 8px;gap:10px;border-width:3px} .boia .flor{width:31px;height:31px} .boia .lockup{width:108px} } /* ==================================================================== */ /* O CADERNO BORA */ /* ==================================================================== */ /* Estas páginas não existem como arquivo: são montadas no servidor a cada requisição, em functions/caderno.js e functions/caderno/[slug].js. O CSS mora aqui junto com o resto para não haver dois sistemas. */ /* --- abertura da lista ------------------------------------------------ */ .cad-abertura{background:var(--papel); padding-block:clamp(40px,7vh,88px) clamp(28px,4vh,52px)} .cad-abertura h1{font-size:clamp(40px,6vw,86px);font-weight:250;line-height:.98; letter-spacing:-.026em;margin-top:var(--e-3)} .cad-abertura .lead{margin-top:var(--e-4);max-width:54ch} /* --- a lista ---------------------------------------------------------- */ .cad-lista{display:grid;gap:2px;background:var(--fio)} .cad-item{background:var(--papel);display:grid; transition:background var(--d-curta) var(--ease-saida)} @media (min-width:760px){ /* a capa, quando existe, ocupa a coluna estreita da esquerda */ .cad-item{grid-template-columns:minmax(0,4fr) minmax(0,9fr);align-items:stretch} .cad-item:not(:has(.cad-capa)){grid-template-columns:1fr} } .cad-item:hover{background:var(--elevada)} .cad-capa{position:relative;overflow:hidden;background:#14140f;aspect-ratio:4/3} /* o link cobre a moldura inteira: o alvo é a foto toda, não um pedaço */ .cad-capa > a{display:block;width:100%;height:100%} .cad-capa img{width:100%;height:100%;object-fit:cover; transition:transform var(--d-media, .5s) var(--ease-saida, ease)} @media (hover:hover){.cad-item:hover .cad-capa img{transform:scale(1.03)}} .cad-corpo{padding:clamp(24px,3vw,44px)} .cad-topo{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-3); margin-bottom:var(--e-3)} .cad-topo time,.cad-fonte,.cad-leitura{font-size:var(--t--2);letter-spacing:.14em; text-transform:uppercase;font-weight:800;opacity:.5} .cad-selo{font-size:var(--t--2);letter-spacing:.14em;text-transform:uppercase; font-weight:800;padding:5px 11px;border-radius:999px; background:var(--verde);color:var(--elevada)} .cad-selo.externo{background:var(--caramelo);color:var(--tinta)} .cad-item h2{font-size:clamp(25px,3vw,42px);font-weight:280;line-height:1.05; max-width:22ch;letter-spacing:-.018em} .cad-item h2 a{text-decoration:none} .cad-item h2 a:hover{color:var(--acao)} .cad-item p{margin-top:var(--e-3);max-width:58ch;opacity:.82;font-size:var(--t--1)} .cad-vazio{border-top:1px solid var(--fio);padding-top:clamp(28px,4vw,48px); max-width:56ch} .cad-vazio p:first-child{font-family:var(--display);font-weight:300; font-size:var(--t-2);line-height:1.15} .cad-vazio .cap{margin-top:var(--e-4)} /* --- um texto --------------------------------------------------------- */ .cad-cabeca{background:var(--papel); padding-block:clamp(30px,5vh,64px) var(--e-5)} /* O `wrap` desta cabeca e estreitado ate o leito de leitura para que o titulo comece exatamente onde o primeiro paragrafo comeca. Antes ele usava a largura cheia da pagina, e o resultado era um titulo recuado 105px a esquerda do texto que ele anuncia. */ .cad-cabeca > .wrap{max-width:calc(var(--leito) + var(--gut) * 2)} .cad-volta{display:inline-block;margin-bottom:var(--e-5);font-size:var(--t--2); letter-spacing:.2em;text-transform:uppercase;font-weight:800;opacity:.55; text-decoration:none;transition:opacity var(--d-curta) var(--ease-saida)} .cad-volta:hover{opacity:1} .cad-volta::before{content:'\2190';margin-right:10px} .cad-cabeca h1{font-size:clamp(33px,4.8vw,64px);font-weight:250;line-height:1.03; letter-spacing:-.024em} .cad-cabeca .lead{margin-top:var(--e-4)} /* A capa divide a largura com o video e o PDF: o leito mais 34%, centrado no mesmo eixo do texto. Ela sangrava de borda a borda, e numa pagina cujo resto e recuado isso lia como desalinho, nao como escolha. E nao ha mais proporcao fixa. Quem sobe a foto e o Rodrigo, de uma pasta que ninguem preparou para 16/9: forcar o corte comia um quarto da altura de qualquer retrato ou 3:2. A imagem entra na proporcao dela e so e cortada se passar da altura maxima. */ /* Quem entrega o respiro acima da capa e o padding da cabeca, e nao a margem daqui: os dois juntos davam 44+62, que e a soma dupla contra a qual o ESPACAMENTO.md avisa. Abaixo dela quem entrega e o padding do leito. Dos dois lados, --e-5: e imagem encostando em texto. */ .cad-capa-grande{margin:0 auto;background:#14140f;overflow:hidden; width:fit-content; max-width:min(calc(100% - var(--gut) * 2), calc(var(--leito) * 1.34))} .cad-capa-grande img{display:block;width:auto;max-width:100%;height:auto; max-height:72vh;object-fit:cover} /* O leito de leitura. Entre 65 e 75 caracteres por linha é a faixa em que o olho encontra o começo da linha seguinte sem procurar. Mais largo cansa, e nesta página o texto é o produto inteiro. A medida vai em rem, e não em ch, de propósito: `ch` é relativo à fonte de CADA elemento, então o mesmo `66ch` dava 752px num parágrafo de 19px e 1621px num título em Fraunces de 40px, e o título atravessava a página sobre uma coluna estreita. */ .cad-texto{--leito:45rem} .cad-leito{max-width:none} .cad-leito > *{max-width:var(--leito);margin-inline:auto} .cad-leito{padding-block:clamp(34px,5vh,72px)} .cad-capa-grande + .cad-leito{padding-top:var(--e-5)} /* O corpo do texto do Caderno e maior que o do resto do site, e isso e deliberado: as outras paginas sao vitrine, esta e leitura corrida. A largura da coluna e o tamanho da letra sao a mesma decisao tomada duas vezes. O que importa e quantos caracteres cabem numa linha: de 65 a 75 o olho acha o comeco da linha seguinte sozinho. Com 18,6px nos 45rem da coluna cabiam 85, que e sopa de letra; com 21px cabem 75. Estreitar a coluna resolveria a mesma conta, mas deixaria a pagina com cara de tira estreita, que foi a reclamacao original. */ .cad-leito p,.cad-leito li{font-size:clamp(18px, 0.55vw + 1.02rem, 21px)} .cad-leito p{margin-top:var(--e-4);line-height:1.72} .cad-leito p:first-child{margin-top:0} .cad-leito h2{font-family:var(--display);font-weight:300; font-size:clamp(26px,2.8vw,40px);line-height:1.1;letter-spacing:-.018em; margin-top:var(--e-6)} .cad-leito h3{font-family:var(--display);font-weight:300; font-size:clamp(21px,2.1vw,29px);line-height:1.15;margin-top:var(--e-6)} .cad-leito h2 + p,.cad-leito h3 + p{margin-top:var(--e-4)} .cad-leito ul,.cad-leito ol{margin-top:var(--e-4);padding-left:1.4em; display:grid;gap:var(--e-3)} .cad-leito li{line-height:1.66} .cad-leito blockquote{margin-top:var(--e-6);padding-left:clamp(18px,2.4vw,32px); border-left:3px solid var(--acao)} .cad-leito blockquote p{font-family:var(--display);font-weight:300; font-size:clamp(20px,2.2vw,30px);line-height:1.3;letter-spacing:-.014em; margin-top:0} .cad-leito a{color:inherit;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px; text-decoration-color:var(--acao)} .cad-leito a:hover{color:var(--acao)} /* figura e vídeo saem do leito e ocupam mais largura, porque imagem confinada a 66ch fica pequena demais para ser vista */ /* A moldura encolhe ate o tamanho do arquivo: `fit-content` impede que uma imagem pequena seja esticada. Quem sobe as fotos e o Rodrigo, de uma pasta que ninguem preparou, e a capa de 554px de um dos artigos estava sendo ampliada para 864 — 56% a mais do que existe no arquivo, o que borra. Imagem grande continua limitada pela largura de midia. */ .cad-leito .figura{margin:var(--e-5) auto 0;width:fit-content; max-width:min(100%, calc(var(--leito) * 1.34))} .cad-leito .video{margin:var(--e-5) auto 0; max-width:min(100%, calc(var(--leito) * 1.34))} .cad-leito .figura img{width:auto;max-width:100%;height:auto;display:block} .cad-leito .video{position:relative;aspect-ratio:16/9;background:#14140f} .cad-leito .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* O que vem DEPOIS da midia tambem precisa do respiro. Sem isto o paragrafo seguinte usava --e-4 e o video ficava com 62 em cima e 20 embaixo, colado no texto errado. */ .cad-leito .figura + *,.cad-leito .video + *,.cad-leito .cad-pdf + *{ margin-top:var(--e-5)} .cad-leito blockquote + *{margin-top:var(--e-6)} /* --- artigo de outro autor -------------------------------------------- */ .cad-ficha{display:grid;gap:var(--e-4);border-top:1px solid var(--fio); border-bottom:1px solid var(--fio);padding-block:var(--e-5)} @media (min-width:620px){.cad-ficha{grid-template-columns:1fr 1fr}} .cad-ficha b{display:block;font-size:var(--t--2);letter-spacing:.2em; text-transform:uppercase;font-weight:800;opacity:.55;margin-bottom:6px} .cad-ficha span{font-size:var(--t--1);line-height:1.5} .cad-pdf{margin:var(--e-6) auto 0;max-width:min(100%, calc(var(--leito) * 1.5))} .cad-pdf object{width:100%;height:min(82vh,1000px);border:1px solid var(--fio); background:var(--superficie);display:block} .cad-baixar{margin-top:var(--e-4);text-align:center} .cad-pe{background:var(--superficie); padding-block:clamp(34px,5vh,64px) clamp(40px,6vh,80px)} .cad-pe .cap{max-width:60ch}