/* ========================================================= Dark Mode / Light Mode Support Uses data-theme="light" | data-theme="dark" on Base theme (dark) is defined in styles.css :root Light overrides below use [data-theme="light"] ========================================================= */ /* Theme Toggle Button */ .theme-toggle { position: relative; width: 44px; height: 44px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: all 0.3s ease; margin-left: 8px; flex-shrink: 0; } .theme-toggle:hover { background: rgba(236, 72, 153, 0.1); } .theme-toggle svg { width: 22px; height: 22px; transition: all 0.3s ease; } /* Dark mode (default): show sun icon (to switch to light) */ .theme-toggle .sun-icon { display: block; color: #fbbf24; } .theme-toggle .moon-icon { display: none; color: #ec4899; } /* Light mode: show moon icon (to switch to dark) */ [data-theme="light"] .theme-toggle .sun-icon { display: none; } [data-theme="light"] .theme-toggle .moon-icon { display: block; } /* ========================================================= LIGHT MODE: CSS Custom Properties Override This is the SINGLE SOURCE for all light-mode variables. ========================================================= */ [data-theme="light"] { --page-bg: #ffffff; --surface-1: #ffffff; --surface-2: #f3f4f6; --border-1: #e5e7eb; --text-1: #111827; --text-2: #374151; --text-3: #6b7280; --dark-bg: #f9fafb; --dark-card: #ffffff; --dark-border: #e5e7eb; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15); } /* ========================================================= LIGHT MODE: Component overrides ========================================================= */ /* Body */ [data-theme="light"] body { background-color: #ffffff; color: #111827; } /* ---- Navbar ---- */ [data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid #e5e7eb !important; backdrop-filter: blur(10px); } [data-theme="light"] .nav-link { color: #374151 !important; } [data-theme="light"] .nav-link:hover { color: #ec4899 !important; } [data-theme="light"] .logo, [data-theme="light"] .logo-text { color: #111827 !important; } [data-theme="light"] .mobile-menu-btn span { background: #111827 !important; } /* Mobile nav menu */ [data-theme="light"] .nav-menu { background: rgba(255, 255, 255, 0.98) !important; border-color: #e5e7eb !important; } [data-theme="light"] .nav-menu .nav-link { color: #111827 !important; } [data-theme="light"] .nav-menu li { border-bottom-color: #e5e7eb !important; } /* ---- Page Header (beursagenda, contact, livestream, product, winkelwagen) ---- */ [data-theme="light"] .page-header { background: linear-gradient(135deg, #fdf2f8 0%, #f9fafb 100%) !important; } /* ---- Hero sections (index, over-ons) ---- */ [data-theme="light"] .hero, [data-theme="light"] .page-hero { background: linear-gradient(135deg, #fdf2f8 0%, #f5f3ff 50%, #f9fafb 100%) !important; } [data-theme="light"] .hero-background { opacity: 0.4; } [data-theme="light"] .hero-badge { background: #ffffff !important; border-color: #e5e7eb !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } [data-theme="light"] .hero-stats { border-top-color: #e5e7eb !important; } [data-theme="light"] .stat-label { color: #6b7280 !important; } [data-theme="light"] .store-image { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important; } [data-theme="light"] .store-image:hover { box-shadow: 0 25px 80px rgba(0, 0, 0, 0.16) !important; } /* Social buttons in hero */ [data-theme="light"] .btn-social-hero { background: rgba(236, 72, 153, 0.06) !important; border-color: #e5e7eb !important; color: #374151 !important; } [data-theme="light"] .btn-social-hero:hover { background: rgba(236, 72, 153, 0.12) !important; color: #111827 !important; } /* ---- Section backgrounds ---- */ [data-theme="light"] .about-story, [data-theme="light"] .owner-section, [data-theme="light"] .services-section, [data-theme="light"] .events-section, [data-theme="light"] .streams-section, [data-theme="light"] .features-section, [data-theme="light"] .schedule-section, [data-theme="light"] section { background-color: #ffffff; } [data-theme="light"] .features { background-color: #f9fafb !important; } [data-theme="light"] .owner-section { background: #f9fafb !important; } [data-theme="light"] .services-section { background: #f9fafb !important; } /* ---- Cards ---- */ [data-theme="light"] .product-card, [data-theme="light"] .event-card, [data-theme="light"] .stream-card, [data-theme="light"] .feature-card, [data-theme="light"] .card, [data-theme="light"] .service-card, [data-theme="light"] .value-item, [data-theme="light"] .schedule-day, [data-theme="light"] .info-card { background: #ffffff !important; border-color: #e5e7eb !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } [data-theme="light"] .product-card:hover, [data-theme="light"] .event-card:hover, [data-theme="light"] .stream-card:hover, [data-theme="light"] .feature-card:hover, [data-theme="light"] .schedule-day:hover, [data-theme="light"] .service-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } /* Schedule day header */ [data-theme="light"] .day-header { background: #f3f4f6 !important; border-bottom-color: #e5e7eb !important; } [data-theme="light"] .schedule-platform { background: #f3f4f6 !important; color: #6b7280 !important; } /* ---- Text colors ---- */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6, [data-theme="light"] .hero-title, [data-theme="light"] .page-title, [data-theme="light"] .section-title, [data-theme="light"] .product-title, [data-theme="light"] .event-title, [data-theme="light"] .stream-title, [data-theme="light"] .event-name, [data-theme="light"] .day-name, [data-theme="light"] .schedule-title, [data-theme="light"] .feature-title, [data-theme="light"] .features-title, [data-theme="light"] .cta-box-title, [data-theme="light"] .info-title, [data-theme="light"] .form-title { color: #111827 !important; } [data-theme="light"] p, [data-theme="light"] .hero-description, [data-theme="light"] .page-description, [data-theme="light"] .section-description, [data-theme="light"] .product-description, [data-theme="light"] .event-description, [data-theme="light"] .feature-description, [data-theme="light"] .schedule-desc, [data-theme="light"] .intro-text, [data-theme="light"] .about-content p, [data-theme="light"] .owner-content p, [data-theme="light"] .detail-item, [data-theme="light"] .event-location, [data-theme="light"] .info-text, [data-theme="light"] .form-description, [data-theme="light"] .service-card p, [data-theme="light"] .value-item p { color: #4b5563 !important; } /* Labels / subtle text */ [data-theme="light"] label, [data-theme="light"] .owner-stat-label { color: #6b7280 !important; } /* ---- Forms and inputs ---- */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select, [data-theme="light"] .form-control { background-color: #ffffff !important; border-color: #d1d5db !important; color: #111827 !important; } [data-theme="light"] input:focus, [data-theme="light"] textarea:focus, [data-theme="light"] select:focus, [data-theme="light"] .form-control:focus { border-color: #ec4899 !important; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #9ca3af !important; } /* Contact form section */ [data-theme="light"] .contact-form-section { background: #f9fafb !important; } /* ---- Footer ---- */ [data-theme="light"] .footer { background: #f9fafb !important; border-top: 1px solid #e5e7eb !important; color: #4b5563 !important; } [data-theme="light"] .footer-logo { color: #111827 !important; } [data-theme="light"] .footer-title { color: #111827 !important; } [data-theme="light"] .footer-description, [data-theme="light"] .footer-links a, [data-theme="light"] .footer-links li, [data-theme="light"] .footer-bottom, [data-theme="light"] .footer-bottom p, [data-theme="light"] .footer-legal a { color: #4b5563 !important; } [data-theme="light"] .footer-bottom { border-top-color: #e5e7eb !important; } [data-theme="light"] .social-link { background: #f3f4f6 !important; border-color: #e5e7eb !important; } [data-theme="light"] .social-link svg { color: #4b5563 !important; } [data-theme="light"] .social-link:hover { background: #ec4899 !important; border-color: #ec4899 !important; } [data-theme="light"] .social-link:hover svg { color: #ffffff !important; } /* ---- Winkel/Shop page ---- */ [data-theme="light"] .page-winkel { background: #ffffff !important; } [data-theme="light"] .shop-hero { background: linear-gradient(135deg, rgba(236,72,153,0.08) 0%, rgba(168,85,247,0.06) 45%, #f9fafb 100%) !important; border-bottom-color: #e5e7eb !important; } [data-theme="light"] .trust-item { background: #ffffff !important; border-color: #e5e7eb !important; } [data-theme="light"] .trust-label { color: #4b5563 !important; } [data-theme="light"] .filter-panel, [data-theme="light"] .filter-group { background: #ffffff !important; border-color: #e5e7eb !important; } [data-theme="light"] .filter-title, [data-theme="light"] .filter-label { color: #111827 !important; } [data-theme="light"] .product-image { background: #f9fafb !important; } /* Shop sort/view controls */ [data-theme="light"] .shop-controls, [data-theme="light"] .sort-select, [data-theme="light"] .view-toggle { background: #ffffff !important; border-color: #e5e7eb !important; color: #111827 !important; } /* ---- Product page ---- */ [data-theme="light"] .product-header { background: linear-gradient(135deg, #fdf2f8 0%, #f9fafb 100%) !important; } [data-theme="light"] .product-detail-card { background: #ffffff !important; border-color: #e5e7eb !important; } /* ---- Cart sidebar ---- */ [data-theme="light"] .cart-sidebar, [data-theme="light"] .cart-panel { background-color: #ffffff !important; border-left: 1px solid #e5e7eb !important; } [data-theme="light"] .cart-item { border-bottom: 1px solid #e5e7eb !important; } [data-theme="light"] .cart-item-name, [data-theme="light"] .cart-item-title, [data-theme="light"] .cart-header, [data-theme="light"] .cart-header h3 { color: #111827 !important; } [data-theme="light"] .cart-item-price, [data-theme="light"] .cart-total, [data-theme="light"] .cart-total-price { color: #111827 !important; } [data-theme="light"] .cart-item-qty, [data-theme="light"] .cart-item-variant { color: #6b7280 !important; } [data-theme="light"] .cart-empty { color: #6b7280 !important; } [data-theme="light"] .cart-footer { border-top-color: #e5e7eb !important; background: #f9fafb !important; } /* ---- Winkelwagen page ---- */ [data-theme="light"] .cart-page-header, [data-theme="light"] .cart-page-header h2 { color: #111827 !important; } /* ---- Login / Register / Account pages ---- */ [data-theme="light"] .card { background: #ffffff !important; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ---- Buttons ---- */ .btn-primary { background-color: #ec4899 !important; color: white !important; } .btn-primary:hover { background-color: #db2777 !important; } [data-theme="light"] .btn-outline { border-color: #ec4899 !important; color: #ec4899 !important; } [data-theme="light"] .btn-outline:hover { background: #ec4899 !important; color: #ffffff !important; } .highlight { color: #ec4899 !important; } /* Price and numbers */ .price, .product-price, .stat-number { color: var(--text-1) !important; } /* Links */ a { color: #ec4899; } a:hover { color: #db2777; } /* ---- Badges ---- */ [data-theme="light"] .badge, [data-theme="light"] .tag, [data-theme="light"] .page-badge, [data-theme="light"] .section-badge { background-color: #f3f4f6; color: #111827; } /* ---- Lang selector ---- */ [data-theme="light"] .lang-mount, [data-theme="light"] .lang-mount select, [data-theme="light"] .lang-mount button { background: #f3f4f6 !important; color: #111827 !important; border-color: #e5e7eb !important; } /* ---- Tables ---- */ [data-theme="light"] table { background-color: #ffffff; color: #111827; } [data-theme="light"] thead { background-color: #f3f4f6; } [data-theme="light"] thead th { color: #111827 !important; } [data-theme="light"] tbody td { color: #4b5563 !important; border-bottom: 1px solid #e5e7eb !important; } [data-theme="light"] tbody tr:hover { background-color: #f9fafb; } /* ---- Modals ---- */ [data-theme="light"] .modal-content, [data-theme="light"] .modal { background-color: #ffffff !important; } /* ---- Admin dashboard ---- */ [data-theme="light"] .dashboard-card, [data-theme="light"] .stats-card, [data-theme="light"] .admin-card { background-color: #ffffff; border-color: #e5e7eb; } [data-theme="light"] .admin-sidebar, [data-theme="light"] .dashboard-sidebar { background-color: #f9fafb; border-right: 1px solid #e5e7eb; } [data-theme="light"] .admin-nav { background: rgba(255, 255, 255, 0.98) !important; border-bottom: 1px solid #e5e7eb !important; } /* ---- Alert states ---- */ .success, .alert-success { background-color: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); color: #22c55e; } .warning, .alert-warning { background-color: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.3); color: #eab308; } .error, .alert-error, .alert-danger { background-color: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #ef4444; } /* ---- About/Over Ons page images ---- */ [data-theme="light"] .about-image-main, [data-theme="light"] .about-image-small, [data-theme="light"] .owner-images, [data-theme="light"] .gallery-item { border-color: #e5e7eb !important; } /* ========================================================= DARK MODE: Scrollbar ========================================================= */ html:not([data-theme="light"]) ::-webkit-scrollbar { width: 10px; height: 10px; } html:not([data-theme="light"]) ::-webkit-scrollbar-track { background: #141414; } html:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 5px; } html:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: #333; } /* ========================================================= LIGHT MODE: Scrollbar ========================================================= */ [data-theme="light"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="light"] ::-webkit-scrollbar-track { background: #f3f4f6; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 5px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* Responsive */ @media (max-width: 768px) { .theme-toggle { width: 40px; height: 40px; margin-left: 4px; } .theme-toggle svg { width: 20px; height: 20px; } }