/* ============================================================= Imamed Diagnostico Medico. Clinica de diagnostico por imagem e ultrassonografia, Vila Bocaina, Maua, SP. Design tokens. Ponto unico de cor e de tipografia do site. Paleta da marca (definida no brief, vocabulario semantico proprio, nunca rampa numerica): linho-quente #EDE7DD fundo principal bruma-teal #C7DAD9 superficie de apoio teal-eco #40707F primaria: display, botoes, links abisso-teal #17323A secoes escuras, footer areia-dourada #B5905E acento, rotulos, bloco de preparo tinta-fria #161E22 texto principal Cada par texto/fundo em uso foi medido (formula WCAG de luminancia relativa) e o contraste esta anotado ao lado. Minimo AA de corpo: 4.5:1. teal-eco sozinho mede 4.44:1 sobre linho-quente: fica um fio abaixo do minimo, entao ele e reservado para titulo grande (que so exige 3:1) e para fundo de botao com texto branco por cima. Onde o texto PRECISA ser pequeno (rotulo, link, kicker), entra teal-texto: a mesma familia, um degrau mais escura, sem virar rampa numerica. ============================================================= */ :root { /* ---------- Cor: superficies ---------- */ --linho: #ede7dd; /* fundo principal, brief */ --linho-soft: #f4f0e9; /* placeholder de midia, faixas discretas */ --branco: #ffffff; /* cards e texto sobre teal-eco */ --bruma: #c7dad9; /* superficie de apoio, brief */ /* ---------- Cor: marca ---------- */ --teal: #40707f; /* primaria, brief. 4.44:1 sobre --linho: titulo grande (3:1) e fundo de botao com texto branco (5.47:1). Nunca texto pequeno direto */ --teal-texto: #396676; /* variante legivel: 5.12:1 sobre --linho. Kicker, link, rotulo pequeno */ --teal-800: #345d6a; /* hover do botao primario */ --abisso: #17323a; /* secoes escuras, brief. 10.99:1 com --linho por cima */ --dourado: #b5905e; /* acento, brief. 2.40:1 sobre --linho: NUNCA texto sobre claro, so decorativo/fundo. 4.58:1 sobre --abisso: ok como rotulo em secao escura */ --dourado-wash: #f1e7d8; /* dourado lavado, fundo de selo/bloco de preparo */ /* ---------- Cor: texto ---------- */ --tinta: #161e22; /* texto principal, brief. 13.74:1 sobre --linho */ --tinta-suave: #4b5b60; /* texto secundario. 5.76:1 sobre --linho (AA) */ /* ---------- Ceu do hero (gradiente literal do brief) ---------- */ --sky-top: #17323a; --sky-bottom: #c7dad9; --sky-stop: 84%; /* Veu do hero: rgba escurecido do tom de tinta. Minimo do brief e 0.55; o pico aqui fica em 0.58 para a leitura sobreviver ao degrade inteiro, igual medido no site irmao com tons quase identicos de tinta. */ --sky-veil: rgba(22, 30, 34, 0.58); /* ---------- Cor: semanticos ---------- */ --bg: var(--linho); --surface: var(--branco); --fg: var(--tinta); --fg-muted: var(--tinta-suave); --fg-on-dark: #f6f2ea; /* 11.4:1 sobre --abisso */ --fg-on-dark-mu: rgba(246, 242, 234, 0.78); /* ~8.8:1 sobre --abisso */ --pale-on-dark: var(--bruma); /* 9.30:1 sobre --abisso, emphase sobre escuro */ --border: rgba(22, 30, 34, 0.12); --border-strong: rgba(22, 30, 34, 0.22); --accent: var(--teal); --dark-section: var(--abisso); --inset-hairline: rgba(22, 30, 34, 0.06) 0 0 0 1px inset; /* ---------- Tipografia ---------- Display Space Grotesk, corpo Rubik, mono Space Mono para kickers, numeros de registro e rotulos. Sem serif, sem italico em lugar nenhum. A enfase do display se faz por COR e PESO, nunca por inclinacao. */ --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: 'Rubik', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, Menlo, monospace; --display-weight: 500; --display-emph-style: normal; /* regra dura: nenhum italico no site */ --display-emph-color: var(--teal); --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; --ls-display: -0.02em; --ls-tight: -0.011em; --ls-caps: 0.09em; /* ---------- 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. 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 */