/* ============================================================================ tokens.css — CAMADA BASE, IGUAL PARA TODOS OS CLIENTES ---------------------------------------------------------------------------- Arquitetura em 3 camadas (§5.1): PRIMITIVOS --n-*, --a-* -> valores crus. NUNCA use em componente. SEMANTICOS --fg, --bg... -> e o que o componente consome. COMPONENTE --btn-bg -> so quando existe excecao real. Trocar tema = trocar PARA QUAL PRIMITIVO cada semantico aponta. Nenhum CSS de componente muda. Sem essa disciplina o multi-tema morre. REGRAS QUE REPROVAM O BUILD (§5.2): - Nenhuma box-shadow, border-radius, cor, duracao ou easing LITERAL fora destes tokens. - Nunca #000000 nem #FFFFFF puros. - Neutros com chroma residual 0.004-0.015 no hue da marca. - Sombra usa o hue do fundo, nunca preto puro. Max 3 camadas em elemento que anima, ate 6 em estatico. - Raio aninhado: raio_externo = raio_interno + padding. ESTE ARQUIVO NAO DEFINE --img-grade DE PROPOSITO (§5.4). A grade fotografica e FAIXA por personalidade + PONTO por cliente. Se o tema nao definir, o build falha. Aqui so mora --img-grade-flat. ============================================================================ */ /* Ordem de cascata. Declarada uma vez, aqui, porque tokens.css carrega primeiro. */ @layer reset, tokens, tema, motion, componentes, utilidades; @layer tokens { /* ========================================================================== 0. FALLBACK HEX — LEIA ANTES DE MEXER -------------------------------------------------------------------------- Custom property aceita QUALQUER token no parse. Escrever `--x:#abc; --x:oklch(...)` NAO funciona em navegador sem OKLCH: a segunda declaracao vence o parse e so falha no uso, deixando a variavel invalida. O fallback correto para custom property e por @supports. Webview antiga de Instagram/Facebook em Android velho e trafego pago real e custa ~1 KB. Os valores hex abaixo sao o hue default (262 / azul-indigo); cada tema REEMITE o proprio par (bloco hex + bloco @supports). ========================================================================== */ :root { /* ---- 1. HUES: a unica coisa de cor que o tema troca ------------------- */ --h-brand: 262; /* hue do acento */ --h-neutral: 262; /* hue dos neutros (nunca cinza morto) */ --c-neutral: 0.008; /* chroma residual do neutro: 0.004 a 0.015 */ --c-brand: 0.16; /* chroma do acento */ /* ---- 2. NEUTROS (fallback hex) ---------------------------------------- */ /* --n-0 e off-white e --n-1000 e off-black. Puro nunca. */ --n-0: #fafafb; --n-25: #f9f9fa; --n-50: #f6f6f8; --n-100: #f0f0f2; --n-200: #e0e1e4; --n-300: #cdced2; --n-400: #a7a8af; --n-500: #86888f; --n-600: #6a6b73; --n-700: #505158; --n-800: #35363c; --n-900: #1f2025; --n-950: #131318; --n-1000: #0a0a0d; /* ---- 3. ACENTO (fallback hex) ----------------------------------------- */ --a-50: #eef2fd; --a-100: #dde5fa; --a-200: #bccdf5; --a-300: #93aeef; --a-400: #6b93ea; --a-500: #4e82e5; --a-600: #396bcc; --a-700: #2c56a6; --a-800: #26457f; --a-900: #21355c; /* ---- 4. SEMANTICAS DE ESTADO (fallback hex) --------------------------- */ --ok: #2f9e63; --warn: #d9a326; --danger: #cf4436; --info: #3d8fd6; } @supports (color: oklch(0 0 0)) { :root { /* NEUTROS — L travada, contraste previsivel; chroma e hue variaveis. */ --n-0: oklch(0.985 var(--c-neutral) var(--h-neutral)); /* off-white */ --n-25: oklch(0.975 var(--c-neutral) var(--h-neutral)); --n-50: oklch(0.960 var(--c-neutral) var(--h-neutral)); --n-100: oklch(0.940 var(--c-neutral) var(--h-neutral)); --n-200: oklch(0.900 var(--c-neutral) var(--h-neutral)); --n-300: oklch(0.850 var(--c-neutral) var(--h-neutral)); --n-400: oklch(0.735 var(--c-neutral) var(--h-neutral)); --n-500: oklch(0.630 var(--c-neutral) var(--h-neutral)); --n-600: oklch(0.530 var(--c-neutral) var(--h-neutral)); --n-700: oklch(0.435 var(--c-neutral) var(--h-neutral)); --n-800: oklch(0.330 var(--c-neutral) var(--h-neutral)); --n-900: oklch(0.235 var(--c-neutral) var(--h-neutral)); --n-950: oklch(0.165 var(--c-neutral) var(--h-neutral)); /* off-black */ --n-1000: oklch(0.145 var(--c-neutral) var(--h-neutral)); /* ACENTO — mesma logica de L travada. Chroma modulado nas pontas para a rampa nao virar pastel sujo no claro nem lama no escuro. */ --a-50: oklch(0.965 calc(var(--c-brand) * 0.18) var(--h-brand)); --a-100: oklch(0.930 calc(var(--c-brand) * 0.32) var(--h-brand)); --a-200: oklch(0.870 calc(var(--c-brand) * 0.55) var(--h-brand)); --a-300: oklch(0.790 calc(var(--c-brand) * 0.78) var(--h-brand)); --a-400: oklch(0.700 calc(var(--c-brand) * 0.92) var(--h-brand)); --a-500: oklch(0.620 var(--c-brand) var(--h-brand)); --a-600: oklch(0.545 var(--c-brand) var(--h-brand)); --a-700: oklch(0.470 calc(var(--c-brand) * 0.92) var(--h-brand)); --a-800: oklch(0.390 calc(var(--c-brand) * 0.80) var(--h-brand)); --a-900: oklch(0.310 calc(var(--c-brand) * 0.65) var(--h-brand)); --ok: oklch(0.60 0.14 152); --warn: oklch(0.75 0.15 78); --danger: oklch(0.58 0.19 27); --info: oklch(0.62 0.12 236); } } /* P3: mais chroma em tela Apple/OLED sem estourar sRGB. So o chroma sobe; a L continua travada, entao o contraste medido nao muda. CADA TEMA EMITE O PROPRIO BLOCO P3: a camada `tema` vence a camada `tokens` mesmo dentro de media query, entao este valor so vale para o hue default. Tema sem bloco p3 perde o ganho de gamut. */ @media (color-gamut: p3) { :root { --c-brand: 0.195; } } :root { /* ======================================================================== 5. SEMANTICOS — a unica camada que componente pode consumir ======================================================================== */ --bg: var(--n-0); --bg-subtle: var(--n-50); --bg-inverse: var(--n-1000); --surface: var(--n-0); --surface-2: var(--n-50); --surface-3: var(--n-100); --fg: var(--n-950); --fg-muted: var(--n-600); --fg-subtle: var(--n-500); --fg-inverse: var(--n-25); --accent: var(--a-600); --accent-hover: var(--a-700); --accent-fg: var(--n-0); --accent-soft: color-mix(in oklab, var(--a-500) 12%, transparent); --border: color-mix(in oklab, var(--fg) 9%, transparent); --border-strong: color-mix(in oklab, var(--fg) 16%, transparent); --ring: color-mix(in oklab, var(--accent) 45%, transparent); /* --scrim: off-black do tema COM o hue da marca. NUNCA #000. */ --scrim: var(--n-1000); /* ======================================================================== 6. TIPOGRAFIA Escala modular em clamp(), base 17px, razao 1.20 mobile -> 1.333 desktop. Cada tema REESCREVE a escala inteira: razao e parte da personalidade. ======================================================================== */ --font-display: Georgia, "Times New Roman", serif; /* o tema define */ --font-sans: system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --fs--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.75rem); /* 11-12 legal */ --fs--1: clamp(0.833rem, 0.81rem + 0.12vw, 0.938rem); /* 13-15 caption */ --fs-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16-17 corpo */ --fs-1: clamp(1.2rem, 1.14rem + 0.30vw, 1.417rem); /* 19-23 lead */ --fs-2: clamp(1.44rem, 1.34rem + 0.52vw, 1.888rem); /* 23-30 h4 */ --fs-3: clamp(1.728rem, 1.56rem + 0.84vw, 2.517rem); /* 28-40 h3 */ --fs-4: clamp(2.074rem, 1.80rem + 1.37vw, 3.355rem); /* 33-54 h2 */ --fs-5: clamp(2.488rem, 2.06rem + 2.14vw, 4.472rem); /* 40-72 h1 */ --fs-6: clamp(2.986rem, 2.33rem + 3.28vw, 5.961rem); /* 48-95 display */ --lh-tight: 0.98; --lh-snug: 1.12; --lh-heading: 1.22; --lh-body: 1.62; --lh-loose: 1.75; /* Tracking em razao INVERSA ao tamanho. */ --tr-display: -0.045em; --tr-h1: -0.035em; --tr-h2: -0.025em; --tr-h3: -0.015em; --tr-body: 0em; --tr-caption: 0.005em; --tr-eyebrow: 0.14em; /* piso do eyebrow em caixa alta */ --fw-body: 400; --fw-medium: 500; --fw-semi: 560; --fw-bold: 680; /* Medida: 45-75 caracteres desktop, 35-60 mobile. */ --measure: 68ch; --measure-tight: 46ch; /* PISO DE TAMANHO OPTICO do display. Abaixo disto o heading usa a fonte de CORPO em peso 600-700 com tracking -0.01em (classe .h-abaixo-do-piso). 40 = grotesca de display. 48 = alto contraste (didone). 32 = variable com eixo opsz + font-optical-sizing:auto. */ --piso-display: 40px; /* ======================================================================== 7. ESPACO ======================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; --sp-48: 192px; --gutter: clamp(20px, 5vw, 48px); --container: 1200px; /* Densidade por cliente: multiplica TODA a partitura. .75 | 1 | 1.4 */ --densidade: 1; /* PARTITURA DE RITMO VERTICAL — o antidoto ao py-24 em tudo. Duas secoes adjacentes tem que diferir em >=1 de 3: cor de fundo, densidade de padding, eixo de alinhamento. Razao espaco-ENTRE / espaco-DENTRO >= 2.5:1. */ --section-y: calc(clamp(72px, 9vw, 160px) * var(--densidade)); --sy-hero: 92vh; /* 88-92vh */ --sy-social: calc(clamp(32px, 4vw, 56px) * var(--densidade)); --sy-problema: calc(clamp(96px, 12vw, 208px) * var(--densidade)); --sy-solucao: calc(clamp(72px, 9vw, 160px) * var(--densidade)); --sy-prova: calc(clamp(64px, 8vw, 136px) * var(--densidade)); --sy-oferta: calc(clamp(96px, 12vw, 216px) * var(--densidade)); /* a maior */ --sy-faq: calc(clamp(64px, 8vw, 136px) * var(--densidade)); --sy-cta-final: calc(clamp(88px, 11vw, 192px) * var(--densidade)); /* Espaco DENTRO do bloco: mantenha >=2.5x menor que o ENTRE. */ --stack-dentro: var(--sp-6); /* ======================================================================== 8. RAIO — escolha UMA familia por tema. Tudo com o mesmo 12px e template. Raio aninhado: raio_externo = raio_interno + padding. ======================================================================== */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 9999px; --r-btn: var(--r-md); --r-card: var(--r-xl); --r-input: var(--r-md); --r-img: var(--r-lg); /* ======================================================================== 9. SOMBRA EM CAMADAS COM HUE TINTADO Uma fonte de luz so (offset vertical = 2x o horizontal, que aqui e 0). Ao subir de elevacao: offset sobe, blur sobe, opacidade cai. Cada camada DOBRA offset e blur. Preto puro dessatura o fundo -> usa-se o hue do neutro com saturacao reduzida. --sh-1..3 tem 3 camadas (podem animar). --sh-5 tem 6 e e PROIBIDA em elemento que anima. ======================================================================== */ --sh-hue: var(--h-neutral); --sh-c: oklch(0.30 0.03 var(--sh-hue)); --sh-0: none; --sh-1: 0 1px 1px color-mix(in oklab, var(--sh-c) 6%, transparent), 0 2px 2px color-mix(in oklab, var(--sh-c) 5%, transparent); --sh-2: 0 1px 2px color-mix(in oklab, var(--sh-c) 5%, transparent), 0 3px 6px color-mix(in oklab, var(--sh-c) 5%, transparent), 0 8px 14px color-mix(in oklab, var(--sh-c) 4%, transparent); --sh-3: 0 2px 4px color-mix(in oklab, var(--sh-c) 4%, transparent), 0 8px 16px color-mix(in oklab, var(--sh-c) 5%, transparent), 0 20px 40px -12px color-mix(in oklab, var(--sh-c) 10%, transparent); --sh-4: 0 4px 8px color-mix(in oklab, var(--sh-c) 4%, transparent), 0 16px 32px color-mix(in oklab, var(--sh-c) 6%, transparent), 0 40px 80px -20px color-mix(in oklab, var(--sh-c) 14%, transparent); /* 6 camadas: SO em elemento estatico. */ --sh-5: 0 1px 2px color-mix(in oklab, var(--sh-c) 4%, transparent), 0 2px 4px color-mix(in oklab, var(--sh-c) 4%, transparent), 0 4px 8px color-mix(in oklab, var(--sh-c) 4%, transparent), 0 8px 16px color-mix(in oklab, var(--sh-c) 4%, transparent), 0 16px 32px color-mix(in oklab, var(--sh-c) 4%, transparent), 0 32px 64px color-mix(in oklab, var(--sh-c) 4%, transparent); --sh-diffuse: 0 20px 40px -15px color-mix(in oklab, var(--sh-c) 6%, transparent); --sh-inner-top: inset 0 1px 0 color-mix(in oklab, var(--n-0) 55%, transparent); /* Hairline com alpha: adapta a qualquer fundo. Nunca 1px solid #e5e7eb. */ --hairline: 1px solid var(--border); --hairline-strong: 1px solid var(--border-strong); /* ======================================================================== 10. MOTION — os valores; as receitas moram em motion.css ======================================================================== */ /* Parametros POR CLIENTE, derivados de hash(slug). Sao os tres unicos que o olho percebe, e sao o que entra no vetor da trava de portfolio. A easing NAO entra no vetor: ninguem distingue .30 de .38 em 320 ms. */ --escala-duracao: 1; /* 0.85 | 1 | 1.20 — multiplica TODOS os --dur-* */ --distancia-base: 20px; /* 12 | 20 | 28 */ --stagger: 60ms; /* 45 | 60 | 80 */ --dur-instant: calc(100ms * var(--escala-duracao)); --dur-fast: calc(150ms * var(--escala-duracao)); --dur-micro: calc(220ms * var(--escala-duracao)); --dur-base: calc(320ms * var(--escala-duracao)); --dur-macro: calc(450ms * var(--escala-duracao)); --dur-hero: calc(700ms * var(--escala-duracao)); --dur-ambient: 22s; /* Saida e mais curta que entrada. Igual nos dois = plastico. */ --dur-exit: calc(200ms * var(--escala-duracao)); --ease-out-expo: cubic-bezier(.16, 1, .3, 1); /* reveal padrao */ --ease-out-quint: cubic-bezier(.22, 1, .36, 1); /* hover */ --ease-in-out-quart: cubic-bezier(.76, 0, .24, 1); /* A -> B */ --ease-in: cubic-bezier(.7, 0, .84, 0); /* saida */ /* Stagger por tipo de alvo. Cauda TOTAL de qualquer secao <= 500 ms. */ --stagger-cards: var(--stagger); --stagger-lines: 80ms; --stagger-words: 30ms; --stagger-chars: 15ms; --cauda-max: 500ms; /* Distancias de reveal. Nunca acima de 48px. */ --move-xs: 8px; --move-sm: 16px; --move-md: var(--distancia-base); --move-lg: 40px; /* teto de parallax */ /* ======================================================================== 11. Z-INDEX — o sticky fica ABAIXO do banner de consentimento ======================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-overlay: 40; --z-modal: 60; --z-toast: 80; --z-grain: 90; --z-consent: 100; /* ======================================================================== 12. IMAGEM --img-grade NAO EXISTE AQUI. Faixa por personalidade + ponto por cliente. --img-grade-flat e OBRIGATORIO em classe de UI: logo, selo_midia, print, screenshot_de_interface, mapa, diagrama. Filtro em logo/print/mapa REPROVA o gate. ======================================================================== */ --img-grade-flat: none; /* SCRIM (texto sobre imagem). Gradiente de 3 PARADAS em oklab, nunca 2: 2 paradas produzem a banda dura que denuncia. */ --scrim-op: 0.45; --scrim-op-max: 0.55; /* TETO. Passar disso e proibido. */ --scrim-gradient: linear-gradient( to top, color-mix(in oklab, var(--scrim) calc(var(--scrim-op) * 100%), transparent) 0%, color-mix(in oklab, var(--scrim) calc(var(--scrim-op) * 55%), transparent) 38%, transparent 72%); /* ======================================================================== 13. STICKY CTA MOBILE — unico componente permanente na tela do juiz ======================================================================== */ --sticky-h: 60px; /* faixa util: 56-64px */ --sticky-safe: env(safe-area-inset-bottom, 0px); --sticky-total: calc(var(--sticky-h) + var(--sticky-safe)); --alvo-min: 44px; /* alvo de toque minimo */ } } /* ============================================================================ BASE — primitivas que a lei exige em 100% das paginas ============================================================================ */ @layer reset { html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-0); line-height: var(--lh-body); letter-spacing: var(--tr-body); font-synthesis-weight: none; /* Reserva a barra sticky: sem isto o rodape legal fica sob o botao. */ padding-block-end: var(--sticky-total); } h1, h2 { text-wrap: balance; } p, li { text-wrap: pretty; max-inline-size: var(--measure); } img, video, svg { max-inline-size: 100%; height: auto; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; } } @layer utilidades { /* Numeros: preco, timer e metrica SEMPRE tabulares. */ .num, .preco, .metrica, time { font-variant-numeric: tabular-nums; } /* Heading abaixo do piso optico do display: fonte de CORPO em peso alto. Isto nao e concessao, e o que estudio faz. */ .h-abaixo-do-piso { font-family: var(--font-sans); font-weight: 650; letter-spacing: -0.01em; } .eyebrow { font-family: var(--font-sans); font-size: var(--fs--1); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--fg-muted); } /* Grade fotografica x superficie de UI: escopos separados e absolutos. */ .img-foto { filter: var(--img-grade); border-radius: var(--r-img); } .img-ui { filter: var(--img-grade-flat); } /* Scrim: SO a faixa que contem texto recebe. O rosto nunca fica sob a regiao de opacidade maxima (a zona proibida vem do foco em ATIVOS.md). */ .scrim::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 72%; background: var(--scrim-gradient); pointer-events: none; } .scrim > .scrim__texto { position: relative; max-inline-size: 62%; } @media (max-width: 767px) { .scrim > .scrim__texto { max-inline-size: 100%; } } /* Grain: pseudo-elemento FIXED + pointer-events:none. Nunca em container que rola (repaint continuo de GPU). Desligado no mobile. */ .grain::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (max-width: 768px) { .grain::after { display: none; } } /* Sticky CTA: fundo SOLIDO do papel + hairline. Nunca blur/glass. */ .sticky-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); min-block-size: var(--sticky-h); padding-block-end: var(--sticky-safe); background: var(--surface); border-block-start: var(--hairline); } .sticky-cta a, .sticky-cta button { min-block-size: var(--alvo-min); } .suporte-flutuante { inset-block-end: calc(var(--sticky-total) + 12px); } /* Grade de prosa: medida garantida + full-bleed sem hack. */ .prose-grid { display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] min(var(--measure), 100% - var(--gutter) * 2) [content-end] minmax(var(--gutter), 1fr) [full-end]; } .prose-grid > * { grid-column: content; } .prose-grid > .bleed { grid-column: full; } } /* ---------------------------------------------------------------------------- DIVERGENCIA: o mestre (§5.2, l.4055) manda "emitir fallback hex ANTES de cada declaracao OKLCH". Para custom property isso nao funciona: a declaracao OKLCH vence o parse (custom property aceita qualquer token) e so falha no uso, deixando a variavel invalida em vez de cair no hex. Implementado por @supports (color: oklch(0 0 0)), que preserva a intencao (hex primeiro, OKLCH depois) e de fato funciona. Regra 7 de precedencia nao se aplica: nao e contradicao entre secoes do mestre, e um defeito tecnico da instrucao. DIVERGENCIA: o mestre §5.2 manda "nunca #000000 nem #FFFFFF puros" e o bloco de esquema do dossie 04 define --n-0: oklch(1 0 h) (= branco puro) e --n-1000: oklch(0.115 ...). Seguido o mestre: --n-0 = 0.985 (off-white) e --n-1000 = 0.145. Os degraus 25/50/100 foram reespacados para nao colidir. DIVERGENCIA: tokens de motion. O dossie 04 usa --dur-1..5 e --ease-out; o mestre §5.6 nomeia --dur-instant/fast/micro/base/macro/hero/ambient e --ease-out-expo/--ease-out-quint/--ease-in-out-quart. Seguido o mestre. DIVERGENCIA: --img-grade. O dossie 04 o coloca no base (saturate .94 contrast 1.03); o mestre §5.4 [correcao da rodada 2] diz que isso e o bug que faz todos os clientes terem a mesma fotografia. Removido do base. ---------------------------------------------------------------------------- */