/* ========================================================================== SPRINTUP DESIGN SYSTEM Reutilize esse arquivo em qualquer projeto da SprintUp. Importe no : ========================================================================== */ /* ── GOOGLE FONTS ── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ── VARIÁVEIS ── */ :root { /* Cores de fundo */ --bg-main: #050505; --bg-alt: #0a0a0a; --bg-card: rgba(25, 25, 25, 0.6); /* Bordas */ --border-light: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.15); /* Texto */ --text-primary: #ffffff; --text-secondary: #999999; --text-accent: #e2e2e2; /* Cores de marca */ --blue: #3C64FF; --blue-dark: #2a50ee; --green: #25D366; --green-dark: #1daa54; /* Sombras / Glow */ --glow-blue: 0 0 28px rgba(60, 100, 255, 0.45), 0 4px 16px rgba(60, 100, 255, 0.25); --glow-blue-hover: 0 0 44px rgba(60, 100, 255, 0.65), 0 8px 28px rgba(60, 100, 255, 0.40); --glow-green: 0 4px 24px rgba(37, 211, 102, 0.25); /* Border radius */ --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --radius-pill: 100px; /* Transições */ --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-sm: 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Layout */ --max-w: 1200px; --header-height: 80px; } /* ── RESET BASE ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-main); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Textura de pontos */ background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0); background-size: 32px 32px; } a { text-decoration: none; color: inherit; transition: var(--transition); } img { max-width: 100%; display: block; } p { color: var(--text-secondary); } /* ── LAYOUT ── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 5%; } .section { padding: 7rem 1.25rem; border-bottom: 1px solid var(--border-light); } /* ── TIPOGRAFIA ── */ h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); } h1 { font-size: clamp(2.8rem, 6vw, 5rem); letter-spacing: -0.04em; /* Gradiente padrão nos títulos principais */ background: linear-gradient(180deg, #ffffff 0%, #a1a1a1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); } h3 { font-size: 1.25rem; font-weight: 700; } /* ── NAVEGAÇÃO ── */ .nav { position: fixed; top: 0; width: 100%; height: var(--header-height); background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; z-index: 1000; } .nav-inner { max-width: var(--max-w); width: 100%; margin: auto; padding: 0 5%; display: flex; align-items: center; justify-content: space-between; } /* ── BADGE / LABEL ── */ .badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 600; color: var(--text-accent); } .section-label { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 0.3rem 0.9rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 1.25rem; } /* ── BOTÕES ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; font-weight: 600; font-size: 1rem; font-family: 'Inter', sans-serif; border-radius: var(--radius-pill); cursor: pointer; border: 1px solid transparent; transition: var(--transition-sm); text-decoration: none; } /* Primário — azul com glow */ .btn-primary { background: var(--blue); color: #ffffff; box-shadow: var(--glow-blue); } .btn-primary:hover { background: var(--blue-dark); box-shadow: var(--glow-blue-hover); transform: translateY(-2px); } /* Secundário — outline */ .btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--border-strong); transform: translateY(-2px); } /* WhatsApp — verde */ .btn-whatsapp { background: var(--green); color: #ffffff; border-color: var(--green); } .btn-whatsapp:hover { background: var(--green-dark); border-color: var(--green-dark); box-shadow: var(--glow-green); transform: translateY(-2px); } /* Tamanho grande */ .btn-lg { padding: 1.1rem 2.5rem; font-size: 1.1rem; } /* Largura total */ .btn-block { width: 100%; justify-content: center; } /* ── CARDS ── */ .card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.75rem; transition: var(--transition-sm); } .card:hover { border-color: var(--border-strong); transform: translateY(-4px); background: rgba(35, 35, 35, 0.8); } /* ── ÍCONE EM CARD ── */ .card-icon { width: 44px; height: 44px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-strong); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; color: var(--text-accent); } /* ── GLOW DO HERO ── */ .hero-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: 0.15; } .hero-glow-left { background: radial-gradient(circle, rgba(60, 100, 255, 0.4), transparent 70%); top: -10%; left: -10%; } .hero-glow-right { background: radial-gradient(circle, rgba(40, 80, 255, 0.3), transparent 70%); bottom: -10%; right: -10%; } /* ── CALLOUT AZUL ── */ .callout { display: inline-block; background: rgba(60, 100, 255, 0.1); border: 1px solid rgba(60, 100, 255, 0.25); border-radius: var(--radius); padding: 0.75rem 1.25rem; font-size: 0.95rem; font-weight: 600; color: #a5b4fc; } /* ── DESTAQUE COM BORDA ESQUERDA ── */ .highlight-left { border-left: 2px solid var(--blue); padding-left: 1.25rem; font-size: 1.05rem; font-weight: 600; color: var(--text-accent); line-height: 1.6; } /* ── UTILITÁRIOS ── */ .text-blue { color: var(--blue); } .text-muted { color: var(--text-secondary); } .text-accent { color: var(--text-accent); } .text-center { text-align: center; } .font-bold { font-weight: 700; } .font-black { font-weight: 900; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } /* ── RESPONSIVO ── */ @media (max-width: 768px) { .section { padding: 4rem 1.25rem; } h1 { font-size: clamp(2rem, 8vw, 3rem); } }