/* ═══════════════════════════════════════════════════════════════════════════ LKW STORE v3 – „JÁRMŰVET VESZEK" (oldal-jarmuvek.css) --------------------------------------------------------------------------- CSAK ezen a lapon él: a fej.php akkor tölti be, ha a $oldal === 'jarmuvek'. A terv.css-t NEM írja felül – se az img{height:auto}-t, se a .pg{object-fit}-et, és a közös osztályokhoz (.sec, .szolg, .td, .cars, .people) nem nyúl. Három dolog van benne, amire a közös lapnak nincs mintája: 1. a bevezető kéthasábos blokkja (.bev) 2. a SafeControl szakasz fotó + címkesor párosa (.sc-par) 3. a nyitható-csukható GYIK (.gyik) – JS nélkül,
elemekkel Mindhárom ugyanazt a nyelvet beszéli: derékszög, 2 px-es fekete osztóvonal, sorszám balra, piros csak ott, ahol a terv.css is használja (hover-jelölés). ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ 01 – A BEVEZETŐ ══════════════════════════════════════════════════════ A v1-en két hasáb állt egymás mellett (cím | szöveg). Itt a cím a közös .sec-head-be került, és ez a blokk hozza a maradék két bekezdést: a bal oldalon a gondolatmenet, a jobb oldalon az ígéret – vastag bal szegéllyel, ugyanúgy, ahogy a főoldalon a .big-num áll. */ .bev{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(24px,3vw,48px); align-items:start; border-top:2px solid var(--ink); padding-top:clamp(22px,2.4vw,30px); } .bev-txt{color:var(--gray);font-size:16.5px;line-height:1.62;max-width:62ch} .bev-txt strong{color:var(--ink);font-weight:800} .bev-ki{ font-size:clamp(1.2rem,2vw,1.58rem);font-weight:900;letter-spacing:-.025em;line-height:1.22; border-left:4px solid var(--ink);padding-left:20px; } @media (max-width:900px){ .bev{grid-template-columns:1fr;row-gap:24px} .bev-ki{font-size:1.2rem} } /* ═══ 03 – SAFECONTROL: fotó és a vizsgált fő egységek ═════════════════════ A felsorolás a GYIK saját mondatából való („motor, hajtáslánc, futómű, fék, alváz, fülke, elektronika, felépítmény és a dokumentáció ellenőrzését"), futó címkékké szedve – ugyanaz a forma, mint a .szolg-cimkek, csak sötét alapra hangolva. */ .sc-par{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(22px,2.6vw,38px); align-items:start; } /* A DOBOZ MÉRETE NE A LETÖLTÖTT VÁLTOZATTÓL FÜGGJÖN. Az sc-tablet.jpg 1400×933 (arány 1,50054), a belőle készült WebP viszont 880×586 (1,50171) – 880 × 933/1400 = 586,29, egész képpontra kerekítve nem jöhet ki ugyanaz az arány. Amíg a lusta kép be nem töltött, a böngésző a width/height szerint tartja a helyet, utána átvált a fájl SAJÁT arányára: lemérve ettől ugrott 237,234 → 237,063 px-re a kép, és vele a lap magassága 11046 → 11045 px-re a második görgetésnél. Az aspect-ratio rögzíti a dobozt, tehát a betöltés előtt és után UGYANAKKORA. A terv.css img{height:auto}-ját nem írja felül – azzal együtt működik, és a kép nem torzul (eltérés 0,07%, a mérőeszköz 4%-os küszöbe alatt három nagyságrenddel). FIGYELEM a szelektorra: a kép picture-elembe van csomagolva, ezért a terv.css .td-img>img szabálya (gyermek-szelektor) NEM illeszkedik rá – a leszármazott alakot kell használni. */ .sc-kep .td-img img{aspect-ratio:1400/933} .sc-cimkek{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;list-style:none;padding:0} .sc-cimkek li{ font-size:12.5px;font-weight:700;color:#e7e9eb; border:1px solid var(--ink-3);background:var(--ink-2);padding:6px 12px; } .sc-sor{margin-top:20px;color:#a8aeb6;font-size:15.5px;line-height:1.6;max-width:46ch} /* ÜRES SÁV KIZÁRÁSA. Két hasáb áll egymás mellett: balra az 504 px magas fotó, jobbra a címkesor, ami önmagában csak 218 px – vagyis a jobb hasáb alatt 286 px holt sötét felület maradt (lemérve 1440 px-en). A záró mondat ezért a hasáb ALJÁRA kerül, vékony vonal fölé: így a fotó képaláírás-sávjával egy vonalban zár, a köz pedig szándékos levegő lesz, nem üresen hagyott sáv. Csak kéthasábos nézetben – egyhasábosan a mondat a címkék alatt marad. */ @media (min-width:981px){ .sc-par{align-items:stretch} /* a jobb hasáb a fotó magasságát kapja */ .sc-kep{align-self:start} /* a fotó marad a saját magasságán */ .sc-mell{display:flex;flex-direction:column} .sc-sor{margin-top:auto;padding-top:20px;border-top:1px solid var(--ink-3)} } @media (max-width:980px){ .sc-par{grid-template-columns:1fr} .sc-sor{max-width:62ch} } /* ═══ 04 – GYIK ════════════════════════════════════════════════════════════ A v1-en ez egy JS-sel nyitott-csukott doboz volt. Itt
– tehát működik akkor is, ha egyetlen szkript sem fut, és a válasz szövege MINDIG benne van a lapban (a kereső és a felolvasó is látja). A rácsosztás szándékosan ugyanaz, mint a .szolg-row-é: 52 px sorszám, utána a tartalom – a két felsorolás így egy vonalban áll a lapon. */ .gyik{border-top:2px solid var(--ink)} .gyik-item{border-bottom:1px solid var(--line)} .gyik-item>summary{ display:grid; grid-template-columns:52px minmax(0,1fr) 22px; column-gap:28px;align-items:baseline; padding:22px 0;cursor:pointer;list-style:none; } .gyik-item>summary::-webkit-details-marker{display:none} .gyik-n{ font-size:13px;font-weight:900;letter-spacing:.1em;color:var(--gray-2); font-variant-numeric:tabular-nums; } .gyik-item:hover .gyik-n{color:var(--red)} /* ugyanaz a jelölés, mint a .szolg-row-n */ .gyik-q{font-size:clamp(1.02rem,1.45vw,1.24rem);font-weight:800;letter-spacing:-.018em;line-height:1.3} /* a jelölő: plusz → mínusz, szín nélkül (a piros a telefoné és a SafeControlé) */ .gyik-item>summary::after{ content:"";width:14px;height:14px;align-self:center;justify-self:end; background: linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat; } .gyik-item[open]>summary::after{ background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat; } .gyik-a{ padding:0 0 26px 80px; /* 52 px sorszám + 28 px köz */ display:flex;flex-direction:column;align-items:flex-start;gap:14px; } .gyik-a p{color:var(--gray);font-size:16px;line-height:1.62;max-width:62ch} /* ═══ HOSSZÚ GOMBFELIRAT TELEFONON ════════════════════════════════════════ A .btn alapból white-space:nowrap. Telefonon a terv.css 100%-ra húzza a .sc-cta és a .kutat gombjait, a „Megnézem az átvizsgálás folyamatát" felirat viszont egy sorban SZÉLESEBB, mint a 390 px-es nézet tartalmi sávja – a gomb jobb széle kilógott a dobozból (a html{overflow-x:clip} csak ELREJTETTE, nem oldotta meg). Itt tördelhetővé tesszük: két sorba fut, a doboz marad. */ @media (max-width:720px){ #safecontrol .sc-cta-btns .btn, #kinalat .kutat-btns .btn{white-space:normal;text-align:center;line-height:1.25} } @media (max-width:720px){ .gyik-item>summary{grid-template-columns:40px minmax(0,1fr) 18px;column-gap:12px;padding:18px 0} .gyik-item>summary::after{width:12px;height:12px; background: linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat, linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat; } .gyik-item[open]>summary::after{background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat} .gyik-a{padding:0 0 22px 52px} .gyik-a p{font-size:15px} }