/* ========================================================================== PÁGINA DE PROJETO — prancha de apresentação A referência é a prancha impressa de arquitetura: papel claro, margens largas e iguais, fios capilares, rótulos pequenos em caixa alta, letras de chamada (A, B, C) nas imagens e um carimbo de identificação no canto. Cada bloco é uma faixa com o rótulo à esquerda e o conteúdo à direita, que é como uma prancha se lê: você varre a coluna de rótulos e para no que interessa. ========================================================================== */ /* -- Folha ------------------------------------------------------------------ */ body:has(.prancha) { background: var(--off-white); } .prancha { --fio: rgba(83, 33, 0, 0.16); --fio-fraco: rgba(83, 33, 0, 0.08); /* Medida real do cabeçalho fixo, escrita pelo JS a cada redimensionamento. Todo elemento grudento da prancha se posiciona a partir dela — cravar um valor aqui deixaria o índice passando por baixo do header no celular, onde a barra tem outra altura. */ --altura-header: 4.1rem; --altura-indice: 3.5rem; position: relative; padding-block: clamp(5rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); } .prancha__folha { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--margem-viewport); } /* Barra de leitura, fina, colada no topo da janela. */ .prancha__progresso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: transparent; } .prancha__progresso span { display: block; height: 100%; width: 0; background: var(--magenta); transform-origin: left; } /* -- Cabeçalho da prancha --------------------------------------------------- */ .prancha__topo { display: grid; gap: var(--espaco-md); padding-bottom: var(--espaco-md); border-bottom: 1px solid var(--fio); } @media (min-width: 900px) { .prancha__topo { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--espaco-xl); } } .prancha__marcador { display: block; font-family: var(--fonte-display); font-weight: 500; font-size: var(--fs-legenda); letter-spacing: var(--tracking-titulo-curto); text-transform: uppercase; color: var(--magenta); margin-bottom: var(--espaco-sm); } .prancha__titulo { font-size: clamp(2.4rem, 6.5vw + 0.5rem, 6rem); font-weight: 300; letter-spacing: var(--tracking-titulo-capa); line-height: 0.98; color: var(--marrom); /* O piso do clamp (2.4rem) mais o tracking de 0.14em fazem uma palavra longa medir mais que a coluna: "contemporânea" dava 411px numa tela de 375px, e a prancha ganhava barra de rolagem horizontal. Hifenizar resolve sem mexer no tamanho — o navegador só quebra a palavra quando ela realmente não cabe, então título curto ("Fabsol", "Dallas Imperial") continua idêntico, e quebra em espaço sempre tem preferência sobre quebra dentro da palavra. O prefixo cobre o Safari anterior ao 17. A hifenização usa o lang="pt-BR" declarado no : sem ele o navegador não sabe onde separar. */ -webkit-hyphens: auto; hyphens: auto; } .prancha__subtitulo { margin-top: var(--espaco-xs); font-family: var(--fonte-display); font-size: var(--fs-corpo-grande); font-weight: 300; color: rgba(83, 33, 0, 0.62); } /* Carimbo: pares rótulo/valor em linhas apertadas, alinhados à direita, como o quadro de identificação no canto de uma prancha real. */ .carimbo { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--fio); min-width: min(100%, 15rem); } .carimbo__linha { display: flex; justify-content: space-between; gap: var(--espaco-sm); padding-block: 0.5rem; border-bottom: 1px solid var(--fio-fraco); } .carimbo dt { font-family: var(--fonte-display); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(83, 33, 0, 0.5); white-space: nowrap; } .carimbo dd { margin: 0; font-size: var(--fs-legenda); text-align: right; color: var(--marrom); } /* -- Elevação principal ----------------------------------------------------- */ .prancha__elevacao { margin: var(--espaco-md) 0 0; } .quadro { overflow: hidden; border-radius: var(--raio-lg); background: var(--creme); } .prancha__elevacao .quadro img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; } @media (max-width: 700px) { .prancha__elevacao .quadro img { aspect-ratio: 4 / 3; } } /* Legenda com letra de chamada, no padrão da prancha. */ .prancha__elevacao figcaption, .tira figcaption, .prancheta figcaption { display: flex; gap: 0.75rem; margin-top: var(--espaco-xs); font-size: var(--fs-legenda); line-height: 1.5; color: rgba(83, 33, 0, 0.72); max-width: 56ch; } .letra { flex-shrink: 0; font-family: var(--fonte-display); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; color: var(--magenta); border: 1px solid currentColor; border-radius: 50%; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; margin-top: 0.1rem; } /* -- Índice ----------------------------------------------------------------- */ .indice { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: var(--espaco-lg); padding-block: var(--espaco-2xs); border-block: 1px solid var(--fio); position: sticky; top: var(--altura-header); z-index: 20; background: var(--off-white); } .indice a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border-radius: var(--raio-arco); font-family: var(--fonte-display); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--tracking-titulo-curto); text-transform: uppercase; text-decoration: none; color: rgba(83, 33, 0, 0.6); transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .indice a span { font-size: 0.62rem; color: var(--magenta); } .indice a:hover, .indice a.ativo { color: var(--marrom); background: var(--creme); } /* -- Blocos ----------------------------------------------------------------- */ .bloco { display: grid; gap: var(--espaco-sm); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--fio); /* Header fixo e índice grudento se somam: sem esta folga, ancorar numa seção deixaria o rótulo dela escondido atrás dos dois. */ scroll-margin-top: calc(var(--altura-header) + var(--altura-indice) + 1rem); } @media (min-width: 900px) { .bloco { grid-template-columns: minmax(9rem, 14ch) minmax(0, 1fr); gap: var(--espaco-lg); align-items: start; } } .bloco__rotulo { font-family: var(--fonte-display); font-weight: 500; font-size: 0.72rem; letter-spacing: var(--tracking-titulo-curto); text-transform: uppercase; color: var(--marrom); display: flex; align-items: baseline; gap: 0.6rem; } .bloco__rotulo span { font-size: 0.62rem; color: var(--magenta); } @media (min-width: 900px) { .bloco__rotulo { position: sticky; top: calc(var(--altura-header) + var(--altura-indice) + 1.5rem); } } /* -- Conceito --------------------------------------------------------------- */ .tese { font-family: var(--fonte-display); font-weight: 300; font-size: clamp(1.5rem, 2.2vw + 0.9rem, 2.5rem); line-height: 1.22; letter-spacing: 0.01em; color: var(--vinho); max-width: 22ch; margin-bottom: var(--espaco-md); } /* Texto corrido em duas colunas, como o rodapé de uma prancha. As colunas só entram quando há largura suficiente para uma linha de leitura decente. */ .corrido { font-size: var(--fs-corpo); color: rgba(83, 33, 0, 0.82); } .corrido p + p { margin-top: var(--espaco-xs); } @media (min-width: 1100px) { .corrido { columns: 2; column-gap: var(--espaco-lg); orphans: 3; widows: 3; } .corrido p { break-inside: avoid; } } /* -- Desenhos técnicos ------------------------------------------------------ */ /* Duas colunas, no máximo. Em três, cada planta caía para 288px de largura: um desenho de 1800px reduzido a 0,16 do tamanho tem linhas de menos de um pixel, e a planta do pavimento superior simplesmente sumia da tela. */ .pranchetas { display: grid; gap: var(--espaco-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); } .prancheta { margin: 0; } /* A folha do desenho ganha a malha azul-clara da prancha e cantos marcados, para o desenho de linha não flutuar solto no papel. */ .prancheta .quadro { position: relative; border-radius: var(--raio-md); background: var(--creme); border: 1px solid var(--fio-fraco); background-image: linear-gradient(to right, rgba(83, 33, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(83, 33, 0, 0.05) 1px, transparent 1px); background-size: 2rem 2rem; padding: var(--espaco-sm); } .prancheta .quadro img { width: 100%; height: auto; /* Desenho técnico nunca é recortado: a proporção é a do arquivo. */ display: block; /* O multiply casa o branco do arquivo com o papel; o contraste devolve peso às linhas finas, que a redução para meia tela deixa lavadas. */ mix-blend-mode: multiply; filter: contrast(1.32); } /* Cantoneiras: dois fios curtos em cada canto, marca de prancha. */ .prancheta .quadro::before, .prancheta .quadro::after { content: ""; position: absolute; width: 0.85rem; height: 0.85rem; border: 1px solid var(--terracota); opacity: 0.5; } .prancheta .quadro::before { top: 0.45rem; left: 0.45rem; border-right: 0; border-bottom: 0; } .prancheta .quadro::after { bottom: 0.45rem; right: 0.45rem; border-left: 0; border-top: 0; } /* -- Tiras de imagem -------------------------------------------------------- */ /* Duas colunas fixas. Os três projetos têm 2, 6 e 2 tiras — todos pares, então nenhuma linha fica com buraco, e a imagem chega ao dobro do tamanho que teria numa grade de quatro. */ .tiras { display: grid; gap: var(--espaco-md) var(--espaco-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); } .tira { margin: 0; } .tira .quadro img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* -- Ficha ------------------------------------------------------------------ */ .ficha { margin: 0; display: grid; gap: 0; } .ficha__linha { display: grid; gap: var(--espaco-2xs); padding-block: var(--espaco-xs); border-bottom: 1px solid var(--fio-fraco); } @media (min-width: 700px) { .ficha__linha { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--espaco-sm); align-items: baseline; } } .ficha dt { font-family: var(--fonte-display); font-weight: 500; font-size: 0.68rem; letter-spacing: var(--tracking-titulo-curto); text-transform: uppercase; color: var(--magenta); } .ficha dd { margin: 0; font-size: var(--fs-corpo-grande); color: var(--marrom); } /* -- Rodapé da prancha ------------------------------------------------------ */ .prancha__rodape { display: grid; gap: var(--espaco-md); padding-top: var(--espaco-lg); } @media (min-width: 700px) { .prancha__rodape { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--espaco-xl); } } .proximo { display: grid; gap: 0.2rem; text-decoration: none; color: var(--vinho); } .proximo__rotulo { font-family: var(--fonte-display); font-weight: 500; font-size: 0.68rem; letter-spacing: var(--tracking-titulo-curto); text-transform: uppercase; color: var(--magenta); } .proximo__nome { font-family: var(--fonte-display); font-weight: 300; font-size: clamp(1.9rem, 4vw + 0.8rem, 3.5rem); line-height: 1.05; letter-spacing: var(--tracking-titulo-capa); text-transform: uppercase; /* Mesmo caso do .prancha__titulo: aqui entra o nome do PRÓXIMO projeto, que não se escolhe — é o vizinho no JSON. Um nome longo ("Cozinha contemporânea") estourava a coluna a 320px. Ver a nota lá. */ -webkit-hyphens: auto; hyphens: auto; } .proximo svg { justify-self: start; margin-top: var(--espaco-2xs); transition: transform var(--dur-base) var(--ease-out); } .proximo:hover svg { transform: translateX(10px); } .prancha__selo { display: grid; gap: var(--espaco-2xs); justify-items: start; font-size: var(--fs-legenda); } @media (min-width: 700px) { .prancha__selo { justify-items: end; text-align: right; } } .prancha__selo a { display: inline-flex; align-items: flex-end; font-family: var(--fonte-display); font-weight: 500; font-size: 0.68rem; letter-spacing: var(--tracking-titulo-curto); text-transform: uppercase; color: rgba(83, 33, 0, 0.6); text-decoration: none; border-bottom: 1px solid var(--fio); padding-bottom: 0.2rem; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .prancha__selo a:hover { color: var(--magenta); border-color: var(--magenta); } .prancha__numero { font-family: var(--fonte-display); font-weight: 300; font-size: 0.7rem; letter-spacing: 0.2em; color: rgba(83, 33, 0, 0.38); } .projeto-vazio { padding-block: var(--espaco-2xl); } /* ========================================================================== ANIMAÇÃO Só transform, opacity e clip-path — nada que force layout. Tudo vive sob .js-enabled: se o script falhar, a prancha aparece inteira e parada. ========================================================================== */ /* Palavra a palavra: cada uma sobe de dentro da própria caixa. É por palavra e não por letra de propósito — por letra o título vira efeito, por palavra continua sendo leitura. */ .palavra { display: inline-block; overflow: hidden; vertical-align: bottom; } .js-enabled .palavra > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease-out); } .js-enabled [data-anima-palavras].em-vista .palavra > span { transform: translateY(0); } /* Imagem: cortina de baixo para cima somada a um leve desafogo da escala. As duas juntas dão a sensação de a foto assentar no papel. */ .js-enabled [data-anima-imagem] .quadro { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-out); } .js-enabled [data-anima-imagem].em-vista .quadro { clip-path: inset(0 0 0 0); } .js-enabled [data-anima-imagem] .quadro img { transform: scale(1.1); transition: transform 1600ms var(--ease-out); } .js-enabled [data-anima-imagem].em-vista .quadro img { transform: scale(1); } .js-enabled [data-anima-imagem] figcaption { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out) 240ms, transform var(--dur-base) var(--ease-out) 240ms; } .js-enabled [data-anima-imagem].em-vista figcaption { opacity: 1; transform: none; } /* Blocos de texto e listas: subida curta, escalonada pelo JS. */ .js-enabled [data-anima-subida] { opacity: 0; transform: translateY(24px); } .js-enabled [data-anima-subida].em-vista { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } @media (prefers-reduced-motion: reduce) { .js-enabled .palavra > span, .js-enabled [data-anima-imagem] .quadro, .js-enabled [data-anima-imagem] .quadro img, .js-enabled [data-anima-imagem] figcaption, .js-enabled [data-anima-subida] { transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; } } /* -- Lupa ------------------------------------------------------------------- Uma planta a meia tela dá para entender, não para ler. O clique abre o arquivo inteiro sobre a folha. É um nativo de propósito: foco preso, Esc para fechar e retorno ao elemento de origem vêm de graça. */ .quadro { position: relative; } .ampliar { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; } /* Sinal de que dá para ampliar. Nasce discreto e só ganha corpo no hover. */ .ampliar::after { content: "Ampliar"; position: absolute; right: var(--espaco-xs); bottom: var(--espaco-xs); font-family: var(--fonte-display); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--creme); background: var(--marrom); border-radius: var(--raio-arco); padding: 0.45rem 0.85rem; opacity: 0; transform: translateY(6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .ampliar:hover::after, .ampliar:focus-visible::after { opacity: 1; transform: none; } .lupa { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; background: transparent; color: var(--creme); overflow: hidden; } .lupa::backdrop { background: rgba(83, 33, 0, 0.94); } .lupa__conteudo { height: 100%; display: grid; grid-template-rows: 1fr auto; gap: var(--espaco-xs); padding: clamp(2.5rem, 6vw, 4rem) var(--margem-viewport) var(--espaco-md); } .lupa__figura { margin: 0; min-height: 0; display: grid; place-items: center; } .lupa img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--raio-md); background: var(--off-white); } .lupa__legenda { display: flex; gap: 0.75rem; align-items: baseline; font-size: var(--fs-legenda); color: rgba(249, 239, 225, 0.8); max-width: 64ch; } .lupa__legenda .letra { color: var(--rosa-tinte); } .lupa__fechar { position: absolute; top: var(--espaco-xs); right: var(--margem-viewport); width: 2.85rem; height: 2.85rem; border-radius: 50%; border: 1px solid rgba(249, 239, 225, 0.35); color: var(--creme); display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .lupa__fechar:hover { background: rgba(249, 239, 225, 0.14); border-color: var(--creme); } /* Entrada: a imagem cresce de dentro do escuro em vez de piscar na tela. */ .js-enabled .lupa[open] .lupa__conteudo { animation: lupa-entra 420ms var(--ease-out) both; } @keyframes lupa-entra { from { opacity: 0; transform: scale(0.965); } } @media (prefers-reduced-motion: reduce) { .js-enabled .lupa[open] .lupa__conteudo { animation: none; } } /* ========================================================================== ALVOS DE TOQUE DA PRANCHA — só onde existe toque -------------------------------------------------------------------------- O índice MEDIA 37px de altura e o "Ver todos os projetos" 22px, o menor alvo do site inteiro. Os dois crescem para 44 mantendo o alinhamento: o índice centraliza, o selo alinha pela base (o fio embaixo dele faz parte do desenho, então a caixa cresce por cima do texto). Fechado em 899px pelo mesmo motivo do site.css: o índice é grudento e a altura dele entra na conta do `scroll-margin-top` das âncoras. Mexer nisso no desktop, onde o alvo já se acerta com o mouse, era risco sem ganho. */ @media (max-width: 899px) { .indice a, .prancha__selo a { min-height: 44px; } /* Com os links em 44px o índice passou a quebrar em DUAS linhas: a barra grudenta MEDIU 112px, e somada aos 56 do header ficavam 168px de moldura fixa cobrindo 21% de uma tela de 812 — o oposto de navegar confortável. Em telas estreitas ele vira uma faixa de UMA linha que rola de lado, mesmo recurso do trilho de projetos: 62px de altura, e os quatro rótulos continuam todos alcançáveis. O recuo lateral negativo faz a faixa sangrar até a borda, para não parecer que o último item foi cortado por engano. `--altura-indice` é medida em tempo de execução pelo projeto.js, então o `scroll-margin-top` das âncoras se corrige sozinho. */ .indice { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--margem-viewport) * -1); padding-inline: var(--margem-viewport); } .indice::-webkit-scrollbar { display: none; } .indice a { flex: 0 0 auto; white-space: nowrap; } }