/* DreamEvent Theme System ======================== Light mode (default): paleta cálida y confiable Dark mode: paleta oscura existente Controlado por: data-theme="dark" en Persistido en: localStorage['de-theme'] */ /* ─── PALETA NUEVA – MODO CLARO (default) ─────────────────────────────────── */ :root, [data-theme="light"] { /* Fondos */ --de-bg: #F8F7FF; --de-surface: #FFFFFF; --de-surface-2: #F0EEFF; --de-surface-3: #E7E4F5; /* Texto */ --de-text: #17172A; --de-text-muted: #5F6075; --de-text-strong: #17172A; /* Marca / Acento */ --de-primary: #8B5CF6; --de-primary-hover: #7C3AED; --de-primary-soft: #EDE9FE; --de-blue: #60A5FA; --de-blue-soft: #DBEAFE; --de-pink: #EC4899; --de-pink-soft: #FCE7F3; --de-green: #22C55E; --de-green-soft: #DCFCE7; /* Bordes */ --de-border: #E7E4F5; --de-border-strong: #C4BBF0; /* Sombras */ --de-shadow: 0 8px 24px rgba(139, 92, 246, 0.10); --de-shadow-hover: 0 14px 32px rgba(139, 92, 246, 0.18); /* Navbar */ --de-navbar-bg: rgba(255,255,255,0.94); --de-navbar-border: 1px solid #E7E4F5; --de-navbar-link: #17172A; --de-navbar-link-hover: #8B5CF6; /* Footer */ --de-footer-bg: #F0EEFF; --de-footer-border: 1px solid #E7E4F5; --de-footer-text: #5F6075; /* Botones */ --de-btn-primary-bg: #8B5CF6; --de-btn-primary-hover: #7C3AED; --de-btn-primary-text: #FFFFFF; --de-btn-outline-border: #8B5CF6; --de-btn-outline-text: #8B5CF6; --de-btn-outline-bg: #FFFFFF; --de-btn-outline-hover-bg:#EDE9FE; /* Cards / Paneles */ --de-card-bg: #FFFFFF; --de-card-border: #E7E4F5; --de-card-shadow: 0 4px 20px rgba(139, 92, 246, 0.08); /* Hero / Banner */ --de-hero-overlay: linear-gradient(118deg, rgba(248,247,255,0.92), rgba(237,233,254,0.80), rgba(96,165,250,0.12)); /* Badges / Chips */ --de-chip-bg: #EDE9FE; --de-chip-text: #6D28D9; --de-chip-border: #C4BBF0; /* Accordion / Items */ --de-accordion-bg: #FFFFFF; --de-accordion-border: 1px solid #E7E4F5; /* Toggler icono hamburguesa */ --de-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2823,23,42,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ─── MODO OSCURO ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { --de-bg: #0a0c14; --de-surface: #151a2b; --de-surface-2: #1a2035; --de-surface-3: #202840; --de-text: #f8fbff; --de-text-muted: #c7cfdf; --de-text-strong: #f8fbff; --de-primary: #8b5cf6; --de-primary-hover: #a78bfa; --de-primary-soft: rgba(139,92,246,0.20); --de-blue: #60a5fa; --de-blue-soft: rgba(96,165,250,0.18); --de-pink: #EC4899; --de-pink-soft: rgba(236,72,153,0.18); --de-green: #22C55E; --de-green-soft: rgba(34,197,94,0.18); --de-border: rgba(255,255,255,0.10); --de-border-strong: rgba(255,255,255,0.22); --de-shadow: 0 10px 28px rgba(4,8,20,0.40); --de-shadow-hover: 0 16px 36px rgba(4,8,20,0.56); --de-navbar-bg: rgba(10,12,20,0.92); --de-navbar-border: 1px solid rgba(255,255,255,0.12); --de-navbar-link: #f8fbff; --de-navbar-link-hover: #a78bfa; --de-footer-bg: #0d1020; --de-footer-border: 1px solid rgba(255,255,255,0.10); --de-footer-text: #c7cfdf; --de-btn-primary-bg: linear-gradient(90deg,#8b5cf6 0%,#06d6a0 100%); --de-btn-primary-hover: linear-gradient(90deg,#7c3aed 0%,#059669 100%); --de-btn-primary-text: #fff; --de-btn-outline-border: rgba(255,255,255,0.45); --de-btn-outline-text: #fff; --de-btn-outline-bg: rgba(255,255,255,0.08); --de-btn-outline-hover-bg:rgba(255,255,255,0.14); --de-card-bg: rgba(24,29,46,0.80); --de-card-border: rgba(157,174,214,0.20); --de-card-shadow: 0 12px 28px rgba(3,7,18,0.32); --de-hero-overlay: linear-gradient(118deg, rgba(10,12,20,0.90), rgba(20,24,38,0.76), rgba(130,137,160,0.22)); --de-chip-bg: rgba(139,92,246,0.22); --de-chip-text: #c4b5fd; --de-chip-border: rgba(139,92,246,0.36); --de-accordion-bg: rgba(16,24,46,0.80); --de-accordion-border: 1px solid rgba(139,92,246,0.30); --de-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ─── BODY ─────────────────────────────────────────────────────────────────── */ body { background-color: var(--de-bg) !important; background-image: none !important; color: var(--de-text) !important; transition: background-color 0.3s ease, color 0.3s ease; } [data-theme="dark"] body { background: radial-gradient(circle at 14% -10%, #26283a 0%, var(--de-bg) 46%, #090b12 100%) !important; } /* ─── NAVBAR ───────────────────────────────────────────────────────────────── */ .de-navbar { background: var(--de-navbar-bg) !important; border-bottom: var(--de-navbar-border) !important; backdrop-filter: blur(10px); } .de-brand, .de-brand:hover { color: var(--de-text) !important; } .de-nav-link, .navbar-nav .nav-link, .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--de-navbar-link) !important; font-weight: 600; } .de-nav-link:hover { color: var(--de-navbar-link-hover) !important; } .navbar-toggler { border-color: var(--de-border-strong) !important; } .navbar-toggler-icon { background-image: var(--de-toggler-icon) !important; } /* ─── BOTONES ──────────────────────────────────────────────────────────────── */ .btn-mint { background: var(--de-btn-primary-bg) !important; color: var(--de-btn-primary-text) !important; border: none !important; border-radius: 12px; font-weight: 700; padding: 0.65rem 1.4rem; transition: all 0.22s ease; box-shadow: 0 4px 14px rgba(139,92,246,0.25); } .btn-mint:hover { background: var(--de-btn-primary-hover) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139,92,246,0.35); } .btn-mint-outline { background: var(--de-btn-outline-bg) !important; color: var(--de-btn-outline-text) !important; border: 1px solid var(--de-btn-outline-border) !important; border-radius: 12px; font-weight: 700; padding: 0.65rem 1.4rem; transition: all 0.22s ease; } .btn-mint-outline:hover { background: var(--de-btn-outline-hover-bg) !important; transform: translateY(-2px); } /* ─── CARDS / PANELES ──────────────────────────────────────────────────────── */ .de-card, .hero-box, .pitch-box, .cta-box { background: var(--de-card-bg) !important; border: 1px solid var(--de-card-border) !important; box-shadow: var(--de-card-shadow) !important; border-radius: 16px; } /* ─── TEXTOS GLOBALES ──────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .section-title, .page-title { color: var(--de-text-strong) !important; } p, li, .de-muted, .page-subtitle, .section-desc { color: var(--de-text-muted) !important; } /* ─── HERO ─────────────────────────────────────────────────────────────────── */ .page-hero::before { background: var(--de-hero-overlay) !important; } /* ─── ACCORDION ────────────────────────────────────────────────────────────── */ .accordion .card { background: var(--de-accordion-bg) !important; border: var(--de-accordion-border) !important; border-radius: 12px; margin-bottom: 0.7rem; } .accordion .btn-link { color: var(--de-text) !important; font-weight: 700; } .accordion .btn-link:hover { color: var(--de-primary) !important; } /* ─── FOOTER ───────────────────────────────────────────────────────────────── */ footer { background: var(--de-footer-bg) !important; border-top: var(--de-footer-border) !important; color: var(--de-footer-text) !important; } footer .de-nav-link, footer a.de-nav-link { color: var(--de-footer-text) !important; } footer .de-nav-link:hover, footer a.de-nav-link:hover { color: var(--de-primary) !important; } /* ─── CHIPS / BADGES ───────────────────────────────────────────────────────── */ .seo-chip, .kicker { background: var(--de-chip-bg) !important; color: var(--de-chip-text) !important; border-color: var(--de-chip-border) !important; } /* ─── SECCIONES ────────────────────────────────────────────────────────────── */ .de-section + .de-section { border-top: 1px solid var(--de-border) !important; } /* ─── OVERLAY PANEL ────────────────────────────────────────────────────────── */ .de-overlay-panel, .page-subtitle { background: var(--de-surface) !important; border: 1px solid var(--de-border) !important; border-radius: 14px; } /* Light mode: page-subtitle sin fondo oscuro */ [data-theme="light"] .page-subtitle, :root .page-subtitle { background: rgba(248,247,255,0.85) !important; border: 1px solid #E7E4F5 !important; color: var(--de-text-muted) !important; } /* ─── TOGGLE BUTTON ────────────────────────────────────────────────────────── */ #de-theme-toggle { background: none; border: 1px solid var(--de-border); border-radius: 999px; color: var(--de-text); cursor: pointer; font-size: 1.1rem; line-height: 1; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, color 0.2s; margin-left: 0.5rem; flex-shrink: 0; } #de-theme-toggle:hover { background: var(--de-primary-soft); border-color: var(--de-primary); color: var(--de-primary); } /* ─── MISC. INPUTS / SELECTS en modo claro ─────────────────────────────────── */ [data-theme="light"] select, [data-theme="light"] input, [data-theme="light"] textarea { background: #fff !important; color: var(--de-text) !important; border-color: var(--de-border) !important; } /* ─── LOGO modo claro: no invertir ─────────────────────────────────────────── */ [data-theme="light"] .de-brand img { filter: none !important; } /* ─── LIGHT MODE: .text-white en fondos claros debe ser texto oscuro ────────── */ /* Problema: Bootstrap .text-white {color:#fff !important} tiene especificidad (0,1,0). Mis selectores de elemento como h1,p tienen (0,0,1) y pierden aunque ambos sean !important. Solución: usar [data-theme="light"] .text-white que tiene (0,2,0) > (0,1,0). */ [data-theme="light"] .text-white, :root .text-white { color: var(--de-text) !important; /* #17172A — legible en fondos claros */ } /* Etiquetas de imagen y labels de grilla */ [data-theme="light"] .de-bg-grid-label, :root .de-bg-grid-label { color: var(--de-text-muted) !important; } /* .home-category-title está SOBRE imagen con overlay oscuro — mantener blanco */ [data-theme="light"] .home-category-title, :root .home-category-title { color: #ffffff !important; } /* Botones btn-mint y btn-mint-outline: texto siempre blanco */ [data-theme="light"] .btn-mint, :root .btn-mint { color: #ffffff !important; } /* ─── HERO SECCIÓN: ajustar overlay para legibilidad en modo claro ──────────── */ /* El hero tiene foto de fondo + overlay. En light mode dejamos el overlay */ /* más tenue para que la imagen sea visible pero el texto dark es más legible */ [data-theme="light"] .page-hero, [data-theme="light"] .hero { /* Mantener el fondo de imagen pero el texto ahora será oscuro */ } /* dentro del hero-box (tarjeta blanca en el hero) el texto oscuro es correcto */ [data-theme="light"] .hero-box h1, [data-theme="light"] .hero-box h2, [data-theme="light"] .hero-box h3, [data-theme="light"] .hero-box h4, [data-theme="light"] .hero-box h5, [data-theme="light"] .hero-box p { color: var(--de-text) !important; } /* kicker pills */ [data-theme="light"] .kicker.text-white, :root .kicker.text-white { color: var(--de-chip-text) !important; }