/* ═══════════════════════════════════════════════════════════════════════ ENERMAC · base.css Fundações do design system. ÍNDICE 1. Tokens (paleta oficial, tipografia, raios, easing, sombras) 2. Reset 3. Tipografia base 4. Utilitários (container, eyebrow, section-head, section-cta) 5. Ícones (sprite SVG) 6. Botões 7. Acessibilidade (focus visível) ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS — Paleta oficial Enermac (guia da marca: máx. 5 cores) ── */ :root { /* Cor */ --c-navy: #17345C; /* Azul Profundo — único tom escuro da marca */ --c-navy-deep: #0E2340; /* Derivado do navy p/ scrims e profundidade */ --c-blue: #2F5FA8; /* Azul Enermac (primário) */ --c-orange: #F0642A; /* Laranja Energia (accent/CTA) */ --c-orange-hover: #D4531E; --c-green: #4F8A3B; /* Verde Biogás (apoio) */ --c-gray: #EEF1F4; /* Cinza Técnico (fundo neutro) */ --c-white: #FFFFFF; --c-ink: #0D1E32; /* Texto escuro */ --c-ink-soft: #4A6080; /* Texto secundário */ --c-wa: #25D366; /* WhatsApp */ --c-wa-hover: #1DB554; /* Tipografia */ --font-display: 'Montserrat', sans-serif; --font-body: 'Inter', sans-serif; /* Hierarquia de títulos — 3 níveis globais, do maior pro menor. Nenhum título do site deve fugir dessa escala (evita blocos de texto "gritando" cada um com um tamanho próprio). */ --fs-display: clamp(2.09rem, 3.52vw, 2.86rem); /* nível 1 — hero, 1x na página */ --fs-title: clamp(1.43rem, 1.98vw, 1.925rem); /* nível 2 — títulos de seção */ --fs-subtitle: clamp(1.155rem, 1.43vw, 1.43rem); /* nível 3 — subtítulos de destaque */ /* Forma */ --radius: 12px; --radius-lg: 20px; /* Movimento (padrões do design de interação) */ --ease-out: cubic-bezier(0, 0, .2, 1); /* elementos entrando */ --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* elementos em cena */ --dur-micro: .15s; --dur-small: .25s; --dur-medium: .4s; /* Elevação */ --shadow-card: 0 20px 50px rgba(13, 30, 50, .09); --shadow-deep: 0 30px 60px rgba(0, 0, 0, .35); } /* ── 2. RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* iOS Safari liga o scroll da página ao , não ao — só overflow-x:hidden no body (abaixo) não basta pra conter o full-bleed dos carrosséis mobile (margin negativa, ver mobile.css); sem isto o gesto de arrastar um carrossel podia vazar num scroll horizontal da página inteira. */ overflow-x: hidden; } body { font-family: var(--font-body); background: var(--c-gray); color: var(--c-ink); overflow-x: hidden; } img { max-width: 100%; display: block; } /* Esconde visualmente mantendo acessível a leitores de tela — usado em conteúdo decorativo/redundante (ex.: figcaption da cena 3D). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Âncoras não ficam escondidas atrás da navbar fixa */ [id] { scroll-margin-top: 76px; } button { font: inherit; } /* Sprite de ícones: presente no DOM, invisível no layout */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ── 3. TIPOGRAFIA BASE ── */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; } /* ── 4. UTILITÁRIOS ── */ .container { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); } /* Rótulo de seção (eyebrow) */ .eyebrow { display: block; font-family: var(--font-display); font-size: 0.77rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--c-orange); margin-bottom: .55rem; } .eyebrow--light { color: #fff; } /* Cabeçalho de seção */ .section-head { text-align: center; margin-bottom: 2rem; } .section-head h2 { font-size: var(--fs-title); font-weight: 800; color: var(--c-ink); text-transform: uppercase; max-width: 700px; margin: 0 auto; line-height: 1.1; } .section-head h2 em { font-style: normal; color: var(--c-orange); } .section-head__sub { font-size: clamp(1.75rem, 2.53vw, 2.255rem); font-weight: 800; color: var(--c-ink); text-transform: uppercase; max-width: 700px; margin: 0 auto; line-height: 1.2; } .section-head__sub em { font-style: normal; color: var(--c-orange); } .section-head__desc { margin: .9rem auto 0; max-width: 620px; font-size: 1rem; color: var(--c-ink-soft); line-height: 1.6; } .section-head--left { text-align: left; margin-bottom: 1.75rem; } .section-head--left h2 { margin: 0; max-width: 740px; } /* CTA de fechamento de seção */ .section-cta { display: flex; justify-content: center; margin-top: 2.5rem; } /* ── 5. ÍCONES ── fill:currentColor pinta os símbolos preenchidos (Material Symbols); símbolos de traço definem fill="none" no próprio e prevalecem. */ .icon { width: 1.25em; height: 1.25em; fill: currentColor; flex-shrink: 0; } /* ── 6. BOTÕES ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; padding: .9rem 2rem; border-radius: 50px; border: none; cursor: pointer; transition: background var(--dur-small) var(--ease-in-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-small) var(--ease-in-out); /* Sem white-space:nowrap — rótulos longos ("Agende uma visita em sua propriedade") precisam quebrar linha em telas estreitas em vez de estourar o container. */ text-align: center; } .btn:active { transform: translateY(0) scale(.98); } .btn .icon { width: 18px; height: 18px; } .btn--primary { background: var(--c-orange); color: var(--c-white); border: 1.5px solid var(--c-orange); } .btn--primary:hover { background: var(--c-white); color: var(--c-orange); border-color: var(--c-orange); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(240, 100, 42, .4); } .btn--wa { background: var(--c-wa); color: #fff; } .btn--wa:hover { background: var(--c-wa-hover); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37, 211, 102, .4); } .btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .3); } .btn--ghost:hover { border-color: var(--c-orange); color: var(--c-orange); } .btn--sm { padding: .62rem 1.3rem; font-size: 0.902rem; } .btn--block { width: 100%; font-size: 1.045rem; } /* ── 7. ACESSIBILIDADE ── */ :focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; border-radius: 4px; } /* Botões em áreas de toque: alvo mínimo confortável */ @media (pointer: coarse) { .btn { min-height: 44px; } }