.elementor-kit-5{--e-global-color-primary:#242943;--e-global-color-secondary:#AC112B;--e-global-color-text:#2F2F2F;--e-global-color-accent:#82091E;--e-global-color-9b143e1:#FDECEF;--e-global-color-b4dec5d:#2429431F;--e-global-color-115e22e:#000000;--e-global-color-89f27c1:#FFFFFF;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:20px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;--e-global-typography-ad36ed2-font-family:"Montserrat";--e-global-typography-ad36ed2-font-size:90px;--e-global-typography-ad36ed2-font-weight:800;--e-global-typography-62b14a9-font-family:"Montserrat";--e-global-typography-62b14a9-font-size:48px;--e-global-typography-62b14a9-font-weight:700;--e-global-typography-c6616f0-font-family:"Montserrat";--e-global-typography-c6616f0-font-size:16px;--e-global-typography-c6616f0-font-weight:600;--e-global-typography-c6616f0-text-transform:uppercase;color:var( --e-global-color-115e22e );font-family:var( --e-global-typography-text-font-family ), Tahoma;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-secondary );font-weight:800;text-decoration:none;}.elementor-kit-5 a:hover{color:var( --e-global-color-accent );}.elementor-kit-5 h1{font-size:2.7rem;font-weight:800;}.elementor-kit-5 h2{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Tahoma;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-5 h3{color:#5F6782;font-family:var( --e-global-typography-secondary-font-family ), Tahoma;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );text-transform:var( --e-global-typography-secondary-text-transform );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-5{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-5 h2{font-size:var( --e-global-typography-primary-font-size );}.elementor-kit-5 h3{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-5 h2{font-size:var( --e-global-typography-primary-font-size );}.elementor-kit-5 h3{font-size:var( --e-global-typography-secondary-font-size );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ========================================================== SZÜLÉSZET WEBOLDAL – VILÁGOS ÉS SÖTÉT TÉMA ========================================================== */ /* ========================================================== 1. ALAP SZÍNVÁLTOZÓK – VILÁGOS TÉMA Ezek az értékek érvényesülnek alapértelmezetten, amikor a elemen nincs szuleszet-dark-theme osztály. ========================================================== */ :root { /* Oldal általános színei */ --theme-bg: #f7f7f5; --theme-bg-secondary: #ffffff; --theme-surface: #ffffff; /* Szövegszínek */ --theme-text: #17202a; --theme-text-muted: #5f6974; /* Keretek és kiemelések */ --theme-border: rgba(172, 17, 43, 0.2); --theme-accent: #ac112b; /* Arculati alapszínek */ --szuleszet-red: #ac112b; --szuleszet-navy: #242943; --szuleszet-white: #ffffff; } /* ========================================================== 2. SÖTÉT TÉMA SZÍNVÁLTOZÓI Amikor a elem megkapja a szuleszet-dark-theme osztályt, ezek az értékek felülírják a világos téma változóit. ========================================================== */ html.szuleszet-dark-theme { --theme-bg: #05090f; --theme-bg-secondary: #0b1520; --theme-surface: #111d29; --theme-text: #ffffff; --theme-text-muted: #c4cbd3; --theme-border: rgba(255, 255, 255, 0.18); --theme-accent: #ac112b; } /* ========================================================== 3. OLDAL ALAPMEGJELENÉSE ========================================================== */ html, body { background-color: var(--theme-bg); } body { color: var(--theme-text); transition: none !important; } /* Általános, témához igazodó szekció */ .theme-section { background-color: var(--theme-bg); color: var(--theme-text); transition: none !important; } /* Kártyákhoz, panelekhez és egyéb felületekhez */ .theme-surface { background-color: var(--theme-surface); color: var(--theme-text); border-color: var(--theme-border); transition: none !important; } /* Halványabb, másodlagos szöveg */ .theme-muted { color: var(--theme-text-muted); } /* ========================================================== 4. LOGÓK VÁLTÁSA Világos témában: - szuleszet-logo-light látható - szuleszet-logo-dark rejtett Sötét témában: - szuleszet-logo-light rejtett - szuleszet-logo-dark látható ========================================================== */ .szuleszet-logo-light { display: block !important; } .szuleszet-logo-dark { display: none !important; } html.szuleszet-dark-theme .szuleszet-logo-light { display: none !important; } html.szuleszet-dark-theme .szuleszet-logo-dark { display: block !important; } /* ========================================================== 5. HEADER MŰVELETI TERÜLET A kapcsoló és az esetleges további fejlécgombok elrendezése. ========================================================== */ .header-actions, .szuleszet-theme-switcher { display: flex; align-items: center; gap: 0.9rem; } /* ========================================================== 6. TÉMAKAPCSOLÓ – KÜLSŐ GOMB ========================================================== */ .szuleszet-theme-toggle { position: relative; width: 74px; height: 44px; padding: 0; border: 1px solid var(--theme-border); border-radius: 999px; box-sizing: border-box; appearance: none; background: linear-gradient( 135deg, rgba(36, 41, 67, 0.1), rgba(172, 17, 43, 0.1) ); cursor: pointer; box-shadow: none; transition: background 0.08s ease, border-color 0.08s ease; } /* Elementor vagy más globális stílus ne mozgassa a gombot */ .szuleszet-theme-toggle:hover, .szuleszet-theme-toggle:active { transform: none; box-shadow: none; } /* Billentyűzetes navigáció fókuszjelzése */ .szuleszet-theme-toggle:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 4px; } /* ========================================================== 7. TÉMAKAPCSOLÓ – MOZGÓ KÖR A kapcsoló mérete 74 × 44 px. A kör mérete 32 × 32 px. Bal oldali pozíció: 5 px Jobb oldali pozíció: 5 + 32 px Világos témában a kör jobb oldalon van. Sötét témában a kör bal oldalon van. ========================================================== */ .szuleszet-theme-toggle__square { position: absolute; z-index: 1; top: 5px; left: 5px; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient( 135deg, var(--szuleszet-red), var(--szuleszet-navy) ); box-shadow: 0 10px 22px rgba(36, 41, 67, 0.24); /* Világos téma: jobb oldal */ transition: transform 0.12s ease; transform: translateX(32px); } /* Sötét téma: bal oldal */ html.szuleszet-dark-theme .szuleszet-theme-toggle__square { transform: translateX(0); } /* ========================================================== 8. TÉMAKAPCSOLÓ – IKONOK Az ikonokat tartalmazó réteg ugyanarra a két darab 32 × 32 pixeles területre van osztva, amelyek között a mozgó kör közlekedik. Emiatt az SVG ikon mindig pontosan a kör közepén lesz. ========================================================== */ .szuleszet-theme-toggle__icons { position: absolute; z-index: 2; top: 5px; left: 5px; width: 64px; height: 32px; display: grid; grid-template-columns: repeat(2, 32px); align-items: center; justify-items: center; padding: 0; pointer-events: none; } /* Mindkét ikon saját 32 × 32 pixeles mezőt kap */ .szuleszet-theme-toggle__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; line-height: 0; color: var(--theme-text-muted); } /* Hold és nap SVG közös megjelenése */ .szuleszet-theme-toggle__icon svg { display: block; width: 16px; height: 16px; margin: 0; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: color 0.08s ease; } /* ========================================================== 9. IKONOK SZÍNE – VILÁGOS TÉMA Világos témában a nap aktív, ezért fehér. A hold halványabb színt kap. ========================================================== */ .szuleszet-theme-toggle__moon { color: var(--theme-text-muted); } .szuleszet-theme-toggle__sun { color: var(--szuleszet-white); } /* ========================================================== 10. IKONOK SZÍNE – SÖTÉT TÉMA Sötét témában a hold aktív, ezért fehér. A nap halványabb színt kap. ========================================================== */ html.szuleszet-dark-theme .szuleszet-theme-toggle__moon { color: var(--szuleszet-white); } html.szuleszet-dark-theme .szuleszet-theme-toggle__sun { color: var(--theme-text-muted); } /* ========================================================== 11. BETÖLTÉSKORI ANIMÁCIÓ KIKAPCSOLÁSA Megakadályozza, hogy az oldal betöltésekor a témaelemek láthatóan átcsússzanak egyik állapotból a másikba. A szuleszet-theme-ready osztályt a betöltést kezelő JavaScript adja hozzá a elemhez. ========================================================== */ html:not(.szuleszet-theme-ready) *, html:not(.szuleszet-theme-ready) *::before, html:not(.szuleszet-theme-ready) *::after { transition: none !important; } /* ========================================================== 12. OLDALHÁTTÉR – SÖTÉT TÉMA Többrétegű radiális és lineáris átmenetes háttér. ========================================================== */ html.szuleszet-dark-theme .szuleszet-background { background: radial-gradient( circle at 12% 12%, rgba(172, 17, 43, 0.28), transparent 22% ), radial-gradient( circle at 82% 10%, rgba(54, 64, 118, 0.32), transparent 24% ), radial-gradient( circle at 18% 68%, rgba(172, 17, 43, 0.12), transparent 30% ), radial-gradient( circle at 85% 78%, rgba(36, 41, 67, 0.32), transparent 28% ), linear-gradient( 135deg, rgba(9, 15, 24, 0.96), rgba(15, 25, 38, 0.96) ), linear-gradient( 180deg, #05090f 0%, #0b1520 55%, #080d15 100% ) !important; } /* ========================================================== 13. HEADER – SÖTÉT TÉMA ========================================================== */ html.szuleszet-dark-theme .szuleszet-header { background: linear-gradient( 135deg, rgba(7, 12, 20, 0.94), rgba(15, 24, 38, 0.92) ) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(172, 17, 43, 0.12) !important; /*backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;*/ } /* ========================================================== 14. CÍMEK – SÖTÉT TÉMA ========================================================== */ /* H1 és H2 főcímek */ html.szuleszet-dark-theme .elementor-widget-heading h1.elementor-heading-title, html.szuleszet-dark-theme .elementor-widget-heading h2.elementor-heading-title { color: #f2f4f8 !important; } /* H3 alcímek – arculati piros */ html.szuleszet-dark-theme .elementor-widget-heading h3.elementor-heading-title { color: var(--szuleszet-red) !important; } /* H3 alcímek – arculati piros */ html.szuleszet-dark-theme .elementor-widget-text-editor h4 { color: #ffffff !important; } /* Ha a heading widgetben p elem szerepel */ html.szuleszet-dark-theme .elementor-widget-heading p.elementor-heading-title { color: #c9ced8 !important; } /* Szöveg – fehér */ html.szuleszet-dark-theme .szuleszet-navigate { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important; } /* SVG / nyíl – piros */ html.szuleszet-dark-theme .szuleszet-navigate svg, html.szuleszet-dark-theme .szuleszet-navigate svg path { fill: #ac112b !important; stroke: #ac112b !important; color: #ac112b !important; } /* ========================================================== 15. ÁLTALÁNOS SZÖVEGEK – SÖTÉT TÉMA Az azonos színt használó elemek egy közös szabályba kerültek. ========================================================== */ html.szuleszet-dark-theme .elementor-widget-text-editor, html.szuleszet-dark-theme .elementor-widget-text-editor p, html.szuleszet-dark-theme .elementor-widget-text-editor span, html.szuleszet-dark-theme .elementor-widget-text-editor li, html.szuleszet-dark-theme .elementor-widget-text-editor strong, html.szuleszet-dark-theme .msdl-bc-current, html.szuleszet-dark-theme .v-text, html.szuleszet-dark-theme .elementor-widget-theme-post-excerpt { color: #cfd5df !important; } /* Kiemelt MS Downloads cím */ html.szuleszet-dark-theme .msdl-fv-title { color: var(--szuleszet-red) !important; } /* MS Downloads link */ html.szuleszet-dark-theme .msdl-ajax-link { color: #f2f4f8 !important; } /* ========================================================== 16. KONTÉNEREK – SÖTÉT TÉMA ========================================================== */ html.szuleszet-dark-theme .szuleszet-container { background: radial-gradient( circle at 0% 0%, rgba(172, 17, 43, 0.28), transparent 55% ), rgba(17, 29, 41, 0.94) !important; border: 1px solid rgba(210, 215, 225, 0.18) !important; } /* Kattintható konténer sötét témában */ .szuleszet-container-anchor { cursor: pointer; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* ========================================================== KATTINTHATÓ KONTÉNER – VILÁGOS TÉMA HOVER A már beállított háttérszínt nem változtatja meg ========================================================== */ html:not(.szuleszet-dark-theme) .szuleszet-container-anchor:hover { transform: translateY(-4px); border-color: rgba(172, 17, 43, 0.42) !important; box-shadow: 0 14px 30px rgba(36, 41, 67, 0.14), 0 0 0 1px rgba(172, 17, 43, 0.06); } /* Billentyűzetes fókusz */ html:not(.szuleszet-dark-theme) .szuleszet-container-anchor:focus-visible { transform: translateY(-4px); border-color: rgba(172, 17, 43, 0.52) !important; outline: 2px solid rgba(172, 17, 43, 0.4); outline-offset: 3px; } html.szuleszet-dark-theme .szuleszet-container-anchor { background: radial-gradient( circle at 100% 0%, rgba(54, 64, 118, 0.34), transparent 58% ), rgba(20, 31, 48, 0.96) !important; border: 1px solid rgba(94, 108, 170, 0.32) !important; } /* Anchor hover állapota */ html.szuleszet-dark-theme .szuleszet-container-anchor:hover { background: radial-gradient( circle at 100% 0%, rgba(71, 84, 155, 0.46), transparent 60% ), rgba(24, 37, 57, 0.98) !important; border-color: rgba(121, 136, 205, 0.52) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(72, 84, 150, 0.12); transform: translateY(-3px); } html.szuleszet-dark-theme .szuleszet-useful-links{ background: radial-gradient( circle at 100% 0%, rgba(172, 17, 43, 0.32), transparent 58% ), rgba(20, 32, 48, 0.98) !important; } /* ========================================================== 17. HEADER MENÜ – SÖTÉT TÉMA ========================================================== */ /* Menüpontok alapállapota */ html.szuleszet-dark-theme .szuleszet-header .elementor-nav-menu .elementor-item { color: #c9ced8 !important; } /* Menüpont hover és billentyűzetes fókusz */ html.szuleszet-dark-theme .szuleszet-header .elementor-nav-menu .elementor-item:hover, html.szuleszet-dark-theme .szuleszet-header .elementor-nav-menu .elementor-item:focus-visible { color: #ffffff !important; } /* ========================================================== SINGLE POST OLDAL – SÖTÉT HÁTTÉR ========================================================== */ /* A teljes Elementor single post sablon háttere */ html.szuleszet-dark-theme .elementor-location-single { background: radial-gradient( circle at 12% 12%, rgba(172, 17, 43, 0.28), transparent 22% ), radial-gradient( circle at 82% 10%, rgba(54, 64, 118, 0.32), transparent 24% ), linear-gradient( 180deg, #05090f 0%, #0b1520 55%, #080d15 100% ) !important; color: #cfd5df !important; } /* A bejegyzés tartalmának szövege */ html.szuleszet-dark-theme .elementor-location-single .elementor-widget-theme-post-content, html.szuleszet-dark-theme .elementor-location-single .elementor-widget-theme-post-content p, html.szuleszet-dark-theme .elementor-location-single .elementor-widget-theme-post-content li, html.szuleszet-dark-theme .elementor-location-single .elementor-widget-theme-post-content strong, html.szuleszet-dark-theme .elementor-location-single .elementor-widget-theme-post-content em { color: #cfd5df !important; } /* A bejegyzés tartalmában található címsorok */ html.szuleszet-dark-theme .elementor-location-single .elementor-widget-theme-post-content h1, html.szuleszet-dark-theme .elementor-location-single .elementor-widget-theme-post-content h2, html.szuleszet-dark-theme .elementor-location-single html.szuleszet-dark-theme .elementor-location-single .elementor-widget-theme-post-content h4 { color: #f2f4f8 !important; } /* ========================================= OFF-CANVAS POZICIONÁLÁS Nem tolja ki vízszintesen az oldalt ========================================= */ /* ========================================= VILÁGOS TÉMA HÁTTÉR Csak az off-canvas panelen ========================================= */ html:not(.szuleszet-dark-theme) .szuleszet-off-canvas { background: radial-gradient( circle at 100% 0%, rgba(172, 17, 43, 0.14), transparent 56% ), radial-gradient( circle at 0% 100%, rgba(36, 41, 67, 0.08), transparent 62% ), rgba(255, 255, 255, 0.98) !important; } /* ========================================= SÖTÉT TÉMA HÁTTÉR Csak az off-canvas panelen ========================================= */ html.szuleszet-dark-theme .szuleszet-off-canvas { background: radial-gradient( circle at 100% 0%, rgba(172, 17, 43, 0.3), transparent 56% ), radial-gradient( circle at 0% 100%, rgba(71, 84, 155, 0.32), transparent 62% ), rgba(11, 21, 32, 0.99) !important; }/* End custom CSS */