/* =========================================================
OLIMPORAMA 2025 - Tema Espacial Aprimorado
Versão: 2.0
Data: 2025
========================================================= */
/* =========================================================
Tabela de Conteúdos:
1. Variáveis e Configurações
2. Reset e Estilos Base
3. Tipografia
4. Layout e Containers
5. Animações e Keyframes
6. Efeitos de Fundo e Estrelas
7. Header e Navegação
8. Hero Section
9. Áreas de Conhecimento (Hexágonos)
10. Categorias (Timeline)
11. Datas Importantes (Roadmap)
12. Seção Gratuidade
13. FAQ (Acordeão)
14. Contato
15. Patrocinadores
16. Inscrição (Formulário Multi-etapas)
17. Chat Flutuante
18. Footer
19. Componentes Reutilizáveis
20. Utilitários
21. Media Queries (Responsividade)
22. Acessibilidade
23. Animações de Partículas
24. Efeitos de Glassmorphism
25. Estados de Hover e Focus
26. Efeitos de Scroll
27. Efeitos de Texto
28. Efeitos de Imagem
========================================================= */
/* =========================================================
1. Variáveis e Configurações
========================================================= */
:root {
/* Color Scheme - Deeper Darks */
--color-base: #050505;
--color-deep: #080808;
--color-dark-purple: #1a0033;
--color-medium-purple: #2b0b4f;
--color-neon-purple: #8a1155;
--color-dark-gray: #121212;
--color-white: #ffffff;
--color-light-gray: #999999;
--color-mid-gray: #666666;
--color-gold: #ffd700;
--color-gold-light: #ffe566;
--color-gold-dark: #d4af37;
--color-success: #2ecc71;
--color-warning: #f39c12;
--color-error: #e74c3c;
--color-info: #3498db;
/* Gradients - Optimized */
--gradient-hero: linear-gradient(140deg, #050505 0%, #1a0033 100%);
--gradient-cards: linear-gradient(165deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.98));
--gradient-buttons: linear-gradient(90deg, #2b0b4f, #8a1155);
--gradient-background: linear-gradient(130deg, #050505, #0a0a0a);
--gradient-gold: linear-gradient(90deg, #d4af37, #ffd700, #d4af37);
--gradient-form: linear-gradient(165deg, rgba(26, 0, 51, 0.9), rgba(8, 8, 8, 0.95));
--gradient-footer: linear-gradient(180deg, #080808, #050505);
--gradient-timeline: linear-gradient(90deg, #1a0033, #2b0b4f);
--gradient-roadmap: linear-gradient(90deg, #2b0b4f, #8a1155);
--gradient-hover: linear-gradient(90deg, #8a1155, #2b0b4f);
--gradient-active: linear-gradient(90deg, #8a1155, #8a1155);
--gradient-disabled: linear-gradient(90deg, #121212, #1a1a1a);
--gradient-success: linear-gradient(90deg, #27ae60, #2ecc71);
--gradient-warning: linear-gradient(90deg, #e67e22, #f39c12);
--gradient-error: linear-gradient(90deg, #c0392b, #e74c3c);
--gradient-info: linear-gradient(90deg, #2980b9, #3498db);
--gradient-glass: linear-gradient(135deg, rgba(26, 0, 51, 0.4), rgba(8, 8, 8, 0.7));
--gradient-glass-light: linear-gradient(135deg, rgba(26, 0, 51, 0.2), rgba(8, 8, 8, 0.5));
--gradient-glass-dark: linear-gradient(135deg, rgba(26, 0, 51, 0.6), rgba(8, 8, 8, 0.9));
/* Effects - Refined */
--glassmorphism: rgba(18, 18, 18, 0.9);
--blur: blur(10px);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
--shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.9);
--shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-text: 0 2px 4px rgba(0, 0, 0, 0.5);
--shadow-button: 0 4px 12px rgba(138, 17, 85, 0.3);
--shadow-button-hover: 0 6px 16px rgba(138, 17, 85, 0.5);
--shadow-gold: 0 4px 12px rgba(255, 215, 0, 0.3);
--shadow-gold-hover: 0 6px 16px rgba(255, 215, 0, 0.5);
--border: 1px solid rgba(43, 11, 79, 0.2);
--border-light: 1px solid rgba(43, 11, 79, 0.1);
--border-dark: 1px solid rgba(43, 11, 79, 0.3);
--border-gold: 1px solid rgba(255, 215, 0, 0.3);
--border-focus: 2px solid rgba(138, 17, 85, 0.5);
--glow: 0 0 20px rgba(138, 17, 85, 0.15);
--glow-hover: 0 0 25px rgba(138, 17, 85, 0.25);
--glow-gold: 0 0 20px rgba(255, 215, 0, 0.15);
--glow-gold-hover: 0 0 25px rgba(255, 215, 0, 0.25);
--glow-text: 0 0 10px rgba(138, 17, 85, 0.5);
--glow-text-gold: 0 0 10px rgba(255, 215, 0, 0.5);
/* Typography */
--font-heading: "Space Grotesk", sans-serif;
--font-body: "Inter", sans-serif;
--font-mono: "JetBrains Mono", monospace;
--font-alt: "Exo 2", sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-md: 1.125rem; /* 18px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.5rem; /* 24px */
--font-size-2xl: 1.875rem; /* 30px */
--font-size-3xl: 2.25rem; /* 36px */
--font-size-4xl: 3rem; /* 48px */
--font-size-5xl: 3.75rem; /* 60px */
--font-size-6xl: 4.5rem; /* 72px */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-loose: 1.8;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Transitions - Smoother */
--transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
--transition-elastic: 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
--transition-decelerate: 0.4s cubic-bezier(0, 0, 0.2, 1);
--transition-accelerate: 0.4s cubic-bezier(0.4, 0, 1, 1);
/* Border Radius */
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 16px;
--border-radius-xl: 24px;
--border-radius-2xl: 32px;
--border-radius-full: 9999px;
/* Spacing */
--spacing-0: 0;
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-10: 2.5rem; /* 40px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
--spacing-32: 8rem; /* 128px */
--spacing-40: 10rem; /* 160px */
--spacing-48: 12rem; /* 192px */
--spacing-56: 14rem; /* 224px */
--spacing-64: 16rem; /* 256px */
/* Z-index */
--z-negative: -1;
--z-0: 0;
--z-10: 10;
--z-20: 20;
--z-30: 30;
--z-40: 40;
--z-50: 50;
--z-max: 9999;
/* Container Widths */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
}
/* =========================================================
2. Reset e Estilos Base
========================================================= */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-size: 16px;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--color-medium-purple) var(--color-base);
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-track {
background: var(--color-base);
}
html::-webkit-scrollbar-thumb {
background-color: var(--color-medium-purple);
border-radius: var(--border-radius-full);
border: 3px solid var(--color-base);
}
body {
font-family: var(--font-body);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-white);
background: var(--gradient-background);
overflow-x: hidden;
min-height: 100vh;
position: relative;
}
a {
text-decoration: none;
color: inherit;
transition: color var(--transition-fast);
cursor: pointer;
}
a:hover {
color: var(--color-gold);
}
ul,
ol {
list-style: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
background: transparent;
border: none;
outline: none;
}
button {
cursor: pointer;
user-select: none;
}
input::placeholder,
textarea::placeholder {
color: var(--color-light-gray);
opacity: 0.7;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-neon-purple);
box-shadow: var(--glow);
}
/* Remover aparência padrão de inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
/* Remover aparência padrão de select */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.25rem;
padding-right: 2.5rem;
}
/* Remover aparência padrão de textarea */
textarea {
resize: vertical;
min-height: 100px;
}
/* Remover outline padrão de elementos focados */
:focus {
outline: none;
}
:focus-visible {
outline: var(--border-focus);
outline-offset: 2px;
}
/* =========================================================
3. Tipografia
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-4);
color: var(--color-white);
}
h1 {
font-size: var(--font-size-5xl);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--spacing-6);
}
h2 {
font-size: var(--font-size-3xl);
letter-spacing: var(--letter-spacing-tight);
}
h3 {
font-size: var(--font-size-xl);
letter-spacing: var(--letter-spacing-normal);
}
h4 {
font-size: var(--font-size-lg);
letter-spacing: var(--letter-spacing-normal);
}
h5 {
font-size: var(--font-size-md);
letter-spacing: var(--letter-spacing-normal);
}
h6 {
font-size: var(--font-size-base);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}
p {
margin-bottom: var(--spacing-4);
}
.text-xs {
font-size: var(--font-size-xs);
}
.text-sm {
font-size: var(--font-size-sm);
}
.text-base {
font-size: var(--font-size-base);
}
.text-md {
font-size: var(--font-size-md);
}
.text-lg {
font-size: var(--font-size-lg);
}
.text-xl {
font-size: var(--font-size-xl);
}
.text-2xl {
font-size: var(--font-size-2xl);
}
.text-3xl {
font-size: var(--font-size-3xl);
}
.text-4xl {
font-size: var(--font-size-4xl);
}
.text-5xl {
font-size: var(--font-size-5xl);
}
.text-6xl {
font-size: var(--font-size-6xl);
}
.font-light {
font-weight: var(--font-weight-light);
}
.font-normal {
font-weight: var(--font-weight-normal);
}
.font-medium {
font-weight: var(--font-weight-medium);
}
.font-semibold {
font-weight: var(--font-weight-semibold);
}
.font-bold {
font-weight: var(--font-weight-bold);
}
.font-extrabold {
font-weight: var(--font-weight-extrabold);
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.leading-tight {
line-height: var(--line-height-tight);
}
.leading-normal {
line-height: var(--line-height-normal);
}
.leading-loose {
line-height: var(--line-height-loose);
}
.tracking-tight {
letter-spacing: var(--letter-spacing-tight);
}
.tracking-normal {
letter-spacing: var(--letter-spacing-normal);
}
.tracking-wide {
letter-spacing: var(--letter-spacing-wide);
}
.tracking-wider {
letter-spacing: var(--letter-spacing-wider);
}
.tracking-widest {
letter-spacing: var(--letter-spacing-widest);
}
.section-title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-6);
text-align: center;
background: var(--gradient-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
text-shadow: var(--shadow-text);
letter-spacing: var(--letter-spacing-wide);
}
.section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--gradient-gold);
border-radius: 3px;
}
.section-description {
font-size: var(--font-size-md);
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-12);
color: var(--color-light-gray);
line-height: var(--line-height-loose);
}
.text-gradient {
background: var(--gradient-buttons);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.text-gradient-gold {
background: var(--gradient-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.text-white {
color: var(--color-white);
}
.text-light-gray {
color: var(--color-light-gray);
}
.text-mid-gray {
color: var(--color-mid-gray);
}
.text-gold {
color: var(--color-gold);
}
.text-neon-purple {
color: var(--color-neon-purple);
}
.text-medium-purple {
color: var(--color-medium-purple);
}
.text-success {
color: var(--color-success);
}
.text-warning {
color: var(--color-warning);
}
.text-error {
color: var(--color-error);
}
.text-info {
color: var(--color-info);
}
/* =========================================================
4. Layout e Containers
========================================================= */
.container {
width: 100%;
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.container-sm {
max-width: var(--container-sm);
}
.container-md {
max-width: var(--container-md);
}
.container-lg {
max-width: var(--container-lg);
}
.container-xl {
max-width: var(--container-xl);
}
.container-2xl {
max-width: var(--container-2xl);
}
.container-fluid {
max-width: 100%;
}
section {
padding: var(--spacing-24) 0;
position: relative;
overflow: hidden;
}
.section-sm {
padding: var(--spacing-12) 0;
}
.section-lg {
padding: var(--spacing-32) 0;
}
.section-xl {
padding: var(--spacing-48) 0;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.content-center {
align-content: center;
}
.content-start {
align-content: flex-start;
}
.content-end {
align-content: flex-end;
}
.content-between {
align-content: space-between;
}
.content-around {
align-content: space-around;
}
.content-evenly {
align-content: space-evenly;
}
.self-auto {
align-self: auto;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-stretch {
align-self: stretch;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.flex-none {
flex: none;
}
.flex-grow-0 {
flex-grow: 0;
}
.flex-grow {
flex-grow: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink {
flex-shrink: 1;
}
.order-first {
order: -9999;
}
.order-last {
order: 9999;
}
.order-none {
order: 0;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
.order-5 {
order: 5;
}
.grid {
display: grid;
}
.inline-grid {
display: inline-grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.gap-0 {
gap: var(--spacing-0);
}
.gap-1 {
gap: var(--spacing-1);
}
.gap-2 {
gap: var(--spacing-2);
}
.gap-3 {
gap: var(--spacing-3);
}
.gap-4 {
gap: var(--spacing-4);
}
.gap-5 {
gap: var(--spacing-5);
}
.gap-6 {
gap: var(--spacing-6);
}
.gap-8 {
gap: var(--spacing-8);
}
.gap-10 {
gap: var(--spacing-10);
}
.gap-12 {
gap: var(--spacing-12);
}
.gap-16 {
gap: var(--spacing-16);
}
.gap-20 {
gap: var(--spacing-20);
}
.gap-24 {
gap: var(--spacing-24);
}
.gap-32 {
gap: var(--spacing-32);
}
.gap-x-0 {
column-gap: var(--spacing-0);
}
.gap-x-1 {
column-gap: var(--spacing-1);
}
.gap-x-2 {
column-gap: var(--spacing-2);
}
.gap-x-3 {
column-gap: var(--spacing-3);
}
.gap-x-4 {
column-gap: var(--spacing-4);
}
.gap-x-5 {
column-gap: var(--spacing-5);
}
.gap-x-6 {
column-gap: var(--spacing-6);
}
.gap-x-8 {
column-gap: var(--spacing-8);
}
.gap-x-10 {
column-gap: var(--spacing-10);
}
.gap-x-12 {
column-gap: var(--spacing-12);
}
.gap-x-16 {
column-gap: var(--spacing-16);
}
.gap-x-20 {
column-gap: var(--spacing-20);
}
.gap-x-24 {
column-gap: var(--spacing-24);
}
.gap-x-32 {
column-gap: var(--spacing-32);
}
.gap-y-0 {
row-gap: var(--spacing-0);
}
.gap-y-1 {
row-gap: var(--spacing-1);
}
.gap-y-2 {
row-gap: var(--spacing-2);
}
.gap-y-3 {
row-gap: var(--spacing-3);
}
.gap-y-4 {
row-gap: var(--spacing-4);
}
.gap-y-5 {
row-gap: var(--spacing-5);
}
.gap-y-6 {
row-gap: var(--spacing-6);
}
.gap-y-8 {
row-gap: var(--spacing-8);
}
.gap-y-10 {
row-gap: var(--spacing-10);
}
.gap-y-12 {
row-gap: var(--spacing-12);
}
.gap-y-16 {
row-gap: var(--spacing-16);
}
.gap-y-20 {
row-gap: var(--spacing-20);
}
.gap-y-24 {
row-gap: var(--spacing-24);
}
.gap-y-32 {
row-gap: var(--spacing-32);
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-5 {
grid-column: span 5 / span 5;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.col-span-7 {
grid-column: span 7 / span 7;
}
.col-span-8 {
grid-column: span 8 / span 8;
}
.col-span-9 {
grid-column: span 9 / span 9;
}
.col-span-10 {
grid-column: span 10 / span 10;
}
.col-span-11 {
grid-column: span 11 / span 11;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
.col-span-full {
grid-column: 1 / -1;
}
.row-span-1 {
grid-row: span 1 / span 1;
}
.row-span-2 {
grid-row: span 2 / span 2;
}
.row-span-3 {
grid-row: span 3 / span 3;
}
.row-span-4 {
grid-row: span 4 / span 4;
}
.row-span-5 {
grid-row: span 5 / span 5;
}
.row-span-6 {
grid-row: span 6 / span 6;
}
.row-span-full {
grid-row: 1 / -1;
}
/* =========================================================
5. Animações e Keyframes
========================================================= */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(0.95);
}
}
@keyframes glow {
0%,
100% {
text-shadow: 0 0 5px rgba(138, 17, 85, 0.3), 0 0 10px rgba(138, 17, 85, 0.2);
}
50% {
text-shadow: 0 0 20px rgba(138, 17, 85, 0.6), 0 0 30px rgba(138, 17, 85, 0.4);
}
}
@keyframes glow-gold {
0%,
100% {
text-shadow: 0 0 5px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2);
}
50% {
text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes orbit {
from {
transform: rotate(0deg) translateX(50px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(50px) rotate(-360deg);
}
}
@keyframes animateStars {
from {
transform: translateY(0);
}
to {
transform: translateY(-1000px);
}
}
@keyframes twinkle {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes shooting-star {
0% {
transform: translateX(0) translateY(0) rotate(45deg);
opacity: 1;
}
100% {
transform: translateX(300px) translateY(300px) rotate(45deg);
opacity: 0;
}
}
@keyframes wave {
0%,
100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
}
@keyframes float-particle {
0%,
100% {
transform: translate(0, 0);
}
25% {
transform: translate(20px, -15px);
}
50% {
transform: translate(0, -30px);
}
75% {
transform: translate(-20px, -15px);
}
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes zoomIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes zoomOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0);
opacity: 0;
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes particle {
0% {
transform: scale(0) translate(0, 0);
opacity: 1;
}
100% {
transform: scale(1) translate(var(--x), var(--y));
opacity: 0;
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-pulse {
animation: pulse 3s ease-in-out infinite;
}
.animate-glow {
animation: glow 2s ease-in-out infinite alternate;
}
.animate-glow-gold {
animation: glow-gold 2s ease-in-out infinite alternate;
}
.animate-rotate {
animation: rotate 20s linear infinite;
}
.animate-orbit {
animation: orbit 30s linear infinite;
}
.animate-twinkle {
animation: twinkle 3s ease-in-out infinite;
}
.animate-wave {
animation: wave 3s ease-in-out infinite;
}
.animate-float-particle {
animation: float-particle 5s ease-in-out infinite;
}
.animate-scroll {
animation: scroll 30s linear infinite;
}
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out forwards;
}
.animate-fade-out {
animation: fadeOut 0.5s ease-in-out forwards;
}
.animate-slide-in-left {
animation: slideInLeft 0.5s ease-in-out forwards;
}
.animate-slide-in-right {
animation: slideInRight 0.5s ease-in-out forwards;
}
.animate-slide-in-up {
animation: slideInUp 0.5s ease-in-out forwards;
}
.animate-slide-in-down {
animation: slideInDown 0.5s ease-in-out forwards;
}
.animate-zoom-in {
animation: zoomIn 0.5s ease-in-out forwards;
}
.animate-zoom-out {
animation: zoomOut 0.5s ease-in-out forwards;
}
.animate-bounce {
animation: bounce 2s ease infinite;
}
.animate-spin {
animation: spin 1s linear infinite;
}
.animate-shimmer {
animation: shimmer 2s linear infinite;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 200% 100%;
}
/* =========================================================
6. Efeitos de Fundo e Estrelas
========================================================= */
.stars-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-negative);
overflow: hidden;
pointer-events: none;
}
#stars,
#stars2,
#stars3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-negative);
}
#stars {
background: transparent
url('data:image/svg+xml;utf8,')
repeat;
animation: animateStars 50s linear infinite;
}
#stars2 {
background: transparent
url('data:image/svg+xml;utf8,')
repeat;
animation: animateStars 100s linear infinite;
}
#stars3 {
background: transparent
url('data:image/svg+xml;utf8,')
repeat;
animation: animateStars 150s linear infinite;
}
.shooting-stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-negative);
overflow: hidden;
}
.shooting-star {
position: absolute;
width: 100px;
height: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
border-radius: var(--border-radius-full);
animation: shooting-star 3s linear infinite;
opacity: 0;
}
.shooting-star::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}
.shooting-star:nth-child(1) {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.shooting-star:nth-child(2) {
top: 30%;
left: 30%;
animation-delay: 2s;
}
.shooting-star:nth-child(3) {
top: 50%;
left: 50%;
animation-delay: 4s;
}
.shooting-star:nth-child(4) {
top: 70%;
left: 70%;
animation-delay: 6s;
}
.shooting-star:nth-child(5) {
top: 90%;
left: 90%;
animation-delay: 8s;
}
.nebula {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(138, 17, 85, 0.1) 0%, rgba(43, 11, 79, 0.05) 50%, transparent 70%);
opacity: 0.5;
z-index: var(--z-negative);
pointer-events: none;
}
.nebula-1 {
top: 20%;
left: 10%;
transform: scale(2);
}
.nebula-2 {
top: 60%;
left: 70%;
transform: scale(1.5);
}
.floating-planets {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-0);
pointer-events: none;
}
.planet {
position: absolute;
border-radius: 50%;
opacity: 0.2;
box-shadow: inset 5px -5px 10px rgba(0, 0, 0, 0.5);
}
.planet-1 {
width: 150px;
height: 150px;
background: var(--color-medium-purple);
top: 20%;
left: 10%;
animation: orbit 30s linear infinite;
}
.planet-2 {
width: 100px;
height: 100px;
background: var(--color-gold);
bottom: 15%;
right: 15%;
animation: orbit 20s linear infinite reverse;
}
.planet-3 {
width: 80px;
height: 80px;
background: var(--color-dark-purple);
top: 60%;
left: 20%;
animation: orbit 25s linear infinite;
}
.cosmic-dust {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(1px 1px at 10% 10%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 20% 20%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 30% 30%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 40% 40%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 60% 60%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 70% 70%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 80% 80%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 90% 90%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
background-size: 100% 100%;
opacity: 0.3;
z-index: var(--z-negative);
pointer-events: none;
}
.cosmic-glow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(138, 17, 85, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(43, 11, 79, 0.1) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-negative);
pointer-events: none;
}
/* =========================================================
7. Header e Navegação
========================================================= */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: var(--z-50);
padding: var(--spacing-5) 0;
transition: all var(--transition-medium);
background: rgba(5, 5, 5, 0.8);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border-bottom: var(--border);
}
header.scrolled {
padding: var(--spacing-3) 0;
background: rgba(5, 5, 5, 0.95);
box-shadow: var(--shadow);
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
z-index: var(--z-10);
}
.logo-image {
height: 50px;
filter: drop-shadow(0 0 5px rgba(138, 17, 85, 0.5));
transition: filter var(--transition-medium);
}
.logo:hover .logo-image {
filter: drop-shadow(0 0 10px rgba(138, 17, 85, 0.8));
}
nav {
display: flex;
align-items: center;
}
nav ul {
display: flex;
gap: var(--spacing-8);
}
nav ul li a {
font-weight: var(--font-weight-medium);
position: relative;
padding: var(--spacing-2) 0;
transition: color var(--transition-fast);
}
nav ul li a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-buttons);
transition: width var(--transition-medium);
}
nav ul li a:hover {
color: var(--color-white);
}
nav ul li a:hover::after {
width: 100%;
}
.btn-header {
background: var(--gradient-buttons);
color: var(--color-white);
padding: var(--spacing-3) var(--spacing-6);
border-radius: var(--border-radius-full);
font-weight: var(--font-weight-semibold);
transition: all var(--transition-fast);
margin-left: var(--spacing-6);
box-shadow: var(--shadow-button);
position: relative;
overflow: hidden;
z-index: var(--z-0);
}
.btn-header::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-medium);
z-index: var(--z-negative);
}
.btn-header:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-button-hover);
color: var(--color-white);
}
.btn-header:hover::before {
left: 100%;
}
.btn-header:active {
transform: translateY(-1px);
}
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
width: 30px;
height: 20px;
position: relative;
z-index: var(--z-10);
}
.menu-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-white);
position: absolute;
transition: all var(--transition-fast);
}
.menu-toggle span:nth-child(1) {
top: 0;
}
.menu-toggle span:nth-child(2) {
top: 9px;
}
.menu-toggle span:nth-child(3) {
top: 18px;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* =========================================================
8. Hero Section
========================================================= */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: var(--gradient-hero);
overflow: hidden;
padding-top: 80px;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
animation: rotate 100s linear infinite;
opacity: 0.3;
}
.hero .container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: var(--z-10);
}
.hero-content {
flex: 1;
padding-right: var(--spacing-12);
}
.hero-image {
flex: 1;
position: relative;
}
.astronaut {
max-width: 100%;
animation: float 6s ease-in-out infinite;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}
.hero h1 {
font-size: var(--font-size-5xl);
margin-bottom: var(--spacing-6);
line-height: 1.1;
text-shadow: var(--shadow-text);
}
.hero h1 span {
color: var(--color-neon-purple);
display: block;
}
.glow-text {
animation: glow 2s ease-in-out infinite alternate;
}
.hero p {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-8);
color: var(--color-light-gray);
max-width: 600px;
}
/* Countdown */
.countdown-container {
display: flex;
gap: var(--spacing-4);
margin-bottom: var(--spacing-8);
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--gradient-glass);
padding: var(--spacing-4) var(--spacing-5);
border-radius: var(--border-radius-md);
min-width: 80px;
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border: var(--border);
box-shadow: var(--shadow);
transition: transform var(--transition-fast);
}
.countdown-item:hover {
transform: translateY(-5px);
}
.countdown-item span:first-child {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-neon-purple);
line-height: 1;
margin-bottom: var(--spacing-1);
}
.countdown-label {
font-size: var(--font-size-xs);
color: var(--color-light-gray);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
}
/* CTA Button */
.cta-button {
display: inline-block;
padding: var(--spacing-4) var(--spacing-10);
background: var(--gradient-buttons);
color: var(--color-white);
font-weight: var(--font-weight-bold);
border-radius: var(--border-radius-full);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
box-shadow: var(--shadow-button), var(--glow);
position: relative;
overflow: hidden;
z-index: var(--z-0);
transition: all var(--transition-medium);
}
.cta-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-medium);
z-index: var(--z-negative);
}
.cta-button:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-button-hover), var(--glow-hover);
color: var(--color-white);
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:active {
transform: translateY(-2px);
}
.cta-button.secondary {
background: transparent;
color: var(--color-neon-purple);
border: 2px solid var(--color-neon-purple);
box-shadow: var(--glow);
}
.cta-button.secondary:hover {
background: var(--color-neon-purple);
color: var(--color-white);
box-shadow: var(--glow-hover);
}
/* =========================================================
9. Áreas de Conhecimento (Hexágonos)
========================================================= */
.areas {
background: linear-gradient(to bottom, var(--color-base), var(--color-dark-purple));
position: relative;
overflow: hidden;
}
.areas::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(138, 17, 85, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(43, 11, 79, 0.1) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-0);
pointer-events: none;
}
.hexagon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-8);
margin-top: var(--spacing-12);
position: relative;
z-index: var(--z-10);
}
.hexagon-item {
display: flex;
justify-content: center;
perspective: 1000px;
}
.hexagon {
width: 200px;
height: 230px;
background: var(--gradient-buttons);
position: relative;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-medium);
cursor: pointer;
transform-style: preserve-3d;
}
.hexagon::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
background: var(--color-dark-gray);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
z-index: var(--z-0);
}
.hexagon-content {
position: relative;
z-index: var(--z-10);
text-align: center;
padding: var(--spacing-5);
transition: all var(--transition-medium);
backface-visibility: hidden;
}
.hexagon-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-8);
opacity: 0;
transition: all var(--transition-medium);
z-index: var(--z-20);
backface-visibility: hidden;
transform: rotateY(180deg);
}
.hexagon:hover {
transform: translateY(-10px) rotateY(180deg);
box-shadow: var(--shadow-lg), var(--glow);
}
.hexagon:hover .hexagon-content {
opacity: 0;
}
.hexagon:hover .hexagon-hover {
opacity: 1;
}
.icon-container {
width: 60px;
height: 60px;
background: rgba(138, 17, 85, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-4);
transition: all var(--transition-medium);
}
.hexagon:hover .icon-container {
background: rgba(138, 17, 85, 0.4);
}
.icon {
width: 30px;
height: 30px;
stroke: var(--color-neon-purple);
stroke-width: 2;
fill: none;
transition: all var(--transition-medium);
}
.hexagon:hover .icon {
stroke: var(--color-white);
transform: scale(1.1);
}
.hexagon h3 {
font-size: var(--font-size-lg);
color: var(--color-white);
margin-bottom: var(--spacing-2);
transition: all var(--transition-medium);
}
.hexagon:hover h3 {
color: var(--color-neon-purple);
}
.hexagon-hover p {
font-size: var(--font-size-sm);
color: var(--color-light-gray);
line-height: var(--line-height-normal);
}
/* =========================================================
10. Categorias (Timeline)
========================================================= */
.categorias {
background: linear-gradient(to bottom, var(--color-dark-purple), var(--color-medium-purple));
position: relative;
overflow: hidden;
}
.categorias::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.3;
z-index: var(--z-0);
}
.timeline {
position: relative;
max-width: 800px;
margin: var(--spacing-12) auto 0;
}
.timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: var(--gradient-buttons);
border-radius: 4px;
z-index: var(--z-0);
}
.timeline-item {
position: relative;
margin-bottom: var(--spacing-12);
width: 100%;
z-index: var(--z-10);
}
.timeline-item:nth-child(odd) {
padding-right: calc(50% + var(--spacing-8));
text-align: right;
}
.timeline-item:nth-child(even) {
padding-left: calc(50% + var(--spacing-8));
text-align: left;
}
.timeline-icon {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background: var(--gradient-buttons);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-20);
box-shadow: var(--shadow), var(--glow);
transition: all var(--transition-medium);
}
.timeline-item:hover .timeline-icon {
transform: translateX(-50%) scale(1.1);
box-shadow: var(--shadow-lg), var(--glow-hover);
}
.timeline-icon .icon {
stroke: var(--color-white);
width: 24px;
height: 24px;
}
.timeline-content {
background: var(--gradient-glass);
padding: var(--spacing-6);
border-radius: var(--border-radius-md);
box-shadow: var(--shadow);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
transition: all var(--transition-medium);
}
.timeline-item:hover .timeline-content {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.timeline-content h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-2);
color: var(--color-neon-purple);
}
.age {
display: inline-block;
padding: var(--spacing-1) var(--spacing-3);
background: rgba(138, 17, 85, 0.2);
border-radius: var(--border-radius-full);
font-size: var(--font-size-xs);
margin-bottom: var(--spacing-3);
color: var(--color-light-gray);
letter-spacing: var(--letter-spacing-wide);
}
.timeline-content p {
color: var(--color-light-gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}
/* =========================================================
11. Datas Importantes (Roadmap)
========================================================= */
.datas {
background: linear-gradient(to bottom, var(--color-medium-purple), var(--color-neon-purple));
position: relative;
overflow: hidden;
}
.datas::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
animation: wave 10s linear infinite;
opacity: 0.3;
z-index: var(--z-0);
}
.roadmap {
max-width: 900px;
margin: var(--spacing-12) auto 0;
position: relative;
z-index: var(--z-10);
}
.roadmap-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-gold);
transform: translateY(-50%);
border-radius: 4px;
z-index: var(--z-0);
}
.roadmap-item {
position: relative;
width: 25%;
float: left;
padding-top: 80px;
text-align: center;
z-index: var(--z-10);
}
.roadmap-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: var(--color-gold);
border-radius: 50%;
z-index: var(--z-20);
box-shadow: var(--shadow-gold);
transition: all var(--transition-medium);
}
.roadmap-item.active .roadmap-point {
width: 24px;
height: 24px;
box-shadow: var(--shadow-gold-hover), var(--glow-gold);
}
.roadmap-item:hover .roadmap-point {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: var(--shadow-gold-hover), var(--glow-gold-hover);
}
.roadmap-content {
background: var(--gradient-glass);
padding: var(--spacing-5);
border-radius: var(--border-radius-md);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
margin: 0 var(--spacing-2);
box-shadow: var(--shadow);
transition: all var(--transition-medium);
height: 100%;
}
.roadmap-item:hover .roadmap-content {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.roadmap-icon {
width: 50px;
height: 50px;
background: rgba(138, 17, 85, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-4);
transition: all var(--transition-medium);
}
.roadmap-item:hover .roadmap-icon {
background: rgba(138, 17, 85, 0.4);
transform: scale(1.1);
}
.roadmap-icon .icon {
width: 24px;
height: 24px;
stroke: var(--color-gold);
stroke-width: 2;
fill: none;
transition: all var(--transition-medium);
}
.roadmap-item:hover .roadmap-icon .icon {
stroke: var(--color-white);
}
.roadmap-content h3 {
font-size: var(--font-size-md);
margin-bottom: var(--spacing-2);
color: var(--color-gold);
}
.date {
display: block;
font-size: var(--font-size-sm);
color: var(--color-white);
margin-bottom: var(--spacing-3);
font-weight: var(--font-weight-medium);
}
.roadmap-countdown {
font-size: var(--font-size-xs);
color: var(--color-gold);
font-weight: var(--font-weight-semibold);
}
.roadmap-content p {
font-size: var(--font-size-sm);
color: var(--color-light-gray);
margin-top: var(--spacing-3);
}
/* =========================================================
12. Seção Gratuidade
========================================================= */
.gratuidade {
background: linear-gradient(to bottom, var(--color-neon-purple), var(--color-dark-purple));
position: relative;
overflow: hidden;
}
.gratuidade::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 40%, rgba(138, 17, 85, 0.2) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(43, 11, 79, 0.2) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-0);
}
.gratuidade .container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: var(--z-10);
}
.gratuidade-content {
flex: 1;
padding-right: var(--spacing-12);
}
.gratuidade-image {
flex: 1;
position: relative;
}
.astronaut-flag {
max-width: 100%;
animation: wave 3s ease-in-out infinite;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.particles::before,
.particles::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--color-gold);
border-radius: 50%;
opacity: 0.6;
box-shadow: var(--glow-gold);
}
.particles::before {
top: 30%;
left: 20%;
animation: float-particle 4s ease-in-out infinite;
}
.particles::after {
top: 60%;
right: 30%;
animation: float-particle 5s ease-in-out infinite 1s;
}
.gratuidade-title {
font-size: var(--font-size-4xl);
color: var(--color-gold);
margin-bottom: var(--spacing-6);
text-shadow: var(--shadow-text), var(--glow-text-gold);
animation: glow-gold 2s ease-in-out infinite alternate;
}
.gratuidade-description {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-8);
max-width: 500px;
color: var(--color-light-gray);
line-height: var(--line-height-loose);
}
/* =========================================================
13. FAQ (Acordeão)
========================================================= */
.faq {
background: linear-gradient(to bottom, var(--color-dark-purple), var(--color-base));
position: relative;
overflow: hidden;
}
.faq::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.3;
z-index: var(--z-0);
}
.faq-search {
max-width: 600px;
margin: 0 auto var(--spacing-10);
position: relative;
}
.faq-search input {
width: 100%;
padding: var(--spacing-4) var(--spacing-12);
border: var(--border);
border-radius: var(--border-radius-full);
background: var(--gradient-glass);
color: var(--color-white);
font-size: var(--font-size-base);
outline: none;
transition: all var(--transition-fast);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow);
}
.search-icon {
position: absolute;
left: var(--spacing-5);
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
stroke: var(--color-light-gray);
stroke-width: 2;
fill: none;
transition: all var(--transition-fast);
}
.faq-search input:focus {
border-color: var(--color-neon-purple);
box-shadow: var(--shadow), var(--glow);
}
.faq-search input:focus + .search-icon {
stroke: var(--color-neon-purple);
}
.faq-search input::placeholder {
color: var(--color-light-gray);
opacity: 0.7;
}
.accordion {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: var(--z-10);
}
.accordion-item {
margin-bottom: var(--spacing-4);
border-radius: var(--border-radius-md);
overflow: hidden;
background: var(--gradient-glass);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow);
transition: all var(--transition-medium);
}
.accordion-item:hover {
box-shadow: var(--shadow-lg);
}
.accordion-header {
padding: var(--spacing-5);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all var(--transition-fast);
}
.accordion-header:hover {
background: rgba(255, 255, 255, 0.05);
}
.accordion-header h3 {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
margin-bottom: 0;
transition: all var(--transition-fast);
}
.accordion-item.active .accordion-header h3 {
color: var(--color-neon-purple);
}
.accordion-icon {
width: 20px;
height: 20px;
position: relative;
transition: all var(--transition-fast);
}
.accordion-icon::before,
.accordion-icon::after {
content: "";
position: absolute;
background-color: var(--color-neon-purple);
transition: all var(--transition-fast);
}
.accordion-icon::before {
top: 9px;
left: 0;
width: 100%;
height: 2px;
}
.accordion-icon::after {
top: 0;
left: 9px;
width: 2px;
height: 100%;
}
.accordion-item.active .accordion-icon::after {
transform: rotate(90deg);
opacity: 0;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-medium);
}
.accordion-item.active .accordion-content {
max-height: 300px;
}
.accordion-content p {
padding: 0 var(--spacing-5) var(--spacing-5);
color: var(--color-light-gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-loose);
}
/* =========================================================
14. Contato
========================================================= */
.contato {
background: linear-gradient(to bottom, var(--color-base), var(--color-dark-purple));
position: relative;
overflow: hidden;
}
.contato::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(138, 17, 85, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(43, 11, 79, 0.1) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-0);
}
.contato-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-10);
position: relative;
z-index: var(--z-10);
}
.contato-form {
flex: 1;
min-width: 300px;
}
.contato-info {
flex: 1;
min-width: 300px;
}
.form-group {
margin-bottom: var(--spacing-5);
}
.form-group label {
display: block;
margin-bottom: var(--spacing-2);
font-weight: var(--font-weight-medium);
color: var(--color-white);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--spacing-3) var(--spacing-4);
border: var(--border);
border-radius: var(--border-radius-md);
background: var(--gradient-glass);
color: var(--color-white);
font-size: var(--font-size-base);
transition: all var(--transition-fast);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow-inset);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--color-neon-purple);
box-shadow: var(--shadow-inset), var(--glow);
}
.submit-button {
padding: var(--spacing-3) var(--spacing-6);
border: none;
border-radius: var(--border-radius-full);
background: var(--gradient-buttons);
color: var(--color-white);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: var(--shadow-button);
position: relative;
overflow: hidden;
z-index: var(--z-0);
}
.submit-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-medium);
z-index: var(--z-negative);
}
.submit-button:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-button-hover);
}
.submit-button:hover::before {
left: 100%;
}
.submit-button:active {
transform: translateY(-1px);
}
.info-item {
display: flex;
align-items: flex-start;
margin-bottom: var(--spacing-8);
transition: all var(--transition-medium);
}
.info-item:hover {
transform: translateX(5px);
}
.info-item .icon {
width: 24px;
height: 24px;
stroke: var(--color-neon-purple);
stroke-width: 2;
fill: none;
margin-right: var(--spacing-4);
flex-shrink: 0;
transition: all var(--transition-medium);
}
.info-item:hover .icon {
stroke: var(--color-gold);
transform: scale(1.1);
}
.info-item h3 {
font-size: var(--font-size-md);
margin-bottom: var(--spacing-2);
color: var(--color-neon-purple);
transition: all var(--transition-medium);
}
.info-item:hover h3 {
color: var(--color-gold);
}
.info-item p {
color: var(--color-light-gray);
font-size: var(--font-size-base);
}
.social-links {
display: flex;
gap: var(--spacing-4);
margin-top: var(--spacing-8);
}
.social-link {
width: 40px;
height: 40px;
background: rgba(138, 17, 85, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-medium);
box-shadow: var(--shadow);
}
.social-link:hover {
background: var(--color-neon-purple);
transform: translateY(-5px);
box-shadow: var(--shadow-lg), var(--glow);
}
.social-link .icon {
width: 20px;
height: 20px;
stroke: var(--color-white);
stroke-width: 2;
fill: none;
transition: all var(--transition-medium);
}
.social-link:hover .icon {
transform: scale(1.1);
}
/* =========================================================
15. Patrocinadores
========================================================= */
.patrocinadores {
background: linear-gradient(to bottom, var(--color-dark-purple), var(--color-medium-purple));
position: relative;
overflow: hidden;
}
.patrocinadores::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
animation: wave 10s linear infinite;
opacity: 0.3;
z-index: var(--z-0);
}
.main-sponsor {
text-align: center;
margin-bottom: var(--spacing-12);
position: relative;
z-index: var(--z-10);
}
.main-sponsor h3 {
font-size: var(--font-size-lg);
color: var(--color-light-gray);
margin-bottom: var(--spacing-5);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}
.main-sponsor-logo {
max-width: 300px;
margin: 0 auto;
padding: var(--spacing-5);
background: var(--gradient-glass);
border-radius: var(--border-radius-md);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow);
transition: all var(--transition-medium);
}
.main-sponsor-logo:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg), var(--glow);
}
.sponsors-carousel {
width: 100%;
overflow: hidden;
position: relative;
z-index: var(--z-10);
}
.sponsors-track {
display: flex;
animation: scroll 30s linear infinite;
}
.sponsor-item {
min-width: 150px;
height: 80px;
margin: 0 var(--spacing-5);
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-glass);
border-radius: var(--border-radius-md);
padding: var(--spacing-3);
transition: all var(--transition-fast);
filter: grayscale(100%);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow);
}
.sponsor-item:hover {
filter: grayscale(0%);
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
/* =========================================================
16. Inscrição (Formulário Multi-etapas)
========================================================= */
.inscricao {
background: linear-gradient(to bottom, var(--color-medium-purple), var(--color-dark-purple));
position: relative;
overflow: hidden;
}
.inscricao::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 40%, rgba(138, 17, 85, 0.2) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(43, 11, 79, 0.2) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-0);
}
.form-container {
max-width: 800px;
margin: 0 auto;
background: var(--gradient-glass-dark);
border-radius: var(--border-radius-lg);
padding: var(--spacing-10);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow-lg);
position: relative;
z-index: var(--z-10);
}
.form-progress {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-10);
position: relative;
}
.form-progress::before {
content: "";
position: absolute;
top: 15px;
left: 0;
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.2);
z-index: var(--z-0);
}
.progress-step {
position: relative;
z-index: var(--z-10);
text-align: center;
width: 33.33%;
}
.step-number {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-3);
transition: all var(--transition-medium);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
}
.progress-step.active .step-number {
background: var(--color-neon-purple);
color: var(--color-white);
box-shadow: var(--shadow), var(--glow);
}
.step-label {
font-size: var(--font-size-sm);
color: var(--color-light-gray);
transition: all var(--transition-medium);
}
.progress-step.active .step-label {
color: var(--color-neon-purple);
font-weight: var(--font-weight-medium);
}
.form-step {
display: none;
}
.form-step.active {
display: block;
animation: fadeIn 0.5s ease-in-out forwards;
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-4);
margin-top: var(--spacing-5);
}
.checkbox-container {
display: flex;
align-items: center;
cursor: pointer;
position: relative;
padding-left: 35px;
transition: all var(--transition-fast);
}
.checkbox-container:hover {
color: var(--color-white);
}
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkbox-custom {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background: rgba(0, 0, 0, 0.2);
border: var(--border);
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast);
}
.checkbox-container:hover .checkbox-custom {
background: rgba(255, 255, 255, 0.1);
border-color: var(--color-neon-purple);
}
.checkbox-container input:checked ~ .checkbox-custom {
background: var(--color-neon-purple);
border-color: var(--color-neon-purple);
box-shadow: var(--glow);
}
.checkbox-custom:after {
content: "";
position: absolute;
display: none;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid var(--color-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-container input:checked ~ .checkbox-custom:after {
display: block;
}
.form-buttons {
display: flex;
justify-content: space-between;
margin-top: var(--spacing-8);
}
.prev-button,
.next-button {
padding: var(--spacing-3) var(--spacing-6);
border: none;
border-radius: var(--border-radius-full);
cursor: pointer;
font-weight: var(--font-weight-semibold);
transition: all var(--transition-fast);
position: relative;
overflow: hidden;
}
.prev-button {
background: rgba(255, 255, 255, 0.1);
color: var(--color-white);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.next-button {
background: var(--gradient-buttons);
color: var(--color-white);
box-shadow: var(--shadow-button);
}
.prev-button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.next-button:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-button-hover), var(--glow);
}
.next-button::before,
.submit-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-medium);
z-index: var(--z-0);
}
.next-button:hover::before,
.submit-button:hover::before {
left: 100%;
}
.confirmation-data {
background: rgba(0, 0, 0, 0.2);
padding: var(--spacing-5);
border-radius: var(--border-radius-md);
margin-bottom: var(--spacing-5);
border: var(--border-light);
}
.confirmation-data p {
margin-bottom: var(--spacing-3);
display: flex;
justify-content: space-between;
}
.confirmation-data p strong {
color: var(--color-white);
font-weight: var(--font-weight-semibold);
}
.terms-container {
margin-top: var(--spacing-5);
}
.terms-link {
color: var(--color-neon-purple);
text-decoration: underline;
transition: all var(--transition-fast);
}
.terms-link:hover {
color: var(--color-white);
text-decoration: none;
}
/* =========================================================
17. Chat Flutuante
========================================================= */
.chat-button {
position: fixed;
bottom: var(--spacing-8);
right: var(--spacing-8);
width: 60px;
height: 60px;
background: var(--gradient-buttons);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-button), var(--glow);
z-index: var(--z-max);
transition: all var(--transition-medium);
}
.chat-button:hover {
transform: scale(1.1) translateY(-5px);
box-shadow: var(--shadow-button-hover), var(--glow-hover);
}
.chat-button .icon {
width: 30px;
height: 30px;
stroke: var(--color-white);
stroke-width: 2;
fill: none;
transition: all var(--transition-medium);
}
.chat-button:hover .icon {
transform: scale(1.1);
}
/* =========================================================
18. Footer
========================================================= */
footer {
background: var(--gradient-footer);
padding: var(--spacing-20) 0 var(--spacing-8);
border-top: var(--border);
position: relative;
overflow: hidden;
}
footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(138, 17, 85, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(43, 11, 79, 0.1) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-0);
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: var(--spacing-12);
position: relative;
z-index: var(--z-10);
}
.footer-logo {
flex: 0 0 100%;
max-width: 300px;
margin-bottom: var(--spacing-8);
}
.footer-logo img {
height: 50px;
margin-bottom: var(--spacing-4);
filter: drop-shadow(0 0 5px rgba(138, 17, 85, 0.5));
transition: filter var(--transition-medium);
}
.footer-logo:hover img {
filter: drop-shadow(0 0 10px rgba(138, 17, 85, 0.8));
}
.footer-logo p {
color: var(--color-light-gray);
font-size: var(--font-size-sm);
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-10);
}
.footer-column h3 {
font-size: var(--font-size-md);
margin-bottom: var(--spacing-5);
color: var(--color-neon-purple);
position: relative;
}
.footer-column h3::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 2px;
background: var(--gradient-buttons);
border-radius: 2px;
}
.footer-column ul li {
margin-bottom: var(--spacing-3);
}
.footer-column ul li a {
color: var(--color-light-gray);
transition: all var(--transition-fast);
position: relative;
padding-left: var(--spacing-4);
}
.footer-column ul li a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--color-neon-purple);
border-radius: 50%;
opacity: 0.7;
transition: all var(--transition-fast);
}
.footer-column ul li a:hover {
color: var(--color-white);
padding-left: var(--spacing-5);
}
.footer-column ul li a:hover::before {
opacity: 1;
background: var(--color-white);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--spacing-8);
border-top: var(--border-light);
position: relative;
z-index: var(--z-10);
}
.footer-bottom p {
font-size: var(--font-size-sm);
color: var(--color-mid-gray);
}
.hashtags {
font-size: var(--font-size-sm);
color: var(--color-neon-purple);
}
/* =========================================================
19. Componentes Reutilizáveis
========================================================= */
.badge {
display: inline-block;
padding: var(--spacing-1) var(--spacing-3);
border-radius: var(--border-radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}
.badge-primary {
background: var(--color-neon-purple);
color: var(--color-white);
}
.badge-secondary {
background: var(--color-medium-purple);
color: var(--color-white);
}
.badge-success {
background: var(--color-success);
color: var(--color-white);
}
.badge-warning {
background: var(--color-warning);
color: var(--color-dark-gray);
}
.badge-error {
background: var(--color-error);
color: var(--color-white);
}
.badge-info {
background: var(--color-info);
color: var(--color-white);
}
.badge-outline {
background: transparent;
border: 1px solid currentColor;
}
.badge-outline-primary {
color: var(--color-neon-purple);
border-color: var(--color-neon-purple);
}
.badge-outline-secondary {
color: var(--color-medium-purple);
border-color: var(--color-medium-purple);
}
.badge-outline-success {
color: var(--color-success);
border-color: var(--color-success);
}
.badge-outline-warning {
color: var(--color-warning);
border-color: var(--color-warning);
}
.badge-outline-error {
color: var(--color-error);
border-color: var(--color-error);
}
.badge-outline-info {
color: var(--color-info);
border-color: var(--color-info);
}
.card {
background: var(--gradient-glass);
border-radius: var(--border-radius-md);
padding: var(--spacing-6);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow);
transition: all var(--transition-medium);
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.card-header {
margin-bottom: var(--spacing-4);
}
.card-body {
margin-bottom: var(--spacing-4);
}
.card-footer {
margin-top: var(--spacing-4);
padding-top: var(--spacing-4);
border-top: var(--border-light);
}
.alert {
padding: var(--spacing-4);
border-radius: var(--border-radius-md);
margin-bottom: var(--spacing-5);
display: flex;
align-items: flex-start;
}
.alert-icon {
margin-right: var(--spacing-3);
flex-shrink: 0;
}
.alert-content {
flex: 1;
}
.alert-title {
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-1);
}
.alert-message {
font-size: var(--font-size-sm);
}
.alert-success {
background: rgba(46, 204, 113, 0.1);
border-left: 3px solid var(--color-success);
}
.alert-warning {
background: rgba(243, 156, 18, 0.1);
border-left: 3px solid var(--color-warning);
}
.alert-error {
background: rgba(231, 76, 60, 0.1);
border-left: 3px solid var(--color-error);
}
.alert-info {
background: rgba(52, 152, 219, 0.1);
border-left: 3px solid var(--color-info);
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip-text {
visibility: hidden;
width: 200px;
background: var(--gradient-glass-dark);
color: var(--color-white);
text-align: center;
border-radius: var(--border-radius-md);
padding: var(--spacing-3);
position: absolute;
z-index: var(--z-30);
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity var(--transition-fast);
box-shadow: var(--shadow);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
font-size: var(--font-size-sm);
}
.tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--color-dark-gray) transparent transparent transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.divider {
height: 1px;
background: var(--border-color);
margin: var(--spacing-6) 0;
position: relative;
}
.divider-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--color-base);
padding: 0 var(--spacing-4);
color: var(--color-light-gray);
font-size: var(--font-size-sm);
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: var(--gradient-glass);
display: flex;
align-items: center;
justify-content: center;
border: var(--border);
box-shadow: var(--shadow);
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-sm {
width: 30px;
height: 30px;
}
.avatar-lg {
width: 60px;
height: 60px;
}
.avatar-xl {
width: 80px;
height: 80px;
}
.avatar-group {
display: flex;
}
.avatar-group .avatar {
margin-left: -10px;
border: 2px solid var(--color-base);
}
.avatar-group .avatar:first-child {
margin-left: 0;
}
/* =========================================================
20. Utilitários
========================================================= */
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
.min-h-screen {
min-height: 100vh;
}
.min-w-0 {
min-width: 0;
}
.max-w-xs {
max-width: 20rem;
}
.max-w-sm {
max-width: 24rem;
}
.max-w-md {
max-width: 28rem;
}
.max-w-lg {
max-width: 32rem;
}
.max-w-xl {
max-width: 36rem;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-6xl {
max-width: 72rem;
}
.max-w-7xl {
max-width: 80rem;
}
.max-w-full {
max-width: 100%;
}
.m-0 {
margin: var(--spacing-0);
}
.m-1 {
margin: var(--spacing-1);
}
.m-2 {
margin: var(--spacing-2);
}
.m-3 {
margin: var(--spacing-3);
}
.m-4 {
margin: var(--spacing-4);
}
.m-5 {
margin: var(--spacing-5);
}
.m-6 {
margin: var(--spacing-6);
}
.m-8 {
margin: var(--spacing-8);
}
.m-10 {
margin: var(--spacing-10);
}
.m-12 {
margin: var(--spacing-12);
}
.m-16 {
margin: var(--spacing-16);
}
.m-20 {
margin: var(--spacing-20);
}
.m-24 {
margin: var(--spacing-24);
}
.m-32 {
margin: var(--spacing-32);
}
.m-auto {
margin: auto;
}
.mx-0 {
margin-left: var(--spacing-0);
margin-right: var(--spacing-0);
}
.mx-1 {
margin-left: var(--spacing-1);
margin-right: var(--spacing-1);
}
.mx-2 {
margin-left: var(--spacing-2);
margin-right: var(--spacing-2);
}
.mx-3 {
margin-left: var(--spacing-3);
margin-right: var(--spacing-3);
}
.mx-4 {
margin-left: var(--spacing-4);
margin-right: var(--spacing-4);
}
.mx-5 {
margin-left: var(--spacing-5);
margin-right: var(--spacing-5);
}
.mx-6 {
margin-left: var(--spacing-6);
margin-right: var(--spacing-6);
}
.mx-8 {
margin-left: var(--spacing-8);
margin-right: var(--spacing-8);
}
.mx-10 {
margin-left: var(--spacing-10);
margin-right: var(--spacing-10);
}
.mx-12 {
margin-left: var(--spacing-12);
margin-right: var(--spacing-12);
}
.mx-16 {
margin-left: var(--spacing-16);
margin-right: var(--spacing-16);
}
.mx-20 {
margin-left: var(--spacing-20);
margin-right: var(--spacing-20);
}
.mx-24 {
margin-left: var(--spacing-24);
margin-right: var(--spacing-24);
}
.mx-32 {
margin-left: var(--spacing-32);
margin-right: var(--spacing-32);
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-0 {
margin-top: var(--spacing-0);
margin-bottom: var(--spacing-0);
}
.my-1 {
margin-top: var(--spacing-1);
margin-bottom: var(--spacing-1);
}
.my-2 {
margin-top: var(--spacing-2);
margin-bottom: var(--spacing-2);
}
.my-3 {
margin-top: var(--spacing-3);
margin-bottom: var(--spacing-3);
}
.my-4 {
margin-top: var(--spacing-4);
margin-bottom: var(--spacing-4);
}
.my-5 {
margin-top: var(--spacing-5);
margin-bottom: var(--spacing-5);
}
.my-6 {
margin-top: var(--spacing-6);
margin-bottom: var(--spacing-6);
}
.my-8 {
margin-top: var(--spacing-8);
margin-bottom: var(--spacing-8);
}
.my-10 {
margin-top: var(--spacing-10);
margin-bottom: var(--spacing-10);
}
.my-12 {
margin-top: var(--spacing-12);
margin-bottom: var(--spacing-12);
}
.my-16 {
margin-top: var(--spacing-16);
margin-bottom: var(--spacing-16);
}
.my-20 {
margin-top: var(--spacing-20);
margin-bottom: var(--spacing-20);
}
.my-24 {
margin-top: var(--spacing-24);
margin-bottom: var(--spacing-24);
}
.my-32 {
margin-top: var(--spacing-32);
margin-bottom: var(--spacing-32);
}
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
.mt-0 {
margin-top: var(--spacing-0);
}
.mt-1 {
margin-top: var(--spacing-1);
}
.mt-2 {
margin-top: var(--spacing-2);
}
.mt-3 {
margin-top: var(--spacing-3);
}
.mt-4 {
margin-top: var(--spacing-4);
}
.mt-5 {
margin-top: var(--spacing-5);
}
.mt-6 {
margin-top: var(--spacing-6);
}
.mt-8 {
margin-top: var(--spacing-8);
}
.mt-10 {
margin-top: var(--spacing-10);
}
.mt-12 {
margin-top: var(--spacing-12);
}
.mt-16 {
margin-top: var(--spacing-16);
}
.mt-20 {
margin-top: var(--spacing-20);
}
.mt-24 {
margin-top: var(--spacing-24);
}
.mt-32 {
margin-top: var(--spacing-32);
}
.mt-auto {
margin-top: auto;
}
.mr-0 {
margin-right: var(--spacing-0);
}
.mr-1 {
margin-right: var(--spacing-1);
}
.mr-2 {
margin-right: var(--spacing-2);
}
.mr-3 {
margin-right: var(--spacing-3);
}
.mr-4 {
margin-right: var(--spacing-4);
}
.mr-5 {
margin-right: var(--spacing-5);
}
.mr-6 {
margin-right: var(--spacing-6);
}
.mr-8 {
margin-right: var(--spacing-8);
}
.mr-10 {
margin-right: var(--spacing-10);
}
.mr-12 {
margin-right: var(--spacing-12);
}
.mr-16 {
margin-right: var(--spacing-16);
}
.mr-20 {
margin-right: var(--spacing-20);
}
.mr-24 {
margin-right: var(--spacing-24);
}
.mr-32 {
margin-right: var(--spacing-32);
}
.mr-auto {
margin-right: auto;
}
.mb-0 {
margin-bottom: var(--spacing-0);
}
.mb-1 {
margin-bottom: var(--spacing-1);
}
.mb-2 {
margin-bottom: var(--spacing-2);
}
.mb-3 {
margin-bottom: var(--spacing-3);
}
.mb-4 {
margin-bottom: var(--spacing-4);
}
.mb-5 {
margin-bottom: var(--spacing-5);
}
.mb-6 {
margin-bottom: var(--spacing-6);
}
.mb-8 {
margin-bottom: var(--spacing-8);
}
.mb-10 {
margin-bottom: var(--spacing-10);
}
.mb-12 {
margin-bottom: var(--spacing-12);
}
.mb-16 {
margin-bottom: var(--spacing-16);
}
.mb-20 {
margin-bottom: var(--spacing-20);
}
.mb-24 {
margin-bottom: var(--spacing-24);
}
.mb-32 {
margin-bottom: var(--spacing-32);
}
.mb-auto {
margin-bottom: auto;
}
.ml-0 {
margin-left: var(--spacing-0);
}
.ml-1 {
margin-left: var(--spacing-1);
}
.ml-2 {
margin-left: var(--spacing-2);
}
.ml-3 {
margin-left: var(--spacing-3);
}
.ml-4 {
margin-left: var(--spacing-4);
}
.ml-5 {
margin-left: var(--spacing-5);
}
.ml-6 {
margin-left: var(--spacing-6);
}
.ml-8 {
margin-left: var(--spacing-8);
}
.ml-10 {
margin-left: var(--spacing-10);
}
.ml-12 {
margin-left: var(--spacing-12);
}
.ml-16 {
margin-left: var(--spacing-16);
}
.ml-20 {
margin-left: var(--spacing-20);
}
.ml-24 {
margin-left: var(--spacing-24);
}
.ml-32 {
margin-left: var(--spacing-32);
}
.ml-auto {
margin-left: auto;
}
.p-0 {
padding: var(--spacing-0);
}
.p-1 {
padding: var(--spacing-1);
}
.p-2 {
padding: var(--spacing-2);
}
.p-3 {
padding: var(--spacing-3);
}
.p-4 {
padding: var(--spacing-4);
}
.p-5 {
padding: var(--spacing-5);
}
.p-6 {
padding: var(--spacing-6);
}
.p-8 {
padding: var(--spacing-8);
}
.p-10 {
padding: var(--spacing-10);
}
.p-12 {
padding: var(--spacing-12);
}
.p-16 {
padding: var(--spacing-16);
}
.p-20 {
padding: var(--spacing-20);
}
.p-24 {
padding: var(--spacing-24);
}
.p-32 {
padding: var(--spacing-32);
}
.px-0 {
padding-left: var(--spacing-0);
padding-right: var(--spacing-0);
}
.px-1 {
padding-left: var(--spacing-1);
padding-right: var(--spacing-1);
}
.px-2 {
padding-left: var(--spacing-2);
padding-right: var(--spacing-2);
}
.px-3 {
padding-left: var(--spacing-3);
padding-right: var(--spacing-3);
}
.px-4 {
padding-left: var(--spacing-4);
padding-right: var(--spacing-4);
}
.px-5 {
padding-left: var(--spacing-5);
padding-right: var(--spacing-5);
}
.px-6 {
padding-left: var(--spacing-6);
padding-right: var(--spacing-6);
}
.px-8 {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
.px-10 {
padding-left: var(--spacing-10);
padding-right: var(--spacing-10);
}
.px-12 {
padding-left: var(--spacing-12);
padding-right: var(--spacing-12);
}
.px-16 {
padding-left: var(--spacing-16);
padding-right: var(--spacing-16);
}
.px-20 {
padding-left: var(--spacing-20);
padding-right: var(--spacing-20);
}
.px-24 {
padding-left: var(--spacing-24);
padding-right: var(--spacing-24);
}
.px-32 {
padding-left: var(--spacing-32);
padding-right: var(--spacing-32);
}
.py-0 {
padding-top: var(--spacing-0);
padding-bottom: var(--spacing-0);
}
.py-1 {
padding-top: var(--spacing-1);
padding-bottom: var(--spacing-1);
}
.py-2 {
padding-top: var(--spacing-2);
padding-bottom: var(--spacing-2);
}
.py-3 {
padding-top: var(--spacing-3);
padding-bottom: var(--spacing-3);
}
.py-4 {
padding-top: var(--spacing-4);
padding-bottom: var(--spacing-4);
}
.py-5 {
padding-top: var(--spacing-5);
padding-bottom: var(--spacing-5);
}
.py-6 {
padding-top: var(--spacing-6);
padding-bottom: var(--spacing-6);
}
.py-8 {
padding-top: var(--spacing-8);
padding-bottom: var(--spacing-8);
}
.py-10 {
padding-top: var(--spacing-10);
padding-bottom: var(--spacing-10);
}
.py-12 {
padding-top: var(--spacing-12);
padding-bottom: var(--spacing-12);
}
.py-16 {
padding-top: var(--spacing-16);
padding-bottom: var(--spacing-16);
}
.py-20 {
padding-top: var(--spacing-20);
padding-bottom: var(--spacing-20);
}
.py-24 {
padding-top: var(--spacing-24);
padding-bottom: var(--spacing-24);
}
.py-32 {
padding-top: var(--spacing-32);
padding-bottom: var(--spacing-32);
}
.pt-0 {
padding-top: var(--spacing-0);
}
.pt-1 {
padding-top: var(--spacing-1);
}
.pt-2 {
padding-top: var(--spacing-2);
}
.pt-3 {
padding-top: var(--spacing-3);
}
.pt-4 {
padding-top: var(--spacing-4);
}
.pt-5 {
padding-top: var(--spacing-5);
}
.pt-6 {
padding-top: var(--spacing-6);
}
.pt-8 {
padding-top: var(--spacing-8);
}
.pt-10 {
padding-top: var(--spacing-10);
}
.pt-12 {
padding-top: var(--spacing-12);
}
.pt-16 {
padding-top: var(--spacing-16);
}
.pt-20 {
padding-top: var(--spacing-20);
}
.pt-24 {
padding-top: var(--spacing-24);
}
.pt-32 {
padding-top: var(--spacing-32);
}
.pr-0 {
padding-right: var(--spacing-0);
}
.pr-1 {
padding-right: var(--spacing-1);
}
.pr-2 {
padding-right: var(--spacing-2);
}
.pr-3 {
padding-right: var(--spacing-3);
}
.pr-4 {
padding-right: var(--spacing-4);
}
.pr-5 {
padding-right: var(--spacing-5);
}
.pr-6 {
padding-right: var(--spacing-6);
}
.pr-8 {
padding-right: var(--spacing-8);
}
.pr-10 {
padding-right: var(--spacing-10);
}
.pr-12 {
padding-right: var(--spacing-12);
}
.pr-16 {
padding-right: var(--spacing-16);
}
.pr-20 {
padding-right: var(--spacing-20);
}
.pr-24 {
padding-right: var(--spacing-24);
}
.pr-32 {
padding-right: var(--spacing-32);
}
.pb-0 {
padding-bottom: var(--spacing-0);
}
.pb-1 {
padding-bottom: var(--spacing-1);
}
.pb-2 {
padding-bottom: var(--spacing-2);
}
.pb-3 {
padding-bottom: var(--spacing-3);
}
.pb-4 {
padding-bottom: var(--spacing-4);
}
.pb-5 {
padding-bottom: var(--spacing-5);
}
.pb-6 {
padding-bottom: var(--spacing-6);
}
.pb-8 {
padding-bottom: var(--spacing-8);
}
.pb-10 {
padding-bottom: var(--spacing-10);
}
.pb-12 {
padding-bottom: var(--spacing-12);
}
.pb-16 {
padding-bottom: var(--spacing-16);
}
.pb-20 {
padding-bottom: var(--spacing-20);
}
.pb-24 {
padding-bottom: var(--spacing-24);
}
.pb-32 {
padding-bottom: var(--spacing-32);
}
.pl-0 {
padding-left: var(--spacing-0);
}
.pl-1 {
padding-left: var(--spacing-1);
}
.pl-2 {
padding-left: var(--spacing-2);
}
.pl-3 {
padding-left: var(--spacing-3);
}
.pl-4 {
padding-left: var(--spacing-4);
}
.pl-5 {
padding-left: var(--spacing-5);
}
.pl-6 {
padding-left: var(--spacing-6);
}
.pl-8 {
padding-left: var(--spacing-8);
}
.pl-10 {
padding-left: var(--spacing-10);
}
.pl-12 {
padding-left: var(--spacing-12);
}
.pl-16 {
padding-left: var(--spacing-16);
}
.pl-20 {
padding-left: var(--spacing-20);
}
.pl-24 {
padding-left: var(--spacing-24);
}
.pl-32 {
padding-left: var(--spacing-32);
}
.space-x-0 > * + * {
margin-left: var(--spacing-0);
}
.space-x-1 > * + * {
margin-left: var(--spacing-1);
}
.space-x-2 > * + * {
margin-left: var(--spacing-2);
}
.space-x-3 > * + * {
margin-left: var(--spacing-3);
}
.space-x-4 > * + * {
margin-left: var(--spacing-4);
}
.space-x-5 > * + * {
margin-left: var(--spacing-5);
}
.space-x-6 > * + * {
margin-left: var(--spacing-6);
}
.space-x-8 > * + * {
margin-left: var(--spacing-8);
}
.space-x-10 > * + * {
margin-left: var(--spacing-10);
}
.space-x-12 > * + * {
margin-left: var(--spacing-12);
}
.space-x-16 > * + * {
margin-left: var(--spacing-16);
}
.space-x-20 > * + * {
margin-left: var(--spacing-20);
}
.space-x-24 > * + * {
margin-left: var(--spacing-24);
}
.space-x-32 > * + * {
margin-left: var(--spacing-32);
}
.space-y-0 > * + * {
margin-top: var(--spacing-0);
}
.space-y-1 > * + * {
margin-top: var(--spacing-1);
}
.space-y-2 > * + * {
margin-top: var(--spacing-2);
}
.space-y-3 > * + * {
margin-top: var(--spacing-3);
}
.space-y-4 > * + * {
margin-top: var(--spacing-4);
}
.space-y-5 > * + * {
margin-top: var(--spacing-5);
}
.space-y-6 > * + * {
margin-top: var(--spacing-6);
}
.space-y-8 > * + * {
margin-top: var(--spacing-8);
}
.space-y-10 > * + * {
margin-top: var(--spacing-10);
}
.space-y-12 > * + * {
margin-top: var(--spacing-12);
}
.space-y-16 > * + * {
margin-top: var(--spacing-16);
}
.space-y-20 > * + * {
margin-top: var(--spacing-20);
}
.space-y-24 > * + * {
margin-top: var(--spacing-24);
}
.space-y-32 > * + * {
margin-top: var(--spacing-32);
}
.rounded-none {
border-radius: 0;
}
.rounded-sm {
border-radius: var(--border-radius-sm);
}
.rounded-md {
border-radius: var(--border-radius-md);
}
.rounded-lg {
border-radius: var(--border-radius-lg);
}
.rounded-xl {
border-radius: var(--border-radius-xl);
}
.rounded-2xl {
border-radius: var(--border-radius-2xl);
}
.rounded-full {
border-radius: var(--border-radius-full);
}
.rounded-t-none {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.rounded-t-sm {
border-top-left-radius: var(--border-radius-sm);
border-top-right-radius: var(--border-radius-sm);
}
.rounded-t-md {
border-top-left-radius: var(--border-radius-md);
border-top-right-radius: var(--border-radius-md);
}
.rounded-t-lg {
border-top-left-radius: var(--border-radius-lg);
border-top-right-radius: var(--border-radius-lg);
}
.rounded-t-xl {
border-top-left-radius: var(--border-radius-xl);
border-top-right-radius: var(--border-radius-xl);
}
.rounded-t-2xl {
border-top-left-radius: var(--border-radius-2xl);
border-top-right-radius: var(--border-radius-2xl);
}
.rounded-t-full {
border-top-left-radius: var(--border-radius-full);
border-top-right-radius: var(--border-radius-full);
}
.rounded-r-none {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.rounded-r-sm {
border-top-right-radius: var(--border-radius-sm);
border-bottom-right-radius: var(--border-radius-sm);
}
.rounded-r-md {
border-top-right-radius: var(--border-radius-md);
border-bottom-right-radius: var(--border-radius-md);
}
.rounded-r-lg {
border-top-right-radius: var(--border-radius-lg);
border-bottom-right-radius: var(--border-radius-lg);
}
.rounded-r-xl {
border-top-right-radius: var(--border-radius-xl);
border-bottom-right-radius: var(--border-radius-xl);
}
.rounded-r-2xl {
border-top-right-radius: var(--border-radius-2xl);
border-bottom-right-radius: var(--border-radius-2xl);
}
.rounded-r-full {
border-top-right-radius: var(--border-radius-full);
border-bottom-right-radius: var(--border-radius-full);
}
.rounded-b-none {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.rounded-b-sm {
border-bottom-left-radius: var(--border-radius-sm);
border-bottom-right-radius: var(--border-radius-sm);
}
.rounded-b-md {
border-bottom-left-radius: var(--border-radius-md);
border-bottom-right-radius: var(--border-radius-md);
}
.rounded-b-lg {
border-bottom-left-radius: var(--border-radius-lg);
border-bottom-right-radius: var(--border-radius-lg);
}
.rounded-b-xl {
border-bottom-left-radius: var(--border-radius-xl);
border-bottom-right-radius: var(--border-radius-xl);
}
.rounded-b-2xl {
border-bottom-left-radius: var(--border-radius-2xl);
border-bottom-right-radius: var(--border-radius-2xl);
}
.rounded-b-full {
border-bottom-left-radius: var(--border-radius-full);
border-bottom-right-radius: var(--border-radius-full);
}
.rounded-l-none {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.rounded-l-sm {
border-top-left-radius: var(--border-radius-sm);
border-bottom-left-radius: var(--border-radius-sm);
}
.rounded-l-md {
border-top-left-radius: var(--border-radius-md);
border-bottom-left-radius: var(--border-radius-md);
}
.rounded-l-lg {
border-top-left-radius: var(--border-radius-lg);
border-bottom-left-radius: var(--border-radius-lg);
}
.rounded-l-xl {
border-top-left-radius: var(--border-radius-xl);
border-bottom-left-radius: var(--border-radius-xl);
}
.rounded-l-2xl {
border-top-left-radius: var(--border-radius-2xl);
border-bottom-left-radius: var(--border-radius-2xl);
}
.rounded-l-full {
border-top-left-radius: var(--border-radius-full);
border-bottom-left-radius: var(--border-radius-full);
}
.border-0 {
border-width: 0;
}
.border {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-8 {
border-width: 8px;
}
.border-t-0 {
border-top-width: 0;
}
.border-t {
border-top-width: 1px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-t-4 {
border-top-width: 4px;
}
.border-t-8 {
border-top-width: 8px;
}
.border-r-0 {
border-right-width: 0;
}
.border-r {
border-right-width: 1px;
}
.border-r-2 {
border-right-width: 2px;
}
.border-r-4 {
border-right-width: 4px;
}
.border-r-8 {
border-right-width: 8px;
}
.border-b-0 {
border-bottom-width: 0;
}
.border-b {
border-bottom-width: 1px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-b-4 {
border-bottom-width: 4px;
}
.border-b-8 {
border-bottom-width: 8px;
}
.border-l-0 {
border-left-width: 0;
}
.border-l {
border-left-width: 1px;
}
.border-l-2 {
border-left-width: 2px;
}
.border-l-4 {
border-left-width: 4px;
}
.border-l-8 {
border-left-width: 8px;
}
.border-solid {
border-style: solid;
}
.border-dashed {
border-style: dashed;
}
.border-dotted {
border-style: dotted;
}
.border-double {
border-style: double;
}
.border-none {
border-style: none;
}
.border-transparent {
border-color: transparent;
}
.border-current {
border-color: currentColor;
}
.border-black {
border-color: var(--color-base);
}
.border-white {
border-color: var(--color-white);
}
.border-purple {
border-color: var(--color-medium-purple);
}
.border-neon {
border-color: var(--color-neon-purple);
}
.border-gold {
border-color: var(--color-gold);
}
.shadow-none {
box-shadow: none;
}
.shadow-sm {
box-shadow: var(--shadow-sm);
}
.shadow {
box-shadow: var(--shadow);
}
.shadow-md {
box-shadow: var(--shadow);
}
.shadow-lg {
box-shadow: var(--shadow-lg);
}
.shadow-xl {
box-shadow: var(--shadow-lg), var(--glow);
}
.shadow-2xl {
box-shadow: var(--shadow-lg), var(--glow-hover);
}
.shadow-inner {
box-shadow: var(--shadow-inset);
}
.shadow-outline {
box-shadow: 0 0 0 3px rgba(138, 17, 85, 0.5);
}
.shadow-button {
box-shadow: var(--shadow-button);
}
.shadow-button-hover {
box-shadow: var(--shadow-button-hover);
}
.shadow-gold {
box-shadow: var(--shadow-gold);
}
.shadow-gold-hover {
box-shadow: var(--shadow-gold-hover);
}
.opacity-0 {
opacity: 0;
}
.opacity-5 {
opacity: 0.05;
}
.opacity-10 {
opacity: 0.1;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-25 {
opacity: 0.25;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-75 {
opacity: 0.75;
}
.opacity-80 {
opacity: 0.8;
}
.opacity-90 {
opacity: 0.9;
}
.opacity-95 {
opacity: 0.95;
}
.opacity-100 {
opacity: 1;
}
.z-0 {
z-index: var(--z-0);
}
.z-10 {
z-index: var(--z-10);
}
.z-20 {
z-index: var(--z-20);
}
.z-30 {
z-index: var(--z-30);
}
.z-40 {
z-index: var(--z-40);
}
.z-50 {
z-index: var(--z-50);
}
.z-auto {
z-index: auto;
}
.z-negative {
z-index: var(--z-negative);
}
.z-max {
z-index: var(--z-max);
}
/* =========================================================
21. Media Queries (Responsividade)
========================================================= */
@media (max-width: 1536px) {
.container {
max-width: var(--container-xl);
}
}
@media (max-width: 1280px) {
.container {
max-width: var(--container-lg);
}
h1 {
font-size: var(--font-size-4xl);
}
h2 {
font-size: var(--font-size-2xl);
}
.section-title {
font-size: var(--font-size-2xl);
}
.hero h1 {
font-size: var(--font-size-4xl);
}
.gratuidade-title {
font-size: var(--font-size-3xl);
}
}
@media (max-width: 1024px) {
.container {
max-width: var(--container-md);
}
section {
padding: var(--spacing-16) 0;
}
h1 {
font-size: var(--font-size-3xl);
}
h2 {
font-size: var(--font-size-xl);
}
.section-title {
font-size: var(--font-size-xl);
}
.hero .container {
flex-direction: column;
}
.hero-content {
text-align: center;
padding-right: 0;
margin-bottom: var(--spacing-10);
}
.countdown-container {
justify-content: center;
}
.gratuidade .container {
flex-direction: column;
}
.gratuidade-content {
text-align: center;
padding-right: 0;
margin-bottom: var(--spacing-10);
}
.gratuidade-description {
margin: 0 auto var(--spacing-8);
}
.roadmap-item {
width: 50%;
margin-bottom: var(--spacing-8);
}
.roadmap-line {
width: 100%;
}
}
@media (max-width: 768px) {
.container {
max-width: 100%;
padding: 0 var(--spacing-5);
}
nav {
display: none;
position: absolute;
top: 80px;
left: 0;
width: 100%;
background: rgba(5, 5, 5, 0.95);
padding: var(--spacing-5);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border-bottom: var(--border);
box-shadow: var(--shadow);
}
nav.active {
display: block;
}
nav ul {
flex-direction: column;
gap: var(--spacing-4);
}
.menu-toggle {
display: block;
}
.btn-header {
display: none;
}
.hero h1 {
font-size: var(--font-size-3xl);
}
.hero p {
font-size: var(--font-size-base);
}
.section-title {
font-size: var(--font-size-lg);
}
.section-description {
font-size: var(--font-size-base);
}
.timeline::before {
left: 30px;
}
.timeline-item {
padding-left: 80px !important;
padding-right: 0 !important;
text-align: left !important;
}
.timeline-icon {
left: 30px;
}
.roadmap-item {
width: 100%;
float: none;
padding-top: 60px;
}
.roadmap-line {
display: none;
}
.contato-container {
flex-direction: column;
}
.footer-content {
flex-direction: column;
}
.footer-links {
width: 100%;
}
.footer-bottom {
flex-direction: column;
gap: var(--spacing-4);
text-align: center;
}
}
@media (max-width: 640px) {
.hero h1 {
font-size: var(--font-size-2xl);
}
.countdown-container {
flex-wrap: wrap;
gap: var(--spacing-3);
}
.countdown-item {
min-width: 60px;
padding: var(--spacing-2) var(--spacing-3);
}
.countdown-item span:first-child {
font-size: var(--font-size-xl);
}
.cta-button {
padding: var(--spacing-3) var(--spacing-8);
font-size: var(--font-size-sm);
}
.hexagon {
width: 160px;
height: 184px;
}
.form-container {
padding: var(--spacing-5);
}
.checkbox-group {
grid-template-columns: 1fr;
}
.form-buttons {
flex-direction: column;
gap: var(--spacing-4);
}
.prev-button,
.next-button,
.submit-button {
width: 100%;
}
.chat-button {
width: 50px;
height: 50px;
bottom: var(--spacing-5);
right: var(--spacing-5);
}
.chat-button .icon {
width: 25px;
height: 25px;
}
.gratuidade-title {
font-size: var(--font-size-2xl);
}
.gratuidade-description {
font-size: var(--font-size-base);
}
}
/* =========================================================
22. Acessibilidade
========================================================= */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
.focus-outline-none:focus {
outline: none;
}
.focus-outline:focus {
outline: var(--border-focus);
}
[tabindex]:focus-visible {
outline: var(--border-focus);
outline-offset: 2px;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--color-neon-purple);
color: var(--color-white);
padding: var(--spacing-3) var(--spacing-5);
z-index: var(--z-max);
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 0;
}
/* =========================================================
23. Animações de Partículas
========================================================= */
.click-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: var(--z-max);
}
.click-particle {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
animation: particle 1s ease-out forwards;
}
.cosmic-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: var(--z-0);
}
.cosmic-particle {
position: absolute;
width: 2px;
height: 2px;
background:\
/* =========================================================
OLIMPORAMA 2025 - Tema Espacial Aprimorado
Versão: 2.0
Data: 2025
========================================================= */
/* =========================================================
Tabela de Conteúdos:
1. Variáveis e Configurações
2. Reset e Estilos Base
3. Tipografia
4. Layout e Containers
5. Animações e Keyframes
6. Efeitos de Fundo e Estrelas
7. Header e Navegação
8. Hero Section
9. Áreas de Conhecimento (Hexágonos)
10. Categorias (Timeline)
11. Datas Importantes (Roadmap)
12. Seção Gratuidade
13. FAQ (Acordeão)
14. Contato
15. Patrocinadores
16. Inscrição (Formulário Multi-etapas)
17. Chat Flutuante
18. Footer
19. Componentes Reutilizáveis
20. Utilitários
21. Media Queries (Responsividade)
22. Acessibilidade
23. Animações de Partículas
24. Efeitos de Glassmorphism
25. Estados de Hover e Focus
26. Efeitos de Scroll
27. Efeitos de Texto
28. Efeitos de Imagem
29. Utilitários Adicionais
30. Animações Específicas para Elementos
31. Estilos de Impressão
========================================================= */
/* =========================================================
1. Variáveis e Configurações
========================================================= */
:root {
/* Color Scheme - Deeper Darks */
--color-base: #050505;
--color-deep: #080808;
--color-dark-purple: #1a0033;
--color-medium-purple: #2b0b4f;
--color-neon-purple: #8a1155;
--color-dark-gray: #121212;
--color-white: #ffffff;
--color-light-gray: #999999;
--color-mid-gray: #666666;
--color-gold: #ffd700;
--color-gold-light: #ffe566;
--color-gold-dark: #d4af37;
--color-success: #2ecc71;
--color-warning: #f39c12;
--color-error: #e74c3c;
--color-info: #3498db;
/* Gradients - Optimized */
--gradient-hero: linear-gradient(140deg, #050505 0%, #1a0033 100%);
--gradient-cards: linear-gradient(165deg, rgba(18, 18, 18, 0.95), rgba(8, 8, 8, 0.98));
--gradient-buttons: linear-gradient(90deg, #2b0b4f, #8a1155);
--gradient-background: linear-gradient(130deg, #050505, #0a0a0a);
--gradient-gold: linear-gradient(90deg, #d4af37, #ffd700, #d4af37);
--gradient-form: linear-gradient(165deg, rgba(26, 0, 51, 0.9), rgba(8, 8, 8, 0.95));
--gradient-footer: linear-gradient(180deg, #080808, #050505);
--gradient-timeline: linear-gradient(90deg, #1a0033, #2b0b4f);
--gradient-roadmap: linear-gradient(90deg, #2b0b4f, #8a1155);
--gradient-hover: linear-gradient(90deg, #8a1155, #2b0b4f);
--gradient-active: linear-gradient(90deg, #8a1155, #8a1155);
--gradient-disabled: linear-gradient(90deg, #121212, #1a1a1a);
--gradient-success: linear-gradient(90deg, #27ae60, #2ecc71);
--gradient-warning: linear-gradient(90deg, #e67e22, #f39c12);
--gradient-error: linear-gradient(90deg, #c0392b, #e74c3c);
--gradient-info: linear-gradient(90deg, #2980b9, #3498db);
--gradient-glass: linear-gradient(135deg, rgba(26, 0, 51, 0.4), rgba(8, 8, 8, 0.7));
--gradient-glass-light: linear-gradient(135deg, rgba(26, 0, 51, 0.2), rgba(8, 8, 8, 0.5));
--gradient-glass-dark: linear-gradient(135deg, rgba(26, 0, 51, 0.6), rgba(8, 8, 8, 0.9));
/* Effects - Refined */
--glassmorphism: rgba(18, 18, 18, 0.9);
--blur: blur(10px);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
--shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.9);
--shadow-inset: inset 0 2px 8px rgba(0, 0, 0, 0.5);
--shadow-text: 0 2px 4px rgba(0, 0, 0, 0.5);
--shadow-button: 0 4px 12px rgba(138, 17, 85, 0.3);
--shadow-button-hover: 0 6px 16px rgba(138, 17, 85, 0.5);
--shadow-gold: 0 4px 12px rgba(255, 215, 0, 0.3);
--shadow-gold-hover: 0 6px 16px rgba(255, 215, 0, 0.5);
--border: 1px solid rgba(43, 11, 79, 0.2);
--border-light: 1px solid rgba(43, 11, 79, 0.1);
--border-dark: 1px solid rgba(43, 11, 79, 0.3);
--border-gold: 1px solid rgba(255, 215, 0, 0.3);
--border-focus: 2px solid rgba(138, 17, 85, 0.5);
--glow: 0 0 20px rgba(138, 17, 85, 0.15);
--glow-hover: 0 0 25px rgba(138, 17, 85, 0.25);
--glow-gold: 0 0 20px rgba(255, 215, 0, 0.15);
--glow-gold-hover: 0 0 25px rgba(255, 215, 0, 0.25);
--glow-text: 0 0 10px rgba(138, 17, 85, 0.5);
--glow-text-gold: 0 0 10px rgba(255, 215, 0, 0.5);
/* Typography */
--font-heading: "Space Grotesk", sans-serif;
--font-body: "Inter", sans-serif;
--font-mono: "JetBrains Mono", monospace;
--font-alt: "Exo 2", sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-md: 1.125rem; /* 18px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.5rem; /* 24px */
--font-size-2xl: 1.875rem; /* 30px */
--font-size-3xl: 2.25rem; /* 36px */
--font-size-4xl: 3rem; /* 48px */
--font-size-5xl: 3.75rem; /* 60px */
--font-size-6xl: 4.5rem; /* 72px */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-loose: 1.8;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* Transitions - Smoother */
--transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
--transition-elastic: 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
--transition-decelerate: 0.4s cubic-bezier(0, 0, 0.2, 1);
--transition-accelerate: 0.4s cubic-bezier(0.4, 0, 1, 1);
/* Border Radius */
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 16px;
--border-radius-xl: 24px;
--border-radius-2xl: 32px;
--border-radius-full: 9999px;
/* Spacing */
--spacing-0: 0;
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-10: 2.5rem; /* 40px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
--spacing-32: 8rem; /* 128px */
--spacing-40: 10rem; /* 160px */
--spacing-48: 12rem; /* 192px */
--spacing-56: 14rem; /* 224px */
--spacing-64: 16rem; /* 256px */
/* Z-index */
--z-negative: -1;
--z-0: 0;
--z-10: 10;
--z-20: 20;
--z-30: 30;
--z-40: 40;
--z-50: 50;
--z-max: 9999;
/* Container Widths */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
}
/* =========================================================
2. Reset e Estilos Base
========================================================= */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
font-size: 16px;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--color-medium-purple) var(--color-base);
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-track {
background: var(--color-base);
}
html::-webkit-scrollbar-thumb {
background-color: var(--color-medium-purple);
border-radius: var(--border-radius-full);
border: 3px solid var(--color-base);
}
body {
font-family: var(--font-body);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--color-white);
background: var(--gradient-background);
overflow-x: hidden;
min-height: 100vh;
position: relative;
}
a {
text-decoration: none;
color: inherit;
transition: color var(--transition-fast);
cursor: pointer;
}
a:hover {
color: var(--color-gold);
}
ul,
ol {
list-style: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
background: transparent;
border: none;
outline: none;
}
button {
cursor: pointer;
user-select: none;
}
input::placeholder,
textarea::placeholder {
color: var(--color-light-gray);
opacity: 0.7;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-neon-purple);
box-shadow: var(--glow);
}
/* Remover aparência padrão de inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
/* Remover aparência padrão de select */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.25rem;
padding-right: 2.5rem;
}
/* Remover aparência padrão de textarea */
textarea {
resize: vertical;
min-height: 100px;
}
/* Remover outline padrão de elementos focados */
:focus {
outline: none;
}
:focus-visible {
outline: var(--border-focus);
outline-offset: 2px;
}
/* =========================================================
3. Tipografia
========================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-4);
color: var(--color-white);
}
h1 {
font-size: var(--font-size-5xl);
letter-spacing: var(--letter-spacing-tight);
margin-bottom: var(--spacing-6);
}
h2 {
font-size: var(--font-size-3xl);
letter-spacing: var(--letter-spacing-tight);
}
h3 {
font-size: var(--font-size-xl);
letter-spacing: var(--letter-spacing-normal);
}
h4 {
font-size: var(--font-size-lg);
letter-spacing: var(--letter-spacing-normal);
}
h5 {
font-size: var(--font-size-md);
letter-spacing: var(--letter-spacing-normal);
}
h6 {
font-size: var(--font-size-base);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}
p {
margin-bottom: var(--spacing-4);
}
.text-xs {
font-size: var(--font-size-xs);
}
.text-sm {
font-size: var(--font-size-sm);
}
.text-base {
font-size: var(--font-size-base);
}
.text-md {
font-size: var(--font-size-md);
}
.text-lg {
font-size: var(--font-size-lg);
}
.text-xl {
font-size: var(--font-size-xl);
}
.text-2xl {
font-size: var(--font-size-2xl);
}
.text-3xl {
font-size: var(--font-size-3xl);
}
.text-4xl {
font-size: var(--font-size-4xl);
}
.text-5xl {
font-size: var(--font-size-5xl);
}
.text-6xl {
font-size: var(--font-size-6xl);
}
.font-light {
font-weight: var(--font-weight-light);
}
.font-normal {
font-weight: var(--font-weight-normal);
}
.font-medium {
font-weight: var(--font-weight-medium);
}
.font-semibold {
font-weight: var(--font-weight-semibold);
}
.font-bold {
font-weight: var(--font-weight-bold);
}
.font-extrabold {
font-weight: var(--font-weight-extrabold);
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.leading-tight {
line-height: var(--line-height-tight);
}
.leading-normal {
line-height: var(--line-height-normal);
}
.leading-loose {
line-height: var(--line-height-loose);
}
.tracking-tight {
letter-spacing: var(--letter-spacing-tight);
}
.tracking-normal {
letter-spacing: var(--letter-spacing-normal);
}
.tracking-wide {
letter-spacing: var(--letter-spacing-wide);
}
.tracking-wider {
letter-spacing: var(--letter-spacing-wider);
}
.tracking-widest {
letter-spacing: var(--letter-spacing-widest);
}
.section-title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-6);
text-align: center;
background: var(--gradient-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
text-shadow: var(--shadow-text);
letter-spacing: var(--letter-spacing-wide);
}
.section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--gradient-gold);
border-radius: 3px;
}
.section-description {
font-size: var(--font-size-md);
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-12);
color: var(--color-light-gray);
line-height: var(--line-height-loose);
}
.text-gradient {
background: var(--gradient-buttons);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.text-gradient-gold {
background: var(--gradient-gold);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.text-white {
color: var(--color-white);
}
.text-light-gray {
color: var(--color-light-gray);
}
.text-mid-gray {
color: var(--color-mid-gray);
}
.text-gold {
color: var(--color-gold);
}
.text-neon-purple {
color: var(--color-neon-purple);
}
.text-medium-purple {
color: var(--color-medium-purple);
}
.text-success {
color: var(--color-success);
}
.text-warning {
color: var(--color-warning);
}
.text-error {
color: var(--color-error);
}
.text-info {
color: var(--color-info);
}
/* =========================================================
4. Layout e Containers
========================================================= */
.container {
width: 100%;
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
.container-sm {
max-width: var(--container-sm);
}
.container-md {
max-width: var(--container-md);
}
.container-lg {
max-width: var(--container-lg);
}
.container-xl {
max-width: var(--container-xl);
}
.container-2xl {
max-width: var(--container-2xl);
}
.container-fluid {
max-width: 100%;
}
section {
padding: var(--spacing-24) 0;
position: relative;
overflow: hidden;
}
.section-sm {
padding: var(--spacing-12) 0;
}
.section-lg {
padding: var(--spacing-32) 0;
}
.section-xl {
padding: var(--spacing-48) 0;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.content-center {
align-content: center;
}
.content-start {
align-content: flex-start;
}
.content-end {
align-content: flex-end;
}
.content-between {
align-content: space-between;
}
.content-around {
align-content: space-around;
}
.content-evenly {
align-content: space-evenly;
}
.self-auto {
align-self: auto;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-stretch {
align-self: stretch;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.flex-none {
flex: none;
}
.flex-grow-0 {
flex-grow: 0;
}
.flex-grow {
flex-grow: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink {
flex-shrink: 1;
}
.order-first {
order: -9999;
}
.order-last {
order: 9999;
}
.order-none {
order: 0;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
.order-5 {
order: 5;
}
.grid {
display: grid;
}
.inline-grid {
display: inline-grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.gap-0 {
gap: var(--spacing-0);
}
.gap-1 {
gap: var(--spacing-1);
}
.gap-2 {
gap: var(--spacing-2);
}
.gap-3 {
gap: var(--spacing-3);
}
.gap-4 {
gap: var(--spacing-4);
}
.gap-5 {
gap: var(--spacing-5);
}
.gap-6 {
gap: var(--spacing-6);
}
.gap-8 {
gap: var(--spacing-8);
}
.gap-10 {
gap: var(--spacing-10);
}
.gap-12 {
gap: var(--spacing-12);
}
.gap-16 {
gap: var(--spacing-16);
}
.gap-20 {
gap: var(--spacing-20);
}
.gap-24 {
gap: var(--spacing-24);
}
.gap-32 {
gap: var(--spacing-32);
}
.gap-x-0 {
column-gap: var(--spacing-0);
}
.gap-x-1 {
column-gap: var(--spacing-1);
}
.gap-x-2 {
column-gap: var(--spacing-2);
}
.gap-x-3 {
column-gap: var(--spacing-3);
}
.gap-x-4 {
column-gap: var(--spacing-4);
}
.gap-x-5 {
column-gap: var(--spacing-5);
}
.gap-x-6 {
column-gap: var(--spacing-6);
}
.gap-x-8 {
column-gap: var(--spacing-8);
}
.gap-x-10 {
column-gap: var(--spacing-10);
}
.gap-x-12 {
column-gap: var(--spacing-12);
}
.gap-x-16 {
column-gap: var(--spacing-16);
}
.gap-x-20 {
column-gap: var(--spacing-20);
}
.gap-x-24 {
column-gap: var(--spacing-24);
}
.gap-x-32 {
column-gap: var(--spacing-32);
}
.gap-y-0 {
row-gap: var(--spacing-0);
}
.gap-y-1 {
row-gap: var(--spacing-1);
}
.gap-y-2 {
row-gap: var(--spacing-2);
}
.gap-y-3 {
row-gap: var(--spacing-3);
}
.gap-y-4 {
row-gap: var(--spacing-4);
}
.gap-y-5 {
row-gap: var(--spacing-5);
}
.gap-y-6 {
row-gap: var(--spacing-6);
}
.gap-y-8 {
row-gap: var(--spacing-8);
}
.gap-y-10 {
row-gap: var(--spacing-10);
}
.gap-y-12 {
row-gap: var(--spacing-12);
}
.gap-y-16 {
row-gap: var(--spacing-16);
}
.gap-y-20 {
row-gap: var(--spacing-20);
}
.gap-y-24 {
row-gap: var(--spacing-24);
}
.gap-y-32 {
row-gap: var(--spacing-32);
}
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-5 {
grid-column: span 5 / span 5;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.col-span-7 {
grid-column: span 7 / span 7;
}
.col-span-8 {
grid-column: span 8 / span 8;
}
.col-span-9 {
grid-column: span 9 / span 9;
}
.col-span-10 {
grid-column: span 10 / span 10;
}
.col-span-11 {
grid-column: span 11 / span 11;
}
.col-span-12 {
grid-column: span 12 / span 12;
}
.col-span-full {
grid-column: 1 / -1;
}
.row-span-1 {
grid-row: span 1 / span 1;
}
.row-span-2 {
grid-row: span 2 / span 2;
}
.row-span-3 {
grid-row: span 3 / span 3;
}
.row-span-4 {
grid-row: span 4 / span 4;
}
.row-span-5 {
grid-row: span 5 / span 5;
}
.row-span-6 {
grid-row: span 6 / span 6;
}
.row-span-full {
grid-row: 1 / -1;
}
/* =========================================================
5. Animações e Keyframes
========================================================= */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(0.95);
}
}
@keyframes glow {
0%,
100% {
text-shadow: 0 0 5px rgba(138, 17, 85, 0.3), 0 0 10px rgba(138, 17, 85, 0.2);
}
50% {
text-shadow: 0 0 20px rgba(138, 17, 85, 0.6), 0 0 30px rgba(138, 17, 85, 0.4);
}
}
@keyframes glow-gold {
0%,
100% {
text-shadow: 0 0 5px rgba(255, 215, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.2);
}
50% {
text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.4);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes orbit {
from {
transform: rotate(0deg) translateX(50px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(50px) rotate(-360deg);
}
}
@keyframes animateStars {
from {
transform: translateY(0);
}
to {
transform: translateY(-1000px);
}
}
@keyframes twinkle {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes shooting-star {
0% {
transform: translateX(0) translateY(0) rotate(45deg);
opacity: 1;
}
100% {
transform: translateX(300px) translateY(300px) rotate(45deg);
opacity: 0;
}
}
@keyframes wave {
0%,
100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
}
@keyframes float-particle {
0%,
100% {
transform: translate(0, 0);
}
25% {
transform: translate(20px, -15px);
}
50% {
transform: translate(0, -30px);
}
75% {
transform: translate(-20px, -15px);
}
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes slideInLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes zoomIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes zoomOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0);
opacity: 0;
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes particle {
0% {
transform: scale(0) translate(0, 0);
opacity: 1;
}
100% {
transform: scale(1) translate(var(--x), var(--y));
opacity: 0;
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-pulse {
animation: pulse 3s ease-in-out infinite;
}
.animate-glow {
animation: glow 2s ease-in-out infinite alternate;
}
.animate-glow-gold {
animation: glow-gold 2s ease-in-out infinite alternate;
}
.animate-rotate {
animation: rotate 20s linear infinite;
}
.animate-orbit {
animation: orbit 30s linear infinite;
}
.animate-twinkle {
animation: twinkle 3s ease-in-out infinite;
}
.animate-wave {
animation: wave 3s ease-in-out infinite;
}
.animate-float-particle {
animation: float-particle 5s ease-in-out infinite;
}
.animate-scroll {
animation: scroll 30s linear infinite;
}
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out forwards;
}
.animate-fade-out {
animation: fadeOut 0.5s ease-in-out forwards;
}
.animate-slide-in-left {
animation: slideInLeft 0.5s ease-in-out forwards;
}
.animate-slide-in-right {
animation: slideInRight 0.5s ease-in-out forwards;
}
.animate-slide-in-up {
animation: slideInUp 0.5s ease-in-out forwards;
}
.animate-slide-in-down {
animation: slideInDown 0.5s ease-in-out forwards;
}
.animate-zoom-in {
animation: zoomIn 0.5s ease-in-out forwards;
}
.animate-zoom-out {
animation: zoomOut 0.5s ease-in-out forwards;
}
.animate-bounce {
animation: bounce 2s ease infinite;
}
.animate-spin {
animation: spin 1s linear infinite;
}
.animate-shimmer {
animation: shimmer 2s linear infinite;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 200% 100%;
}
/* =========================================================
6. Efeitos de Fundo e Estrelas
========================================================= */
.stars-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-negative);
overflow: hidden;
pointer-events: none;
}
#stars,
#stars2,
#stars3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-negative);
}
#stars {
background: transparent
url('data:image/svg+xml;utf8,')
repeat;
animation: animateStars 50s linear infinite;
}
#stars2 {
background: transparent
url('data:image/svg+xml;utf8,')
repeat;
animation: animateStars 100s linear infinite;
}
#stars3 {
background: transparent
url('data:image/svg+xml;utf8,')
repeat;
animation: animateStars 150s linear infinite;
}
.shooting-stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-negative);
overflow: hidden;
}
.shooting-star {
position: absolute;
width: 100px;
height: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
border-radius: var(--border-radius-full);
animation: shooting-star 3s linear infinite;
opacity: 0;
}
.shooting-star::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}
.shooting-star:nth-child(1) {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.shooting-star:nth-child(2) {
top: 30%;
left: 30%;
animation-delay: 2s;
}
.shooting-star:nth-child(3) {
top: 50%;
left: 50%;
animation-delay: 4s;
}
.shooting-star:nth-child(4) {
top: 70%;
left: 70%;
animation-delay: 6s;
}
.shooting-star:nth-child(5) {
top: 90%;
left: 90%;
animation-delay: 8s;
}
.nebula {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(138, 17, 85, 0.1) 0%, rgba(43, 11, 79, 0.05) 50%, transparent 70%);
opacity: 0.5;
z-index: var(--z-negative);
pointer-events: none;
}
.nebula-1 {
top: 20%;
left: 10%;
transform: scale(2);
}
.nebula-2 {
top: 60%;
left: 70%;
transform: scale(1.5);
}
.floating-planets {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: var(--z-0);
pointer-events: none;
}
.planet {
position: absolute;
border-radius: 50%;
opacity: 0.2;
box-shadow: inset 5px -5px 10px rgba(0, 0, 0, 0.5);
}
.planet-1 {
width: 150px;
height: 150px;
background: var(--color-medium-purple);
top: 20%;
left: 10%;
animation: orbit 30s linear infinite;
}
.planet-2 {
width: 100px;
height: 100px;
background: var(--color-gold);
bottom: 15%;
right: 15%;
animation: orbit 20s linear infinite reverse;
}
.planet-3 {
width: 80px;
height: 80px;
background: var(--color-dark-purple);
top: 60%;
left: 20%;
animation: orbit 25s linear infinite;
}
.cosmic-dust {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(1px 1px at 10% 10%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 20% 20%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 30% 30%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 40% 40%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 60% 60%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 70% 70%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 80% 80%, rgba(255, 255, 255, 0.1) 50%, transparent 100%),
radial-gradient(1px 1px at 90% 90%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
background-size: 100% 100%;
opacity: 0.3;
z-index: var(--z-negative);
pointer-events: none;
}
.cosmic-glow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(138, 17, 85, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(43, 11, 79, 0.1) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-negative);
pointer-events: none;
}
/* =========================================================
7. Header e Navegação
========================================================= */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: var(--z-50);
padding: var(--spacing-5) 0;
transition: all var(--transition-medium);
background: rgba(5, 5, 5, 0.8);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border-bottom: var(--border);
}
header.scrolled {
padding: var(--spacing-3) 0;
background: rgba(5, 5, 5, 0.95);
box-shadow: var(--shadow);
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
z-index: var(--z-10);
}
.logo-image {
height: 50px;
filter: drop-shadow(0 0 5px rgba(138, 17, 85, 0.5));
transition: filter var(--transition-medium);
}
.logo:hover .logo-image {
filter: drop-shadow(0 0 10px rgba(138, 17, 85, 0.8));
}
nav {
display: flex;
align-items: center;
}
nav ul {
display: flex;
gap: var(--spacing-8);
}
nav ul li a {
font-weight: var(--font-weight-medium);
position: relative;
padding: var(--spacing-2) 0;
transition: color var(--transition-fast);
}
nav ul li a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-buttons);
transition: width var(--transition-medium);
}
nav ul li a:hover {
color: var(--color-white);
}
nav ul li a:hover::after {
width: 100%;
}
.btn-header {
background: var(--gradient-buttons);
color: var(--color-white);
padding: var(--spacing-3) var(--spacing-6);
border-radius: var(--border-radius-full);
font-weight: var(--font-weight-semibold);
transition: all var(--transition-fast);
margin-left: var(--spacing-6);
box-shadow: var(--shadow-button);
position: relative;
overflow: hidden;
z-index: var(--z-0);
}
.btn-header::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-medium);
z-index: var(--z-negative);
}
.btn-header:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-button-hover);
color: var(--color-white);
}
.btn-header:hover::before {
left: 100%;
}
.btn-header:active {
transform: translateY(-1px);
}
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
width: 30px;
height: 20px;
position: relative;
z-index: var(--z-10);
}
.menu-toggle span {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-white);
position: absolute;
transition: all var(--transition-fast);
}
.menu-toggle span:nth-child(1) {
top: 0;
}
.menu-toggle span:nth-child(2) {
top: 9px;
}
.menu-toggle span:nth-child(3) {
top: 18px;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* =========================================================
8. Hero Section
========================================================= */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: var(--gradient-hero);
overflow: hidden;
padding-top: 80px;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
animation: rotate 100s linear infinite;
opacity: 0.3;
}
.hero .container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: var(--z-10);
}
.hero-content {
flex: 1;
padding-right: var(--spacing-12);
}
.hero-image {
flex: 1;
position: relative;
}
.astronaut {
max-width: 100%;
animation: float 6s ease-in-out infinite;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}
.hero h1 {
font-size: var(--font-size-5xl);
margin-bottom: var(--spacing-6);
line-height: 1.1;
text-shadow: var(--shadow-text);
}
.hero h1 span {
color: var(--color-neon-purple);
display: block;
}
.glow-text {
animation: glow 2s ease-in-out infinite alternate;
}
.hero p {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-8);
color: var(--color-light-gray);
max-width: 600px;
}
/* Countdown */
.countdown-container {
display: flex;
gap: var(--spacing-4);
margin-bottom: var(--spacing-8);
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--gradient-glass);
padding: var(--spacing-4) var(--spacing-5);
border-radius: var(--border-radius-md);
min-width: 80px;
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
border: var(--border);
box-shadow: var(--shadow);
transition: transform var(--transition-fast);
}
.countdown-item:hover {
transform: translateY(-5px);
}
.countdown-item span:first-child {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-neon-purple);
line-height: 1;
margin-bottom: var(--spacing-1);
}
.countdown-label {
font-size: var(--font-size-xs);
color: var(--color-light-gray);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
}
/* CTA Button */
.cta-button {
display: inline-block;
padding: var(--spacing-4) var(--spacing-10);
background: var(--gradient-buttons);
color: var(--color-white);
font-weight: var(--font-weight-bold);
border-radius: var(--border-radius-full);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
box-shadow: var(--shadow-button), var(--glow);
position: relative;
overflow: hidden;
z-index: var(--z-0);
transition: all var(--transition-medium);
}
.cta-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-medium);
z-index: var(--z-negative);
}
.cta-button:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-button-hover), var(--glow-hover);
color: var(--color-white);
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:active {
transform: translateY(-2px);
}
.cta-button.secondary {
background: transparent;
color: var(--color-neon-purple);
border: 2px solid var(--color-neon-purple);
box-shadow: var(--glow);
}
.cta-button.secondary:hover {
background: var(--color-neon-purple);
color: var(--color-white);
box-shadow: var(--glow-hover);
}
/* =========================================================
9. Áreas de Conhecimento (Hexágonos)
========================================================= */
.areas {
background: linear-gradient(to bottom, var(--color-base), var(--color-dark-purple));
position: relative;
overflow: hidden;
}
.areas::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(138, 17, 85, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(43, 11, 79, 0.1) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-0);
pointer-events: none;
}
.hexagon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-8);
margin-top: var(--spacing-12);
position: relative;
z-index: var(--z-10);
}
.hexagon-item {
display: flex;
justify-content: center;
perspective: 1000px;
}
.hexagon {
width: 200px;
height: 230px;
background: var(--gradient-buttons);
position: relative;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-medium);
cursor: pointer;
transform-style: preserve-3d;
}
.hexagon::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
background: var(--color-dark-gray);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
z-index: var(--z-0);
}
.hexagon-content {
position: relative;
z-index: var(--z-10);
text-align: center;
padding: var(--spacing-5);
transition: all var(--transition-medium);
backface-visibility: hidden;
}
.hexagon-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-8);
opacity: 0;
transition: all var(--transition-medium);
z-index: var(--z-20);
backface-visibility: hidden;
transform: rotateY(180deg);
}
.hexagon:hover {
transform: translateY(-10px) rotateY(180deg);
box-shadow: var(--shadow-lg), var(--glow);
}
.hexagon:hover .hexagon-content {
opacity: 0;
}
.hexagon:hover .hexagon-hover {
opacity: 1;
}
.icon-container {
width: 60px;
height: 60px;
background: rgba(138, 17, 85, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-4);
transition: all var(--transition-medium);
}
.hexagon:hover .icon-container {
background: rgba(138, 17, 85, 0.4);
}
.icon {
width: 30px;
height: 30px;
stroke: var(--color-neon-purple);
stroke-width: 2;
fill: none;
transition: all var(--transition-medium);
}
.hexagon:hover .icon {
stroke: var(--color-white);
transform: scale(1.1);
}
.hexagon h3 {
font-size: var(--font-size-lg);
color: var(--color-white);
margin-bottom: var(--spacing-2);
transition: all var(--transition-medium);
}
.hexagon:hover h3 {
color: var(--color-neon-purple);
}
.hexagon-hover p {
font-size: var(--font-size-sm);
color: var(--color-light-gray);
line-height: var(--line-height-normal);
}
/* =========================================================
10. Categorias (Timeline)
========================================================= */
.categorias {
background: linear-gradient(to bottom, var(--color-dark-purple), var(--color-medium-purple));
position: relative;
overflow: hidden;
}
.categorias::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.3;
z-index: var(--z-0);
}
.timeline {
position: relative;
max-width: 800px;
margin: var(--spacing-12) auto 0;
}
.timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: var(--gradient-buttons);
border-radius: 4px;
z-index: var(--z-0);
}
.timeline-item {
position: relative;
margin-bottom: var(--spacing-12);
width: 100%;
z-index: var(--z-10);
}
.timeline-item:nth-child(odd) {
padding-right: calc(50% + var(--spacing-8));
text-align: right;
}
.timeline-item:nth-child(even) {
padding-left: calc(50% + var(--spacing-8));
text-align: left;
}
.timeline-icon {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background: var(--gradient-buttons);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-20);
box-shadow: var(--shadow), var(--glow);
transition: all var(--transition-medium);
}
.timeline-item:hover .timeline-icon {
transform: translateX(-50%) scale(1.1);
box-shadow: var(--shadow-lg), var(--glow-hover);
}
.timeline-icon .icon {
stroke: var(--color-white);
width: 24px;
height: 24px;
}
.timeline-content {
background: var(--gradient-glass);
padding: var(--spacing-6);
border-radius: var(--border-radius-md);
box-shadow: var(--shadow);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
transition: all var(--transition-medium);
}
.timeline-item:hover .timeline-content {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.timeline-content h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-2);
color: var(--color-neon-purple);
}
.age {
display: inline-block;
padding: var(--spacing-1) var(--spacing-3);
background: rgba(138, 17, 85, 0.2);
border-radius: var(--border-radius-full);
font-size: var(--font-size-xs);
margin-bottom: var(--spacing-3);
color: var(--color-light-gray);
letter-spacing: var(--letter-spacing-wide);
}
.timeline-content p {
color: var(--color-light-gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}
/* =========================================================
11. Datas Importantes (Roadmap)
========================================================= */
.datas {
background: linear-gradient(to bottom, var(--color-medium-purple), var(--color-neon-purple));
position: relative;
overflow: hidden;
}
.datas::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
animation: wave 10s linear infinite;
opacity: 0.3;
z-index: var(--z-0);
}
.roadmap {
max-width: 900px;
margin: var(--spacing-12) auto 0;
position: relative;
z-index: var(--z-10);
}
.roadmap-line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-gold);
transform: translateY(-50%);
border-radius: 4px;
z-index: var(--z-0);
}
.roadmap-item {
position: relative;
width: 25%;
float: left;
padding-top: 80px;
text-align: center;
z-index: var(--z-10);
}
.roadmap-point {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: var(--color-gold);
border-radius: 50%;
z-index: var(--z-20);
box-shadow: var(--shadow-gold);
transition: all var(--transition-medium);
}
.roadmap-item.active .roadmap-point {
width: 24px;
height: 24px;
box-shadow: var(--shadow-gold-hover), var(--glow-gold);
}
.roadmap-item:hover .roadmap-point {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: var(--shadow-gold-hover), var(--glow-gold-hover);
}
.roadmap-content {
background: var(--gradient-glass);
padding: var(--spacing-5);
border-radius: var(--border-radius-md);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
margin: 0 var(--spacing-2);
box-shadow: var(--shadow);
transition: all var(--transition-medium);
height: 100%;
}
.roadmap-item:hover .roadmap-content {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.roadmap-icon {
width: 50px;
height: 50px;
background: rgba(138, 17, 85, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-4);
transition: all var(--transition-medium);
}
.roadmap-item:hover .roadmap-icon {
background: rgba(138, 17, 85, 0.4);
transform: scale(1.1);
}
.roadmap-icon .icon {
width: 24px;
height: 24px;
stroke: var(--color-gold);
stroke-width: 2;
fill: none;
transition: all var(--transition-medium);
}
.roadmap-item:hover .roadmap-icon .icon {
stroke: var(--color-white);
}
.roadmap-content h3 {
font-size: var(--font-size-md);
margin-bottom: var(--spacing-2);
color: var(--color-gold);
}
.date {
display: block;
font-size: var(--font-size-sm);
color: var(--color-white);
margin-bottom: var(--spacing-3);
font-weight: var(--font-weight-medium);
}
.roadmap-countdown {
font-size: var(--font-size-xs);
color: var(--color-gold);
font-weight: var(--font-weight-semibold);
}
.roadmap-content p {
font-size: var(--font-size-sm);
color: var(--color-light-gray);
margin-top: var(--spacing-3);
}
/* =========================================================
12. Seção Gratuidade
========================================================= */
.gratuidade {
background: linear-gradient(to bottom, var(--color-neon-purple), var(--color-dark-purple));
position: relative;
overflow: hidden;
}
.gratuidade::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 40%, rgba(138, 17, 85, 0.2) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(43, 11, 79, 0.2) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-0);
}
.gratuidade .container {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: var(--z-10);
}
.gratuidade-content {
flex: 1;
padding-right: var(--spacing-12);
}
.gratuidade-image {
flex: 1;
position: relative;
}
.astronaut-flag {
max-width: 100%;
animation: wave 3s ease-in-out infinite;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.particles::before,
.particles::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--color-gold);
border-radius: 50%;
opacity: 0.6;
box-shadow: var(--glow-gold);
}
.particles::before {
top: 30%;
left: 20%;
animation: float-particle 4s ease-in-out infinite;
}
.particles::after {
top: 60%;
right: 30%;
animation: float-particle 5s ease-in-out infinite 1s;
}
.gratuidade-title {
font-size: var(--font-size-4xl);
color: var(--color-gold);
margin-bottom: var(--spacing-6);
text-shadow: var(--shadow-text), var(--glow-text-gold);
animation: glow-gold 2s ease-in-out infinite alternate;
}
.gratuidade-description {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-8);
max-width: 500px;
color: var(--color-light-gray);
line-height: var(--line-height-loose);
}
/* =========================================================
13. FAQ (Acordeão)
========================================================= */
.faq {
background: linear-gradient(to bottom, var(--color-dark-purple), var(--color-base));
position: relative;
overflow: hidden;
}
.faq::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
opacity: 0.3;
z-index: var(--z-0);
}
.faq-search {
max-width: 600px;
margin: 0 auto var(--spacing-10);
position: relative;
}
.faq-search input {
width: 100%;
padding: var(--spacing-4) var(--spacing-12);
border: var(--border);
border-radius: var(--border-radius-full);
background: var(--gradient-glass);
color: var(--color-white);
font-size: var(--font-size-base);
outline: none;
transition: all var(--transition-fast);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow);
}
.search-icon {
position: absolute;
left: var(--spacing-5);
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
stroke: var(--color-light-gray);
stroke-width: 2;
fill: none;
transition: all var(--transition-fast);
}
.faq-search input:focus {
border-color: var(--color-neon-purple);
box-shadow: var(--shadow), var(--glow);
}
.faq-search input:focus + .search-icon {
stroke: var(--color-neon-purple);
}
.faq-search input::placeholder {
color: var(--color-light-gray);
opacity: 0.7;
}
.accordion {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: var(--z-10);
}
.accordion-item {
margin-bottom: var(--spacing-4);
border-radius: var(--border-radius-md);
overflow: hidden;
background: var(--gradient-glass);
border: var(--border);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow);
transition: all var(--transition-medium);
}
.accordion-item:hover {
box-shadow: var(--shadow-lg);
}
.accordion-header {
padding: var(--spacing-5);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all var(--transition-fast);
}
.accordion-header:hover {
background: rgba(255, 255, 255, 0.05);
}
.accordion-header h3 {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
margin-bottom: 0;
transition: all var(--transition-fast);
}
.accordion-item.active .accordion-header h3 {
color: var(--color-neon-purple);
}
.accordion-icon {
width: 20px;
height: 20px;
position: relative;
transition: all var(--transition-fast);
}
.accordion-icon::before,
.accordion-icon::after {
content: "";
position: absolute;
background-color: var(--color-neon-purple);
transition: all var(--transition-fast);
}
.accordion-icon::before {
top: 9px;
left: 0;
width: 100%;
height: 2px;
}
.accordion-icon::after {
top: 0;
left: 9px;
width: 2px;
height: 100%;
}
.accordion-item.active .accordion-icon::after {
transform: rotate(90deg);
opacity: 0;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-medium);
}
.accordion-item.active .accordion-content {
max-height: 300px;
}
.accordion-content p {
padding: 0 var(--spacing-5) var(--spacing-5);
color: var(--color-light-gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-loose);
}
/* =========================================================
14. Contato
========================================================= */
.contato {
background: linear-gradient(to bottom, var(--color-base), var(--color-dark-purple));
position: relative;
overflow: hidden;
}
.contato::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(138, 17, 85, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(43, 11, 79, 0.1) 0%, transparent 50%);
opacity: 0.5;
z-index: var(--z-0);
}
.contato-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-10);
position: relative;
z-index: var(--z-10);
}
.contato-form {
flex: 1;
min-width: 300px;
}
.contato-info {
flex: 1;
min-width: 300px;
}
.form-group {
margin-bottom: var(--spacing-5);
}
.form-group label {
display: block;
margin-bottom: var(--spacing-2);
font-weight: var(--font-weight-medium);
color: var(--color-white);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--spacing-3) var(--spacing-4);
border: var(--border);