/* * ultrahangostisztitok.hu — közös alap (minden új területen): betű, színek, gombok, fejléc, * lábléc, lízing-sáv a terméklapon. Csak `body.utk-terv` alatt hat — kapu nélkül semmit nem ír át. * * 4. kör (2026-10-03): „Színsávos szekciók" (dizajn-iranyok/4-kor/1-*.jpg; alapja a 3. kör 1-es * „Svájci klinikai" terve). Kobalt #0B3D91 + jégkék #DCEBFF + fehér, palaszürke #5B6B82 a másodlagos * szöveghez, szigorú rács, klinikai nyugalom; a hatszög képablak és sorszám-jelvény. A tervrajzos- * narancs (3. kör) és a sötét méhsejtes (2. kör) irányt a megrendelő elvetette. * * Egy forrás: ez a fájl. Minden „éles igazítás" blokk mellé oda van írva, melyik MÉRT jelenség * kényszerítette ki (számozva, a gepet.hu szokása szerint). A 3. körből átvett, máig érvényes * blokkok megtartották a számukat. */ /* Betű: Inter Tight (címek, gomb, menü) és Inter (szöveg) — a terv betűi, OFL, változó betűként, * a magyar karakterkészletre szűkítve (ő, ű benne), helyben kiszolgálva: a kettő együtt ~40 KB. * A Barlow/Plex Mono (3. kör) kikerült. */ @font-face { font-family: "Inter Tight"; font-weight: 500 700; font-display: swap; src: url(../fontok/InterTight-var.woff2) format("woff2"); } @font-face { font-family: "Inter"; font-weight: 400 700; font-display: swap; src: url(../fontok/Inter-var.woff2) format("woff2"); } body.utk-terv { --utk-kobalt: #0b3d91; /* fő szín: sáv, gomb, cím — fehér betű rajta 10,4:1 */ --utk-kobalt-mely: #072b6b; /* felső sáv, lábléc: a kobalt sáv mellett is külön tónus */ --utk-kobalt-vil: #12499f; /* gomb-hover */ --utk-azur: #1f66d1; /* hivatkozás, kiemelés fehéren (5,3:1) */ --utk-jeg: #dcebff; /* jégkék sáv */ --utk-jeg-halv: #f2f7ff; /* halvány jégkék: kártya, mező */ --utk-eg: #a9cbff; /* címke a kobalton (6,6:1) */ --utk-pala: #4f5f78; /* másodlagos szöveg: 6,4:1 fehéren, 5,3:1 jégkéken (a terv #5B6B82-je jégkéken 4,4:1 — bukott) */ --utk-szoveg: #0f172a; --utk-vonal: #c3d6f3; --utk-zold: #0f7a3d; /* „Készleten" — 5,6:1 fehéren */ --utk-sarga: #8a5a00; --utk-r: 10px; /* klinikai: lágy, de nem gömbölyű sarok */ /* 16. Széles kijelző (a tulajdonos, 2026-10-06: „a főnöknek a laptopja 17 colos, ne legyen annyira sávos"): * 1200 px-es fix sávnál 1920-on 360–360 px üres volt két oldalt. A sáv legfeljebb 1600 px, a margó arányos * (20 px mobilon → 3 vw → legfeljebb 64 px); 1920-on 160 px, 1536-on 46 px a margó. Mint a gasztrocenter.hu-n. */ --utk-sav: min(1600px, 100% - 2 * clamp(20px, 3vw, 64px)); --utk-hx: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); /* lapos tetejű hatszög — képablak */ --utk-hx-allo: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); /* csúcsára állított — jelvény */ --utk-cim: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--utk-szoveg); /* 1. Vízszintes görgetősáv: a beágyazott full-bleed elemek túlnyúlását a body vágja. * `clip`, nem `hidden` — a hidden görgető-konténert csinál és elrontja a ragadós fejlécet. */ overflow-x: clip; } body.utk-terv button, body.utk-terv input, body.utk-terv select, body.utk-terv textarea { font-family: inherit; } body.utk-terv h1, body.utk-terv h2, body.utk-terv h3 { font-family: var(--utk-cim); font-weight: 650; letter-spacing: -.015em; } /* Színsávok: minden témakör saját, teljes szélességű sávja (4. kör lényege). Egy szekció = egy sáv. */ .utk-s-feher { background: #fff; color: var(--utk-szoveg); } .utk-s-jeg { background: var(--utk-jeg); color: var(--utk-szoveg); } .utk-s-kobalt { background: var(--utk-kobalt); color: #fff; } .utk-sav { width: var(--utk-sav); margin-inline: auto; } .utk-kicker { margin: 0 0 .5rem; font: 600 .76rem/1.2 var(--utk-cim); letter-spacing: .14em; text-transform: uppercase; color: var(--utk-azur); } .utk-s-kobalt .utk-kicker { color: var(--utk-eg); } .utk-lead { color: var(--utk-pala); font-size: 1.04rem; line-height: 1.6; max-width: 62ch; } .utk-s-kobalt .utk-lead { color: #d4e3fb; } /* Gombok: tömör kobalt és körvonalas (a terv „Megnézem a gépeket" / „Kérj ajánlatot" párja), pirula alak. */ .utk-gomb, body.utk-terv .utk-gomb:visited { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .6em 1.4em; border-radius: 999px; background: var(--utk-kobalt); color: #fff; font: 600 1rem/1.15 var(--utk-cim); letter-spacing: 0; text-decoration: none; border: 2px solid var(--utk-kobalt); transition: background .15s, border-color .15s, color .15s; } .utk-gomb:hover, .utk-gomb:focus-visible { background: var(--utk-kobalt-vil); border-color: var(--utk-kobalt-vil); color: #fff; } .utk-gomb--vonal, body.utk-terv .utk-gomb--vonal:visited { background: transparent; color: var(--utk-kobalt); border-color: var(--utk-kobalt); } .utk-gomb--vonal:hover, .utk-gomb--vonal:focus-visible { background: var(--utk-kobalt); color: #fff; } /* a kobalt sávon fehér gomb (a terv „Ajánlatot kérek"-je) */ .utk-gomb--feher, body.utk-terv .utk-gomb--feher:visited { background: #fff; color: var(--utk-kobalt); border-color: #fff; } .utk-gomb--feher:hover, .utk-gomb--feher:focus-visible { background: var(--utk-jeg); border-color: var(--utk-jeg); color: var(--utk-kobalt); } .utk-gomb--kicsi { min-height: 44px; padding: .45em 1.1em; font-size: .95rem; } .utk-gombok { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } body.utk-terv :focus-visible { outline: 3px solid var(--utk-azur); outline-offset: 2px; } .utk-s-kobalt :focus-visible, .utk-lab :focus-visible { outline-color: #fff !important; } /* Hatszög képablak (a terv fő eszköze): lapos tetejű hatszög, vékony jégkék szegéllyel (a burkoló a * szegély, a kép 4 px-szel beljebb ugyanazzal a maszkkal). */ .utk-hex { display: block; aspect-ratio: 1.1547 / 1; clip-path: var(--utk-hx); background: var(--utk-jeg); padding: 4px; overflow: hidden; } /* 15. A négyzetes kép (268×268) a tartalom-minimummal felülírta az aspect-ratio-t: a hatszög 183×183-as dobozban, * függőlegesen nyújtva állt (mérés: 183×183 a szabályos 183×159 helyett). overflow:hidden → az arány nyer. */ .utk-hex img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: var(--utk-hx); background: var(--utk-jeg-halv); } .utk-hex--keret { background: var(--utk-kobalt); padding: 3px; } .utk-hex--feher { background: #fff; padding: 5px; } /* Ikon szövegsorban (UT_Kezdolap::ikon 'csak'). */ .utk-ikon { width: 1.25em; height: 1.25em; flex: none; } /* ------------------------------------------------------------------ fejléc (ut_terv_fejlec) */ /* 2. A GP felső sávja (Top Bar elem, #000 háttér) a mély kobaltba. */ body.utk-fejlec-terv .gb-container-4e22a1fd, body.utk-fejlec-terv .top-bar, body.utk-fejlec-terv .gb-headline-416721dd { background: var(--utk-kobalt-mely) !important; } body.utk-fejlec-terv .gb-container-4e22a1fd a { color: #dbe8ff !important; font: 500 13px/1.2 "Inter", system-ui, sans-serif; } /* Asztali fejléc: kobalt sáv fehér logóval és menüvel (a 4. kör 1-es asztali terve). */ body.utk-fejlec-terv .site-header { background: var(--utk-kobalt); border-bottom: 0; } body.utk-fejlec-terv .site-header .inside-header { padding-block: 12px; } /* A rövid logó (k1, 155×40 egység): 34 px magasan 132 px széles — a régi R5 153 px volt. */ body.utk-fejlec-terv .site-logo img { height: 46px; max-height: none; width: 161px; } /* width: lásd 7. (a 426×80-as attribútum) */ body.utk-fejlec-terv .main-navigation, body.utk-fejlec-terv .main-navigation .inside-navigation { background: transparent; } body.utk-fejlec-terv .main-navigation .main-nav ul li a { color: #fff; font: 600 1rem/1 var(--utk-cim); letter-spacing: 0; } body.utk-fejlec-terv .main-navigation .main-nav ul ul { background: #fff; box-shadow: 0 10px 30px rgba(11, 61, 145, .18); } body.utk-fejlec-terv .main-navigation .main-nav ul ul li a { color: var(--utk-kobalt); font-size: .95rem; background: #fff; } body.utk-fejlec-terv .main-navigation .main-nav ul ul li a:hover { background: var(--utk-jeg-halv); color: var(--utk-azur); } body.utk-fejlec-terv .main-navigation .main-nav > ul > li > a:hover, body.utk-fejlec-terv .main-navigation .main-nav > ul > li.current-menu-item > a { color: var(--utk-eg); } body.utk-fejlec-terv .main-navigation .menu-bar-item > a { color: #fff; } body.utk-fejlec-terv .main-navigation .ut-lizing-menu > a { color: #fff !important; } /* A GP külön mobil fejlécet rajzol (#mobile-header) — azt is stílusozni kell, különben mobilon a * régi színek maradnak (facelift-buktató). Mobilon a fejléc FEHÉR (a 4. kör mobilterve), kobalt logóval. */ body.utk-fejlec-terv #mobile-header, body.utk-fejlec-terv #mobile-header .inside-navigation { background: #fff; border-bottom: 1px solid var(--utk-vonal); } body.utk-fejlec-terv #mobile-header .menu-toggle, body.utk-fejlec-terv #mobile-header .menu-bar-item > a { color: var(--utk-kobalt); } body.utk-fejlec-terv #mobile-header .main-nav ul li a { font: 600 1.05rem/1.2 var(--utk-cim); color: var(--utk-kobalt); } /* 7. Mobilon a logó ne zsugorodjon: a flex-sorban 54 px-re esett (mérés). A kép width="426" height="80" * attribútumot visz (a régi PNG-ből), ezzel a width:auto torzult — kifejezett méret a k1 arányából (155:40). */ @media (max-width: 768px) { body.utk-fejlec-terv #mobile-header .site-logo { flex: none; } body.utk-fejlec-terv #mobile-header .site-logo img, body.utk-fejlec-terv #mobile-header img.is-logo-image { max-height: none; max-width: none; height: 40px; width: 140px; padding: 0; box-sizing: content-box; } /* a GP 10 px-es függőleges párnája a 32 px-es dobozban 47 px-esre zsugorította (mérés) */ body.utk-fejlec-terv .gb-container-4e22a1fd .gb-headline { font-size: 12px; padding-block: 3px; } /* 11. A felső sáv mobilon két 100%-os rácsoszlop volt, 74 px-t vitt el a hajtásból (mérés) — egy sorban. */ body.utk-fejlec-terv .gb-grid-wrapper-4dbd774a { justify-content: center; gap: 0 16px; flex-wrap: nowrap; margin-left: 0; } body.utk-fejlec-terv .gb-grid-wrapper-4dbd774a .gb-grid-column { width: auto; flex: 0 1 auto; padding-left: 0; } body.utk-fejlec-terv .gb-container-4e22a1fd a { font-size: 12px; } body.utk-fejlec-terv .gb-container-4e22a1fd svg { width: 13px; height: 13px; } } /* 17. Mobil kihúzható menü (GP slideout, „do-overlay"): a fenti `.main-navigation { background: transparent }` ezt is * átlátszóvá tette — a fehér menüpontok a lap tartalmán úsztak (mérés 2026-10-06, 390 px, mindkét úton, minden * oldalon; a régi felületen #000). Mély kobalt réteg, fehér betű; az aktuális pont égkék, nem fekete doboz. */ body.utk-fejlec-terv .slideout-navigation.main-navigation, body.utk-fejlec-terv .slideout-navigation.main-navigation .inside-navigation { background: var(--utk-kobalt-mely); } body.utk-fejlec-terv .slideout-navigation.main-navigation .main-nav ul li a { color: #fff; background: transparent; font: 600 1.15rem/1.2 var(--utk-cim); } body.utk-fejlec-terv .slideout-navigation.main-navigation .main-nav ul li.current-menu-item > a, body.utk-fejlec-terv .slideout-navigation.main-navigation .main-nav ul li a:hover { color: var(--utk-eg); background: transparent; } body.utk-fejlec-terv .slideout-navigation .slideout-exit, body.utk-fejlec-terv .slideout-navigation button.slideout-exit { color: #fff; } /* 12. A fejléc keresője (téma-widget): a kobalt sávon fehér mező, a gomb a halvány égkék. */ body.utk-fejlec-terv .site-header input[type="search"] { border: 1px solid #fff; border-radius: 999px 0 0 999px; background: #fff; color: var(--utk-szoveg); } body.utk-fejlec-terv .site-header button[type="submit"], body.utk-fejlec-terv .site-header .search-submit { background: var(--utk-jeg); color: var(--utk-kobalt); border-radius: 0 999px 999px 0; } /* 3. Mobil logó: a GP `object-fit:fill`-lel torzította (vizuális audit) — arányos méretezés. */ body.utk-fejlec-terv .site-logo img, body.utk-fejlec-terv .mobile-header-logo img { object-fit: contain; } /* ------------------------------------------------------------------ lábléc (ut_terv_lablec) */ /* A lábléc fölött díszítő sáv a bolt illusztrációs nyelvén (a kötelező szerkezet része): halvány * hatszögsor jégkékben, a lap hátteréből kiolvadva. */ .utk-lab { background: var(--utk-kobalt-mely); color: #c8d8f3; position: relative; overflow: hidden; margin-top: 0; } .utk-lab::before { content: ""; display: block; height: 30px; background-color: var(--utk-kobalt-mely); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 30'%3E%3Cpath d='M13 2h13l6.5 11.3L26 24.6H13L6.5 13.3z' fill='none' stroke='%23a9cbff' stroke-opacity='.35' stroke-width='1.4'/%3E%3Cpath d='M39 13.3h13M32.5 13.3H39' stroke='%23a9cbff' stroke-opacity='.2' stroke-width='1.4'/%3E%3C/svg%3E"); background-size: 52px 30px; background-position: center 6px; border-top: 4px solid var(--utk-azur); } .utk-lab__racs { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.05fr; gap: 48px; padding-block: 48px 40px; } .utk-lab__leiras { margin: 20px 0; line-height: 1.65; color: #c8d8f3; max-width: 46ch; } .utk-lab ul { list-style: none; margin: 0; padding: 0; } .utk-lab a { color: #fff; text-decoration: none; } .utk-lab a:hover { color: var(--utk-eg); text-decoration: underline; } .utk-lab__elerhetoseg li { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; line-height: 1.45; } .utk-lab__elerhetoseg .utk-ikon { color: var(--utk-eg); margin-top: 1px; } .utk-lab h2 { font: 600 .76rem/1.2 var(--utk-cim); letter-spacing: .14em; text-transform: uppercase; color: var(--utk-eg); margin: 6px 0 16px; } /* 4. Az Információ-hasáb szoros, egységes függőleges lista (a gasztrón az Astra l-h-2 sorközi * elemmé tette a menüpontokat — itt saját lista, de ugyanazt a sorközt tartjuk). */ .utk-lab__oszlop li { margin: 0 0 10px; line-height: 1.35; } .utk-lab__logo img { display: block; width: 240px; max-width: 100%; height: auto; } /* nagy logó (gepet.hu-arány: „legyen nagyobb, ott van hely bőven") */ .utk-lab__jog { position: relative; border-top: 1px solid rgba(169, 203, 255, .25); padding-block: 18px 26px; margin-block: 0; font-size: .86rem; color: #a8bddf; } /* GP: a régi lábléc-elem helye (`.site-footer`) ne adjon fölé margót (a régi Custom CSS 30px-et ad). */ body.utk-terv .site-footer { margin-top: 0 !important; background: none; } @media (max-width: 1000px) { .utk-lab__racs { grid-template-columns: 1fr 1fr; gap: 36px; } .utk-lab__marka { grid-column: 1 / -1; } } /* 10. Mobil lábléc: egyhasábosan 1 411 px volt (mérés) — a két linklista egymás mellett, a plakettek egy sorban. */ @media (max-width: 560px) { .utk-lab__racs { grid-template-columns: 1fr 1fr; padding-block: 32px 20px; gap: 22px 16px; } .utk-lab__marka, .utk-lab__jelvenyek { grid-column: 1 / -1; } .utk-lab__leiras { margin: 14px 0; font-size: .92rem; } .utk-lab__logo img { width: 200px; } .utk-lab__elerhetoseg li { margin: 6px 0; font-size: .92rem; } .utk-lab__oszlop li { margin-bottom: 2px; font-size: .92rem; } .utk-lab__oszlop a { display: inline-block; padding-block: 5px; } .utk-lab h2 { margin-bottom: 10px; } } /* 13. Tap-target: a lábléc elérhetőség-linkjei mobilon 21 px magasak voltak (söprés, 2026-10-03). */ .utk-lab__elerhetoseg a { display: inline-block; padding-block: 4px; } /* ------------------------------------------------------------- lízing-sáv a terméklapon */ .utk-lizingsav { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; padding: 12px 14px; border-radius: var(--utk-r); background: var(--utk-jeg-halv); border: 1px solid var(--utk-vonal); border-left: 4px solid var(--utk-kobalt) !important; color: var(--utk-szoveg); font-size: .95rem; line-height: 1.45; } .utk-lizingsav a { color: var(--utk-azur); font-weight: 650; } .utk-lizingsav .ikon .utk-ik { width: 34px; height: 34px; } /* --------------------------------------------------------------------- előnézet-jelölés */ .ut-elonezet-jelzo a { color: #9fd0ff !important; } /* 5. Variálható terméklap vízszintesen görgethető volt (scrollX = 300): a WC variációs * képernyőolvasó-üzenete (`div.reset_variations_alert.screen-reader-text`) 1440 px széles, * L777→R2217 (vizuális audit KRITIKUS). A szöveg a felolvasónak megmarad, csak a doboz 1 px. */ body.utk-terv .reset_variations_alert.screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; } /* 6. Terméklap mobilon: a 7–8 oszlopos műszaki táblázat a dokumentumot 2132 px-re tolta, a variáció- * legördülő kilógott (vizuális audit és ellenőrzés) — a táblázat saját vízszintes görgetést kap. */ @media (max-width: 768px) { body.utk-terv .woocommerce-Tabs-panel table:not(.variations) { display: block; max-width: 100%; overflow-x: auto; } body.utk-terv table.variations select { max-width: 100%; min-width: 0; } } /* 8. Egységes ikonkészlet (arculat.py jelei, arculat4.py kerete): csúcsára állított, lekerekített * hatszög — ugyanaz a forma, mint a sorszám-jelvény és a logó jele; a 3. kör műszaki középvonal- * jelei kikerültek. Színek változóból: fehéren/jégkéken kobalt, a kobalt sávon fehér. */ body.utk-terv { --utk-ik-keret: var(--utk-kobalt); --utk-ik-tolt: var(--utk-kobalt); --utk-ik-jel: var(--utk-kobalt); --utk-ik-belso: #fff; } body.utk-terv .utk-s-kobalt, body.utk-terv .utk-lab { --utk-ik-keret: #fff; --utk-ik-jel: #fff; --utk-ik-tolt: #fff; --utk-ik-belso: var(--utk-kobalt); } .utk-ik .utk-ik__jel, .utk-ikon .utk-ik__jel { fill: none; stroke: var(--utk-ik-jel, currentColor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .utk-ikon .utk-ik__jel { stroke: currentColor; } .utk-ik__kozep { display: none; } .utk-ik--keret .utk-ik__keret { fill: var(--utk-jeg-halv); stroke: var(--utk-ik-keret); stroke-width: 1.8; stroke-linejoin: round; } .utk-s-kobalt .utk-ik--keret .utk-ik__keret, .utk-lab .utk-ik--keret .utk-ik__keret { fill: rgba(255, 255, 255, .08); } .utk-ik--tomor .utk-ik__keret { fill: var(--utk-ik-tolt); } .utk-ik--tomor .utk-ik__jel { stroke: var(--utk-ik-belso); } /* 9. Mobilon alul ragadó „Hívj / Ajánlatkérés" sáv (brief 5). A lap alja nem bújhat alá. */ .utk-also { display: none; } @media (max-width: 899px) { .utk-also { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--utk-vonal); box-shadow: 0 -6px 20px rgba(11, 61, 145, .1); } .utk-also a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px; font: 650 1.05rem/1 var(--utk-cim); text-decoration: none; } .utk-also .utk-ikon { width: 20px; height: 20px; } .utk-also__hivj { background: #fff; color: var(--utk-kobalt) !important; border: 2px solid var(--utk-kobalt); } .utk-also__ajanlat { background: var(--utk-kobalt); color: #fff !important; } body.utk-terv:has(.utk-also) { padding-bottom: 70px; } html:has(.utk-also) { scroll-padding-bottom: 80px; } /* horgonyugrásnál a cél ne kerüljön a ragadós sáv alá (Fable) */ body.utk-terv:has(.utk-also) .ut-elonezet-jelzo { bottom: 82px !important; } /* 14. Ahol a ragadós „Hívj" sáv él, a felső kapcsolat-sáv mobilon kétszer adná ugyanazt — 37 px * a hajtásból (Fable-pontozás: a felső sávok ~230 px-t vittek el a 844-ből). */ body.utk-fejlec-terv:has(.utk-also) .gb-container-4e22a1fd { display: none; } } /* Minősítések + partneroldal a lábléc jobb hasábjában (a tulajdonos: „így halmozva furán néz ki", 2026-10-06): * egyforma, négyzetes fehér csempék rácsban, látható címmel, mint a többi hasáb. A logók a csempében * arányosan ülnek (contain), így a különböző formájú jelvények egy sorban rendezettek. */ .utk-lab__jelvenyek ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 112px); gap: 12px; } .utk-lab__jelvenyek .csempe { width: 112px; height: 112px; background: #fff; border-radius: calc(var(--utk-r) + 2px); padding: 8px; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .utk-lab__jelvenyek .csempe a { display: grid; place-items: center; width: 100%; height: 100%; } .utk-lab__jelvenyek .csempe img { display: block; width: 100%; height: 100%; object-fit: contain; } .utk-lab__jelvenyek .csempe--link { transition: transform .15s, box-shadow .15s; } .utk-lab__jelvenyek .csempe--link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .26); } .utk-lab__jelvenyek .utk-lab__partner-cim { margin-top: 26px; } @media (prefers-reduced-motion: reduce) { .utk-lab__jelvenyek .csempe--link { transition: none; } } /* A fejléc a tartalom hasábjához igazodik (a tulajdonos: „nagyon kint van a menü széle", 2026-10-06): * eddig a logó 30 px-re a képernyő szélétől ült, a tartalom pedig 1920 px-en 360 px-ről indult. */ body.utk-fejlec-terv .site-header .inside-header { width: var(--utk-sav); max-width: none; margin-inline: auto; padding-inline: 0; } /* Mobilon a minősítések és a partneroldal egy sorban (3 csempe), két címmel fölöttük. */ @media (max-width: 600px) { .utk-lab__jelvenyek { display: grid; grid-template-columns: auto auto; column-gap: 18px; justify-content: start; align-items: end; } .utk-lab__jelvenyek > h2 { grid-row: 1; margin-top: 0; } .utk-lab__jelvenyek > ul { grid-row: 2; grid-template-columns: repeat(2, 98px); gap: 10px; } .utk-lab__jelvenyek > ul.utk-lab__partner { grid-template-columns: 98px; } .utk-lab__jelvenyek .csempe { width: 98px; height: 98px; padding: 7px; } } /* 16b. Széles kijelző: a lábléc hasábjai közt nagyobb köz, hogy a 1600 px-es sávban ne tapadjanak a bal szélre. */ @media (min-width: 1400px) { .utk-lab__racs { gap: 64px; padding-block: 56px 44px; } .utk-lab__leiras { font-size: 1.02rem; } } /* 16c. A felső kapcsolat-sáv (GB-rács, két 50 %-os hasáb, középre zárt tartalom) 1920-on 410 és 1545 px közt ült, a * fejléc viszont a sáv szélén (160–1760) — a telefon balra, az e-mail jobbra, a sáv széléhez. */ @media (min-width: 769px) { body.utk-fejlec-terv .gb-container-4e22a1fd > .gb-inside-container { width: var(--utk-sav); max-width: none; margin-inline: auto; padding-inline: 0; } body.utk-fejlec-terv .gb-grid-wrapper-4dbd774a { margin-left: 0; } body.utk-fejlec-terv .gb-grid-wrapper-4dbd774a > .gb-grid-column { padding-left: 0; } body.utk-fejlec-terv .gb-grid-wrapper-4dbd774a > .gb-grid-column:first-child .gb-headline { justify-content: flex-start; text-align: left; margin-left: 0; } body.utk-fejlec-terv .gb-grid-wrapper-4dbd774a > .gb-grid-column:last-child .gb-headline { justify-content: flex-end; text-align: right; margin-right: 0; } }