:root {
--primary-color: #001f64;
--secondary-color: #ff9f00;
--accent-color: #00c6ff;
--text-dark: #2d3748;
--text-light: #ffffff;
--background-light: #f8fafc;
--card-bg: rgba(255, 255, 255, 0.95);
--shadow-light: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-medium: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-heavy: 0 20px 25px rgba(0, 0, 0, 0.15);
--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, #003399 100%);
--gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, #ff6b00 100%);
--gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, #0072ff 100%);
--font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-heading: 'Montserrat', 'Arial', sans-serif;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 20px;
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-primary);
line-height: 1.6;
color: var(--text-dark);
background: var(--gradient-primary);
background-attachment: fixed;
overflow-x: hidden;
min-height: 100vh;
}
#app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
padding: var(--space-md);
position: relative;
z-index: 1;
}
#app::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: 
radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 20%);
z-index: -1;
pointer-events: none;
}
header, main, footer {
width: 100%;
max-width: 1200px;
margin: var(--space-sm) 0;
padding: var(--space-lg);
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-medium);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
header:hover, main:hover, footer:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-heavy);
}
h1 {
font-family: var(--font-heading);
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: var(--space-md);
text-align: center;
background: var(--gradient-secondary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
letter-spacing: -0.5px;
line-height: 1.2;
position: relative;
padding-bottom: var(--space-sm);
}
h1::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: var(--gradient-accent);
border-radius: 2px;
}
h2 {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: var(--space-md);
color: var(--primary-color);
text-align: center;
}
h3 {
font-family: var(--font-heading);
font-size: clamp(1.25rem, 3vw, 2rem);
font-weight: 600;
margin-bottom: var(--space-sm);
color: var(--primary-color);
}
p {
font-size: 1.1rem;
margin-bottom: var(--space-sm);
color: var(--text-dark);
line-height: 1.7;
}
.text-center {
text-align: center;
}
.text-white {
color: var(--text-light);
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-sm) var(--space-lg);
margin: var(--space-sm);
background: var(--gradient-secondary);
color: var(--text-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border: none;
border-radius: var(--border-radius-md);
cursor: pointer;
overflow: hidden;
position: relative;
transition: all var(--transition-normal);
box-shadow: var(--shadow-medium);
text-decoration: none;
font-size: 1rem;
min-height: 50px;
}
.button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left var(--transition-slow);
}
.button:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-heavy);
padding: var(--space-sm) calc(var(--space-lg) + 4px);
}
.button:hover::before {
left: 100%;
}
.button:active {
transform: translateY(1px);
box-shadow: var(--shadow-light);
}
.button:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 159, 0, 0.4);
}
.button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.button-primary {
background: var(--gradient-primary);
}
.button-accent {
background: var(--gradient-accent);
}
.button-outline {
background: transparent;
border: 2px solid var(--secondary-color);
color: var(--secondary-color);
}
.button-outline:hover {
background: var(--secondary-color);
color: var(--text-light);
}
.container {
max-width: 800px;
margin: 0 auto;
padding: var(--space-lg);
text-align: center;
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-medium);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.logoGame {
width: 180px;
height: 180px;
border-radius: 50%;
border: 4px solid var(--secondary-color);
box-shadow: var(--shadow-heavy);
object-fit: cover;
transition: transform var(--transition-normal);
margin: var(--space-md) auto;
display: block;
}
.logoGame:hover {
transform: scale(1.05) rotate(5deg);
}
.imagemFundo {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
object-fit: cover;
z-index: -2;
opacity: 0.15;
filter: blur(2px);
}
form {
margin-bottom: var(--space-lg);
text-align: left;
}
label {
display: block;
margin: var(--space-sm) 0 var(--space-xs);
font-weight: 600;
color: var(--primary-color);
}
input {
width: 100%;
padding: var(--space-sm);
margin-bottom: var(--space-md);
border: 2px solid #e2e8f0;
border-radius: var(--border-radius-sm);
font-size: 1rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.2);
}
.alert-message {
color: #e53e3e;
font-weight: bold;
padding: var(--space-sm);
background: rgba(229, 62, 62, 0.1);
border-radius: var(--border-radius-sm);
border-left: 4px solid #e53e3e;
margin: var(--space-md) 0;
}