/* =====================================================================
ESUP — DESIGN SYSTEM · "Corredor de Luz"
Vestibular 2026.2 — Sua Vez de Protagonizar
---------------------------------------------------------------------
Folha de estilo canônica. Importe este arquivo em qualquer peça
(landing, post, banner, e-mail) e use os tokens e classes abaixo
para manter o padrão da campanha.
Fontes (carregar via Google Fonts):
Montserrat — base / títulos
Playfair Display — destaques em itálico
JetBrains Mono — labels / eyebrow / dados
===================================================================== */
:root {
/* -------------------------------------------------- PALETA DE MARCA */
--esup-navy: #00387d; /* azul institucional */
--esup-navy-deep: #041b3d; /* fundo premium */
--esup-navy-night: #020c21; /* fundo base / mais profundo */
--esup-navy-black: #010815; /* rodapé / extremo */
--esup-turquoise: #00898a; /* CTA primário (início do gradiente) */
--esup-teal: #009b8f; /* ações secundárias */
--esup-cyan: #1ec6e8; /* destaque "2026", hairlines, ícones */
--esup-cyan-bright: #00edee; /* realce extra */
--esup-magenta: #be0081; /* palavra-chave (base) */
--esup-magenta-hot: #ff3aa7; /* destaque italic Playfair */
--esup-amber: #ffbd2f; /* detalhe do pássaro do logo */
--esup-cream: #f6f4ef; /* texto sobre fundo escuro */
/* ------------------------------------------------ CORES SEMÂNTICAS */
--esup-bg: var(--esup-navy-night);
--esup-surface: #061a38; /* cartões / superfícies */
--esup-surface-2: #072046; /* hover de superfície */
--esup-text: var(--esup-cream);
--esup-text-muted: rgba(246, 244, 239, 0.70);
--esup-text-faint: rgba(246, 244, 239, 0.45);
--esup-line: rgba(255, 255, 255, 0.10);
--esup-line-cyan: rgba(30, 198, 232, 0.25);
/* ----------------------------------------------------- TIPOGRAFIA */
--esup-font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
--esup-font-serif: "Playfair Display", ui-serif, Georgia, serif;
--esup-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* ----------------------------------------------------------- RAIO */
--esup-radius-sm: 4px;
--esup-radius: 8px;
--esup-radius-lg: 16px;
--esup-radius-xl: 24px;
--esup-pill: 9999px;
/* -------------------------------------------------------- GRADIENTES */
--esup-grad-cta: linear-gradient(135deg, #00898a 0%, #1ec6e8 100%);
--esup-grad-cta-3: linear-gradient(135deg, #00898a 0%, #0a8fb6 55%, #1ec6e8 100%);
--esup-grad-bg: linear-gradient(180deg, #020c21 0%, #041b3d 50%, #020c21 100%);
/* ------------------------------------------------------------ GLOWS */
--esup-glow-cyan: 0 0 0 1px rgba(30,198,232,0.35),
0 10px 35px -15px rgba(30,198,232,0.55),
0 0 60px -20px rgba(0,137,138,0.6);
--esup-shadow-cta: 0 10px 30px -10px rgba(30,198,232,0.45);
}
/* =====================================================================
FUNDO PREMIUM — "Corredor de Luz"
Aplique .esup-bg no ou em qualquer seção de fundo cheio.
===================================================================== */
.esup-bg {
background-color: var(--esup-navy-night);
background-image:
radial-gradient(1200px 600px at 12% -5%, rgba(30,198,232,0.12), transparent 60%),
radial-gradient(900px 500px at 110% 10%, rgba(0,137,138,0.18), transparent 55%),
radial-gradient(800px 600px at 80% 120%, rgba(190,0,129,0.08), transparent 60%),
var(--esup-grad-bg);
color: var(--esup-text);
}
/* Granulado sutil — coloque fixo se quiser */
.esup-noise {
position: fixed; inset: 0; pointer-events: none; z-index: 0;
opacity: 0.35; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* =====================================================================
TIPOGRAFIA
===================================================================== */
.esup-display { /* títulos heroicos */
font-family: var(--esup-font-sans);
font-weight: 900;
line-height: 1.02;
letter-spacing: -0.02em;
}
.esup-h2 {
font-family: var(--esup-font-sans);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.02em;
}
.esup-serif-italic,
.accent-italic { /* destaque em Playfair italic magenta */
font-family: var(--esup-font-serif);
font-style: italic;
color: var(--esup-magenta-hot);
}
.esup-numeric { /* KPIs / números grandes */
font-family: var(--esup-font-sans);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 0.9;
}
/* Eyebrow / kicker — label mono ciano com hairline */
.eyebrow {
font-family: var(--esup-font-mono);
font-weight: 500;
font-size: 0.6875rem; /* 11px */
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--esup-cyan);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.eyebrow::before {
content: "";
display: inline-block;
width: 28px; height: 1px;
background: linear-gradient(90deg, transparent, var(--esup-cyan));
}
.text-cyan-brand { color: var(--esup-cyan); }
.text-turquoise-brand { color: var(--esup-turquoise); }
.text-magenta-brand { color: var(--esup-magenta-hot); }
/* =====================================================================
BOTÕES
===================================================================== */
.btn-pill {
border-radius: var(--esup-pill);
padding: 0.95rem 1.75rem;
font-family: var(--esup-font-sans);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.8125rem; /* 13px */
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
border: 0;
text-decoration: none;
}
.btn-primary {
background: var(--esup-grad-cta);
color: #ffffff;
border: 1px solid rgba(30,198,232,0.5);
box-shadow: var(--esup-shadow-cta);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 45px -12px rgba(30,198,232,0.7);
}
.btn-outline {
background: transparent;
color: var(--esup-cyan);
border: 2px solid var(--esup-turquoise);
}
.btn-outline:hover {
background: rgba(30,198,232,0.08);
border-color: var(--esup-cyan);
}
/* Link com sublinhado animado */
.underline-draw {
background-image: linear-gradient(90deg, var(--esup-cyan), var(--esup-cyan));
background-size: 0% 2px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size 0.45s ease;
text-decoration: none;
color: var(--esup-cyan);
}
.underline-draw:hover { background-size: 100% 2px; }
/* =====================================================================
SUPERFÍCIES / CARTÕES
===================================================================== */
.glass-card {
background: linear-gradient(180deg, rgba(4,27,61,0.82), rgba(2,12,33,0.72));
border: 1px solid rgba(30,198,232,0.18);
backdrop-filter: blur(6px);
border-radius: var(--esup-radius-sm);
}
.glow-turquoise { box-shadow: var(--esup-glow-cyan); }
.esup-card { /* cartão padrão (curso, ingresso) */
background: rgba(6,26,56,0.70);
border: 1px solid var(--esup-line);
border-radius: var(--esup-radius-sm);
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.esup-card:hover {
background: var(--esup-surface-2);
border-color: var(--esup-line-cyan);
}
/* Chip / tag de destaque */
.esup-chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 500;
color: rgba(255,255,255,0.85);
border: 1px solid var(--esup-line-cyan);
background: rgba(30,198,232,0.05);
padding: 0.375rem 0.75rem;
border-radius: var(--esup-pill);
}
.esup-chip::before {
content: "";
width: 4px; height: 4px; border-radius: 50%;
background: var(--esup-cyan);
}
/* Selo mono (numeração / modalidade) */
.esup-tag-mono {
font-family: var(--esup-font-mono);
font-size: 0.625rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--esup-cyan);
}
/* =====================================================================
DETALHES / EFEITOS DE LUZ
===================================================================== */
.hairline { /* divisória fina com brilho ciano central */
height: 1px;
background: linear-gradient(90deg, transparent, rgba(30,198,232,0.55), transparent);
}
.divider-tick { /* traço sólido curto */
width: 36px; height: 2px;
background: var(--esup-cyan);
display: inline-block;
}
.vertical-rail { /* trilho vertical luminoso */
width: 1px;
background: linear-gradient(180deg, transparent, rgba(30,198,232,0.45), transparent);
}
.light-beam { /* feixe de luz lateral (hover de cards) */
background: linear-gradient(90deg, rgba(30,198,232,0.40), transparent);
}
.bg-navy-deep { background-color: var(--esup-navy-deep); }
.bg-navy-night { background-color: var(--esup-navy-night); }
/* =====================================================================
CAMPOS DE FORMULÁRIO
===================================================================== */
.esup-label {
display: block;
font-family: var(--esup-font-mono);
font-size: 0.656rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 0.375rem;
}
.esup-input {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid var(--esup-line);
border-radius: var(--esup-radius-lg);
padding: 0.75rem 1rem;
font-family: var(--esup-font-sans);
font-size: 0.875rem;
color: #fff;
transition: all 0.2s ease;
}
.esup-input::placeholder { color: rgba(255,255,255,0.30); }
.esup-input:focus {
outline: none;
border-color: rgba(30,198,232,0.60);
background: rgba(255,255,255,0.06);
box-shadow: 0 0 0 2px rgba(30,198,232,0.20);
}
/* =====================================================================
MARQUEE — faixa cinética
===================================================================== */
.esup-marquee {
position: relative;
padding: 1.5rem 0;
border-top: 1px solid var(--esup-line-cyan);
border-bottom: 1px solid var(--esup-line-cyan);
background: rgba(4,27,61,0.40);
overflow: hidden;
}
.esup-marquee__track {
display: flex;
gap: 3rem;
padding: 0 1.5rem;
white-space: nowrap;
width: max-content;
animation: esup-marquee 35s linear infinite;
}
.esup-marquee__item {
display: inline-flex;
align-items: center;
gap: 1rem;
font-family: var(--esup-font-sans);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.80);
}
.esup-marquee__item span { color: var(--esup-cyan); }
/* =====================================================================
ANIMAÇÕES
===================================================================== */
@keyframes esup-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes esup-slow-zoom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes esup-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.anim-slow-zoom { animation: esup-slow-zoom 14s ease-in-out infinite; }
.anim-fade-up { animation: esup-fade-up 0.8s ease both; }
::selection { background: var(--esup-cyan); color: var(--esup-navy-deep); }
@media (prefers-reduced-motion: reduce) {
.esup-marquee__track, .anim-slow-zoom, .anim-fade-up { animation: none; }
}