/* ============================================================ STUDIO CAROLINA BRANDALISE Sistema visual do site — home, projetos e projeto. A direção vem da identidade NOVA 2026 (papelaria em greige, logotipo em duas caixas, assinatura manuscrita) e dos layouts que a arquiteta enviou: papel branco, tipografia leve com entreletras aberta, imagem carregando o peso. A regra que organiza o resto: o texto nunca compete com a foto. Nenhum título passa de 42px, e o corpo fica em 15px. Revisão de setembro de 2026: fotos em tamanho de tela logo depois do herói, manifesto em branco, processo, formulário curto, menu com grupos, e um vocabulário de movimento de cinco gestos (ver o bloco MOVIMENTO). ============================================================ */ @font-face{font-family:'Rework';src:url('../fonts/rework-extralight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap} @font-face{font-family:'Rework';src:url('../fonts/rework-light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Rework';src:url('../fonts/rework-regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Rework';src:url('../fonts/rework-semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Rework';src:url('../fonts/rework-bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap} /* A Amoret só escreve "Carolina B.": vai reduzida ao ASCII em woff2 (69 KB → 14 KB), pré-carregada no e com display:block. Com swap, o loader começava a "escrever" na cursiva do sistema e trocava de letra no meio. */ @font-face{font-family:'Amoret';src:url('../fonts/amoret.woff2') format('woff2'),url('../fonts/amoret.ttf') format('truetype');font-weight:400;font-style:normal;font-display:block} :root{ --papel:#FFFFFF; --papel-quente:#F4F2EF; --greige:#E4E1DB; --tinta:#16160F; --tinta-media:#4E4E45; /* o cinza dos rótulos e metadados. O greige do manual (#8B8A80) dá 3,47:1 sobre o papel — passa em texto grande e reprova no miúdo, que é justo onde ele é usado. Escurecido até 5,07:1 sem sair do mesmo tom. */ --tinta-fraca:#6F6F66; --filete:rgba(22,22,15,.13); /* separador decorativo pode ser leve; contorno de campo e de caixa de marcação precisa de 3:1 para quem enxerga pouco achar a borda */ --contorno:#8C8B81; --sage:#8E9585; --serif:'Rework','Helvetica Neue',Arial,sans-serif; --script:'Amoret',cursive; --ease:cubic-bezier(.22,.8,.24,1); /* a curva das linhas que se desenham: sai devagar e chega devagar */ --traco-ease:cubic-bezier(.65,0,.35,1); --margem:clamp(22px,5vw,74px); --topo:78px; /* o vão padrão entre fotos: destaques, grade de projetos e o herói até a primeira fileira. Respiro é o espaço antes do mosaico de um projeto; silêncio é o vão maior, em volta do manifesto. */ --vao:clamp(10px,1.4vw,20px); --respiro:clamp(56px,9vw,150px); --silencio:clamp(110px,16vw,220px); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* o cabeçalho é fixo: sem esta folga a âncora para o topo da seção e o título fica escondido atrás dele */ #inicio,#destaques,#manifesto,#studio,#equipe,#atuacao,#processo,#contato{scroll-margin-top:calc(var(--topo) + 22px)} body{ font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.85; color:var(--tinta-media);background:var(--papel); -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--tinta);color:var(--papel)} :focus-visible{outline:1.5px solid var(--tinta);outline-offset:3px} /* ---------- utilidades ---------- */ .wrap{padding-inline:var(--margem)} .limite{max-width:1460px;margin-inline:auto} /* o rótulo de seção: pequeno, com um filete curto à esquerda */ .rotulo{ font-size:10.5px;letter-spacing:.34em;text-transform:uppercase; font-weight:400;color:var(--tinta-fraca); display:flex;align-items:center;gap:14px; } .rotulo::before{content:"";width:30px;height:1px;background:currentColor;flex:none;opacity:.6} /* títulos — o teto é baixo de propósito */ .titulo{ font-size:clamp(23px,2.5vw,38px);font-weight:200;line-height:1.35; letter-spacing:.14em;text-transform:uppercase;color:var(--tinta); } .titulo b{font-weight:700} /* A Amoret é a letra da assinatura, e só dela: entra no loader, sob o retrato da arquiteta e no manifesto. Em qualquer outro lugar quem escreve é a Rework. */ .script{font-family:var(--script);font-weight:400;letter-spacing:0;text-transform:none} /* ============================================================ MOVIMENTO 1. A foto chega antes do texto. Nunca texto sobre foto em movimento. 2. Uma vez só. O único loop é a seta "role" do herói. 3. Só compositor: transform, opacity, clip-path. Nenhum listener de rolagem além do que dá fundo ao cabeçalho. 4. Duas velocidades: entradas de 1,1s a 1,6s; respostas de ,3s a ,5s. Nada entre ,6s e 1,0s. 5. Toque é o padrão: todo hover tem equivalente parado. 6. Reduced-motion = página sem JS: tudo visível, nada se mexe. Quatro gestos: REVELAR (.rv), ASSENTAR (.rv-foto), TRAÇO (.traco) e ASSINATURA QUE SE ESCREVE (.assina); e ABRIR nos grupos do menu. ============================================================ */ /* REVELAR — texto sobe 22px e aparece, uma vez, ao entrar na tela */ .rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)} .rv.on{opacity:1;transform:none} .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s} /* ASSENTAR — a foto chega um pouco maior e assenta no lugar. hidden antes de clip: Safari 15 não conhece clip e deixaria a foto vazar da moldura */ .rv-foto{overflow:hidden;overflow:clip} .rv-foto img{opacity:0;transform:scale(1.04);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)} .rv-foto.on img{opacity:1;transform:none} .rv-foto.d1 img{transition-delay:.12s} .rv-foto.d2 img{transition-delay:.24s} /* TRAÇO — uma linha de 1px que se desenha da esquerda para a direita */ .traco{position:relative} .traco::before{ content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--filete); transform:scaleX(0);transform-origin:left;transition:transform .9s var(--traco-ease); } .traco.on::before{transform:none} /* ASSINATURA QUE SE ESCREVE — só em "Carolina B.", só na Amoret. O -20% vertical é folga para ascendentes e descendentes; o -6% à direita protege o floreio do B. Acompanha o .rv ou o .rv-foto que a contém. */ .assina{clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.1s var(--traco-ease)} .on .assina,.assina.on{clip-path:inset(-20% -6% -20% 0)} @media (max-width:860px){.rv-foto img{transition-duration:.9s}} /* O bloco de reduced-motion mora no FIM desta folha. Aqui no começo ele perdia na cascata: .heroi img, #pronto e #loader .script são declarados depois, com a mesma especificidade, e religavam o movimento. */ /* Sem JavaScript o loader nunca sai e tudo que espera .on ficaria invisível — a página seria uma tela em branco. */ .sem-js #loader{display:none} .sem-js .rv{opacity:1;transform:none;transition:none} .sem-js .rv-foto img,.sem-js .heroi img{opacity:1;transform:none;transition:none} .sem-js .assina{clip-path:none;transition:none} .sem-js .traco::before{transform:none;transition:none} /* sem JS não há lightbox, nem cabeçalho que ganha fundo ao rolar */ .sem-js .mosaico figure{cursor:default} .sem-js header{background:rgba(255,255,255,.94)} /* VIRAR A PÁGINA — só um cross-fade entre páginas, onde o navegador souber. Sem nomes em elementos: conflitam com estados iniciais de opacidade. */ @media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s} } /* pular para o conteúdo: invisível até receber foco pelo teclado */ .pular{ position:fixed;top:10px;left:10px;z-index:400;padding:12px 18px; background:var(--tinta);color:var(--papel);font-size:12px;letter-spacing:.14em;text-transform:uppercase; transform:translateY(-160%);transition:transform .3s var(--ease); } .pular:focus{transform:none} /* ---------- loader ---------- */ /* mantido do site anterior: a assinatura entra, o nome entra depois. Aqui é keyframe, não transição, porque o site.js é defer e o loader precisa andar antes do JS. Na segunda página da sessão (.viu) ele nem aparece. */ #loader{ position:fixed;inset:0;z-index:300;background:var(--papel); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; padding-inline:var(--margem);text-align:center; transition:opacity .7s var(--ease),visibility .7s; } #loader .script{ font-size:clamp(38px,8.4vw,80px);line-height:1.25;color:var(--tinta);padding-inline:.15em; clip-path:inset(-20% 100% -20% 0);animation:escreve 1.1s var(--traco-ease) .15s forwards; } #loader small{font-size:9.5px;letter-spacing:.46em;text-transform:uppercase;color:var(--tinta-fraca);opacity:0;animation:loaderIn 1s var(--ease) .9s forwards} #loader.done{opacity:0;visibility:hidden} .viu #loader{display:none} @keyframes escreve{to{clip-path:inset(-20% -6% -20% 0)}} @keyframes loaderIn{to{opacity:1}} /* ---------- cabeçalho ---------- */ header{ position:fixed;top:0;left:0;right:0;z-index:120; transition:background .45s var(--ease),box-shadow .45s var(--ease); } /* O herói agora começa abaixo do cabeçalho, mas as páginas de projeto e a rolagem passam foto por trás dele: o véu branco segura o contraste dos links até o cabeçalho ficar sólido. */ header::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,.55) 55%,transparent); transition:opacity .45s var(--ease); } header.solido::before{opacity:0} header .barra{ height:var(--topo);display:flex;align-items:center;justify-content:space-between;gap:24px; padding-inline:var(--margem);max-width:1460px;margin-inline:auto; } header.solido{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--filete)} .marca{display:flex;align-items:baseline;gap:9px;color:var(--tinta);white-space:nowrap} .marca .m1{font-size:11.5px;font-weight:300;letter-spacing:.3em} .marca .m2{font-size:14px;font-weight:700;letter-spacing:.11em} nav.desk{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);position:relative} nav.desk a,nav.desk summary{ font-size:13.5px;font-weight:300;color:var(--tinta-media);letter-spacing:.01em; position:relative;padding-block:4px;transition:color .3s var(--ease);white-space:nowrap; } nav.desk a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--tinta); transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease); } nav.desk a:hover,nav.desk summary:hover{color:var(--tinta)} /* [aria-current] e não só ="page": numa página de projeto o link "projetos" leva ao valor "true" (você está nesta parte do site) e também sublinha */ nav.desk a:hover::after,nav.desk a[aria-current]::after{transform:scaleX(1)} /* iPad em paisagem passa de 1080px e mostra este menu, mas é toque: sobe o alvo de 33px para 44px sem mudar o desenho */ @media (pointer:coarse){nav.desk a,nav.desk summary{padding-block:10px}} /* grupos do menu:

nativo — abre sem JS, com teclado e leitor de tela. O JS só fecha um quando o outro abre, no Esc e no toque fora. */ nav.desk details.grupo{position:relative} nav.desk summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px} nav.desk summary::-webkit-details-marker{display:none} nav.desk summary::after{ content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease); } nav.desk details[open]>summary::after{transform:translateY(1px) rotate(-135deg)} nav.desk .painel{ position:absolute;top:calc(100% + 14px);right:0;min-width:240px; padding:14px 22px;display:flex;flex-direction:column;gap:2px; background:rgba(255,255,255,.96);backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--filete),0 18px 40px rgba(22,22,15,.08); } nav.desk .painel a{font-size:13px;padding-block:9px;color:var(--tinta-media)} nav.desk .painel a::after{bottom:6px} /* ABRIR — o painel desce 6px enquanto aparece */ details.grupo[open]>.painel{animation:abre .35s var(--ease)} @keyframes abre{from{opacity:0;transform:translateY(-6px)}} /* 44px de lado é o mínimo confortável para o dedo. O desenho continua sendo duas barras curtas — o resto é área de toque, com margem negativa para o botão não empurrar a barra do cabeçalho. flex:none para o botão não ser espremido pela assinatura, que é nowrap e por isso incompressível. */ .burger{display:none;flex:none;width:44px;height:44px;position:relative;margin-right:-9px} .burger span{position:absolute;left:9px;right:9px;height:1.4px;background:var(--tinta);transition:transform .4s var(--ease),opacity .3s} .burger span:nth-child(1){top:16px} .burger span:nth-child(2){bottom:16px} body.menu-aberto .burger span:nth-child(1){transform:translateY(5.3px) rotate(45deg)} body.menu-aberto .burger span:nth-child(2){transform:translateY(-5.3px) rotate(-45deg)} /* em cores forçadas o fundo das barras vira a cor do papel e o botão some */ @media (forced-colors:active){.burger span{background:CanvasText}} /* menu mobile — lista plana, sem grupos: tudo à vista de uma vez. A visibilidade vira `visible` na hora e só volta a `hidden` no fim da saída, senão o .focus() do JS cai no . Centrado por margem automática e não por justify-content:center: com a lista maior que a tela (iPhone SE, celular deitado), o center empurrava o topo para fora e "Projetos" ficava inalcançável. */ #menu{ position:fixed;inset:0;z-index:110;background:var(--papel); display:flex;flex-direction:column;justify-content:flex-start;gap:0; padding:var(--topo) var(--margem) 30px;overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden; transition:opacity .5s var(--ease),visibility 0s linear .5s; } #menu>:first-child{margin-top:auto} #menu>:last-child{margin-bottom:auto} /* flex-shrink:0 — quando a lista passa da altura da tela, o flex encolhia os itens em vez de rolar, e o nome longo do Anuário (duas linhas) passava por cima do ArchDaily */ #menu>*{flex-shrink:0} body.menu-aberto #menu{ opacity:1;visibility:visible; transition:opacity .5s var(--ease),visibility 0s linear 0s; } body.menu-aberto{overflow:hidden} /* com o menu aberto o véu em degradê do cabeçalho deixava a lista aparecer por trás da marca ao rolar */ body.menu-aberto header{background:var(--papel)} #menu a{ font-size:20px;font-weight:300;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta); padding:15px 0;border-bottom:1px solid var(--filete); display:flex;justify-content:space-between;align-items:baseline;min-height:44px; } #menu a i{font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--tinta-fraca)} #menu .rotulo{margin-top:30px;margin-bottom:4px} #menu .rotulo + a,#menu .rotulo ~ a{font-size:16px;padding:12px 0} /* aqui é o lema, não a assinatura: vai na letra do site, no tom dos rótulos */ #menu .lema{ margin-top:36px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase; font-weight:400;color:var(--tinta-fraca); } /* ---------- herói ---------- */ /* De ponta a ponta, em tela inteira: é a única foto do site que sangra. Tudo que vem depois fica na margem do conteúdo. 100vh antes de 100svh: navegador que não conhece svh fica com vh em vez de perder a altura inteira. */ .heroi{position:relative;height:100vh;height:100svh;min-height:520px;max-height:1000px;overflow:hidden;background:var(--greige)} /* celular deitado tem menos de 520px de altura: a frase ficava fora da tela */ @media (max-height:520px){.heroi{min-height:0}} .heroi>picture{display:contents} /* ancorado à esquerda: quando a proporção da tela obriga a cortar a largura, o corte sai da direita e a faixa de madeira onde a frase se apoia fica inteira. ASSENTAR longo: chega a 1.05 e assenta em 2,6s quando o loader sai. Transform não atrasa o LCP — a foto já pintou, só é composta. */ .heroi img{ width:100%;height:100%;object-fit:cover;object-position:left center; transform:scale(1.05);transition:transform 2.6s var(--ease); } html.pronto .heroi img{transform:none} html.viu .heroi img{transform:none;transition:none} /* o véu abre espaço para o texto sem escurecer a foto inteira */ .heroi::after{ content:"";position:absolute;inset:auto 0 0 0;height:62%; background:linear-gradient(to top,rgba(255,255,255,.82),rgba(255,255,255,.34) 42%,transparent); pointer-events:none; } .heroi .frase{ position:absolute;left:0;bottom:clamp(46px,7vh,88px);z-index:2; padding-inline:var(--margem);max-width:1460px; } .heroi h1{ font-size:clamp(18px,1.95vw,29px);font-weight:300;line-height:1.95; letter-spacing:.21em;text-transform:uppercase;color:var(--tinta); } .heroi h1 b{font-weight:700} .heroi .desce{ position:absolute;right:var(--margem);bottom:clamp(46px,7vh,88px);z-index:2; font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--tinta-media); display:flex;align-items:center;gap:12px; } .heroi .desce::after{content:"";width:1px;height:38px;background:currentColor;opacity:.5;animation:desce 2.4s var(--ease) infinite} @keyframes desce{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}} /* ---------- destaques ---------- */ /* Projetos sem nome, como a arquiteta pediu: foto no papel branco, em fileiras. Um vão só (--vao) entre fotos e entre fileiras, e todas as bordas na margem do conteúdo. Depois do herói de ponta a ponta, o espaço até a primeira fileira é a própria margem: as fotos ficam num quadro branco de largura igual em cima e dos lados. Cada foto cresce na proporção dela: flex-grow e aspect-ratio recebem a mesma --r (largura/altura), com base 0. A largura fica proporcional a --r, e altura = largura / --r sai igual para todas da fileira, sem recortar nenhuma. min-width:0 porque a de 2400px empurraria o mínimo do item. */ .destaques{padding-top:var(--margem)} .destaques .limite{display:flex;flex-direction:column;gap:var(--vao)} .fileira{display:flex;gap:var(--vao);align-items:flex-start} .fileira figure{ position:relative;margin:0;min-width:0;background:var(--greige); flex:var(--r) 1 0%;aspect-ratio:var(--r); } .fileira img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ---------- manifesto ---------- */ /* Fundo branco por ordem da cliente: não pôr .quente aqui. O silêncio em volta é o que separa dois brancos seguidos. */ .manifesto{background:var(--papel);padding-block:var(--silencio)} /* o título tem a mesma voz do herói: caixa alta, entreletras aberta, a primeira linha leve e a segunda em negrito. O parágrafo, mais estreito. */ .manifesto .limite{max-width:900px;text-align:center} .manifesto h2{ font-size:clamp(18px,1.95vw,29px);font-weight:300;line-height:1.95; letter-spacing:.21em;text-transform:uppercase;color:var(--tinta); } .manifesto h2 b{font-weight:700} @media (max-width:860px){.manifesto h2{letter-spacing:.16em;line-height:1.85}} .manifesto p{margin:28px auto 0;max-width:560px;font-weight:400;line-height:1.9;color:var(--tinta-media)} .manifesto .assinatura{margin-top:40px;line-height:1} .manifesto .assina{display:inline-block;font-size:clamp(34px,4vw,48px);color:var(--tinta);padding-inline:.15em;transition-delay:.36s} /* ---------- seções ---------- */ .sec{padding-block:clamp(70px,9vw,130px)} .sec.quente{background:var(--papel-quente)} .cab{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,52px)} .cab .titulo{margin-top:16px} /* link de texto com filete que corre */ .mais{ font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta); position:relative;padding-bottom:5px;white-space:nowrap; } .mais::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--tinta);transform-origin:right;transition:transform .45s var(--ease)} .mais:hover::after{transform:scaleX(0)} /* ---------- grade de projetos ---------- */ .grade{display:grid;gap:clamp(10px,1.4vw,20px)} .grade.tres{grid-template-columns:repeat(3,1fr)} .grade.quatro{grid-template-columns:repeat(4,1fr)} .cartao{position:relative;display:block;overflow:hidden;background:var(--greige)} /* o `.foto` é um : sem display:block o aspect-ratio não vale */ .cartao .foto{display:block;aspect-ratio:4/5;overflow:hidden} .cartao img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .cartao:hover img{transform:scale(1.04)} /* a regra de cima redefine a transição só com transform e matava o fade do ASSENTAR: a foto aparecia seca e só a escala andava. Aqui ela volta. */ .cartao.rv-foto img{transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)} /* os que assentam ao entrar chegam por coluna, um instante depois do outro; o hover precisa vencer o transform da entrada */ .grade.tres .cartao.rv-foto:nth-child(3n+2) img{transition-delay:.12s} .grade.tres .cartao.rv-foto:nth-child(3n+3) img{transition-delay:.24s} .cartao.rv-foto.on:hover img{transform:scale(1.04);transition-delay:0s} /* o nome mora escondido e sobe no hover — como nas referências. em telas de toque não existe hover, então ele fica sempre visível abaixo. */ .cartao .nome{ position:absolute;inset:auto 0 0 0;z-index:2; padding:18px 18px 16px; background:linear-gradient(to top,rgba(255,255,255,.94),rgba(255,255,255,.72) 55%,transparent); opacity:0;transform:translateY(10px); transition:opacity .45s var(--ease),transform .45s var(--ease); } .cartao:hover .nome,.cartao:focus-visible .nome{opacity:1;transform:none} .cartao .nome b{display:block;font-size:13px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta)} .cartao .nome i{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-fraca)} .cartao .nome-fixo{display:none} /* ---------- o studio ---------- */ .studio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,88px);align-items:center} /* a equipe entra com a foto do outro lado, para o olho não repetir o mesmo caminho duas seções seguidas */ .studio.invertida .quadro{order:-1} .studio.invertida .texto p{text-align:left;hyphens:none} /* horizontal e em 4/3: cabe inteira na coluna, sem virar faixa de tela cheia que corta as cabeças */ .foto-equipe{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 58%;filter:grayscale(1) contrast(1.02)} .studio .texto p{margin-top:17px;text-align:justify;hyphens:auto;max-width:52ch} .studio .texto p:first-of-type{margin-top:26px} .studio .quadro{position:relative} /* só o retrato é recortado em 4/5 — a assinatura fica de fora, senão o `aspect-ratio` a estica junto. Quem apara a foto enquanto ela assenta é a moldura; o quadro fica aberto para a assinatura pendurar embaixo, e ela se escreve meio segundo depois da foto. */ .studio .quadro.rv-foto{overflow:visible} .studio .quadro .moldura{display:block;overflow:clip} .studio .quadro .retrato-foto{ width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; filter:grayscale(1) contrast(1.02); } /* a assinatura vem da fonte, não de um PNG. Fica pendurada ABAIXO da foto, no papel quente: o retrato novo tem a poltrona escura no canto inferior, e tinta sobre ela sumia. */ .studio .quadro .assina{ position:absolute;right:0;bottom:-1.3em; font-family:var(--script);font-size:clamp(26px,3.4vw,42px);line-height:1; color:var(--tinta);pointer-events:none;white-space:nowrap;padding-inline:.15em; transition-delay:.5s; } /* empilhado, a foto vem antes do texto: reserva o espaço da assinatura */ @media (max-width:1080px){ .studio .quadro:has(.assina){margin-bottom:clamp(18px,3vw,30px)} } /* ---------- o que o studio projeta ---------- */ /* Três nomes, sem texto — pedido da arquiteta. Cada coluna é um link para a grade, com um traço que se desenha em cima ao entrar na tela. */ .ramos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(30px,4vw,48px);align-items:start} .ramo{ display:block;padding-top:22px;min-height:44px; font-size:clamp(15px,1.7vw,22px);font-weight:300;letter-spacing:.2em;text-transform:uppercase; color:var(--tinta-fraca);transition:color .3s var(--ease); } .ramo::before{transition-property:transform,height} .ramo:hover{color:var(--tinta)} .ramo:hover::before{height:1.5px;background:var(--tinta)} .ramos .ramo:nth-child(2)::before{transition-delay:.12s} .ramos .ramo:nth-child(3)::before{transition-delay:.24s} /* ---------- do primeiro traço à entrega ---------- */ /* Uma linha só corre sobre as quatro colunas (o ::before do grid, em 1,6s) e cada passo entra atrás dela. */ .passos{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px); margin-top:clamp(30px,4vw,48px); } .passos::before{background:var(--contorno);transition-duration:1.6s} .passo{padding-top:20px} .passo .num{display:block;font-size:34px;font-weight:200;line-height:1;color:var(--tinta-fraca)} .passo b{display:block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta)} .passo p{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--tinta-media);max-width:26ch} .passo:nth-child(2){transition-delay:.35s} .passo:nth-child(3){transition-delay:.7s} .passo:nth-child(4){transition-delay:1.05s} /* ---------- contato + primeiro contato ---------- */ /* três peças numa grade de duas colunas: a conversa e os contatos à esquerda, o formulário à direita ocupando as duas linhas */ .contato{ display:grid;grid-template-columns:5fr 7fr;grid-template-areas:"conversa envio" "linhas envio"; gap:0 clamp(40px,6vw,96px);align-items:start; } .contato .conversa{grid-area:conversa} .contato .envio{grid-area:envio} .contato .linhas{grid-area:linhas} .contato .apoio{margin-top:22px;max-width:38ch} .linhas{margin-top:28px} /* só os filhos diretos são linhas: o de dentro do é texto, e sem o `>` ele ganhava padding e um segundo filete curto debaixo do número */ .linhas>a,.linhas>span{ display:flex;align-items:baseline;justify-content:space-between;gap:20px; padding:16px 0;border-bottom:1px solid var(--filete); font-size:15px;color:var(--tinta);transition:padding-left .4s var(--ease)} .linhas>a:hover{padding-left:9px} .linhas em{font-style:normal;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-fraca)} /* formulário: quatro campos, cada um é uma linha, não uma caixa. Ao focar, um traço escuro se desenha sobre o filete. */ .formulario{display:grid;gap:clamp(26px,3.4vw,40px)} .campos{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px} .campo{display:flex;flex-direction:column;gap:7px;position:relative} .campo.inteiro{grid-column:1/-1} .campo label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-fraca)} .campo label b{color:var(--tinta);font-weight:400} .campo input,.campo select,.campo textarea{ font:inherit;font-size:15px;color:var(--tinta);background:transparent; border:0;border-bottom:1px solid var(--contorno);padding:9px 0; border-radius:0; } /* o traço de foco tem 2px: com 1px sobre um filete de 1px quase não se via que o campo tinha recebido o cursor */ .campo::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tinta); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--traco-ease); } .campo:focus-within::after{transform:none} .campo textarea{resize:vertical;min-height:96px;line-height:1.7} .campo select{cursor:pointer;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinta-media) 50%),linear-gradient(135deg,var(--tinta-media) 50%,transparent 50%);background-position:calc(100% - 9px) 18px,calc(100% - 4px) 18px;background-size:5px 5px;background-repeat:no-repeat} .campo input:focus,.campo select:focus,.campo textarea:focus{outline:0} .campo [aria-invalid="true"]{border-bottom-color:#8A2B2B} /* em cores forçadas o traço desenhado some; o contorno do sistema volta */ @media (forced-colors:active){ .campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid CanvasText;outline-offset:2px} } /* o tom do placeholder vem da cor, não de opacidade: com .65 sobre o fundo quente ele caía para 2,44:1 e sumia */ .campo input::placeholder,.campo textarea::placeholder{color:#5F5F57;opacity:1} .enviar{ display:inline-flex;align-items:center;justify-content:center;gap:14px; background:var(--tinta);color:var(--papel); padding:17px 34px;min-height:52px;width:100%; font-size:11.5px;letter-spacing:.26em;text-transform:uppercase; transition:opacity .3s var(--ease); } .enviar:hover{opacity:.86} .enviar .seta{transition:transform .35s var(--ease)} .enviar:hover .seta{transform:translateX(5px)} .nota-form{margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-fraca)} .erro-form{margin-top:14px;font-size:13px;color:#8A2B2B} .erro-form:empty{display:none} /* sem JS o formulário não monta o resumo: some, e fica o link direto */ .so-sem-js{display:none} .sem-js .formulario{display:none} .sem-js .so-sem-js{display:inline-flex} /* depois de enviar, o formulário dá lugar ao passo final, que entra com o mesmo gesto do resto da página. O JS liga .on (display) e, um quadro depois, .visivel — sem esse quadro a transição não roda. */ #pronto{ display:none;border:1px solid var(--filete);padding:clamp(26px,3.4vw,40px); opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease); } #pronto.on{display:block} #pronto.visivel{opacity:1;transform:none} #pronto .obrigada{ display:block;font-size:clamp(22px,2.4vw,30px);font-weight:200;line-height:1.2; letter-spacing:.1em;text-transform:uppercase;color:var(--tinta); } #pronto h3{margin-top:10px;font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--tinta-fraca)} #pronto p{margin-top:12px;max-width:44ch} #pronto .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} #pronto .copiar{ display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--filete);padding:17px 26px;min-height:52px; font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--tinta); transition:border-color .3s var(--ease); } #pronto .copiar:hover{border-color:var(--tinta)} #pronto .enviar{width:auto} /* ---------- rodapé ---------- */ footer{padding:34px 0 40px;border-top:1px solid var(--filete);font-size:11.5px;letter-spacing:.06em;color:var(--tinta-fraca)} footer .linha{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} footer a{border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)} footer a:hover{color:var(--tinta);border-bottom-color:var(--tinta)} footer .publicado{margin-top:14px;line-height:2} /* ---------- página de projeto ---------- */ /* Só o rótulo com a categoria e o nome. Nada mais escrito até o rodapé — a página não explica o projeto, mostra. */ .capa-proj{padding-top:calc(var(--topo) + 34px);padding-bottom:22px} .capa-proj .titulo{font-size:clamp(26px,3.2vw,42px);font-weight:200;margin-top:14px} /* Mosaico: grid modular, o mesmo em todos os projetos. Quatro colunas; até 1080px, duas. Toda fileira tem a altura de 1,4 coluna, então o retrato ocupa uma célula em 5:7, a paisagem duas lado a lado, e as grandes 2×2 (retrato) ou a largura toda em duas fileiras (paisagem). Todas as bordas coincidem e o vão é o `--vao` da home. A foto é aparada de leve para caber no módulo — quem escolhe o módulo de cada foto, e garante que a conta feche sem buraco nos dois grids, é o _build. A altura da fileira vem da largura do quadro: `cqw` do .quadro, com a conta em vw antes, para navegador sem container query. */ .quadro{container-type:inline-size} .mosaico{ --cols:4; display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--vao); grid-auto-rows:calc((100cqw - (var(--cols) - 1) * var(--vao)) / var(--cols) * 1.4); padding-bottom:clamp(50px,6vw,90px) } /* com var() no meio, a declaração em cqw passaria no parser mesmo sem suporte e cairia em `auto` — por isso @supports, e não duas declarações */ @supports not (width:1cqw){ .mosaico{grid-auto-rows:calc((min(100vw - 2 * var(--margem), 1460px) - (var(--cols) - 1) * var(--vao)) / var(--cols) * 1.4)} } .mosaico figure{position:relative;margin:0;overflow:hidden;background:var(--greige);cursor:zoom-in} .mosaico figure:focus-visible{outline:1.5px solid var(--tinta);outline-offset:3px} .mosaico img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} /* mesma razão do cartão: sem esta linha o fade do ASSENTAR sumia */ .mosaico .rv-foto img{transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)} .mosaico figure:hover img{transform:scale(1.025)} .mosaico .rv-foto.on:hover img{transform:scale(1.025)} .mosaico .m-l{grid-column:span 2} .mosaico .m-gp{grid-column:span 2;grid-row:span 2} .mosaico .m-gl{grid-column:span 4;grid-row:span 2} @media (max-width:1080px){ .mosaico{--cols:2} .mosaico .m-gl{grid-column:span 2;grid-row:span 1} } /* próximo projeto: nome e capa, antes da navegação */ .proxima{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--filete)} .proxima .titulo{margin-top:14px} .proxima .titulo a{position:relative} .proxima .titulo a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--tinta);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)} .proxima .titulo a:hover::after{transform:none} .proxima-capa{display:block;justify-self:end;width:100%;max-width:300px;aspect-ratio:4/5;background:var(--greige)} .proxima-capa img{width:100%;height:100%;object-fit:cover} /* navegação entre projetos */ .entre{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:clamp(30px,4vw,56px);border-top:1px solid var(--filete)} .entre a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);display:flex;align-items:center;gap:12px;transition:gap .35s var(--ease)} .entre a:hover{gap:20px} .entre .vazio{opacity:0;pointer-events:none} /* ---------- lightbox ---------- */ /* mesma razão do #menu: visível na hora, para o .focus() do JS pegar */ /* pan-y pinch-zoom: deslizar para o lado troca a foto, mas pinçar amplia — só pan-y desligava o zoom justo onde a pessoa quer ver o detalhe */ #lb{ position:fixed;inset:0;z-index:200;background:rgba(250,249,247,.985); display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,54px); opacity:0;visibility:hidden;touch-action:pan-y pinch-zoom;overscroll-behavior:contain; transition:opacity .4s var(--ease),visibility 0s linear .4s; } #lb.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s linear 0s} #lb img{max-width:100%;max-height:84vh;object-fit:contain;box-shadow:0 24px 60px rgba(22,22,15,.14)} #lb .legenda{position:absolute;left:0;right:0;bottom:clamp(16px,3vw,34px);text-align:center;font-size:12px;letter-spacing:.14em;color:var(--tinta-fraca);padding-inline:var(--margem)} /* o desenho continua sendo uma palavra e duas setas finas; o resto é área de toque, de 44px no mínimo */ #lb .fechar{ position:absolute;top:clamp(4px,1.4vw,14px);right:clamp(4px,1.4vw,14px); min-width:44px;min-height:44px;padding:12px 14px; font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta); } #lb .nav{ position:absolute;top:50%;transform:translateY(-50%);min-width:44px;min-height:64px; display:flex;align-items:center;justify-content:center; font-size:26px;font-weight:200;color:var(--tinta);line-height:1; } #lb .nav.ant{left:clamp(0px,1vw,14px)} #lb .nav.prox{right:clamp(0px,1vw,14px)} /* ============================================================ ADAPTAÇÕES ============================================================ */ @media (max-width:1080px){ /* cinco entradas mais a marca não cabem lado a lado: o menu vira botão */ nav.desk{display:none} .burger{display:block} .grade.quatro{grid-template-columns:repeat(2,1fr)} .grade.tres{grid-template-columns:repeat(2,1fr)} .grade.tres .cartao.rv-foto:nth-child(3n+2) img, .grade.tres .cartao.rv-foto:nth-child(3n+3) img{transition-delay:0s} .grade.tres .cartao.rv-foto:nth-child(2n) img{transition-delay:.12s} .studio{grid-template-columns:1fr;gap:34px} .studio .quadro{order:-1;max-width:440px} .studio .texto p{max-width:none} /* uma coluna: título e frase, depois o formulário, depois os contatos — quem chegou até aqui no celular quer o botão */ .contato{grid-template-columns:1fr;grid-template-areas:"conversa" "envio" "linhas";row-gap:34px} .contato .linhas{margin-top:0} .proxima{grid-template-columns:1fr} .proxima-capa{justify-self:start} /* Sem JS o botão não abre nada e a barra de mesa está escondida: o menu deixa de ser painel e vira uma lista no topo da página, antes do herói. Feio, mas navegável — o contrário seria um site sem saída. */ .sem-js .burger{display:none} .sem-js #menu{ position:static;opacity:1;visibility:visible;padding-top:calc(var(--topo) + 10px); overflow:visible; } .sem-js #menu>:first-child,.sem-js #menu>:last-child{margin-block:0} } @media (max-width:860px){ .heroi h1{letter-spacing:.16em;line-height:1.85} .heroi .desce{display:none} /* O Safari do iPhone amplia a página ao focar campo com menos de 16px e não desfaz depois. */ .campo input,.campo select,.campo textarea{font-size:16px} /* blur recalculado a cada quadro de rolagem pesa no celular; com o fundo quase opaco ele nem se nota */ header.solido{backdrop-filter:none;background:rgba(255,255,255,.97)} } /* Tela estreita e em pé: o