/* ---------------------------------------------------------------------------
Rubik betukeszlet – sajat kiszolgalasrol, nem a Google-tol.
Igy elmarad ket kulso kapcsolat (DNS + TCP + TLS a fonts.googleapis.com
es a fonts.gstatic.com fele), es a render-blokkolo kulso stiluslap is.
A Rubik variabilis betu: mind a harom suly ugyanabbol a ket fajlbol jon.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Rubik";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("/betuk/rubik-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Rubik";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url("/betuk/rubik-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@charset "UTF-8";
/* ==========================================================================
design.css — ABA Innovator / TOPINJECT
--------------------------------------------------------------------------
Teljes vizuális réteg. A uretek.de design-nyelve (tapadó fehér fejléc,
pirula-gombok, kártyarácsok, világos szekciósávok, Rubik tipográfia),
az ABA INNOVATOR logóból származó palettával.
Ez a fájl ÖNMAGÁBAN áll: a web.css / webie.css / responsive.css helyett
töltődik be, és lefedi a tartalmi oldalak teljes osztálykészletét.
Mobil-először épül; a nagyobb töréspontok csak bővítenek.
========================================================================== */
/* ==========================================================================
1. Design-tokenek
========================================================================== */
:root {
/* Márka — az abalogo.jpg-ből mintázva (#001280 kék, #008000 zöld,
#927C6E taupe), képernyőre hangolt árnyalatokkal. */
--brand: #001280;
--navy-900: #0a1733;
--navy-800: #10224b;
--navy-700: #17306a;
--ink: #16233d;
--ink-soft: #4a5a73;
--ink-faint: #6b7a91;
--green-700: #0a6b2e;
--green-600: #0b7a34;
--green-500: #0e9440;
--green-050: #e9f5ed;
--taupe: #927c6e;
--orange: #ff7900;
--bg: #ffffff;
--bg-soft: #f1f4f8;
--bg-dark: var(--navy-900);
--line: #dce3eb;
--line-strong: #c3cedd;
/* Rácsok */
--wrap: 1180px;
--gap: 24px;
--radius: 12px;
--radius-sm: 8px;
--pill: 999px;
/* Árnyékok */
--shadow-sm: 0 1px 2px rgba(16, 34, 75, .06), 0 1px 3px rgba(16, 34, 75, .08);
--shadow-md: 0 4px 12px rgba(16, 34, 75, .08), 0 2px 4px rgba(16, 34, 75, .06);
--shadow-lg: 0 12px 32px rgba(16, 34, 75, .12);
/* Tipográfia */
--font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
/* ==========================================================================
2. Alapok
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 88px; /* tapadó fejléc alá ne csússzon a horgony */
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: 17px;
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
/* Szándékosan NINCS overflow-x:hidden. Az elrejtené a valódi
túlcsordulást a mérés elől is, a tartalmat pedig levágná – a
kilógást inkább megszüntetjük, nem eltakarjuk. */
}
img, svg, video { max-width: 100%; height: auto; border: 0; }
img { display: block; }
a { color: var(--green-700); text-decoration: none; }
a:hover, a:focus-visible { color: var(--green-500); text-decoration: underline; }
:focus-visible {
outline: 3px solid var(--green-500);
outline-offset: 2px;
border-radius: 3px;
}
hr {
height: 1px;
border: 0;
background: var(--line);
margin: 32px 0;
}
/* --- Címsorok ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 .5em;
color: var(--navy-800);
font-weight: 600;
line-height: 1.22;
letter-spacing: -.01em;
text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem); margin-bottom: .6em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); margin-top: 1.8em; }
h3 { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.35rem); margin-top: 1.6em; }
h4, h5, h6 { font-size: 1.05rem; margin-top: 1.4em; }
/* Az első címsor ne lökje el a tartalom tetejét. */
#contwr > h1:first-child,
#contwr > h2:first-child,
#contwr > h3:first-child { margin-top: 0; }
/* Az eredeti oldalakon a h1 gyakran csupa nagybetűs — lágyítjuk. */
h1 { text-transform: none; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; color: var(--navy-800); }
sup { font-size: .7em; vertical-align: super; line-height: 0; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.35em; }
li { margin-bottom: .4em; }
li:last-child { margin-bottom: 0; }
/* --- Segédosztályok ---------------------------------------------------- */
.clr { clear: both; }
/* A
soremelesként egy teljes sormagassagnyi (kb. 24 px)
ures dobozt general, pedig csak lebegtetest kellene torolnie. A forrasban
907 ilyen elem van, es a lablec elott gyakran kettő is egymas utan: ezek
adtak a felesleges terkozoket. Blokkszintuve teve, nulla magassaggal a
torles megmarad, a fantomsor eltunik.
Csak a
-re vonatkozik: a .clr osztalyt mas elemek is hasznaljak. */
br.clr { display: none; }
br.clr + *,
br.clr + br.clr + * { clear: both; }
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: 20px;
}
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 12px; top: -60px;
z-index: 200;
padding: 12px 20px;
background: var(--navy-800);
color: #fff;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
font-weight: 500;
transition: top .18s ease;
}
.skip-link:focus { top: 0; color: #fff; text-decoration: none; }
/* ==========================================================================
3. Fejléc — felső segédsáv, logó, menü
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: #fff;
border-bottom: 1px solid var(--line);
transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }
/* --- Felső segédsáv (nyelv + ország + telefon) -------------------------- */
.topbar {
background: var(--navy-800);
color: #cfd8e8;
font-size: .82rem;
}
.topbar .wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 18px;
min-height: 40px;
padding-block: 6px;
}
.topbar a { color: #e6ecf6; }
.topbar a:hover { color: #fff; }
.topbar-langs { display: flex; align-items: center; gap: 8px; }
.topbar-langs .lab { color: #9dabc5; }
.topbar-langs a {
display: inline-flex;
padding: 4px;
border-radius: 3px;
line-height: 0;
}
.topbar-langs a:hover { background: rgba(255,255,255,.12); }
.topbar-langs img {
width: 22px; height: 15px;
display: block;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}
.topbar form { display: flex; align-items: center; gap: 8px; margin: 0; }
.topbar label { color: #9dabc5; margin: 0; font-size: .82rem; }
.topbar select {
/* Az általános űrlapszabály (input, select, textarea) 16 px alsó margót
ad, ami itt félrevisz: a flex-sor középre igazítása emiatt 8 px-szel
feljebb tolta a legördülőt a mellette álló felirathoz képest. */
margin: 0;
background: rgba(255,255,255,.1);
color: #fff;
border: 1px solid rgba(255,255,255,.22);
border-radius: var(--radius-sm);
padding: 5px 10px;
font: inherit;
font-size: .82rem;
max-width: 190px;
}
.topbar select option { color: #16233d; background: #fff; }
.topbar-phone {
display: inline-flex;
align-items: center;
gap: 7px;
/* Hívható link – legyen kényelmesen koppintható méretű. */
min-height: 40px;
padding: 4px 8px;
margin: -4px 0;
border-radius: var(--radius-sm);
font-weight: 500;
}
.topbar-phone:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.topbar-phone::before {
content: "";
width: 15px; height: 15px;
background: currentColor;
-webkit-mask: var(--ico-phone) center/contain no-repeat;
mask: var(--ico-phone) center/contain no-repeat;
flex: none;
}
/* --- Fejléc-sáv --------------------------------------------------------- */
.header-bar .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 38px; width: auto; }
.brand-txt { display: none; }
.brand-claim {
display: none;
color: var(--ink-soft);
font-size: .82rem;
line-height: 1.3;
border-left: 1px solid var(--line);
padding-left: 12px;
max-width: 260px;
}
/* --- Hamburger ---------------------------------------------------------- */
.navtoggle {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: #fff;
color: var(--navy-800);
font: inherit;
font-size: .9rem;
font-weight: 500;
cursor: pointer;
line-height: 1;
}
.navtoggle:hover { background: var(--bg-soft); }
.navtoggle-bars { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.navtoggle-bars::before,
.navtoggle-bars::after {
content: ""; position: absolute; left: 0;
width: 18px; height: 2px; background: currentColor; border-radius: 2px;
transition: transform .2s ease, top .2s ease;
}
.navtoggle-bars::before { top: -6px; }
.navtoggle-bars::after { top: 6px; }
.navtoggle[aria-expanded="true"] .navtoggle-bars { background: transparent; }
.navtoggle[aria-expanded="true"] .navtoggle-bars::before { top: 0; transform: rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle-bars::after { top: 0; transform: rotate(-45deg); }
/* --- Menü (mobil: lenyíló panel) ---------------------------------------- */
#nav, #nav ul { list-style: none; margin: 0; padding: 0; }
#nav {
display: none;
position: absolute;
left: 0; right: 0;
top: 100%;
background: #fff;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-lg);
/* A fejléc magassága nem állandó: a felső sávban a nyelvválasztó, az
ország-választó és a telefonszám keskeny kijelzőn két-három sorba
tördelődik. A JavaScript megméri, és a --fejlec-magassag változóba
írja. A 190px-es tartalék szándékosan bőkezű: a mért fejléc
sehol nem éri el, így ha a mérés bármiért elmarad, a panel
inkább rövidebb a kelleténél, mint hogy lelógjon. A dvh ezen felül
a mobilböngészők ki-be csúszó eszköztárait is beszámítja — a fölötte
álló vh-s sor a régebbi böngészőknek marad. */
max-height: calc(100vh - var(--fejlec-magassag, 190px));
max-height: calc(100dvh - var(--fejlec-magassag, 190px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 0 calc(14px + env(safe-area-inset-bottom, 0px));
}
#nav.is-open { display: block; }
html:not(.js-nav) #nav { display: block; position: static; box-shadow: none; max-height: none; }
#nav > li { border-bottom: 1px solid var(--line); margin: 0; }
#nav > li:last-child { border-bottom: 0; }
#nav a {
display: block;
padding: 14px 20px;
color: var(--navy-800);
font-weight: 500;
line-height: 1.35;
}
#nav a:hover, #nav a:focus-visible { background: var(--bg-soft); color: var(--green-700); text-decoration: none; }
#nav .cur { color: var(--green-700) !important; font-weight: 600; }
/* A fejlec arajanlat-menupontja kiemelt cselekves, nem sima navigacio:
zold pirula feher felirattal, lassan pulzalva (ugyanaz az aba-lukt,
mint a lablecben). A tobbi menupont hover-allapota szurke hattert es
zold szoveget ad – itt a szoveg feher marad, mert a hatter mar zold.
A .cur szabaly zold szoveget kenyszeritene, ezt is felul kell irni. */
#nav > li > a.nav-ajanlat {
background: var(--green-600);
color: #fff;
border-radius: var(--radius-sm);
font-weight: 600;
animation: aba-lukt 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
#nav > li > a.nav-ajanlat:hover,
#nav > li > a.nav-ajanlat:focus-visible {
background: var(--green-700);
color: #fff;
}
#nav > li > a.nav-ajanlat.cur { color: #fff !important; }
#nav li ul { background: var(--bg-soft); padding: 4px 0 8px; }
#nav li ul li { border: 0; }
#nav li ul a {
padding: 10px 20px 10px 36px;
font-size: .94rem;
font-weight: 400;
color: var(--ink-soft);
position: relative;
}
#nav li ul a::before {
content: "";
position: absolute;
left: 20px; top: 50%;
width: 6px; height: 1px;
background: var(--line-strong);
}
#nav li ul a:hover { color: var(--green-700); background: #fff; }
/* Fejléc CTA a menüpanel alján (mobil) */
.nav-cta { padding: 14px 20px 4px; }
.nav-cta .btn { width: 100%; justify-content: center; }
/* ==========================================================================
4. Gombok
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 13px 28px;
border: 2px solid transparent;
border-radius: var(--pill);
background: var(--green-600);
color: #fff;
font: inherit;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: background .17s ease, border-color .17s ease, color .17s ease, transform .1s ease;
}
.btn:hover, .btn:focus-visible { background: var(--green-700); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-outline {
background: transparent;
border-color: var(--line-strong);
color: var(--navy-800);
}
.btn-outline:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn-light { background: #fff; color: var(--navy-800); }
.btn-light:hover { background: var(--bg-soft); color: var(--navy-800); }
/* A kisebb gomb is maradjon kényelmesen koppintható (min. 44 px). */
.btn-sm { padding: 11px 20px; font-size: .92rem; min-height: 44px; }
/* A l\x{e1}bl\x{e9}c \x{e1}raj\x{e1}nlat-gombja lassan puls\x{e1}l, hogy a lap alj\x{e1}n is megfogja a
szemet. Csak \x{e1}rny\x{e9}kkal dolgozik, nem mozgatja az elemet – \x{ed}gy nem tolja el
a k\x{f6}rn\x{e9}kez\x{151} tartalmat, \x{e9}s nem okoz \x{fa}jrat\x{f6}rdel\x{e9}st. A cs\x{f6}kkentett mozg\x{e1}s
be\x{e1}ll\x{ed}t\x{e1}st a lap alj\x{e1}n l\x{e9}v\x{151} glob\x{e1}lis szab\x{e1}ly kapcsolja ki. */
.site-footer .btn { animation: aba-lukt 1.8s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes aba-lukt {
0% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, .9), 0 0 0 0 rgba(34, 197, 94, .55);
transform: scale(1);
}
35% { transform: scale(1.06); }
70% {
box-shadow: 0 0 0 17px rgba(34, 197, 94, 0), 0 0 0 30px rgba(34, 197, 94, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0), 0 0 0 0 rgba(34, 197, 94, 0);
transform: scale(1);
}
}
/* ==========================================================================
5. Oldalfej (kenyérmorzsa + cím-sáv)
========================================================================== */
.page-head {
background: var(--bg-soft);
border-bottom: 1px solid var(--line);
padding: 14px 0;
}
.breadcrumb { font-size: .85rem; color: var(--ink-faint); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "›"; color: var(--line-strong); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--green-700); }
.breadcrumb [aria-current] { color: var(--navy-800); font-weight: 500; }
/* ==========================================================================
6. Tartalom-terület
========================================================================== */
#cont {
display: block;
padding: 0;
min-height: 40vh;
}
#contwr {
/* A záró
eltűnt, ezért a tároló maga zárja körül
a lebegő elemeit – különben az utolsó kép kilógna a lábléc alá. */
display: flow-root;
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
/* A --pt-t az infografika.css olvassa ki, hogy a teljes szelessegu
abra negativ margoval pontosan a morzsasavhoz tudjon tapadni. */
--pt: 36px;
padding: var(--pt) 20px 32px;
}
/* Olvasható szövegoszlop: a hosszú bekezdések ne fussanak végig 1180 px-en. */
#contwr > p,
#contwr > ul,
#contwr > ol,
#contwr > h2,
#contwr > h3,
#contwr > h4,
#contwr > h5,
#contwr > h6 { max-width: 76ch; }
#contwr > h1 { max-width: 20ch; }
/* Képek a tartalomban */
#cont img { border: 0; border-radius: var(--radius-sm); }
/* Néhány tartalmi képen inline `height:` van (pl. tech6.php height:130px).
Ezt csak !important tudja felülírni, különben a max-width miatt szűkülő
kép rögzített magassággal eltorzul. A kártyaképeken nincs inline stílus,
így az ő szándékos `height:200px; object-fit:cover` beállításuk megmarad. */
#contwr img[style] { height: auto !important; }
/* ==========================================================================
7. Kártyák — technológiák (.techkep) és alkalmazások (.feliratoskep)
--------------------------------------------------------------------------
Az eredeti markup abszolút pozícionált feliratsávokat tett a képre.
Itt flex-oszloppá alakítjuk és a sorrendet `order`-rel rendezzük, így a
HTML érintetlen marad.
========================================================================== */
.techkep,
.feliratoskep {
position: relative;
float: none;
width: auto;
margin: 0;
font-size: 1rem;
}
/* A dekoratív fekete sávok eltűnnek. */
.kepcsik,
.alkkepcsik { display: none !important; }
.techkep a,
.feliratoskep {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
color: var(--ink);
box-shadow: var(--shadow-sm);
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.techkep a:hover,
.feliratoskep:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
border-color: var(--line-strong);
text-decoration: none;
}
.techkep img,
.feliratoskep img {
order: 1;
width: 100%;
height: 200px;
object-fit: cover;
border: 0;
border-radius: 0;
background: var(--bg-soft);
}
/* --------------------------------------------------------------------------
Technológia-kártyák: két álló kép egymás mellett (diptichon)
A forrásképek állók (180x247, 220x329, 300x400), a kártya viszont széles.
Korábban egyetlen kép feszült ki a teljes szélességre, ezért 3x-osra
nagyítva, a magasságának negyedére vágva látszott. Két hasábban viszont
mindkét kép a saját, álló arányában marad: 3/4-es mezőbe illesztve alig
kell vágni, és a nagyítás is a felére csökken.
Az alkalmazás-kártyák (.feliratoskep) képe fekvő 230x200, azokra ez a
szabály nem vonatkozik.
-------------------------------------------------------------------------- */
.techkep .kepparos {
order: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
background: var(--bg-soft);
overflow: hidden;
}
.techkep .kepparos img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
padding: 0;
border: 0;
border-radius: 0;
/* Nyugalmi állapotban egy árnyalatnyit visszafogott szín; rámutatáskor
feléled és lassan ráközelít. A második kép egy hajszállal késve indul,
ettől lesz a mozdulat élő, nem gépies. */
filter: saturate(.84) contrast(1.03);
transform: scale(1);
transition: transform .55s cubic-bezier(.2,.7,.3,1), filter .45s ease;
}
.techkep a:hover .kepparos img,
.techkep a:focus-visible .kepparos img {
filter: saturate(1.1) contrast(1.06);
transform: scale(1.06);
}
.techkep a:hover .kepparos img + img,
.techkep a:focus-visible .kepparos img + img { transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
.techkep .kepparos img { transition: none; }
.techkep a:hover .kepparos img,
.techkep a:focus-visible .kepparos img { transform: none; }
}
/* Kis felirat a kép alatt (eredetileg a képre írt sáv) */
.techkep strong,
.feliratoskep strong {
order: 2;
position: static;
display: block;
width: auto; height: auto;
margin: 0;
padding: 16px 18px 0;
color: var(--green-700);
/* Egységes, enyhén nagyobb kártya-tipográfia. A méretek korábban
beégetett inline stílusok miatt szóródtak (az egyik kártyacím 10 px
volt); azokat eltávolítottam, így innen vezérelhető minden kártya. */
font-size: clamp(.8rem, .25vw + .74rem, .9rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: .07em;
text-transform: uppercase;
background: none;
text-align: left;
}
/* A kártya főcíme */
.tname {
order: 3;
display: block;
width: auto;
margin: 4px 0 0;
padding: 0 18px;
color: var(--navy-800);
font-size: clamp(1.2rem, .5vw + 1.08rem, 1.4rem);
font-weight: 600;
line-height: 1.3;
text-align: left;
text-transform: none;
}
/* „Kattintson ide” → link a kártya alján */
/* A céloldal első bekezdésének eleje a kártyán, a „Kattintson ide” fölött.
Az order 4 azonos a .keplink-ével, ezért a DOM-sorrend dönt – a szöveg
előbb szerepel, a link pedig a margin-top:auto miatt a kártya aljára kerül. */
.techkep .kepszoveg {
order: 4;
/* Egy teljes sornyi kihagyas a technologianev es a kivonat kozt.
1.5em a sajat sormagassaggal egyezik, igy betumeret-valtozaskor is
pontosan egy ures sor marad. */
margin: 1.5em 18px 12px;
font-size: .92rem;
line-height: 1.5;
color: var(--ink-2);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.keplink,
.feliratoskep > span:not(.alkkepcsik) {
order: 4;
position: static;
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
margin: auto 18px 18px;
padding: 14px 0 0;
background: none;
color: var(--green-700);
font-size: clamp(.98rem, .2vw + .93rem, 1.06rem);
font-weight: 600;
filter: none;
opacity: 1;
bottom: auto; left: auto; top: auto;
}
.keplink::after,
.feliratoskep > span:not(.alkkepcsik)::after {
content: "→";
transition: transform .17s ease;
}
.techkep a:hover .keplink::after,
.feliratoskep:hover > span:not(.alkkepcsik)::after { transform: translateX(4px); }
/* A kártyák rácsba rendezése — a szülő #contwr-ben egymás után állnak. */
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
margin: 28px 0 36px;
max-width: none;
}
/* ==========================================================================
8. Képes blokkok (.balkep / .jobkep / .negykep / .USL1)
========================================================================== */
/* --- Beégetett inline margók semlegesítése ------------------------------
A tartalmi fájlokban ~90 helyen van margin-left:30/40/50/75/150px. Ezek
az eredeti, 810 px-es fix elrendezéshez készültek; a mai rácsos
elrendezésben kilógást okoznak. Inline stílust csak !important ír felül.
(Firefox jelezte: az alk6 oldalon 375 px-en 436 px-re szélesedett a
tartalom. Chrome ezt elrejtette a méréstől az overflow-x:hidden miatt,
de a levágás ott is megtörtént.) */
#contwr [style*="margin-left"] { margin-left: 0 !important; }
#contwr [style*="margin-right"] { margin-right: 0 !important; }
/* Rács- és flexelemek zsugorodhassanak a tartalmuk alá. */
.card-grid > *, .kep-grid > * { min-width: 0; }
.balkep, .jobkep, .negykep, .USL1, .USL2 {
float: none;
display: block;
width: auto;
max-width: 100%;
margin: 0 0 24px !important;
text-align: center;
position: relative;
}
.kep-grid .negykep, .kep-grid .balkep, .kep-grid .jobkep { margin: 0 !important; }
.balkep img, .jobkep img, .negykep img, .USL1 img, .USL2 img {
width: 100%;
height: auto;
border-radius: var(--radius-sm);
border: 1px solid var(--line);
}
/* Képaláírás */
.balkep strong, .jobkep strong, .negykep strong, .USL2 strong {
display: block;
margin: 10px 0 0;
color: var(--ink-soft);
font-size: .88rem;
font-weight: 500;
line-height: 1.45;
text-align: center;
}
/* „Előtte / utána” képpár felirata a képre kerül.
A felirat a dobozhoz van abszolút pozicionálva, a doboz teteje viszont
MAGASABBAN kezdődött, mint a benne lévő kép: a fölötte lebegő kép
(.balkep) lenyomta a képet a doboz alján belül, a felirat pedig fent
maradt – így a LEBEGŐ képre került, nem a sajátjára. A clear: left
a dobozt is a lebegő kép alá viszi, így a doboz teteje = a kép teteje. */
.USL1 { display: block; clear: left; }
.felirat {
position: absolute;
top: 10px; left: 10px;
width: auto;
padding: 5px 12px;
background: rgba(10, 23, 51, .82);
color: #fff;
border-radius: var(--pill);
font-size: .8rem;
font-weight: 600;
text-indent: 0;
}
/* Kép-rács a több apró képhez */
.kep-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin: 24px 0 32px;
max-width: none;
}
.kep-grid .negykep,
.kep-grid .balkep,
.kep-grid .jobkep { margin: 0; }
.kozepre { margin-inline: auto; text-align: center; }
/* ==========================================================================
9. Pipás listák
========================================================================== */
.pipas, .alk_pipas {
list-style: none;
margin: 0 0 1.4em;
padding: 0;
display: grid;
gap: 10px;
}
.pipas li, .alk_pipas li {
position: relative;
margin: 0;
padding-left: 32px;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
display: block;
}
.pipas li::before, .alk_pipas li::before {
content: "";
position: absolute;
left: 0; top: .28em;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--green-050) var(--ico-check) center/11px 11px no-repeat;
}
.alk_pipas { font-size: 1rem; font-weight: 500; }
/* ==========================================================================
10. Szekciók, hasábok, CTA-sáv
========================================================================== */
/* ==========================================================================
Egységes egérhatás MINDEN kártyán és dobozon
Ugyanaz a viselkedés a technológia- és alkalmazáskártyákon (.techkep,
.feliratoskep) és a főoldali kiemelt dobozokon (#elony, #megbizhatosag),
nyelvtől és aloldaltól függetlenül:
– finom megemelkedés és mélyebb árnyék,
– balról kifutó felső színcsík (márkakék → zöld),
– a kurzort követő fénypászma.
A pászma helyét a design.js írja a --mx/--my változóba. Az egészet
@media (hover: hover) védi: érintőképernyőn nincs értelme.
========================================================================== */
.techkep a,
.feliratoskep,
#elony,
#megbizhatosag {
position: relative;
overflow: hidden;
}
/* felső színcsík */
.techkep a::after,
.feliratoskep::after,
#elony::after,
#megbizhatosag::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--brand), var(--green-600));
transform: scaleX(0);
transform-origin: left;
transition: transform .45s cubic-bezier(.2,.7,.3,1);
z-index: 2;
}
/* az egeret követő fénypászma */
.techkep a::before,
.feliratoskep::before,
#elony::before,
#megbizhatosag::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
rgba(11, 122, 52, .14), rgba(11, 122, 52, 0) 62%);
opacity: 0;
transition: opacity .35s;
pointer-events: none;
z-index: 0;
}
/* a tartalom a fénypászma fölött marad */
.techkep a > *,
.feliratoskep > *,
#elony > *,
#megbizhatosag > * { position: relative; z-index: 1; }
@media (hover: hover) {
.techkep a:hover::before,
.feliratoskep:hover::before,
#elony:hover::before,
#megbizhatosag:hover::before { opacity: 1; }
.techkep a:hover::after,
.feliratoskep:hover::after,
#elony:hover::after,
#megbizhatosag:hover::after { transform: scaleX(1); }
#elony:hover, #megbizhatosag:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(16, 32, 64, .12);
border-color: #c3cfdd;
}
/* a felsorolás sorai egyenként is reagálnak */
#elony .pipas li, #megbizhatosag .pipas li {
transition: transform .25s cubic-bezier(.2,.7,.3,1), color .25s;
}
#elony .pipas li:hover, #megbizhatosag .pipas li:hover {
transform: translateX(5px);
color: var(--brand);
}
#elony .pipas li::before, #megbizhatosag .pipas li::before {
transition: transform .25s cubic-bezier(.2,1.4,.4,1), box-shadow .25s;
}
#elony .pipas li:hover::before, #megbizhatosag .pipas li:hover::before {
transform: scale(1.18);
box-shadow: 0 0 0 4px rgba(11, 122, 52, .12);
}
}
/* --- a két kiemelt doboz saját megjelenése ---------------------------- */
#elony, #megbizhatosag {
float: none;
width: auto;
margin: 0;
padding: 26px 26px 22px;
background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
border-radius: var(--radius);
border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(16, 32, 64, .05);
transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
}
#elony { margin-bottom: 20px; }
#elony h2, #megbizhatosag h2 { margin: 0 0 14px; padding: 0; font-size: 1.15rem; }
/* Az űrlaphoz vezető CTA-blokk */
.form_link {
margin: 32px 0;
padding: 24px;
background: var(--navy-800);
border-radius: var(--radius);
color: #dce6f5;
}
.form_link p {
margin: 0;
/* A forrásban beégetett style="line-height:40px" van, ami
mobilon szétszakította a sorokat – ezért !important. */
line-height: 1.5 !important;
color: #dce6f5;
max-width: none;
text-align: center;
}
/* Blokkszintű gomb: inline-flex-ként a követő szöveg a gomb sorába
folyt bele, és 110 px-es sortöredékek keletkeztek (ro oldalak, 375 px). */
.formlinkgomb, .flg1, .flg2, .flg3 {
display: flex;
align-items: center;
justify-content: center;
float: none;
width: 100%;
max-width: 380px;
height: auto;
margin: 0 auto 18px;
padding: 18px 34px;
background: var(--green-600) !important;
border-radius: var(--pill);
box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
color: #fff;
font-size: 1.15rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: .01em;
text-align: center;
transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.formlinkgomb:hover {
background: var(--green-700) !important;
box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}
.linktop {
float: none;
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 28px;
font-size: .92rem;
font-weight: 500;
}
.linktop::before { content: "↑"; }
/* ==========================================================================
11. Kapcsolat
========================================================================== */
.kapcs1, .kapcs2 {
float: none;
width: auto !important;
margin: 0 0 20px !important;
padding: 0;
}
/* Csak a valódi kapcsolati doboz kap kártyás keretet – az eredeti
markupban ezt a `border:1px solid black` inline stílus jelöli. A
tartalmat csoportosító belső div-ek nem. */
.kapcs1 > div[style*="border"], .kapcs2 > div[style*="border"] {
border: 1px solid var(--line) !important;
border-radius: var(--radius);
padding: 22px !important;
background: var(--bg-soft);
}
/* A kapcsolati oldal bevezetoje utan legyen levego a dobozok elott. */
.aba-kapcsbev { margin-bottom: 30px; }
/* A TOPINJECT logó a bevezető szöveg mellett, jobbra igazítva. A szöveg
körbefolyja; keskeny kijelzőn viszont a lebegtetés összenyomná a sorokat,
ezért ott a szöveg fölé, középre kerül. */
.aba-bevezeto .tj-logo {
float: right;
width: clamp(130px, 16vw, 210px);
height: auto;
margin: 2px 0 14px 26px;
}
@media (max-width: 599px) {
.aba-bevezeto .tj-logo {
float: none;
display: block;
width: clamp(140px, 45vw, 200px);
margin: 0 auto 18px;
}
}
/* A CSILLAGTER-logo a bal oldali, szurke dobozba kerult (korabban a jobb
oldali orszaglista alatt allt). */
.kapcs-logo {
display: block;
max-width: 200px;
margin: 18px 0 2px;
border-radius: var(--radius-sm);
}
/* Az eredeti markup
-ekkel tagol, ami a nagyobb alap-sortavval tul
levegosse tette a dobozt. Szorosabb sortav, hogy egyben olvashato blokk
legyen a cegadat. */
.kapcs1 > div[style*="border"] { line-height: 1.5; }
/* A kapcsolati oldalon szereplo partnerlogo (jobb oldali doboz, ha van). */
.kapcs2 img { max-width: 240px; margin-top: 18px; border-radius: var(--radius-sm); }
.mobilsz { border: 0 !important; padding-left: 4px; }
/* Korábban képként (emil.jpg) volt kirakva az e-mail cím; most szöveg. */
.email-cim {
font-weight: 600;
color: var(--brand);
overflow-wrap: anywhere;
word-break: break-word;
}
.xx { font-size: .95rem; }
/* --- Irodarács (az "összes iroda" oldalhoz) ----------------------------- */
.iroda-racs {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin: 24px 0 32px;
max-width: none;
}
.iroda {
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.iroda > div[style] {
border: 0 !important;
padding: 0 !important;
background: none;
line-height: 1.6;
}
.iroda-logo {
max-width: 190px;
margin-top: auto;
border-radius: var(--radius-sm);
}
@media (min-width: 700px) { .iroda-racs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .iroda-racs { grid-template-columns: repeat(3, 1fr); } }
/* --- Országrács (kapcsolati oldal) -------------------------------------- */
.orszag-racs {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
max-width: none;
}
.orszag-racs li { margin: 0; }
.orszag-racs a {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 14px;
min-height: 46px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--navy-800);
font-weight: 500;
line-height: 1.3;
transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.orszag-racs a:hover,
.orszag-racs a:focus-visible {
border-color: var(--green-500);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
color: var(--green-700);
text-decoration: none;
}
.orszag-racs img {
width: 22px;
height: 15px;
flex: none;
border-radius: 2px;
box-shadow: 0 0 0 1px var(--line);
}
/* Zászló nélküli ország (pl. Kazahsztán) – semleges jelölő, hogy a
nevek egy vonalban maradjanak. */
.orszag-jel {
width: 22px;
height: 15px;
flex: none;
border-radius: 2px;
background: var(--bg-soft);
box-shadow: inset 0 0 0 1px var(--line);
}
.orszag-racs a::after {
content: "→";
margin-left: auto;
color: var(--ink-faint);
transition: transform .16s ease, color .16s ease;
}
.orszag-racs a:hover::after { transform: translateX(3px); color: var(--green-600); }
/* Piac saját oldal nélkül (Moldávia, Bulgária, Kazahsztán): megjelenik a
listában, de nem kattintható – nem visz félre másik ország cégéhez. */
.orszag-passziv {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 14px;
min-height: 46px;
background: var(--bg-soft);
border: 1px dashed var(--line-strong);
border-radius: var(--radius-sm);
color: var(--ink-soft);
font-weight: 500;
line-height: 1.3;
}
@media (min-width: 480px) {
.orszag-racs { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.orszag-racs { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) {
.orszag-racs { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
12. Táblázatok
========================================================================== */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 28px; }
#contwr table {
width: 100% !important;
border-collapse: collapse;
font-size: .95rem;
background: #fff;
}
#contwr th, #contwr td {
padding: 11px 14px;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
#contwr tr:hover td { background: var(--bg-soft); }
.tdcim {
background: var(--navy-800) !important;
color: #fff !important;
font-weight: 600;
font-size: .82rem;
letter-spacing: .07em;
text-transform: uppercase;
}
.tdcim a { color: #fff; }
/* ==========================================================================
13. Űrlapok
========================================================================== */
form { margin: 0; }
fieldset {
width: auto;
max-width: none;
margin: 0 0 24px;
padding: 22px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow-sm);
}
legend { padding: 0 8px; font-weight: 600; color: var(--navy-800); }
label, .label2 {
display: block;
width: auto;
margin: 0 0 6px;
color: var(--navy-800);
font-size: .95rem;
font-weight: 500;
text-align: left;
}
/* Mezesbodon: a levelszemet-szuro rejtett mezoje. NEM display:none, mert
azt sok robot felismeri es kihagyja. A klasszikus "latoteren kivulre
tolas" (left:-9999px) sem jo: azt a sajat layout-auditom joggal jelzi
kilogo elemkent. Helyette a szabvanyos vizualisan-rejtett minta, ami a
helyen marad, de nulla meretre van vagva. A tabindex="-1" es az
aria-hidden gondoskodik rola, hogy sem billentyuzettel, sem
kepernyoolvasoval ne lehessen belebotlani. */
.mezes {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
input, select, textarea {
width: 100%;
max-width: 100%;
margin: 0 0 16px;
padding: 12px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
background: #fff;
color: var(--ink);
font: inherit;
font-size: 16px; /* 16px alatt az iOS ráközelít */
line-height: 1.4;
transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
outline: 0;
border-color: var(--green-500);
box-shadow: 0 0 0 3px rgba(14, 148, 64, .16);
}
textarea { min-height: 130px; resize: vertical; }
input[type="checkbox"], input[type="radio"], .chkbox {
width: 19px !important;
height: 19px;
margin: 0 9px 0 0;
padding: 0;
vertical-align: -3px;
accent-color: var(--green-600);
flex: none;
}
/* Jelölőnégyzet melletti címke egy sorban marad. */
#contwr input[type="checkbox"] + label,
#contwr input[type="radio"] + label,
#holhallot label {
display: inline;
width: auto !important;
font-weight: 400;
color: var(--ink);
}
/* Rövid számmezők */
.inputszam {
width: 6.5em !important;
display: inline-block;
margin: 0 10px 12px 0;
vertical-align: middle;
}
#contwr .inputszam + label {
display: inline-block;
width: auto !important;
margin-bottom: 12px;
font-weight: 400;
vertical-align: middle;
}
.formrovid { width: 100%; }
/* Beküldő gombok */
.formgomb, .formgomb2 {
display: inline-flex;
align-items: center;
justify-content: center;
position: static;
float: none;
top: auto; right: auto;
width: 100%;
max-width: 300px;
height: auto;
margin: 8px 0 0;
padding: 14px 30px;
border: 0;
border-radius: var(--pill);
background: var(--green-600) !important;
color: #fff;
font: inherit;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background .17s ease;
}
.formgomb:hover, .formgomb2:hover { background: var(--green-700) !important; color: #fff; }
/* Kísérőszövegek */
.formplusz {
position: static !important;
float: none !important;
top: auto !important; right: auto !important;
width: 100% !important;
margin: 20px 0 0 !important;
padding: 16px 18px;
background: var(--green-050);
border-left: 3px solid var(--green-500);
border-radius: var(--radius-sm);
color: var(--ink);
font-size: .95rem;
line-height: 1.55;
text-align: left;
}
.formszoveg {
float: none !important;
clear: both;
width: 100% !important;
margin: 0 0 16px !important;
padding: 12px 14px;
background: #fff7e8;
border-left: 3px solid var(--orange);
border-radius: var(--radius-sm);
color: var(--ink);
font-size: .9rem;
line-height: 1.5;
text-align: left;
}
#munkameret, #uregmeret { float: none; margin: 0; }
label#kmegjl { position: static; top: auto; }
/* ==========================================================================
14. Lábléc
========================================================================== */
/* A régi 850×30 px-es lábléckép helyét valódi lábléc veszi át. */
.footer { display: none !important; }
.site-footer {
background: var(--navy-900);
color: #b9c5da;
font-size: .94rem;
/* Nincs sajat felso margo: a #contwr also belso margoja mar
megadja a tavolsagot. Kettejuk osszege 124 px-es ures savot
hagyott a tartalom es a lablec kozott. */
}
.site-footer a { color: #dbe4f2; }
.site-footer a:hover { color: #fff; }
.footer-main {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
/* Csak függőleges margo: a vízszintes a .wrap-tól jön. A padding
rövidítés kinullázta a .wrap 20 px-es padding-inline értékét, ezért
tapadt a lábléc tartalma mobilon a képernyő széléhez. */
padding-block: 32px 30px;
}
.footer-col h2 {
margin: 0 0 14px;
color: #fff;
font-size: .82rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
/* Lábléc-logó. A kép 400×258 képpont, tehát a szélessége a magasság
1,55-szerese. Rugalmas méret: telefonon is jóval nagyobb a korábbinál,
de szélesebb képernyőn sem feszíti szét a márkaoszlopot.
375 px-es telefon → 96 px magas, kb. 177 px széles
1440 px-es monitor → 115 px magas, kb. 206 px széles
1920 px-es monitor → 132 px magas, kb. 233 px széles
A max-width biztosítja, hogy nagyon keskeny készüléken se lógjon ki. */
.footer-brand img {
height: clamp(96px, 8vw, 132px);
width: auto;
max-width: 100%;
background: #fff;
padding: 12px 16px;
border-radius: var(--radius-sm);
margin-bottom: 20px;
}
.footer-brand p { color: #9caac5; line-height: 1.6; margin: 0; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.12);
/* ugyanúgy: a vízszintes margot a .wrap adja */
padding-block: 18px 26px;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
align-items: center;
justify-content: space-between;
color: #8595b1;
font-size: .86rem;
}
/* ==========================================================================
15. Ikonok (adat-URI, hogy ne legyen külső kérés)
========================================================================== */
:root {
--ico-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230b7a34' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.6l3.4 3.4L13.5 4.4'/%3E%3C/svg%3E");
--ico-phone: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.7.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 013 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.7.1.4 0 .7-.2 1l-2.3 2.1z'/%3E%3C/svg%3E");
}
/* ==========================================================================
16. Töréspontok
========================================================================== */
/* --- 600 px felett ------------------------------------------------------ */
@media (min-width: 600px) {
.card-grid { grid-template-columns: repeat(2, 1fr); }
.kep-grid { grid-template-columns: repeat(3, 1fr); }
.formgomb, .formgomb2, .formlinkgomb { width: auto; min-width: 240px; }
.footer-main { grid-template-columns: repeat(2, 1fr); }
}
/* --- 900 px felett: asztali menü ---------------------------------------- */
@media (min-width: 900px) {
body { font-size: 17px; }
/* Lebegő képek CSAK 900 px felett. Korábban 600 px-től lebegtek,
és 768 px-en két szemben álló kép között már csak 244 px maradt a
szövegnek. Ez alatt a képek teljes szélességben, egymás alatt állnak.
A szemben álló, függőlegesen átfedő párokat a design.js töri sorba. */
.balkep, .jobkep {
float: left;
width: 36%;
max-width: 400px;
margin: 6px 28px 22px 0 !important;
}
.jobkep { float: right; margin: 6px 0 22px 28px !important; }
/* Lakóépületek: a bal oldali kép és a jobb oldali pipás felsorolás egy
síkban záruljon. A kép természetes mérete 350×263, a 36%-os szabály
viszont 400×301-re NAGYÍTOTTA – ettől 45 px-szel lelógott a felsorolás
alá, és életlen is volt. Visszavesszük a saját méretére, és elhagyjuk a
felső margót, hogy a tetejük is egy vonalban legyen.
Csak asztali nézetben: 900 px alatt a képek amúgy sem lebegnek. */
/* A képes doboz melletti rövid szöveg után a következő címsor ne csorgassa
le a jobb oldali képet – csak a bal oldali lebegőt –, különben üres sáv
marad a kép alja és a címsor közt. */
br.clr + .csorgat-balra {
clear: left;
}
/* Natúr méret: a 36%-os doboz és a width:100%-os kép együtt FELNAGYÍTJA a
kisebb felbontású képeket (pl. 200×250 → 400×558), láthatóan életlenül.
Itt a doboz a képére zsugorodik, a kép pedig a saját felbontásán marad. */
.balkep.natur-meret,
.jobkep.natur-meret {
width: auto;
}
.balkep.natur-meret img,
.jobkep.natur-meret img {
width: auto;
max-width: 100%;
}
img.balkep.lista-mellett,
img.balkep.cimsor-mellett,
.jobkep.szoveg-mellett,
.balkep.szoveg-mellett {
width: auto;
max-width: 400px;
margin-top: 0 !important;
}
/* Padlók visszaemelése: a bevezető kép a mellette futó szöveggel egy
síkban záruljon. A 36%-os szabály a 220×329-es képet 295×442-re
NAGYÍTOTTA – ettől 111 px-szel lelógott a bekezdés alá, és életlen is
volt. A pontos szélességet mérés adta: ekkora képnél a szöveg
ugyanannyi sorba tördelődik, és a két blokk alja egy vonalba esik. */
img.balkep.szoveg-mellett {
width: auto;
max-width: 400px;
margin-top: 0 !important;
}
/* Árva kép: nincs mellette szöveg, ezért nem lebeg tovább. Középre
állítva a térköz szimmetrikus lesz, nem marad féloldalas üres sáv.
Az osztályt a design.js teszi ki mérés alapján. */
.balkep.arva, .jobkep.arva, .USL1.arva, .USL2.arva {
float: none !important;
clear: both;
width: auto;
max-width: 520px;
margin: 8px auto 26px !important;
}
.header-bar .wrap { min-height: 86px; gap: 28px; }
.brand img { height: 46px; }
.brand-claim { display: block; }
.navtoggle { display: none; }
/* A menü vízszintes sávvá alakul. */
#nav,
html:not(.js-nav) #nav {
display: flex !important;
position: static;
flex: 1 1 auto;
justify-content: flex-end;
align-items: center;
gap: 4px;
max-height: none;
overflow: visible;
padding: 0;
border: 0;
box-shadow: none;
background: none;
}
#nav > li { position: relative; border: 0; }
#nav > li > a {
padding: 12px 14px;
border-radius: var(--radius-sm);
font-size: .96rem;
white-space: nowrap;
}
#nav > li > a:hover { background: var(--bg-soft); }
/* Almenük lebegő panelként */
#nav li ul {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 268px;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
#nav li:hover > ul,
#nav li:focus-within > ul,
#nav li.is-open > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#nav li ul a { padding: 10px 14px; border-radius: var(--radius-sm); font-size: .93rem; }
#nav li ul a::before { display: none; }
/* Az utolsó menüpontok almenüje ne lógjon ki jobbra. */
#nav > li:nth-last-child(-n+2) ul { left: auto; right: 0; }
.nav-cta { display: none; }
.page-head { padding: 16px 0; }
#contwr { --pt: 48px; padding: var(--pt) 20px 40px; }
.card-grid { grid-template-columns: repeat(3, 1fr); }
/* Ha csak két kártya van a sorban, töltsék ki a teljes szélességet,
ne maradjon üres harmadik hasáb. */
.card-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.kep-grid { grid-template-columns: repeat(4, 1fr); }
#elony, #megbizhatosag {
float: left;
width: calc(50% - 12px);
margin: 0;
}
#elony { margin-right: 24px; }
.kapcs1, .kapcs2 {
float: left;
width: calc(50% - 14px) !important;
margin-right: 28px !important;
}
.kapcs2 { margin-right: 0 !important; }
/* A két oszlop tetejét egy vonalba hozzuk. A jobb oldali oszlop -vel
kezdődik, aminek a globális 1.8em felső margója 53 px-szel lökné lejjebb
a tartalmát a bal oldali, keretes dobozhoz képest. Csak asztali nézetben
kell: mobilon egymás alatt vannak, ott a térköz indokolt. */
.kapcs1 > :first-child,
.kapcs2 > :first-child { margin-top: 0; }
.form_link {
display: flex;
align-items: center;
gap: 28px;
padding: 28px 32px;
}
.form_link p { flex: 1; }
.formlinkgomb { margin: 0 auto; flex: none; }
.footer-main { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; }
.topbar .wrap { justify-content: flex-end; gap: 24px; }
}
/* --- 1100 px felett ----------------------------------------------------- */
@media (min-width: 1100px) {
#nav > li > a { padding: 12px 16px; font-size: 1rem; }
#contwr { --pt: 56px; padding: var(--pt) 20px 48px; }
}
/* ==========================================================================
17. Mozgáscsökkentés és nyomtatás
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}
@media print {
.site-header, .site-footer, .page-head, .navtoggle, .form_link, .linktop { display: none !important; }
body { font-size: 11pt; color: #000; }
#contwr { max-width: none; padding: 0; }
a { color: #000; text-decoration: underline; }
}
/* --------------------------------------------------------------------------
Süti-hozzájárulás sávja
A két gomb SZÁNDÉKOSAN azonos méretű és súlyú: a jogszabály szerint az
elutasítás nem lehet nehezebben elérhető, mint az elfogadás, ezért egyik
sem kap kiemelt, „csábító” megjelenést.
-------------------------------------------------------------------------- */
#suti-sav {
position: fixed;
inset: auto 0 0 0;
z-index: 60;
background: var(--navy-900, #0d1b3a);
color: #fff;
padding: 16px 0;
box-shadow: 0 -6px 24px rgba(0,0,0,.28);
}
#suti-sav[hidden] { display: none; }
#suti-sav .wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 24px;
}
#suti-sav p {
margin: 0;
flex: 1 1 320px;
font-size: .92rem;
line-height: 1.5;
color: #fff;
}
/* A globális `strong { color: var(--navy-800) }` a sötétkék sávon
olvashatatlan sötétkéket adott – itt fehérnek kell lennie. */
#suti-sav strong { color: #fff; }
#suti-sav a { color: #fff; text-decoration: underline; }
#suti-sav .suti-gombok {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex: 0 0 auto;
}
#suti-sav button {
font: inherit;
font-weight: 600;
cursor: pointer;
min-height: 44px;
min-width: 168px;
padding: 10px 20px;
border: 1px solid #fff;
border-radius: var(--radius-sm, 6px);
background: #fff;
color: var(--navy-900, #0d1b3a);
}
#suti-sav button:hover,
#suti-sav button:focus-visible { background: var(--bg-soft, #eef1f5); }
@media (max-width: 599px) {
#suti-sav .suti-gombok { width: 100%; }
#suti-sav button { flex: 1 1 auto; min-width: 0; }
}
/* A döntést megváltoztató hivatkozás a láblécben */
.suti-ujra { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }