/* ========================================================================== theme.css — camada de marca sobre o Bootstrap 5.3 -------------------------------------------------------------------------- Regra do projeto: layout e componentes SEMPRE com classes nativas do Bootstrap (container/row/col/card/navbar/offcanvas/btn/form-*). Este arquivo só faz três coisas: 1) declara os tokens de marca em :root 2) sobrescreve as CSS vars do proprio Bootstrap (--bs-*) 3) adiciona 8 utilitarios que o Bootstrap nao tem Para trocar de cliente, mexa APENAS no bloco "TEMAS". ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* cores base (comuns a todos os temas) */ --ink: #1B1917; /* texto principal / fundos escuros */ --ink-soft: #6E655D; /* texto secundario */ --paper: #FBF8F4; /* fundo da pagina */ --panel: #F3EDE5; /* faixas e cards de apoio */ --line: rgba(27, 25, 23, .12); --line-strong: rgba(27, 25, 23, .22); /* tipografia */ --font-head: "Outfit", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; /* escala de espaco (multiplos de 4px) */ --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.75rem; /* 44px */ --space-8: 4rem; /* 64px */ --space-9: 4.75rem; /* 76px */ /* cantos: o design e reto. NAO usar rounded-pill/rounded-3 do Bootstrap. */ --bs-border-radius: 2px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 3px; --bs-border-radius-xl: 3px; --bs-border-radius-pill: 3px; /* overrides globais do Bootstrap */ --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-body-font-family: var(--font-body); --bs-border-color: var(--line); --bs-link-color: var(--ink); --bs-link-hover-color: var(--brand); } /* O Bootstrap 5.3 calcula a cor de por rgba(var(--bs-link-color-rgb), …), entao sobrescrever apenas --bs-link-color nao basta. */ a { color: inherit; text-decoration-color: var(--line-strong); } a:hover, a:focus-visible { color: var(--brand); } /* links que vivem sobre fundo escuro mantem o branco das classes utilitarias */ .text-white:hover, .bg-ink a.text-white:hover { color: #fff; } /* -------------------------------------------------------------------------- 2. TEMAS — uma classe no define a marca da pagina -------------------------------------------------------------------------- */ .theme-servicos { --brand: #B4552F; } .theme-produtos { --brand: #B4552F; } /* Every design system token below reads the master's editor value first (--curated-*), then falls back to the segment default. This bridges the "editor namespace" (the settings the drawer writes) with the "design system namespace" (the tokens the CSS/utilities consume). Without this bridge, editing brand color / font / etc. in the drawer would set --curated-brand but nothing would read it, because the utilities all consume --brand. `--curated-*` vars are set by the editor's inline