/* ============================================================= LTQ EDUCAÇÃO · LINK IN BIO tokens.css · fonte única de verdade do design system da página ============================================================= */ :root { /* ---------- CORES · MARCA ---------- */ --color-brand-dark: #0A2F28; --color-brand-accent: #0ACE97; --color-brand-accent-hover: #16B364; /* Derivados de apoio (transparências do accent e do dark). Sempre derive daqui, nunca escreva rgba solto no styles.css. */ --color-brand-dark-90: rgba(10, 47, 40, 0.90); --color-brand-dark-70: rgba(10, 47, 40, 0.70); --color-brand-dark-12: rgba(10, 47, 40, 0.12); --color-brand-dark-06: rgba(10, 47, 40, 0.06); --color-accent-40: rgba(10, 206, 151, 0.40); --color-accent-24: rgba(10, 206, 151, 0.24); --color-accent-14: rgba(10, 206, 151, 0.14); --color-accent-08: rgba(10, 206, 151, 0.08); /* ---------- CORES · TEXTO ---------- */ --color-text-primary: #000000; --color-text-heading: #191919; --color-text-secondary: rgba(87, 87, 87, 0.8); --color-text-muted: #525252; --color-text-numeric: #40404F; --color-text-inverse: #FFFFFF; /* Texto sobre superfície escura */ --color-text-on-dark: #FFFFFF; --color-text-on-dark-soft: rgba(255, 255, 255, 0.72); --color-text-on-dark-muted: rgba(255, 255, 255, 0.52); /* ---------- CORES · FUNDO ---------- */ --color-bg-base: #FFFFFF; --color-bg-subtle: #F6F9F7; --color-bg-subtle-alt: #EDFCF4; --color-bg-brand: #0A2F28; /* ---------- BORDAS ---------- */ --color-border-accent: #0ACE97; --color-border-neutral: rgba(10, 47, 40, 0.10); --color-border-on-dark: rgba(255, 255, 255, 0.14); --border-accent: 1px solid var(--color-border-accent); --border-neutral: 1px solid var(--color-border-neutral); --border-on-dark: 1px solid var(--color-border-on-dark); /* ---------- TIPOGRAFIA ---------- */ --font-family-base: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-family-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Escala tipográfica: os valores desktop são o teto; os fluid() abaixo interpolam a partir do mobile. */ --font-size-h1: clamp(2.25rem, 1.35rem + 3.9vw, 4rem); /* 36px → 64px */ --line-height-h1: 1.08; --letter-spacing-h1: -0.0225em; /* -1.44px @64 */ --font-size-h2: clamp(1.75rem, 1.28rem + 2.05vw, 2.5rem); /* 28px → 40px */ --line-height-h2: 1.1; --letter-spacing-h2: -0.02em; /* -0.8px @40 */ --font-size-h3: clamp(1.375rem, 1.12rem + 1.1vw, 1.875rem); /* 22px → 30px */ --line-height-h3: 1.32; --letter-spacing-h3: -0.015em; --font-size-h4: clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);/* 18px → 21px */ --line-height-h4: 1.35; --font-size-body-lg: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);/* 16px → 18px */ --line-height-body-lg: 1.55; --font-size-body: 1rem; /* 16 / 24 */ --line-height-body: 1.5; --font-size-sm: 0.875rem; /* 14 */ --font-size-xs: 0.75rem; /* 12 */ --letter-spacing-label: 0.14em; /* ---------- RAIOS ---------- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; /* ---------- SOMBRAS ---------- */ --shadow-card: 0px 24px 48px -8px rgba(0, 0, 0, 0.08); --shadow-button-inset: 0px -4px 4.6px 0px inset rgba(0, 0, 0, 0.25); --shadow-accent-sm: 0px 4px 7px rgba(10, 207, 151, 0.15); --shadow-elevated: 0px 8px 34px -2px rgba(0, 0, 0, 0.35); /* ---------- ESPAÇAMENTO ---------- */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --section-padding-block: clamp(56px, 4vw + 40px, 112px); --gutter: clamp(20px, 4vw, 40px); /* ---------- LARGURAS ---------- */ --width-mobile: 520px; /* coluna editorial de onde o link in bio nasce */ --width-desktop: 1200px; /* container amplo do desktop */ /* ---------- MOVIMENTO ---------- */ --duration-fast: 200ms; --duration-base: 280ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---------- ALVO DE TOQUE ---------- */ --tap-target: 44px; /* ---------- FOCO ---------- */ /* O anel de foco usa outline (funciona sobre claro e escuro), ver styles.css */ --focus-outline-width: 3px; --focus-outline-offset: 3px; } /* ============================================================= ACRÉSCIMO DESTA PÁGINA · "links" ------------------------------------------------------------- Tudo acima é o tokens.css do `4-institucional/ltq-link-in-bio` COPIADO SEM ALTERAÇÃO — é a fonte de verdade da identidade da LTQ (ver memória "identidade-base-link-in-bio"). O bloco abaixo NÃO inventa nenhuma cor. Ele só dá PAPEL DE PÁGINA aos valores que já existem lá em cima. ⚠ EM 21/09/2026 ESTA PÁGINA PASSOU DO ESCURO PARA O CLARO. Até então o fundo era o `--color-bg-brand` e tudo por cima era transparência de branco. Agora ela veste a identidade da PRIMEIRA VERSÃO DO TEMPLATE DE PARCEIROS (`3-precificacao/site-padrao-afiliado`), que aplica o `DS-ltq-sites` literalmente. As quatro superfícies daquela página, medidas na prévia dela: #EDFCF4 lavado menta ...... hero #FFFFFF papel ............. conteúdo #F6F9F7 chão claro ........ faixas alternadas #0A2F28 petróleo .......... blocos escuros, com parcimônia AQUI O PETRÓLEO NÃO VIRA SEÇÃO. Nesta página o escuro já pertence às três artes dos cards, que são banners verde-escuro; uma faixa escura em volta competiria com elas em vez de dar ritmo. É a diferença entre uma página de venda longa, que precisa alternar, e um link na bio de três cartões. ============================================================= */ :root { /* ---------- PAPÉIS DE PÁGINA (claro) ---------- */ --page-bg: var(--color-bg-base); /* #FFFFFF — papel */ --page-wash: var(--color-bg-subtle-alt);/* #EDFCF4 — lavado */ --page-floor: var(--color-bg-subtle); /* #F6F9F7 — chão claro */ /* Tinta. O DS manda preto puro em título e corpo; o cinza secundário é o #575757, que rende 7,0:1 sobre branco. O `--color-text-muted` do DS (#525252) continua servindo de apoio, mas o #A0A0A0 do template NÃO é usado como texto em lugar nenhum: sobre branco ele dá 2,6:1 e reprova. */ --page-text: var(--color-text-primary); /* #000000 */ --page-text-soft: #575757; --page-text-muted: var(--color-text-muted); /* #525252 */ /* O acento continua sendo a menta, MAS só onde é superfície ou fio — nunca como texto sobre branco, onde daria 1,9:1. Texto que precisa ser verde usa o `--page-accent-ink`. */ --page-accent: var(--color-brand-accent); /* #0ACE97 */ --page-accent-ink: #0A503E; /* DS primary-700, 8,6:1 */ --page-success: var(--color-brand-accent-hover); /* #16B364 */ /* O fio do template. Ele é DERIVADO no `site-padrao-afiliado`, e a razão está escrita lá: o DS não tem token de borda, e um cinza neutro apareceria frio no meio de uma paleta esverdeada. Trago o mesmo valor em vez de reinterpretar. */ --page-line: #E4EAE7; /* ---------- O QUE SÓ ESTA PÁGINA USA ---------- */ /* A coluna. Isto é um link na bio: 520px em QUALQUER tela, igual ao `--width-mobile` do DS. Não há breakpoint que abra em grade — no desktop a página continua com cara de celular. ⚠ NÃO desconte o gutter aqui. `.hero`, `.miolo` e `.rodape` já aplicam `padding-inline: var(--gutter)`, e este token vive DENTRO deles. A versão anterior era `min(520px, 100% - 2 * var(--gutter))` e descontava a margem duas vezes: num viewport de 420px a coluna saía 340 em vez de 380, ou seja, 40px de margem onde o desenho pede 20. Corrigido em 21/09/2026, medido pelo getBoundingClientRect. */ --col: min(520px, 100%); /* Proporção do banner dos cards. Era a da referência (2029 × 775, ~2,62:1) enquanto não havia arte; em 18/09/2026 as três chegaram em 1983 × 793 (~2,50:1) e o token passou a seguir a arte real, em vez de a arte ser recortada para caber no token. As artes seguintes têm de sair nesta mesma proporção, ou o `object-fit: cover` corta. Se um dia mudarem todas juntas, é aqui — um lugar só, e os três cards acompanham. */ --card-ratio: 1983 / 793; /* Escalonamento da entrada dos cards (0ms, 90ms, 180ms na referência). */ --card-stagger: 90ms; }