/* 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; } /* A figyelem-blokk címkéje ugyanebbe a csoportba tartozik — 2026-08-06-i mérés szerint 11px-en maradt, pedig ugyanúgy OLVASNI kell, nem csak ránézni. (A .bn-toc-label-t NEM itt állítjuk: arra lentebb, a 8b. pontnál van egy teljes szabály, ami azonos specifitással KÉSŐBB jön, tehát az nyerne — a méretét ott adjuk meg.) */ body .bn-lesson-warn-label { font-size: 12px; line-height: 17px; } 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ő. A padding korábban 0-ra volt állítva a fenti képlet ELLENÉRE — emiatt a hamburger-gomb a képernyő bal szélére tapadt (Attila jelezte, 2026-08-06-i szkrín). A képletben szereplő 16px-es saját padding a helyes érték, 320px-en is befér. */ body .nav-mobile-top { padding-left: 16px; padding-right: 16px; gap: 12px; } body .left-nav { gap: 12px; } body .navbar .bn-wordmark { font-size: clamp(13px, calc(11.2vw - 22px), 24px) !important; } /* --- 3c. szolgáltatás hero-lead: szürkébb szín CSAK mobilon -------------- Desktopon a nagy, kétsoros H1 mellett a sima 72%-os opacitás (lásd ef-sections.mjs) elég kontrasztot ad — Attila kérése (2026-08-06), hogy ez a szín-eltérés csak mobilon kelljen, ahol a kisebb H1 miatt a törzsszöveg jobban összeolvad vele. A szín ugyanaz a token, amit a „Három jel, amiből látszik, hogy jó helyen jársz" alcím (.body-medium) is használ. */ body .ef-hero-lead { opacity: 1; color: var(--_🎨-color--tokens---text-body--medium); } /* --- 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; /* 12px, nem 11: a tartalomjegyzék telefonon a lecke navigációja, azt olvasni kell. (2026-08-06-i mérés: 151 leckén állt 11px-en.) */ font-size: 12px; line-height: 17px; 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%; } /* --- 9b. h1/h2 mobilon (Attila, 2026-08-06) ------------------------------- A sablon mobil-töréspontja a h1-et NEM csökkenti — egy hosszabb magyar főcím (pl. a /szolgaltatas hero-ja, „Mesterséges intelligencia a vállalkozók szolgálatában") így 4 sorra törve is a desktophoz közeli méretet kapja, ez telefonon aránytalanul nagynak hat. Korábban ez a méret csak 360px alatt élt (vészhelyzeti tördelés-védelem) — most minden mobil-szélességen érvényes, hogy a hero és minden más h1 egységesen kisebb legyen. */ 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; } /* --- 9c. /szolgaltatas hero — pontosan 2 sor mobilon (Attila, 2026-08-06) - A 9b. pont 36px-es h1-e mellett a „Mesterséges intelligencia a vállalkozók szolgálatában" cím mobilon is 4 sorra törik (túl sok karakter/sor). Az overrides.mjs a törésponton egy bn-hero-break osztályú span-et tesz a szövegbe (nem sor-törés elemet, hogy a SEO/strukturált-adat lépések szóköz-vesztés nélkül ki tudják nyerni a sima szöveget) — itt csak ennyit teszünk: a span blokká válik (ez viszi új sorra a szöveg második felét), a betűméret pedig annyival csökken, hogy mindkét fél kiférjen egy-egy sorban 320–430px közötti telefonokon. 30px-re tornázva (Attila kérésére, 2026-08-06, harmadik kör: 25→26→28→ 30px). A hosszabbik fél („a vállalkozók szolgálatában", 27 karakter) a mért plafon-becslés szerint kb. 27px körül fér ki biztosan 360-390px-es telefonszélességen — 30px ezen már túl van, tehát a keskenyebb telefonokon (iPhone SE, kisebb Android) reális eséllyel 3. sorra törhet. Attila saját (szélesebb, ~414px-es) telefonján a korábbi köröknél még volt hely, ezért próbáljuk ezt is — élő böngészős méréssel innen nem ellenőrizhető (a sandbox nem éri el a betűtípust). A balra igazítást (korábbi kör) Attila visszakérte középre — az .ef-hero-head saját, alapból középre záró szabálya (ef-sections.mjs) marad érvényben, mobilon sincs felülírva. */ body .bn-hero-break { display: block; } body .ef-service-hero h1, body .ef-service-hero .text-h1 { font-size: 30px; line-height: 35px; letter-spacing: -.3px; } /* --- 9d. Árak-híd CTA-gomb ("Csomagok és árak") mobilon (Attila, 2026-08-06) — a globális .button-text szabály (1. pont, 14px) itt túl kicsinek hatott. Csak ezt a gombot emeljük, a többi cta-small (fejléc, egyéb szekciók) mérete változatlan marad. */ body .bn-plans-lead .button-text { font-size: 16px; } /* --- 9e. „Mások szolgálata" küldetés-blokk (.ef-mission-title) mobilon (Attila, 2026-08-06) — az ef-sections.mjs saját mérete clamp(2rem,2.8vw,2.5rem): keskeny mobil-szélességen a 2.8vw ág a minimum (2rem = 32px) alá esik, tehát a font-size MINDIG 32px marad, függetlenül a képernyő szélességétől. Egy 5-7 soros bekezdésnél ez szinte az egész képernyőt betölti, aránytalanul nagynak hat. A class- szelektor (0,1,0) erősebb, mint a 9b. pont elem-szelektoros „body h2" szabálya (0,0,2), ezért azt itt nem örökli — külön, class-szintű felülírás kell. */ body .ef-mission-title { font-size: 24px; line-height: 1.25; } } /* --- 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 h1/h2 mérete a 9b. pontban már minden mobil-szélességen 36/30px, azt itt nem kell megismételni. A kvíz-CTA szekció 9px-szel lógott ki 320px-en. */ @media screen and (max-width: 360px) { body .footer-link { min-height: 40px; } body .bn-kviz-cta-heading, body .bn-kviz-cta h2 { min-width: 0; } }