/* =========================== FONTES & VARIÁVEIS GERAIS =========================== */ /* Se quiser, pode jogar esse @import no também */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* BACKGROUND / SUPERFÍCIE ------------------------------ */ --bg-body: #050510; --bg-elevated: #0b0b1a; --bg-elevated-alt: #111126; /* TEXTO ------------------------------------------------ */ --text-main: #f8f5ff; --text-muted: #b4acd9; --text-soft: #8a82b8; /* NEON PRINCESS PALETA --------------------------------- */ --neon-pink: #ff7ae0; --neon-pink-soft: rgba(255, 122, 224, 0.35); --neon-purple: #b084ff; --neon-purple-soft: rgba(176, 132, 255, 0.35); --neon-cyan: #7afcff; --neon-cyan-soft: rgba(122, 252, 255, 0.35); --accent-gradient: linear-gradient( 135deg, #ff7ae0, #b084ff, #7afcff ); /* BORDAS / RADIUS / SOMBRA ---------------------------- */ --border-subtle: 1px solid rgba(255, 255, 255, 0.08); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --shadow-soft: 0 0 24px rgba(0, 0, 0, 0.6); --shadow-neon: 0 0 24px rgba(255, 122, 224, 0.4); /* ESPAÇAMENTO ----------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; /* TRANSIÇÕES ------------------------------------------ */ --transition-fast: 0.15s ease-out; --transition: 0.25s ease-out; --transition-slow: 0.4s ease-out; } /* =========================== RESET BÁSICO =========================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top left, #1a1040 0, #050510 45%) fixed; color: var(--text-main); line-height: 1.6; } /* Imagens responsivas */ img { max-width: 100%; display: block; border-radius: var(--radius-md); } /* Links gerais */ a { color: var(--neon-cyan); text-decoration: none; transition: color var(--transition-fast), text-shadow var(--transition-fast); } a:hover { color: var(--neon-pink); text-shadow: 0 0 10px var(--neon-pink-soft); } /* Títulos */ h1, h2, h3 { font-weight: 600; letter-spacing: 0.03em; color: var(--text-main); } /* Parágrafos */ p { color: var(--text-soft); margin-bottom: var(--space-4); } /* Utilitário pra destacar algo em neon */ .neon-text { background: var(--accent-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 12px rgba(186, 104, 255, 0.3); } /* Scrollbar darkzinha (opcional) */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #050510; } ::-webkit-scrollbar-thumb { background: rgba(186, 104, 255, 0.6); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 122, 224, 0.9); }