/* ============================================================================ tokens.css: o sistema visual das cinco composições (FRO-152, 06/09/2026; rodada de conserto do olho do dono, 07/09/2026). ---------------------------------------------------------------------------- Fonte única. Cada composição carrega scrollcraft.css, depois este arquivo, e declara o tema no . Aqui moram: 1. os dois temas em cima dos tokens do motor (--sc-*), mais os tokens da casa 2. a tipografia (Fraunces no display, Hanken Grotesk no corpo; itálico como ênfase) 3. as regras do "delicado" escritas como medida (nota 08 do vault) 4. os componentes compartilhados: barra (com o índice no meio), WhatsApp, rodapé, capa (tela cheia, a caixa de texto varia), O Escritório (duas formas), áreas (trilho e índice), equipe (trilhos nativos), moldura escrita, Código, janela, contato, interlúdio (fatia), modo specs Nada aqui restyla .sc-stage, .sc-copy ou [data-sc-*]: é o mecanismo do motor. O que o dono cravou em 07/09: foto é fundo, detalhe e requinte, nunca colagem; nenhum elemento fixo na margem; o fio nunca atrás de texto nem por cima de foto; as nove áreas com tipo que dê vontade de ler. ========================================================================== */ /* ---- 1 · a marca, trancada, e os dois temas ---------------------------- */ :root { --ouro: #BE9138; --azul: #2D5795; --grafite: #373435; --sc-accent: var(--ouro); --sc-font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --sc-font-text: "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif; --sc-font-mono: "Hanken Grotesk", system-ui, sans-serif; --sc-track-normal: 0; --sc-measure: 56ch; /* 07/09: as junções entre seções estavam largas demais. 10/09: +10 px por ordem do dono, pra dar mais ponte visível entre uma seção e a outra — o vão é 1,0 × esta medida (0,6 acima do título + 0,4 abaixo). */ --sc-section: calc(clamp(4rem, 9vw, 10rem) + 10px); --sc-t-4xl: clamp(2.8rem, 1.4rem + 5.4vw, 5.4rem); --sc-t-3xl: clamp(2.6rem, 1.7rem + 4.2vw, 4.8rem); --sc-t-2xl: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); --sc-t-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.15rem); --sc-t-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); --sc-t-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem); --sc-t-xs: clamp(0.72rem, 0.7rem + 0.12vw, 0.8rem); --t-indice: clamp(1.5rem, 1rem + 1.5vw, 2.4rem); /* as nove no índice: maior que xl, menor que 2xl */ --d: 240ms; --ease: cubic-bezier(0.23, 1, 0.32, 1); --track-eyebrow: 0.14em; --logo-h: 4.2rem; } html[data-tema="noite"] { --sc-canvas: #1A1715; --sc-surface: #221E1B; --sc-ink: #F1EBDD; --sc-ink-soft: #B3A594; --ink-faint: #7E7366; --sc-accent-ink: #1A1715; --hair: rgba(241, 235, 221, 0.14); --hair-ouro: rgba(190, 145, 56, 0.6); --w-display: 300; --w-body: 300; --w-strong: 500; --lh-display: 1.06; --lh-body: 1.66; --sc-track-tight: -0.012em; --sc-track-snug: -0.008em; --scrim: rgba(26, 23, 21, 0.86); --assinatura: #FFFFFF; --fio-op: 0.22; --fio-w: 0.42; /* 07/09: mais apagado (era 0,42); no pouso da janela sobe a 0,92 */ --traco-ouro-op: 0.6; /* no escuro a linha fina de ouro brilha: a 60 %, regra 6 da partitura */ --marca-texto: #F1EBDD; /* a marca negativa: placa azul, lettering claro; as curvas são recortes e mostram o fundo (07/09) */ --foto-tom: brightness(0.62) saturate(0.78); /* a foto como fundo: escurecida e dessaturada, sem perder a madeira */ --foto-tom-forte: brightness(0.5) saturate(0.72); --sc-shadow-color: 24 20% 3%; color-scheme: dark; } html[data-tema="papel"] { --sc-canvas: #F3EEE3; --sc-surface: #EBE4D6; --sc-ink: #373435; --sc-ink-soft: #6B635A; --ink-faint: #9A8F82; --sc-accent-ink: #F3EEE3; --hair: rgba(55, 52, 53, 0.16); --hair-ouro: rgba(190, 145, 56, 0.55); --w-display: 260; --w-body: 300; --w-strong: 400; --lh-display: 1.04; --lh-body: 1.6; --sc-track-tight: -0.018em; --sc-track-snug: -0.012em; --scrim: rgba(243, 238, 227, 0.86); --assinatura: var(--azul); --fio-op: 0.3; --fio-w: 0.6; /* 07/09: era 0,55 */ --traco-ouro-op: 1; --marca-texto: #373435; /* a marca positiva: as curvas mostram o papel */ --foto-tom: brightness(0.92) saturate(0.72) contrast(0.96); --foto-tom-forte: brightness(0.8) saturate(0.6); --sc-shadow-color: 36 20% 30%; color-scheme: light; } /* O motor deriva hairlines de --sc-ink; a casa usa as suas (16 % claro / 14 % escuro). */ :root { --sc-hairline: var(--hair); --sc-hairline-strong: var(--hair); } /* ---- 2 · tipografia -------------------------------------------------------- */ html { scroll-behavior: auto; } /* 07/09: a página rolava 12px de lado no celular (as SETE, não só as finais). O motor põe overflow-x:clip no body, mas com visível o transbordo ainda vaza pro viewport. `clip` não cria caixa de rolagem: o pin (sticky) e o parallax continuam medidos — conferido a 390px e a 1440px antes de entrar. */ html { overflow-x: clip; } body { font-weight: var(--w-body); line-height: var(--lh-body); font-size: var(--sc-t-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--ouro); color: #fff; } p { margin: 0; text-wrap: pretty; } a { color: inherit; } strong { font-weight: var(--w-strong); } .display { font-family: var(--sc-font-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--sc-track-tight); margin: 0; text-wrap: balance; font-optical-sizing: auto; font-variation-settings: "SOFT" 40, "opsz" 144; } .display--3xl { font-size: var(--sc-t-3xl); } .display--2xl { font-size: var(--sc-t-2xl); } .display em, .display i { font-style: italic; font-weight: inherit; } .eyebrow { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--sc-ink-soft); } .lede { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); max-width: 44ch; } .versalete { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--sc-ink-soft); } /* ---- 3 · o palco: o fio atrás, a página na frente ----------------------- */ main { position: relative; z-index: 1; } #fio { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } #fio.fio--capa { z-index: 2; } /* na capa, ACIMA da película e da cortina (as duas pintam no 1); o #fio é o primeiro filho do body, então empate perde pra elas */ #fio.fio--sobre { z-index: 2; } #fio svg { position: absolute; left: 0; top: 0; width: 1000px; height: 125px; overflow: visible; transform-origin: 0 0; will-change: transform; stroke: var(--ouro); stroke-width: var(--fio-w); fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: var(--fio-op); } #fio svg #cotas, #fio svg text { display: none; } #fio svg [data-fio] path, #fio svg [data-fio] line, #fio svg [data-fio] polyline { stroke-dasharray: var(--L) var(--L); stroke-dashoffset: var(--L); } #fio svg circle, #fio svg rect { opacity: 0; transition: opacity 200ms var(--ease); } #fio svg circle.on, #fio svg rect.on { opacity: 1; } #marca-janela { position: fixed; left: var(--sc-gutter); bottom: clamp(2.5rem, 8vh, 6rem); z-index: 4; pointer-events: none; opacity: 0; width: clamp(9rem, 16vw, 15rem); } #marca-janela svg { display: block; width: 100%; height: auto; --marca-placa: #fff; --marca-filete: #fff; --marca-texto: #fff; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35)); } #marca-janela.marca--maior { width: clamp(12rem, 24vw, 22rem); } /* o espaço entre seções é UM clamp(5rem, 12vw, 14rem); mais ar acima do título (60 %) que abaixo (40 %) */ .secao { padding-top: calc(var(--sc-section) * 0.6); padding-bottom: calc(var(--sc-section) * 0.4); } /* 10/09: o respiro antes da janela — um trecho de fundo liso onde a ponte, já inteira, aparece sozinha antes de entrar na foto. Sem ele a imagem subia a 28 px da última fila de retratos e a ponte só reaparecia com a foto já em tela cheia; o momento simplesmente não existia. A volta da ponte dentro deste trecho está em fio.js. O seletor é a CONFIGURAÇÃO, não o nome da página: só onde a Equipe é o último ato antes da janela — o arranjo que o dono criou em 10/09 ao pôr o Código na frente. Nas outras seis quem antecede a janela é o Código, e elas ficam com a partitura de 07/09 intacta (o martelo: só a escura recebe mudança; e o teto de 13,9 vh da partitura é invariante — a costura pegou uma delas em 13,98 quando a regra era genérica). */ :root { --respiro-ponte: 115svh; } /* acima de 100svh de propósito: abaixo disso nunca existe um quadro só de fundo liso — a foto já está subindo quando a última fila sai por cima */ /* O respiro só existe onde a ponte aparece. Medido em 10/09, e conferido contra a URL no ar (que não tem nenhuma mudança de hoje): no telefone o fio NUNCA entra na tela — 36 de 36 amostras acesas fora dela, cobertura máxima de 29 % da largura — porque ali ele roda em modo retrato, um recorte central estreito, e a câmera já viajou muito quando o fio acende. É defeito antigo e é obra à parte; até ele cair, abrir um respiro no celular seria uma tela de escuro vazio. O corte é o MESMO do motor do fio (scrollcraft.js, isMobile: largura ≤ 860). */ @media (min-width: 861px) { .equipe:has(+ .janela) { padding-bottom: calc(var(--sc-section) * 0.4 + var(--respiro-ponte)); } } /* ---- a PLUMA: quem apaga o fio atrás do texto (10/09) ------------------------------------------------------- Até 10/09 o fio era RECORTADO por trás de cada bloco de texto e de cada trilho (buracos retangulares na máscara do fio, em fio.js) — e a ponte morria em aresta reta na borda de cada coluna e de cada row. O dono viu as arestas. Agora o fio só é recortado atrás de FOTO (borda que já é reta). Atrás de texto quem o apaga é a pluma: um pseudo-elemento da cor do fundo, sólido num miolo que sobra 1,5 rem além do texto, e que se dissolve pra fora nas quatro bordas ao longo de --pluma-x / --pluma-y. A forma é um retângulo com as bordas em degradê, feita pela INTERSEÇÃO de duas máscaras lineares (uma por eixo) — radial daria elipse e deixaria os cantos sem cobertura. Zero DOM; nenhum bloco com pluma leva data-sc-cue, então o motor da verificação nunca a esconde junto com o texto. O palco: cada seção é um plano (z-index 1) acima do fio (z-index 0), e a pluma é o FUNDO desse plano (z-index -1 dentro dele). Assim ela fica acima do fio e abaixo de todo texto da seção — inclusive do texto dos blocos vizinhos, que a pluma alcança porque sobra além do próprio bloco (a 1ª versão isolava cada bloco e a pluma do texto de O Escritório pintava por cima do título, apagando-o). */ :root { --pluma-x: clamp(2.5rem, 6vw, 6rem); --pluma-y: clamp(2.5rem, 8vh, 6rem); --pluma-miolo: 1.5rem; } .secao, .areas { position: relative; z-index: 1; } .bloco, .escritorio__titulo, .equipe .sc-wrap { position: relative; } .bloco::before, .escritorio__titulo::before, .equipe .sc-wrap::before, .motor-area::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--scrim); inset: calc(-1 * (var(--pluma-y) + var(--pluma-miolo))) calc(-1 * (var(--pluma-x) + var(--pluma-miolo))); -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3) calc(var(--pluma-x) * 0.5), #000 var(--pluma-x), #000 calc(100% - var(--pluma-x)), rgba(0, 0, 0, 0.3) calc(100% - var(--pluma-x) * 0.5), transparent), linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3) calc(var(--pluma-y) * 0.5), #000 var(--pluma-y), #000 calc(100% - var(--pluma-y)), rgba(0, 0, 0, 0.3) calc(100% - var(--pluma-y) * 0.5), transparent); mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3) calc(var(--pluma-x) * 0.5), #000 var(--pluma-x), #000 calc(100% - var(--pluma-x)), rgba(0, 0, 0, 0.3) calc(100% - var(--pluma-x) * 0.5), transparent), linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3) calc(var(--pluma-y) * 0.5), #000 var(--pluma-y), #000 calc(100% - var(--pluma-y)), rgba(0, 0, 0, 0.3) calc(100% - var(--pluma-y) * 0.5), transparent); -webkit-mask-composite: source-in; mask-composite: intersect; } /* ---- 4 · a barra: logo real, o índice no meio, um link à direita --------- 07/09: o folio saiu da margem (colidia com todo conteúdo que começa no gutter) e virou o índice da barra, horizontal, centralizado; o capítulo ativo acende. A barra é o ÚNICO elemento fixo além do WhatsApp. */ .barra { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: clamp(0.9rem, 2vw, 1.4rem) var(--sc-gutter); pointer-events: none; } .barra > * { pointer-events: auto; } .barra__marca { display: block; height: var(--logo-h); color: var(--sc-ink); justify-self: start; } .barra__marca svg { display: block; height: 100%; width: auto; } /* 10/09: só o índice sobe um fio (a marca e o "Fale conosco" ficam onde estão, por ordem do dono) */ .barra__nav { justify-self: center; transform: translateY(-0.4rem); display: flex; gap: clamp(1.1rem, 2.2vw, 2.2rem); margin: 0; padding: 0; list-style: none; } .barra__nav a { display: block; font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--sc-ink-soft); padding: 0.55rem 0 0.4rem; border-bottom: 1px solid transparent; transition: color var(--d) var(--ease), border-color var(--d) var(--ease); } .barra__nav a:hover, .barra__nav li.ativo a { color: var(--sc-ink); } .barra__nav li.ativo a { border-color: var(--ouro); } /* FRO-312 · a terceira célula da barra passou a ter DOIS moradores: o Instagram e o "Fale conosco". O `justify-self` que era do botão subiu pra caixa; o ícone acompanha a altura do texto e usa a mesma cor calada dos itens do índice. */ .barra__fim { justify-self: end; display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.3rem); } .barra__instagram { display: block; color: var(--sc-ink-soft); transition: color var(--d) var(--ease); } .barra__instagram svg { display: block; width: 1.15rem; height: 1.15rem; filter: drop-shadow(0 1px 2px color-mix(in oklab, var(--sc-canvas) 55%, transparent)); } .barra__instagram:hover { color: var(--sc-ink); } .barra__cta { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; text-decoration: none; color: var(--sc-ink); padding: 0.55rem 0 0.4rem; border-bottom: 1px solid var(--ouro); transition: border-color var(--d) var(--ease); } .barra__cta:hover { border-color: var(--sc-ink); } .barra__nav a, .barra__cta { text-shadow: 0 1px 2px color-mix(in oklab, var(--sc-canvas) 55%, transparent); } .barra__cta:active { transform: translateY(1px); } /* um degradê do fundo do tema atrás da barra: as cinco têm capa fotográfica em toda a largura */ .barra::before { content: ""; position: absolute; inset: 0 0 -28% 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 74%, transparent), color-mix(in oklab, var(--sc-canvas) 34%, transparent) 60%, transparent); } @media (max-width: 1000px) { .barra { grid-template-columns: auto 1fr auto; } .barra__nav { display: none; } } @media (max-width: 640px) { .barra__marca { height: 2.6rem; } } /* ---- 5 · (o folio da margem foi aposentado em 07/09; o índice mora na barra) ---- */ /* ---- 6 · o botão de WhatsApp, igual ao do site atual ---------------------- */ .zap { position: fixed; right: clamp(1rem, 2.4vw, 1.75rem); bottom: clamp(1rem, 2.4vw, 1.75rem); z-index: var(--sc-z-chrome); width: 3.25rem; height: 3.25rem; border-radius: 999px; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); transition: transform var(--d) var(--ease); } @media (hover: hover) and (pointer: fine) { .zap:hover { transform: translateY(-1px); } } .zap:active { transform: scale(0.97); } .zap svg { width: 1.7rem; height: 1.7rem; fill: currentColor; } /* ---- 7 · a capa (chegada): a foto ou o filme em TODA a largura; a caixa de texto varia por composição -- pano = foto parada (parallax ou zoom lento) · filme = o clipe esfregado (scrub) cobrindo o palco. A caixa: baixo (canto inferior esquerdo, subida) · meio (a meia altura, medida estreita: a frase quebra em mais linhas) · alto (logo abaixo da barra, o nome do escritório como legenda embaixo). A faixa do fundo do tema segue a caixa. */ .capa { position: relative; } .capa__media { position: absolute; inset: 0; overflow: clip; } .capa__media img, .capa__media video, .capa__media .sc-stage__poster { display: block; width: 100%; height: 100%; object-fit: cover; } .capa__media img { filter: var(--foto-tom); } .capa--filme .capa__media { filter: var(--foto-tom); } .capa__copy { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(3.5rem, 12svh, 8rem); z-index: 2; display: grid; align-content: end; gap: var(--sc-4); } .capa__copy .eyebrow { color: var(--sc-ink-soft); } .capa__frase { max-width: 30ch; font-size: var(--sc-t-4xl); } .faixa { position: absolute; left: 0; right: 0; bottom: 0; top: 30svh; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 40%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 72%, transparent 100%); } .capa--pano { min-height: 100svh; overflow: clip; } /* a caixa à direita, do meio pra baixo, com a frase um degrau menor e mais estreita */ .capa--direita .capa__copy { left: 50%; right: var(--sc-gutter); bottom: clamp(3.5rem, 14svh, 9rem); } .capa--direita .capa__frase { font-size: var(--sc-t-3xl); max-width: 22ch; } .capa--direita .faixa { inset: 0; background: linear-gradient(to left, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 40%, color-mix(in oklab, var(--sc-canvas) 22%, transparent) 66%, transparent 100%); } /* na capa parada, a faixa das caixas fora do padrão cobre a capa inteira: nada de borda dura a 30svh */ .capa--parada.capa--direita .faixa, .capa--parada.capa--meio .faixa, .capa--parada.capa--alto .faixa { top: 0; bottom: 0; height: auto; } @media (max-width: 860px) { .capa--direita .capa__copy { left: var(--sc-gutter); } .capa--direita .capa__frase { font-size: var(--sc-t-2xl); max-width: none; } .capa--direita .faixa { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 55%, transparent 100%); } } /* pano parado: a capa mede 130svh; o chão do tema entra por baixo da foto e a caixa senta acima dele */ .capa--parada { min-height: 130svh; overflow: clip; } .capa--parada .capa__media { inset: -8% 0 auto 0; height: 116svh; } .capa--parada .faixa { top: 30svh; bottom: 0; height: auto; } .capa--parada .chao { position: absolute; left: 0; right: 0; bottom: 0; height: 30svh; background: var(--sc-canvas); z-index: 1; } .capa--parada .capa__copy { bottom: calc(30svh + clamp(3rem, 10svh, 7rem)); } .capa--parada.capa--direita .capa__copy { bottom: calc(30svh + clamp(3rem, 10svh, 7rem)); } /* a caixa do meio numa capa parada: 50% de 130svh cairia abaixo da dobra — centra na tela que se vê */ .capa--parada.capa--meio .capa__copy { top: 48svh; bottom: auto; translate: 0 -50%; } /* filme: o palco do scrub é a capa inteira; a mídia cobre o palco; a faixa e a caixa dentro dele */ .capa--filme [data-sc-stage] { position: relative; } /* a caixa a meia altura, estreita: a frase quebra em 5–6 linhas, a faixa vem da esquerda */ .capa--meio .capa__copy { top: 50%; bottom: auto; translate: 0 -50%; right: 45%; } .capa--meio .capa__frase { max-width: 22ch; } .capa--meio .faixa { inset: 0; background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 42%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 68%, transparent 100%); } /* a caixa a meia altura, à direita (depois das regras do meio: mesma especificidade, a última vence) */ .capa--meio-dir .capa__copy { left: 44%; right: var(--sc-gutter); } .capa--meio-dir .capa__frase { font-size: var(--sc-t-3xl); max-width: 24ch; } .capa--meio-dir .faixa { background: linear-gradient(to left, color-mix(in oklab, var(--sc-canvas) 93%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 34%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 52%, color-mix(in oklab, var(--sc-canvas) 24%, transparent) 76%, transparent 100%); } @media (max-width: 860px) { .capa--meio-dir .capa__copy { left: var(--sc-gutter); } } /* a caixa no alto, logo abaixo da barra; o nome do escritório vira legenda embaixo da frase */ .capa--alto .capa__copy { top: clamp(7.5rem, 22svh, 13rem); bottom: auto; align-content: start; } .capa--alto .capa__copy .eyebrow { order: 2; } .capa--alto .capa__frase { max-width: 26ch; } .capa--alto .faixa { inset: 0; background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 78%, transparent) 48%, color-mix(in oklab, var(--sc-canvas) 20%, transparent) 78%, transparent 100%); } @media (max-width: 860px) { .capa__frase { font-size: var(--sc-t-2xl); max-width: none; } .capa__copy { bottom: clamp(2rem, 8svh, 4rem); padding-right: 3.75rem; } /* a última linha não passa sob o botão do WhatsApp */ .capa--parada .capa__copy { bottom: calc(30svh + clamp(1.5rem, 5vh, 3rem)); } .capa--meio .capa__copy { right: var(--sc-gutter); } .capa--meio .capa__frase { max-width: none; } .capa--meio .faixa { background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 80%, transparent) 70%, transparent 100%); } .capa--alto .capa__copy { top: 6rem; } .faixa { top: 24svh; } } /* ---- 7c · a TROCA da capa: duas fotos, uma dando lugar à outra por CORTINA, não por dissolução -- Dissolver duas fotos de geometrias diferentes produz fantasma de dupla exposição — feio. Aqui a de cima é varrida por uma máscara de borda larguíssima (meia tela de esfumado): em cada ponto vê-se uma foto só, e a passagem é uma cortina de luz atravessando. O zoom vai em sentidos opostos: a de cima avança enquanto a de baixo recua. Ciclo lento — a capa é respiração, não slide. */ .capa__troca { --troca: 21s; } .capa__troca > div { position: relative; height: 100%; } .capa__troca img { position: absolute; inset: 0; will-change: transform; } .capa__troca .troca-base { animation: capa-recua var(--troca) ease-in-out infinite; } /* A máscara da cortina é a MESMA nas duas partituras (7c e 7d): borda de meia tela varrendo uma faixa de 250%. Fica numa regra só; cada partitura depois diz apenas de onde parte e para onde vai. */ .capa__troca .troca-topo, .capa__troca--fila .troca-2, .capa__troca--fila .troca-3, .capa__troca--fila .troca-4, .capa__troca--fila .troca-5 { -webkit-mask-image: linear-gradient(to right, transparent 0 40%, #000 60% 100%); mask-image: linear-gradient(to right, transparent 0 40%, #000 60% 100%); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .capa__troca .troca-topo { animation: capa-cortina var(--troca) cubic-bezier(0.62, 0.02, 0.34, 1) infinite, capa-avanca var(--troca) ease-in-out infinite; } /* revelada (100%) → varrida (0%) → parada → varrida de volta. Os patamares são longos; a passagem, curta e macia. */ @keyframes capa-cortina { 0%, 38% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 50%, 88% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } 100% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } } @keyframes capa-avanca { 0% { transform: scale(1.005); } 50% { transform: scale(1.075); } 64%, 100% { transform: scale(1.005); } } @keyframes capa-recua { 0%, 100% { transform: scale(1.08); } 50% { transform: scale(1.005); } } @media (prefers-reduced-motion: reduce) { .capa__troca img { animation: none; } .capa__troca .troca-topo { -webkit-mask-position: 100% 0; mask-position: 100% 0; } } /* ---- 7d · a FILA DE CORTINAS: a capa passa por várias fotos, não por duas (FINAL escura, FRO-312) ---------- Mesma cortina da 7c, enfileirada. As camadas ficam empilhadas: a 1 embaixo, sem máscara; as de cima, cada uma varrida pela máscara compartilhada. Quem está por cima e revelado é o que se vê — a partitura é uma fila: a 2 entra sobre a 1, a 3 sobre a 2, e assim por diante; no fim a ÚLTIMA sai, devolvendo a 1 e fechando o ciclo. Duas curvas dão conta de todas as camadas, porque todo passo do meio é o MESMO gesto deslocado de fase: · capa-cortina-passo entra, segura, e volta à posição varrida por SALTO (steps) enquanto está coberta pela seguinte. Se a volta fosse interpolada, apareceria uma cortina fantasma no meio de outra foto. · capa-cortina-fim entra, segura, e SAI varrendo — é ela que devolve a primeira foto e emenda o ciclo. Cada camada só precisa do seu atraso negativo, e o mesmo atraso serve para o zoom. Os números abaixo valem para CINCO fotos em 47,5 s (9,5 s cada, o tempo que o dono cravou em 10/09). A fórmula, para quem mudar a quantidade: fase = 100/N % · cortina ≈ 6 % · a camada i começa em (i-1)·fase − cortina · o atraso dela é −(1 − começo) · a volta por salto cai em fase+cortina+folga do começo dela · a janela de zoom é fase+cortina. Com N=5: fase 20 %, cortina 6 %, começos em 14/34/54/74 %, volta aos 30 %, zoom de 26 %. O zoom alterna de sentido a cada foto. Com quantidade ÍMPAR uma vizinhança repete o sentido; ela foi posta na emenda do ciclo (a última e a primeira recuam), que é onde a cortina já domina a atenção. */ .capa__troca--fila { --troca: 47.5s; } /* as de cima começam varridas; a máscara em si veio da regra compartilhada da 7c */ .capa__troca--fila .troca-2, .capa__troca--fila .troca-3, .capa__troca--fila .troca-4, .capa__troca--fila .troca-5 { -webkit-mask-position: 0% 0; mask-position: 0% 0; } .capa__troca--fila .troca-1 { animation: capa-recua-fase var(--troca) ease-in-out calc(var(--troca) * -0.06) infinite; } .capa__troca--fila .troca-2 { animation: capa-cortina-passo var(--troca) cubic-bezier(0.62, 0.02, 0.34, 1) calc(var(--troca) * -0.86) infinite, capa-avanca-fase var(--troca) ease-in-out calc(var(--troca) * -0.86) infinite; } .capa__troca--fila .troca-3 { animation: capa-cortina-passo var(--troca) cubic-bezier(0.62, 0.02, 0.34, 1) calc(var(--troca) * -0.66) infinite, capa-recua-fase var(--troca) ease-in-out calc(var(--troca) * -0.66) infinite; } .capa__troca--fila .troca-4 { animation: capa-cortina-passo var(--troca) cubic-bezier(0.62, 0.02, 0.34, 1) calc(var(--troca) * -0.46) infinite, capa-avanca-fase var(--troca) ease-in-out calc(var(--troca) * -0.46) infinite; } .capa__troca--fila .troca-5 { animation: capa-cortina-fim var(--troca) cubic-bezier(0.62, 0.02, 0.34, 1) calc(var(--troca) * -0.26) infinite, capa-recua-fase var(--troca) ease-in-out calc(var(--troca) * -0.26) infinite; } /* 100% = revelada · 0% = varrida. Tempo LOCAL de cada camada: 0 é o instante em que ela começa a entrar. */ @keyframes capa-cortina-passo { 0% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } 6% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 30% { -webkit-mask-position: 100% 0; mask-position: 100% 0; animation-timing-function: steps(1, end); } 31%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } } @keyframes capa-cortina-fim { 0% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } 6%, 20% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 26%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } } /* O mesmo par avança/recua da 7c, só que rodando na janela de exposição de UMA foto: 26% do ciclo. Fora dela a escala volta por salto, sempre com a foto coberta. O sufixo "-fase" é o que separa este par do da troca de duas. */ @keyframes capa-avanca-fase { 0% { transform: scale(1.005); } 26% { transform: scale(1.075); animation-timing-function: steps(1, end); } 27%, 100% { transform: scale(1.005); } } @keyframes capa-recua-fase { 0% { transform: scale(1.075); } 26% { transform: scale(1.005); animation-timing-function: steps(1, end); } 27%, 100% { transform: scale(1.075); } } @media (prefers-reduced-motion: reduce) { /* nada troca: fica a PRIMEIRA foto, parada; as outras seguem varridas. O `animation: none` precisa repetir os seletores: a regra geral da 7c (`.capa__troca img`) pesa menos que `.capa__troca--fila .troca-1` e perdia a disputa — a capa seguia respirando pra quem pediu que ela parasse. */ .capa__troca--fila .troca-1, .capa__troca--fila .troca-2, .capa__troca--fila .troca-3, .capa__troca--fila .troca-4, .capa__troca--fila .troca-5 { animation: none; transform: none; } .capa__troca--fila .troca-2, .capa__troca--fila .troca-3, .capa__troca--fila .troca-4, .capa__troca--fila .troca-5 { -webkit-mask-position: 0% 0; mask-position: 0% 0; } } /* ---- 7b · o zoom suave: a foto de fundo cresce devagar quando a seção entra (zoom-on vem do montar.js, uma vez) ---- */ .zoom-suave img, .zoom-suave video, .zoom-suave .sc-stage__poster { transition: transform 22s cubic-bezier(0.16, 0.5, 0.2, 1); will-change: transform; } .zoom-suave.zoom-on img, .zoom-suave.zoom-on video, .zoom-suave.zoom-on .sc-stage__poster { transform: scale(1.07); } @media (prefers-reduced-motion: reduce) { .zoom-suave img, .zoom-suave video, .zoom-suave .sc-stage__poster { transition: none; transform: none !important; } } /* ---- 8 · O Escritório: o texto numa coluna; a foto é fundo ou é uma vertical ancorada na borda ----- fundo (noite): a foto do escritório em toda a seção, tonalizada forte, com uma fatia vertical na borda direita. papel: o fundo do tema; à direita uma única vertical que sangra até a borda da tela, grudada (sticky) enquanto os três parágrafos passam. Sem par parágrafo-foto: a foto compõe a seção, não ilustra a frase. */ .escritorio { position: relative; overflow: clip; } .escritorio__titulo { margin-bottom: var(--sc-5); } /* 10/09 (2ª volta do dono): a coluna tinha 563 px e a seção fechava em 1100 px numa tela de 900 — dava pra ler o parágrafo, não a seção. Quem apertava não era o `max-width`: era a grade, que dava metade do vão pra foto vertical. A coluna da foto passou a ser FIXA, na mesma largura da foto do Código (22rem no máximo), e o que sobra é do texto — é a régua que o dono mandou usar. Resultado a 1440×900: o texto foi de 563 px a 726 px, a altura dele caiu de 865 px pra 656 px, e a seção deixou de estourar a tela. Em telas de 800 px de altura ainda sobra um pouco: ali não cabem ao mesmo tempo a foto na largura do Código e o texto inteiro numa tela só. */ .escritorio__texto { display: grid; gap: var(--sc-4); max-width: 72ch; } .escritorio__texto p { font-size: var(--sc-t-lg); line-height: 1.5; } .escritorio__texto p + p { padding-top: var(--sc-4); border-top: 1px solid var(--hair); } /* fundo */ .escritorio--fundo { min-height: 100svh; display: grid; align-content: center; } .escritorio--fundo .escritorio__fundo { position: absolute; inset: 0; z-index: -1; overflow: clip; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); } .escritorio--fundo .escritorio__fundo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: var(--foto-tom-forte); } .escritorio--fundo .escritorio__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in oklab, var(--sc-canvas) 62%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 40%, transparent) 55%, color-mix(in oklab, var(--sc-canvas) 12%, transparent) 100%); } .escritorio--fundo .escritorio__fundo--parallax img { scale: 1.14; } .fatia { position: absolute; top: 8%; bottom: 8%; right: 0; width: clamp(9rem, 17vw, 16rem); margin: 0; overflow: clip; z-index: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 32%); mask-image: linear-gradient(to right, transparent, #000 32%); } .fatia img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: var(--foto-tom); } .escritorio--fundo .sc-wrap { position: relative; z-index: 1; } /* papel */ .escritorio--papel { min-height: 100svh; display: grid; align-content: center; } .escritorio--papel .sc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(15rem, 24vw, 22rem); grid-template-rows: auto 1fr; gap: 0 var(--sc-9); align-items: start; } .escritorio--papel .escritorio__texto { align-self: start; } /* colado ao título, como no fundo escuro */ .escritorio--papel .vertical { grid-row: 1 / 3; grid-column: 2; } .escritorio--papel .escritorio__titulo { grid-column: 1; grid-row: 1; } .escritorio--papel .escritorio__texto { grid-column: 1; grid-row: 2; } .vertical { position: sticky; top: 12svh; height: 76svh; margin: 0 calc(-1 * var(--sc-gutter)) 0 0; overflow: clip; justify-self: end; width: min(100%, 22rem); } .vertical img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: var(--foto-tom); } @media (max-width: 860px) { .escritorio--papel .sc-wrap { grid-template-columns: 1fr; } /* 10/09: a coluna única não bastava. A foto seguia PRESA em `grid-column: 2`, e uma coluna explícita mais um item mandado pra segunda cria uma coluna IMPLÍCITA — o texto ficava com 152 px num telefone de 390 px, quatro parágrafos numa tira. Defeito antigo, que estava no ar; apareceu ao medir o celular no ajuste de largura do desktop. No telefone a foto desce pra baixo do texto, que é o que a coluna única sempre quis dizer. */ .escritorio--papel .vertical { grid-column: 1; grid-row: auto; } /* `justify-self: stretch` junto: sem ele o `justify-self: end` da regra base encolhia a foto e as margens negativas nunca chegavam na borda. */ .vertical { position: relative; top: auto; height: 60svh; width: auto; justify-self: stretch; margin: 0 calc(-1 * var(--sc-gutter)); } .fatia { display: none; } .escritorio__texto { max-width: none; } } /* ---- 9 · áreas: tipo que dê vontade de ler; o índice em duas colunas de verdade; o trilho em cartas ------ */ .cabeca .display { margin-top: var(--sc-4); } .cabeca .lede { margin-top: var(--sc-3); } .area__num { font-family: var(--sc-font-display); color: var(--ouro); font-variant-numeric: tabular-nums; font-weight: var(--w-display); } .area__reg { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--sc-ink-soft); } .area__problema { color: var(--sc-ink); } .area__lista { margin: 0; padding: 0; list-style: none; color: var(--sc-ink); font-size: var(--sc-t-base); } .area__lista li { display: flex; align-items: center; gap: 0.7rem; line-height: 1.5; } .area__lista li::before { content: ""; flex: none; width: 1.25rem; height: 1px; background: var(--ouro); opacity: var(--traco-ouro-op); } .motor-area { display: grid; gap: var(--sc-4); align-content: start; position: relative; } /* a pluma da carta de área mora no bloco da pluma (seção 3), junto com a dos outros blocos */ .motor-area .area__cab { display: grid; gap: var(--sc-2); } .motor-area .area__titulo { font-size: var(--sc-t-3xl); font-weight: 400; } .motor-area .area__problema { font-size: var(--sc-t-xl); max-width: 26ch; color: var(--sc-ink-soft); } .motor-area .area__lista { display: grid; gap: var(--sc-2); margin-top: var(--sc-3); } /* trilho (pan): o título é o primeiro item, a nona a última, com respiro; cada área é uma carta com filete e número grande */ .areas--motor { padding: 0; } /* sem overflow aqui: o motor já recorta o palco, e em movimento reduzido ele VIRA uma região de scroll (overflow-x: auto) */ .areas--motor [data-sc-stage] { display: grid; align-content: center; padding: 5rem var(--sc-gutter) 2rem; } .rail { display: flex; align-items: stretch; gap: clamp(2rem, 4vw, 4rem); padding-inline: var(--sc-gutter); margin-inline: calc(-1 * var(--sc-gutter)); } .rail > * { flex: 0 0 auto; } .rail__cabeca { width: clamp(18rem, 34vw, 34rem); padding-right: clamp(1rem, 4vw, 4rem); align-self: center; } .rail .motor-area { width: clamp(19rem, 25vw, 25rem); padding-top: var(--sc-5); border-top: 1px solid var(--hair-ouro); } .rail .motor-area .area__titulo { font-size: var(--sc-t-2xl); } .rail .motor-area .area__problema { font-size: var(--sc-t-lg); } .rail__fim { width: clamp(10rem, 16vw, 16rem); align-self: center; } @media (prefers-reduced-motion: no-preference) { .rail > * { opacity: clamp(0.62, calc(0.62 + var(--sc-p, 0) * 3.6 - var(--i, 0) * 0.16), 1); } .rail > :first-child { opacity: 1; } } @media (max-width: 640px) { .rail .motor-area { width: 78vw; } .rail__cabeca { width: 80vw; } } /* índice pinado (pin): à esquerda o título e as nove, grandes; à direita a ativa fala, a meia altura */ .indice-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-5) var(--sc-10); align-items: center; } .indice-col { display: grid; gap: var(--sc-6); } .indice-col .cabeca { margin: 0; } .indice-col .cabeca .display { margin-top: 0; } .indice { margin: 0; padding: 0 0 0 1.75rem; list-style: none; display: grid; gap: 0.35rem; } .indice li { display: flex; align-items: baseline; gap: var(--sc-4); font-family: var(--sc-font-display); font-weight: 400; font-size: var(--t-indice); line-height: 1.18; color: var(--sc-ink-soft); cursor: pointer; transition: color var(--d) var(--ease); font-variation-settings: "SOFT" 40, "opsz" 144; } .indice li::before { content: ""; width: 1.75rem; height: 1px; background: var(--ouro); transform: scaleX(0); transform-origin: left; transition: transform var(--d) var(--ease); flex: none; align-self: center; margin-left: -1.75rem; } .indice li.ativo { color: var(--sc-ink); } .indice li.ativo::before { transform: none; } .indice li:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; } .indice small { font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.06em; color: var(--ink-faint); min-width: 1.6em; } .palco { position: relative; min-height: 24rem; } .palco .motor-area { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity var(--d) var(--ease), transform var(--d) var(--ease); pointer-events: none; align-content: center; } .palco .motor-area.ativo { opacity: 1; transform: none; pointer-events: auto; } @media (max-width: 760px) { .indice-grid { grid-template-columns: 1fr; gap: var(--sc-5); align-items: start; } .indice { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-4); padding-left: 0; } .indice li { font-size: var(--sc-t-base); gap: 0.4rem; } .indice li::before { width: 0.8rem; margin-left: 0; } .indice-col .cabeca .display { font-size: var(--sc-t-xl); } .indice-col .lede { font-size: var(--sc-t-base); } .palco { min-height: 20rem; } .palco .motor-area { align-content: start; } .motor-area .area__titulo { font-size: var(--sc-t-2xl); } } @media (prefers-reduced-motion: reduce) { .palco .motor-area { transition: none; } } /* ---- 10 · a equipe: três trilhos nativos, snap por ficha ------------------- */ .equipe__titulo { margin-bottom: var(--sc-7); } /* 10/09 (FRO-312): o `scroll-snap-type` saiu. A roda do mouse passou a andar o trilho de lado com deslize (montar.js), e o snap brigava com ele — o deslize parava e o snap puxava de volta. No toque, o trilho segue nativo. */ .trilho { display: flex; gap: var(--sc-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--sc-gutter); padding: 0 var(--sc-gutter) var(--sc-4); margin-inline: calc(-1 * var(--sc-gutter)); scrollbar-width: thin; scrollbar-color: var(--hair) transparent; -webkit-overflow-scrolling: touch; } .trilho + .trilho { margin-top: var(--sc-7); } .trilho > * { flex: 0 0 clamp(11rem, 15.5vw, 13.5rem); } .trilho__titulo { flex-basis: clamp(8rem, 11vw, 10rem); } .trilho__titulo { display: grid; align-content: center; padding-bottom: var(--sc-4); } .trilho__titulo .display { font-size: var(--sc-t-xl); } .trilho__titulo .versalete { margin-top: var(--sc-3); } .ficha { display: grid; align-content: start; } .retrato { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; filter: saturate(0.85) contrast(1.02); } html[data-tema="noite"] .retrato { filter: saturate(0.8) brightness(0.96); } .moldura { display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1px solid var(--hair-ouro); color: var(--ink-faint); font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-base); font-variation-settings: "SOFT" 40, "opsz" 144; background: repeating-linear-gradient(135deg, transparent 0 14px, var(--hair) 14px 15px); } .moldura span { background: var(--sc-canvas); padding: 0.3rem 0.8rem; text-align: center; } .ficha__nome { margin-top: var(--sc-4); font-size: var(--sc-t-lg); } .ficha__cargo { margin-top: var(--sc-2); } .ficha__linha { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; } /* FRO-312 · a OAB e o e-mail da ficha de advogado. O e-mail é UMA linha; o depois do @ é o único ponto onde ele aceita quebrar, e só quando não couber — daí `overflow-wrap: normal`, que proíbe a quebra em qualquer outro lugar. */ .ficha__oab { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; } .ficha__email { margin-top: var(--sc-2); font-size: var(--sc-t-sm); line-height: 1.5; overflow-wrap: normal; word-break: normal; } .ficha__email a { color: var(--sc-ink-soft); text-decoration: none; border-bottom: 1px solid var(--hair); transition: color var(--d) var(--ease), border-color var(--d) var(--ease); } @media (hover: hover) and (pointer: fine) { .ficha__email a:hover { color: var(--sc-ink); border-color: var(--ouro); } } @media (max-width: 640px) { .trilho > * { flex-basis: 62vw; } } /* ---- 11 · o Código: quieto; um detalhe vertical à direita, tonalizado ------------------ */ .codigo__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sc-8) var(--sc-10); align-items: center; } .codigo__texto { max-width: 52ch; } .codigo__texto p { margin-top: var(--sc-6); font-size: var(--sc-t-lg); line-height: 1.55; } .codigo__foto { margin: 0; width: min(100%, 22rem); justify-self: end; } .codigo__foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; filter: var(--foto-tom); } .codigo__link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--sc-6); padding: 0.85rem 1.5rem; border: 1px solid var(--ouro); border-radius: 999px; font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; transition: background-color var(--d) var(--ease), color var(--d) var(--ease), border-color var(--d) var(--ease); } .codigo__link::after { content: "→"; font-family: var(--sc-font-display); } @media (hover: hover) and (pointer: fine) { .codigo__link:hover { background: var(--ouro); border-color: var(--ouro); color: #fff; } } @media (max-width: 860px) { .codigo__grid { grid-template-columns: 1fr; } .codigo__foto { width: min(100%, 16rem); justify-self: start; } } /* ---- 11b · o Blog, a prévia (FRO-412) ---------------------------------------------------------------------------- A variante B aprovada na FRO-351: título, linha e chamado grudados à esquerda enquanto os quatro artigos passam à direita — a gramática do índice de Áreas. Só existe com três publicados ou mais (montar.js). No celular a coluna do lado solta e fica `relative`, nunca `static`: é ela que segura a pluma (.bloco::before) no tamanho do próprio bloco. */ .previa { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 0 var(--sc-9); align-items: start; } .previa__lado { position: sticky; top: 24svh; } .previa__lado .lede { margin-top: var(--sc-5); } .previa__chamado { margin-top: var(--sc-7); } .previa__itens { list-style: none; margin: 0; padding: 0; } .previa__item { display: block; text-decoration: none; padding: var(--sc-8) 0; border-top: 1px solid var(--hair); } .previa__itens li:last-child .previa__item { border-bottom: 1px solid var(--hair); } .previa__t { font-size: var(--sc-t-2xl); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.16em; text-decoration-thickness: 1px; transition: text-decoration-color var(--d) var(--ease); } @media (hover: hover) and (pointer: fine) { .previa__item:hover .previa__t { text-decoration-color: var(--ouro); } } .previa__item:focus-visible .previa__t { text-decoration-color: var(--ouro); } .previa__s { margin-top: var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.55; max-width: 62ch; } @media (max-width: 860px) { .previa { grid-template-columns: 1fr; } .previa__lado { position: relative; top: auto; margin-bottom: var(--sc-6); } .previa__item { padding: var(--sc-6) 0; } } /* ---- 12 · o interlúdio (B e E): uma fatia vertical na borda, não uma foto no meio da página ---- */ .interludio { position: relative; height: clamp(14rem, 32svh, 22rem); } .interludio figure { position: absolute; top: 0; bottom: 0; margin: 0; overflow: clip; width: clamp(12rem, 24vw, 22rem); } .interludio--dir figure { right: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 30%); mask-image: linear-gradient(to right, transparent, #000 30%); } .interludio--esq figure { left: 0; -webkit-mask-image: linear-gradient(to left, transparent, #000 30%); mask-image: linear-gradient(to left, transparent, #000 30%); } .interludio img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: var(--foto-tom); } /* ---- 13 · a janela (pico): sem texto; a marca entra no fim ----------------- */ .janela .sc-stage__poster, .janela video { object-fit: cover; } .janela [data-sc-stage]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22svh; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--sc-canvas), transparent); } /* ---- 14 · contato e rodapé -------------------------------------------------- */ .contato__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-7); margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--hair); } .sede h3 { font-family: var(--sc-font-display); font-weight: var(--w-display); font-size: var(--sc-t-xl); margin: 0 0 var(--sc-4); font-variation-settings: "SOFT" 40, "opsz" 144; } .sede p { color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.6; } .sede .fone { margin-top: var(--sc-3); color: var(--sc-ink); } .sede a { text-decoration: none; } .sede a:hover { text-decoration: underline; text-underline-offset: 0.14em; } .contato__horario { margin-top: var(--sc-7); padding-top: var(--sc-5); border-top: 1px solid var(--hair); font-size: var(--sc-t-base); color: var(--sc-ink-soft); } .rodape { margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--hair-ouro); display: grid; grid-template-columns: auto 1fr auto; gap: var(--sc-6); align-items: end; } .rodape__marca { width: clamp(7rem, 10vw, 9.5rem); color: var(--sc-ink); } .rodape__marca svg { display: block; width: 100%; height: auto; } .rodape p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-wrap: pretty; } .rodape nav { display: flex; gap: var(--sc-5); font-size: var(--sc-t-sm); } .rodape nav a { color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--hair); } .rodape nav a:hover { border-color: var(--sc-ink); } @media (max-width: 860px) { .contato__grid { grid-template-columns: 1fr; } .rodape { grid-template-columns: 1fr; align-items: start; } } /* ---- 15 · movimento de UI: 240 ms ease-out; o scroll é o único grande ------ Cada componente declara a PROPRIEDADE que transiciona (opacity, color, transform, border-color, width do filete). Nunca `transition-duration` solto: vira `transition: all`, e `visibility` passa a levar 240 ms pra sumir, o que o harness da skill fotografa como a barra ainda visível sob o texto (achado de 06/09). */ /* ---- 16 · modo specs (inspeção, não é design): tecla s ou &specs=1 --------- */ .specs-on [data-spec] { position: relative; outline: 1px dashed rgba(45, 87, 149, 0.55); outline-offset: 2px; } .specs-on [data-spec]::after { content: attr(data-spec-text); position: absolute; left: 0; top: -1.35em; z-index: 50; font: 500 10px/1.3 ui-monospace, Menlo, monospace; letter-spacing: 0; text-transform: none; font-style: normal; background: #2D5795; color: #fff; padding: 2px 6px; border-radius: 3px; white-space: nowrap; pointer-events: none; } #tabela-specs { display: none; padding: var(--sc-8) var(--sc-gutter); border-top: 1px solid var(--hair-ouro); background: var(--sc-canvas); position: relative; z-index: 1; } .specs-on #tabela-specs { display: block; } #tabela-specs table { width: 100%; border-collapse: collapse; font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--sc-ink); } #tabela-specs th, #tabela-specs td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--hair); vertical-align: top; } #tabela-specs th { font-weight: 500; color: var(--sc-ink-soft); } #tabela-specs .cor { display: inline-block; width: 0.9em; height: 0.9em; border: 1px solid var(--hair); vertical-align: -1px; margin-right: 0.35em; } /* ---- 17 · movimento reduzido: menos e mais suave, nunca zero --------------- */ @media (prefers-reduced-motion: reduce) { .escritorio__fundo--parallax img, .capa__media [data-sc-parallax] img { transform: none !important; } .zoom-lento img { transition: none !important; transform: none !important; } }