/* =========================================================== VIASS — base.css Sistema de TEMAS (claro/escuro), tokens, reset e tipografia. Theme switch via [data-theme="light"] no . Em React, isso vira um ThemeProvider/useTheme trivial. =========================================================== */ :root { /* ============================================ TEMA ESCURO (DEFAULT) ============================================ */ /* Cores — semânticas para funcionar em ambos os temas */ --bg: #060f1f; --bg-2: #0a1830; --bg-3: #0d2040; --bg-soft: #122b4d; --surface: #0a1830; --surface-2: #0d2040; --surface-hover: #122b4d; --line: #1c3a5e; --line-2: rgba(120, 160, 220, 0.15); --line-soft: rgba(120, 160, 220, 0.08); --ink: #eaf1fb; --ink-2: #c2d3ec; --muted: #9bb0cc; --muted-2: #6f88a8; --gold-300: #f0d99b; --gold-400: #e0c06a; --gold-500: #c9a14a; --gold-600: #a9833c; --gold-glow: rgba(201, 161, 74, 0.4); --success: #46d18a; --error: #f06d6d; --overlay: rgba(6, 15, 31, 0.7); --backdrop: rgba(6, 15, 31, 0.82); /* Hero gradient mesh */ --mesh-1: rgba(201, 161, 74, 0.16); --mesh-2: rgba(22, 48, 83, 0.9); --mesh-3: var(--bg); --shadow-card: 0 24px 60px -24px rgba(0, 0, 0, 0.55); --shadow-card-hover: 0 30px 80px -20px rgba(0, 0, 0, 0.7); --shadow-gold: 0 14px 40px -10px rgba(201, 161, 74, 0.55); /* Tipografia */ --display: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Outfit', system-ui, -apple-system, sans-serif; /* Espaçamentos */ --container: 1180px; --container-narrow: 920px; --gutter: 28px; /* Transições */ --t-fast: 0.25s ease; --t-base: 0.4s cubic-bezier(0.16, 1, 0.3, 1); --t-slow: 0.9s cubic-bezier(0.16, 1, 0.3, 1); --t-theme: 0.45s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ TEMA CLARO — overrides ============================================ */ [data-theme='light'] { --bg: #fafaf6; --bg-2: #f3f1ea; --bg-3: #ede9de; --bg-soft: #e6e1d4; --surface: #ffffff; --surface-2: #f7f4ec; --surface-hover: #f0ece1; --line: #d9d2bf; --line-2: rgba(22, 48, 83, 0.12); --line-soft: rgba(22, 48, 83, 0.06); --ink: #0f1e36; --ink-2: #2a3b58; --muted: #51637e; --muted-2: #7a8aa3; --gold-300: #b18a3e; --gold-400: #a17a30; --gold-500: #8c6a26; --gold-600: #6f531c; --gold-glow: rgba(140, 106, 38, 0.25); --success: #2a9d6a; --error: #c54a4a; --overlay: rgba(15, 30, 54, 0.55); --backdrop: rgba(250, 250, 246, 0.88); /* Hero gradient mesh — mais sutil no claro */ --mesh-1: rgba(177, 138, 62, 0.16); --mesh-2: rgba(22, 48, 83, 0.08); --mesh-3: var(--bg); --shadow-card: 0 20px 50px -20px rgba(22, 48, 83, 0.18); --shadow-card-hover: 0 30px 70px -16px rgba(22, 48, 83, 0.25); --shadow-gold: 0 14px 36px -10px rgba(140, 106, 38, 0.4); } /* Auto theme: usa luz se sistema for claro e não houver preferência */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } } /* Reset enxuto */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 100px; transition: background-color var(--t-theme), color var(--t-theme); } body { font-family: var(--sans); background: var(--bg); color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color var(--t-theme), color var(--t-theme); } /* Transição suave em qualquer mudança de tema */ body, header, footer, section, .svc, .value-card, .contact-card, .btn, input, select, textarea, .dropdown, .spec-tag, .tl-item, .meta-item, .form-card, .contact-form-block, .newsletter-inline { transition: background-color var(--t-theme), color var(--t-theme), border-color var(--t-theme), box-shadow var(--t-theme); } ::selection { background: var(--gold-500); color: var(--bg); } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } ul, ol { list-style: none; } /* Tipografia base */ h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); } h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); font-weight: 400; } h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; } h3 { font-size: 1.4rem; } h4 { font-size: 1.12rem; font-weight: 600; } em { font-style: italic; color: var(--gold-400); } /* Utilitários */ .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .wrap-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); } .kicker { display: inline-block; font-family: var(--sans); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 18px; } .lede { font-size: 1.18rem; color: var(--muted); font-weight: 300; max-width: 620px; } /* ============================================ ANIMAÇÕES DE ENTRADA AO ROLAR ============================================ */ .rv { opacity: 0; transform: translateY(28px); transition: var(--t-slow); } .rv.in { opacity: 1; transform: none; } /* Variações */ .rv-left { transform: translateX(-32px); } .rv-left.in { transform: none; } .rv-right { transform: translateX(32px); } .rv-right.in { transform: none; } .rv-scale { transform: scale(0.96); } .rv-scale.in { transform: scale(1); } /* Stagger automático para filhos de .stagger */ .stagger > .rv { transition-delay: 0s; } .stagger > .rv:nth-child(1) { transition-delay: 0s; } .stagger > .rv:nth-child(2) { transition-delay: .06s; } .stagger > .rv:nth-child(3) { transition-delay: .12s; } .stagger > .rv:nth-child(4) { transition-delay: .18s; } .stagger > .rv:nth-child(5) { transition-delay: .24s; } .stagger > .rv:nth-child(6) { transition-delay: .30s; } .stagger > .rv:nth-child(7) { transition-delay: .36s; } .stagger > .rv:nth-child(8) { transition-delay: .42s; } /* Garante texto/cores corretas ao salvar/imprimir/exportar PDF */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media print { .rv, .rv-left, .rv-right, .rv-scale { opacity: 1 !important; transform: none !important; } .wa-float, .menu-tog, .scrolldn, .theme-toggle, .ticker, .marquee, .scroll-progress { display: none !important; } header { position: static !important; } .hero, .page-header { min-height: auto !important; padding: 60px 0 50px !important; } body { background: white !important; color: black !important; } } /* Reduz movimento para usuários com motion sensitivity */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .rv, .rv-left, .rv-right, .rv-scale { opacity: 1; transform: none; } } /* Fallback se JS estiver desativado */ noscript + style { display: none; } /* Scroll progress bar no topo */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); z-index: 100; width: 0%; transition: width 0.1s linear; box-shadow: 0 0 12px var(--gold-glow); }