/* ========================================================================== NOVREN — LP v2 · TOKENS Portado do Figma "Studio - Website" (mkiqInBkZFEQIGV6nw7seV). --------------------------------------------------------------------------- TRAVA 1:1 --------------------------------------------------------------------------- O Figma foi desenhado a 1920px. `--px` vale exatamente 1 pixel do Figma: --px = 100vw / 1920 Toda medida da folha e escrita como `calc(N * var(--px))`, onde N e o numero que esta no arquivo. Assim a pagina nao e uma aproximacao do desenho — e o desenho, na escala da janela. A proporcao entre qualquer par de elementos e identica a do Figma em qualquer largura. Isso substitui o `clamp()` da primeira tentativa. `clamp()` acerta o teto (1920) e o piso (mobile) e interpola no meio, o que quer dizer que em nenhuma largura intermediaria o desenho batia. Dois limites: - acima de 1920 a escala congela, senao o texto cresce sem motivo; - abaixo de 1280 a trava sai (`--px: 1px`) e o layout empilha. O Figma nao tem tela mobile, entao ali nao existe 1:1 a respeitar — o que existe e uma queda legivel, e ela esta marcada como tal. ========================================================================== */ /* ---------- Fontes ---------- */ @font-face { font-family: 'PP Neue Montreal'; src: url('../fonts/PPNeueMontreal-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal'; src: url('../fonts/PPNeueMontreal-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal'; src: url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal'; src: url('../fonts/PPNeueMontreal-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal'; src: url('../fonts/PPNeueMontreal-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---------- A unidade ---------- */ --px: calc(100vw / 1920); /* ---------- Cor ---------- Escala crua extraida do design context. O arquivo do Figma nao tem nenhuma variavel: cada camada carrega o hex cravado. Aqui vira sistema. */ --c-preto: #000000; --c-tinta: #0a0a0a; --c-tinta-alt: #090909; --c-branco: #ffffff; --c-osso: #fafafa; --c-cinza-5: #f7f7f7; --c-cinza-10: #f5f5f5; --c-cinza-20: #ececec; --c-cinza-35: #e0e0e0; --c-cinza-60: #c4c4c4; --c-cinza-70: #7c7c7c; --c-cinza-75: #4b4b4b; --c-borda-esc: #313131; /* Semanticos — claro e o padrao; .is-ink inverte. */ --bg: var(--c-cinza-10); --fg: var(--c-tinta); --fg-soft: rgba(10, 10, 10, .6); --superficie: var(--c-branco); --linha: rgba(255, 255, 255, .1); /* ---------- Medidas do Figma ---------- Cada valor abaixo e o numero que esta no arquivo, em unidades --px. */ --w-conteudo: calc(1520 * var(--px)); /* coluna de conteudo */ /* Faixa larga (cases, galeria de projeto, grade de obras). No Figma sao 1836 dentro de 1920 — isto e, cheia menos 42 de cada lado. Em `vw` e nao em `--px` de proposito: `--px` congela a 1920, e ai a faixa ficava presa em 1836 enquanto a janela crescia — a secao de cases virava um bloco pequeno no meio de margem branca. Em vw ela vale sempre a mesma fracao da janela. 1836 / 1920 = 95.625%, entao ate 1920 e identico a `1836 * var(--px)`. Consequencia assumida: acima de 1920 a faixa cresce e a coluna de 1520 nao. Numa tela de 2880 os cases ocupam 95,6% e o resto 53%. E o preco de manter o tipo parado, que foi a escolha do Eduardo. */ --w-faixa: 95.625vw; --w-aside: calc(377 * var(--px)); /* coluna de rotulo (Servicos, cards) */ --w-faq: calc(758 * var(--px)); /* lista do FAQ */ --pad-moldura: calc(20 * var(--px)); /* respiro em volta dos cartoes pretos */ /* ---------- Margem lateral da pagina ---------- UM valor, para todo bloco de primeiro nivel. Antes conviviam tres sistemas — a moldura em 20, o `.wrap` em `clamp(20px, 4vw, 48px)` e um punhado de blocos com `width: 100%` e nenhuma margem. Medido a 390, a margem esquerda de doze blocos dava 20 / 0 / 20 / 0 / 0 / 20 ...; a 768 dava quatro valores diferentes. Era a queixa do Eduardo em 05/08: "tudo despadronizado". Como `--px` vale 1px abaixo de 1280, isto resolve 20 no celular e acompanha a escala no desktop, sem media query. E o mesmo respiro do cartao preto do Figma, que e o motivo estrutural do arquivo. */ --gutter: var(--pad-moldura); --pad-nav: calc(200 * var(--px)); /* px-200 da nav */ --gap-4: calc(4 * var(--px)); --gap-10: calc(10 * var(--px)); --gap-16: calc(16 * var(--px)); --r-20: calc(20 * var(--px)); /* cartao preto e case */ --r-18: calc(18 * var(--px)); /* cartao de depoimento e pilar */ --r-14: calc(14 * var(--px)); /* logo, FAQ, icone de servico */ --r-pilula: calc(100 * var(--px)); /* ---------- Tipografia (corpo / entrelinha do Figma) ---------- */ --t-hero: calc(97.375 * var(--px)); --lh-hero: calc(94.727 * var(--px)); --t-secao: calc(144 * var(--px)); --lh-secao: calc(132.48 * var(--px)); --t-cta: calc(70 * var(--px)); --lh-cta: calc(73 * var(--px)); --t-num: calc(85 * var(--px)); /* 7+ / 35+ / 15+ / 98% */ --t-num-depo: calc(56 * var(--px)); /* +35 do cartao de resumo */ --t-40: calc(40 * var(--px)); --lh-44: calc(44 * var(--px)); --t-30: calc(30 * var(--px)); --lh-37: calc(37 * var(--px)); --t-36: calc(36 * var(--px)); --t-24: calc(24.286 * var(--px)); --t-22: calc(22 * var(--px)); --lh-26: calc(26.4 * var(--px)); --t-20: calc(20 * var(--px)); --lh-23: calc(23 * var(--px)); --t-18: calc(18 * var(--px)); --lh-23-4: calc(23.4 * var(--px)); --t-16: calc(16 * var(--px)); --lh-22-4: calc(22.4 * var(--px)); --t-16-4: calc(16.421 * var(--px)); /* tag de case */ --t-15: calc(15 * var(--px)); --lh-21: calc(21 * var(--px)); --t-12: calc(12 * var(--px)); --lh-15-6: calc(15.6 * var(--px)); --t-10: calc(10 * var(--px)); --lh-11: calc(11 * var(--px)); --t-mono-hero: calc(19.189 * var(--px)); /* ---------- Escala de respiro ---------- Cinco degraus, todos multiplos de 20 — a mesma unidade da moldura, que e o motivo estrutural do arquivo. Respiro vertical na pagina sai daqui, e de mais lugar nenhum. Isto substitui o py que veio do Figma seção a seção. Portado 1:1, o vao entre seções dava 60 / 160 / 100 / 60 / 160 / 180 / 160 / 140 — sete valores sem uma logica que os explicasse. Nao era decisao de desenho: era o acumulado de cada seção ter sido desenhada no seu proprio dia. O 1:1 valeu para portar sem inventar. Passado esse ponto, o arquivo deixa de ser autoridade sobre ritmo — e ritmo e justamente onde ele estava fraco. As medidas de COMPONENTE continuam vindo do Figma e continuam conferidas (as 27 do conferir.sh); o que mudou foi o espaco ENTRE eles. */ --e-1: calc(24 * var(--px)); /* titulo -> seu proprio subtitulo */ --e-2: calc(40 * var(--px)); /* dentro de um bloco */ --e-3: calc(60 * var(--px)); /* cabeca -> conteudo da secao */ --e-4: calc(80 * var(--px)); /* respiro da secao (py) */ --e-5: calc(120 * var(--px)); /* quando precisa de mais ar */ /* ---------- Movimento ---------- */ --dur: .45s; --dur-lento: .7s; --ease: cubic-bezier(.22, 1, .36, 1); } /* ---------- Teto da escala: 1920 ---------- Acima da largura de desenho a escala congela. Tipo e medida param de crescer e a pagina passa a centralizar. Isto ja foi 2560 por algumas horas em 05/08, para a pagina encher telas largas. O Eduardo vetou: crescer tudo junto le como zoom, nao como desenho maior. Voltou para 1920 — se reabrir o assunto, e este numero. O que ficou de la: a faixa larga (`--w-faixa`) continua acompanhando a janela mesmo acima de 1920, porque a queixa original era a secao de cases presa em 1836 no meio de margem branca. Ou seja: a faixa cresce, o tipo nao. E de proposito, e e a diferenca entre as duas coisas. */ @media (min-width: 1920px) { :root { --px: 1px; } } /* Abaixo de 1280 nao ha 1:1 a cumprir: o Figma nao tem tela mobile. A unidade volta a valer 1px real (texto legivel) e o layout empilha nas media queries de cada secao. */ @media (max-width: 1280px) { :root { --px: 1px; } } /* Secao escura: os cartoes pretos do hero e de Servicos. */ .is-ink { --bg: var(--c-preto); --fg: var(--c-cinza-20); --fg-soft: rgba(255, 255, 255, .6); --superficie: var(--c-branco); --linha: rgba(255, 255, 255, .1); }