/* ============================================================= FASE 1 — DESIGN TOKENS Todo valor aqui foi MEDIDO na Fase 0 (getComputedStyle no site original em 1440x900, ou análise de pixel nas capturas de referência). Nenhum valor inventado. Consolidações feitas (reportadas em RELATORIO.md): 1. radius 100px (cta) + 999px (email) -> --radius-pill: 999px Nas alturas em que aparecem (40px e 131px) os dois rendem a mesma pílula perfeita. Diferença visual: zero. 2. #f1f0ec (intro do contato) + #f1f0ed (fundo do case) -> --color-paper: #f1f0ec. Distância: 1 ponto no canal B. 3. Pesos 760/780/820/830/850/900 foram MANTIDOS separados. É fonte variável e cada peso é intencional: consolidar descaracterizaria a hierarquia do original. ============================================================= */ :root { /* ---------- COR (nomeada por função) ---------- */ --color-bg: #e9e9e7; /* 155 ocorrências: fundo base */ --color-text: #111111; /* 94 ocorrências: tinta */ --color-text-muted: #aeaeaa; /* palavra apagada no about */ --color-brand: #178f9d; /* acento. 2 usos no site inteiro */ --color-surface-dark: #0d0d0d; /* fundo da seção work */ --color-surface-mint: #75d0cb; /* fundo da seção contato */ --color-text-contact: #071111; /* tinta sobre o mint */ --color-paper: #f1f0ec; /* papel do case + intro do contato */ --color-chrome: #f4f4f2; /* barra do browser no mockup */ --color-invert: #ffffff; /* nav em mix-blend-mode: difference */ /* linhas: sempre a cor do contexto com alpha */ --color-border-ink: rgba(17, 17, 17, .2); --color-border-ink-soft: rgba(17, 17, 17, .11); --color-border-paper: rgba(233, 233, 231, .24); --color-border-paper-soft: rgba(233, 233, 231, .28); --color-border-contact: rgba(7, 17, 17, .32); /* acento por projeto (a cor da placa atrás do mockup) */ --project-1: #78b4ce; --project-2: #7671ff; --project-3: #d59f8e; /* ---------- TIPOGRAFIA ---------- */ --font-display: "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif; --font-body: var(--font-display); /* pesos medidos em uso, do mais leve ao mais pesado */ --weight-normal: 400; --weight-soft: 450; /* parágrafo do projeto */ --weight-medium: 500; /* nav, meta */ --weight-semibold: 600; /* rótulos de seção */ --weight-email: 640; /* endereço grande */ --weight-label: 650; /* cta, rótulos do case */ --weight-bold: 700; --weight-case: 760; /* títulos das páginas de case */ --weight-display: 780; /* about + título do projeto */ --weight-contact: 820; /* título do contato */ --weight-work: 830; /* SELECTED PROJECTS */ --weight-number: 850; /* número gigante do projeto */ --weight-wordmark: 900; /* wordmark do loader */ /* escala de texto pequeno (valores fixos no original) */ --text-micro: 10px; /* rodapé do contato, rótulos do case */ --text-label: 11px; /* rótulos de seção, cta, footer proj. */ --text-meta: 12px; /* meta do hero, "have a project" */ --text-nav: 13px; /* links do nav */ /* escala de display (clamp conforme o original) */ --display-loader: clamp(5rem, 14.6vw, 14rem); --display-counter: clamp(2.8rem, 6vw, 6.5rem); --display-about: clamp(3.65rem, 5.9vw, 7.15rem); --display-work: clamp(5rem, 11.5vw, 11.5rem); --display-project: clamp(4rem, 8.2vw, 9rem); --display-number: clamp(12rem, 31vw, 34rem); --display-contact-intro: clamp(6.5rem, 13.5vw, 15rem); --display-contact: clamp(4.6rem, 7vw, 8.5rem); --display-email: clamp(2rem, 4.3vw, 4.6rem); --text-project-lead: clamp(1rem, 1.35vw, 1.35rem); /* entrelinha — medida, por papel */ --leading-wordmark: .67; --leading-number: .68; --leading-intro: .7; --leading-counter: .78; --leading-work: .78; --leading-contact: .78; --leading-project: .86; --leading-about: .9; --leading-email: .95; --leading-body: 1.35; --leading-label: 1.45; /* tracking — medido, negativo no display, positivo no rótulo */ --tracking-number: -.1em; --tracking-wordmark: -.085em; --tracking-intro: -.085em; --tracking-contact: -.075em; --tracking-work: -.074em; --tracking-counter: -.065em; --tracking-project: -.062em; --tracking-about: -.06em; --tracking-email: -.055em; --tracking-label: .09em; --tracking-topline: .08em; --tracking-meta: .06em; --tracking-nav: .04em; --tracking-micro: .1em; /* ---------- ESPAÇAMENTO ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 28px; --space-7: 32px; --space-8: 40px; --space-9: 90px; /* respiro abaixo do header do work */ --space-10: 104px; /* topo do about sticky */ --space-11: 112px; /* topo do work e do contato */ --space-12: 180px; /* base do work */ --gap-projects: clamp(120px, 14vw, 190px); /* ---------- LAYOUT ---------- */ /* NÃO existe container com max-width no original. O layout é full-bleed com padding lateral fixo. */ --pad-x: 40px; --nav-y: 28px; /* alturas das seções roláveis, medidas */ --about-height: 245svh; --contact-height: 210svh; /* fator da cena do hero: largura do bloco de tipo = 1.128 x altura da viewport (medido em 1440x900 -> 1015px e 1024x768 -> 866px) */ --hero-scene: 112.8; /* ---------- FORMA ---------- */ --radius-media: clamp(10px, 1.1vw, 18px); --radius-desktop: clamp(8px, .85vw, 14px); --radius-pill: 999px; --radius-circle: 50%; --shadow-desktop: 0 28px 78px rgba(0, 0, 0, .25); --shadow-desktop-hover: 0 38px 94px rgba(0, 0, 0, .34); --shadow-case: 0 42px 100px rgba(0, 0, 0, .26); /* ---------- MOVIMENTO ---------- */ --ease: cubic-bezier(.16, 1, .3, 1); /* dominante no site */ --ease-loader: cubic-bezier(.76, 0, .24, 1); --ease-soft: cubic-bezier(.2, .8, .2, 1); --duration-fast: .22s; --duration-mid: .65s; --duration-slow: 1.15s; --duration-reveal: 1.25s; } /* ---------- BREAKPOINTS REAIS DO ORIGINAL ---------- 1024 pointer fino / cursor custom 768 toque; o bloco do hero passa a sangrar 640 principal: padding 40->22, escala de display cai 420 ajuste fino de nav e about +(max-width:640) and (max-height:720): contato comprimido ----------------------------------------------------- */ @media (max-width: 640px) { :root { --pad-x: 22px; --nav-y: 20px; --display-about: clamp(2.65rem, 11.35vw, 4.7rem); --display-work: clamp(3.2rem, 14.2vw, 4.65rem); --display-project: clamp(2.8rem, 12.4vw, 4.25rem); --display-contact: clamp(3rem, 13.4vw, 4.35rem); --display-contact-intro: 19vw; --display-email: clamp(1.05rem, 5.35vw, 1.35rem); --display-loader: 21vw; --display-counter: 3.9rem; --leading-wordmark: .74; --leading-work: .82; --leading-project: .9; --leading-about: .91; --leading-contact: .88; --text-label: 9px; --text-meta: 9px; --text-micro: 8px; --about-height: 285svh; --contact-height: 205svh; --gap-projects: 118px; --space-9: 84px; --space-11: 84px; --space-12: 110px; --space-10: 80px; } } @media (max-width: 420px) { :root { --display-about: clamp(2.4rem, 11.2vw, 3.55rem); --text-nav: 11px; } }