/* Business Native — mobil réteg (mobile.mjs, generált; ne szerkeszd kézzel) */ @media screen and (max-width: 767px) { /* --- 1. tipográfiai alapskála ------------------------------------------- A sablon mobil skálája olvashatatlanul kicsi. Előbb a design-tokeneket emeljük (ez visz mindent, ami a tokenből él), aztán osztály-szinten is, mert néhány komponens fix px-szel dolgozik. */ body { --_🔠-typography---size--label-2: 11px; --_🔠-typography---line-height--label-2: 15px; --_🔠-typography---size--label-1: 12px; --_🔠-typography---line-height--label-1: 16px; --_🔠-typography---size--button-2: 13px; --_🔠-typography---line-height--button-2: 18px; --_🔠-typography---size--button-1: 14px; --_🔠-typography---line-height--button-1: 20px; --_🔠-typography---size--body-3: 14px; --_🔠-typography---line-height--body-3: 21px; --_🔠-typography---size--body-2: 15px; --_🔠-typography---line-height--body-2: 23px; --_🔠-typography---line-height--body-1: 25px; } body .label-small { font-size: 11px; line-height: 15px; letter-spacing: .5px; } body .label-large { font-size: 12px; line-height: 16px; } body .text-small { font-size: 14px; line-height: 21px; } body .button-text { font-size: 14px; } body .footer-legal-link { font-size: 11px; line-height: 15px; } /* --- 2. cikk-törzs: ez az, amit valóban OLVASNI kell --------------------- Tananyagok, esettanulmányek, projektleírások és a jogi oldalak. 16px/1.62 a kényelmes mobil olvasási méret; a strong/a/em elemek szándékosan öröklik, hogy a bekezdésen belül ne ugráljon a méret. */ body .body-cms p, body .body-cms li, body .legal-body p, body .legal-body li, body .faq-paragraph p, body .faq-paragraph li { font-size: 16px; line-height: 1.62; } body .body-cms strong, body .body-cms em, body .body-cms a, body .legal-body strong, body .legal-body em, body .legal-body a { font-size: inherit; } /* A lecke-lead szándékosan nagyobb — a fenti szabály elvenné, visszaadjuk. */ body .bn-lesson-intro > p:first-of-type { font-size: 19px; line-height: 1.45; } /* Média-kártyák és jelölők: a 11-12px itt is kevés volt. */ body .bn-media-title { font-size: 15px; line-height: 22px; } body .bn-media-meta { font-size: 13px; line-height: 19px; } body .bn-lesson-map-label { font-size: 12px; line-height: 17px; } body .bn-tldr-label { font-size: 12px; } body .ai-prompt-hint { font-size: 13px; line-height: 19px; } body .bn-prompt-intro { font-size: 14px; line-height: 21px; } body .bn-nav-kicker { font-size: 11px; line-height: 15px; } body .bn-media-kicker, body .bn-media-card strong { font-size: 12px; } /* --- 3. érintési célok — Apple/Google minimum 44px ----------------------- A vizuális méret marad, csak a nyomható felület nő. */ /* A hamburger-ikon KÖZÉPRE igazítása. Buktató: a sima "body .menu-button" (0,1,1) NEM elég, mert a Webflow saját szabálya .w-nav[data-collapse="medium"] .w-nav-button{display:block} (0,3,0) erősebb — így a gomb 44px-re nőtt ugyan, de a 20px-es ikon a bal felső sarokban maradt (balról/fentről 9px, jobbról/lentről 15px, Attila szúrta ki a képen). Ezért kell a hosszabb, (0,3,1)-es szelektor, és padding:0, hogy a flex-központozás végezze a munkát — így az ikon akkor is középen marad, ha egyszer más méretet kap. */ body .w-nav .menu-button.w-nav-button { min-width: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; } body .footer-link, body .footer-legal-link, body .bn-tap { display: inline-flex; align-items: center; min-height: 44px; } /* Link-sor: eddig szóközzel elválasztott linkek folytak egybe. */ body .bn-linkrow { display: flex; flex-wrap: wrap; gap: 0 1.5rem; } body .bn-linkrow-item { margin-right: 1.5rem; } body .tab-item, body .ef-faq-tab-label, body .bn-chip, body .cta-small { min-height: 44px; display: inline-flex; align-items: center; } body .link-social { min-width: 44px; min-height: 44px; justify-content: center; } body .bn-askai-row a { min-width: 44px; min-height: 44px; } body input[type="checkbox"], body input[type="radio"] { min-width: 22px; min-height: 22px; } /* Letöltő linkek: eddig csupasz, 18px magas szövegsorok voltak — pedig a skill-oldalakon EZ a fő konverziós elem. Most gomb, 48px magas. */ body .bn-dl { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .65rem 1.1rem; border: 1px solid rgba(244, 243, 240, .22); border-radius: 999px; font-size: 15px; text-decoration: none; } /* --- 3b. fejléc: térközök és a védjegy mérete ---------------------------- Három külön baj volt egyetlen sorban, mérve (390 / 360 / 320 px): 1. A védjegy a navbarban 24px (polish.mjs, !important) = 208px széles. Mellé kell a 44px menü-gomb és a 95px Tudástár-gomb: a gomb 360px-en 24px-szel, 320px-en 64px-szel LELÓGOTT a képernyőről. Lapszintű kicsúszást nem okoz, mert a fejléc position:fixed — a fix elemek nem növelik a document scrollWidth-ét —, ezért a túlnyúlás-mérés vak rá. 2. A .nav-mobile-top paddingja 12px bal / 8px jobb: a menü-gomb 29px-re állt a bal széltől, a Tudástár-gomb 16px-re a jobbtól. Szemre billeg. 3. A védjegy és a Tudástár-gomb között NULLA hézag maradt — összeértek. A képlet úgy van hangolva, hogy 320px-en is kiférjen minden 12px-es hézagokkal: 16 pad + 44 menü + 12 + védjegy + 12 + 95 gomb + 16 pad. A .navbar .bn-wordmark az EGYETLEN !important a fájlban, és csak azért, mert a polish.mjs szabálya maga is az — másképp nem verhető. */ body .nav-mobile-top { padding-left: 0; padding-right: 0; gap: 12px; } body .left-nav { gap: 12px; } body .navbar .bn-wordmark { font-size: clamp(13px, calc(11.2vw - 22px), 24px) !important; } /* --- 4. űrlapmezők: 16px alatt az iOS Safari fókuszkor RÁZOOMOL ---------- A .bn-field jelölést a lenti DOM-lépés teszi rá minden mezőre. Azért kell, mert a "body input" szelektor CSAK típusokból áll (0,0,2), tehát BÁRMELYIK osztály-alapú mezőszabály — pl. .dg-scan-input{font:inherit} (0,1,0) — legyőzi. Az osztályos "body .bn-field" (0,1,1) viszont fölé kerül, !important nélkül. */ body .bn-field, body input, body textarea, body select, body .text-field, body .w-input, body .w-select { font-size: 16px; } /* --- 5. hosszú szavak, kód, útvonalak ------------------------------------ */ body p, body li, body td, body th, body h1, body h2, body h3, body h4 { overflow-wrap: break-word; } body code, body pre, body .bn-prompt, body .bn-code { overflow-wrap: anywhere; } /* --- 6. címsor-tördelés: ne maradjon árva szó az utolsó soron ------------ */ body h1, body h2, body h3, body h4, body .text-h1, body .text-h2, body .text-h3, body .text-h4, body .text-h5 { text-wrap: balance; } /* --- 7. széles táblázatok: legyen LÁTHATÓ, hogy oldalra görgethető ------- A táblázatok 448px szélesek egy 358px-es hasábban. A tartalom nem vész el (a wrapper görgethető), de semmi nem jelezte — a full-page képen levágott szövegnek látszott. */ body .bn-lesson-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } body .bn-table-hint { display: block; margin: .5rem 0 0; font-size: 12px; line-height: 17px; color: rgba(244, 243, 240, .45); } /* --- 8. ábra-nagyítás jelzése -------------------------------------------- A becsomagoló link SOR SZINTŰ elem: ha a kép display:block, a link saját doboza 19px magas sorra zsugorodik, és a nyomható felület nem esik egybe a képpel. Blokká tesszük, így a teljes ábra kattintható. */ body a.bn-zoom { display: block; } body a.bn-zoom img { display: block; width: 100%; height: auto; } body .brand-nav, body .brand-nav-simple { min-height: 44px; display: inline-flex; align-items: center; } body .bn-zoom-hint { display: block; margin: .5rem 0 0; font-size: 12px; line-height: 17px; color: rgba(244, 243, 240, .45); } /* --- 8b. a megmaradó tartalomjegyzék kapjon nevet ------------------------ Ahol nincs „Miről lesz szó" kártya, ott a jobb hasáb TOC-ja marad — de mobilon cím nélkül, két vonal közé ejtve árva szövegblokknak látszik. */ body .bn-toc-label { display: block; margin: 0 0 .5rem; font-size: 11px; line-height: 15px; letter-spacing: .5px; text-transform: uppercase; color: rgba(244, 243, 240, .45); } /* --- 9. apró kicsúszások -------------------------------------------------- A kvíz-CTA szekció 360/320 px-en 5px-szel túllógott a saját dobozán. */ body .bn-kviz-cta, body .bn-kviz-cta > * { max-width: 100%; } } /* --- 10. duplikált tartalomjegyzék ---------------------------------------- A lecke jobb hasábjának TOC-ja (.cms-content-table) tabletnél és alatta a törzs FÖLÉ csúszik — ott viszont már ott van a stilizált „Miről lesz szó" kártya ugyanazokkal a pontokkal, csak keret és cím nélkül. A jelölést a lenti DOM-lépés teszi rá, és CSAK arra a lapra, ahol tényleg mindkettő ott van (a skill-oldalakon pl. csak a TOC van — azt nem szabad elvenni). FIGYELEM: NEM a teljes blokkot rejtjük el, mert a „Kérdezd meg róla a saját AI-dat" sáv (.bn-askai-side) ugyanennek a doboznak a gyereke — csak a duplikált ugrólinkeket. */ @media screen and (max-width: 991px) { body .bn-toc-dup > .bn-toc-link { display: none; } body .bn-toc-dup > .bn-askai-side .bn-askai { margin-top: 0; } } /* --- 10a. lábléc tablet-sávban (Attila, 2026-08-05) ----------------------- A sablon a tablet-sávban a lábléc link-oszlopait (Oldalak / Fedezz fel / Jogi tudnivalók) egyetlen keskeny hasábba ejti, így a három lista hosszú toronyként áll egymás alatt. Van hely: a két lábléc-felet tesszük egymás alá (teljes szélesség), a három link-oszlopot pedig egymás mellett tartjuk. 600px alatt visszaadjuk a sablonnak — ott a Webflow saját 2, majd 1 oszlopos rendje a helyes. */ @media screen and (min-width: 600px) and (max-width: 991px) { body .footer-halves { grid-template-columns: 1fr; } body .footer-columns { grid-template-columns: 1fr 1fr 1fr; } } /* A TOC-címke csak ott kell, ahol a lista mobilon a törzsbe csúszik. */ @media screen and (min-width: 992px) { body .bn-toc-label { display: none; } } /* --- 10b. a jelzések desktopon is aprók legyenek (Attila, 2026-08-05) ------ A nagyítás- és táblázat-jelzést a lenti DOM-lépés MINDEN szélességen beszúrja, a méretüket viszont csak a 767px-es blokk adta meg. Desktopon így a törzsszöveg méretét örökölték, és az ábra alatt majdnem címsor méretű sorként ültek. Ez a szabály media queryn KÍVÜL van, tehát minden szélességen érvényes; a mobil blokk azonos értékei fölötte maradnak. A .cms-body-left-es változat sem dísz: a lecke-törzs szabálya (.cms-body-left p, 0-2-1) legyőzné a puszta body .bn-zoom-hintet (0-1-1), és a jelzés mobilon a törzsszöveg méretét venné fel. */ body .bn-zoom-hint, body .bn-table-hint, body .cms-body-left .bn-zoom-hint, body .cms-body-left .bn-table-hint { display: block; margin: .5rem 0 0; font-size: 13px; line-height: 18px; letter-spacing: 0; color: rgba(244, 243, 240, .45); } /* --- 11. nagyon keskeny telefonok (≤360px) -------------------------------- Itt a 44px-es lábléc-linkek már túl magasra nyújtanák a lapot, a 44px-es h1 pedig egyetlen hosszú magyar szótól (pl. „vállalkozásodnak?") szélesebb lesz, mint a képernyő — a kvíz-CTA szekció így lógott ki 9px-szel 320px-en. A címsor kicsinyítése jobb megoldás, mint a szó közepén tördelés. */ @media screen and (max-width: 360px) { body .footer-link { min-height: 40px; } body h1, body .text-h1 { font-size: 36px; line-height: 38px; letter-spacing: -1.2px; } body h2, body .text-h2 { font-size: 30px; line-height: 34px; } body .bn-kviz-cta-heading, body .bn-kviz-cta h2 { min-width: 0; } }