/* ========================================================================== HAND CARE — Assessoria em Saúde variables.css FONTE ÚNICA de cores, tipografia, espaçamentos, raios e movimento. Nenhum valor HEX pode existir em outro arquivo CSS deste projeto. A paleta foi extraída do CARTÃO OFICIAL da Hand Care (assets/img/referencia/cartao-hand-care.jpg) e conferida par a par com a régua de contraste da WCAG. Ver SKILL.md, seções 12 e 13. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONTES LOCAIS Nenhuma requisição externa em runtime. Arquivos em assets/fonts/. O subconjunto "latin" (U+0000–00FF) cobre integralmente o português: ã ç õ á é í ó ú â ê ô à — todas moram no Latin-1 Supplement. -------------------------------------------------------------------------- */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/playfair-display-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 800; font-display: swap; src: url('../fonts/playfair-display-latin-wght-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../fonts/dancing-script-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ====================================================================== 2. CORES — MARCA Amostradas do cartão oficial. O verde do wordmark "HAND CARE" e o verde do verso convergem em #1B3D2F; o dourado do arco e das linhas botânicas em #C9A86A; a terracota vem da figura central do brasão. ====================================================================== */ /* Verdes — a cor institucional */ --verde-profundo: #1B3D2F; /* institucional: fundos, títulos no claro */ --verde-fechado: #142D22; /* segundo tom escuro, dá ritmo entre telas */ --verde-noite: #0F231B; /* véu sobre fotografia, sobreposições */ --verde-medio: #2E5546; /* superfície sobre verde — só com texto creme */ --sage: #6B8E7B; /* verde-sálvia: GRAFISMO, não texto de corpo */ --sage-claro: #A8C0B0; /* texto de apoio sobre escuro 6,17:1 */ --sage-escuro: #4A6B58; /* texto de apoio sobre claro 5,76:1 */ /* Dourados — acabamento, nunca cor dominante */ --dourado: #C9A86A; /* ornamento; texto SÓ sobre verde 5,29:1 */ --dourado-escuro: #B8925A; /* ornamento sobre claro — nunca texto */ --dourado-profundo:#8A6A33; /* o dourado legível no claro 4,86:1 */ /* Terracota — detalhe herdado da figura central do brasão */ --terracota: #C97B55; /* grafismo e detalhe */ --terracota-claro: #D99372; /* texto de destaque sobre escuro 4,77:1 */ --terracota-profundo:#9E5334; /* texto de destaque sobre claro 5,45:1 */ /* Cremes — o fundo claro da marca */ --creme: #FFFBF5; /* fundo claro principal */ --creme-alt: #F9F3EB; /* segundo creme, dá ritmo entre telas */ --creme-sombra: #F1E8DB; /* superfície elevada sobre creme */ --creme-borda: #E7DACA; /* borda visível sobre creme */ /* ====================================================================== 3. CORES — TEXTO Regra: o token de texto acompanha o TEMA da seção, nunca o gosto do momento. Ver .hc-secao--claro / --escuro em base.css. ====================================================================== */ --texto-claro: #FFFBF5; /* sobre verde 11,61:1 AAA */ --texto-claro-apoio: #A8C0B0; /* sobre verde 6,17:1 AA */ --texto-claro-suave: #8DA898; /* sobre verde 4,66:1 AA */ --texto-escuro: #1B3D2F; /* sobre creme 11,61:1 AAA */ --texto-escuro-apoio: #4A6B58; /* sobre creme 5,76:1 AA */ --texto-escuro-suave: #5C7A69; /* sobre creme 4,58:1 AA */ /* ====================================================================== 4. CORES — SUPERFÍCIES, BORDAS E VÉUS Superfícies separam-se por COR e BORDA, não por sombra pesada. ====================================================================== */ --sup-clara: #FFFFFF; --sup-clara-suave: rgba(27, 61, 47, 0.035); --sup-escura: rgba(255, 251, 245, 0.055); --sup-escura-forte: rgba(255, 251, 245, 0.085); --borda-clara: rgba(27, 61, 47, 0.14); --borda-clara-forte: rgba(27, 61, 47, 0.26); --borda-escura: rgba(255, 251, 245, 0.16); --borda-escura-forte: rgba(255, 251, 245, 0.30); --dourado-fio: rgba(201, 168, 106, 0.55); /* filete no escuro */ --dourado-fio-claro: rgba(184, 146, 90, 0.42); /* filete no creme */ --dourado-veu: rgba(201, 168, 106, 0.10); /* halo, realce */ /* Véu sobre fotografia: garante texto creme legível em qualquer imagem */ --veu-foto: linear-gradient( 180deg, rgba(15, 35, 27, 0.58) 0%, rgba(15, 35, 27, 0.72) 45%, rgba(15, 35, 27, 0.90) 100%); /* ====================================================================== 5. TIPOGRAFIA Três famílias, com papéis fixos: serifada → títulos e números editoriais sans → todo o texto de leitura script → no máximo 3 destaques curtos na apresentação inteira ====================================================================== */ --fonte-serif: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif; --fonte-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; --fonte-script: 'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive; /* Escala fluida: o mesmo token entrega 375px e 1920px sem "espremer". Os mínimos foram escolhidos para serem legíveis no celular, não para serem a versão reduzida do desktop. A escala foi ABERTA na v1.1.0: um deck projetado ou apresentado a dois metros de distância pede tipografia maior que uma página que se lê a cinquenta centímetros. O topo do display saiu de 104px para 120px, e o de título de slide de 48px para 56px. Os mínimos de celular quase não se mexeram — ali o problema nunca foi tamanho, foi hierarquia. */ --fs-display: clamp(2.65rem, 1.15rem + 6.20vw, 7.50rem); /* 42 → 120 */ --fs-h1: clamp(2.20rem, 1.25rem + 3.90vw, 5.00rem); /* 35 → 80 */ --fs-h2: clamp(1.85rem, 1.20rem + 2.70vw, 3.50rem); /* 30 → 56 */ --fs-h3: clamp(1.15rem, 1.00rem + 0.62vw, 1.625rem); /* 18 → 26 */ --fs-lead: clamp(1.06rem, 0.96rem + 0.50vw, 1.50rem); /* 17 → 24 */ --fs-corpo: clamp(0.975rem, 0.93rem + 0.22vw, 1.125rem);/* 16 → 18 */ --fs-corpo-sm: clamp(0.90rem, 0.87rem + 0.14vw, 1.00rem); /* 14 → 16 */ --fs-rotulo: clamp(0.688rem, 0.66rem + 0.12vw, 0.8125rem);/* 11 → 13 */ --fs-numero: clamp(1.90rem, 1.10rem + 3.20vw, 4.00rem); /* 30 → 64 */ --fs-script: clamp(2.00rem, 1.10rem + 3.80vw, 4.50rem); /* 32 → 72 */ --peso-leve: 300; --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-forte: 700; --lh-display: 1.06; --lh-titulo: 1.14; --lh-lead: 1.55; --lh-corpo: 1.68; --ls-display: -0.02em; --ls-titulo: -0.01em; --ls-rotulo: 0.18em; /* eyebrows e rótulos, sempre em caixa alta */ --ls-marca: 0.24em; /* o wordmark do cartão é bem espaçado */ /* ====================================================================== 6. ESPAÇAMENTO — base 8 ====================================================================== */ --esp-3xs: 4px; --esp-2xs: 8px; --esp-xs: 12px; --esp-sm: 16px; --esp-md: 24px; --esp-lg: 32px; --esp-xl: 48px; --esp-2xl: 64px; --esp-3xl: 96px; --esp-4xl: 128px; /* Respiro das seções — o "ar" é parte da identidade */ --esp-secao-y: clamp(72px, 7.5vw, 136px); --esp-secao-x: clamp(20px, 5vw, 96px); --largura-max: 1280px; /* container de conteúdo */ --largura-larga: 1480px; /* composições que pedem mais respiro */ --largura-texto: 62ch; /* limite de linha para leitura confortável */ --largura-titulo: 20ch; /* títulos nunca passam disso */ /* ====================================================================== 7. RAIOS O cartão é todo feito de curvas: os raios são generosos, nunca duros. ====================================================================== */ --raio-xs: 6px; --raio-sm: 10px; --raio-md: 16px; --raio-lg: 24px; --raio-xl: 36px; --raio-pill: 999px; /* Máscara orgânica das fotografias — o "portal". Os dois raios horizontais do topo somam 100% da largura e se encontram no centro, formando um arco perfeito; embaixo a foto assenta reta. É a curva do cartão (e o círculo do brasão) aplicada à fotografia, sem virar uma bolha que come os cantos da imagem. */ --raio-organico: 50% 50% var(--raio-xl) var(--raio-xl) / 34% 34% var(--raio-xl) var(--raio-xl); /* ====================================================================== 8. ELEVAÇÃO — no máximo dois tokens no projeto inteiro ====================================================================== */ --sombra-suave: 0 10px 30px rgba(27, 61, 47, 0.08); --sombra-painel: 0 28px 70px rgba(15, 35, 27, 0.16); /* ====================================================================== 9. MOVIMENTO A animação serve ao conteúdo. Se chama atenção para si, está errada. ====================================================================== */ --trans-rapida: 180ms; --trans-normal: 320ms; --trans-lenta: 620ms; --ease-suave: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-organica: cubic-bezier(0.65, 0, 0.35, 1); --stagger: 90ms; /* intervalo entre itens de uma sequência */ /* ====================================================================== 10. CAMADAS ====================================================================== */ --z-fundo: 0; --z-decor: 10; --z-conteudo: 20; --z-sobrepor: 30; --z-chrome: 40; --z-topo: 50; /* ====================================================================== 11. MOLDURA DA APRESENTAÇÃO Não existe cabeçalho, barra de progresso nem rodapé: a moldura é só o selo no canto, a numeração do slide e o trilho lateral. Todos vivem na mesma margem, para que o olho leia "borda de slide" e não "interface de site". ====================================================================== */ --moldura: clamp(16px, 2.4vw, 40px); /* recuo do selo, nº e trilho */ --altura-selo: clamp(30px, 3.2vw, 44px); /* símbolo no canto */ }