/* ============================================================= Dr. Mauro Poderoso, clinica credenciada Detran-SP Design tokens. Ponto unico de cor e de tipografia do site. Paleta da marca (definida no brief, nao inventada): linho #F2F4F5 fundo principal neblina #D9E0DC superficie de apoio verde-oliva #4C6151 primaria: display, botoes, links petroleo-verde #22342C secoes escuras, footer latao #C9A15A acento, rotulos e o bloco de horario carvao #1C2429 texto principal Vocabulario semantico, nunca rampa numerica: aqui nao existe --color-100 nem --verde-500. Cada nome diz o que a cor faz. Os tokens derivados abaixo saem desses seis valores por ajuste de claridade, e o contraste de cada par texto/fundo em uso esta anotado ao lado. Minimo AA (4.5:1) para todo texto de corpo. ============================================================= */ :root { /* ---------- Cor: superficies ---------- */ --linho: #f2f4f5; /* fundo principal, brief */ --neblina: #d9e0dc; /* superficie de apoio, brief */ --neblina-clara: #eaefec; /* neblina lavada: faixas de apoio e avisos */ --papel: #ffffff; /* cards */ /* ---------- Cor: marca ---------- */ --verde-oliva: #4c6151; /* primaria, 6.07:1 sobre --linho (AA) */ --oliva-cerrado: #3e5044; /* hover do botao oliva */ --petroleo-verde: #22342c; /* secoes escuras e footer, brief */ /* O latao e a cor que destoa de proposito: e ela que marca o horario. Cru, ele rende so 2.18:1 sobre o linho, entao nao pode virar texto em superficie clara. Por isso ele tem duas versoes de servico. */ --latao: #c9a15a; /* acento cheio, 5.47:1 sobre --petroleo-verde */ --latao-fundo: #7a5c22; /* o mesmo latao rebaixado ate 5.63:1 sobre --linho: e ESTE que vira texto, rotulo ou icone no claro */ --latao-palido: #e4ce9c; /* latao claro, 8.53:1 sobre --petroleo-verde */ /* ---------- Cor: texto ---------- */ --carvao: #1c2429; /* texto principal, 14.27:1 sobre --linho */ --carvao-brando: #55635c; /* texto secundario, 5.72:1 sobre --linho (AA) */ /* ---------- Ceu do hero (gradiente literal do brief) ---------- */ --ceu-topo: #22342c; --ceu-base: #d9e0dc; --ceu-parada: 84%; /* Veu de leitura. O pior fundo do titulo do hero nao e o degrade: e uma bussola clara passando por tras dele, somada as nuvens que sobem do horizonte. O brief fixa 0.55 como piso; medido, 0.58 poe a enfase do titulo acima de 3:1 e mantem o bando visivel. E este numero que segura o AA do hero: medir antes de baixar. */ --ceu-veu: rgba(28, 36, 41, 0.58); /* ---------- Cor: semanticos ---------- */ --bg: var(--linho); --surface: var(--papel); --fg: var(--carvao); --fg-muted: var(--carvao-brando); --fg-on-dark: #f2f4f5; /* 11.93:1 sobre --petroleo-verde */ --fg-on-dark-mu: rgba(242, 244, 245, 0.78); /* 7.91:1 sobre --petroleo-verde */ --border: rgba(28, 36, 41, 0.12); --border-strong: rgba(28, 36, 41, 0.22); --accent: var(--verde-oliva); --dark-section: var(--petroleo-verde); --inset-hairline: rgba(28, 36, 41, 0.06) 0 0 0 1px inset; /* ---------- Tipografia ---------- Tres vozes, todas sem serifa. Barlow no display porque nasceu com dna de sinalizacao de transporte: formas levemente arredondadas, leitura rapida a distancia, o universo de quem esta tirando ou renovando habilitacao. Public Sans no corpo porque e uma sans de servico publico, feita para formulario e instrucao, e da ao texto a clareza de quem explica um procedimento oficial. Roboto Mono nos kickers, nos horarios e no numero de registro. Serif e proibida neste projeto. Italico tambem: a enfase do display se faz por COR e por PESO, nunca por inclinacao. */ --font-display: 'Barlow', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'Roboto Mono', ui-monospace, Menlo, monospace; --display-weight: 500; --display-emph-style: normal; /* regra dura: nenhum italico no site */ --display-emph-color: var(--verde-oliva); --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); /* O horario e o elemento mais importante do site. Ele tem escala propria, acima de qualquer outro numero da pagina. */ --t-horario: clamp(2rem, 1.4rem + 2.4vw, 3rem); /* 32 a 48px */ --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: a pagina respira como uma instrucao lida com calma */ --ls-display: -0.02em; --ls-tight: -0.008em; --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 herdados da engenharia do template. 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 */