/* ============================================================= Clinica Ednei Silva Terapias Manuais (Maua, SP) Design tokens. Ponto unico de cor e de tipografia do site. Paleta da marca (definida no brief, nomes semanticos, nunca rampa numerica): linho-frio #EAEFF2 fundo principal agua-rasa #A8C9D4 superficie de apoio verde-lago #2F6B5E primaria: display, botoes, links lago-fundo #14312C secoes escuras, footer azul-institucional #1E5A9C acento: o azul do trabalho tinta-profunda #121A1C texto principal Todos os tokens dependentes abaixo foram recalculados a partir desses seis valores (medicao real, nao estimativa). O contraste de cada par texto/fundo em uso esta anotado ao lado, minimo AA 4.5:1 para texto de corpo. ============================================================= */ :root { /* ---------- Cor: superficies ---------- */ --linho-frio: #eaeff2; /* fundo principal, brief */ --linho-soft: #f2f5f7; /* faixas discretas, placeholder de midia */ --white: #ffffff; /* cards */ /* ---------- Cor: marca ---------- */ --verde-lago: #2f6b5e; /* primaria, brief. 5.35:1 sobre --linho-frio */ --verde-lago-800: #27584d; /* hover do botao escuro */ --lago-fundo: #14312c; /* secoes escuras, footer, brief */ --lago-fundo-900: #122c28; /* recuo extra do bloco escuro, se preciso */ --agua-rasa: #a8c9d4; /* superficie de apoio, brief. Decorativo: 1.51:1 sobre --linho-frio, nunca texto no claro */ --agua-rasa-deep: #486667; /* a mesma agua, rebaixada ate 5.38:1 sobre --linho-frio: e esta que vira texto, rotulo ou icone no claro */ --agua-wash: #d3e2e8; /* lavado, faixas de apoio e avisos */ --azul-institucional: #1e5a9c; /* acento, o azul do trabalho, brief. 6.05:1 sobre --linho-frio */ --azul-institucional-pale: #8eacce; /* o mesmo azul, clareado ate 5.94:1 sobre --lago-fundo: para uso sobre fundo escuro */ /* ---------- Cor: texto ---------- */ --tinta: #121a1c; /* texto principal, brief. 15.23:1 sobre --linho-frio */ --tinta-soft: #575e60; /* texto secundario. 5.71:1 sobre --linho-frio (AA) */ /* ---------- Ceu do hero (gradiente literal do brief) ---------- */ --sky-top: #14312c; --sky-bottom: #a8c9d4; --sky-stop: 84%; /* Veu do hero: escurece a faixa de leitura sobre o ceu ilustrado. Medido sobre as tres alturas de viewport, como o gradiente do exemplar ensinou: um so numero central nao segura mobile e desktop ao mesmo tempo, por isso o veu completo (linear + radial) vive no CSS de componentes, nao aqui. Este e o tom base, a partir de --tinta. */ --sky-veil: rgba(18, 26, 28, 0.58); /* ---------- Cor: semanticos ---------- */ --bg: var(--linho-frio); --surface: var(--white); --fg: var(--tinta); --fg-muted: var(--tinta-soft); --fg-on-dark: #eaeff2; /* 12.04:1 sobre --lago-fundo */ --fg-on-dark-mu: rgba(234, 239, 242, 0.78); /* ~9:1 sobre --lago-fundo */ --border: rgba(18, 26, 28, 0.12); --border-strong: rgba(18, 26, 28, 0.22); --accent: var(--verde-lago); --accent2: var(--azul-institucional); --dark-section: var(--lago-fundo); --inset-hairline: rgba(18, 26, 28, 0.06) 0 0 0 1px inset; /* ---------- Tipografia ---------- Sem serifa e sem italico neste site. O display e Bricolage Grotesque (imperfeicoes deliberadas, presenca fisica, quase manual: um trabalho feito com as maos, nao com aparelho). O corpo e Work Sans (robusto e direto, sem enfeite, bom para explicar protocolo de recuperacao). O mono e JetBrains Mono, para kickers, numeros e rotulos. A enfase do display se faz por COR e PESO, nunca por inclinacao. */ --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --display-weight: 600; --display-emph-style: normal; /* regra dura: nenhum italico no site */ --display-emph-color: var(--verde-lago); --display-emph-weight: 700; /* Escala fluida entre mobile e desktop */ --t-display: clamp(2.125rem, 1.2rem + 3.9vw, 3.75rem); /* hero 34 a 60px */ --t-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); /* 32 a 52px */ --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); /* 28 a 42px */ --t-h3: clamp(1.5rem, 1.28rem + 0.95vw, 2rem); /* 24 a 32px */ --t-h4: clamp(1.3125rem, 1.18rem + 0.55vw, 1.625rem); /* 21 a 26px */ --t-h5: 1.375rem; /* 22px */ --t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 a 19px */ --t-body: 1.0625rem; /* 17px */ --t-sm: 1rem; /* 16px */ --t-xs: 0.875rem; /* 14px */ --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.4; --lh-relaxed: 1.45; --lh-loose: 1.6; --lh-prose: 1.68; /* corpo longo respira, como o atendimento sem pressa */ --ls-display: -0.02em; --ls-tight: -0.011em; --ls-caps: 0.09em; --otf: 'cv01' on, 'cv11' on; /* ---------- Espacamento (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 springs da engenharia de motion. Nao 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 ate 699.98px tablet 700px a 1199.98px desktop a partir de 1200px */