/* ============================================================ Hello Biztonság — KÖZLEKEDÉSBIZTONSÁG aloldal stílus Minden szabály .kb alá skópozva, hogy ne ütközzön a témával. A blokkjaidra tedd rá a .kb wrappert (ld. szekció-fájl). A dinamikus listákat (mítosz-kártyák, éjszaka, teendők) a kb-page.js építi fel — a kártyák belső stílusa ott, inline van. ============================================================ */ .kb{ --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D; --cream:#F7F5F0; --danger:#FF5A5A; --f-display:'Anton',sans-serif; --f-head:'Space Grotesk',sans-serif; --f-body:'DM Sans',system-ui,sans-serif; --f-mono:'Space Mono',monospace; background:var(--navy); color:var(--cream); font-family:var(--f-body); } /* Ha bármi egy-két pixellel kilóg jobbra (kifutó doboz, húzott kártya), a telefon oldalra húzhatóvá válik, és a szélén megjelenik a fehér háttér. A `clip` — a `hidden`-nel ellentétben — csak vág, NEM csinál görgetődobozt, így a `position:sticky` kártya-paklik továbbra is megragadnak. */ .kb{overflow-x:clip} @supports not (overflow-x:clip){ .kb{overflow-x:hidden} } .kb *{box-sizing:border-box} .kb img{display:block} .kb a{text-decoration:none} .kb button{font-family:inherit} .kb .i{display:inline-flex;align-items:center;justify-content:center} .kb .i svg{width:100%;height:100%;display:block} /* ---- Mítosz flip-kártyák ---- */ /* A kártya NEM fix magasságú: a két lapja ugyanabba a rács-cellába kerül (grid-area:1/1), így a doboz a tartalmához igazodik. Asztalin a rács egy soron belül egyformára húzza őket, mobilon a kb-page.js `fitCard()`-ja az ÉPPEN LÁTHATÓ laphoz zsugorítja. (Ugyanaz a séma, mint a kb3/kb4 lapjain.) */ .kb-myth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .kb-myth{perspective:1200px;display:grid;animation:kbpop .55s cubic-bezier(.2,.9,.3,1.2) backwards} .kb-myth:nth-child(1){animation-delay:.02s} .kb-myth:nth-child(2){animation-delay:.09s} .kb-myth:nth-child(3){animation-delay:.16s} .kb-myth:nth-child(4){animation-delay:.23s} .kb-myth:nth-child(5){animation-delay:.30s} .kb-myth:nth-child(6){animation-delay:.37s} /* grid-template-rows:minmax(0,1fr) — a sor NEM nőhet a kártya dobozánál nagyobbra: enélkül a mobilon rövidebbre húzott kártyából a másik (hosszabb) lap alul kilógna, és iOS-en tükrözve átüt a kártya alatt. */ .kb-inner{position:relative;display:grid;grid-template-rows:minmax(0,1fr);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.15,.2,1),height .4s cubic-bezier(.4,.15,.2,1)} .kb-myth.kb-flip .kb-inner{transform:rotateY(180deg)} /* position:relative KELL: a hátlap dekorációs köre ehhez igazodik (korábban ezt a `position:absolute` adta, ami a rács-cellás elrendezéssel kiesett). */ .kb-face{grid-area:1/1;position:relative;min-width:0;backface-visibility:hidden;border-radius:18px;padding:22px;display:flex;flex-direction:column;overflow:hidden} .kb-face-b{transform:rotateY(180deg)} .kb-tf{cursor:pointer;transition:background .15s} @media (hover:hover) and (pointer:fine){.kb-tf-t:hover{background:rgba(17,183,163,.22)!important}} @media (hover:hover) and (pointer:fine){.kb-tf-f:hover{background:rgba(255,90,90,.22)!important}} /* ---- Teendő-lista (todo) sorok ---- */ .kb-step{cursor:pointer;transition:background .2s,border-color .2s} /* ---- Éjszaka / hallás szimulátor opciók ---- */ .kb-opt{cursor:pointer;transition:all .18s} /* ---- Mobil körhinta (01 láthatóság + 03 fülhallgató) ---- A burkolót, a pöttyöket és a sávra a .kb-optcar osztályt a kb-page.js teszi be (optCarousel). Asztali nézetben nincs rájuk szükség (a gombok egymás alatt vannak), ott rejtve maradnak. */ /* A választósáv fölötti felirat („Mi van rajtad?" / „Mi van a füledben?") lime buborékban — így látszik, hogy ez egy vezérlő, nem alcím. Az osztályt a kb-page.js teszi rá (optCarousel), a markup változatlan. Az !important a szekció inline stílusát írja felül (font, szín). */ .kb .kb-optlabel{ display:inline-flex;align-items:center;align-self:flex-start; background:rgba(201,234,61,.12);border:1px solid rgba(201,234,61,.4); border-radius:999px; padding:7px 14px;margin-bottom:4px; font:700 11px 'Space Mono',monospace!important; letter-spacing:.12em!important;text-transform:uppercase; color:#C9EA3D!important; } /* A játék-csip lefelé nyila csak mobilon van értelme (ott görget a kerethez); asztalin a játék úgyis ott van a szem előtt. */ .kb .kb-bogar-jump{display:none} @media(max-width:600px){ .kb .kb-bogar-jump{display:inline-flex} } /* 2026-08-31: itt állt egy kísérlet (saját kompozitor-réteg a játék- keretnek: `contain:paint` + `translateZ(0)` asztali nézetben), a fehér felvillanás ellen. NEM segített — és mivel egy plusz kompozitor-réteget csinált egy amúgy is roskadozó GPU-folyamatban, inkább árthatott is. Ezért kivettük; ha valaha újra elő kellene venni, a git nélküli fájlokban ez a bejegyzés az egyetlen nyoma. */ .kb-optnav{position:relative} .kb-optbar{display:none} /* ---- Fülhallgató (03) hang-rács ---- */ .kb-audio-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* ---- Telefon (04) aranyszabály-kártyák ---- */ .kb-phone-rule{cursor:pointer;transition:transform .12s,border-color .18s} @media (hover:hover) and (pointer:fine){.kb-phone-rule:hover{transform:translateY(-2px)}} /* ---- Animációk ---- */ @keyframes kbfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(1deg)}} @keyframes kbpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,90,.55)}70%{box-shadow:0 0 0 18px rgba(255,90,90,0)}} @keyframes kbpulseL{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.5)}70%{box-shadow:0 0 0 16px rgba(201,234,61,0)}} @keyframes kbmarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @keyframes kbrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes kbcar{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}} @keyframes kbpop{from{opacity:0;transform:translateY(24px) scale(.94)}60%{transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}} /* ---- Reszponzív ---- */ @media(max-width:900px){ .kb-myth-grid{grid-template-columns:1fr 1fr} .kb-hero-grid{grid-template-columns:1fr!important} .kb-two{grid-template-columns:1fr!important} } @media(max-width:600px){ .kb-myth-grid{grid-template-columns:1fr} /* egy oszlopban a kártya az éppen látható laphoz zsugorodik (ld. fitCard) */ .kb-face{align-self:start;padding:18px} /* Az ÉPPEN NEM LÁTSZÓ lap feszüljön pontosan a kártya magasságára, hogy a saját overflow:hidden-je levágja — különben kilóg a doboz alól. */ .kb-myth:not(.kb-flip) .kb-face-b, .kb-myth.kb-flip .kb-face:not(.kb-face-b){align-self:stretch} .kb-nav-links{display:none!important} /* ---- Fülhallgató (03) hang-rács MOBILON -------------------------- Hat teljes szélességű sor egy egész képernyőt elfoglalt, miközben a nevek fele két szó. Ezért: a jobb szélső hangszóró-ikon elmarad (a „hallod-e" amúgy is látszik a keret színén és a halványításon), a rövid nevűek kettesével kerülnek egy sorba, a két hosszú név (elektromos autó, villamos/HÉV/vonat) pedig teljes szélességű marad: Sziréna | Fékcsikorgás Duda | Kiáltás Néma elektromos autó / e-roller Villamos / HÉV / vonat A sorrendet itt az `order` adja, hogy a HEAR_SOUNDS tömb (és vele az asztali elrendezés) érintetlen maradjon. A csempék méreteit inline stílus adja, ezért kell ide az !important. */ .kb-audio-grid{grid-template-columns:1fr 1fr} .kb-audio-grid .kb-snd-vol{display:none} .kb-audio-grid .kb-snd-szirena{order:1} .kb-audio-grid .kb-snd-fek{order:2} .kb-audio-grid .kb-snd-duda{order:3} .kb-audio-grid .kb-snd-kialtas{order:4} .kb-audio-grid .kb-snd-ev{order:5;grid-column:1/-1} .kb-audio-grid .kb-snd-sin{order:6;grid-column:1/-1} /* párban szűkebb a hely: kisebb ikon, szorosabb belső margó, tördelhető név */ .kb-audio-grid .kb-snd{gap:9px!important;padding:10px 11px!important} .kb-audio-grid .kb-snd-ic{width:30px!important;height:30px!important} .kb-audio-grid .kb-snd-txt{font-size:12.5px!important;line-height:1.25;min-width:0} /* ---- Választógombok mobilon: KÖRHINTA ---------------------------- A 01 (Mi van rajtad?) és a 03 (Mi van a füledben?) blokk gombjai. Egymás alatt kitöltötték a képernyőt, és az eredmény-panel csak egy képernyővel lejjebb volt. A rövidített chip-sor ezt megoldotta, de a csonkolt feliratok („Egy fül”, „ANC”) nem mondták meg, miről van szó. Most: KÖRHINTA. Középen a kiemelt kártya a TELJES felirattal, mögötte jobbra-balra kikandikál a szomszédja; ujjal húzva a középre érkező kártya lesz a kiválasztott, és az alatta lévő panel rögtön arra vált. A geometria: kártya szélessége W = 72% átfedés 2×18px (negatív oldalmargó → a szomszéd a kiemelt kártya ALÁ csúszik) széli térköz (100%-W)/2 + 18px = 14% + 18px → az ELSŐ és az UTOLSÓ kártya is pontosan középre tud állni A széli térköz ::before/::after álelem, NEM a sáv paddingja: a padding százaléka a szülő szélességéhez igazodna, a flex-basis százaléka viszont a sáv TARTALOM-dobozához — a kettő nem esne egybe, és a szélső kártyák mindig félrecsúsznának. A gombokat a kb-page.js építi inline stílussal, ezért kell az !important. */ /* A rács- és flex-elemek alapból NEM zsugorodnak a tartalmuk alá (min-width:auto), ezért a sáv kitolná az oldalt vízszintesen. */ .kb-two > div{min-width:0} .kb-optcar{ flex-direction:row!important;flex-wrap:nowrap;align-items:stretch; overflow-x:auto;overflow-y:visible;gap:0!important; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding:6px 0 4px;margin-top:2px; min-width:0;max-width:100%; scrollbar-width:none; /* VÍZSZINTES HÚZÁS UJJAL. Itt korábban `pan-y` állt: az azt jelenti, hogy a böngésző CSAK függőleges húzást kezel ezen az elemen — a vízszintes ujjmozdulat nem lapozott, csak a nyilak működtek. `pan-x pan-y`: vízszintesen a sáv görög, függőlegesen a lap. */ touch-action:pan-x pan-y pinch-zoom; } /* széli térköz — ld. a fenti geometria-megjegyzést */ .kb-optcar::before, .kb-optcar::after{content:'';flex:0 0 calc(14% + 18px)} .kb-optcar::-webkit-scrollbar{display:none} .kb-optcar .kb-opt{ flex:0 0 72%;width:auto!important;margin:0 -18px; scroll-snap-align:center;scroll-snap-stop:always; position:relative;z-index:1; flex-direction:column!important;align-items:center!important; text-align:center!important;gap:6px!important; padding:12px 14px 11px!important;border-radius:18px!important; background:rgba(247,245,240,.04); /* nem kiemelt: kisebb és halványabb → úgy hat, mintha mögötte lenne */ transform:scale(.87);opacity:.5; transition:transform .26s cubic-bezier(.3,.9,.35,1),opacity .26s ease; } .kb-optcar .kb-opt-on{ z-index:3;transform:scale(1);opacity:1; box-shadow:0 16px 34px -14px rgba(0,0,0,.75); } /* ikon-doboz középen, a felirat TELJES (tördelhet 2 sorba) */ .kb-optcar .kb-opt-ic{width:34px!important;height:34px!important;border-radius:10px!important} .kb-optcar .kb-opt-ic .i{width:19px!important;height:19px!important} .kb-optcar .kb-opt-txt{flex:none!important;font-size:14px!important;line-height:1.25;text-wrap:balance;text-align:center!important} .kb-optcar .kb-opt-pct{font-size:13px!important} /* A 03-nál a kiemelt kártya százaléka lime. A 01-nél NEM írjuk felül: ott a métert a kb-page.js színezi (lime = időben lát, piros = túl késő). */ #kb-audio-opts .kb-opt-on .kb-opt-pct{color:#C9EA3D!important} /* ---- alsó vezérlősor: ‹ nyíl · pöttyök · nyíl › ---- A nyilak a pöttyök MELLETT vannak, nem a sáv szélén: ott eltakarnák a kiemelt kártya mögül kikandikáló szomszédokat. Amelyik irányban elfogytak a lehetőségek, ott a nyíl elhalványul. */ .kb-optbar{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:9px} .kb-optarr{ display:flex;align-items:center;justify-content:center; width:30px;height:30px;padding:0;border-radius:50%; border:1.5px solid rgba(201,234,61,.45);background:rgba(201,234,61,.09); color:#C9EA3D;cursor:pointer; transition:opacity .18s ease,background .16s ease,transform .12s ease; } .kb-optarr:active{background:rgba(201,234,61,.24);transform:scale(.94)} .kb-optarr[disabled]{opacity:.22;pointer-events:none} .kb-optarr .i{width:16px;height:16px} /* pöttyök: hányadiknál tartasz, és koppintással is lehet velük váltani */ .kb-optdots{display:flex;justify-content:center;align-items:center;gap:7px} .kb-optdot{ width:7px;height:7px;padding:0;border:0;border-radius:99px; background:rgba(247,245,240,.26);cursor:pointer; transition:width .22s ease,background .22s ease; } .kb-optdot-on{width:22px;background:#C9EA3D} /* ---- Nagy érték + minősítő buborék EGY SORBAN ---- A panelek fejléce eddig [felirat + nagy szám] | [buborék] felosztású volt, és mobilon a buborék külön sorba esett (a felirat kiszélesítette a bal dobozt). A belső dobozt `display:contents`-szel feloldjuk: a felirat, a nagy szám és a buborék így KÖZVETLEN flex-elem lesz — a felirat kap egy egész sort, alatta a szám és a buborék egymás mellett. Az osztályokat a kb-page.js teszi rá (markValueRow), a szekció-markup változatlan marad. */ .kb-valpanel{padding-left:20px!important;padding-right:20px!important} .kb-valrow{align-items:center!important;gap:8px 12px!important;flex-wrap:wrap!important} .kb-valtxt{display:contents} .kb-valtxt > :first-child{flex:0 0 100%} /* a kis felirat külön sorban */ .kb-valrow > [id$="-verdict"]{padding:7px 13px!important;white-space:nowrap} /* A játék-csip mobilon koppintható: odagörget a kerethez (kb-page.js initGameChip). Itt csak a „kattintható" jelzés: mutató kurzor és a lefelé nyíl. Asztalin a nyíl rejtve (a szabály lentebb, a @media-n kívül). */ .kb .kb-bogar-chip{cursor:pointer;-webkit-tap-highlight-color:transparent} .kb .kb-bogar-chip:active{transform:scale(.97)} /* ---- A bogárkerülő játék kifutó kerete ---- A keret a képernyő széléig ér. FIX negatív margóval ez törékeny: a szekció oldalpaddingja 40→18px lett, a markupban lévő -24px pedig 6-6 pixelt kilógott a képernyőből — ettől a telefon oldalra húzhatóvá vált, és a szélén kivillant a fehér háttér. A `calc(50% - 50vw)` mindig pontosan a tényleges padding mértékét adja vissza (ugyanaz a séma, mint a .hb-pin ablaké). !important, mert a szabály a szekció-markup inline