/* ============================================ ORION SAAS — global.css Design system: variáveis, reset, nav, footer ============================================ */ /* Fonts carregadas via no de cada página — não usar @import (bloqueia render) */ /* ── Variáveis ── */ :root { --clr-night: #08091A; --clr-night-mid: #0D0F26; --clr-orion: #5B52FF; --clr-orion-light: #7C75FF; --clr-orion-dim: rgba(91, 82, 255, 0.12); --clr-zappix: #FF5C2B; --clr-zappix-light: #FF8A5C; --clr-zappix-dim: rgba(255, 92, 43, 0.12); --clr-praxis: #0EA5A0; --clr-praxis-light: #34C8C3; --clr-praxis-dim: rgba(14, 165, 160, 0.12); --clr-ice: #F4F6FC; --clr-white: #FFFFFF; --clr-gray-400: #9AA2BC; --clr-gray-500: #6B7490; --clr-gray-600: #4A5270; --surface-1: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.06); --border-subtle: rgba(255, 255, 255, 0.07); --border-mid: rgba(255, 255, 255, 0.13); --border-strong: rgba(255, 255, 255, 0.22); --font-serif: 'DM Serif Display', Georgia, serif; --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px; --ease-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --ease-base: 260ms cubic-bezier(0.4, 0, 0.2, 1); --ease-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1); --nav-h: 68px; --container: 1200px; --gutter: 1.5rem; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); background-color: var(--clr-night); color: var(--clr-ice); line-height: 1.65; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; appearance: none; } input, textarea, select { font-family: inherit; } ul, ol { list-style: none; } p { max-width: 65ch; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; } /* ── Layout ── */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .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; } /* ── Utilitários de seção ── */ .section { padding: var(--sp-20) 0; } .section--alt { background-color: var(--clr-night-mid); } .section-header { text-align: center; margin-bottom: var(--sp-12); } .section-eyebrow { display: inline-block; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clr-orion-light); margin-bottom: var(--sp-3); } .section-title { font-family: var(--font-serif); font-size: clamp(1.875rem, 4.5vw, 2.875rem); color: var(--clr-white); margin-bottom: var(--sp-4); } .section-subtitle { font-size: 1.0625rem; color: var(--clr-gray-400); max-width: 50ch; margin-inline: auto; line-height: 1.75; } /* ── Botões ── */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; line-height: 1; padding: 0.75rem 1.5rem; border-radius: var(--r-full); border: 1.5px solid transparent; transition: background-color var(--ease-fast), border-color var(--ease-fast), box-shadow var(--ease-fast), transform var(--ease-fast); white-space: nowrap; cursor: pointer; } .btn:active { transform: scale(0.98); } .btn svg { flex-shrink: 0; } .btn-primary { background-color: var(--clr-orion); color: var(--clr-white); border-color: var(--clr-orion); } .btn-primary:hover { background-color: var(--clr-orion-light); border-color: var(--clr-orion-light); box-shadow: 0 0 28px rgba(91, 82, 255, 0.40); } .btn-ghost { background-color: transparent; color: var(--clr-ice); border-color: var(--border-mid); } .btn-ghost:hover { background-color: var(--surface-2); border-color: var(--border-strong); } .btn-zappix { background-color: var(--clr-zappix); color: var(--clr-white); border-color: var(--clr-zappix); } .btn-zappix:hover { background-color: var(--clr-zappix-light); border-color: var(--clr-zappix-light); box-shadow: 0 0 28px rgba(255, 92, 43, 0.40); } .btn-praxis { background-color: var(--clr-praxis); color: var(--clr-white); border-color: var(--clr-praxis); } .btn-praxis:hover { background-color: var(--clr-praxis-light); border-color: var(--clr-praxis-light); box-shadow: 0 0 28px rgba(14, 165, 160, 0.40); } .btn-sm { font-size: 0.875rem; padding: 0.5rem 1.125rem; } .btn-lg { font-size: 1rem; padding: 0.875rem 1.875rem; } /* ── Badges ── */ .badge { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: var(--r-full); } .badge-orion { background: var(--clr-orion-dim); color: var(--clr-orion-light); border: 1px solid rgba(91, 82, 255, 0.20); } .badge-zappix { background: var(--clr-zappix-dim); color: var(--clr-zappix-light); border: 1px solid rgba(255, 92, 43, 0.20); } .badge-praxis { background: var(--clr-praxis-dim); color: var(--clr-praxis-light); border: 1px solid rgba(14, 165, 160, 0.20); } /* ── Navegação ── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background-color var(--ease-base), border-color var(--ease-base), box-shadow var(--ease-base); border-bottom: 1px solid transparent; } .nav.scrolled { background-color: rgba(8, 9, 26, 0.90); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: var(--border-subtle); box-shadow: 0 1px 28px rgba(0, 0, 0, 0.28); } .nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .nav-logo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 500; color: var(--clr-white); letter-spacing: -0.01em; flex-shrink: 0; } .nav-logo-mark { width: 28px; height: 28px; flex-shrink: 0; } .nav-links { display: none; align-items: center; gap: 0.25rem; } .nav-links a { font-size: 0.9375rem; font-weight: 400; color: var(--clr-gray-400); padding: 0.5rem 0.75rem; border-radius: var(--r-md); transition: color var(--ease-fast), background-color var(--ease-fast); } .nav-links a:hover { color: var(--clr-white); background-color: var(--surface-2); } .nav-links a.active { color: var(--clr-white); } .nav-actions { display: none; align-items: center; gap: var(--sp-3); } .nav-menu-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-md); color: var(--clr-ice); background: var(--surface-1); border: 1px solid var(--border-subtle); transition: background-color var(--ease-fast); } .nav-menu-btn:hover { background-color: var(--surface-2); } .nav-menu-btn .icon-close { display: none; } .nav-menu-btn.open .icon-menu { display: none; } .nav-menu-btn.open .icon-close { display: block; } .nav-mobile { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background-color: rgba(8, 9, 26, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--border-subtle); padding: var(--sp-4) var(--gutter) var(--sp-6); z-index: 99; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40); } .nav-mobile.open { display: flex; flex-direction: column; gap: var(--sp-1); } .nav-mobile a { display: block; font-size: 1rem; color: var(--clr-gray-400); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); transition: color var(--ease-fast), background-color var(--ease-fast); } .nav-mobile a:hover { color: var(--clr-white); background-color: var(--surface-2); } .nav-mobile-cta { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); } .nav-mobile-cta .btn { width: 100%; justify-content: center; } @media (min-width: 768px) { .nav-links { display: flex; } .nav-actions { display: flex; } .nav-menu-btn { display: none; } } /* ── Rodapé ── */ .footer { background-color: var(--clr-night-mid); border-top: 1px solid var(--border-subtle); padding: var(--sp-16) 0 var(--sp-8); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-10); margin-bottom: var(--sp-12); } .footer-brand-desc { font-size: 0.9375rem; color: var(--clr-gray-500); line-height: 1.75; max-width: 28ch; margin-top: var(--sp-4); } .footer-col h4 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--clr-gray-500); margin-bottom: var(--sp-4); } .footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); } .footer-col ul a { font-size: 0.9375rem; color: var(--clr-gray-400); transition: color var(--ease-fast); } .footer-col ul a:hover { color: var(--clr-white); } .footer-bottom { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-6); border-top: 1px solid var(--border-subtle); } .footer-bottom p { font-size: 0.875rem; color: var(--clr-gray-500); max-width: none; } .footer-bottom-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); } .footer-bottom-links a { font-size: 0.875rem; color: var(--clr-gray-500); transition: color var(--ease-fast); } .footer-bottom-links a:hover { color: var(--clr-gray-400); } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: span 2; } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); } .footer-brand { grid-column: span 1; } .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } } /* ── Animações ── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--ease-slow), transform var(--ease-slow); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.10s; } .reveal-d2 { transition-delay: 0.20s; } .reveal-d3 { transition-delay: 0.30s; } /* ── Hero: layout texto + imagem ── */ .hero-inner { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--sp-12); } /* Mobile: animation behind text as subtle background */ .hero-visual { position: absolute; inset: 0; z-index: 0; opacity: 0.12; pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero-inner { position: relative; } .hero-content { position: relative; z-index: 1; } @media (min-width: 1024px) { .hero-inner { grid-template-columns: 55fr 45fr; gap: var(--sp-16); position: static; } .hero-content { position: static; z-index: auto; } .hero-visual { position: relative; inset: auto; z-index: auto; opacity: 1; pointer-events: auto; overflow: visible; height: 420px; min-height: 420px; border-radius: var(--r-2xl); display: flex; align-items: center; justify-content: center; } } .reveal-d4 { transition-delay: 0.40s; } /* ── WhatsApp FAB ── */ .whatsapp-fab { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; z-index: 900; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45); transition: transform 200ms ease, box-shadow 200ms ease; text-decoration: none; } .whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.60); } .whatsapp-fab svg { flex-shrink: 0; }