/* Theme Name: Hello Elementor Child - Trapezlemez Theme URI: https://www.trapezlemez-szendvicspanel.hu/ Description: Gyerektema a trapezlemez-szendvicspanel.hu projekthez. Itt el a skin-valto, a fejlec-kereso es minden egyedi CSS/JS. A szulotemat (Hello Elementor) frissiteni lehet anelkul, hogy barmi elveszne. Author: Metalucon / Novamira Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-child */ /* A sajat CSS ide kerul. A szulotema stilusai a functions.php-bol toltodnek be elotte. */ /* ------------------------------------------------------------------ MERET-TOKENEK (terkoz, lekerekites) Miert itt es nem Elementor Variables-ben: az Elementor Free a global-size-variable tipust Pro nelkul nem rendereli (a Variables_Service::load() kiszuri). A szin- es font-tokenek az Elementor kitben (ID 9) vannak, ezek itt ugyanugy var(--...)-kent hasznalhatok, pl. padding: var(--space-3). Skala a 2/B design rendszerbol: 8 / 16 / 32 / 64 / 96 px. ------------------------------------------------------------------ */ :root { --space-1: 8px; --space-2: 16px; --space-3: 32px; --space-4: 64px; --space-5: 96px; --radius-sm: 4px; /* gombok, mezok */ --radius-md: 10px; /* kartyak, panelek */ } /* ------------------------------------------------------------------ VILAGOS BOR - az Elementor Variables felulirasa A sotet ertekek az Elementor kitben vannak (post-9.css, :root). Miert nyer ez a blokk: a html[data-theme="light"] specificitasa (0,1,1) nagyobb, mint a :root-e (0,1,0), igy a betoltesi sorrendtol fuggetlenul ez ervenyesul. A data-theme attributumot a functions.php inline szkriptje es a skin.js allitja. Szandekosan NINCS felulirva: - accent (#C9A227) es cta-ink: az Ajanlatkeres gomb mindket borben arany (dontes 2026-09-25). - font-heading, font-body: bortol fuggetlenek. SZABALY: vilagos hatteren az arany csak KITOLTES lehet (gomb hattere, sotet szoveggel 8:1). Szovegkent 2,2:1 - nem AA. Arany szoveg/ikon/vekony vonal helyett itt accent-deep vagy link. Ertekek: 2/B = design rendszer; *javaslat = szarmaztatott ertek. ------------------------------------------------------------------ */ html[data-theme="light"] { --bg-base: #F1F4F8; /* 2/B */ --bg-surface: #FFFFFF; /* 2/B */ --bg-surface-alt: #E6EBF1; /* *javaslat */ --ink: #14202B; /* 2/B, 15:1 */ --ink-muted: #4A5868; /* *javaslat, 6,6:1 */ --line: #CBD3DC; /* *javaslat */ --metal: #5B6673; /* *javaslat, 5,3:1 - az ezust itt eltunne */ --accent-deep: #8A6A1F; /* 2/B, 4,6:1 */ --link: #1B4F8A; /* 2/B kek (becsles), 7,5:1 */ } /* ------------------------------------------------------------------ ALAPSTILUS - minden oldalra, a tokenekbol (bor-fuggetlen). A Hello alap stilusait (feher hatter, #333 szoveg, rozsaszin link) irja felul. Az Elementor-widgetek sajat beallitasai ezt feluliraik, ez csak a kiindulas. ------------------------------------------------------------------ */ html { color-scheme: dark; } /* bongeszo-vezerlok, gorgetosav sotetben */ html[data-theme="light"] { color-scheme: light; } body { background: var(--bg-base); color: var(--ink); font-family: var(--font-body), system-ui, sans-serif; font-size: 17px; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading), sans-serif; font-weight: 700; /* az Oswald csak 700-ban van betoltve */ line-height: 1.15; color: var(--ink); } /* A Barlow 400 es 600 van betoltve; 700-at ne kerjen a bongeszo, mert akkor mu-felkoveret rajzol. */ b, strong { font-weight: 600; } /* Szovegbeli linkek: link-szin (sotetben arany 8:1, vilagosban kek 7,5:1), alahuzva, hogy ne csak a szin jelezze (akadalymentesseg). 'body a' (0,0,2): erosebb a Hello 'a' szabalyanal, de gyengebb a fejlec osztalyos szabalyainal (.tl-menu a, .tl-cta). */ body a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; } body a:hover { color: var(--ink); } ::selection { background: var(--accent); color: var(--cta-ink); } /* BIZTONSAGI HALO: semmi ne szelesithesse az oldalt a kepernyonel szelesebbre (mobilon ettol csuszott el jobbra 2026-09-25). clip es NEM hidden: a hidden gorgetesi tarolot csinal, es az eltorne a ragados fejlecet; a clip nem. Ez halo, nem javitas - a kilogo elemet mindig a sajat helyen kell rendbe tenni. */ html { overflow-x: clip; } /* ------------------------------------------------------------------ KAPCSOLATI SOROK (tl-contact-row) - 2026-09-26 1) A 'body a' szabaly (link szin + alahuzas) minden linket egyforma szinure festene, igy a telefon es az e-mail osszefolyna. Itt a link a bekezdes sajat szinet orokli (telefon: --link, e-mail: --metal), alahuzas nelkul - az ikon jelzi, hogy kattinthato. 2) Az Elementor e-svg widget a fill-t currentColor-ra irja at, ami a vonalas (stroke) ikonokat tomor foltta tenne. A CSS fill felulirja az SVG attributumot. ------------------------------------------------------------------ */ .tl-contact-row a { color: inherit; text-decoration: none; white-space: nowrap; /* tl-contact: e-mail és telefonszám ne törjön szó közben; mobilon a betűméret csökken (clamp), hogy kiférjen */ } .tl-contact-row a:hover, .tl-contact-row a:focus-visible { text-decoration: underline; } .tl-contact-row svg { fill: none; } /* Kapcsolat-kartyak: az e-mail-cim egy sorban maradjon (a

is), ne torjon a .hu elott. */ .tl-link-mail, .tl-link-mail a { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } /* ------------------------------------------------------------------ FOOLDAL SZAMOK (tl-stat-num) - 2026-09-26 este A mertekegyseg (mm, m, %, m2) kisebb span-ben all a szam mogott, a szam es az egyseg kozott nem-tordelo szokoz (U+00A0). A nowrap azert kell, mert enelkul a 4 oszlopos kartyaban a "m2" uj sorba csuszott. White-space-t a V4 helyi stilusbol eldobja -> itt. ------------------------------------------------------------------ */ .tl-stat-num { white-space: nowrap; } /* a V4 a span class attributumat kiszuri, ezert a span-re celzunk */ .tl-stat-num span { font-size: .55em; letter-spacing: .02em; } /* ------------------------------------------------------------------ AJANLATKERES - 3 LEPES UTVONALKENT (tl-steps / tl-step / tl-step-num) Cel: az olvaso lassa, hogy a harom lepes EGYMAS UTAN jon, es a vegen ott a celja. Ezert: szamozott korok, kozottuk osszekoto vonal (asztalin vizszintes, mobilon fuggoleges), a 3. kor arany kitoltesu (a cel). Animacio: a steps.js egyszer, gorgeteskor sorban "vegigfuttatja" (kor -> vonal -> kor -> vonal -> kor). JS nelkul / csokkentett mozgasnal a vegallapot latszik, animacio nelkul. Az osszekoto vonal geometriaja: a lepes szelessege 100%, a racs-res --gap (a helyi stilusban 32px). Az elozo kor kozepe a lepes bal szeletol -(50% + gap) tavolsagra van, a sajate +50%-ra. ------------------------------------------------------------------ */ .tl-steps { --d: 56px; --gap: 32px; position: relative; } /* a regi vekony felso vonal es felso padding helyett a korok vezetnek */ .tl-steps .tl-step { position: relative; border-top: 0; padding-top: 0; } .tl-step-num { width: var(--d); height: var(--d); flex: none; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; padding: 0; border-radius: 50%; border: 1px solid var(--accent-deep); background: var(--bg-surface); font-family: var(--font-heading), sans-serif; font-weight: 700; font-size: 24px; line-height: 1; color: var(--accent); position: relative; z-index: 1; } /* a cel: a 3. lepes kore arany kitoltesu (vilagos borben is szabalyos: kitoltes) */ .tl-steps .tl-step:last-child .tl-step-num { background: var(--accent); border-color: var(--accent); color: var(--cta-ink); box-shadow: 0 0 0 6px rgba(201,162,39,.12), 0 0 28px rgba(201,162,39,.22); } /* osszekoto vonal: ::before = halvany sin, ::after = arany kitoltes */ .tl-steps .tl-step:not(:first-child)::before, .tl-steps .tl-step:not(:first-child)::after { content: ""; position: absolute; top: calc(var(--d) / 2); height: 2px; margin-top: -1px; left: calc(-50% - var(--gap) + var(--d) / 2 + 12px); width: calc(100% + var(--gap) - var(--d) - 24px); border-radius: 2px; } .tl-steps .tl-step:not(:first-child)::before { background: var(--line); } .tl-steps .tl-step:not(:first-child)::after { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); transform-origin: left center; } /* vilagos borben vekony arany vonal nem lehet (2,2:1) -> accent-deep */ html[data-theme="light"] .tl-steps .tl-step:not(:first-child)::after { background: var(--accent-deep); } html[data-theme="light"] .tl-step-num { color: var(--accent-deep); } html[data-theme="light"] .tl-steps .tl-step:last-child .tl-step-num { color: var(--cta-ink); } /* mobil: egymas alatt, a vonal fuggolegesen koti ossze a koroket */ @media (max-width: 767px) { .tl-steps .tl-step:not(:first-child) { padding-top: 64px; } .tl-steps .tl-step:not(:first-child)::before, .tl-steps .tl-step:not(:first-child)::after { left: 50%; width: 2px; margin: 0 0 0 -1px; top: 12px; height: 40px; } .tl-steps .tl-step:not(:first-child)::after { background: linear-gradient(180deg, var(--accent-deep), var(--accent)); transform-origin: center top; } } /* --- animacio: kiindulo allapot (csak ha a steps.js "felhuzta") --- */ .tl-steps.is-armed .tl-step-num, .tl-steps.is-armed .tl-step:last-child .tl-step-num { background: var(--bg-surface); border-color: var(--line); color: var(--ink-muted); box-shadow: none; } .tl-steps.is-armed .tl-step > :not(.tl-step-num) { opacity: 0; transform: translateY(10px); } .tl-steps.is-armed .tl-step::after { transform: scaleX(0); } @media (max-width: 767px) { .tl-steps.is-armed .tl-step::after { transform: scaleY(0); } } /* --- animacio: lefutas (a transition csak itt el, igy a felhuzas azonnali) --- */ .tl-steps.is-in .tl-step-num { transition: background-color .5s ease, border-color .5s ease, color .5s ease, box-shadow .6s ease; } .tl-steps.is-in .tl-step > :not(.tl-step-num) { transition: opacity .6s ease, transform .6s ease; } .tl-steps.is-in .tl-step::after { transition: transform .5s ease-in-out; } .tl-steps.is-in .tl-step:nth-child(1) .tl-step-num { transition-delay: 0s; } .tl-steps.is-in .tl-step:nth-child(1) > :not(.tl-step-num) { transition-delay: .1s; } .tl-steps.is-in .tl-step:nth-child(2)::after { transition-delay: .4s; } .tl-steps.is-in .tl-step:nth-child(2) .tl-step-num { transition-delay: .85s; } .tl-steps.is-in .tl-step:nth-child(2) > :not(.tl-step-num) { transition-delay: .9s; } .tl-steps.is-in .tl-step:nth-child(3)::after { transition-delay: 1.3s; } .tl-steps.is-in .tl-step:nth-child(3) .tl-step-num { transition-delay: 1.75s; } .tl-steps.is-in .tl-step:nth-child(3) > :not(.tl-step-num) { transition-delay: 1.8s; } /* a celba ereskor egyetlen halk arany "lelegzes" a 3. koron */ .tl-steps.is-in .tl-step:last-child .tl-step-num { animation: tl-step-pulse 1.4s ease-out 2.3s 1; } @keyframes tl-step-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,162,39,.45), 0 0 28px rgba(201,162,39,.22); } 100% { box-shadow: 0 0 0 16px rgba(201,162,39,0), 0 0 28px rgba(201,162,39,.22); } } @media (prefers-reduced-motion: reduce) { .tl-steps *, .tl-steps *::before, .tl-steps *::after { transition: none !important; animation: none !important; } } /* ------------------------------------------------------------------ FOOLDAL HERO - "lemezre irt felirat" (2026-09-27, v2) Felepites (fooldal 113, elso szakasz): .tl-hero = a kontener (kep + lemez-panel egymas alatt) .tl-hero-media = a telephely-kompozit kep: TELJES SZELESSEGU (kilog a 1200px-es kontenerbol a viewport ket szeleig), 2:1 .tl-hero-plate = a sotet, szalcsiszolt acel "lemez", ami a kep bal also reszere log ra (negativ felso margoval) .tl-hero-title = a H1; benne az ELSO szo egy -ban all ("Trapezlemez"), ez a KIVAGOTT betu. MIERT ".elementor" ELOTAG: az Elementor sajat szabalyai (.elementor .e-div-block-base, .elementor .tl-h1 ...) ket osztaly erossegu-ek (0,2,0) es a child CSS UTAN toltodnek be, igy egyforma erosseg mellett ok nyernenek. A .elementor elotaggal a mi szabalyaink eggyel erosebbek (0,3,0), betoltesi sorrendtol fuggetlenul. Miert negativ margo es nem position:absolute: igy a lemez magassaga szabadon nohet, es a kep alatti tartalom automatikusan lejjebb kerul. ------------------------------------------------------------------ */ /* A hero-szakasz tetejen NINCS tavolsag: a kep kozvetlenul a menu alatt indul. Az also 96px-es levego marad. overflow-x:clip = a 100vw-s kep a gorgetosav szelessegevel kilogna jobbra; ez levagja, igy nincs vizszintes gorgetes. (clip, nem hidden: nem tori el a sticky fejlecet) */ .elementor .tl-section:has(> .tl-hero) { padding-block-start: 0; overflow-x: clip; } .elementor .tl-hero { position: relative; display: block; padding-block-start: 0; } .elementor .tl-hero .tl-hero-media { display: block; /* kitores a kontenerbol: 50% = a kontener fele, 50vw = a viewport fele */ width: 100vw; max-width: none; margin-left: calc(50% - 50vw); /* 2:1 kep, de sosem magasabb a kepernyonel (menu ~100px levonva) */ height: min(50vw, calc(100vh - 100px)); min-height: 360px; aspect-ratio: auto; object-fit: cover; object-position: 50% 25%; /* alacsony kepernyon felul oroszlan, alul lemezek is marad */ border-radius: 0; border: 0; } .elementor .tl-hero .tl-hero-plate { /* A lemez MINDKET borben sotet acel: ezert itt helyben visszaallitjuk a sotet tokeneket, kulonben vilagos borben sotet szoveg kerulne sotet lemezre. */ --ink: #EDE9E1; --ink-muted: #A9A398; --metal: #C9CCD1; --line: #3A3226; --link: #C9A227; position: relative; z-index: 2; width: min(660px, 60%); min-width: 0; margin: -250px 0 0 48px; padding: 36px 44px 66px; /* alul +24px: ott van a trapezprofil-el */ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; color: var(--ink); /* szalcsiszolt acel: halvany vizszintes csikok + atlos fenyatmenet */ background: repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px), linear-gradient(120deg, #2B271E 0%, #191710 42%, #26221A 70%, #1B1912 100%); border-top: 2px solid var(--accent); /* A lemez ALJA egy trapezprofil keresztmetszete (110x24 px-es minta ismetelve). A maszk: felul teli teglalap, alul a profil-minta. */ -webkit-mask: linear-gradient(#000 0 0) top left / 100% calc(100% - 24px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='24'%3E%3Cpath d='M0 0H110V24H95L83 2H47L35 24H0Z'/%3E%3C/svg%3E") left bottom / 110px 24px repeat-x; mask: linear-gradient(#000 0 0) top left / 100% calc(100% - 24px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='24'%3E%3Cpath d='M0 0H110V24H95L83 2H47L35 24H0Z'/%3E%3C/svg%3E") left bottom / 110px 24px repeat-x; } /* a lemez belso szovegei: a globalis osztalyok kozepre igazitasat itt felulirjuk */ .elementor .tl-hero .tl-hero-plate p, .elementor .tl-hero .tl-hero-plate h1, .elementor .tl-hero .tl-hero-plate > div { text-align: inherit; max-width: none; min-width: 0; margin-left: 0; margin-right: 0; padding: 0; } .elementor .tl-hero .tl-hero-plate > div { display: flex; flex-direction: column; gap: 14px; align-items: inherit; } .elementor .tl-hero .tl-hero-plate > div:last-child { flex-direction: row; flex-wrap: wrap; gap: 16px; justify-content: flex-start; margin-top: 6px; } /* H1: az alcim-resz ("es szendvicspanel egyedi meretre") kisebb */ .elementor .tl-hero .tl-hero-title { margin: 0; font-size: clamp(20px, 1.1vw + 14px, 30px); line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); } /* A KIVAGOTT SZO. A betuk "lyukak" a lemezen: a kitoltes a hatterkep ugyanazon resze, amit a tl-hero.js pontosan a kep ala igazit. JS nelkul acelszurke atmenet latszik (ugyanugy olvashato). Az arany korvonal (text-stroke) a "lezervagott el". */ .elementor .tl-hero .tl-hero-title span { display: block; font-size: clamp(52px, 7.4vw, 100px); line-height: .95; margin-bottom: .1em; color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(180deg, #E6E8EB, #9EA3AA); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1.5px var(--accent); } @media (max-width: 1024px) { .elementor .tl-hero .tl-hero-plate { width: 76%; margin: -170px 0 0 28px; padding: 30px 32px 54px; } } @media (max-width: 767px) { .elementor .tl-hero .tl-hero-media { height: auto; min-height: 0; aspect-ratio: 3 / 2; object-position: 0% 0%; /* mobilon a bal felso resz (oroszlan + kapu) marad */ } .elementor .tl-hero .tl-hero-plate { width: auto; margin: -72px 0 0; padding: 22px 18px 48px; align-items: center; text-align: center; -webkit-mask-size: 100% calc(100% - 18px), 82px 18px; mask-size: 100% calc(100% - 18px), 82px 18px; } .elementor .tl-hero .tl-hero-plate > div:last-child { justify-content: center; } .elementor .tl-hero .tl-hero-title span { font-size: clamp(40px, 12.4vw, 64px); -webkit-text-stroke-width: 1px; } } /* ------------------------------------------------------------------ FOOLDAL HERO CIM - "sargarez tabla" (2026-09-27) Minta: marott/ontott tabla - fekete, matt, bemelyitett mezo; korben kiemelkedo sargarez keret; kiemelkedo, talpas (Merriweather 900) sargarez betuk oldalfallal es vetett arnyekkal. H1 felepitese (az Elementor cimmezojebe irva, OSZTALYOK NELKUL, mert az e-heading a span-ekrol leszedi a class attributumot): Trapezlemez es szendvicspanel egyedi meretre => elso span = a tabla, benne ket sor; masodik span = alatta a kiegeszito. A szabalyok csak akkor elnek, ha a H1-ben span-ban span van (:has), igy a regi "kivagott betus" cim-szerkezetre nincsenek hatassal. A betuk anyaga background-clip:text; a kiemelkedest filter:drop-shadow adja (text-shadow NEM jo: a Chrome a hatter-kitoltes FOLE rajzolna). A tl-hero.js ebben a szerkezetben nem nyul a cimhez. ------------------------------------------------------------------ */ @font-face{ font-family:"TL Merriweather"; font-style:normal; font-weight:900; font-display:swap; src:url("assets/fonts/merriweather-900-latin.woff2") format("woff2"); unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201E,U+2026; } @font-face{ /* csak az o/u hosszu ekezetes betuk (ő, ű, Ő, Ű): csak akkor toltodik le, ha kell */ font-family:"TL Merriweather"; font-style:normal; font-weight:900; font-display:swap; src:url("assets/fonts/merriweather-900-hu.woff2") format("woff2"); unicode-range:U+0150-0151,U+0170-0171; } .elementor .tl-hero .tl-hero-title:has(> span > span){ /* sargarez: meleg arany atmenet + finom csiszolt csikok */ --brass: repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px), linear-gradient(180deg,#F4DC86 0%,#D4AE3A 42%,#A9851F 70%,#7E6214 100%); --brass-side:#4E3B08; /* fekete, matt (szort festek) mezo: finom SVG-zaj + enyhe fenyfolt */ --field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(120% 140% at 30% 20%,#23211D 0%,#141311 60%,#0C0B0A 100%); margin:0; text-transform:none; } /* a regi "kivagott betu" span-szabaly semlegesitese a tabla elemein */ .elementor .tl-hero .tl-hero-title:has(> span > span) span{ -webkit-text-stroke:0; margin-bottom:0; line-height:1; } /* A TABLA */ .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child{ display:inline-flex; flex-direction:column; align-items:flex-start; color:inherit; margin:0; padding:.22em .42em .3em; font-family:"TL Merriweather",Georgia,serif; font-weight:900; font-size:clamp(40px,3.8vw,72px); /* keret: a border-sav a sargarez, belul a fekete mezo */ border:9px solid transparent; border-radius:12px; background:var(--field) padding-box, var(--brass) border-box; box-shadow: inset 3px 4px 9px rgba(0,0,0,.85), /* a keret arnyeka a mely mezon */ inset -1px -1px 2px rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.7), /* a tabla kulso ele */ 0 10px 24px rgba(0,0,0,.55); /* a tabla arnyeka a lemezen */ } /* A KET SOR: kiemelkedo sargarez betuk */ .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child > span{ display:block; font-size:1em; font-weight:900; color:transparent; -webkit-text-fill-color:transparent; background:var(--brass); -webkit-background-clip:text; background-clip:text; /* 3 db 1px-es eltolt masolat = oldalfal, utana puha vetett arnyek */ filter: drop-shadow(1px 1px 0 var(--brass-side)) drop-shadow(1px 1px 0 var(--brass-side)) drop-shadow(1px 1px 0 var(--brass-side)) drop-shadow(3px 5px 4px rgba(0,0,0,.85)); letter-spacing:.005em; } .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child > span + span{ font-size:.5em; margin-top:.12em; } /* A TABLA ALATTI KIEGESZITO ("egyedi meretre") */ .elementor .tl-hero .tl-hero-title:has(> span > span) > span + span{ display:block; margin-top:14px; font-size:clamp(18px,1vw + 12px,26px); line-height:1.15; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); -webkit-text-fill-color:var(--ink-muted); background:none; } @media (max-width:767px){ .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child{ font-size:clamp(30px,9.6vw,48px); border-width:7px; align-items:center; } } /* ------------------------------------------------------------------ FOOLDAL HERO v6 (2026-09-27 este) 1) Uj kep (tl-hero-telephely-6.webp, 1672x1061): Karesz javitott kepe, felul 120px-es egsavval megtoldva - asztalin ezen all a raúszo fejlec, igy nem takarja az oroszlanos logot. 2) A lemez-panel: felul lekerekitett, sarga "vilagito" derengés korben (az also trapezprofil-elen is). A derengest filter: drop-shadow adja, ami az alakot koveti. A korabbi maszk ezert a ::before-ra kerult (a maszk a sajat elemen az arnyekot is levagna). 3) A sargarez tabla mogott meleg hattervilagitas. ------------------------------------------------------------------ */ @media (min-width: 1200px) { /* a fejlec a kepen uszik: a kep a teljes kepernyot kitoltheti */ .elementor .tl-hero .tl-hero-media { height: min(calc(100vw * 1061 / 1672), max(100vh, 640px)); object-position: 50% 30%; } } .elementor .tl-hero .tl-hero-plate { background: none; border-top: 0; border-radius: 16px 16px 0 0; -webkit-mask: none; mask: none; isolation: isolate; /* vilagito panel: vekony vilagos perem + szeles meleg derenges */ filter: drop-shadow(0 0 1px rgba(244, 220, 134, .7)) drop-shadow(0 0 16px rgba(226, 186, 64, .55)) drop-shadow(0 0 42px rgba(212, 174, 58, .30)); } .elementor .tl-hero .tl-hero-plate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border-top: 2px solid #E2BA40; background: radial-gradient(90% 60% at 30% 0%, rgba(244, 220, 134, .10), transparent 70%), repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px), linear-gradient(120deg, #2B271E 0%, #191710 42%, #26221A 70%, #1B1912 100%); box-shadow: inset 0 1px 0 rgba(255, 236, 170, .35); -webkit-mask: linear-gradient(#000 0 0) top left / 100% calc(100% - 24px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='24'%3E%3Cpath d='M0 0H110V24H95L83 2H47L35 24H0Z'/%3E%3C/svg%3E") left bottom / 110px 24px repeat-x; mask: linear-gradient(#000 0 0) top left / 100% calc(100% - 24px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='24'%3E%3Cpath d='M0 0H110V24H95L83 2H47L35 24H0Z'/%3E%3C/svg%3E") left bottom / 110px 24px repeat-x; } @media (max-width: 767px) { .elementor .tl-hero .tl-hero-plate { border-radius: 12px 12px 0 0; } .elementor .tl-hero .tl-hero-plate::before { -webkit-mask-size: 100% calc(100% - 18px), 82px 18px; mask-size: 100% calc(100% - 18px), 82px 18px; } } /* sargarez tabla: meleg hattervilagitas (mintha mogotte lampa egne) */ .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child { box-shadow: inset 3px 4px 9px rgba(0,0,0,.85), inset -1px -1px 2px rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.7), 0 10px 24px rgba(0,0,0,.55), 0 0 26px 4px rgba(244, 200, 80, .30), 0 0 70px 14px rgba(212, 174, 58, .16); } /* ------------------------------------------------------------------ 2026-09-27 este, v7 - Karesz kerései a v6 utan ------------------------------------------------------------------ */ /* 1) Res a menu felett: az Elementor alap div-stilusa (.elementor .e-div-block-base { padding:10px }) a child CSS UTAN toltodik es ugyanolyan eros volt, mint a mi ".elementor .tl-hero" szabalyunk, ezert a hero-kontener felul 10px-et kapott. Itt eggyel erosebb. */ .elementor .tl-section > .tl-hero.tl-container { padding-block-start: 0; } /* 2) Hero lemez: a "Gyartotol - Mindszent" felirat rejtve */ .elementor .tl-hero .tl-hero-plate .tl-eyebrow { display: none; } /* 3) Tabla: a ket sor egyforma meretu; a merete ugy csokken, hogy az "es szendvicspanel" sor is kiferjen a lemezen. A tabla, az "egyedi meretre" es a ket gomb kozepre igazitva. */ .elementor .tl-hero .tl-hero-plate .tl-hero-title:has(> span > span) { text-align: center; } .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child { font-size: clamp(38px, 3vw, 52px); align-items: center; } @media (max-width: 767px) { .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child { font-size: clamp(22px, 7.4vw, 36px); } } .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child > span + span { font-size: 1em; margin-top: .04em; } /* "egyedi meretre": a tabla betutipusa, a regi meretben */ .elementor .tl-hero .tl-hero-title:has(> span > span) > span + span { font-family: "TL Merriweather", Georgia, serif; font-weight: 900; text-align: center; letter-spacing: .08em; } .elementor .tl-hero .tl-hero-plate > div:last-child { justify-content: center; } /* 4) A leiras (a cim es a gombok kozott): markansabb - vilagosabb szin es puha sotet arnyek, ami kiemeli a csiszolt lemezbol. */ .elementor .tl-hero .tl-hero-plate .tl-lead { color: #D8D2C6; text-shadow: 0 1px 1px rgba(0, 0, 0, .9), 0 2px 10px rgba(0, 0, 0, .55); } /* 5) Kapcsolat szakasz: levego az "Ismerje meg a csapatot" gomb es a "Telephely es kozpont" kartya kozott. */ .elementor .tl-section a.tl-btn-secondary + .tl-card { margin-block-start: 40px; } /* 6) Kapcsolattartok nevei mogott halvany arany bevilagitas */ .elementor .tl-card:has(> .tl-contact-row) > .tl-h3 { text-shadow: 0 0 12px rgba(226, 186, 64, .45), 0 0 30px rgba(212, 174, 58, .25); } /* 7) Mega menu: a "Profil szerint" cim kozepen, mindket hasab fole */ .tl-menu .mega-col:last-child > .tl-mega-title { text-align: center; } /* ------------------------------------------------------------------ 2026-09-27 este, v8 - EZUST reszletek (Karesz kerese) - lemez-panel: sarga derenges helyett ezust, a felso peremen vegigfuto ezust csillanas - tabla: ezust keret csillanassal; az "es szendvicspanel" sor ezust (a "Trapezlemez" sargarez marad) - Termekeink / Szinek gomb es a fejlec AJANLATKERES gombja: csiszolt ezust, idonkent vegigfuto csillanassal A csillanas egy keskeny, ferde feher csik (--tl-shine), ami egy 300% szeles retegen fut at (background-position 0% -> 100%). Csokkentett mozgas kereset eseten nincs animacio. ------------------------------------------------------------------ */ :root { --tl-silver: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), linear-gradient(180deg, #FAFBFC 0%, #D5DADF 30%, #9AA1A9 58%, #C4C9CF 78%, #EEF0F2 100%); /* a keretre: tobb sav, hogy a vekony keret is fem-hatasu legyen */ /* v24 (2026-10-04): csiszolt acel - egyenletes tonus, alig lathato vizszintes szalirany (a regi 7 savos atmenet + csikozas 6 px-en hullamzott) */ --tl-silver-frame: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.035) 1px 2px), linear-gradient(180deg, #CDD2D8 0%, #B9C0C7 100%); --tl-shine: linear-gradient(105deg, transparent 44%, rgba(255,255,255,.9) 50%, transparent 56%); } @keyframes tl-shine { 0% { background-position: 0% 0, 0 0, 0 0; } 45% { background-position: 100% 0, 0 0, 0 0; } 100% { background-position: 100% 0, 0 0, 0 0; } } @keyframes tl-shine-frame { 0% { background-position: 0 0, 0 0, 0% 0, 0 0, 0 0; } 45% { background-position: 0 0, 0 0, 100% 0, 0 0, 0 0; } 100% { background-position: 0 0, 0 0, 100% 0, 0 0, 0 0; } } @keyframes tl-rim { 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 100% 0; } } /* ---------- lemez-panel: ezust derenges + ezust perem ---------- */ .elementor .tl-hero .tl-hero-plate { filter: drop-shadow(0 0 1px rgba(236, 240, 244, .75)) drop-shadow(0 0 16px rgba(205, 212, 220, .45)) drop-shadow(0 0 42px rgba(185, 193, 202, .25)); } .elementor .tl-hero .tl-hero-plate::before { border-top-color: #C9CED4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); background: radial-gradient(90% 60% at 30% 0%, rgba(220, 226, 232, .09), transparent 70%), repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px), linear-gradient(120deg, #2B271E 0%, #191710 42%, #26221A 70%, #1B1912 100%); } /* a felso peremen vegigfuto csillanas */ .elementor .tl-hero .tl-hero-plate::after { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent 40%, #FFFFFF 50%, transparent 60%) 0 0 / 300% 100% no-repeat; animation: tl-rim 5s ease-in-out infinite; } /* ---------- tabla: ezust keret, ezust 2. sor ---------- */ .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child { background: var(--field) padding-box, var(--tl-shine) border-box, var(--tl-silver-frame) border-box; /* retegek: mezo-zaj, mezo-folt, csillanas, ezust csikok, ezust atmenet */ background-size: auto, auto, 300% 100%, auto, auto; background-repeat: repeat, no-repeat, no-repeat, repeat, no-repeat; animation: tl-shine-frame 6s ease-in-out infinite; box-shadow: inset 3px 4px 9px rgba(0,0,0,.85), inset -1px -1px 2px rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.7), 0 10px 24px rgba(0,0,0,.55), 0 0 26px 4px rgba(215, 222, 230, .22), 0 0 70px 14px rgba(190, 198, 208, .12); } .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child > span + span { background: var(--tl-shine), var(--tl-silver); background-size: 300% 100%, auto, auto; background-repeat: no-repeat, repeat, no-repeat; -webkit-background-clip: text; background-clip: text; animation: tl-shine 6s ease-in-out infinite; filter: drop-shadow(1px 1px 0 #3E444B) drop-shadow(1px 1px 0 #3E444B) drop-shadow(1px 1px 0 #3E444B) drop-shadow(3px 5px 4px rgba(0,0,0,.85)); } /* ---------- ezust gombok (Termekeink, Szinek, Ajanlatkeres) ---------- */ .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary, .tl-header a.tl-cta { position: relative; color: #16181B; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); border: 1px solid #F1F3F5; border-radius: 4px; background: var(--tl-shine), var(--tl-silver); background-size: 300% 100%, auto, auto; background-repeat: no-repeat, repeat, no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 4px 14px rgba(0, 0, 0, .5); text-decoration: none; animation: tl-shine 5s ease-in-out infinite; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary:hover, .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary:focus-visible, .tl-header a.tl-cta:hover, .tl-header a.tl-cta:focus-visible { color: #000; background: var(--tl-shine), var(--tl-silver); background-size: 300% 100%, auto, auto; background-repeat: no-repeat, repeat, no-repeat; transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 8px 22px rgba(0, 0, 0, .55), 0 0 18px rgba(225, 231, 238, .45); animation-duration: 1.4s; } /* a ket hero-gomb kicsit eltero ritmusban csillan */ .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary + a.tl-btn-secondary { animation-delay: .35s; } @media (prefers-reduced-motion: reduce) { .elementor .tl-hero .tl-hero-plate::after, .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child, .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child > span + span, .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary, .tl-header a.tl-cta { animation: none; } } /* ------------------------------------------------------------------ 2026-09-27 este, v9 1) A tabla (H1) a lemez teljes szelesseget kapja, igy a tabla, az "egyedi meretre" es a gombok ugyanarra a kozepvonalra esnek. (Eddig a H1 flex-elemkent a tartalma szelessegere zsugorodott es balra allt.) 2) Asztalin a lemez feljebb kerul: a teteje a zaszlok alja ala esik. Szamitas a kep valodi geometriajabol (1672x1061 kep, 100vw szeles, object-position 50% 30%): s = 100vw / 1672 (nagyitas) H = min(1061*s, max(100vh, 640px)) (a kep lathato magassaga) zaszlok alja a kepen = 483*s - 0.3*(1061*s - H) A lemez a kep UTAN all, ezert a negativ margo = zaszlok alja + 16 - H. 3) Ajanlatkeres: a felirat sotet arany, hogy kiugorjon az ezust gombbol. ------------------------------------------------------------------ */ .elementor .tl-hero .tl-hero-plate .tl-hero-title:has(> span > span) { align-self: stretch; width: 100%; } @media (min-width: 1200px) { .elementor .tl-hero .tl-hero-plate { --tl-s: calc(100vw / 1672); --tl-h: min(calc(1061 * var(--tl-s)), max(100vh, 640px)); margin-top: calc(483 * var(--tl-s) - 0.3 * (1061 * var(--tl-s) - var(--tl-h)) + 16px - var(--tl-h)); } } .tl-header a.tl-cta, .tl-header a.tl-cta:hover, .tl-header a.tl-cta:focus-visible { color: #7A5A0B; text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 0 1px rgba(122, 90, 11, .35); } /* ================================================================== 2026-09-27 este, v10 - Karesz kerései a v9 utan ================================================================== */ /* ------------------------------------------------------------------ 1) AJANLATKERO GOMBOK - EGY HELYEN VEZERELVE (v11, 2026-09-28) Grafit / ezust keret / arany hover (Karesz specifikacioja). Minden ajanlatkero gomb ugyanazt a stilust kapja, barmelyik oldalon: - a fejlec "Ajanlatkeres" gombja (.tl-cta), - minden tl-btn-secondary vagy tl-chip gomb, amelynek linkje az /ajanlatkeres/ oldalra mutat (a ?szin=... parameteres is), - barmely elem, amely a tl-btn-offer osztalyt kapja. UJ ajanlatkero gombhoz nem kell CSS: eleg, ha az /ajanlatkeres/ oldalra linkel. A stilus modositasa: CSAK az alabbi --tl-offer-* valtozokat kell atirni, minden gomb egyszerre valtozik. Betu: Montserrat 700, a sajat szerverrol (nincs Google-kapcsolat): latin + kulon kis fajl az o/u hosszu ekezetekhez (o", u"). ------------------------------------------------------------------ */ @font-face { font-family: "TL Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/montserrat-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "TL Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/montserrat-700-hu.woff2") format("woff2"); unicode-range: U+0150-0151, U+0170-0171; } :root { --tl-offer-font: "TL Montserrat", var(--font-body), sans-serif; --tl-offer-radius: 7px; /* alapallapot: nagyon sotet, enyhen femes grafit */ --tl-offer-bg: linear-gradient(180deg, #35383C 0%, #17191B 100%); --tl-offer-ink: #F4F4F4; --tl-offer-border: #9EA4AA; --tl-offer-shadow: 0 4px 12px rgba(0, 0, 0, .35); /* hover: vilagosabb grafit, arany felirat es keret, finom arany feny */ --tl-offer-bg-hover: linear-gradient(180deg, #41454A 0%, #202225 100%); --tl-offer-ink-hover: #D9B44A; --tl-offer-border-hover: #D9B44A; --tl-offer-shadow-hover: 0 5px 16px rgba(0, 0, 0, .42), 0 0 10px rgba(217, 180, 74, .20); --tl-offer-lift: -2px; --tl-offer-speed: .28s; } .tl-header a.tl-cta, .elementor a.tl-btn-secondary[href*="/ajanlatkeres"], .elementor a.tl-chip[href*="/ajanlatkeres"], .elementor a.tl-btn-offer { position: relative; isolation: isolate; /* a hover-reteg (::before) a felirat moge kerul */ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 54px; padding: 17px 30px; font-family: var(--tl-offer-font); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: .6px; text-transform: uppercase; text-align: center; text-decoration: none; text-shadow: none; color: var(--tl-offer-ink); border: 1px solid var(--tl-offer-border); border-radius: var(--tl-offer-radius); background: var(--tl-offer-bg); box-shadow: var(--tl-offer-shadow); filter: none; animation: none; transform: none; transition: color var(--tl-offer-speed) ease, border-color var(--tl-offer-speed) ease, box-shadow var(--tl-offer-speed) ease, transform var(--tl-offer-speed) ease; } /* A gradiens hatter nem animalhato: a hover-gradiens egy kulon retegen (::before) usztatva jelenik meg. */ .tl-header a.tl-cta::before, .elementor a.tl-btn-secondary[href*="/ajanlatkeres"]::before, .elementor a.tl-chip[href*="/ajanlatkeres"]::before, .elementor a.tl-btn-offer::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--tl-offer-bg-hover); opacity: 0; transition: opacity var(--tl-offer-speed) ease; } /* jobb oldali chevron (>) a felirat utan, 10px-re */ .tl-header a.tl-cta::after, .elementor a.tl-btn-secondary[href*="/ajanlatkeres"]::after, .elementor a.tl-chip[href*="/ajanlatkeres"]::after, .elementor a.tl-btn-offer::after { content: ""; flex: none; width: 7px; height: 7px; margin-inline-start: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--tl-offer-speed) ease; } .tl-header a.tl-cta:hover, .tl-header a.tl-cta:focus-visible, .elementor a.tl-btn-secondary[href*="/ajanlatkeres"]:hover, .elementor a.tl-btn-secondary[href*="/ajanlatkeres"]:focus-visible, .elementor a.tl-chip[href*="/ajanlatkeres"]:hover, .elementor a.tl-chip[href*="/ajanlatkeres"]:focus-visible, .elementor a.tl-btn-offer:hover, .elementor a.tl-btn-offer:focus-visible { color: var(--tl-offer-ink-hover); border-color: var(--tl-offer-border-hover); background: var(--tl-offer-bg); box-shadow: var(--tl-offer-shadow-hover); transform: translateY(var(--tl-offer-lift)); filter: none; animation: none; text-shadow: none; } .tl-header a.tl-cta:hover::before, .tl-header a.tl-cta:focus-visible::before, .elementor a.tl-btn-secondary[href*="/ajanlatkeres"]:hover::before, .elementor a.tl-btn-secondary[href*="/ajanlatkeres"]:focus-visible::before, .elementor a.tl-chip[href*="/ajanlatkeres"]:hover::before, .elementor a.tl-chip[href*="/ajanlatkeres"]:focus-visible::before, .elementor a.tl-btn-offer:hover::before, .elementor a.tl-btn-offer:focus-visible::before { opacity: 1; } .tl-header a.tl-cta:hover::after, .elementor a.tl-btn-secondary[href*="/ajanlatkeres"]:hover::after, .elementor a.tl-chip[href*="/ajanlatkeres"]:hover::after, .elementor a.tl-btn-offer:hover::after { transform: translateX(2px) rotate(45deg); } /* Meretek a szukos helyeken (a szinek, a betu es a hover ugyanaz): - fejlec (asztali): a teljes meretu gomb (218px) mellett a logo MINDEN szelessegen levagodna (MERVE 1200-1920px, Playwright). A legnagyobb meret, amivel 1200px-tol sem vagodik le: 13px betu, 46px magas (154px); - fejlec 1200px alatt: a mobil fejlec kis gombja marad; - Szinek oldal kartyai (200px szeles hasabok): kompakt, tobb sorba torhet. */ @media (min-width: 1200px) { .tl-header a.tl-cta { min-height: 46px; padding: 12px 14px; font-size: 13px; letter-spacing: .3px; } .tl-header a.tl-cta::after { width: 6px; height: 6px; margin-inline-start: 7px; } } @media (max-width: 1199.98px) { .tl-header a.tl-cta { min-height: 40px; padding: 10px 12px; font-size: 13px; letter-spacing: .4px; } .tl-header a.tl-cta::after { width: 6px; height: 6px; margin-inline-start: 7px; } } .elementor a.tl-chip[href*="/ajanlatkeres"] { min-height: 46px; padding: 12px 14px; font-size: 13px; letter-spacing: .4px; } .elementor a.tl-chip[href*="/ajanlatkeres"]::after { width: 6px; height: 6px; margin-inline-start: 8px; } /* ------------------------------------------------------------------ 2) SZINEK GOMBOK - szivarvany atmenet (piros - arany - kek), lassan atfolyik, folotte ugyanaz az ezust csillanas. Minden tl-btn-secondary gomb, amely a /szinek/ oldalra mutat (hero "Szinek", "Az osszes szin"). A szinatmenet egy periodusa = a gomb szelessege (200%-os reteg), igy a folyas hurkolasa ugras nelkuli. ------------------------------------------------------------------ */ :root { --tl-rainbow: linear-gradient(100deg, #B8322A 0%, #D9A21B 16.66%, #1F5FA8 33.33%, #B8322A 50%, #D9A21B 66.66%, #1F5FA8 83.33%, #B8322A 100%); } @keyframes tl-rainbow { 0% { background-position: 0% 0, 0% 0; } 40% { background-position: 100% 0, 40% 0; } 100% { background-position: 100% 0, 100% 0; } } .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary[href*="/szinek"], .elementor a.tl-btn-secondary[href*="/szinek"] { position: relative; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 8px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .7); border-radius: 4px; background: var(--tl-shine), var(--tl-rainbow); background-size: 300% 100%, 200% 100%; background-repeat: no-repeat, repeat-x; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .45); text-decoration: none; animation: tl-rainbow 9s linear infinite; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary[href*="/szinek"]:hover, .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary[href*="/szinek"]:focus-visible, .elementor a.tl-btn-secondary[href*="/szinek"]:hover, .elementor a.tl-btn-secondary[href*="/szinek"]:focus-visible { color: #FFFFFF; border-color: #FFFFFF; background: var(--tl-shine), var(--tl-rainbow); background-size: 300% 100%, 200% 100%; background-repeat: no-repeat, repeat-x; transform: translateY(-2px); filter: brightness(1.1) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 8px 22px rgba(0, 0, 0, .5), 0 0 20px rgba(217, 162, 27, .35); animation-duration: 3s; } /* ------------------------------------------------------------------ 3) TERMEK-CSEMPEK "Tovabb ->" felirata: kis ezust keretes kapszula, idonkent vegigfuto csillanassal; a csempe folott ezustre toltodik es jobbra csuszik. (A felirat a csempe szovegdobozanak 3., utolso eleme - a "Tetore/Kerites..." csempeken nincs ilyen.) ------------------------------------------------------------------ */ @keyframes tl-more { 0% { background-position: 0% 0, 0 0; } 40% { background-position: 100% 0, 0 0; } 100% { background-position: 100% 0, 0 0; } } .elementor a.tl-tile > div > p:nth-child(3):last-child { display: inline-block; margin-block-start: auto; padding: 5px 16px; border: 1px solid color-mix(in srgb, var(--metal) 70%, transparent); border-radius: 999px; color: var(--ink); letter-spacing: .04em; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%), color-mix(in srgb, var(--metal) 8%, transparent); background-size: 300% 100%, auto; background-repeat: no-repeat; animation: tl-more 4.5s ease-in-out infinite; transition: transform .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease; } .elementor a.tl-tile:nth-child(2) > div > p:nth-child(3):last-child { animation-delay: .5s; } .elementor a.tl-tile:nth-child(3) > div > p:nth-child(3):last-child { animation-delay: 1s; } .elementor a.tl-tile:nth-child(4) > div > p:nth-child(3):last-child { animation-delay: 1.5s; } .elementor a.tl-tile:hover > div > p:nth-child(3):last-child, .elementor a.tl-tile:focus-visible > div > p:nth-child(3):last-child { color: #16181B; border-color: #F1F3F5; background: var(--tl-shine), var(--tl-silver); background-size: 300% 100%, auto, auto; background-repeat: no-repeat, repeat, no-repeat; transform: translateX(6px); box-shadow: 0 0 14px rgba(215, 222, 230, .4); animation: tl-shine 1.4s ease-in-out infinite; } html[data-theme="light"] .elementor a.tl-tile > div > p:nth-child(3):last-child { color: var(--link); border-color: var(--metal); } html[data-theme="light"] .elementor a.tl-tile:hover > div > p:nth-child(3):last-child { color: #16181B; border-color: #9AA1A9; box-shadow: 0 0 14px rgba(27, 79, 138, .25); } /* ------------------------------------------------------------------ 4) Kapcsolattartok nevei: ezust bevilagitas; vilagos borben kek. 5) Hero: a leiras (lead) is kozepen. ------------------------------------------------------------------ */ .elementor .tl-card:has(> .tl-contact-row) > .tl-h3 { text-shadow: 0 0 12px rgba(222, 229, 236, .5), 0 0 30px rgba(196, 205, 215, .28); } html[data-theme="light"] .elementor .tl-card:has(> .tl-contact-row) > .tl-h3 { text-shadow: 0 0 12px rgba(27, 79, 138, .35), 0 0 28px rgba(27, 79, 138, .2); } .elementor .tl-hero .tl-hero-plate .tl-lead { text-align: center; align-self: stretch; } @media (prefers-reduced-motion: reduce) { .tl-header a.tl-cta, .elementor a.tl-btn-secondary[href*="/ajanlatkeres"], .elementor a.tl-chip[href*="/ajanlatkeres"], .elementor a.tl-btn-offer, .elementor a.tl-btn-secondary[href*="/szinek"], .elementor a.tl-tile > div > p:nth-child(3):last-child { animation: none !important; } } /* ------------------------------------------------------------------ v12 (2026-09-28): Szinek oldal ajanlatkero gombjai MOBILON. A kartyak mobilon ket hasabban allnak, a gomb kb. 115-125px szeles: az "AJANLATOT KEREK EBBEN A SZINBEN" felirat (kulonosen nagyitott telefonos betumerettel) kilogott a gombbol. Mobilon a felirat rovid: "AJANLATOT KEREK >". Az eredeti szoveg a HTML-ben marad (keresok, kepernyoolvaso); a rovid felirat csak megjelenites ( / "" = a kepernyoolvaso nem olvassa fel meg egyszer). ------------------------------------------------------------------ */ @media (max-width: 767.98px) { .elementor a.tl-chip[href*="/ajanlatkeres"] { font-size: 0; min-height: 44px; padding: 10px 4px; } .elementor a.tl-chip[href*="/ajanlatkeres"]::after { content: "Aj\00E1nlatot k\00E9rek\00A0\203A"; content: "Aj\00E1nlatot k\00E9rek\00A0\203A" / ""; flex: 0 1 auto; width: auto; height: auto; margin: 0; border: 0; transform: none; font-size: 12px; line-height: 1.25; letter-spacing: 0; text-align: center; overflow-wrap: break-word; /* vegso eset: nagyon keskeny kijelzo + nagyitott betu */ } .elementor a.tl-chip[href*="/ajanlatkeres"]:hover::after { transform: none; } } /* ================================================================== 2026-09-29 - HERO TABLA MOBILON: csillogo animacio KIKAPCSOLVA. Hiba (Karesz telefonja): a tabla ("Trapezlemez es szendvicspanel") mogott animacio kozben szines kepdarabok villantak fel. Ok (kovet- keztetes, a telefonon nem reprodukalhato itt): a szovegre vagott (background-clip: text), tobbszoros drop-shadow szurovel arnyekolt, folyamatosan ujrafestett feliraton egyes mobil GPU-k a hatter-kep darabjait keverik be. Erintokepernyon es 1200px alatt a tabla allo (nem animalt) ezust csillanassal jelenik meg. ================================================================== */ @media (max-width: 1199.98px), (hover: none) { .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child, .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child > span + span { animation: none; } } /* ================================================================== v14 (2026-09-29) - SZINATALLAS: "ACELKEK + OROSZLAN-ARANY" Vilagos bor az alapertelmezett, a sotet (ejkek) atkapcsolhato. Ez a blokk a style.css VEGERE kerul (a v13 arany-proba helyett). Specificitas: az Elementor global/local CSS a style.css UTAN toltodik, ezert az elemeket html[data-theme] elotaggal erositjuk. ================================================================== */ /* --- 1. TOKENEK --------------------------------------------------- :root = vilagos (ha a data-theme valamiert hianyzik, akkor is vilagos legyen); html[data-theme="light"] a regi vilagos blokkot irja felul (azonos specificitas, kesobbi = nyer). */ :root, html[data-theme="light"] { --bg-base: #F4F7FB; /* alap hatter */ --bg-surface: #FFFFFF; /* "alt" szakaszok, kartyak */ --bg-surface-alt: #FFFFFF; /* csempek, kartyak (arnyekkal valnak el) */ --ink: #14202B; /* szoveg, 16,5:1 */ --ink-muted: #4A5868; /* halvany szoveg, 7,3:1 */ --line: #D5DEE8; /* keretek */ --metal: #5A6B7D; /* ikonok, masodlagos keret */ --accent: #D4AE3A; /* oroszlan-arany - csak KITOLTES/vonal */ --accent-deep: #8A6A1F; /* arany SZOVEG vilagos hatteren, 5:1 */ --link: #1B5A96; /* link, 7,1:1 */ --cta-ink: #0A3D66; /* felirat arany alapon (navy) */ --tl-h2: #0A3D66; /* szakaszcimek szine */ --tl-card-shadow: 0 8px 20px rgba(6, 50, 90, .08); --tl-card-shadow-hover: 0 12px 28px rgba(6, 50, 90, .18); color-scheme: light; } html[data-theme="dark"] { --bg-base: #0B1622; /* ejkek alap */ --bg-surface: #12222F; --bg-surface-alt: #162A3A; --ink: #E6EDF4; --ink-muted: #A3B3C4; --line: #28405A; --metal: #C9CED4; /* ezust */ --accent: #D4AE3A; --accent-deep: #B8922E; --link: #8CC0EA; /* vilagos acelkek, sotet alapon 8:1 */ --cta-ink: #0A3D66; --tl-h2: #FFFFFF; --tl-card-shadow: 0 8px 20px rgba(0, 0, 0, .35); --tl-card-shadow-hover: 0 12px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(212, 174, 58, .35); color-scheme: dark; } /* Borfuggetlen szinek es femes atmenetek (latvanyterv) */ :root { --tl-navy: #0A3D66; --tl-blue: #1F6FB2; --tl-gold: #D4AE3A; --tl-silver-c: #C9CED4; --tl-navy-metal: linear-gradient(180deg, #155A92 0%, #0A3D66 55%, #06325A 100%); --tl-blue-metal: linear-gradient(180deg, #5AA0DB 0%, #2C7BC0 38%, #1F6FB2 55%, #0E4F87 100%); --tl-gold-metal: linear-gradient(180deg, #F6DE8D 0%, #E3C15C 35%, #D4AE3A 60%, #B88E26 100%); } /* --- 2. SZAKASZCIMEK (H2): navy + arany femes vonal alatta ------- */ html[data-theme] .elementor h2.tl-h2 { color: var(--tl-h2); } html[data-theme] .elementor h2.tl-h2::after { content: ""; display: block; width: 72px; height: 3px; margin: 12px auto 0; border-radius: 2px; background: var(--tl-gold-metal); } /* Eyebrow a cim felett: acelkek (vilagosban), halvany (sotetben) */ html[data-theme="light"] .elementor .tl-section-head > p.tl-eyebrow { color: var(--tl-blue); } /* --- 3. KARTYAK, SZAMOK, CHIPEK ---------------------------------- */ html[data-theme] .elementor div.tl-card, html[data-theme] .elementor div.tl-stat { background-color: var(--bg-surface-alt); border-color: var(--line); box-shadow: var(--tl-card-shadow); } html[data-theme="light"] .elementor p.tl-stat-num { color: var(--tl-navy); } html[data-theme="dark"] .elementor p.tl-stat-num { color: var(--tl-gold); } html[data-theme] .elementor a.tl-chip:not([href*="/ajanlatkeres"]) { background-color: var(--bg-surface); border-color: var(--line); } html[data-theme] .elementor a.tl-chip:not([href*="/ajanlatkeres"]):hover, html[data-theme] .elementor a.tl-chip:not([href*="/ajanlatkeres"]):focus-visible { border-color: var(--tl-blue); color: var(--link); } /* --- 4. CSEMPEK: feher kartya, alul acelkek femes cimsav + arany kor-nyil; hoverre arany keret + 3 px emelkedes ------------------ */ html[data-theme] .elementor a.tl-tile { background-color: var(--bg-surface-alt); border-color: var(--line); box-shadow: var(--tl-card-shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } html[data-theme] .elementor a.tl-tile:hover, html[data-theme] .elementor a.tl-tile:focus-visible { border-color: var(--tl-gold); box-shadow: var(--tl-card-shadow-hover), 0 0 0 1px var(--tl-gold); transform: translateY(-3px); } /* A cim (h3) a belso doboz elejen all -> negativ margoval a kartya teljes szelessegere huzzuk, igy lesz belole cimsav. A felso -20px = a doboz 12px-es felso paddingje + a csempe 8px-es gap-je (kulonben feher csik maradna a kep es a sav kozott). */ html[data-theme] .elementor a.tl-tile > div > h3.tl-h3 { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -20px -16px 6px; padding: 12px 14px 12px 16px; text-align: left; font-size: 18px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; background: var(--tl-blue-metal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); text-shadow: 0 1px 1px rgba(6, 50, 90, .5); } /* arany kor-nyil a cimsav jobb szelen */ html[data-theme] .elementor a.tl-tile > div > h3.tl-h3::after { content: "\203A"; flex: none; display: grid; place-items: center; width: 1.3em; /* em: nagyitott betuvel a kor is no */ height: 1.3em; border-radius: 50%; font-family: var(--font-body), sans-serif; font-size: 1.1em; line-height: 1; padding-bottom: .1em; box-sizing: border-box; color: var(--tl-navy); text-shadow: none; background: var(--tl-gold-metal); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s ease; } html[data-theme] .elementor a.tl-tile:hover > div > h3.tl-h3::after { transform: translateX(3px); } /* "Tovabb" kapszula: acelkek keret, hoverre arany kitoltes navy felirattal */ html[data-theme] .elementor a.tl-tile > div > p:nth-child(3):last-child { color: var(--link); border-color: color-mix(in srgb, var(--tl-blue) 60%, transparent); background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%), color-mix(in srgb, var(--tl-blue) 7%, transparent); background-size: 300% 100%, auto; background-repeat: no-repeat; } html[data-theme] .elementor a.tl-tile:hover > div > p:nth-child(3):last-child, html[data-theme] .elementor a.tl-tile:focus-visible > div > p:nth-child(3):last-child { color: var(--tl-navy); border-color: #F4DC86; background: var(--tl-shine), var(--tl-gold-metal); background-size: 300% 100%, auto; background-repeat: no-repeat; box-shadow: 0 0 14px rgba(212, 174, 58, .45); } /* --- 5. HERO-LEMEZ: vilagos, bordazott trapezlemez, arnyekkal ---- */ html[data-theme] .elementor .tl-hero .tl-hero-plate { /* a lemezen belul mindig a vilagos szovegszinek ervenyesek */ --ink: #14202B; --ink-muted: #243444; --metal: #5A6B7D; --line: #AEB8C3; --link: #1B5A96; /* arnyek a lemez alatt (a regi arany/ezust derenges helyett) */ filter: drop-shadow(0 18px 22px rgba(6, 50, 90, .28)) drop-shadow(0 4px 8px rgba(6, 50, 90, .18)); } html[data-theme] .elementor .tl-hero .tl-hero-plate::before { border-top: 2px solid #FFFFFF; box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(10, 61, 102, .12); /* fuggoleges bordak 64 px-enkent: volgy - ferde oldal (arnyek) - borda teteje (csillanas) - ferde oldal - volgy; felul feher feny, alul enyhe kek arnyek. Az also trapez-maszk (profil) megmarad. */ background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 30%, rgba(10, 61, 102, .07) 100%), repeating-linear-gradient(90deg, #E3E9EF 0 26px, #C3CCD6 26px 30px, #9FAAB6 30px 31px, #F8FAFC 31px 33px, #EEF2F6 33px 47px, #FFFFFF 47px 49px, #B7C1CC 49px 50px, #CFD7DF 50px 54px, #E3E9EF 54px 64px); } /* peremcsillanas: vilagos lemezen alig latszana -> kikapcsolva */ html[data-theme] .elementor .tl-hero .tl-hero-plate::after { display: none; } /* Tabla: navy femes alap, ezust keret; 1. sor arany, 2. sor ezust */ html[data-theme] .elementor .tl-hero .tl-hero-title:has(> span > span) { --field: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #155A92 0%, #0A3D66 55%, #06325A 100%); --brass-side: #3E2F08; } html[data-theme] .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child { box-shadow: inset 2px 3px 8px rgba(0, 0, 0, .55), inset -1px -1px 2px rgba(255, 255, 255, .10), 0 0 0 1px #8F99A4, 0 8px 18px rgba(6, 50, 90, .35); } html[data-theme] .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child > span + span { filter: drop-shadow(1px 1px 0 #0A2540) drop-shadow(1px 1px 0 #0A2540) drop-shadow(2px 4px 3px rgba(0, 0, 0, .6)); } /* "EGYEDI MERETRE": navy, feher bevilagitassal a bordak felett */ html[data-theme] .elementor .tl-hero .tl-hero-title:has(> span > span) > span + span { color: var(--tl-navy); -webkit-text-fill-color: var(--tl-navy); text-shadow: 0 1px 0 #FFFFFF, 0 0 6px rgba(255, 255, 255, .95), 0 0 16px rgba(255, 255, 255, .85), 0 0 30px rgba(190, 220, 250, .7); } /* Bevezeto szoveg: feher sav NELKUL, markansabb (600-as, sotet navy), mogotte feher-halvanykek bevilagitas, hogy a bordakon is olvashato legyen (Karesz, 09-29). */ html[data-theme] .elementor .tl-hero .tl-hero-plate p.tl-lead { color: #0B2A4A; font-weight: 600; background: none; padding: 0 4px; text-shadow: 0 1px 0 #FFFFFF, 0 0 4px rgba(255, 255, 255, 1), 0 0 10px rgba(255, 255, 255, .95), 0 0 22px rgba(225, 238, 252, .9); } /* a tabla mogott is enyhe feher derenges, hogy "vilagitson" a lemezen */ html[data-theme] .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child { box-shadow: inset 2px 3px 8px rgba(0, 0, 0, .55), inset -1px -1px 2px rgba(255, 255, 255, .10), 0 0 0 1px #8F99A4, 0 8px 18px rgba(6, 50, 90, .35), 0 0 28px 6px rgba(255, 255, 255, .75); } /* Termekeink gomb: acelkek femes, feher felirat */ html[data-theme] .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary:not([href*="/szinek"]) { color: #FFFFFF; text-shadow: 0 1px 1px rgba(6, 50, 90, .6); border: 1px solid #7FB5E3; border-radius: 7px; background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .32) 50%, transparent 56%), var(--tl-blue-metal); /* halkabb csillanas: a feher felirat ne tunjon el */ background-size: 300% 100%, auto; background-repeat: no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 12px rgba(6, 50, 90, .3); } html[data-theme] .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary:not([href*="/szinek"]):hover, html[data-theme] .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary:not([href*="/szinek"]):focus-visible { color: #FFFFFF; background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .32) 50%, transparent 56%), var(--tl-blue-metal); /* halkabb csillanas: a feher felirat ne tunjon el */ background-size: 300% 100%, auto; background-repeat: no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px rgba(6, 50, 90, .35), 0 0 14px rgba(90, 160, 219, .45); } /* --- 6. AJANLATKERO GOMBOK: arany femes kitoltes, navy felirat. Csak a v11 valtozoit irjuk at - a gombok szerkezete marad. ------ */ :root { --tl-offer-bg: linear-gradient(180deg, #F6DE8D 0%, #E3C15C 35%, #D4AE3A 60%, #B88E26 100%); --tl-offer-ink: #0A3D66; --tl-offer-border: #F4DC86; --tl-offer-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 4px 12px rgba(6, 50, 90, .28); --tl-offer-bg-hover: linear-gradient(180deg, #FBE9A8 0%, #EACB6A 35%, #DDB944 60%, #C39A2C 100%); --tl-offer-ink-hover: #06325A; --tl-offer-border-hover: #FFF1C2; --tl-offer-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(6, 50, 90, .32), 0 0 14px rgba(212, 174, 58, .5); } /* --- 7. MOBIL (<768): a tabla ne logjon ki a lemezbol nagyitott betuvel sem (150%-os rendszer-betumeret mellett mérve: 360-412 px). - a tabla legfeljebb a lemez belso szelessege, kisebb belso margoval - a 2. sor ("es szendvicspanel") kisebb, igy egy sorban marad - a lemez oldalso paddingje kisebb */ @media (max-width: 767.98px) { html[data-theme] .elementor .tl-hero .tl-hero-plate { padding-inline: 12px; } html[data-theme] .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child { max-width: 100%; box-sizing: border-box; padding: .2em .3em .26em; border-width: 6px; } html[data-theme] .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child > span + span { font-size: .74em; } } /* --- 8. VILAGOS BOR: a femes kek a domináns (Karesz, 09-29) ------- Csak a vilagos borre; a sotet bor valtozatlan (jovahagyva). A fem-valtozok (--tl-bar-blue, --tl-rail-*, --tl-key) a header.css v14 blokkjaban vannak (:root), itt csak hasznaljuk oket. */ /* "alt" szakaszok: szalcsiszolt kek femsav krom sinnel felul-alul */ html[data-theme="light"] .elementor .tl-section--alt { background: var(--tl-rail-top) top / 100% 7px no-repeat, var(--tl-rail-bot) bottom / 100% 7px no-repeat, var(--tl-bar-blue); } /* a szakaszfej (eyebrow, H2, lead) a kek alapon vilagos */ html[data-theme="light"] .elementor .tl-section--alt .tl-section-head { --ink: #FFFFFF; --ink-muted: #D6E4F2; --tl-h2: #FFFFFF; } html[data-theme="light"] .elementor .tl-section--alt .tl-section-head > h2.tl-h2 { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); } html[data-theme="light"] .elementor .tl-section--alt .tl-section-head > p.tl-eyebrow { color: #A9CCEE; } html[data-theme="light"] .elementor .tl-section--alt a.tl-tile, html[data-theme="light"] .elementor .tl-section--alt div.tl-card { box-shadow: 0 10px 24px rgba(0, 20, 45, .35); border-color: rgba(255, 255, 255, .6); } /* szamok: kek fem panelek, feher szamok */ html[data-theme="light"] .elementor div.tl-stat { --ink-muted: #DCE8F4; background: var(--tl-key); border: 1px solid #1D5D9F; border-top-color: #6AA6DE; border-bottom-color: #05284D; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px rgba(6, 50, 90, .25); } html[data-theme="light"] .elementor div.tl-stat > p.tl-stat-num { color: #FFFFFF; text-shadow: 0 2px 3px rgba(0, 0, 0, .4); } /* profil-chipek: kiemelkedo kek gombok (mint a menupontok) */ html[data-theme="light"] .elementor a.tl-chip:not([href*="/ajanlatkeres"]) { color: #FFFFFF; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); border: 1px solid #1D5D9F; border-top-color: #6AA6DE; border-bottom-color: #05284D; border-radius: 7px; background: var(--tl-key); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 3px rgba(0, 0, 0, .3); } html[data-theme="light"] .elementor a.tl-chip:not([href*="/ajanlatkeres"]):hover, html[data-theme="light"] .elementor a.tl-chip:not([href*="/ajanlatkeres"]):focus-visible { color: #F4DC86; border-color: #1D5D9F; background: var(--tl-key-hover); } /* lepesek szamkorei: kek fem, az utolso arany */ html[data-theme="light"] .tl-steps .tl-step-num { color: #FFFFFF; border-color: #1D5D9F; background: var(--tl-key); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 4px rgba(0, 0, 0, .3); } html[data-theme="light"] .tl-steps .tl-step:last-child .tl-step-num { color: var(--tl-navy); border-color: #F4DC86; background: var(--tl-gold-metal); } /* --- 9. "SZINEK" GOMBOK: szivarvany helyett patina (zold-kek femes), ami nem a klasszikus gombszin, de jol megy a kekhez es az aranyhoz. Minden "Szinek" gombra ervenyes (hero, "Az osszes szin"). Alternativa (html.v-rez): rez. */ :root { --tl-patina: linear-gradient(180deg, #7FD1BE 0%, #3FA28E 38%, #23806F 60%, #1A6A5D 100%); --tl-patina-hover: linear-gradient(180deg, #98E0CF 0%, #52B5A0 38%, #2B917E 60%, #1F7869 100%); --tl-rez: linear-gradient(180deg, #F0B58A 0%, #CF7F4B 38%, #B0612F 60%, #8E4A22 100%); --tl-rez-hover: linear-gradient(180deg, #F7C7A2 0%, #DC915D 38%, #BE6F3B 60%, #9C5429 100%); --tl-colors-bg: var(--tl-patina); --tl-colors-bg-hover: var(--tl-patina-hover); --tl-colors-border: #A6E3D5; } html.v-rez { --tl-colors-bg: var(--tl-rez); --tl-colors-bg-hover: var(--tl-rez-hover); --tl-colors-border: #F5CDAE; } html[data-theme] .elementor a.tl-btn-secondary[href*="/szinek"], html[data-theme] .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary[href*="/szinek"] { color: #FFFFFF; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); border: 1px solid var(--tl-colors-border); border-radius: 7px; background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .32) 50%, transparent 56%), var(--tl-colors-bg); background-size: 300% 100%, auto; background-repeat: no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 12px rgba(6, 50, 90, .3); animation: tl-shine 6s ease-in-out infinite; } html[data-theme] .elementor a.tl-btn-secondary[href*="/szinek"]:hover, html[data-theme] .elementor a.tl-btn-secondary[href*="/szinek"]:focus-visible, html[data-theme] .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary[href*="/szinek"]:hover, html[data-theme] .elementor .tl-hero .tl-hero-plate a.tl-btn-secondary[href*="/szinek"]:focus-visible { color: #FFFFFF; border-color: #FFFFFF; background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .32) 50%, transparent 56%), var(--tl-colors-bg-hover); background-size: 300% 100%, auto; background-repeat: no-repeat; filter: none; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px rgba(6, 50, 90, .35), 0 0 14px rgba(127, 209, 190, .45); } /* hero-gombsor kozepre (asztalon a lemez balra igazit, igy a gombsor a tartalma szelessegere zsugorodott es balra ult) */ html[data-theme] .elementor .tl-hero .tl-hero-plate > div:last-child { align-self: stretch; justify-content: center; } /* --- 10. BEVILAGITAS a kek szakaszok fo szovegei mogott ----------- */ html[data-theme="light"] .elementor .tl-section--alt .tl-section-head > h2.tl-h2 { text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 18px rgba(130, 190, 250, .55), 0 0 40px rgba(130, 190, 250, .3); } html[data-theme="light"] .elementor div.tl-stat > p.tl-stat-num { text-shadow: 0 2px 3px rgba(0, 0, 0, .4), 0 0 16px rgba(150, 205, 255, .55); } /* ==================== v14 SZINATALLAS VEGE ======================== */ /* v15 (2026-10-02) - TELEFON, EZUST LEMEZ, GOMBOK, SZINEK OLDAL */ /* 1. Telefonszamok: markans szam, arany kor-ikon, neha hullamgyuru */ :root{--tl-tel-ink:#0A3D66} html[data-theme="dark"]{--tl-tel-ink:#F4DC86} html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]){gap:12px} html[data-theme] .elementor .tl-contact-row a[href^="tel:"]{font-family:var(--font-heading),sans-serif;font-weight:700;font-size:clamp(17px,4.9vw,24px);letter-spacing:.03em;line-height:1.1;color:var(--tl-tel-ink)} html[data-theme] .elementor .tl-contact-row a[href^="tel:"]{white-space:nowrap} html[data-theme] .elementor .tl-kollega .tl-contact-row:has(> p a[href^="tel:"]){flex-direction:column;gap:8px} html[data-theme] .elementor .tl-kollega .tl-contact-row a[href^="tel:"]{font-size:clamp(15px,1.6vw,21px)} @media (max-width:1024px){html[data-theme] .elementor .tl-kollega .tl-contact-row a[href^="tel:"]{font-size:21px}} @media (max-width:767px){html[data-theme] .elementor .tl-kollega .tl-contact-row a[href^="tel:"]{font-size:clamp(17px,4.9vw,24px)}} html[data-theme] .elementor .tl-contact-row a[href^="tel:"]:hover,html[data-theme] .elementor .tl-contact-row a[href^="tel:"]:focus-visible{color:var(--tl-tel-ink);text-decoration:underline;text-decoration-color:var(--tl-gold);text-underline-offset:.2em} html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child{position:relative;width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:grid;place-items:center;color:var(--tl-navy);background:var(--tl-gold-metal);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 6px rgba(6,50,90,.3)} html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child svg{width:19px;height:19px} html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child::before,html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--tl-gold);opacity:0;pointer-events:none;animation:tl-ring 4.6s ease-out infinite} html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child::after{animation-delay:.4s} @keyframes tl-ring{0%,58%{transform:scale(1);opacity:0}62%{opacity:.75}100%{transform:scale(2.1);opacity:0}} @media (prefers-reduced-motion:reduce){html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child::before,html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child::after{animation:none}} /* 2. Nevek bevilagitasa megszunik */ html[data-theme] .elementor .tl-card:has(> .tl-contact-row) > .tl-h3{text-shadow:none} /* 3. Fooldal: kollega-kartyak = vesett ezust tablalemez (jobb es also vastag el) */ html[data-theme] .elementor div.tl-card:has(> .tl-contact-row a[href^="tel:"]){border-style:solid;border-color:transparent;border-width:6px;background:linear-gradient(var(--bg-surface-alt),var(--bg-surface-alt)) padding-box,var(--tl-silver-frame) border-box;box-shadow:inset 2px 2px 6px rgba(0,20,45,.25),inset -1px -1px 0 rgba(255,255,255,.7),0 10px 22px rgba(0,20,45,.38)} /* 4. Ismerje meg a csapatot / Utvonaltervezes: ezust fem gomb */ html[data-theme] .elementor .tl-container:not(.tl-hero) a.tl-btn-secondary:not([href*="/ajanlatkeres"]):not([href*="/szinek"]){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 28px;font-family:var(--tl-offer-font);font-weight:700;font-size:15px;letter-spacing:.5px;line-height:1.2;text-transform:uppercase;text-decoration:none;color:#FFFFFF;text-shadow:0 1px 1px rgba(6,50,90,.65);border:2px solid transparent;border-radius:7px;background-image:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.28) 50%,transparent 56%),var(--tl-blue-metal),var(--tl-silver-frame);background-origin:padding-box,padding-box,border-box;background-clip:padding-box,padding-box,border-box;background-size:300% 100%,auto,auto;background-repeat:no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px rgba(0,20,45,.38);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,color .2s ease} html[data-theme] .elementor .tl-container:not(.tl-hero) a.tl-btn-secondary:not([href*="/ajanlatkeres"]):not([href*="/szinek"])::after{content:"";flex:none;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease} html[data-theme] .elementor .tl-container:not(.tl-hero) a.tl-btn-secondary:not([href*="/ajanlatkeres"]):not([href*="/szinek"]):hover,html[data-theme] .elementor .tl-container:not(.tl-hero) a.tl-btn-secondary:not([href*="/ajanlatkeres"]):not([href*="/szinek"]):focus-visible{color:#F4DC86;transform:translateY(-2px);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 18px rgba(0,20,45,.42),0 0 14px rgba(244,220,134,.5)} html[data-theme] .elementor .tl-container:not(.tl-hero) a.tl-btn-secondary:not([href*="/ajanlatkeres"]):not([href*="/szinek"]):hover::after{transform:translateX(2px) rotate(45deg)} /* 4b. Ismerje meg a csapatot: sotetkek uveg-gomb ezust kerettel (elter az Utvonaltervezestol) */ html[data-theme] .elementor .tl-container:not(.tl-hero) a.tl-btn-secondary:not([href*="/ajanlatkeres"]):not([href*="/szinek"])[href*="/kapcsolat"]{color:#FFFFFF;background-image:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.22) 50%,transparent 56%),linear-gradient(180deg,rgba(10,61,102,.55),rgba(5,28,58,.8)),var(--tl-silver-frame);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -8px 14px rgba(0,10,30,.25),0 4px 12px rgba(0,20,45,.4)} html[data-theme] .elementor .tl-container:not(.tl-hero) a.tl-btn-secondary:not([href*="/ajanlatkeres"]):not([href*="/szinek"])[href*="/kapcsolat"]:hover,html[data-theme] .elementor .tl-container:not(.tl-hero) a.tl-btn-secondary:not([href*="/ajanlatkeres"]):not([href*="/szinek"])[href*="/kapcsolat"]:focus-visible{color:var(--tl-navy);text-shadow:0 1px 0 rgba(255,255,255,.7);background-image:var(--tl-shine),var(--tl-silver),var(--tl-silver-frame);filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(0,20,45,.42),0 0 14px rgba(244,220,134,.5)} /* 5. Foszintu H2-k kozepre; kek savon feher (a Szinek oldal H2-i nem tl-section-head-ben vannak) */ .elementor .tl-container > h2.tl-h2{text-align:center} html[data-theme="light"] .elementor .tl-section--alt > .tl-container > h2.tl-h2{color:#FFFFFF;text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 18px rgba(130,190,250,.55),0 0 40px rgba(130,190,250,.3)} /* 6. Szinek oldal */ html[data-theme] .elementor-119 .tl-container:has(> h1.tl-h1){align-items:center;text-align:center} html[data-theme] .elementor-119 .tl-container:has(> h1.tl-h1) > .tl-lead{max-width:760px} html[data-theme] .elementor-119 .tl-container:has(> h1.tl-h1) > p:last-child{max-width:820px;font-size:clamp(16px,.4vw + 15px,19px);font-weight:700;line-height:1.45;color:var(--tl-h2)} html[data-theme] .elementor-119 .tl-tile > div{align-items:center;text-align:center} html[data-theme] .elementor-119 .tl-container > .tl-bare{display:flex;flex-wrap:wrap;justify-content:center;gap:16px} html[data-theme] .elementor-119 .tl-container > .tl-bare > .tl-tile{flex:0 0 214px;max-width:100%} @media (max-width:767px){html[data-theme] .elementor-119 .tl-container > .tl-bare{gap:12px}html[data-theme] .elementor-119 .tl-container > .tl-bare > .tl-tile{flex:0 0 calc(50% - 6px)}} html[data-theme] .elementor-119 > .tl-section:last-child .tl-container > .tl-card{position:relative;max-width:900px;margin-inline:auto;margin-block-start:16px} html[data-theme] .elementor-119 > .tl-section:last-child .tl-container > .tl-card::before{content:"";position:absolute;left:50%;top:-24px;width:min(420px,72%);height:2px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,var(--metal) 18%,var(--tl-gold) 50%,var(--metal) 82%,transparent)} html[data-theme] .elementor-119 > .tl-section:last-child .tl-container > .tl-card::after{content:"";position:absolute;left:50%;top:-24px;width:9px;height:9px;transform:translate(-50%,-50%) rotate(45deg);background:var(--tl-gold-metal);box-shadow:0 0 0 3px var(--bg-base),0 1px 3px rgba(0,0,0,.3)} /* v15 VEGE */ /* v16 (2026-10-03) - IKONOK, CSEMPE-KOZEP, RAL KERET, TELEPHELY KERET */ /* 1 Telefon ikon: tomor kek kagylo, kisebb kor. A kor em-ben meretezve, a betumerete = a telefonszam betumerete, igy nagyitott betuvel (150%) egyutt no a felirattal, es mindig csak kicsit nagyobb nala. */ html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child{font-size:clamp(17px,4.9vw,24px);width:1.2em;height:1.2em;flex:0 0 1.2em;color:#15589A} html[data-theme] .elementor .tl-kollega .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child{font-size:clamp(15px,1.6vw,21px)} @media (max-width:1024px){html[data-theme] .elementor .tl-kollega .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child{font-size:21px}} @media (max-width:767px){html[data-theme] .elementor .tl-kollega .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child{font-size:clamp(17px,4.9vw,24px)}} /* az SVG inline style-ja 100%-ra allitja -> !important kell; a regi '.tl-contact-row svg{fill:none}' miatt volt vonalas */ html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child svg{width:.6em!important;height:.6em!important;fill:currentColor;stroke:currentColor;stroke-width:1} /* 2 E-mail ikon: ugyanaz az arany kor, kek boritek, arany fedel-vonal; hullamzas NINCS */ html[data-theme] .elementor .tl-contact-row:has(> p a[href^="mailto:"]) > div:first-child{width:1.5em;height:1.5em;flex:0 0 1.5em;border-radius:50%;display:grid;place-items:center;color:#15589A;background:var(--tl-gold-metal);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 6px rgba(6,50,90,.3)} html[data-theme] .elementor .tl-contact-row:has(> p a[href^="mailto:"]) > div:first-child svg{width:.85em!important;height:.85em!important} html[data-theme] .elementor .tl-contact-row:has(> p a[href^="mailto:"]) > div:first-child svg path{fill:currentColor;stroke:currentColor;stroke-width:1} html[data-theme] .elementor .tl-contact-row:has(> p a[href^="mailto:"]) > div:first-child svg polyline{fill:none;stroke:#F4DC86;stroke-width:2} /* 3 Csempek (felhasznalas + termekeink): minden felirat kozepen; a cimsav nyila abszolut a jobb szelen, igy a cim valoban kozepre kerul */ html[data-theme] .elementor a.tl-tile > div{align-items:center;text-align:center} html[data-theme] .elementor a.tl-tile > div > h3.tl-h3{position:relative;justify-content:center;text-align:center;padding-inline:2.4em} html[data-theme] .elementor a.tl-tile > div > h3.tl-h3::after{position:absolute;right:14px;top:50%;margin-top:-.65em} /* 4 Szinek oldal: vekony keret a szinmintakon - feher alapon a RAL 9010 (feher) is lathato */ html[data-theme] .elementor-119 .tl-tile > img{box-sizing:border-box;border:1px solid #AEB8C3} html[data-theme="dark"] .elementor-119 .tl-tile > img{border-color:#3A5470} /* 5 Minden kapcsolati kartya (pl. Kapcsolat oldal telephely-kartyai) ugyanazt az ezust keretet kapja, mint a kollega-kartyak */ html[data-theme] .elementor div.tl-card:has(> .tl-contact-row){border-style:solid;border-color:transparent;border-width:6px;background:linear-gradient(var(--bg-surface-alt),var(--bg-surface-alt)) padding-box,var(--tl-silver-frame) border-box;box-shadow:inset 2px 2px 6px rgba(0,20,45,.25),inset -1px -1px 0 rgba(255,255,255,.7),0 10px 22px rgba(0,20,45,.38)} /* v16 VEGE */ /* v16b (2026-10-03) - IKON A SZAM ELOTT, KEK GOMB FEHER IKONNAL (proba) */ /* 1 Kollega-kartyak: a telefon-ikon a szam ELE kerul (sor, nem oszlop). flex-wrap: ha 150%-os betunel keskeny a kartya, az ikon a szam fole csuszik, de vizszintesen nem log ki. */ html[data-theme] .elementor .tl-kollega .tl-contact-row:has(> p a[href^="tel:"]){flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px} /* 2 Gomb: arany helyett acelkek fem, a kagylo es a boritek FEHER */ html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child, html[data-theme] .elementor .tl-contact-row:has(> p a[href^="mailto:"]) > div:first-child{color:#FFFFFF;background:var(--tl-blue-metal);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 6px rgba(6,50,90,.35)} /* boritek fedel-vonala kekre, hogy a feher boritekon latsszon */ html[data-theme] .elementor .tl-contact-row:has(> p a[href^="mailto:"]) > div:first-child svg polyline{stroke:#1F6FB2} /* hullamgyuru is kek (az arany gomb mar nincs) */ html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child::before, html[data-theme] .elementor .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child::after{border-color:#5AA0DB} /* v16b VEGE */ /* v16d (2026-10-03) - LEPESEK VONALA, KAPCSOLATI SOROK SZOVEGE */ /* 1 Lepesek: az Elementor global class (tl-step) felso szegelyt rajzol (border-top 1px), ezt a style.css sajat 'border-top:0'-ja nem tudja felulirni (az Elementor CSS kesobb toltodik) -> eros szelektor. */ html[data-theme] .elementor .tl-steps .tl-step{border-top:0} /* 2 Kapcsolati sorok (cim, nyitvatartas): az ikon melletti tobbsoros szoveg balra zart, igy az ikonnal egy egyseget alkot (kozepre zarva az ikon "elszakadt" a szovegtol, Karesz telefonja 150%) */ html[data-theme] .elementor .tl-contact-row > p{text-align:left} /* v16d VEGE */ /* v16e (2026-10-03) - HERO: BORDAZOTT LEMEZ HELYETT KARTYA EZUST KERETTEL (proba, Karesz) */ /* A hero-lemez rajzat a ::before adja. A bordazott hatter es az alsó trapez-kivagas (mask) helyett ugyanaz a kartya-stilus, mint a kollega-kartyakon: 6 px ezust keret, vilagosban feher, sotetben #162A3A. A lemez tobbi eleme (tabla, EGYEDI MERETRE, lead, gombok) marad. */ html[data-theme] .elementor .tl-hero .tl-hero-plate{border-radius:16px;padding-bottom:40px} html[data-theme] .elementor .tl-hero .tl-hero-plate::before{ -webkit-mask:none;mask:none; border:6px solid transparent;border-radius:inherit; background:linear-gradient(var(--tl-plate-bg,#FFFFFF),var(--tl-plate-bg,#FFFFFF)) padding-box,var(--tl-silver-frame) border-box; box-shadow:inset 2px 2px 6px rgba(0,20,45,.25),inset -1px -1px 0 rgba(255,255,255,.7)} @media (max-width:767.98px){ html[data-theme] .elementor .tl-hero .tl-hero-plate{border-radius:12px;padding-bottom:28px} html[data-theme] .elementor .tl-hero .tl-hero-plate::before{-webkit-mask:none;mask:none} } /* SOTET BOR: sotet kartya, vilagos szovegek, a tabla hattere vilagosabb kek (a sotet kartyan elvaljon, de ne legyen rikito) */ html[data-theme="dark"] .elementor .tl-hero .tl-hero-plate{--tl-plate-bg:#162A3A;--ink:#E6EDF4;--ink-muted:#A3B3C4;--line:#3A5470;--link:#8CC0EA; filter:drop-shadow(0 18px 22px rgba(0,0,0,.45)) drop-shadow(0 4px 8px rgba(0,0,0,.3))} html[data-theme="dark"] .elementor .tl-hero .tl-hero-plate::before{box-shadow:inset 2px 2px 6px rgba(0,0,0,.45),inset -1px -1px 0 rgba(255,255,255,.12)} html[data-theme="dark"] .elementor .tl-hero .tl-hero-title:has(> span > span){ --field:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 45%),linear-gradient(180deg,#336F9F 0%,#245887 55%,#1C4A74 100%)} html[data-theme="dark"] .elementor .tl-hero .tl-hero-title:has(> span > span) > span:first-child{ box-shadow:inset 2px 3px 8px rgba(0,0,0,.45),inset -1px -1px 2px rgba(255,255,255,.12),0 0 0 1px #8F99A4,0 8px 18px rgba(0,0,0,.4),0 0 24px 4px rgba(140,192,234,.18)} html[data-theme="dark"] .elementor .tl-hero .tl-hero-title:has(> span > span) > span + span{ color:#E6EDF4;-webkit-text-fill-color:#E6EDF4;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(140,192,234,.35)} html[data-theme="dark"] .elementor .tl-hero .tl-hero-plate p.tl-lead{ color:#DCE6F0;text-shadow:0 1px 2px rgba(0,0,0,.6)} /* v16e VEGE */ /* v16f (2026-10-03) - CSEMPEK: EGYFORMA MAGAS CIMSAV TOBB OSZLOPBAN */ /* Ha egy cim ket sorba torik (pl. "Cserepeslemez es tablalemez"), a sav magasabb lett, es a leirasok elcsusztak a szomszedokhoz kepest. >=768 px-en (ahol tobb oszlop van) minden cimsav 2 sornyi magas, igy a savok es a leirasok egy vonalban kezdodnek. Mobilon (1 oszlop) marad a termeszetes magassag. */ @media (min-width:768px){ html[data-theme] .elementor a.tl-tile > div > h3.tl-h3{min-height:calc(2.4em + 24px)} } /* v16f VEGE */ /* v16g (2026-10-03) - FELHASZNALAS SZERINT: EGYFORMA KARTYAK ("A" elrendezes) */ /* A korabbi "egy nagy + negy kicsi" racs helyett egyforma kartyak sorban, kozepre zarva: asztalon 3 / sor (5 kartyanal 3+2, 6-nal 3+3), tableten 2, mobilon 1. A kep 4:3 (Elementor helyi osztaly), a cimsavak a v16f szerint egy magassagban -> a kartyak mindig egy vonalban maradnak. */ html[data-theme] .elementor .elementor-element-19f5c403{display:flex;flex-wrap:wrap;justify-content:center;gap:20px} html[data-theme] .elementor .elementor-element-19f5c403 > a.tl-tile{flex:0 1 calc((100% - 40px) / 3);min-width:0;grid-row:auto;grid-column:auto} @media (max-width:1024px){html[data-theme] .elementor .elementor-element-19f5c403 > a.tl-tile{flex-basis:calc((100% - 20px) / 2)}} @media (max-width:767px){html[data-theme] .elementor .elementor-element-19f5c403 > a.tl-tile{flex-basis:100%}} /* v16g VEGE */ /* v16i (2026-10-03) - SOTET BOR: CSEMPE-CIMSAV SOTETKEK (a fejlec menugombjaival egyezo) */ html[data-theme="dark"] .elementor a.tl-tile > div > h3.tl-h3{ background:linear-gradient(180deg,#2A4966 0%,#1B3550 42%,#12273F 62%,#16304A 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.35); color:#E6EDF4;text-shadow:0 1px 1px rgba(0,0,0,.6)} /* v16i VEGE */ /* v17 (2026-10-03, javitva 23:55) - KAPCSOLATI SOROK ASZTALON: IKON A SZOVEG ELOTT, MINDIG KARTYAN BELUL */ @media (min-width:1025px){ /* 1 A kartya "kontener": a cqi egyseg = a kartya belso szelessege. A betumeretek ebbol szamolodnak, igy a szoveg soha nem log ki es nem torik (a kartya szelesseget a racs adja, nem a tartalom). */ html[data-theme] .elementor :is(.tl-card,.tl-infobox):has(.tl-contact-row a[href^="mailto:"]){container-type:inline-size} /* 2 Kapcsolat oldal, 4 hasab: keskeny kartya -> kisebb oldalso belso margo, tobb hely a szovegnek */ html[data-theme] .elementor .tl-kollega:has(.tl-contact-row a[href^="mailto:"]){padding-inline:20px} /* 3 E-mail: ikon + cim egy sorban (mint mobilon). Meret: (belso szelesseg - res) / 13,4 (a cim 11,53 em Barlow 600-ban + 1,5 em ikon + tartalek), 12 es 20 px kozott. */ html[data-theme] .elementor .tl-contact-row:has(> p a[href^="mailto:"]){font-size:clamp(12px,calc((100cqi - 10px) / 13.4),20px);gap:.5em;flex-direction:row} html[data-theme] .elementor .tl-contact-row:has(> p a[href^="mailto:"]) > p{font-size:inherit} /* 4 Telefon: ikon a szam ELOTT, nem tordelodik (mint mobilon). A szam 8,22 em Oswald 700-ban, + 1,2 em ikon + res -> (belso szelesseg - 18px) / 9,8; a felso hatar a korabbi meret (21 ill. 24 px). */ html[data-theme] .elementor :is(.tl-card,.tl-infobox) .tl-contact-row:has(> p a[href^="tel:"]){flex-direction:row;flex-wrap:nowrap} html[data-theme] .elementor .tl-card .tl-contact-row a[href^="tel:"], html[data-theme] .elementor .tl-card .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child{font-size:clamp(13px,calc((100cqi - 18px) / 9.8),24px)} html[data-theme] .elementor .tl-kollega .tl-contact-row a[href^="tel:"], html[data-theme] .elementor .tl-kollega .tl-contact-row:has(> p a[href^="tel:"]) > div:first-child{font-size:clamp(13px,calc((100cqi - 18px) / 9.8),21px)} } /* 5 Kollega-kartyak: a telefon- es e-mail-sor minden kartyaban egy vonalban (a racs egyforma magas kartyakat ad; a hosszabb beosztas-szoveg feletti ures hely a beosztas ALA kerul, nem a kartya aljara) */ html[data-theme] .elementor .tl-card:has(> .tl-contact-row a[href^="mailto:"]) > .tl-contact-row:has(a[href^="tel:"]){margin-top:auto} /* v17 VEGE */ /* v29 (2026-10-08) - Egy forras: generalt fooldali blokkok, Mas termekcsaladok, szakaszcsere */ /* A shortcode-widget (V3) a V4 flex-tarolokban kozepre zsugorodna -> teljes szelesseg, margo nelkul. */ .elementor .elementor-widget-shortcode:has(.tl-gen){align-self:stretch;width:100%;max-width:100%;margin:0} /* Felhasznalas-kartyak [tl_felhasznalas_kartyak] - a 19f5c403 (v16g) megfeleloje. Az alap-stilus a tl-tile global class mintajara (azt az Elementor csak hasznalt elemhez irja ki); a szin, keret, arnyek es a kek cimsav a meglevo html[data-theme] .elementor a.tl-tile szabalyokbol jon. */ .elementor .tl-gen-felh{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;width:100%} .elementor .tl-gen-felh > a.tl-tile{flex:0 1 calc((100% - 40px) / 3);min-width:0;display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:0;border-radius:10px;border:1px solid var(--line);background-color:var(--bg-surface-alt);color:var(--ink);text-decoration:none} .elementor .tl-gen-felh .tl-gen-kep{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;flex:1 1 auto} .elementor .tl-gen-felh .tl-gen-tx{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:12px 16px 20px} .elementor .tl-gen .tl-h3{margin:0;font-family:var(--font-heading);font-weight:700;font-size:clamp(20px, .8vw + 17px, 26px);color:var(--ink);line-height:1.2} .elementor .tl-gen-felh .tl-gen-tx > p{margin:0;font-size:16px;color:var(--ink-muted);line-height:1.45} @media (max-width:1024px){.elementor .tl-gen-felh > a.tl-tile{flex-basis:calc((100% - 20px) / 2)}} @media (max-width:767px){.elementor .tl-gen-felh > a.tl-tile{flex-basis:100%}.elementor .tl-gen-felh .tl-gen-kep{aspect-ratio:16 / 9}} /* Profil-chipek [tl_profil_chipek] - a 214e320c + tl-chip global class megfeleloje; a vilagos bor kek fem gombja a meglevo html[data-theme="light"] .elementor a.tl-chip szabalybol jon. */ .elementor .tl-gen-chips{width:100%;display:grid;gap:8px;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))} .elementor .tl-gen-chips > a.tl-chip{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;text-align:center;font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1.2;color:var(--ink);padding:8px 12px;border-radius:4px;border:1px solid var(--line);background-color:transparent;text-decoration:none} @media (max-width:767px){.elementor .tl-gen-chips{grid-template-columns:1fr 1fr}} /* Mas termekcsaladok (v29b): cim (7e29c0a1 - V4 e-heading, ezert data-interaction-id) + sor (7e29c0a2) a chip-kartya ALATT. A felhasznalas-kartyak stilusa; elteres: sotetkek (navy) fem cimsav arany also vonallal. */ html[data-theme] .elementor [data-interaction-id="7e29c0a1"]{align-self:stretch;margin:24px 0 0;text-align:center} html[data-theme="light"] .elementor .tl-section--alt [data-interaction-id="7e29c0a1"]{color:#FFFFFF;text-shadow:0 1px 2px rgba(0,0,0,.45)} html[data-theme] .elementor .elementor-element-7e29c0a2{align-self:stretch;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:20px} html[data-theme] .elementor .elementor-element-7e29c0a2 > a.tl-tile{flex:0 1 calc((100% - 40px) / 3);min-width:0} html[data-theme] .elementor .elementor-element-7e29c0a2 > a.tl-tile > div > h3.tl-h3{background:var(--tl-navy-metal);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -3px 0 var(--tl-gold)} html[data-theme="dark"] .elementor .elementor-element-7e29c0a2 > a.tl-tile > div > h3.tl-h3{background:linear-gradient(180deg,#34404E 0%,#232D39 45%,#18202A 65%,#1E2833 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -3px 0 var(--tl-gold)} html[data-theme] .elementor .elementor-element-7e29c0a2 > a.tl-tile > div > p:nth-child(3){display:none} @media (max-width:1024px){html[data-theme] .elementor .elementor-element-7e29c0a2 > a.tl-tile{flex-basis:calc((100% - 20px) / 2)}} @media (max-width:767px){html[data-theme] .elementor .elementor-element-7e29c0a2 > a.tl-tile{flex-basis:100%}.elementor .elementor-element-7e29c0a2 > a.tl-tile > img{aspect-ratio:16 / 9}} /* Ajanlatkeres-szakasz (5e7289da) kek fem savon (vilagos bor): a lepesek szovege feher. */ html[data-theme="light"] .elementor .tl-section--alt .tl-steps .tl-step > .tl-h3{color:#FFFFFF;text-shadow:0 1px 2px rgba(0,0,0,.45)} html[data-theme="light"] .elementor .tl-section--alt .tl-steps .tl-step > p:not(.tl-step-num){color:#E3ECF5} html[data-theme="light"] .elementor .tl-section--alt .tl-steps .tl-step-num{border-color:#DDE3EA} html[data-theme="light"] .elementor .tl-section--alt .tl-steps .tl-step:not(:first-child)::before{background:rgba(255,255,255,.35)} html[data-theme="light"] .elementor .tl-section--alt .elementor-element-2d198575 p{color:#E3ECF5} /* v35: Kapcsolat (153) - CSAK a kozepso oszlop 3 elerhetoseg-doboza (65a25edd: Központ / Altalanos informacio / E-mail; a Nyitvatartas oszlop dobozai valtozatlanok) kitolti az oszlop magassagat, tartalma fuggolegesen kozepen. Sotet bor: a "Mi a szendvicspanel?" buborek stilusa (panel.css .tl-pn__bub): felulet-hatter, 12 px sarok, sotetebb hatter, arany keret: 1 px fent/bal, 3 px lent/jobb (arnyek-hatas; v35 kiserlet), kartya-arnyek. */ .elementor-153 .elementor-element-65a25edd > .tl-infobox{flex:1 1 auto;justify-content:center} html[data-theme="dark"] .elementor-153 .elementor-element-65a25edd > .tl-infobox{background-color:#0B1620;background-color:color-mix(in srgb,var(--bg-surface) 65%,#000 35%);border-style:solid;border-color:var(--tl-gold,#D4AE3A);border-width:1px 3px 3px 1px;border-radius:12px;box-shadow:var(--tl-card-shadow)} /* v35: vilagos bor: ugyanaz a keret kek szinnel (az Utvonaltervezes gomb kekje: --tl-blue #1F6FB2), a doboz hattere valtozatlan */ html[data-theme="light"] .elementor-153 .elementor-element-65a25edd > .tl-infobox{border-style:solid;border-color:var(--tl-blue,#1F6FB2);border-width:1px 5px 5px 1px;border-radius:12px;box-shadow:var(--tl-card-shadow)} /* v29 VEGE */ /* ================================================================== v41b (2026-10-11) - MOBILON KOZEPRE: cimek es oldal-bevezetok (Karesz: "b") Elv: kozepre csak a rovid, egyben olvasott elemek kerulnek - oldalcim (H1) + felette az eyebrow + alatta az oldal bevezetoje, valamint a szakaszcimek (H2) az arany vonallal. A tobbsoros torzsszoveg es a szakasz-bevezetok (pl. a "Tetore" alatti bekezdes, .tl-gy__intro) BALRA maradnak: igy minden sor ugyanott kezdodik, telefonon gyorsabban olvashato. A kartyakon beluli cimek (.tl-prof__card, Elementor .tl-card) sem valtoznak. ================================================================== */ @media (max-width: 767.98px) { /* 1. Oldalcim-blokk: sablonos oldalak (profil, panel, termekcsalad, kiegeszitok) */ .tl-prof__hero .tl-prof__eyebrow, .tl-prof__hero .tl-prof__title, .tl-prof__hero .tl-prof__lead { text-align: center; } .tl-prof__hero .tl-prof__lead { margin-inline: auto; } .tl-prof__hero .tl-prof__title::after { margin-inline: auto; } /* a cim alatti ugro-gombok (Tetore 5, Oldalfalra 5...) is kozepre */ .tl-prof__hero .tl-gy__jump { justify-content: center; } /* Ajanlatkeres, koszonjuk, jogi oldalak */ .tl-aj__eyebrow, .tl-aj__title, .tl-aj__lead, .tl-ty__lead, .tl-legal__title { text-align: center; } .tl-aj__title::after, .tl-legal__title::after { margin-inline: auto; } /* Szinproba fejresze */ #hz header.top { justify-content: center; text-align: center; } #hz header.top .lead { margin-inline: auto; } /* 2. Szakaszcimek (H2) - kartyan belul nem */ .tl-prof__h2:not(.tl-prof__card .tl-prof__h2), .tl-prof__band-title { text-align: center; } .tl-prof__h2:not(.tl-prof__card .tl-prof__h2)::after { margin-inline: auto; } /* 3. Elementor oldalak (fooldal, Szinek, Kapcsolat): a szakaszfej (eyebrow + H1/H2), es a bevezeto csak ott, ahol a fej oldalcimet (H1) tartalmaz */ .elementor .tl-section-head > .tl-eyebrow, .elementor .tl-section-head > .tl-h1, .elementor .tl-section-head > .tl-h2 { text-align: center; } .elementor .tl-section-head:has(> .tl-h1) > .tl-lead { text-align: center; margin-inline: auto; } } /* v41b VEGE */ /* v41c (2026-10-11) - MOBILON KOZEPRE: cim + kek gombcsoport (Karesz kerese) Minta: egy cim, kozvetlenul alatta kek chip-gombok ("Ezekhez a lemezekhez", "Kiegeszitok hozza", "Ajanlott termekek", "Tovabbi szendvicspanelek", fooldal: "Vagy valasszon profil szerint"). A cim csak akkor kerul kozepre, ha kozvetlenul utana gombcsoport all (:has(+ ...)) - a kartya tobbi cime (pl. "Mit kinalunk?") es a lista balra marad. */ @media (max-width: 767.98px) { .tl-prof__chips { justify-content: center; } .tl-prof__h3:has(+ .tl-prof__chips) { text-align: center; } .elementor .tl-h3:has(+ .elementor-widget-shortcode .tl-gen-chips) { text-align: center; } } /* v41c VEGE */ /* v41d (2026-10-11) - MOBILON KOZEPRE: kartyan beluli szakaszcimek + "tovabb" linkek (Karesz kerese) Kartyas H2-k: "A termekrol", "Szinek", "Kerheto filcbevonattal is", "A panelrol", "Roviden". (A v41b ezeket meg kihagyta; Karesz kerte, hogy ezek is kozepre keruljenek.) Linkek: "Szinmintak a Szinek oldalon ->" (cserepes/tablalemez), "Osszes szin nagyobb keppel ->" (11 profiloldal). A kartyak torzsszovege tovabbra is balra zart. */ @media (max-width: 767.98px) { .tl-prof__card .tl-prof__h2 { text-align: center; } .tl-prof__card .tl-prof__h2::after { margin-inline: auto; } .tl-prof__card > .tl-prof__more, .tl-prof__wrap > .tl-prof__more { display: block; width: fit-content; margin-inline: auto; text-align: center; } } /* v41d VEGE */ /* v41e (2026-10-11) - MOBILON KOZEPRE: "5-7%" kartya szama es cime (Karesz kerese) A magyarazo szoveg balra marad. A termekcsalad-oldalakon (.tl-tc__save) 600 px felett a kartya ket hasabos (szam | szoveg, termekcsalad.css), ott nem kozepezunk - csak 600 alatt. */ @media (max-width: 767.98px) { .tl-prof__save:not(.tl-tc__save) .tl-prof__save-num, .tl-prof__save:not(.tl-tc__save) .tl-prof__save-title { text-align: center; } } @media (max-width: 599.98px) { .tl-tc__save .tl-prof__save-num, .tl-tc__save .tl-prof__save-title { text-align: center; } } /* v41e VEGE */ /* v44 (2026-11-01) - arazas-kartya: a szam mar a teljes szelesseg (pl. '1 193 mm'), nem '5-7%'. Hosszabb, ezert kisebb betu es nem torheto (a szokoz se torje ketfele). */ .tl-prof__save .tl-prof__save-num{font-size:clamp(32px,3.6vw,46px);white-space:nowrap} /* v44b: nagyobb specificitas, mert a profil.css kesobb tolt */ /* v44 VEGE */ /* v46 (2026-11-01) - kezdolap 'Amire szamithat' alatti ISO/palyazat + 'Tovabba vallaljuk' sor (hirdetesbol) */ [data-interaction-id="a46e0001"]{margin-top:clamp(28px,4vw,48px);max-width:820px;margin-left:auto;margin-right:auto;text-align:center} [data-interaction-id="a46e0001"] p{margin:0 0 .6em} /* v46 VEGE */