/* ==================================================================== A NYILVANOS VERBARO-WEBOLDAL KOZOS STILUSA (MUNKALISTA B6) Keszult: 2026-09-23. A SZINEK ES MERETEK A JATEK TEMAJABOL JONNEK, ERTEKRE AZONOSAN - ugyanaz a keszlet, amit a portal is hasznal (szerver/portal/ index.html), az pedig a Tema.kt / Tema.swift tokenjeibol. Igy a weboldal es a jatek egy csaladba tartozik, es ha a tema valtozik, EGY helyen kell utananezni. A NYELVEK: minden lap MIND AZ OT nyelvet tartalmazza, egymas utan. JavaScript NELKUL mind az ot latszik (egy jogi lap soha ne tudjon uresen megjelenni); ha a JS lefut, a megkapja a `js` osztalyt, es akkor CSAK a valasztott nyelv latszik. A valasztast a nyelv.js vegzi. ==================================================================== */ :root { --hatter-fent: #141A2E; --hatter-lent: #0E1220; --felulet: #171D31; --kocka: #232B44; --vonal: #2C3550; --tinta: #E7EAF4; --halvany: #8A93AD; --akcent: #FFC24B; --akcent-tinta: #221803; --jo: #5FD39B; --baj: #FF7A85; --sarok: 16px; --sarok-kicsi: 10px; --apro: 12px; --kicsi: 14px; --alap: 16px; --nagy: 18px; --kiemelt: 22px; --cim: 26px; --oriasi: 34px; --vastag: 900; } * { box-sizing: border-box; } /* MIN-height, nem height: ezek HOSSZU dokumentum-lapok (a portal app-szeru elrendezesehez kellett a fix 100%). Igy a hatter akkor is vegigfut a lapon, ha a `background-attachment: fixed` valamiert nem ervenyesul - kulonben a torzs alja feher marad. */ html, body { min-height: 100%; } body { margin: 0; background: linear-gradient(180deg, var(--hatter-fent), var(--hatter-lent)); background-attachment: fixed; color: var(--tinta); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: var(--alap); line-height: 1.55; } /* ---------------- fejlec + nyelvvalaszto ---------------- */ header.fo { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--felulet); border-bottom: 1px solid var(--vonal); flex-wrap: wrap; } header.fo .marka { font-size: var(--kiemelt); font-weight: var(--vastag); letter-spacing: .02em; color: var(--tinta); text-decoration: none; } header.fo .marka span { color: var(--akcent); } header.fo .toltelek { flex: 1; } /* A nyelvvalaszto a JOBB FELSO sarokban all (felhasznaloi kikotes, 2026-09-23) - telefonon a fejlec alatt, de ugyanabban a savban. */ nav.nyelvek { display: flex; gap: 4px; flex-wrap: wrap; } nav.nyelvek button { background: transparent; border: 1px solid var(--vonal); color: var(--halvany); font-family: inherit; font-size: var(--kicsi); padding: 5px 11px; border-radius: 999px; cursor: pointer; } nav.nyelvek button:hover { background: var(--kocka); color: var(--tinta); } nav.nyelvek button[aria-current="true"] { background: var(--akcent); color: var(--akcent-tinta); border-color: var(--akcent); font-weight: var(--vastag); } /* JS nelkul a valaszto ertelmetlen (nincs mit valasztani, minden latszik) - ezert olyankor el is tunik. */ nav.nyelvek { display: none; } html.js nav.nyelvek { display: flex; } /* ---------------- torzs ---------------- */ main { max-width: 760px; margin: 0 auto; padding: 28px 20px 70px; } /* A nyelvi valtozatok. JS nelkul MIND latszik, egymas utan, sajat fejleccel; JS-sel csak a valasztott. */ .ny { display: block; } .ny > .nyelv-jelolo { display: block; color: var(--halvany); font-size: var(--apro); text-transform: uppercase; letter-spacing: .12em; border-top: 1px solid var(--vonal); padding-top: 18px; margin-top: 34px; } html.js .ny { display: none; } html.js .ny.aktiv { display: block; } html.js .ny > .nyelv-jelolo { display: none; } h1 { font-size: var(--oriasi); font-weight: var(--vastag); margin: 0 0 6px; line-height: 1.2; } h1 .marka-jel { color: var(--akcent); } .alcim { color: var(--halvany); font-size: var(--nagy); margin: 0 0 22px; } .felutes { font-size: var(--kiemelt); font-weight: 600; margin: 0 0 26px; color: var(--tinta); } h2 { font-size: var(--kiemelt); font-weight: var(--vastag); margin: 30px 0 8px; line-height: 1.3; } h3 { font-size: var(--nagy); font-weight: 700; margin: 22px 0 6px; } /* SORKIZART TORZSSZOVEG (felhasznaloi keres, 2026-09-23): "ahol csak lehet, örülnék ha sorkizárt lenne a szöveges rész". Az ELVALASZTAS is kell hozza (`hyphens: auto`), kulonben a sorkizart szoveg szohatarokra feszul, es "folyok" keletkeznek benne - a bongeszo a szakasz `lang` attributumabol tudja, MELYIK nyelv szabalyai szerint valasszon el (minden nyelvi szakaszon ott van). A CIMEK, a felutes es a gombok NEM sorkizartak: egy-ket soros szovegnel a sorkizaras csak szethuzza a szokozoket. */ p, li { text-align: justify; hyphens: auto; } p.felutes, p.frissitve, p.suttogo, .kod-doboz p, footer.fo .ceg { text-align: left; hyphens: manual; } p { margin: 0 0 14px; } ul { margin: 0 0 14px; padding-left: 22px; } li { margin-bottom: 7px; } a { color: var(--akcent); } strong { font-weight: 700; } .kartya { background: var(--felulet); border: 1px solid var(--vonal); border-radius: var(--sarok); padding: 18px 20px; margin: 0 0 18px; } .kartya h2 { margin-top: 0; } .kiemelt-kartya { border-color: var(--akcent); } .cimke { display: inline-block; font-size: var(--apro); font-weight: var(--vastag); text-transform: uppercase; letter-spacing: .08em; border-radius: 999px; padding: 3px 11px; margin-bottom: 12px; background: var(--kocka); color: var(--halvany); } .cimke.fontos { background: var(--akcent); color: var(--akcent-tinta); } .frissitve { color: var(--halvany); font-size: var(--kicsi); margin-bottom: 26px; } /* A tablazatos felsorolas (pl. mit gyujtunk, mire) - telefonon is olvashato marad, mert nem valodi tablazat. */ .adatsor { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4px 16px; border-top: 1px solid var(--vonal); padding: 10px 0; } .adatsor:last-of-type { border-bottom: 1px solid var(--vonal); } .adatsor .mit { font-weight: 700; } .adatsor .mire { color: var(--halvany); } @media (max-width: 560px) { .adatsor { grid-template-columns: 1fr; gap: 2px; } } /* ---------------- lablec ---------------- */ footer.fo { border-top: 1px solid var(--vonal); background: var(--felulet); padding: 22px 20px 34px; } footer.fo .belso { max-width: 760px; margin: 0 auto; } footer.fo nav { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 12px; } footer.fo a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--vonal); } footer.fo a:hover { color: var(--akcent); border-color: var(--akcent); } footer.fo .ceg { color: var(--halvany); font-size: var(--kicsi); } /* ---------------- a meghivo-lap ---------------- */ .kod-doboz { background: var(--kocka); border: 1px solid var(--akcent); border-radius: var(--sarok); padding: 20px; text-align: center; margin: 0 0 22px; } .kod-doboz .kod { font-size: var(--oriasi); font-weight: var(--vastag); letter-spacing: .22em; color: var(--akcent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .gombsor { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; } .gomb { display: inline-block; background: var(--akcent); color: var(--akcent-tinta); font-weight: var(--vastag); font-size: var(--alap); font-family: inherit; border: 0; border-radius: var(--sarok-kicsi); padding: 12px 20px; text-decoration: none; cursor: pointer; } .gomb.masodlagos { background: transparent; color: var(--tinta); border: 1px solid var(--vonal); font-weight: 600; } .gomb:hover { filter: brightness(1.08); } .suttogo { color: var(--halvany); font-size: var(--kicsi); }