/* =========================================================== ericcoutinho.com — a revista em dez páginas As nove primeiras páginas são as artes do Canva, exibidas sem recorte. A décima — os contatos — é a única montada em código. Regras de acabamento (padrão Rolex), as que se aplicam: 1. nenhum valor solto — cor e espaço só saem de token 2. uma curva de easing só: cubic-bezier(.23,1,.32,1), .3–.4s 3. revelação curta: 20px 5. ritmo vertical constante: mesma margem externa em tudo =========================================================== */ :root{ --primary: "Poppins", system-ui, -apple-system, sans-serif; --tracking-label: .22em; --fs-label: clamp(.62rem, .58rem + .14vw, .72rem); --fs-body: clamp(.82rem, .74rem + .28vw, 1rem); --fs-display: clamp(2.6rem, 1rem + 6.4vw, 7rem); /* cor em tripla RGB, para variar opacidade sem duplicar token */ --branco: 255 255 255; --preto: 0 0 0; --tinta: 17 17 17; /* a proporção das artes do Canva. Tudo depende dela. */ --arte-proporcao: 16 / 9; --outer-margin: 8vw; --v-space: clamp(3rem, 8vh, 7rem); --ease: cubic-bezier(.23,1,.32,1); } *{box-sizing:border-box} html{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;-webkit-text-size-adjust:100%} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:rgb(var(--preto));color:rgb(var(--branco)); font-family:var(--primary);font-weight:300;overflow-x:hidden} body.travado{overflow:hidden} img{display:block;max-width:100%} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .rotulo{font-size:var(--fs-label);letter-spacing:var(--tracking-label); text-transform:uppercase;opacity:.55;margin:0 0 2rem;font-weight:400} /* revelação: 20px, uma curva só */ .rev{opacity:0;transform:translateY(20px); transition:opacity .4s var(--ease), transform .4s var(--ease)} .rev.vis{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}} /* =========================================================== UMA PÁGINA DO CADERNO A arte aparece INTEIRA. Nunca `cover`: o texto está gravado no pixel, recortar é perder conteúdo. A largura é travada pela altura da janela para que a página caiba sem rolagem. =========================================================== */ .tela{position:relative;min-height:100dvh;display:flex; align-items:center;justify-content:center;background:rgb(var(--preto))} .arte{position:relative;margin:0; width:min(100%, calc(100dvh * 16 / 9)); aspect-ratio:var(--arte-proporcao)} .arte > picture{display:contents} .arte img{width:100%;height:100%;object-fit:contain} @media (max-width:820px){ :root{--outer-margin:7vw} /* no celular a página encolhe até a arte: nada de mar de preto em volta */ .tela--arte{min-height:auto} .arte{width:100%} } /* =========================================================== O GUIA — botão de índice e a folha que ele abre =========================================================== */ .guia__botao{position:fixed;top:clamp(1.1rem,2.6vh,2rem);left:var(--outer-margin); z-index:40;display:flex;align-items:center;gap:.7rem; background:none;border:0;padding:.4rem 0;cursor:pointer; font-family:var(--primary);color:rgb(var(--branco)); transition:color .4s var(--ease),opacity .4s var(--ease)} body[data-fundo="claro"] .guia__botao{color:rgb(var(--tinta))} .guia__fios{display:grid;gap:4px;width:1.4rem} .guia__fios i{display:block;height:1px;background:currentColor; transition:width .4s var(--ease)} .guia__fios i:last-child{width:60%} .guia__botao:hover .guia__fios i:last-child{width:100%} .guia__rotulo{font-size:var(--fs-label);letter-spacing:var(--tracking-label); text-transform:uppercase;font-weight:400;opacity:.75} .guia__botao:hover .guia__rotulo{opacity:1} body.travado .guia__botao{opacity:0;pointer-events:none} .guia{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column; justify-content:center;padding:var(--v-space) var(--outer-margin); background:rgb(var(--preto)/.97);color:rgb(var(--branco)); overflow-y:auto;opacity:0;transition:opacity .4s var(--ease)} /* Sem isto a folha fica invisível mas por cima de tudo, engolindo todo clique da página: `display:flex` do autor vence o [hidden] do navegador. */ .guia[hidden]{display:none} .guia{pointer-events:none} .guia.vis{opacity:1;pointer-events:auto} .guia__titulo{margin:0 0 clamp(1.5rem,4vh,3rem)} .guia__fechar{position:absolute;top:clamp(1.1rem,2.6vh,2rem);left:var(--outer-margin); width:1.4rem;height:1.4rem;background:none;border:0;padding:0;cursor:pointer; color:rgb(var(--branco))} .guia__fechar span{display:block;position:relative;width:100%;height:100%} .guia__fechar i{position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor} .guia__fechar i:first-child{transform:rotate(45deg)} .guia__fechar i:last-child{transform:rotate(-45deg)} .guia__lista{list-style:none;margin:0;padding:0; border-top:1px solid rgb(var(--branco)/.16)} .guia__lista a{display:grid;grid-template-columns:3.4rem 1fr auto;align-items:baseline; gap:clamp(.8rem,2vw,2rem);text-decoration:none;color:inherit; padding:clamp(.55rem,1.3vh,1rem) 0; border-bottom:1px solid rgb(var(--branco)/.16); transition:opacity .4s var(--ease)} .guia__lista a:hover,.guia__lista a:focus-visible{opacity:.55} .guia__num{font-size:var(--fs-label);letter-spacing:var(--tracking-label);opacity:.45} .guia__nome{font-size:clamp(1rem,.7rem + 1.1vw,1.7rem);font-weight:200; line-height:1.05;letter-spacing:-.01em} .guia__en{font-size:var(--fs-label);letter-spacing:var(--tracking-label); text-transform:uppercase;opacity:.4;text-align:right} @media (max-width:820px){ .guia__lista a{grid-template-columns:2.6rem 1fr} .guia__en{grid-column:2;text-align:left;margin-top:.3rem} } /* =========================================================== 01 — A CAPA Sem exceção: ela se comporta como as outras nove, no computador e no celular. Até 23/10/2026 havia aqui um bloco com o nome em texto real embaixo da arte, só no celular — herança da versão em código. O Eric pediu para tirar: o celular tem que ficar igual à web. O

e o resto do texto da capa seguem no bloco .sr, que é o que o Google e o leitor de tela leem. =========================================================== */ /* =========================================================== 10 — OS CONTATOS A única página em código. No computador ela ocupa o MESMO quadro 16:9 das artes, e as medidas saem do mockup que o Eric desenhou: grade de 108 a 1808 na horizontal e de 461 a 740 na vertical, num quadro de 1920x1080. Como o quadro é `container-type:size`, tudo aqui está em cqw/cqh — ou seja, em porcentagem do próprio quadro. É isso que faz o desenho bater em qualquer tamanho de janela. =========================================================== */ .t10{overflow:hidden} .t10__quadro{position:relative;width:min(100%, calc(100dvh * 16 / 9)); aspect-ratio:var(--arte-proporcao);container-type:size} .t10__rotulo{position:absolute;left:5.625cqw;top:18.12cqh;margin:0; font-size:.807cqw;letter-spacing:var(--tracking-label); text-transform:uppercase;font-weight:400} .t10__titulo{position:absolute;left:5.625cqw;top:20.81cqh;margin:0; font-size:7.708cqw;font-weight:200;line-height:1; letter-spacing:-.042em;text-transform:uppercase} .t10__canais{position:absolute;left:5.625cqw;top:42.69cqh; width:88.542cqw;height:25.83cqh;font-style:normal; display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr; border:1px solid rgb(var(--branco)/.32)} .t10__canal{display:flex;align-items:center;gap:2.19cqw; padding-left:2.68cqw;color:inherit;text-decoration:none; transition:background-color .4s var(--ease)} .t10__canal:nth-child(-n+2){border-bottom:1px solid rgb(var(--branco)/.32)} .t10__canal:nth-child(odd){border-right:1px solid rgb(var(--branco)/.32)} .t10__canal:hover,.t10__canal:focus-visible{background:rgb(var(--branco)/.05)} .t10__icone svg{width:2.865cqw;height:2.865cqw;display:block; fill:none;stroke:currentColor;stroke-width:1.1; stroke-linecap:round;stroke-linejoin:round;opacity:.8} .t10__texto{display:grid;gap:.9cqh;min-width:0} .t10__canal-nome{font-size:.807cqw;letter-spacing:var(--tracking-label); text-transform:uppercase;opacity:.5} .t10__canal-valor{font-size:1.667cqw;font-weight:300;letter-spacing:.005em; overflow-wrap:anywhere} .t10__fecho{position:absolute;left:5.625cqw;top:74.94cqh} .t10__assinatura{font-size:1.927cqw;font-weight:200;letter-spacing:-.01em; line-height:1;margin:0} .t10__cargo{font-size:.885cqw;letter-spacing:var(--tracking-label); text-transform:uppercase;opacity:.5;line-height:1; margin:1.75cqh 0 0;font-weight:400} /* =========================================================== CELULAR — o quadro se desfaz: a página vira uma coluna legível, com alvos grandes. Aqui não dá para seguir o mockup, porque ele é 16:9 e num telefone isso daria 211px de altura. =========================================================== */ @media (max-width:820px){ .t10{min-height:100dvh;align-items:center} .t10__quadro{width:100%;aspect-ratio:auto;container-type:normal; padding:var(--v-space) var(--outer-margin)} .t10__rotulo,.t10__titulo,.t10__canais,.t10__fecho{position:static} .t10__rotulo{font-size:var(--fs-label);opacity:.55;margin:0 0 1.4rem} .t10__titulo{font-size:clamp(2.6rem,1rem + 11vw,4.4rem); margin:0 0 clamp(2rem,6vh,3rem)} .t10__canais{grid-template-columns:1fr;grid-template-rows:none; width:auto;height:auto} .t10__canal{gap:1.1rem;padding:1.15rem 1rem} .t10__canal:nth-child(odd){border-right:0} .t10__canal:nth-child(-n+3){border-bottom:1px solid rgb(var(--branco)/.32)} .t10__icone svg{width:2.1rem;height:2.1rem} .t10__texto{gap:.3rem} .t10__canal-nome{font-size:var(--fs-label)} .t10__canal-valor{font-size:clamp(.95rem,.8rem + .55vw,1.15rem)} .t10__fecho{margin-top:clamp(2rem,6vh,3rem)} .t10__assinatura{font-size:clamp(1.3rem,1rem + 1.4vw,1.8rem)} .t10__cargo{font-size:var(--fs-label);margin-top:.6rem} }