/** * Luvia Child – kolory motywu (jasny / ciemny) * * Przełącznik „Zgaś światło” ustawia na klasę: luvia-light-off. * Zmienne poniżej zmieniają się automatycznie – używaj ich w swoim CSS * albo dodaj do dowolnego elementu klasę: * * luvia-theme – dowolny blok (tło, tekst, obramowanie) * luvia-theme-header – header z menu (wymusza kolory na całym headerze i nawigacji) * * W Elementorze: sekcja/widget → Zaawansowane → atrybut CSS → Classes. */ /* ========================================================================== Tryb JASNY (domyślny) ========================================================================== */ :root { --luvia-theme-bg: #F5F1EF; --luvia-theme-bg-elevated: #FDFDFC; --luvia-theme-text: #5c4a3a; --luvia-theme-text-muted: #6b5b4d; --luvia-theme-border: #e5e0d8; --luvia-theme-border-strong: #c4b8a8; --luvia-theme-accent: #a67c52; --luvia-theme-accent-text: #fff; } /* ========================================================================== Tryb CIEMNY (html.luvia-light-off) ========================================================================== */ html.luvia-light-off { --luvia-theme-bg: #1e1c1a; --luvia-theme-bg-elevated: #252320; --luvia-theme-text: #f0ede8; --luvia-theme-text-muted: #9a9690; --luvia-theme-border: #3d3a36; --luvia-theme-border-strong: #55524d; --luvia-theme-accent: #c9a962; --luvia-theme-accent-text: #1e1c1a; } /* Tło całej witryny – zawsze kolor motywu (kremowy / ciemny przy „Zgaś światło”) */ body { background-color: var(--luvia-theme-bg) !important; } /* ========================================================================== Klasa „luvia-theme” – dodaj do elementu, żeby brał kolory z motywu ========================================================================== */ .luvia-theme { background-color: var(--luvia-theme-bg); color: var(--luvia-theme-text); border-color: var(--luvia-theme-border); } /* Wnętrze (tekst drugoplanowy, linki) */ .luvia-theme .luvia-theme-muted, .luvia-theme p:not(.elementor-inline-editing) { color: var(--luvia-theme-text-muted); } .luvia-theme a:not(.elementor-button):not(.luvia-theme-accent) { color: var(--luvia-theme-accent); } /* Opcjonalnie: „karta” – tło wyniesione (np. blok w sekcji) */ .luvia-theme-elevated { background-color: var(--luvia-theme-bg-elevated); color: var(--luvia-theme-text); border-color: var(--luvia-theme-border); } /* Nagłówki wewnątrz .luvia-theme dziedziczą kolor tekstu */ .luvia-theme h1, .luvia-theme h2, .luvia-theme h3, .luvia-theme h4, .luvia-theme h5, .luvia-theme h6 { color: var(--luvia-theme-text); } /* ========================================================================== Klasa „luvia-theme-header” – dodaj do SEKCJI headera (z menu) Wymusza kolory motywu na headerze, logo, linkach menu i rozwijanych listach. ========================================================================== */ .luvia-theme-header { background-color: var(--luvia-theme-bg) !important; color: var(--luvia-theme-text); border-color: var(--luvia-theme-border); } /* Logo / tytuł w headerze */ .luvia-theme-header a.elementor-logo-link, .luvia-theme-header .site-title a, .luvia-theme-header .elementor-heading-title, .luvia-theme-header h1, .luvia-theme-header h2, .luvia-theme-header h3 { color: var(--luvia-theme-text) !important; } .luvia-theme-header a.elementor-logo-link:hover, .luvia-theme-header .site-title a:hover { color: var(--luvia-theme-accent) !important; } /* Elementor Nav Menu – linki w menu */ .luvia-theme-header .elementor-nav-menu a, .luvia-theme-header .elementor-item, .luvia-theme-header .elementor-nav-menu .menu-item a { color: var(--luvia-theme-text) !important; } .luvia-theme-header .elementor-nav-menu a:hover, .luvia-theme-header .elementor-item:hover, .luvia-theme-header .elementor-nav-menu .menu-item a:hover { color: var(--luvia-theme-accent) !important; } .luvia-theme-header .elementor-nav-menu a.elementor-item-active { color: var(--luvia-theme-accent) !important; } /* Rozwijane menu (submenu / dropdown) */ .luvia-theme-header .elementor-nav-menu .sub-menu, .luvia-theme-header .elementor-nav-menu .dropdown-menu, .luvia-theme-header .sub-menu { background-color: var(--luvia-theme-bg-elevated) !important; border-color: var(--luvia-theme-border) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); } html.luvia-light-off .luvia-theme-header .elementor-nav-menu .sub-menu, html.luvia-light-off .luvia-theme-header .elementor-nav-menu .dropdown-menu { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } .luvia-theme-header .elementor-nav-menu .sub-menu a, .luvia-theme-header .elementor-nav-menu .sub-menu .elementor-item, .luvia-theme-header .elementor-nav-menu .sub-menu .menu-item a { color: var(--luvia-theme-text) !important; } .luvia-theme-header .elementor-nav-menu .sub-menu a:hover { color: var(--luvia-theme-accent) !important; } /* Ikona hamburgera (menu mobilne) */ .luvia-theme-header .elementor-menu-toggle, .luvia-theme-header .elementor-menu-toggle span { background-color: var(--luvia-theme-text) !important; } .luvia-theme-header .elementor-menu-toggle:hover span { background-color: var(--luvia-theme-accent) !important; } /* Pełne menu mobilne (drawer) po kliknięciu hamburgera */ .luvia-theme-header .elementor-nav-menu--dropdown .elementor-nav-menu__container { background-color: var(--luvia-theme-bg-elevated) !important; border-color: var(--luvia-theme-border); } .luvia-theme-header .elementor-nav-menu--dropdown .elementor-nav-menu__container .elementor-item { color: var(--luvia-theme-text) !important; } /* Ogólne menu (np. widget Nawigacja / zwykłe menu WP) */ .luvia-theme-header nav a, .luvia-theme-header .menu a, .luvia-theme-header .wp-block-navigation__container a { color: var(--luvia-theme-text) !important; } .luvia-theme-header nav a:hover, .luvia-theme-header .menu a:hover { color: var(--luvia-theme-accent) !important; }