/* ===================================================================== CONSTRUTORA JARDINS · tokens do site (construtorajardins.com.br) Design system v1 · 28/09/2026 · fonte: livro da marca v1 Fontes: Outfit (texto e títulos) + Caveat (uma palavra de afeto). ===================================================================== */ :root { /* ---------- COR · as cores do lote ---------- */ --cor-verde: #1F4A3C; /* verde-jardim · 60% · fundos e textos */ --cor-verde-escuro: #16362C; /* rodapé, cartão sobre verde, véu */ --cor-verde-medio: #27584A; /* só desenho do cobogó sobre verde */ --cor-areia: #EFE7DA; /* 30% · fundos claros, cartões */ --cor-off: #F7F2EA; /* fundo da página */ --cor-texto: #1F2A24; /* texto corrido sobre claro */ --cor-texto-suave: #46524B; /* parágrafo secundário (6,7:1 sobre areia) */ --cor-terracota: #C56A43; /* 10% · UM elemento por tela: o botão */ --cor-terracota-esc:#A8552F; /* texto pequeno terracota sobre areia/off */ --cor-terracota-cl: #E9A07F; /* terracota sobre verde */ --cor-cinza: #7C877F; /* ícone inativo, fio, texto >= 24 px */ --cor-linha: #D8CFBF; /* bordas e divisórias */ --cor-cobogo-areia: #E2D7C4; /* desenho do cobogó sobre areia */ --cor-branco: #FFFFFF; /* véu verde sobre foto (texto em cima de foto sempre com véu) */ --veu-verde: linear-gradient(180deg, rgba(22,54,44,0) 30%, rgba(22,54,44,.55) 60%, rgba(22,54,44,.92) 100%); --veu-verde-lateral: linear-gradient(90deg, rgba(22,54,44,.92) 0%, rgba(22,54,44,.7) 45%, rgba(22,54,44,.1) 100%); /* ---------- TIPOGRAFIA ---------- */ --fonte-base: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-mao: "Caveat", "Segoe Print", cursive; /* escala fluida: 360 px -> 1440 px de largura (cqi = largura do container; sem container vira largura da tela) */ --fs-display: clamp(2.75rem, 1.6rem + 5cqi, 6rem); /* 44 -> 96 */ --fs-h1: clamp(2.25rem, 1.5rem + 3.2cqi, 4.25rem); /* 36 -> 68 */ --fs-h2: clamp(1.75rem, 1.3rem + 2cqi, 3rem); /* 28 -> 48 */ --fs-h3: clamp(1.375rem, 1.15rem + 1cqi, 1.875rem); /* 22 -> 30 */ --fs-h4: clamp(1.125rem, 1.05rem + .4cqi, 1.375rem);/* 18 -> 22 */ --fs-corpo: clamp(1rem, .96rem + .2cqi, 1.125rem); /* 16 -> 18 */ --fs-lead: clamp(1.125rem, 1rem + .5cqi, 1.375rem); /* 18 -> 22 */ --fs-legenda: .875rem; /* 14 */ --fs-rotulo: .8125rem; /* 13 */ --fs-sobre: clamp(.95rem, .8rem + .6cqi, 1.5rem); /* 15 -> 24 */ --fs-mao: clamp(1.75rem, 1.4rem + 1.5cqi, 2.75rem); /* 28 -> 44 */ --fs-numero: clamp(4rem, 2.5rem + 7cqi, 9rem); /* 64 -> 144 */ --lh-titulo: 1.02; --lh-texto: 1.55; --ls-titulo: -.025em; --ls-sobre: .18em; --ls-rotulo: .28em; /* ---------- ESPAÇO · base 4 / ritmo 8 ---------- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px; --secao-y: clamp(64px, 40px + 6cqi, 128px); /* respiro vertical de seção */ /* ---------- GRID ---------- */ --container: 1200px; --gutter-lateral: clamp(20px, 4cqi, 40px); --colunas: 12; --calha: 24px; /* desktop */ --calha-mobile: 16px; /* 4 colunas */ /* ---------- FORMA ---------- */ --raio-1: 4px; /* selo, chip de data */ --raio-2: 8px; /* campo de formulário, foto pequena */ --raio-3: 16px; /* cartão */ --raio-4: 24px; /* bloco grande, faixa */ --raio-pilula: 999px; /* botão */ --borda-fina: 1px solid var(--cor-linha); --borda-verde: 2px solid var(--cor-verde); --foco: 0 0 0 3px var(--cor-off), 0 0 0 5px var(--cor-verde); --sombra-1: 0 1px 2px rgba(22,54,44,.08), 0 1px 1px rgba(22,54,44,.04); --sombra-2: 0 10px 24px -10px rgba(22,54,44,.22); --sombra-3: 0 28px 56px -20px rgba(22,54,44,.34); /* ---------- MOVIMENTO · sutil ---------- */ --dur-rapida: 140ms; /* hover, foco */ --dur-base: 240ms; /* abrir menu, trocar aba */ --dur-lenta: 480ms; /* entrar na tela (fade-up) */ --curva-padrao: cubic-bezier(.4, 0, .2, 1); --curva-saida: cubic-bezier(.2, .7, .2, 1); /* desacelera no fim */ --desloc-entrada: 12px; /* ---------- TEXTURA · cobogó jardins (4 folhas do símbolo em volta de um centro) ---------- */ --cobogo-areia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23E2D7C4' transform='translate(60 60)'%3E%3Cpath transform='translate(4 -4)' d='M0 0C0-18 14-32 40-38C36-13 21 0 0 0Z'/%3E%3Cpath transform='translate(4 4) rotate(90)' d='M0 0C0-18 14-32 40-38C36-13 21 0 0 0Z'/%3E%3Cpath transform='translate(-4 4) rotate(180)' d='M0 0C0-18 14-32 40-38C36-13 21 0 0 0Z'/%3E%3Cpath transform='translate(-4 -4) rotate(270)' d='M0 0C0-18 14-32 40-38C36-13 21 0 0 0Z'/%3E%3C/g%3E%3C/svg%3E"); --cobogo-verde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%2327584A' transform='translate(60 60)'%3E%3Cpath transform='translate(4 -4)' d='M0 0C0-18 14-32 40-38C36-13 21 0 0 0Z'/%3E%3Cpath transform='translate(4 4) rotate(90)' d='M0 0C0-18 14-32 40-38C36-13 21 0 0 0Z'/%3E%3Cpath transform='translate(-4 4) rotate(180)' d='M0 0C0-18 14-32 40-38C36-13 21 0 0 0Z'/%3E%3Cpath transform='translate(-4 -4) rotate(270)' d='M0 0C0-18 14-32 40-38C36-13 21 0 0 0Z'/%3E%3C/g%3E%3C/svg%3E"); --cobogo-tam: 72px; /* tamanho do bloco na tela */ } /* Movimento: quem pediu menos movimento no sistema não recebe animação */ @media (prefers-reduced-motion: reduce) { :root { --dur-rapida: 0ms; --dur-base: 0ms; --dur-lenta: 0ms; --desloc-entrada: 0px; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }