/* ============================================================ GRITTO / site de lançamento · OPÇÃO 2 Tokens medidos em https://catalinvintila.design em 07/09/2026 (CSS inline da página, lido com o Claude in Chrome). Base confirmada pela Marcia: fundo #0C0C0C. Acento #D65B4D (CMYK 2/80/70/0, amostra em tela fornecida por ela em 08/09/2026; a referência usa #FF4D00). A opção 1 (site/, Helvetica Now, preto #000) não usa este arquivo. ============================================================ */ /* ------------------------------------------------------------ 0. FONTE A referência usa Switzer, fonte variável (eixo de peso 100 a 900), um único .woff2 servido do próprio domínio: @font-face { font-family: Switzer; src: url("/fonts/Switzer-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap } Pesos usados na referência: 400 corpo, 500 e-mail/links, 600 display, 700 labels e contadores. Switzer é da Indian Type Foundry, distribuída pela Fontshare. Aqui ela entra pela API da Fontshare; para hospedar localmente, baixar a família em fontshare.com/fonts/switzer, colocar Switzer-Variable.woff2 em fonts/ e trocar o @import pelo @font-face acima (com o caminho ajustado). ------------------------------------------------------------ */ @import url("https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700&display=swap"); :root { /* -------------------------------------------------------- 1. COR (todos os valores lidos no :root da referência) Contraste pela fórmula WCAG 2.1 (luminância relativa sRGB). -------------------------------------------------------- */ --c-black: #0c0c0c; /* fundo principal */ --c-black-2: #151515; /* superfície elevada */ --c-grey: #d8d8d4; /* texto principal sobre preto (13,69:1) e fundo das seções claras */ --c-grey-2: #c8c8c3; /* superfície sobre o cinza (retrato, thumbs) */ --c-mut: #7b7b76; /* texto secundário sobre preto 4,60:1 AA */ --c-mut-l: #6e6e68; /* labels sobre o cinza claro 3,59:1 só AA para texto grande; a referência usa em 10-11px */ --c-ink-soft: #3a3a36; /* corpo de texto sobre o cinza 7,99:1 AAA */ --c-orange: #d65b4d; /* acento da Gritto (CMYK 2/80/70/0). Sobre preto 4,25:1 (AA só em texto grande); sobre o cinza 3,22:1 (reprova como texto, serve como fundo) */ --c-white: #ffffff; /* só em hover de nomes no showcase e no cursor */ --c-line: rgba(216, 216, 212, 0.15); /* filetes sobre preto */ --c-line-d: rgba(12, 12, 12, 0.22); /* filetes sobre o cinza */ --c-scrim: rgba(12, 12, 12, 0.42); /* véu sobre as imagens do showcase */ /* aliases semânticos usados pelo site-2 */ --bg: var(--c-black); --fg: var(--c-grey); --fg-muted: var(--c-mut); --accent: var(--c-orange); /* -------------------------------------------------------- 2. TIPOGRAFIA Mecânica da referência: nada em rem/vw puro. Cada corpo é um clamp(mínimo, vw, máximo). Entre ~390 e ~1440 o valor em vw manda; abaixo e acima trava. Os pequenos (10 a 17px) são fixos. Valores calculados nos três pontos: 1440 / 820 / 390. -------------------------------------------------------- */ --font: "Switzer", "Inter", "Helvetica Neue", Arial, sans-serif; /* display, sempre caixa alta, peso 600 */ --t-roll: clamp(64px, 15.5vw, 250px); /* CTA do rodapé 223 / 127 / 64 · lh 1 · ls -0,035em */ --t-show: clamp(56px, 10.5vw, 180px); /* nome no showcase 151 / 86 / 56 · lh 0,95 · ls -0,03em */ --t-h1: clamp(30px, 8vw, 140px); /* h1 do hero 115 / 66 / 31 (ref.: mín. 38, baixado para caber "TODO GRITO NASCE" em 390) · lh 0,95 · ls -0,035em */ --t-menu: clamp(40px, 7vw, 100px); /* links do menu 100 / 57 / 40 · lh 1,08 · ls -0,03em */ --t-h2: clamp(40px, 5.8vw, 92px); /* h2 seção clara 84 / 48 / 40 · lh 0,96 · ls -0,03em */ --t-intro: clamp(34px, 5vw, 80px); /* intro de serviços 72 / 41 / 34 · lh 0,98 · ls -0,03em */ --t-mani: clamp(28px, 4.6vw, 74px); /* manifesto, h2 da seção clara e intro de serviços (unificados a pedido da Marcia, 08/09) 66 / 38 / 28 · lh 1,12 · ls -0,02em */ --t-srv: clamp(26px, 4.6vw, 64px); /* item de serviço 64 / 38 / 26 · lh 1 · ls -0,025em */ --t-stat: clamp(36px, 4.6vw, 70px); /* contador numérico 66 / 38 / 36 · lh 1 · ls -0,03em */ --t-row: clamp(19px, 2.4vw, 34px); /* linha de lista 34 / 20 / 19 · lh 1,5 · ls -0,02em */ --t-card: clamp(40px, 12vw, 76px); /* nome no card mobile 76 / 76 / 47 · lh 0,95 · ls -0,03em */ --t-pct: clamp(70px, 13vw, 170px); /* contador do preloader 170 / 107 / 70 · lh 1 · ls -0,03em */ --t-wipe: clamp(30px, 6vw, 84px); /* label da transição 84 / 49 / 30 · ls -0,02em */ /* leitura */ --t-lead: clamp(16px, 1.5vw, 22px); /* parágrafo da seção clara 21,6 / 16 / 16 · lh 1,5 */ --t-mail: clamp(15px, 1.7vw, 20px); /* e-mail do rodapé, peso 500, ls +0,03em */ --t-body: clamp(14px, 1.15vw, 17px); /* corpo dentro dos serviços 16,6 / 14 / 14 · lh 1,5 */ --t-blurb: clamp(18px, 1.4vw, 21px); /* linha de apoio do hero (ref.: 14/1.1vw/17; +4pt a pedido da Marcia, 08/09) · lh 1,5 */ --t-base: 16px; /* body · lh 1,5 · peso 400 */ --t-meta: 15px; /* links do rodapé, peso 500 */ --t-count: 13px; /* contador do showcase, 700, ls +0,10em */ --t-small: 12px; /* índice/ano, 600-700 */ --t-label: 11px; /* .lbl: 600, ls +0,14em, caixa alta, com quadrado laranja de 9px antes */ --t-tag: 10px; /* tags nos cards, 700, ls +0,12em */ /* entrelinha e tracking (valores da referência) */ --lh-tight: 0.95; --lh-h2: 0.96; --lh-mani: 1.12; --lh-body: 1.5; --ls-display: -0.03em; --ls-h1: -0.035em; --ls-mani: -0.02em; --ls-label: 0.14em; /* -------------------------------------------------------- 3. ESPAÇO -------------------------------------------------------- */ --pad: clamp(20px, 4vw, 72px); /* margem lateral 57,6 / 32,8 / 20 */ --sec-y: clamp(48px, 7.5vh, 96px); /* respiro vertical das seções (ref.: 70/11vh/140; reduzido ~30% a pedido da Marcia, 08/09) */ --sec-y-lg: clamp(52px, 8vh, 104px); /* manifesto e rodapé (ref.: 70/12vh/150) */ --gap-grid: clamp(30px, 5vw, 100px); /* entre colunas da seção clara */ --gap-srv: clamp(14px, 3vw, 40px); /* entre colunas do item de serviço */ --row-y: clamp(18px, 2.6vh, 28px); /* altura interna das linhas de lista */ --srv-y: clamp(18px, 2.8vh, 30px); /* altura interna do item de serviço */ --pxt-h: clamp(150px, 26vh, 280px); /* faixa de transição em mosaico entre seções */ --head-y: 18px; /* padding vertical do header fixo */ --logo-w: 56px; --burger-w: 52px; --burger-h: 40px; --plus: 34px; /* ícone + do acordeão */ --stat-rule: 2px; /* filete acima dos contadores e dos serviços */ /* -------------------------------------------------------- 4. MOVIMENTO -------------------------------------------------------- */ --ease: cubic-bezier(0.83, 0, 0.17, 1); /* easing padrão da referência */ --dur-hover: 0.45s; --dur-color: 0.3s; --dur-roll: 0.55s; --grid-cols: 16; /* mosaico de pixels: 16 x 9 (o preloader usa 17 x 9) */ --grid-rows: 9; --blink: 1.6s; /* ponto laranja do "scroll" pisca em steps(2) */ } /* -------------------------------------------------------- 5. BREAKPOINTS da referência (max-width) 820 showcase dividido some, entram cards; grid da seção clara e contadores viram 1 coluna / 2 colunas 760 hero em coluna; menu em 1 coluna; serviços em 1 coluna 720 meta do rodapé em 2 colunas 640 linhas de lista escondem a coluna do meio -------------------------------------------------------- */