/* ============================================================================ SITE 02 · «ORBIT» — TOKENS · marca PRIMEROXY (primeroxy.com) ---------------------------------------------------------------------------- PALETA derivada da identidade Mercurio (mercuriolimited.com): · fundo escuro quase-preto #0B1019, cartões #121A26, borda #243140 · teal profundo #0F4C5C como acento único de CTA (hover #0A3A47) · teal claro #2F97AD como destaque sobre fundo escuro (eyebrow, ênfase) · texto navy #1F2937, secundário #5B6675, neutros #EEF1F4 / #E5E7EB · sinais: alta #1F9D5B (#2DD477 no escuro) · baixa #D14343 (#F2555A) ESTE É O ÚNICO ARQUIVO DO SITE COM HEX LITERAL. Todo o resto (base.css, components.css, pages/*.css) usa var(--…). ARQUITETURA DE COR — duas camadas, e a distinção importa: 1. PALETA CRUA (§01) — `--paper`, `--teal`, `--ink`… São IMUTÁVEIS. Nunca são redefinidas por contexto. Use-as quando o próprio elemento pinta a si mesmo (o fundo de uma seção escura, por exemplo). 2. TOKENS SEMÂNTICOS (§02) — `--bg`, `--fg`, `--accent`, `--line`… Mudam de valor dentro de um contexto escuro (§09). Use-as em tudo que precisa se adaptar: texto, links, bordas, superfícies de card. REGRA DE OURO: um elemento que REDEFINE `--accent` nunca deve pintar o próprio fundo com `var(--accent)`. Custom properties resolvem por cascata, não por ordem de linha — o valor novo já vale para o próprio elemento. Por isso `.tone-deep` pinta o próprio fundo com a paleta crua (`var(--night)`) e só entrega os tokens semânticos novos aos filhos. CONTRASTE — medido com a fórmula WCAG 2.1 (relative luminance), não estimado. Os valores anotados ao lado de cada cor foram recalculados para esta paleta. ========================================================================== */ :root { /* ========================================================================== §01 · PALETA CRUA — imutável ====================================================================== */ --paper: #FFFFFF; /* fundo primário */ --mist: #EEF1F4; /* fundo de bloco alternado (cinza-névoa) */ --tint: #D9ECF0; /* preenchimento leve, chips, realce (teal 18%) */ --teal: #0F4C5C; /* ACENTO ÚNICO — CTA, órbita, link, ativo */ --teal-deep: #0A3A47; /* hover do acento · texto de ênfase sobre --tint */ --teal-bright: #2F97AD; /* destaque sobre fundo escuro · ponto do logo */ --teal-glow: #79D0DD; /* hover do destaque sobre fundo escuro */ --night: #0B1019; /* bloco escuro · cortina · hero */ --ink: #1F2937; /* texto principal (navy) */ --slate: #5B6675; /* texto secundário */ --line-raw: #E5E7EB; /* borda hairline de 1px */ /* --- aparelho (mockup de celular) -------------------------------------- */ /* Proporções e cores derivadas do iPhone Pro Max: 440×956pt de tela, raio de canto ~62pt, Dynamic Island 125×37pt a 11pt do topo. */ --device-frame: #151D28; /* moldura de titânio escuro */ --device-edge: #3A4A5C; /* brilho da quina da moldura */ --device-island: #05090F; /* preto da Dynamic Island */ --device-screen: #FBFCFE; /* branco de tela, levemente frio */ --device-signal: #7F8DA3; /* ícones da barra de status */ --phone-status-icons: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2080%2014%27%3E%3Crect%20x%3D%270%27%20y%3D%279%27%20width%3D%273%27%20height%3D%275%27%20rx%3D%271.2%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%276.4%27%20width%3D%273%27%20height%3D%277.6%27%20rx%3D%271.2%27%2F%3E%3Crect%20x%3D%2710%27%20y%3D%273.8%27%20width%3D%273%27%20height%3D%2710.2%27%20rx%3D%271.2%27%2F%3E%3Crect%20x%3D%2715%27%20y%3D%271%27%20width%3D%273%27%20height%3D%2713%27%20rx%3D%271.2%27%2F%3E%3Cpath%20d%3D%27M25.4%205.4a9.4%209.4%200%200%201%2011.6%200%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M28.2%208.7a5.4%205.4%200%200%201%206%200%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2731.2%27%20cy%3D%2712.2%27%20r%3D%271.7%27%2F%3E%3Crect%20x%3D%2746%27%20y%3D%271.6%27%20width%3D%2727%27%20height%3D%2711.4%27%20rx%3D%273.6%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%2F%3E%3Crect%20x%3D%2748.4%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%276.6%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M75.4%205.6v4.2%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E"); --up: #1F9D5B; /* alta — marcador, seta, preenchimento */ --down: #D14343; /* baixa — marcador, seta, preenchimento */ /* Derivadas — existem porque a medição de contraste exigiu. `--up` (3.48:1 sobre --paper) NÃO passa AA como texto corrido; as versões `-ink` passam em paper, mist e tint. Use `--up`/`--down` para glifo, seta, ponto e preenchimento; use `--up-ink`/`--down-ink` para número e rótulo. */ --up-ink: #14703F; /* 5.7 : 1 sobre --paper */ --down-ink: #B93A3A; /* 5.6 : 1 sobre --paper */ --mist-deep: #E5E7EB; /* zebra de tabela sobre --mist */ --paper-tint: #F5F7FA; /* zebra de tabela sobre --paper */ --line-strong: #7F8DA3; /* 3.36 : 1 sobre --paper — borda de input e de controle, atende WCAG 1.4.11 (não-textual) */ --muted-ink: #64718A; /* ≥4.5 : 1 sobre --paper — SÓ placeholder de input (o input é sempre --paper; sobre --mist reprovaria) */ --faint-ink: #55616F; /* ≥4.8 : 1 sobre paper / mist / tint — texto de menor ênfase que ainda passa AA em qualquer um dos três fundos claros */ /* Camada escura */ --deep-surface: #121A26; /* card dentro de bloco --night */ --deep-line: #243140; /* borda dentro de bloco --night */ --deep-line-hover: #2F7D90;/* borda de card em hover, dentro de --night */ --tint-soft: #AEB9C9; /* 9.6 : 1 sobre --night — texto secundário */ --up-glow: #2DD477; /* 9.8 : 1 sobre --night */ --down-glow: #F2555A; /* 5.6 : 1 sobre --night */ /* Véus de contraste sobre fotografia — a ÚNICA sobreposição permitida. Sem gradiente colorido em nenhuma hipótese. */ --veil-soft: rgba(11, 16, 25, .28); --veil: rgba(11, 16, 25, .52); --veil-hard: rgba(11, 16, 25, .68); --veil-deep: rgba(15, 76, 92, .58); /* Cor opaca de máscara — usada só como canal alfa em `mask-image`. Existe para que nenhum outro arquivo precise escrever um hex. */ --mask-solid: #000000; /* Sombras — suaves e baixas. Nunca dura, nunca colorida. */ --shadow-ink: rgba(31, 41, 55, .06); --shadow-ink-2: rgba(31, 41, 55, .10); --shadow-ink-3: rgba(31, 41, 55, .14); /* ========================================================================== §02 · TOKENS SEMÂNTICOS — contexto claro (padrão) ====================================================================== */ --bg: var(--paper); --bg-alt: var(--mist); --surface: var(--paper); /* fundo de card */ --surface-2: var(--mist); /* fundo de card recuado */ --surface-tint: var(--tint); /* chip, realce, preenchimento leve */ --fg: var(--ink); --fg-muted: var(--slate); --fg-faint: var(--faint-ink); --fg-invert: var(--paper); --accent: var(--teal); --accent-2: var(--teal-bright); /* ponto do logotipo · destaque pontual */ --accent-strong: var(--teal-deep); /* hover do acento — SOBE o contraste */ --accent-fill: var(--teal); /* fundo de botão primário */ --accent-fill-hover: var(--teal-deep); --on-accent: var(--paper); /* texto sobre --accent-fill */ --line: var(--line-raw); --line-2: var(--line-strong); --sig-up: var(--up); --sig-down: var(--down); --sig-up-text: var(--up-ink); --sig-down-text: var(--down-ink); --focus: var(--teal); --zebra: var(--paper-tint); /* ========================================================================== §03 · TIPOGRAFIA ====================================================================== */ --ff-display: 'Montserrat', 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ff-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ff-mono: 'DM Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --fs-display: clamp(2.75rem, 6.2vw, 6rem); --fs-h2: clamp(2rem, 4vw, 3.5rem); --fs-h3: clamp(1.25rem, 1.7vw, 1.6rem); --fs-h4: clamp(1.0625rem, 1.1vw, 1.2rem); --fs-lead: clamp(1.0625rem, 1.3vw, 1.3rem); --fs-body: clamp(1rem, .97rem + .2vw, 1.0625rem); --fs-sm: .9375rem; --fs-xs: .8125rem; --fs-meta: .75rem; --fs-mega: clamp(4rem, 13vw, 11rem); /* número gigante de fundo */ --lh-display: .96; --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.65; --tr-display: -.03em; /* headline grande PEDE tracking negativo */ --tr-h2: -.022em; --tr-h3: -.012em; --tr-meta: .12em; /* DM Mono, caixa alta */ --fw-book: 400; --fw-medium: 500; --fw-bold: 700; --fw-display: 700; --fw-display-x: 800; /* ========================================================================== §04 · ESPAÇAMENTO — escala 4px, com degraus fluidos para o ritmo vertical ====================================================================== */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 2rem; --s-8: 2.5rem; --s-9: 3rem; --s-10: 4rem; --s-11: 5rem; --s-12: 6.5rem; /* Ritmo vertical de seção — três alturas, para NUNCA repetir o mesmo padding */ --sec-tight: clamp(2.5rem, 5vw, 4rem); --sec: clamp(4rem, 8vw, 7rem); --sec-loose: clamp(5.5rem, 11vw, 10rem); --gap: clamp(1.25rem, 2.6vw, 2.25rem); --gap-lg: clamp(2rem, 4.5vw, 4rem); --gutter: clamp(1.125rem, 4vw, 2.5rem); /* ========================================================================== §05 · FORMA — a regra que define este site Nenhum canto vivo em card, imagem, input ou botão. ====================================================================== */ --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-xl: 40px; --radius-pill: 999px; --radius-arch: 999px 999px var(--radius-lg) var(--radius-lg); /* topo em arco */ --radius-device: 36px; /* moldura de celular */ --border: 1px; --border-2: 2px; --shadow-1: 0 2px 8px var(--shadow-ink); --shadow-2: 0 6px 18px var(--shadow-ink); --shadow-3: 0 12px 32px var(--shadow-ink-2); --shadow-4: 0 24px 60px var(--shadow-ink-3); --shadow-none: 0 0 0 0 rgba(0, 0, 0, 0); /* ========================================================================== §06 · MOVIMENTO ====================================================================== */ --ease-soft: cubic-bezier(.22, .9, .3, 1); /* macio — reveal, cards */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: 180ms; --dur: 280ms; --dur-slow: 400ms; /* giro de 180° do ponto da órbita */ --dur-reveal: 620ms; --dur-curtain: 420ms; /* transição de página — teto absoluto */ --dur-lap: 1100ms; /* UMA volta do satélite na cortina de chegada */ --spin: 12s; /* volta contínua da órbita */ /* ========================================================================== §07 · LAYOUT ====================================================================== */ --wrap: 1280px; --wrap-wide: 1520px; --wrap-narrow: 760px; --wrap-text: 62ch; --header-h: 68px; /* lido pelo ui.js para compensar âncoras */ --header-gap: 10px; /* respiro da cápsula flutuante até o topo */ --arc-h: clamp(48px, 7vw, 104px); /* altura do divisor em arco */ --ring-mark: 1.05em; /* diâmetro da órbita inline */ /* ========================================================================== §08 · CAMADAS ====================================================================== */ --z-timbre: 0; --z-base: 1; --z-sticky: 20; --z-header: 60; --z-scrim: 70; --z-drawer: 80; --z-curtain: 95; --z-skip: 100; } /* ============================================================================ §09 · CONTEXTO ESCURO ---------------------------------------------------------------------------- `.tone-deep` é o bloco `--night` da direção de arte (usar 2× por página). Dentro dele o acento vira `--teal-bright`: `--teal` sobre `--night` mede apenas 1.7 : 1 e reprova AA em qualquer tamanho. Botão primário no escuro segue a Mercurio: fundo branco, texto teal. O próprio elemento pinta-se com a PALETA CRUA. Os tokens semânticos abaixo servem aos descendentes. Ver a REGRA DE OURO no topo deste arquivo. ========================================================================== */ .tone-deep { --bg: var(--night); --bg-alt: var(--deep-surface); --surface: var(--deep-surface); --surface-2: var(--deep-surface); --surface-tint: var(--deep-surface); --fg: var(--paper); --fg-muted: var(--tint-soft); --fg-faint: var(--tint-soft); --fg-invert: var(--ink); --accent: var(--teal-bright); /* 5.58 : 1 sobre --night */ --accent-2: var(--teal-bright); --accent-strong: var(--teal-glow); /* hover SOBE para 10.78 : 1 */ --accent-fill: var(--paper); --accent-fill-hover: var(--tint); --on-accent: var(--teal); /* 9.51 : 1 sobre --paper */ --line: var(--deep-line); --line-2: var(--tint-soft); --sig-up: var(--up-glow); --sig-down: var(--down-glow); --sig-up-text: var(--up-glow); --sig-down-text: var(--down-glow); --focus: var(--teal-glow); --zebra: var(--deep-surface); background-color: var(--night); color: var(--paper); } /* Contextos claros nomeados — mesma mecânica, para o agente de página alternar o ritmo sem escrever hex. */ .tone-paper { --bg: var(--paper); --surface: var(--paper); --surface-2: var(--mist); --zebra: var(--paper-tint); background-color: var(--paper); } .tone-mist { --bg: var(--mist); --surface: var(--paper); --surface-2: var(--mist); --zebra: var(--mist-deep); background-color: var(--mist); } .tone-sky { --bg: var(--tint); --surface: var(--paper); --surface-2: var(--mist); --zebra: var(--paper-tint); background-color: var(--tint); }