/* ========================================================= RADIO ESCOLAR - ULTRA-MODERN (Neon Futurista + Animaciones Fluidas) - Glassmorphism + Aurora Gradients + Neon Effects + Microinteractions - Compatible con tu index.html y app.js actuales ========================================================= */ /* ========================= Tokens ========================= */ :root { /* Brand Colors */ --brand-1: #4f46e5; /* indigo */ --brand-2: #7c3aed; /* violet */ --brand-3: #22c55e; /* green */ --neon-pink: #ff2a6d; /* pink neon */ --neon-blue: #00d1ff; /* blue neon */ --neon-purple: #b100ff; /* purple neon */ /* Base Colors */ --text: #0f172a; --muted: #64748b; --bg: #f7f8ff; --surface: rgba(255, 255, 255, 0.68); --surface-solid: #ffffff; --border: rgba(15, 23, 42, 0.10); /* Glass Effects */ --glass: rgba(255, 255, 255, 0.55); --glass-strong: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.35); /* Shadows */ --shadow-1: 0 10px 30px rgba(2, 6, 23, 0.08); --shadow-2: 0 18px 50px rgba(2, 6, 23, 0.12); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.55); --shadow-neon: 0 0 12px rgba(255, 255, 255, 0.3); /* Radius */ --r-sm: 12px; --r-md: 18px; --r-xl: 26px; --r-pill: 999px; /* Spacing */ --header-h: 72px; --container: 1180px; /* Motion */ --ease: cubic-bezier(.2, .8, .2, 1); --speed: 220ms; --speed-slow: 400ms; /* Focus */ --focus: 0 0 0 3px rgba(79, 70, 229, 0.28); /* Gradients */ --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2)); --grad-soft: linear-gradient(135deg, rgba(79,70,229,.14), rgba(124,58,237,.12)); --grad-neon: linear-gradient(135deg, var(--neon-pink), var(--neon-blue), var(--neon-purple)); } /* Dark mode via .dark on */ .dark { --text: #eaf0ff; --muted: rgba(226, 232, 240, 0.72); --bg: #070b1a; --surface: rgba(15, 23, 42, 0.58); --surface-solid: #0b1226; --border: rgba(226, 232, 240, 0.12); --glass: rgba(15, 23, 42, 0.48); --glass-strong: rgba(15, 23, 42, 0.62); --glass-border: rgba(255, 255, 255, 0.10); --shadow-1: 0 12px 34px rgba(0, 0, 0, 0.35); --shadow-2: 0 22px 70px rgba(0, 0, 0, 0.45); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); --focus: 0 0 0 3px rgba(124, 58, 237, 0.28); --grad-soft: linear-gradient(135deg, rgba(79,70,229,.22), rgba(124,58,237,.18)); } /* Optional: if system prefers dark and user hasn't chosen */ @media (prefers-color-scheme: dark) { :root:not(.dark) { --text: #eaf0ff; --muted: rgba(226, 232, 240, 0.72); --bg: #070b1a; --surface: rgba(15, 23, 42, 0.58); --surface-solid: #0b1226; --border: rgba(226, 232, 240, 0.12); --glass: rgba(15, 23, 42, 0.48); --glass-strong: rgba(15, 23, 42, 0.62); --glass-border: rgba(255, 255, 255, 0.10); --shadow-1: 0 12px 34px rgba(0, 0, 0, 0.35); --shadow-2: 0 22px 70px rgba(0, 0, 0, 0.45); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); --focus: 0 0 0 3px rgba(124, 58, 237, 0.28); --grad-soft: linear-gradient(135deg, rgba(79,70,229,.22), rgba(124,58,237,.18)); } } /* ========================= Reset + Base ========================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding-top: var(--header-h); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial; line-height: 1.55; color: var(--text); background: var(--bg); overflow-x: hidden; } /* Aurora + Neon Background */ body::before, body::after { content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none; filter: blur(40px); opacity: 0.65; transform: translateZ(0); } body::before { background: radial-gradient(circle at 15% 15%, rgba(79,70,229,.35), transparent 45%), radial-gradient(circle at 85% 25%, rgba(124,58,237,.28), transparent 42%), radial-gradient(circle at 45% 85%, rgba(34,197,94,.18), transparent 46%); } body::after { z-index: -1; opacity: 0.16; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), transparent 60%); } /* Neon Glow */ @keyframes neon-pulse { 0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); } 50% { box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); } 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0.3); } } .neon-glow { animation: neon-pulse 2s ease-in-out infinite; } /* Typography */ h1, h2, h3 { line-height: 1.12; } a { color: inherit; text-decoration: none; } a:hover { color: color-mix(in srgb, var(--brand-1) 75%, var(--text)); } img { max-width: 100%; display: block; } /* Focus */ :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 10px; } /* ========================= Utilities ========================= */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.1rem; } .hidden { display: none !important; } .muted { color: var(--muted); } .small { font-size: 0.92rem; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: 0.75rem; left: -999px; z-index: 9999; padding: 0.6rem 0.85rem; border-radius: var(--r-sm); background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-1); } .skip-link:focus { left: 0.75rem; } /* ========================= Header (Floating Capsule) ========================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 50; display: flex; align-items: center; } .site-header::before { content: ""; position: absolute; inset: 10px 12px; border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1), var(--shadow-inset); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .header-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: flex; align-items: center; gap: 0.75rem; min-width: 200px; } .brand-logo { width: 40px; height: 40px; filter: drop-shadow(0 8px 18px rgba(79, 70, 229, 0.18)); } .brand-title { margin: 0; font-weight: 900; letter-spacing: -0.2px; } .main-nav { flex: 1; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; } .nav-list a { padding: 0.52rem 0.78rem; border-radius: var(--r-pill); border: 1px solid transparent; color: color-mix(in srgb, var(--text) 86%, transparent); transition: background var(--speed) var(--ease), transform var(--speed) var(--ease), border-color var(--speed) var(--ease); } .nav-list a:hover { background: color-mix(in srgb, var(--glass-strong) 65%, transparent); border-color: color-mix(in srgb, var(--brand-1) 30%, var(--border)); transform: translateY(-1px); color: var(--text); } /* ========================= Buttons / Icon Buttons ========================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.82rem 1.15rem; border-radius: var(--r-pill); font-weight: 800; letter-spacing: 0.1px; border: 1px solid transparent; cursor: pointer; transition: transform var(--speed) var(--ease), filter var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease); will-change: transform; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { color: #fff; background: var(--grad); box-shadow: 0 14px 40px rgba(79,70,229,.22); } .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 18px 54px rgba(79,70,229,.30); } .btn-outline { background: var(--glass-strong); border-color: color-mix(in srgb, var(--brand-1) 28%, var(--border)); color: var(--text); box-shadow: var(--shadow-1); } .btn-outline:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand-2) 30%, var(--border)); } .icon-btn { width: 46px; height: 46px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--brand-1) 18%, var(--border)); background: var(--glass-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-1), var(--shadow-inset); transition: transform var(--speed) var(--ease), filter var(--speed) var(--ease), border-color var(--speed) var(--ease); } .icon-btn:hover { transform: translateY(-1px); filter: brightness(1.04); border-color: color-mix(in srgb, var(--brand-2) 24%, var(--border)); } .icon-btn:active { transform: translateY(1px) scale(0.99); } .icon-btn-primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 16px 50px rgba(79,70,229,.24); } .icon-btn-primary:hover { filter: brightness(1.04); } .icon { width: 22px; height: 22px; } /* ========================= Sections / Layout ========================= */ .section { padding: 3.25rem 0; } .section-alt { position: relative; padding: 3.25rem 0; } .section-alt::before { content: ""; position: absolute; inset: 0; background: var(--grad-soft); opacity: 0.75; z-index: -1; } .section-title { margin: 0 0 1.6rem 0; font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 950; letter-spacing: -0.6px; text-align: center; } .grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } /* ========================= Hero ========================= */ .hero { padding-top: 2.4rem; } .hero-inner { max-width: 920px; margin: 0 auto; text-align: center; } .hero-title { margin: 0 0 0.85rem 0; font-size: clamp(2.2rem, 3.7vw, 3.35rem); font-weight: 1000; letter-spacing: -1px; } .hero-subtitle { margin: 0 auto 1.6rem auto; max-width: 60ch; font-size: 1.08rem; color: var(--muted); } /* ========================= Cards (Glass + Neon) ========================= */ .card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-xl); box-shadow: var(--shadow-1), var(--shadow-inset); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2), var(--shadow-inset); border-color: color-mix(in srgb, var(--brand-1) 18%, var(--glass-border)); } .card-body { padding: 1.05rem 1.1rem; } .card-title { margin: 0.25rem 0 0.2rem 0; font-size: 1.08rem; font-weight: 900; letter-spacing: -0.2px; } .card-text { margin: 0.55rem 0 0.9rem 0; color: var(--muted); } /* Programación */ .program-card { padding: 1.05rem 1.1rem; } .program-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } /* ========================= Player ========================= */ .hero-card { margin: 1.25rem auto; max-width: 760px; padding: 1.25rem; position: relative; } .hero-card::before { content: ""; position: absolute; inset: -1px; border-radius: calc(var(--r-xl) + 2px); background: linear-gradient(135deg, rgba(79,70,229,.30), rgba(124,58,237,.22), rgba(34,197,94,.18)); z-index: -1; filter: blur(18px); opacity: 0.45; } .live-box { background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.30); border-radius: var(--r-xl); padding: 1rem; text-align: left; box-shadow: var(--shadow-inset); } .dark .live-box { background: rgba(15,23,42,.40); border-color: rgba(255,255,255,.10); } .live-label { margin: 0; font-weight: 850; color: color-mix(in srgb, var(--text) 85%, transparent); } .live-now { margin: 0.2rem 0 0 0; font-weight: 1000; font-size: 1.22rem; letter-spacing: -0.3px; } .player-controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; } .range { width: 100%; accent-color: var(--brand-1); height: 6px; } .live-meta { margin-top: 0.95rem; display: flex; justify-content: center; gap: 0.55rem; align-items: center; } .pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.28rem 0.62rem; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--brand-1) 22%, var(--border)); background: rgba(255,255,255,.35); font-size: 0.82rem; font-weight: 900; } .dark .pill { background: rgba(15,23,42,.40); } .pill-live { border-color: color-mix(in srgb, var(--brand-3) 35%, var(--border)); color: var(--brand-3); } /* ========================= Tabs (Modern Chips) ========================= */ .tabs { display: inline-flex; gap: 0.4rem; padding: 0.35rem; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1), var(--shadow-inset); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .tab-button { appearance: none; border: 1px solid transparent; background: transparent; padding: 0.62rem 0.95rem; border-radius: var(--r-pill); font-weight: 900; cursor: pointer; transition: background var(--speed) var(--ease), transform var(--speed) var(--ease), border-color var(--speed) var(--ease); color: color-mix(in srgb, var(--text) 85%, transparent); } .tab-button:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); } .dark .tab-button:hover { background: rgba(15,23,42,.35); } .tab-button.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 12px 34px rgba(79,70,229,.22); } /* ========================= Forms (App-like) ========================= */ .form-card { max-width: 680px; margin: 0 auto; padding: 1.35rem; } .form-field { margin-bottom: 1rem; text-align: left; } .label { display: block; font-size: 0.95rem; font-weight: 900; margin-bottom: 0.4rem; letter-spacing: -0.1px; } .input { width: 100%; padding: 0.85rem 0.95rem; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--brand-1) 12%, var(--border)); background: rgba(255,255,255,.42); color: var(--text); box-shadow: var(--shadow-inset); transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease), background var(--speed) var(--ease); } .dark .input { background: rgba(15,23,42,.42); } .input:focus-visible { outline: none; box-shadow: var(--focus); border-color: color-mix(in srgb, var(--brand-2) 25%, var(--border)); } .form-status { margin-top: 0.75rem; font-weight: 850; } /* ========================= Footer ========================= */ .site-footer { margin-top: 2.5rem; padding: 2.2rem 0 1.35rem 0; position: relative; } .site-footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(79,70,229,.10), rgba(124,58,237,.08)); opacity: 0.8; z-index: -1; } .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .footer-brand { display: flex; align-items: center; gap: 0.65rem; } .footer-logo { width: 34px; height: 34px; filter: drop-shadow(0 10px 22px rgba(79, 70, 229, 0.20)); } .footer-title { font-weight: 900; } .footer-nav { margin-top: 1rem; display: flex; justify-content: center; gap: 0.55rem; flex-wrap: wrap; } .footer-nav a { padding: 0.52rem 0.8rem; border-radius: var(--r-pill); border: 1px solid transparent; background: rgba(255,255,255,.22); } .dark .footer-nav a { background: rgba(15,23,42,.30); } .footer-nav a:hover { border-color: color-mix(in srgb, var(--brand-1) 28%, var(--border)); transform: translateY(-1px); } /* ========================= Responsive ========================= */ @media (min-width: 720px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .nav-list { justify-content: flex-start; } .brand { min-width: auto; } } @media (max-width: 640px) { body { padding-top: 84px; } .site-header::before { inset: 10px 10px; } .header-inner { flex-wrap: wrap; padding: 0.2rem 0; height: auto; } .main-nav { order: 3; width: 100%; } .nav-list { justify-content: center; } .player-controls { gap: 0.55rem; } .icon-btn { width: 44px; height: 44px; } } /* ========================= Reduce Motion ========================= */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }