/* INTERSOLAR ENERGIA RENOVÁVEL — DESIGN SYSTEM (SITE RESIDENCIAL) */ /* Fonte Google carregada via no do HTML, não por @import (evita bloqueio de renderização). */ :root { /* Paleta InterSolar */ --color-green: #17633C; --color-green-dark: #0B3D28; --color-green-deep: #082E20; --color-yellow: #FFC900; --color-yellow-light: #FFD93D; --color-offwhite: #F7F5EE; --color-white: #FFFFFF; --color-text: #17231C; --color-muted: rgba(23, 35, 28, 0.62); --color-muted-onDark: rgba(247, 245, 238, 0.68); --color-border: rgba(23, 35, 28, 0.12); --color-border-onDark: rgba(247, 245, 238, 0.14); --accent-color: var(--color-yellow); --accent-glow: rgba(255, 201, 0, 0.35); --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'DM Mono', 'Geist Mono', monospace; --gutter: clamp(1.1rem, 4vw, 4rem); --max-width: 1360px; --header-height: 78px; --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1); --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { background-color: var(--color-offwhite); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { position: relative; width: 100%; min-height: 100vh; background-color: var(--color-offwhite); overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } ::selection { background-color: var(--color-yellow); color: var(--color-green-deep); } img { max-width: 100%; display: block; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; } p { text-wrap: pretty; } a { color: inherit; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 3px; border-radius: 4px; } .mono-tag { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-green); display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 500; } .mono-tag::before { content: ''; display: inline-block; width: 7px; height: 7px; background-color: var(--color-yellow); border-radius: 50%; flex-shrink: 0; } .section-dark .mono-tag, .section-deep .mono-tag { color: var(--color-yellow-light); } .hero-heading .solar-word { color: var(--color-yellow); } .hero-heading .engineering-word { color: inherit; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.85rem; background-color: var(--color-yellow); color: var(--color-green-deep); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; padding: 1.05rem 2.1rem; border-radius: 9999px; border: 1px solid var(--color-yellow); cursor: pointer; text-decoration: none; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px var(--accent-glow); background-color: var(--color-yellow-light); } .btn-primary svg { transition: transform var(--transition-fast); } .btn-primary:hover svg { transform: translateX(3px); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; background: transparent; color: var(--color-text); font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; padding: 1.05rem 2rem; border-radius: 9999px; border: 1.5px solid var(--color-border); cursor: pointer; text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast); } .btn-secondary:hover { border-color: var(--color-green); color: var(--color-green); background-color: rgba(23, 99, 60, 0.05); } .section-dark .btn-secondary, .section-deep .btn-secondary { color: var(--color-offwhite); border-color: var(--color-border-onDark); } .section-dark .btn-secondary:hover, .section-deep .btn-secondary:hover { border-color: var(--color-yellow); color: var(--color-yellow-light); background-color: rgba(255, 201, 0, 0.06); } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } .section { position: relative; padding: clamp(3.5rem, 8vw, 7.5rem) 0; z-index: 2; } .section-light { background-color: var(--color-offwhite); color: var(--color-text); } .section-white { background-color: var(--color-white); color: var(--color-text); } .section-dark { background-color: var(--color-green-dark); color: var(--color-offwhite); } .section-deep { background-color: var(--color-green-deep); color: var(--color-offwhite); } .custom-cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; background-color: var(--color-yellow); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform 0.1s ease-out, width 0.3s ease, height 0.3s ease; box-shadow: 0 0 14px var(--accent-glow); } .custom-cursor.hovered { width: 46px; height: 46px; background-color: rgba(255, 201, 0, 0.18); border: 1px solid var(--color-yellow); backdrop-filter: blur(4px); } .custom-cursor-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.08em; color: var(--color-green-deep); text-transform: uppercase; } .card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: 20px; } .section-dark .card, .section-deep .card { background: rgba(247, 245, 238, 0.05); border: 1px solid var(--color-border-onDark); } .eyebrow-line { display: inline-flex; align-items: center; gap: 0.6rem; } /* Rótulo de etiqueta numerada usado em várias seções */ .step-badge { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-green); color: var(--color-yellow); flex-shrink: 0; } /* Skip link para acessibilidade de teclado */ .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 10000; background: var(--color-green-deep); color: var(--color-white); padding: 0.85rem 1.25rem; border-radius: 10px; font-family: var(--font-display); font-weight: 700; text-decoration: none; transition: top var(--transition-fast); } .skip-link:focus { top: 1rem; } /* Breakpoints responsivos gerais */ @media (max-width: 900px) { :root { --header-height: 66px; } .btn-primary, .btn-secondary { width: 100% !important; justify-content: center !important; } .custom-cursor { display: none !important; } }