/* ========================================================================== VOLL STUDIOS — DESIGN TOKENS (v2.0) Fonte única de verdade. NENHUM valor hard-coded fora deste arquivo. Todo componente e toda página consome exclusivamente estas variáveis. ========================================================================== */ :root { /* ---------- 1. COR — MARCA (herdada da v1, preservada) ---------------- */ --teal-100: #E8F7F2; /* fundos suaves, hover de listas */ --teal-200: #C4EDE0; /* bordas, divisores decorativos */ --teal-300: #7DE2C7; /* v1 --teal-light : realces sobre navy */ --teal-400: #4CBFA5; /* v1 --teal-mid : PRIMARIA (botoes, icones) */ --teal-500: #349980; /* v1 --teal-dark : hover, titulos sobre cream */ --teal-600: #21705C; /* NOVO : texto teal sobre cream com contraste AA */ --navy-400: #2F5C87; /* NOVO : links e estados sobre navy */ --navy-500: #1A3C5E; /* v1 --navy : titulos, secoes escuras */ --navy-600: #122840; /* v1 footer : rodape, overlays */ --cream: #F8F7F2; /* fundo padrao do site */ --white: #FFFFFF; --gold: #FFD863; /* v1 --accent-gold : selos, destaque de valor */ --star: #FBBC04; /* estrelas Google — 1,7:1 sobre branco: é DECORATIVO. Toda estrela leva aria-hidden e vem acompanhada do valor em texto ("5,0"). Nunca é a única portadora da informação. NAO usar para outra coisa. */ /* ---------- 2. COR — TEXTO (papéis semânticos) ------------------------ */ --ink: #22303C; /* corpo — 12.6:1 sobre cream */ --ink-soft: #52606D; /* apoio — 7.1:1 sobre cream */ --ink-faint: #616D7A; /* metadados — 4.9:1 sobre cream */ --ink-invert: #FFFFFF; --ink-invert-soft: rgba(255,255,255,.76); /* ---------- 3. COR — SUPERFÍCIE --------------------------------------- */ --surface: var(--cream); --surface-raised: var(--white); --surface-sunken: #EFEDE5; --surface-dark: var(--navy-500); --surface-darker: var(--navy-600); --border: rgba(26,60,94,.10); --border-strong: rgba(26,60,94,.18); --border-invert: rgba(255,255,255,.14); /* ---------- 4. COR — ACENTO POR ÁREA ---------------------------------- REGRA DE OURO: o acento ocupa no máximo ~10% da superfície da página. Vive em: ícone do hero, badge de seção, fio superior de card, marcador de lista, glow do hero. NUNCA em: fundo de seção inteira, botão primário, corpo de texto. Teal e navy continuam donos da página. Cada página só declara — não redefine cor. */ --accent: var(--teal-400); --accent-soft: var(--teal-100); --accent-ink: var(--teal-600); --a-fisio: #2F6FB0; --a-fisio-soft: #E6F0F9; --a-fisio-ink: #1F4E7E; --a-pilates: #4CBFA5; --a-pilates-soft: #E8F7F2; --a-pilates-ink: #21705C; --a-estetica: #C08A6E; --a-estetica-soft: #FAF0EA; --a-estetica-ink: #8A5A40; --a-massagem: #C4795A; --a-massagem-soft: #FBEFE9; --a-massagem-ink: #8B4F35; --a-psicologia: #7B79AC; --a-psicologia-soft: #F0EFF8; --a-psicologia-ink: #52508A; --a-nutricao: #6F9A4E; --a-nutricao-soft: #EFF6E8; --a-nutricao-ink: #4A6B32; --a-cursos: #C79A2E; --a-cursos-soft: #FBF3DF; --a-cursos-ink: #8A6A15; /* ---------- 5. COR — FEEDBACK ----------------------------------------- */ --whatsapp: #188842; /* verde WhatsApp escurecido: branco passa AA */ --whatsapp-dark: #12692F; --whatsapp-raw: #25D366; /* verde original — SÓ em superfície decorativa */ --danger: #C0392B; --focus-ring: var(--teal-600); /* Par obrigatório do botão primário. O teal da marca (#4CBFA5) NÃO comporta texto branco (2,26:1). A cor de marca fica: quem muda é o texto, que passa a navy — 6,63:1. No hover o botão ACENDE (teal-300) em vez de escurecer, porque escurecer para teal-500 derrubaria o contraste para 4,29:1. */ --cta-bg: var(--teal-400); --cta-bg-hover: var(--teal-300); --cta-fg: var(--navy-600); /* ---------- 6. TIPOGRAFIA — FAMÍLIAS ---------------------------------- */ --font-sans: 'Nunito Sans', 'Avenir Roman', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-script: 'Dancing Script', 'Brush Script MT', cursive; /* ---------- 7. TIPOGRAFIA — ESCALA FLUIDA ----------------------------- Cada passo cresce entre 360px e 1440px de viewport. Proibido font-size solto: use sempre um destes tokens. REGRA: --font-script só em --fs-kicker e --fs-quote. Nunca em parágrafo, nunca abaixo de 1.5rem, nunca em bloco de +12 palavras. */ --fs-display: clamp(2.50rem, 1.60rem + 4.00vw, 4.50rem); /* hero da home */ --fs-h1: clamp(2.10rem, 1.55rem + 2.45vw, 3.40rem); /* hero interno */ --fs-h2: clamp(1.75rem, 1.40rem + 1.55vw, 2.60rem); /* titulo secao */ --fs-h3: clamp(1.30rem, 1.16rem + 0.62vw, 1.70rem); /* card grande */ --fs-h4: clamp(1.06rem, 1.01rem + 0.22vw, 1.20rem); /* card padrao */ --fs-lead: clamp(1.06rem, 1.00rem + 0.28vw, 1.25rem); /* subtitulo */ --fs-body: 1rem; /* 16px fixo */ --fs-sm: 0.9375rem; /* 15px */ --fs-xs: 0.8125rem; /* 13px — minimo */ --fs-kicker: clamp(1.60rem, 1.30rem + 1.35vw, 2.30rem); /* script */ --fs-quote: clamp(1.75rem, 1.30rem + 2.00vw, 2.90rem); /* script banner */ /* ---------- 8. TIPOGRAFIA — PESO / ALTURA / TRACKING ------------------- */ --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-extra: 800; --fw-black: 900; --lh-tight: 1.14; /* display e h1 */ --lh-snug: 1.25; /* h2, h3 */ --lh-base: 1.5; /* h4, labels */ --lh-relaxed: 1.7; /* corpo de texto — padrao */ --ls-tight: -0.02em; /* display/h1 — compensa o peso 900 */ --ls-snug: -0.01em; --ls-wide: 0.08em; /* eyebrow em caixa alta */ --measure: 68ch; /* largura maxima confortavel de paragrafo */ --measure-tight: 46ch; /* subtitulo de hero */ /* ---------- 9. ESPAÇAMENTO — escala 4px ------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32:128px; /* Respiro vertical de secao — unico ponto de controle do ritmo */ --section-y: clamp(4.0rem, 2.40rem + 6.40vw, 7.0rem); /* 64 -> 112px */ --section-y-sm: clamp(2.5rem, 1.60rem + 3.60vw, 4.5rem); /* 40 -> 72px */ /* ---------- 10. LAYOUT ------------------------------------------------- */ --container: 1200px; /* v1 = 1140 — mais respiro em desktop */ --container-wide: 1360px; /* faixas com conteudo largo */ --container-narrow: 780px; /* texto corrido, politicas */ --gutter: clamp(1rem, 0.55rem + 2vw, 1.75rem); /* 16px -> 28px */ --header-h: 76px; --header-h-sm: 64px; /* ---------- 11. RAIO --------------------------------------------------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; /* card padrao (v1 usava 20px) */ --r-lg: 26px; /* midia, paineis */ --r-xl: 36px; --r-pill: 999px; --r-blob: clamp(32px, 6vw, 72px); /* topo arredondado das faixas escuras */ /* ---------- 12. ELEVAÇÃO ----------------------------------------------- */ --sh-xs: 0 1px 2px rgba(18,40,64,.06), 0 1px 3px rgba(18,40,64,.05); --sh-sm: 0 2px 6px rgba(18,40,64,.05), 0 4px 12px rgba(18,40,64,.05); --sh-md: 0 8px 24px rgba(18,40,64,.07), 0 2px 6px rgba(18,40,64,.04); --sh-lg: 0 18px 48px rgba(18,40,64,.10), 0 4px 12px rgba(18,40,64,.05); --sh-xl: 0 32px 72px rgba(18,40,64,.14), 0 8px 20px rgba(18,40,64,.06); --sh-teal: 0 6px 18px rgba(76,191,165,.32); --sh-teal-h: 0 12px 30px rgba(52,153,128,.42); /* ---------- 13. MOVIMENTO ---------------------------------------------- */ --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 480ms; --dur-reveal: 720ms; --ease-out: cubic-bezier(.22,.61,.36,1); --ease-inout: cubic-bezier(.65,.05,.36,1); --ease-spring: cubic-bezier(.34,1.36,.64,1); /* ---------- 14. CAMADAS (z-index) — nunca inventar valor novo ---------- */ --z-base: 1; --z-sticky: 100; --z-overlay: 940; --z-header: 900; --z-drawer: 950; --z-float: 960; /* botao flutuante do WhatsApp */ --z-toast: 980; } /* -------------------------------------------------------------------------- ACENTO POR PÁGINA — aplicado via -------------------------------------------------------------------------- */ body[data-page="fisioterapia"] { --accent: var(--a-fisio); --accent-soft: var(--a-fisio-soft); --accent-ink: var(--a-fisio-ink); } body[data-page="pilates"] { --accent: var(--a-pilates); --accent-soft: var(--a-pilates-soft); --accent-ink: var(--a-pilates-ink); } body[data-page="estetica"] { --accent: var(--a-estetica); --accent-soft: var(--a-estetica-soft); --accent-ink: var(--a-estetica-ink); } body[data-page="massagem"] { --accent: var(--a-massagem); --accent-soft: var(--a-massagem-soft); --accent-ink: var(--a-massagem-ink); } body[data-page="psicologia"] { --accent: var(--a-psicologia); --accent-soft: var(--a-psicologia-soft); --accent-ink: var(--a-psicologia-ink); } body[data-page="nutricao"] { --accent: var(--a-nutricao); --accent-soft: var(--a-nutricao-soft); --accent-ink: var(--a-nutricao-ink); } body[data-page="cursos"] { --accent: var(--a-cursos); --accent-soft: var(--a-cursos-soft); --accent-ink: var(--a-cursos-ink); } /* -------------------------------------------------------------------------- MOVIMENTO REDUZIDO — respeitado globalmente, sem exceção. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }