/* ============================================================ W-ADMIN.COM — Light Theme v1 Activa con [data-theme="light"] en Complementa style.css (oscuro) + cinematic.css ============================================================ */ /* ── Core palette (dark → light) ─────────────────────────── */ [data-theme="light"] { --bg-deep: #f6f7fb; --bg-surface: #ffffff; --bg-card: rgba(20, 22, 48, 0.02); --bg-card-hover: rgba(20, 22, 48, 0.05); --border-subtle: rgba(20, 22, 48, 0.08); --border-glow: rgba(108, 60, 224, 0.4); --text-primary: #15172b; --text-secondary: #4a4d6e; --text-muted: #7e81a0; --white: #15172b; --accent: #d6197a; --cyan: #0b7d99; --shadow-card: 0 8px 30px rgba(20, 22, 48, 0.08); --shadow-glow: 0 0 60px rgba(108, 60, 224, 0.14); } /* ── Base ────────────────────────────────────────────────── */ [data-theme="light"] body::before { background-image: linear-gradient(rgba(108, 60, 224, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 60, 224, 0.04) 1px, transparent 1px); } [data-theme="light"] ::-webkit-scrollbar-track { background: #eef0f8; } [data-theme="light"] .orb { opacity: 0.06; } /* ── Navigation ──────────────────────────────────────────── */ [data-theme="light"] .nav { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(20, 22, 48, 0.06); box-shadow: 0 4px 30px rgba(20, 22, 48, 0.05); } [data-theme="light"] .nav-links a { color: #4a4d6e; } [data-theme="light"] .nav-links a:hover, [data-theme="light"] .nav-links a.active { color: #15172b; } [data-theme="light"] .nav-toggle span { background: #15172b; } @media (max-width: 768px) { [data-theme="light"] .nav-links { background: rgba(255, 255, 255, 0.98); border-left: 1px solid rgba(20, 22, 48, 0.06); } } /* ── Hero (stays cinematic-dark over the video) ──────────── */ [data-theme="light"] .hero h1 { color: #f6f7fb; } [data-theme="light"] .hero-subtitle { color: rgba(240, 240, 250, 0.82); } [data-theme="light"] .hero-subtitle .cyan-text { color: #67e8f9; } [data-theme="light"] .hero-subtitle .pink-text { color: #fb7185; } [data-theme="light"] .hero-badge { color: #22d3ee; } [data-theme="light"] .hero-badge .dot { background: #22d3ee; box-shadow: 0 0 10px #22d3ee; } [data-theme="light"] .hero .btn-glass { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: #ffffff; } [data-theme="light"] .hero .btn-glass:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(103, 232, 249, 0.5); color: #ffffff; } /* ── Buttons (body context, light bg) ────────────────────── */ [data-theme="light"] .btn-glass { background: transparent; border: 1px solid rgba(20, 22, 48, 0.2); color: #15172b; } [data-theme="light"] .btn-glass:hover { background: rgba(20, 22, 48, 0.05); border-color: var(--border-glow); color: #15172b; } /* ── Components with hardcoded dark rgba ─────────────────── */ [data-theme="light"] .skill-tag { background: rgba(20, 22, 48, 0.03); border-color: rgba(20, 22, 48, 0.1); color: #4a4d6e; } [data-theme="light"] .skill-tag:hover { background: rgba(108, 60, 224, 0.12); color: #6d28d9; } [data-theme="light"] .tech-pill { background: rgba(20, 22, 48, 0.03); border-color: rgba(20, 22, 48, 0.1); color: #4a4d6e; } [data-theme="light"] .tech-pill:hover { color: #6d28d9; } [data-theme="light"] .form-group input, [data-theme="light"] .form-group textarea, [data-theme="light"] .form-group select { background: rgba(20, 22, 48, 0.03); border-color: rgba(20, 22, 48, 0.12); color: #15172b; } [data-theme="light"] .form-group input:focus, [data-theme="light"] .form-group textarea:focus, [data-theme="light"] .form-group select:focus { background: #ffffff; box-shadow: 0 0 0 4px rgba(108, 60, 224, 0.1); } [data-theme="light"] .security-notice { background: rgba(255, 255, 255, 0.95); border-color: rgba(20, 22, 48, 0.1); color: #7e81a0; } [data-theme="light"] .andy-section { background: linear-gradient(180deg, #f6f7fb 0%, rgba(108, 60, 224, 0.05) 30%, rgba(11, 125, 153, 0.04) 70%, #f6f7fb 100%); } [data-theme="light"] .andy-text .quote { background: rgba(108, 60, 224, 0.06); color: #4a4d6e; } [data-theme="light"] .cta-banner { background: radial-gradient(ellipse at center, rgba(108, 60, 224, 0.08) 0%, rgba(11, 125, 153, 0.04) 50%, transparent 70%); } [data-theme="light"] .marquee { background: rgba(20, 22, 48, 0.02); } /* ── Theme toggle button ─────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); color: var(--text-secondary); cursor: pointer; font-size: 1.05rem; line-height: 1; transition: all 0.3s ease; margin-left: 6px; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--border-glow); color: var(--cyan); transform: translateY(-1px); } .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: inline; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle { background: rgba(20, 22, 48, 0.04); border-color: rgba(20, 22, 48, 0.12); color: #4a4d6e; } /* ── Legacy article inline :root override (artículos viejos) ── Los 39 artículos con :root inline definen variables propias (--bg, --white, --card-bg, --border, --accent-*). En modo claro estas necesitan anularse con mayor especificidad (:root + attr). */ [data-theme="light"]:root { --bg: #f6f7fb; --white: #15172b; --text-secondary: #4a4d6e; --cyan: #0b7d99; --card-bg: #ffffff; --border: rgba(20, 22, 48, 0.1); --accent-green: #0a8f5c; --accent-red: #c2185b; --accent-yellow: #b8860b; }