/* ========================= SISTEMA DE DESIGN (THEME) ========================= */ :root { /* Cores base */ --color-bg: #181715; --color-text: #dcd6d6; --color-muted: #747474; /* Acentos */ --color-accent: #b21400; /* .titulo-destaque */ --color-glow: #87d5d8; /* brilho do título */ --color-cta: #5d89d2; /* botão */ --color-cta-shadow: #5271ff; /* Tipografia (escala base) */ --font-sans: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif; --font-display: 'Poppins', var(--font-sans); --font-cta: 'Montserrat', var(--font-sans); --scale: 1; /* 0.9 = compacto | 1 = padrão | 1.1/1.2 = maior */ /* Tamanhos fluídos (clamp: min, preferido, max) */ --fs-title: clamp(2.2rem, 8vw, 6.25rem); /* ~100px no desktop */ --fs-subtitle: clamp(1rem, 2.2vw, 1.56rem); /* ~25px */ --fs-cta: clamp(1rem, 3.2vw, 2.2rem); /* ~35px */ --fs-copy: clamp(0.85rem, 1.6vw, 1rem); /* ~16px */ --fs-copy-sm: clamp(0.75rem, 1.4vw, 0.875rem); /* ~14px */ /* Espaçamentos (8pt grid) */ --space-1: calc(4px * var(--scale)); --space-2: calc(8px * var(--scale)); --space-3: calc(12px * var(--scale)); --space-4: calc(16px * var(--scale)); --space-5: calc(20px * var(--scale)); --space-6: calc(24px * var(--scale)); --space-8: calc(32px * var(--scale)); --space-10: calc(40px * var(--scale)); --space-12: calc(48px * var(--scale)); --space-16: calc(64px * var(--scale)); --space-20: calc(80px * var(--scale)); /* Raio e sombras */ --radius-lg: 1rem; --shadow-soft: 0 0 10px 0 var(--color-cta-shadow); --shadow-title: 0 0 10px var(--color-glow); --shadow-subtitle: 2px 2px 6px rgba(253, 11, 5, 0.5); } /* Temas prontos (opcional): aplique no */ .theme-light { --color-bg: #f7f7f7; --color-text: #1e1e1e; --color-muted: #6b6b6b; --color-cta: #4f6bdc; --color-cta-shadow: #7b91ff; --color-glow: #9ee8eb; } .theme-ocean { --color-bg: #0f172a; --color-text: #e2e8f0; --color-muted: #94a3b8; --color-accent: #22d3ee; --color-cta: #0ea5e9; --color-cta-shadow: #38bdf8; --color-glow: #22d3ee; } /* Tamanhos globais (opcional): aplique no body */ .size-sm { --scale: 0.9; } .size-lg { --scale: 1.1; } .size-xl { --scale: 1.2; } /* ========================= RESET BÁSICO ========================= */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); } a { text-decoration: none; color: inherit; } /* ========================= CONTAINER PRINCIPAL ========================= */ .container-principal { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: clamp(50px, 12vh, 150px); padding-left: var(--space-5); padding-right: var(--space-5); } /* ========================= TEXTOS E TÍTULOS ========================= */ .titulo { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--fs-title) * var(--scale)); line-height: 1; text-align: center; color: var(--color-text); text-shadow: var(--shadow-title); margin-bottom: clamp(30px, 8vh, 80px); } .titulo-destaque { color: var(--color-accent); } .subtitulo { font-family: var(--font-sans); font-weight: 700; font-size: calc(var(--fs-subtitle) * var(--scale)); color: var(--color-text); text-align: center; line-height: 1.6; text-shadow: var(--shadow-subtitle); } /* ========================= BOTÃO DISCORD (CTA) ========================= */ .botao-discord { display: inline-block; width: clamp(160px, 28vw, 205px); padding: var(--space-3) var(--space-4); margin-top: var(--space-5); background-color: var(--color-cta); color: #fff; font-family: var(--font-cta); font-size: calc(var(--fs-cta) * var(--scale)); font-weight: 600; text-align: center; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform 0.2s ease, filter 0.2s ease; } .botao-discord:hover { transform: scale(1.05); filter: brightness(1.05); } /* ========================= RODAPÉ ========================= */ .container-rodape { text-align: center; padding-top: var(--space-12); padding-bottom: var(--space-12); } .copyright { font-size: calc(var(--fs-copy) * var(--scale)); line-height: 1.5; color: var(--color-text); margin-bottom: var(--space-4); } .links-rodape { display: flex; justify-content: center; align-items: center; gap: var(--space-2); font-size: calc(var(--fs-copy-sm) * var(--scale)); color: var(--color-muted); } .links-rodape a { color: var(--color-muted); transition: color 0.2s ease; } .links-rodape a:hover { color: var(--color-text); } /* ========================= RESPONSIVIDADE ========================= */ /* Tablet */ @media (max-width: 1024px) { .container-principal { padding-top: clamp(60px, 10vh, 100px); } /* tamanhos já fluídos via clamp() */ } /* Celular */ @media (max-width: 480px) { .container-principal { padding-top: 50px; } .titulo { /* já fluído via clamp; mantendo ajustes finos se quiser */ line-height: 1.2; margin-bottom: 30px; } .subtitulo { line-height: 1.6; } .botao-discord { /* font-size já fluído */ } .copyright { /* já fluído */ } .links-rodape { flex-direction: column; } .links-rodape span { display: none; } }