/**
* edu.css — Jornada Telecom · Modo Educação · Design System v1.0
* Importar esta folha em qualquer página educacional/de marca.
* Uso:
*/
/* ── FONTES ──
* Carregadas via no de cada página (não usar @import aqui — bloqueia a renderização).
* Adicionar antes do link deste CSS:
*
*
*
*/
/* ── TOKENS ── */
:root {
/* Fundos */
--edu-bg: #070d1a;
--edu-surface: #0d1628;
--edu-surface-2: #0f1d35;
--edu-surface-3: #132240;
/* Bordas */
--edu-border: #1a2a4a;
--edu-border-lo: rgba(28, 48, 88, 0.5);
/* Accent — Gradiente Azul → Cyan (do logo) */
--edu-cyan: #00c6ff;
--edu-cyan-lo: rgba(0, 198, 255, 0.10);
--edu-cyan-mid: rgba(0, 198, 255, 0.25);
--edu-blue: #2149E6;
--edu-blue-mid: #324ba0;
--edu-blue-deep: #1a3a80;
/* Texto */
--edu-text: #e2eaf8;
--edu-text-soft: #7a9bbf;
--edu-dim: #5a7090;
/* Status */
--edu-green: #00e676;
--edu-green-lo: rgba(0, 230, 118, 0.10);
--edu-gold: #f5a623;
--edu-gold-lo: rgba(245, 166, 35, 0.10);
--edu-red: #e74c3c;
--edu-red-lo: rgba(231, 76, 60, 0.10);
/* Tipografia */
--edu-font-display: 'Orbitron', sans-serif;
--edu-font-body: 'Nunito', sans-serif;
--edu-font-mono: 'JetBrains Mono', monospace;
/* Espaçamento */
--edu-sp-xs: 4px;
--edu-sp-sm: 8px;
--edu-sp-md: 16px;
--edu-sp-lg: 24px;
--edu-sp-xl: 32px;
--edu-sp-2xl: 48px;
--edu-sp-3xl: 64px;
--edu-sp-4xl: 80px;
/* Border radius */
--edu-r-sm: 6px;
--edu-r-md: 10px;
--edu-r-lg: 14px;
--edu-r-xl: 16px;
--edu-r-2xl: 22px;
--edu-r-pill: 999px;
/* Sombras */
--edu-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.20);
--edu-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30);
--edu-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40);
--edu-shadow-cyan: 0 8px 24px rgba(0, 198, 255, 0.15);
--edu-shadow-blue: 0 8px 24px rgba(33, 73, 230, 0.25);
/* Transições */
--edu-t-fast: 0.15s ease;
--edu-t-base: 0.25s ease;
--edu-t-spring: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ── RESET BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.edu {
background: var(--edu-bg);
color: var(--edu-text);
font-family: var(--edu-font-body);
min-height: 100vh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ── FUNDO: GRADE PONTILHADA ── */
body.edu::before {
content: '';
position: fixed;
inset: 0;
background-image: radial-gradient(circle, rgba(0,198,255,0.05) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
z-index: 0;
}
/* ── LAYOUT ── */
.edu-page { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 0 20px; }
.edu-page-wide { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.edu-page-full { position: relative; z-index: 1; width: 100%; padding: 0 24px; }
/* ── GRIDS ── */
.edu-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.edu-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.edu-grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
@media (max-width: 640px) {
.edu-grid-2,
.edu-grid-3,
.edu-grid-4 { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════
COMPONENTES
═══════════════════════════════════════════════ */
/* ── BACK BAR ── */
.edu-back-bar {
position: relative;
z-index: 10;
border-bottom: 1px solid var(--edu-border);
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: rgba(7,13,26,0.92);
backdrop-filter: blur(10px);
}
.edu-back-link {
font-family: var(--edu-font-mono);
font-size: 0.65rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--edu-dim);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: color var(--edu-t-base);
}
.edu-back-link:hover { color: var(--edu-cyan); }
.edu-brand-mono {
font-family: var(--edu-font-display);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--edu-dim);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: color var(--edu-t-base);
}
.edu-brand-mono img { height: 22px; width: auto; opacity: 0.7; }
.edu-brand-mono:hover { color: var(--edu-cyan); }
.edu-brand-mono:hover img { opacity: 1; }
/* ── BADGE ── */
.edu-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--edu-font-mono);
font-size: 0.65rem;
color: var(--edu-cyan);
border: 1px solid rgba(0,198,255,0.3);
background: var(--edu-cyan-lo);
padding: 5px 16px;
border-radius: var(--edu-r-pill);
letter-spacing: 2px;
text-transform: uppercase;
}
/* ── TAG ── */
.edu-tag {
display: inline-block;
font-family: var(--edu-font-mono);
font-size: 0.62rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--edu-dim);
border: 1px solid var(--edu-border);
background: var(--edu-surface);
padding: 4px 12px;
border-radius: var(--edu-r-sm);
}
.edu-tag.accent {
color: var(--edu-cyan);
border-color: rgba(0,198,255,0.3);
background: var(--edu-cyan-lo);
}
.edu-tag.gold {
color: var(--edu-gold);
border-color: rgba(245,166,35,0.3);
background: var(--edu-gold-lo);
}
.edu-tag.green {
color: var(--edu-green);
border-color: rgba(0,230,118,0.3);
background: var(--edu-green-lo);
}
/* ── SECTION TITLE ── */
.edu-section-title {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--edu-font-mono);
font-size: 0.68rem;
font-weight: 600;
color: var(--edu-cyan);
text-transform: uppercase;
letter-spacing: 3px;
margin: 56px 0 24px;
}
.edu-section-title::after {
content: '';
flex: 1;
height: 1px;
background: var(--edu-border);
}
.edu-section-title:first-child { margin-top: 48px; }
/* ── BOTÕES ── */
.edu-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: var(--edu-r-md);
font-family: var(--edu-font-body);
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
border: none;
transition: all var(--edu-t-base);
letter-spacing: 0.3px;
white-space: nowrap;
font-style: normal;
}
.edu-btn-sm { padding: 10px 20px; font-size: 0.8rem; }
.edu-btn-lg { padding: 18px 36px; font-size: 1rem; }
.edu-btn-primary {
background: var(--edu-cyan);
color: var(--edu-bg);
}
.edu-btn-primary:hover {
opacity: 0.88;
transform: translateY(-2px);
box-shadow: var(--edu-shadow-cyan);
}
.edu-btn-outline {
background: transparent;
color: var(--edu-cyan);
border: 1.5px solid rgba(0,198,255,0.4);
}
.edu-btn-outline:hover {
background: var(--edu-cyan-lo);
border-color: var(--edu-cyan);
}
.edu-btn-ghost {
background: var(--edu-surface);
color: var(--edu-text);
border: 1px solid var(--edu-border);
}
.edu-btn-ghost:hover {
border-color: rgba(0,198,255,0.35);
background: var(--edu-surface-2);
}
.edu-btn-blue {
background: var(--edu-blue);
color: #fff;
box-shadow: var(--edu-shadow-blue);
}
.edu-btn-blue:hover {
background: var(--edu-blue-mid);
transform: translateY(-2px);
}
/* ── CARD BASE ── */
.edu-card {
background: var(--edu-surface);
border: 1px solid var(--edu-border);
border-radius: var(--edu-r-xl);
padding: var(--edu-sp-lg);
transition: border-color var(--edu-t-base), transform var(--edu-t-base), box-shadow var(--edu-t-base);
}
.edu-card:hover {
border-color: rgba(0,198,255,0.35);
transform: translateY(-3px);
box-shadow: var(--edu-shadow-md);
}
.edu-card-accent-left { border-left: 3px solid var(--edu-cyan); }
.edu-card-accent-top { border-top: 2px solid var(--edu-cyan); }
/* ── ICON BLOCK (ícone quadrado com gradiente) ── */
.edu-icon-block {
width: 44px;
height: 44px;
border-radius: var(--edu-r-md);
background: linear-gradient(135deg, var(--edu-blue-mid), var(--edu-blue-deep));
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: var(--edu-cyan);
flex-shrink: 0;
}
.edu-icon-block-sm {
width: 36px;
height: 36px;
font-size: 15px;
border-radius: var(--edu-r-md);
}
.edu-icon-block-lg {
width: 56px;
height: 56px;
font-size: 24px;
border-radius: var(--edu-r-lg);
}
/* ── CALLOUT ── */
.edu-callout {
display: flex;
gap: 12px;
align-items: flex-start;
border-radius: var(--edu-r-md);
padding: 14px 16px;
font-size: 0.83rem;
line-height: 1.65;
}
.edu-callout i { margin-top: 2px; flex-shrink: 0; }
.edu-callout strong { color: var(--edu-text); }
.edu-callout-info {
background: var(--edu-cyan-lo);
border: 1px solid rgba(0,198,255,0.2);
color: var(--edu-text-soft);
}
.edu-callout-info i { color: var(--edu-cyan); }
.edu-callout-warn {
background: var(--edu-gold-lo);
border: 1px solid rgba(245,166,35,0.25);
color: #c89840;
}
.edu-callout-warn i { color: var(--edu-gold); }
.edu-callout-success {
background: var(--edu-green-lo);
border: 1px solid rgba(0,230,118,0.2);
color: #3fbb7a;
}
.edu-callout-success i { color: var(--edu-green); }
/* ── SOCIAL BUTTON ── */
.edu-social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--edu-r-lg);
background: var(--edu-surface);
border: 1px solid var(--edu-border);
color: var(--edu-dim);
font-size: 18px;
text-decoration: none;
transition: all var(--edu-t-base);
}
.edu-social-btn:hover {
background: var(--edu-blue-mid);
border-color: var(--edu-cyan);
color: var(--edu-cyan);
transform: translateY(-3px);
box-shadow: var(--edu-shadow-cyan);
}
/* ── CHANNEL LINK ── */
.edu-channel-link {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: var(--edu-surface);
border: 1px solid var(--edu-border);
border-radius: var(--edu-r-xl);
text-decoration: none;
color: var(--edu-text);
transition: all var(--edu-t-base);
}
.edu-channel-link:hover {
background: var(--edu-surface-2);
border-color: rgba(0,198,255,0.35);
transform: translateX(4px);
}
.edu-channel-name { font-size: 0.9rem; font-weight: 700; margin-bottom: 2px; color: var(--edu-text); }
.edu-channel-handle {
font-family: var(--edu-font-mono);
font-size: 0.62rem;
color: var(--edu-dim);
letter-spacing: 0.5px;
}
/* ── FORM ── */
.edu-label {
display: block;
font-family: var(--edu-font-mono);
font-size: 0.62rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--edu-dim);
margin-bottom: 6px;
}
.edu-input {
width: 100%;
padding: 14px 16px;
font-size: 0.95rem;
background: var(--edu-surface-2);
color: var(--edu-text);
border: 1.5px solid var(--edu-border);
border-radius: var(--edu-r-md);
outline: none;
font-family: var(--edu-font-body);
transition: border-color var(--edu-t-base), background var(--edu-t-base);
}
.edu-input::placeholder { color: var(--edu-dim); }
.edu-input:focus {
border-color: var(--edu-cyan);
background: var(--edu-surface-3);
}
.edu-input.error { border-color: var(--edu-red); }
/* ── DIVIDER ── */
.edu-divider {
height: 1px;
background: var(--edu-border);
margin: var(--edu-sp-2xl) 0;
}
/* ── TEXTO UTILITÁRIOS ── */
.edu-text-cyan { color: var(--edu-cyan); }
.edu-text-gold { color: var(--edu-gold); }
.edu-text-green { color: var(--edu-green); }
.edu-text-dim { color: var(--edu-dim); }
.edu-text-soft { color: var(--edu-text-soft); }
.edu-text-center { text-align: center; }
/* ── FOOTER ── */
.edu-footer {
text-align: center;
padding: 28px 0 16px;
border-top: 1px solid var(--edu-border);
margin-top: 56px;
}
.edu-footer p {
font-family: var(--edu-font-mono);
font-size: 0.55rem;
color: var(--edu-dim);
letter-spacing: 2px;
text-transform: uppercase;
line-height: 2.2;
}
.edu-footer a { color: var(--edu-cyan); text-decoration: none; transition: opacity var(--edu-t-base); }
.edu-footer a:hover { opacity: 0.75; }
/* ═══════════════════════════════════════════════
ANIMAÇÕES
═══════════════════════════════════════════════ */
@keyframes edu-fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes edu-spin {
to { transform: rotate(360deg); }
}
@keyframes edu-pulse-glow {
0% { opacity: 0.6; transform: scale(0.95); }
100% { opacity: 0.9; transform: scale(1.05); }
}
@keyframes edu-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.edu-fade-up { animation: edu-fade-up 0.5s ease both; }
.edu-fade-up-1 { animation: edu-fade-up 0.5s 0.05s ease both; }
.edu-fade-up-2 { animation: edu-fade-up 0.5s 0.10s ease both; }
.edu-fade-up-3 { animation: edu-fade-up 0.5s 0.15s ease both; }
.edu-fade-up-4 { animation: edu-fade-up 0.5s 0.20s ease both; }
.edu-fade-up-5 { animation: edu-fade-up 0.5s 0.25s ease both; }
.edu-fade-up-6 { animation: edu-fade-up 0.5s 0.30s ease both; }