/* ============================================================= Diamond · Segurança e medicina do trabalho Design tokens. Ponto único de cor e de tipografia do site. Paleta da marca (literal do brief, não inventada): gelo #EEF3F5 fundo principal azul-aço #1F6F8B marca, botões, links azul-aço-fundo #123B4C seções escuras, rodapé azul-aço-claro #C3DCE5 acento legível sobre escuro verde-turno #3FA796 acento de conformidade e status tinta #0F2530 texto principal tinta-suave #4F6672 texto secundário céu do hero #123B4C → #C3DCE5 O vocabulário é semântico e próprio deste site: nada de rampa numérica. Os tokens derivados abaixo saem desses sete valores, e o contraste de cada par texto/fundo em uso está anotado ao lado. Mínimo AA (4.5:1) para texto de corpo. ============================================================= */ :root { /* ---------- Cor: superfícies ---------- */ --gelo: #eef3f5; /* fundo principal, brief */ --gelo-fundo: #e3ebee; /* faixas de apoio (.section--soft) */ --gelo-lavado: #dce9ee; /* avisos, painéis de ilustração */ --branco: #ffffff; /* cards, pills, canais */ /* ---------- Cor: marca ---------- */ --azul-aco: #1f6f8b; /* marca, botões, links, ênfase no claro */ --azul-aco-escuro: #18596f; /* estado de hover do botão de marca */ --azul-aco-fundo: #123b4c; /* seções escuras, rodapé, topo do céu */ --azul-aco-claro: #c3dce5; /* acento sobre escuro, 8.4:1 sobre o fundo */ /* ---------- Cor: conformidade ---------- */ --verde-turno: #3fa796; /* status, marcadores, traços, nunca texto no claro */ --verde-turno-tinta: #26705f;/* o mesmo verde rebaixado até passar AA nos DOIS fundos claros do site: 5.3:1 sobre --gelo e 4.9:1 sobre --gelo-fundo, que é onde vivem os rótulos das seções soft. É ESTE que pode virar texto ou ícone no claro. */ /* ---------- Cor: texto ---------- */ --tinta: #0f2530; /* texto principal, 14.1:1 sobre --gelo */ --tinta-suave: #4f6672; /* texto secundário, 5.4:1 sobre --gelo (AA) */ /* ---------- Céu do hero (gradiente literal do brief) ---------- */ --sky-top: #123b4c; --sky-bottom: #c3dce5; --sky-stop: 86%; /* Véu do hero. O pior fundo do título não é o topo do degradê: é a faixa baixa, onde o céu já clareou até o azul-aço-claro e uma nuvem passa por trás. Medido, o texto claro sobre esse ponto rende 1.3:1 sem véu e 4.1:1 com véu em 0.52. Em 0.58 sobe para ~4.8:1 e o bando continua visível. É este número que segura o AA do hero; medir antes de baixar. */ --sky-veil: rgba(15, 37, 48, 0.58); /* ---------- Cor: semânticos ---------- */ --bg: var(--gelo); --surface: var(--branco); --fg: var(--tinta); --fg-muted: var(--tinta-suave); --fg-on-dark: #f4f8fa; /* 11.2:1 sobre --azul-aco-fundo */ --fg-on-dark-mu: rgba(244, 248, 250, 0.80); /* 7.8:1 sobre --azul-aco-fundo */ --border: rgba(15, 37, 48, 0.14); --border-strong: rgba(15, 37, 48, 0.26); --accent: var(--azul-aco); --dark-section: var(--azul-aco-fundo); --inset-hairline: rgba(15, 37, 48, 0.07) 0 0 0 1px inset; /* ---------- Tipografia ---------- Sem serifa e sem itálico neste site. Chivo é o display, Encode Sans o corpo, Overpass Mono os códigos de norma, prazos e rótulos. A ênfase do display se faz por COR e PESO, nunca por inclinação. */ --font-display: 'Chivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: 'Encode Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'Overpass Mono', ui-monospace, Menlo, monospace; --display-weight: 500; --display-emph-style: normal; /* regra dura: nenhum itálico no site */ --display-emph-color: var(--azul-aco); --display-emph-weight: 700; /* Escala fluida entre mobile e desktop. Encode Sans é mais estreita que a grotesca do exemplar: o corpo sobe um degrau para compensar, porque esta é uma página que o RH lê procurando prazo e nome de norma. */ --t-display: clamp(2.125rem, 1.2rem + 3.9vw, 3.75rem); /* hero 34 → 60px */ --t-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); /* 32 → 52px */ --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); /* 28 → 42px */ --t-h3: clamp(1.5rem, 1.28rem + 0.95vw, 2rem); /* 24 → 32px */ --t-h4: clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem); /* 21 → 26px */ --t-h5: 1.375rem; /* 22px */ --t-lead: clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem); /* 18 → 20px */ --t-body: 1.125rem; /* 18px */ --t-sm: 1.0625rem; /* 17px */ --t-xs: 0.9375rem; /* 15px */ --t-stat: clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem); --lh-display: 1.06; --lh-tight: 1.14; --lh-snug: 1.28; --lh-body: 1.42; --lh-relaxed: 1.45; --lh-loose: 1.58; --lh-prose: 1.66; /* corpo longo, norma se lê devagar */ --ls-display: -0.02em; --ls-tight: -0.005em; --ls-caps: 0.09em; --otf: 'ss01' on, 'cv05' on; /* ---------- Espaçamento (escala 8) ---------- */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 10px; --sp-lg: 12px; --sp-xl: 16px; --sp-2xl: 20px; --sp-3xl: 24px; --sp-4xl: 32px; --sp-5xl: 48px; --sp-6xl: 64px; --sp-7xl: 96px; --section-y: clamp(72px, 8vw, 140px); --gutter: clamp(20px, 4vw, 64px); --maxw: 1280px; --maxw-text: 62ch; /* ---------- Raios ---------- */ --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 24px; --r-card: 24px; --r-pill: 999px; /* ---------- Movimento ---------- Eases e durações do template. Não renomear: js/main.js depende deles para o reveal em spring e para o parallax. */ --ease-brand: cubic-bezier(0.44, 0, 0.56, 1); --ease-drift: cubic-bezier(0.34, 0.64, 0.34, 1); --ease-snap: cubic-bezier(0.27, 0, 0.51, 1); --dur-fast: 0.2s; --dur-base: 0.4s; --dur-slow: 1s; --dur-cinema: 2s; } /* Breakpoints do template (preservados): mobile ≤ 699.98px tablet 700px a 1199.98px desktop ≥ 1200px */