:root{ --hatter:#F4F6F5; --lap:#FFFFFF; --lap-2:#EEF2F1; --vonal:#DCE3E1; --vonal-eros:#C3CECB; --tinta:#17262A; --tinta-halk:#5B6B6E; --tinta-halkabb:#87979A; --fo:#12615C; --fo-halk:#E3EFED; --fo-sotet:#0C433F; --meleg:#B9691F; --meleg-halk:#F8EDE1; --jo:#2C7A4F; --jo-halk:#E4F1E9; --var:#9A6B12; --var-halk:#FAF0DC; --piros:#C7382F; --arnyek:0 1px 2px rgba(23,38,42,.06), 0 8px 24px rgba(23,38,42,.06); --r:14px; --r-nagy:22px; --mancs:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 86'%3E%3Cg fill='%23000'%3E%3Cg transform='translate(20 18) rotate(-16 20 20)'%3E%3Cellipse cx='20' cy='25' rx='7.6' ry='6.2'/%3E%3Cellipse cx='11.6' cy='15.6' rx='3' ry='4'/%3E%3Cellipse cx='17.6' cy='12.2' rx='3' ry='4.2'/%3E%3Cellipse cx='24.2' cy='12.2' rx='3' ry='4.2'/%3E%3Cellipse cx='29.6' cy='16.4' rx='3' ry='3.8'/%3E%3C/g%3E%3Cg transform='translate(-16 44) rotate(14 20 20) scale(.82)'%3E%3Cellipse cx='20' cy='25' rx='7.6' ry='6.2'/%3E%3Cellipse cx='11.6' cy='15.6' rx='3' ry='4'/%3E%3Cellipse cx='17.6' cy='12.2' rx='3' ry='4.2'/%3E%3Cellipse cx='24.2' cy='12.2' rx='3' ry='4.2'/%3E%3Cellipse cx='29.6' cy='16.4' rx='3' ry='3.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); color-scheme: light; } /* A felület MINDIG világos. A telefon sötét beállítása nem kapcsolja át: a `prefers-color-scheme` figyelése szándékosan ki van véve. A sötét paletta alább megmarad, de csak akkor lép életbe, ha valaki kézzel rárakja a -re a data-theme="dark" jelölőt. Most senki nem teszi. */ :root[data-theme="dark"]{ --hatter:#0E1617; --lap:#16211F; --lap-2:#1C2A28; --vonal:#273634; --vonal-eros:#38504C; --tinta:#EAF1EF; --tinta-halk:#9DB0AE; --tinta-halkabb:#7B8F8C; --fo:#5FBFAF; --fo-halk:#173733; --fo-sotet:#9BD8CC; --meleg:#E0A063; --meleg-halk:#33261A; --jo:#6FC08C; --jo-halk:#16301F; --var:#D6AC55; --var-halk:#2C2312; --piros:#F08076; --arnyek:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28); } *{box-sizing:border-box} /* A hidden attribútum erősebb legyen, mint a display:flex a komponenseken. E nélkül a rejtett sávok és nézetek láthatók maradnak. */ [hidden]{display:none !important} html,body{height:100%} body{ margin:0; background:var(--hatter); color:var(--tinta); font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:400; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;margin:0;text-wrap:balance} /* ---------- keret ---------- */ .keret{ max-width:460px; margin:0 auto; padding-inline:16px; padding-block:18px 96px; } /* Gergő (2026-09-19): a jel a NÉV ELŐTT marad, a kettő együtt középen, az óvoda neve alattuk. A sáv legyen keskeny — a fejléc tájékoztat, nem reprezentál; a helyet a tartalom kapja. A tördelést a flex-wrap adja: a jel és a név egy sorba fér, az alcím teljes szélességű, tehát új sorba kerül. */ .markasav{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 8px; padding-bottom:9px; margin-bottom:12px; border-bottom:1px solid var(--vonal); text-align:center; } .markasav .markaalcim{flex-basis:100%; margin-top:1px} /* A márkanév mindenhol nagybetűs. A verzálhoz pozitív betűköz kell, különben összetapadnak a betűk. */ .markanev{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:17px; letter-spacing:.055em; text-transform:uppercase; color:var(--fo); line-height:1.2; } /* ---------- az Ovikassza jele ---------- */ .ovijel{flex:none; width:22px; height:22px; color:var(--fo); display:block} .kapu-fej .ovijel{width:50px; height:50px; margin:0 auto 10px} .markaalcim{font-size:11.5px; color:var(--tinta-halkabb); line-height:1.3} .telepito{ display:flex; align-items:center; gap:12px; padding:13px 15px; margin-bottom:14px; background:var(--fo-halk); border-radius:var(--r); position:relative; } .telepito.halk{background:var(--lap-2)} .telepito-szoveg{flex:1; font-size:13.5px; line-height:1.5; color:var(--tinta)} /* A „hogyan" külön sorban ül: a miért olvasható elsőre, a lépések alatta. */ .telepito-hogyan{display:block; margin-top:4px; font-size:12.5px; color:var(--tinta-halkabb)} /* Több soros sávnál az iksz a szöveg tetejével egy vonalban áll, nem középen. */ .telepito .bezar{align-self:flex-start; margin-top:-1px} /* ---------- jelszó megmutatása ---------- A szem a mező jobb szélén ül, a beírt szöveg nem fut alá: a burok jobb oldali belső margót ad az inputnak. */ .jelszoburok{position:relative; display:block} .jelszoburok input{width:100%; padding-right:44px} .jelszoburok .szem{ position:absolute; right:4px; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; background:transparent; border:0; cursor:pointer; color:var(--tinta-halkabb); border-radius:9px; } .jelszoburok .szem:hover{color:var(--tinta-halk)} .jelszoburok .szem:focus-visible{outline:2px solid var(--fo); outline-offset:1px} .jelszoburok .szem svg{width:20px; height:20px; stroke-width:1.7} /* Alapból a nyitott szem látszik, az áthúzás nem. Megmutatott jelszónál fordítva: a szem áthúzva jelzi, hogy most olvasható, amit beírtál. */ .jelszoburok .szem .szem-athuzva{opacity:0} .jelszoburok .szem[aria-pressed="true"]{color:var(--fo)} .jelszoburok .szem[aria-pressed="true"] .szem-athuzva{opacity:1} /* ---------- belépő link ---------- */ /* A meghívó sáv a kapun: ez mondja meg, hova jelentkezel, mielőtt bármit kitöltenél. A rossz linket csak ez teszi felismerhetővé. */ .meghivo{ margin:0 0 14px; padding:11px 13px; background:var(--fo-halk); border-radius:var(--r); font-size:13.5px; line-height:1.5; color:var(--fo-sotet); font-weight:600; } .belepolink{margin-top:18px; padding-top:16px; border-top:1px solid var(--vonal)} /* ugyanaz a címkeforma, mint a szomszéd űrlapmezőké */ .belepolink label{display:block; margin-bottom:6px; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb)} .linksor{display:flex; gap:8px; align-items:center} .linksor input{ flex:1; min-width:0; font-size:13px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--tinta-halk); background:var(--lap-2); } .linksor .gomb{flex:none; white-space:nowrap} /* ---------- menüsorok a profil alján ---------- A beállítás-jellegű blokkok nem állnak nyitva. Egy sor mondja meg, mi van benne, és koppintásra nyílik. Mentés után magától becsukódik. Ettől a kijelentkezés is előrébb kerül a lapon, és megtalálható lesz. */ .menusor{ background:var(--lap); border-radius:var(--r); box-shadow:var(--arnyek); margin-bottom:10px; overflow:hidden; } .menusor-fej{ display:flex; align-items:center; gap:10px; width:100%; padding:15px 16px; font:inherit; text-align:left; background:transparent; border:0; cursor:pointer; color:var(--tinta); } .menusor-fej:focus-visible{outline:2px solid var(--fo); outline-offset:-2px} .menusor-cim{flex:none; font-size:15px; font-weight:600} .menusor-osszegzes{ flex:1; min-width:0; text-align:right; font-size:13px; color:var(--tinta-halkabb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .menusor-nyil{ flex:none; width:8px; height:8px; margin-left:2px; border-right:2px solid var(--tinta-halkabb); border-bottom:2px solid var(--tinta-halkabb); transform:rotate(-45deg); transition:transform .18s ease; } .menusor-fej[aria-expanded="true"] .menusor-nyil{transform:rotate(45deg); margin-bottom:4px} .menusor-test{padding:0 16px 16px; border-top:1px solid var(--vonal)} /* a becsomagolt kártya már nem önálló lap: a menüsor adja a keretet */ .menusor-test > .kartya{ background:transparent; box-shadow:none; border-radius:0; padding:0; margin:14px 0 0; } .menusor-test .szekciocim{display:none} /* ---------- szerkesztő kártya: csukott fejléc ceruzával ---------- Ugyanaz a gondolat, mint a profil menüsorainál: aki nem szerkeszt, ne kelljen az űrlapot kerülgetnie. A ceruza jelzi, hogy van mögötte mit csinálni — a fejléc kattintható a teljes szélességében, nem csak az ikon. */ .kartya.szerkeszto{padding:0} .szerk-fej{ display:flex; align-items:center; gap:10px; width:100%; padding:14px 16px; font:inherit; text-align:left; background:transparent; border:0; cursor:pointer; color:var(--tinta); } .szerk-fej:focus-visible{outline:2px solid var(--fo); outline-offset:-2px} .szerk-cim{flex:none; font-size:15px; font-weight:600} .szerk-osszegzes{ flex:1; min-width:0; text-align:right; font-size:13px; color:var(--tinta-halkabb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .szerk-ceruza{ flex:none; margin-left:auto; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--fo-halk); color:var(--fo); } .szerk-osszegzes:not(:empty) + .szerk-ceruza{margin-left:10px} /* A befizetés sora: az összeg zöld gomb, nem halvány felirat ceruzával. Ez az egyetlen hely, ahol a sor TEENDŐT kínál, nem szerkesztést, ezért néz ki másképp. A kattintható felület továbbra is az egész sor. */ .szerk-fej-gombos .szerk-ceruza{display:none} .szerk-fej-gombos .szerk-osszegzes{ flex:none; margin-left:auto; overflow:visible; background:var(--fo); color:#fff; font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:var(--r); } .szerk-fej-gombos .szerk-osszegzes:empty{display:none} .szerk-fej-gombos[aria-expanded="true"] .szerk-osszegzes{ background:transparent; color:var(--tinta-halkabb); padding:0; } .szerk-ceruza svg{width:16px; height:16px} .szerk-test{padding:0 16px 16px; border-top:1px solid var(--vonal)} .szerk-test > *:first-child{margin-top:14px} .kartya.szerkeszto.csukva > .szerk-test{display:none} /* Ami csukva is látszik (például a már felvett zárások listája) a fejléc alatt marad; a saját elválasztóját a fejléc adja. */ .kartya.szerkeszto > .szerk-fej ~ *:not(.szerk-test){padding:0 16px} .kartya.szerkeszto.csukva > *:not(.szerk-fej):not(.szerk-test){padding-bottom:14px} /* ---------- segítő pontok és a cica jelvény ---------- */ .pontsor{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:5px} .pont{font-size:12px; color:var(--tinta-halkabb)} .cica-jelveny{ display:inline-flex; align-items:center; gap:3px; padding:2px 8px 2px 5px; border-radius:999px; background:var(--var-halk); color:var(--var); font-size:12px; font-weight:700; } .cica{width:16px; height:16px; flex:none} .cica-tobb{letter-spacing:.01em} /* a profil Értesítések szakasza */ .ert-allapot{margin:0; font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px} .ert-allapot::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--tinta-halkabb); } .ert-allapot.kesz::before{background:var(--jo)} .ert-allapot.hianyzik::before{background:var(--var)} #pr-telepit-gomb{margin-top:12px} .telepito .ikon{ display:inline-block; padding:0 4px; border-radius:4px; background:var(--lap); border:1px solid var(--vonal-eros); font-size:12px; } .bezar{ flex:none; font:inherit; font-size:19px; line-height:1; background:transparent; border:0; cursor:pointer; color:var(--tinta-halkabb); padding:2px 4px; } .bezar:focus-visible, #telepit-gomb:focus-visible{outline:2px solid var(--fo); outline-offset:2px} .fejlec{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; } /* Cica csoport — halvány mancsminta a fejléc mögött */ .fejlec::before{ content:""; position:absolute; z-index:-1; inset:-10px -14px -6px; background:var(--tinta); opacity:.05; pointer-events:none; -webkit-mask-image:var(--mancs); mask-image:var(--mancs); -webkit-mask-size:86px 86px; mask-size:86px 86px; -webkit-mask-position:right -12px top -6px; mask-position:right -12px top -6px; } .fejlec .csoport{ display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600; } /* a csoportsor jele: vonalas, a sor színét örökli */ .csoportjel{flex:none; width:15px; height:15px; stroke-width:1.9} .fejlec h1{font-size:23px; font-weight:700; line-height:1.2; margin-top:2px} .avatar{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--fo-halk); color:var(--fo-sotet); display:grid; place-items:center; font-weight:600; font-size:13px; font-family:inherit; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } button.avatar:focus-visible{outline:2px solid var(--fo); outline-offset:2px} .avatar.nagy{width:52px; height:52px; font-size:17px} /* ---------- lapok ---------- */ .lap{display:none} .lap.aktiv{display:block} .kartya{ background:var(--lap); border:1px solid var(--vonal); border-radius:var(--r-nagy); padding:20px; box-shadow:var(--arnyek); } .kartya + .kartya{margin-top:14px} /* A szekciócímek kapnak egy vonalas ikont. A márkajel tömör, a felületi ikonok vonalasak — ez a két szint tartja egyben a rendszert. */ .szekciocim{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-halkabb); margin:26px 0 10px; } .szekciocim .ikon{ flex:none; width:15px; height:15px; stroke-width:1.9; color:var(--tinta-halkabb); } .neked .kitol .ikon{flex:none; width:14px; height:14px; stroke-width:1.9} /* állapot */ .allapot .sor{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600} .allapot .fo-uzenet{font-family:"Bricolage Grotesque",sans-serif; font-size:21px; font-weight:700; line-height:1.28; margin-top:6px} .allapot .reszlet{color:var(--tinta-halk); font-size:14.5px; margin-top:8px} .gomb{ font:inherit; font-weight:600; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 18px; margin-top:16px; border:0; border-radius:var(--r); cursor:pointer; background:var(--fo); color:#fff; } .gomb.masodlagos{background:var(--lap-2); color:var(--tinta); border:1px solid var(--vonal)} .gomb.kicsi{width:auto; padding:8px 14px; font-size:13.5px; margin-top:0} .gomb:focus-visible{outline:2px solid var(--fo); outline-offset:2px} .gomb[disabled]{opacity:.55; cursor:default} /* fizetési panel */ .adatsor{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; background:var(--lap-2); border-radius:var(--r); } .adatsor + .adatsor{margin-top:8px} .adatsor .kulcs{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600} .adatsor .ertek{font-size:15.5px; font-weight:600; font-variant-numeric:tabular-nums; word-break:break-all} /* A felirat kattintás után „Kimásolva"-ra vált, ami szélesebb. Fix szélesség nélkül a gomb megnőtt, a mellette lévő közlemény újratördelődött, és az egész doboz megugrott a szemed előtt. A min-width a hosszabb feliratra van szabva. */ .masol{ flex:none; font:inherit; font-size:12.5px; font-weight:600; min-width:84px; text-align:center; border:1px solid var(--vonal-eros); background:transparent; color:var(--fo); border-radius:9px; padding:6px 11px; cursor:pointer; } .masol:focus-visible{outline:2px solid var(--fo); outline-offset:2px} /* kassza */ .egyenleg{display:flex; align-items:baseline; justify-content:space-between; gap:12px} .egyenleg .szam{flex:none; white-space:nowrap; font-family:"Bricolage Grotesque",sans-serif; font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1} .egyenleg .megnevezes{flex:1; min-width:0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600} .tetelek{list-style:none; margin:16px 0 0; padding:0} .tetelek li{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--vonal)} .tetelek .leiras{flex:1; min-width:0} .tetelek .nev{font-weight:500; line-height:1.35} .tetelek .meta{font-size:13px; color:var(--tinta-halk); margin-top:2px} .tetelek .osszeg{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap} .tetelek .osszeg.ki{color:var(--tinta)} .tetelek .osszeg.be{color:var(--jo)} .cimke-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:3px 9px; border-radius:999px; margin-top:6px; } .chip-bizonylat{background:var(--fo-halk); color:var(--fo-sotet)} .chip-var{background:var(--var-halk); color:var(--var)} .chip-jo{background:var(--jo-halk); color:var(--jo)} .chip-uj{background:var(--meleg-halk); color:var(--meleg)} /* nyugtázandó sorok */ .nyugta{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--vonal)} .nyugta:first-of-type{border-top:0} .nyugta .ki{flex:1; min-width:0} .nyugta .nev{font-weight:500} .nyugta .meta{font-size:13px; color:var(--tinta-halk)} /* haladás */ .halad{height:7px; border-radius:99px; background:var(--lap-2); overflow:hidden; margin-top:12px} .halad span{display:block; height:100%; background:var(--fo); border-radius:99px} /* hírek */ .hir{border-top:1px solid var(--vonal); padding:16px 0} .hir:first-of-type{border-top:0; padding-top:0} .hir h3{font-size:17px; font-weight:700; line-height:1.3} .hir .datum{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600; margin-bottom:5px} /* A hír címe és törzse egy mezőben, sortöréssel elválasztva érkezik (a `hir` táblában nincs külön cím oszlop). A `pre-line` nélkül a sortörés szóközzé esne össze, és a cím beleolvadna a szövegbe. */ .hir p{margin:6px 0 0; color:var(--tinta-halk); white-space:pre-line} /* események */ .esemeny{display:flex; gap:14px} .naptar{ flex:none; width:54px; text-align:center; padding:8px 0; background:var(--fo-halk); color:var(--fo-sotet); border-radius:var(--r); } .naptar .ho{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase} .naptar .nap{font-family:"Bricolage Grotesque",sans-serif; font-size:22px; font-weight:700; line-height:1.1} .esemeny .torzs{flex:1; min-width:0} .esemeny h3{font-size:17px; font-weight:700} .esemeny .hol{font-size:13.5px; color:var(--tinta-halk); margin-top:2px} .esemeny .hozni{font-size:14px; margin-top:8px} .valasz{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap} .valasz button{ font:inherit; font-size:13.5px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer; border:1px solid var(--vonal-eros); background:transparent; color:var(--tinta); } .valasz button[aria-pressed="true"]{background:var(--fo); border-color:var(--fo); color:#fff} .valasz button:focus-visible{outline:2px solid var(--fo); outline-offset:2px} /* ---------- kérések ---------- */ .keres{border-top:1px solid var(--vonal); padding:15px 0} .keres:first-of-type{border-top:0; padding-top:0} .keres .fej{display:flex; align-items:flex-start; justify-content:space-between; gap:10px} .keres .cim{min-width:0} .keres .nev{font-weight:600; line-height:1.35} .keres .meta{font-size:13px; color:var(--tinta-halk); margin-top:2px} .keres .cimkesor{display:flex; flex-wrap:wrap; gap:6px} .keres .cimkesor .cimke-chip{margin-top:8px} .keres .lepesek{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap} /* Amit más elvállalt, az egy-két sorra zárul (26-os lista, 10. pont). A fejléc marad: mi az, ki viszi, milyen állapotban. */ .keres.csukhato > .fej{cursor:pointer} .keres.csukva > .keres-test{display:none} .keres-nyil{ flex:none; align-self:center; width:7px; height:7px; margin-left:2px; border-right:2px solid var(--tinta-halkabb); border-bottom:2px solid var(--tinta-halkabb); transform:rotate(45deg); transition:transform .18s ease; } .keres.csukva .keres-nyil{transform:rotate(-45deg)} .chip-ism{background:var(--lap-2); color:var(--tinta-halk)} /* segítőkeresés */ .segito{ margin-top:12px; padding:11px 13px; background:var(--lap-2); border-radius:var(--r); } .segito-fej{display:flex; align-items:baseline; justify-content:space-between; gap:10px} .segito-allapot{font-size:14px; font-weight:600} .segito-allapot.kell{color:var(--meleg)} .segito-allapot.megvan{color:var(--jo)} .segito-szam{font-size:13px; font-variant-numeric:tabular-nums; color:var(--tinta-halk); white-space:nowrap} .segito .halad{margin-top:9px; background:var(--vonal)} .jelentkezok{font-size:13px; color:var(--tinta-halk); margin-top:9px} .jelentkezok strong{color:var(--tinta); font-weight:500} .jelentkezok .senki{font-style:italic} /* megoldott kérés: ott marad, de elhalványul és áthúzva */ .keres.megoldva{opacity:.55} .keres.megoldva .nev{text-decoration:line-through; text-decoration-thickness:1px} .keres .megoldotta{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--jo); font-weight:500; margin-top:9px; } .keres .megoldotta svg{flex:none; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round} .megoldva-szakasz, .csukhato-szakasz{margin-top:14px} .megoldva-szakasz > summary, .csukhato-szakasz > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:"Bricolage Grotesque","Public Sans",sans-serif; font-size:15px; font-weight:700; color:var(--tinta-halk); padding:4px 2px; } .megoldva-szakasz > summary::-webkit-details-marker, .csukhato-szakasz > summary::-webkit-details-marker{display:none} .megoldva-szakasz > summary:focus-visible, .csukhato-szakasz > summary:focus-visible{outline:2px solid var(--fo); outline-offset:3px; border-radius:6px} .megoldva-szakasz > summary .nyil, .csukhato-szakasz > summary .nyil{transition:transform .18s ease; flex:none} .megoldva-szakasz[open] > summary .nyil, .csukhato-szakasz[open] > summary .nyil{transform:rotate(90deg)} .megoldva-szakasz .kartya, .csukhato-szakasz .kartya{margin-top:8px} .urlap{display:flex; flex-direction:column; gap:10px; margin-top:14px} .urlap label{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb)} .urlap input, .urlap textarea, .urlap select{ font:inherit; width:100%; padding:11px 13px; border:1px solid var(--vonal-eros); border-radius:var(--r); background:var(--lap); color:var(--tinta); } .urlap input:focus-visible, .urlap textarea:focus-visible, .urlap select:focus-visible{outline:2px solid var(--fo); outline-offset:1px} .urlap select{appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B6E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:17px; padding-right:38px} .ures{color:var(--tinta-halk); font-size:14.5px} /* alsó fülek */ .fulek{ position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--lap); border-top:1px solid var(--vonal); padding-bottom:env(safe-area-inset-bottom, 0px); } .fulek .belso{max-width:460px; margin:0 auto; display:flex} .fulek button{ flex:1; font:inherit; font-size:11.5px; font-weight:600; letter-spacing:.04em; background:transparent; border:0; cursor:pointer; color:var(--tinta-halkabb); padding:10px 4px 12px; display:flex; flex-direction:column; align-items:center; gap:4px; } .fulek button[aria-selected="true"]{color:var(--fo)} .fulek button:focus-visible{outline:2px solid var(--fo); outline-offset:-3px} .fulek .pont{width:22px; height:22px; display:grid; place-items:center} .fulek svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round} .jelzo{ position:absolute; transform:translate(10px,-4px); min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:var(--meleg); color:#fff; font-size:10.5px; font-weight:700; display:grid; place-items:center; } /* A kérések fülén nem szám kell, hanem egy pötty: van-e aktív kérés. */ .potty{ position:absolute; transform:translate(8px,-7px); width:9px; height:9px; border-radius:50%; background:var(--piros); box-shadow:0 0 0 2px var(--lap); } .potty[hidden]{display:none} .pirinyo{font-size:12.5px; color:var(--tinta-halkabb); margin-top:10px; line-height:1.5} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---------- „Neked szól" sáv ---------- */ /* Gergő (2026-09-19): „a jelzés legyen vékonyabb, alul helyett legyen oldalt a gomb. ezzel teret nyerünk." A kártya két oszlop: balra a szöveg, jobbra a gomb, középre igazítva. Szűk kijelzőn visszaáll egymás alá. */ .neked{ display:flex; align-items:center; gap:12px; border-radius:var(--r-nagy); padding:10px 14px; margin-bottom:8px; background:var(--meleg-halk); border:1px solid var(--meleg-halk); } .neked > .kitol, .neked > .szoveg, .neked > .mikor{grid-column:1} .neked-torzs{flex:1; min-width:0} .neked > .gomb, .neked > .rendben, .neked > .datumsor{flex:none} .neked + .neked{margin-top:-4px} .neked .kitol{ display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--meleg); margin-bottom:4px; } .neked .szoveg{font-weight:600; line-height:1.4} .neked .mikor{font-size:12.5px; color:var(--tinta-halk); margin-top:3px; line-height:1.35} .neked .gomb{margin-top:0; white-space:nowrap} .neked.beosztas{background:var(--fo-halk); border-color:var(--fo-halk)} .neked.beosztas .kitol{color:var(--fo-sotet)} .neked.nyugtazva{background:var(--jo-halk); border-color:var(--jo-halk)} .neked.nyugtazva .kitol{color:var(--jo)} .neked .rendben{display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--jo); margin-top:0} .neked .rendben svg{flex:none; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round} /* összehúzott nyugtázottak */ /* sürgős pötty: piros pont a szakaszcím előtt, ha tennivaló vár */ /* ---------- névre szűrő mező ---------- Legördülő helyett: a szülő a gyerek nevét gépeli, a lista szűkül. A lista a mező fölé úszik, hogy szűk helyen se tolja szét a táblát. */ .nevszuro{display:block; width:100%} .nevszuro-mezo{width:100%} /* A lista a MEZŐ ALATT, a folyamatban marad — nem lebeg. Lebegő listaként a beosztás sorai levágták (a szülő elemek vágnak), és telefonon a lebegő réteg amúgy is könnyen a képernyő alá csúszik. Így tolja a tartalmat, cserébe mindig látszik. */ .nevszuro-lista{ display:flex; flex-direction:column; margin-top:5px; background:var(--lap); border:1px solid var(--vonal-eros); border-radius:12px; overflow:hidden; max-height:230px; overflow-y:auto; } /* A `hidden` attribútumot a display:flex felülírná — ezt külön vissza kell venni. */ .nevszuro-lista[hidden]{display:none} .nevszuro-sor{ display:flex; align-items:baseline; gap:8px; width:100%; padding:9px 12px; font:inherit; font-size:14px; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--vonal); cursor:pointer; } .nevszuro-sor:last-child{border-bottom:0} .nevszuro-sor:hover, .nevszuro-sor:focus-visible{background:var(--fo-halk); outline:none} .nevszuro-sor .gy{font-weight:600; color:var(--tinta)} .nevszuro-sor .sz{font-size:12.5px; color:var(--tinta-halkabb)} .nevszuro-ures{padding:10px 12px; font-size:13px; color:var(--tinta-halkabb)} /* kérés: költségkeret és a későbbre tett ígéret */ .keret-sav{ margin-top:8px; padding:6px 10px; border-radius:9px; background:var(--lap-2); font-size:12.5px; color:var(--tinta-halk); display:inline-block; } .keret-sav strong{color:var(--tinta)} .igeret{margin-top:8px; font-size:13px; color:var(--var); font-weight:600} .surgos-pott{ display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--piros); margin-right:8px; vertical-align:middle; } .nyugtak{margin-bottom:10px} .nyugtak-sor{ display:flex; align-items:center; gap:8px; width:100%; padding:9px 14px; border-radius:var(--r-nagy); border:1px solid var(--jo-halk); background:var(--jo-halk); font:inherit; font-size:13.5px; font-weight:600; color:var(--jo); text-align:left; cursor:pointer; -webkit-appearance:none; } .nyugtak-sor svg{flex:none; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round} .nyugtak-sor .nyil{ margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.75; } .nyugtazott-tetel{ display:flex; gap:8px; padding:8px 14px 0; font-size:13.5px; color:var(--tinta-halk); line-height:1.4; } .nyugtazott-tetel .ki{flex:none; font-weight:700; color:var(--tinta-halkabb)} .nyugtazott-tetel .mit{min-width:0} /* ---------- beosztások ---------- */ .beosztas-fej{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap} .beosztas-fej h3{font-size:17px; font-weight:700} .beosztas-het{font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halkabb); white-space:nowrap} .napok{list-style:none; margin:12px 0 0; padding:0} .napok li{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--r)} .napok li + li{margin-top:3px} .napok .nap{flex:none; width:92px; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--tinta-halkabb)} .napok .ki{flex:1; min-width:0; font-weight:600; line-height:1.3} .napok .ki .szulo{display:block; font-size:12.5px; font-weight:400; color:var(--tinta-halk)} .napok li.enyem{background:var(--fo-halk)} .napok li.enyem .nap{color:var(--fo-sotet)} .napok li.enyem .ki{color:var(--fo-sotet)} .napok li.enyem .ki .szulo{color:var(--fo-sotet); opacity:.8} .napok li.szabad .ki{font-weight:400; font-style:italic; color:var(--tinta-halkabb)} .napok select{ font:inherit; font-size:13.5px; font-weight:500; width:100%; padding:7px 28px 7px 10px; text-overflow:ellipsis; border:1px solid var(--vonal-eros); border-radius:10px; background:var(--lap); color:var(--tinta); appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B6E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 9px center; background-size:16px; } .napok select:focus-visible{outline:2px solid var(--fo); outline-offset:1px} /* kiküldött jelzések listája a pedagógusnak */ /* ---------- profil lepel ---------- */ /* A monogramos kör nyitja. A saját ügyek itt élnek, a főképernyőn csak az, ami a csoportról szól. */ .profilfej{display:flex; align-items:center; gap:14px} .profilfej .szoveg{min-width:0} .profilfej .nev{font-family:"Bricolage Grotesque",sans-serif; font-size:19px; font-weight:700; line-height:1.2} .profilfej .alsor{font-size:13.5px; color:var(--tinta-halk); margin-top:3px} .profilfej .alsor.halk{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600; margin-top:5px} .urlap .ketto{display:flex; gap:10px} .urlap .ketto > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px} /* A két rövidítésmező címkéje eltérő hosszú: a mezők csak akkor kerülnek egy vonalba, ha a címke aljához igazítjuk őket. */ .urlap .ketto label{display:flex; align-items:flex-end; min-height:30px; line-height:1.25} .urlap input[disabled]{background:var(--lap-2); color:var(--tinta-halk); cursor:default} .urlap .pirinyo{margin-top:6px} /* ---------- lepel: teljes éves elszámolás ---------- */ .lepel{ position:fixed; inset:0; z-index:40; background:var(--hatter); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 18px calc(28px + env(safe-area-inset-bottom, 0px)); } .lepel-belso{max-width:460px; margin:0 auto} .lepel-fej{ position:sticky; top:0; z-index:1; background:var(--hatter); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0 12px; border-bottom:1px solid var(--vonal); margin-bottom:16px; } .lepel-fej h2{font-size:21px; font-weight:700} .lepel-fej .ev{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halkabb); font-weight:600} .lepel-fej .bezar{ flex:none; font:inherit; font-size:26px; line-height:1; cursor:pointer; width:38px; height:38px; border-radius:999px; border:1px solid var(--vonal-eros); background:var(--lap); color:var(--tinta-halk); } .lepel-fej .bezar:focus-visible{outline:2px solid var(--fo); outline-offset:2px} .osszesito{display:flex; gap:10px; margin-bottom:14px} .osszesito .cella{ flex:1; background:var(--lap); border-radius:var(--r); padding:12px 13px; box-shadow:var(--arnyek); } .osszesito .kulcs{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-halkabb)} .osszesito .ertek{font-family:"Bricolage Grotesque",sans-serif; font-size:19px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums} .osszesito .ertek.be{color:var(--jo)} .zaro{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; background:var(--fo); color:#fff; border-radius:var(--r-nagy); padding:15px 17px; margin-top:16px; } .zaro .megnevezes{font-size:13.5px; opacity:.9} .zaro .szam{font-family:"Bricolage Grotesque",sans-serif; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums} /* elismervény */ .elismerveny{ border:1px dashed var(--vonal-eros); border-radius:var(--r); padding:13px 15px; margin-top:12px; background:var(--lap-2); } .elismerveny .sorszam{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halkabb)} .elismerveny .fo{font-weight:600; margin-top:3px} .elismerveny .meta{font-size:13px; color:var(--tinta-halk); margin-top:2px} .keres .indok{ font-size:13px; color:var(--meleg); font-weight:500; margin-top:9px; padding-left:11px; border-left:2px solid var(--meleg-halk); } /* ---------- beszerzés–bizonylat–kifizetés lánc ---------- */ .beszerzes{border-top:1px solid var(--vonal); padding:14px 0} .beszerzes:first-of-type{border-top:0; padding-top:0} .beszerzes .fej{display:flex; align-items:flex-start; justify-content:space-between; gap:10px} .beszerzes .nev{font-weight:600; line-height:1.35} .beszerzes .meta{font-size:13px; color:var(--tinta-halk); margin-top:2px} .beszerzes .ar{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap} .beszerzes .lepesek{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap} .lanc{display:flex; gap:5px; margin-top:11px} .lanc span{ flex:1; text-align:center; padding:5px 4px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--lap-2); color:var(--tinta-halkabb); } .lanc span.kesz{background:var(--jo-halk); color:var(--jo)} .lanc span.most{background:var(--var-halk); color:var(--var)} /* eltűnő számlaszám: csak az adminnál, csak a kifizetésig */ .titkos{ margin-top:11px; padding:11px 13px; border-radius:var(--r); background:var(--var-halk); border:1px dashed var(--var); } .titkos .cim{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--var)} .titkos .szam{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:3px; word-break:break-all} .titkos .magyarazat{font-size:12.5px; color:var(--tinta-halk); margin-top:6px; line-height:1.45} .titkos.nincs .szam{font-size:14.5px; font-weight:500; font-style:italic; color:var(--tinta-halk)} label.gomb{cursor:pointer} .egybe-lista{display:flex; flex-direction:column; gap:7px; margin-top:4px} .egybe{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:9px 11px; border:1px solid var(--vonal-eros); border-radius:var(--r); font-size:14.5px; text-transform:none; letter-spacing:0; font-weight:400; color:var(--tinta); } .egybe input{accent-color:var(--fo); width:18px; height:18px; flex:none} .egybe:has(input:checked){background:var(--fo-halk); border-color:var(--fo)} /* Az `.urlap label` szabálya erősebb, mint az `.egybe`, ezért az űrlapon belül a jelölőnégyzet felirata verzálba csúszott. Ez mondat, nem mezőcímke. */ .urlap label.egybe{ font-size:14.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--tinta); } /* ---------- tagok és jogosultságok ---------- */ .szurosor{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none} .szurosor::-webkit-scrollbar{display:none} .szurosor button{ flex:none; font:inherit; font-size:13px; font-weight:600; white-space:nowrap; padding:7px 13px; border-radius:999px; cursor:pointer; border:1px solid var(--vonal-eros); background:var(--lap); color:var(--tinta-halk); } .szurosor button[aria-pressed="true"]{background:var(--fo); border-color:var(--fo); color:#fff} .szurosor button:focus-visible{outline:2px solid var(--fo); outline-offset:2px} .szurosor .db{opacity:.75; font-weight:500} .tag-sor{border-top:1px solid var(--vonal); padding:0} .tag-sor:first-of-type{border-top:0} .tag-sor > .fej{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; font:inherit; text-align:left; cursor:pointer; background:none; border:0; padding:13px 0; color:var(--tinta); } .tag-sor > .fej:focus-visible{outline:2px solid var(--fo); outline-offset:-2px; border-radius:8px} .tag-sor .ki{flex:1; min-width:0} .tag-sor .nev{display:block; font-weight:600} .tag-sor .gyerek{display:block; font-size:13px; color:var(--tinta-halk); margin-top:1px} .tag-sor .cimkek{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px} .tag-sor .cimkek .cimke-chip{margin-top:0} .tag-sor .nyil{flex:none; transition:transform .16s ease; color:var(--tinta-halkabb)} .tag-sor.nyitva .nyil{transform:rotate(90deg)} .tag-sor .szerkeszto{padding:2px 0 15px} .tag-sor .szerkeszto .cim{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); margin-bottom:8px} .cimkevalaszto{display:flex; flex-wrap:wrap; gap:7px} .cimkevalaszto button{ font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:7px 13px; border-radius:999px; border:1px solid var(--vonal-eros); background:var(--lap); color:var(--tinta-halk); } .cimkevalaszto button[aria-pressed="true"]{background:var(--fo); border-color:var(--fo); color:#fff} .cimkevalaszto button[disabled]{opacity:.5; cursor:default} .cimkevalaszto button:focus-visible{outline:2px solid var(--fo); outline-offset:2px} .chip-admin{background:var(--fo); color:#fff} .chip-penztaros{background:var(--fo-halk); color:var(--fo-sotet)} .chip-szmk{background:var(--var-halk); color:var(--var)} .chip-szerep{background:var(--lap-2); color:var(--tinta-halk)} /* ---------- zárva napok ---------- */ .napok li.zarva{background:repeating-linear-gradient(135deg, var(--lap-2), var(--lap-2) 7px, transparent 7px, transparent 14px)} .napok li.zarva .ki{font-weight:500; font-size:14px; color:var(--tinta-halkabb)} /* Ahol nem gomb van, hanem űrlap (születésnap), ott marad az egymás alatti elrendezés — egy dátumválasztó nem fér el oldalt. */ .neked.szulinap-keres{flex-direction:column; align-items:stretch} .neked.szulinap-keres .neked-torzs{width:100%} .neked.zarva{background:var(--lap-2); border-color:var(--vonal)} .neked.zarva .kitol{color:var(--tinta-halkabb)} .zarva-sor{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--vonal)} .zarva-sor:first-of-type{border-top:0; padding-top:14px} .zarva-sor .torzs{flex:1; min-width:0} .zarva-sor .nev{font-weight:600} .zarva-sor .meta{font-size:13px; color:var(--tinta-halk); margin-top:1px} .datumpar{display:flex; gap:10px} .datumpar > div{flex:1; min-width:0} .hir .datum .auto{color:var(--fo-sotet); letter-spacing:.06em} /* ---------- szülinapok ---------- */ .szulinap-sor{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--vonal)} .szulinap-sor:first-of-type{border-top:0; padding-top:14px} .szulinap-sor .torzs{flex:1; min-width:0} .szulinap-sor .nev{font-weight:600} .szulinap-sor .meta{font-size:13px; color:var(--tinta-halk); margin-top:1px} .szulinap-sor.ma .nev{color:var(--jo)} .datumsor{display:flex; gap:8px; align-items:center; margin-top:8px} .datumsor input[type="date"]{ flex:1; min-width:0; font:inherit; font-size:14.5px; padding:9px 11px; border:1px solid var(--vonal-eros); border-radius:var(--r); background:var(--lap); color:var(--tinta); } .datumsor input:focus-visible{outline:2px solid var(--fo); outline-offset:1px} .neked.szulinap-keres{background:var(--fo-halk); border-color:var(--fo-halk)} .neked.szulinap-keres .kitol{color:var(--fo-sotet)} /* ---------- előírások ---------- */ .eloiras-lista{list-style:none; margin:14px 0 0; padding:0} /* Telefonszélességen a hosszú jelölő („Jelezted, nyugtázásra vár") annyira összenyomta a név oszlopát, hogy a határidő három sorba tört szét: „határidő: / október / 15.". A név és a határidő ezért a saját sorát kapja, az összeg és a jelölő alá kerül. */ .eloiras-lista li{display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:10px 0; border-top:1px solid var(--vonal)} .eloiras-lista li:first-child{border-top:0} .eloiras-lista .nev{flex:1 1 100%; min-width:0; font-weight:500} .eloiras-lista .nev small{display:block; font-size:12.5px; font-weight:400; color:var(--tinta-halk); margin-top:1px} .eloiras-lista .ar{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap} .eloiras-lista .cimke-chip{margin-top:0; flex:none} .cim-kicsi{font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-halkabb); margin:16px 0 8px} .halad-tetel{margin-top:14px} .halad-tetel:first-child{margin-top:16px} .halad-tetel .fej{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px} .halad-tetel .fej .nev{font-weight:600} .halad-tetel .fej .db{font-size:13px; color:var(--tinta-halk); font-variant-numeric:tabular-nums; white-space:nowrap} .halad-tetel .hatarido{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--tinta-halkabb); margin-top:4px } .halad-tetel .sor-muvelet{display:flex; align-items:center; gap:10px; flex-shrink:0} .szoveg-link{ background:none; border:0; padding:4px 0; font:inherit; font-size:12.5px; color:var(--fo); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px } .szoveg-link:focus-visible{outline:2px solid var(--fo); outline-offset:2px; border-radius:4px} .kuka-gomb{ background:none; border:0; padding:4px; line-height:0; cursor:pointer; color:var(--piros); border-radius:6px } .kuka-gomb svg{width:17px; height:17px} .kuka-gomb:focus-visible{outline:2px solid var(--piros); outline-offset:1px} /* ---------- esemény: díj, fizetés, névsor ---------- */ .chip-dij{background:var(--meleg-halk); color:var(--meleg)} .esemeny .cimke-chip{margin-top:8px} .dij-doboz{margin-top:12px; padding:12px 13px; border-radius:var(--r); background:var(--meleg-halk)} .dij-doboz .fej{font-size:14.5px} .dij-doboz .fej strong{font-size:17px; font-family:"Bricolage Grotesque",sans-serif} .dij-doboz .adatsor{margin-top:10px; background:var(--lap)} .dij-doboz .ertek{font-size:14.5px; letter-spacing:-.01em} .dij-doboz .gomb{margin-top:10px} .dij-doboz .pirinyo{margin-top:8px; padding:0} .dij-doboz.rendben{background:var(--jo-halk); display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--jo)} .dij-doboz.rendben svg{flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round} .dij-doboz.var{background:var(--var-halk); font-size:14px; font-weight:600; color:var(--var)} .nevsor-sav{ margin-top:10px; padding:9px 12px; border-radius:var(--r); background:var(--var-halk); color:var(--var); font-size:12.5px; font-weight:600; line-height:1.4; } .nevsor-sav.ment{background:var(--jo-halk); color:var(--jo)} /* célok szerinti bontás */ .cel-sor{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--vonal)} .cel-sor:first-of-type{border-top:0; padding-top:14px} .cel-sor .ki{flex:1; min-width:0} .cel-sor .nev{font-weight:600} .cel-sor .meta{font-size:12.5px; color:var(--tinta-halk); margin-top:1px; font-variant-numeric:tabular-nums} .cel-sor .ar{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap} .cel-sor .ar.minusz{color:var(--meleg)} /* ---------- eseményszámok a kártyán ---------- */ .szamsor{display:flex; gap:5px; margin-top:12px} .szam-cella{ flex:1 1 0; min-width:0; text-align:center; padding:8px 4px; border-radius:var(--r); background:var(--lap-2); } .szam-cella .ertek{ display:block; font-family:"Bricolage Grotesque",sans-serif; font-size:18px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums; } .szam-cella .ertek.jo{color:var(--fo-sotet)} .szam-cella .cimke{display:block; font-size:10px; color:var(--tinta-halk); margin-top:2px; line-height:1.2; hyphens:auto} .szam-cella.teendo{background:var(--var-halk)} .szam-cella.teendo .ertek{color:var(--var)} .szam-cella.teendo .cimke{color:var(--var)} /* ---------- névsor lepel ---------- */ .nevsor-sor{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--vonal)} .nevsor-sor:first-of-type{border-top:0; padding-top:0} .nevsor-sor .ki{font-weight:600; min-width:0} .nevsor-sor .ki small{display:block; font-size:12.5px; font-weight:400; color:var(--tinta-halk); margin-top:1px} .nevsor-sor .cimke-chip{margin-top:0; flex:none} /* ---------- lábléc: Luora Lab ---------- */ .lablec{ margin-top:28px; padding:22px 2px 8px; border-top:1px solid var(--vonal); text-align:center; } .lablec .keszito{ display:inline-flex; flex-direction:column; align-items:center; gap:0; text-decoration:none; color:var(--tinta-halk); padding:8px 12px; border-radius:var(--r); } .lablec .felirat{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-halkabb); /* a sorköz levegője nélkül a doboz a betűkre simul, így a logó fölötti és alatti térköz ugyanabból a számból jön ki */ line-height:1; margin-bottom:9px; } .lablec .jelsor{display:flex; align-items:center; gap:8px} .lablec .luora-logo{display:block; width:164px; height:auto; flex:none} /* a logó szövegének alapvonalára igazítva: a lockupban a felirat a viewBox 400/620 magasságán ül */ .lablec .ev{margin-top:5px; font-size:11.5px; font-weight:600; letter-spacing:.04em; color:var(--tinta-halkabb); white-space:nowrap} .lablec .jog{ margin:10px 0 0; font-size:12px; color:var(--tinta-halkabb); letter-spacing:.04em; } /* ---------- kapu: belépés, regisztráció, csatlakozás ---------- */ .kapu{ position:fixed; inset:0; z-index:200; overflow-y:auto; background:var(--hatter); padding:18px 16px 28px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; } .kapu[hidden]{display:none !important} .kapu-doboz{width:100%; max-width:380px; margin-top:2vh; flex:0 0 auto} .kapu-fej{text-align:center; margin-bottom:26px} .kapu-fej .markanev{font-size:25px; letter-spacing:.07em} .kapu-alcim{margin:8px 0 0; color:var(--tinta-halk); font-size:14.5px; line-height:1.5} .kapu-lap[hidden]{display:none} .kapu-szoveg{margin:0 0 16px; color:var(--tinta-halk); font-size:14px; line-height:1.55} .mezo{display:block; margin-bottom:14px} .mezo > span{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-halk); margin-bottom:6px; } .mezo input{ width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--vonal); border-radius:var(--r-nagy); background:var(--lap); color:var(--tinta); -webkit-appearance:none; } .mezo input:focus{outline:2px solid var(--fo); outline-offset:1px; border-color:transparent} .kapu .gomb{width:100%; margin-top:6px; justify-content:center} .kapu-valto{margin:16px 0 0; text-align:center; font-size:14px; color:var(--tinta-halk)} .szoveggomb{ font:inherit; font-size:inherit; font-weight:600; color:var(--fo-sotet); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; -webkit-appearance:none; } .szoveggomb.halkabb{ display:block; margin:22px auto 0; font-size:13px; font-weight:500; color:var(--tinta-halkabb); text-decoration:none; } .kapu-hiba{ margin:16px 0 0; padding:11px 14px; border-radius:var(--r-nagy); background:var(--meleg-halk); color:var(--meleg); font-size:14px; line-height:1.5; } .kapu-hiba[hidden]{display:none} .varo{text-align:center; padding:8px 0} .varo-cim{margin:0 0 10px; font-family:var(--cim); font-size:21px; font-weight:700} .varo .gomb{width:auto; margin-top:18px} /* mentési hiba — a képernyő aljára, hogy ne takarja a tartalmat */ .mentes-hiba{ position:fixed; left:12px; right:12px; bottom:calc(var(--fulek-magas, 78px) + 12px); z-index:180; padding:12px 15px; border-radius:var(--r-nagy); background:var(--meleg); color:#fff; font-size:14px; line-height:1.45; box-shadow:var(--arnyek); } .mentes-hiba[hidden]{display:none !important} /* ---------- jóváhagyásra váró jelentkezők (Tagok lepel, elnök) ---------- */ .jovahagyo{ margin:0 0 18px; padding:15px 16px 12px; background:var(--fo-halk); border:1px solid var(--fo-halk); border-radius:var(--r-nagy); } .jovahagyo[hidden]{display:none} .jovahagyo > .cim{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fo-sotet); font-weight:700; display:flex; align-items:center; gap:8px; } .jovahagyo > .cim .db{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--fo); color:#fff; font-size:12px; letter-spacing:0; } .jovahagyo .ures{margin:10px 0 2px; font-size:14px; color:var(--tinta-halk); font-style:italic} .jovahagyo .pirinyo{margin:10px 0 2px} .varo-sor{ display:block; padding:13px 0; border-top:1px solid var(--vonal); } .varo-sor:first-of-type{border-top:0} .varo-sor .ki{flex:1; min-width:0} .varo-sor .nev{display:block; font-weight:600; line-height:1.3} .varo-sor .gyerek{display:block; font-size:13.5px; color:var(--tinta-halk); margin-top:2px} .varo-sor .gyerek.hiany{font-style:italic; color:var(--meleg)} .varo-sor .mikor{display:block; font-size:12.5px; color:var(--tinta-halkabb); margin-top:3px} .varo-sor .dontes{display:flex; gap:8px; margin-top:11px} .varo-sor .dontes .gomb{flex:1 1 0; margin-top:0; padding-left:10px; padding-right:10px} .varo-kint-sor{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:10px; padding:10px 0 2px; border-top:1px solid var(--vonal); background:none; border-left:0; border-right:0; border-bottom:0; font:inherit; font-size:13.5px; color:var(--tinta-halk); cursor:pointer; text-align:left; } .varo-kint-sor .nyil{font-size:13px; font-weight:600; color:var(--fo-sotet)} .varo-db{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; margin-left:8px; padding:0 6px; border-radius:10px; background:var(--fo); color:#fff; font-size:12px; font-weight:700; } .varo-db[hidden]{display:none} .neked.befizetes{background:var(--var-halk); border-color:var(--var-halk)} .neked.befizetes .kitol{color:var(--var)} .neked.jovahagyas{background:var(--fo-halk); border-color:var(--fo-halk)} .neked.jovahagyas .kitol{color:var(--fo-sotet)} /* ---------- belépő: maradjak bent ---------- */ .pipa{ display:flex; align-items:center; gap:9px; margin:2px 0 16px; font-size:14px; color:var(--tinta-halk); cursor:pointer; } .pipa input{width:18px; height:18px; accent-color:var(--fo); margin:0; flex:none} /* ---------- készítő jel a belépő alján ---------- */ /* A készítő jele az űrlap alatti üres sáv közepére ül, nem az űrlaphoz tapad. A két auto margó osztja el a maradék helyet; ha nincs maradék (alacsony képernyő, hosszú űrlap), a padding tartja meg a minimális távolságot. */ .luora{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:auto 0; padding:28px 0 4px; text-decoration:none; color:var(--tinta-halkabb); opacity:.8; } .luora-felirat{ font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:300; line-height:1; } .luora-ev{ font-size:8.5px; letter-spacing:.16em; font-weight:300; line-height:1; color:var(--tinta-halkabb); } /* Soron belüli elrendezés, nem flex: így a jelet az alapvonalhoz képest tudjuk elhelyezni. A nagybetűk közepe az alapvonal fölött kb. .36em-nél van; a jel magassága 1.23em, tehát az alja .36 - .615 = -.255em-re kerül. Flexszel ez nem jön ki, mert ott a betű teljes doboza számít, amiben alul a lelógó szárak üres helye is benne van — ettől csúszott a jel alulra. */ .luora-lockup{ display:block; color:var(--tinta-halk); font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif; font-size:9px; line-height:1; white-space:nowrap; } .luora-szo{font-weight:700; letter-spacing:.24em; padding-left:.24em} .luora-jel{ display:inline-block; width:15px; height:11px; vertical-align:-.255em; margin:0 .30em 0 .10em; } /* ---------- jogi oldalak ---------- Az adatkezelés, a jogi nyilatkozat és a felhasználási feltételek egy vázat használnak. A szöveget Géza írja; itt csak az olvashatóságot adjuk hozzá. Ami eddig az adatkezeles.html-ben, soron belül volt, az ide költözött — három oldalon három példány helyett egy. */ .lapszoveg{max-width:460px; margin:0 auto; padding-inline:16px; padding-block:26px 60px} .lapszoveg h1{font-size:25px; font-weight:700; margin-bottom:6px} .lapszoveg h2{font-size:16px; font-weight:700; margin:26px 0 8px} .lapszoveg h3{font-size:14.5px; font-weight:700; margin:18px 0 6px} .lapszoveg p{margin:0 0 12px; color:var(--tinta-halk)} .lapszoveg ul{margin:0 0 12px; padding-left:20px; color:var(--tinta-halk)} .lapszoveg li{margin-bottom:5px} .lapszoveg a{color:var(--fo)} .lapszoveg .lead{font-size:15.5px; color:var(--tinta); margin-bottom:18px} .lapszoveg .small{font-size:13px; color:var(--tinta-halkabb)} .lapszoveg hr{border:0; border-top:1px solid var(--vonal); margin:26px 0} .lapszoveg .box{ background:var(--lap-2); border-radius:var(--r); padding:14px 16px; margin:0 0 16px; font-size:14px; line-height:1.55; } .lapszoveg .box p:last-child{margin-bottom:0} /* A táblázatok szélesebbek, mint a hasáb. Négy oszlopot 390 pixelre zsugorítani olvashatatlan — soronként két-három betű —, ezért a tábla megtartja a természetes szélességét, és a KERETE görgethető oldalra. A jobb szélen egy halvány árnyék mutatja, hogy van még. */ .tabla-gorgeto{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px; background:linear-gradient(to left, var(--lap-2), transparent 24px); border-radius:8px; } .lapszoveg table{ width:auto; min-width:100%; border-collapse:collapse; margin:0; font-size:13.5px; } .lapszoveg .tabla-gorgeto td{min-width:118px} .lapszoveg .tabla-gorgeto td:first-child{min-width:132px} .lapszoveg th, .lapszoveg td{ border-bottom:1px solid var(--vonal); padding:8px 10px; text-align:left; vertical-align:top; color:var(--tinta-halk); } .lapszoveg th{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-halkabb); white-space:nowrap; } .lapszoveg tbody tr:last-child td{border-bottom:0} .vissza{ display:inline-block; font-size:13.5px; font-weight:600; color:var(--fo); text-decoration:none; } /* A jogi oldalak fejléce: vissza-link balra, nyomtatás jobbra. Az Ekertv. 5. § (1) megköveteli, hogy a feltételeket a felhasználó tárolni és előhívni tudja — ezért kell a nyomtatás/PDF-mentés minden jogi oldalon. */ .lapfej{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; } .nyomtat{ flex:none; font:inherit; font-size:12.5px; font-weight:600; border:1px solid var(--vonal-eros); background:transparent; color:var(--fo); border-radius:9px; padding:6px 11px; cursor:pointer; } .nyomtat:focus-visible{outline:2px solid var(--fo); outline-offset:2px} /* Nyomtatásban a navigáció és a gomb felesleges, a szöveg viszont kapjon rendes margót és ne törjön el fejléc után. */ @media print{ .lapfej{display:none} .lapszoveg{max-width:none; padding:0} h1, h2, h3{break-after:avoid-page} p, li{break-inside:avoid-page} a{color:inherit; text-decoration:underline} } .footer-legal{ margin-top:34px; padding-top:16px; border-top:1px solid var(--vonal); font-size:12.5px; line-height:1.7; color:var(--tinta-halkabb); } .footer-legal a{color:var(--tinta-halk); text-decoration:underline; text-underline-offset:2px} /* A kapu-lapokon a jelölőnégyzet nem mezőcímke, hanem mondat, és linkek is vannak benne — a felirat legyen tördelhető, a link pedig látszódjon. */ .kapu-egybe{ align-items:flex-start; margin-bottom:4px; font-size:13.5px; line-height:1.5; text-align:left; } .kapu-egybe input{margin-top:2px} .kapu-egybe a{color:var(--fo); text-decoration:underline; text-underline-offset:2px} /* Az önkéntes szülinap-blokk a kapu-lapon. Szándékosan NEM `.mezo`: ott a `.mezo input` szabály minden beviteli mezőt teljes szélességűre húz, és a jelölőnégyzet ettől egy üres, széles dobozzá vált — a felirata pedig kiszorult mellőle. */ .onkentes{margin-bottom:14px} .onkentes .pirinyo{margin:6px 2px 0} .onkentes input[type="date"]{ width:100%; margin-top:8px; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--vonal); border-radius:var(--r-nagy); background:var(--lap); color:var(--tinta); -webkit-appearance:none; } /* ---------- Jó tudni ---------- A csoport állandó szabályai. A hírrel azonos ritmusban, de vékonyabb elválasztással: ez lista, nem folyam. */ .jotudni-pont{border-top:1px solid var(--vonal); padding:14px 0} .jotudni-pont:first-of-type{border-top:0; padding-top:0} .jotudni-pont h3{font-size:15px; font-weight:700; line-height:1.3} .jotudni-pont p{margin:4px 0 0; color:var(--tinta-halk); white-space:pre-line} .jotudni-pont .lepesek{margin-top:10px} /* A „Jó tudni" összecsukva is legyen kártya, ne egy halk sor a lap alján. Gergő: „alig észrevehető". A fejléc a kártya teteje, a tartalom alatta nyílik. */ .csukhato-szakasz.kartyas{ background:var(--lap); border:1px solid var(--vonal); border-radius:var(--r-nagy); box-shadow:var(--arnyek); padding:0 20px; margin-top:14px; } .csukhato-szakasz.kartyas > summary{ font-size:16px; color:var(--tinta); padding:18px 0; } .csukhato-szakasz.kartyas[open] > summary{border-bottom:1px solid var(--vonal)} .csukhato-szakasz.kartyas .kartya{ background:transparent; border:0; box-shadow:none; padding:16px 0 20px; margin-top:0; } /* A jelzéssávban lévő rögzített hír ceruzája. Halkan ül a kártya jobb szélén: a szülőnek nem jelenik meg, az elnöknek nem kell megkeresnie a lenti listát. */ .jelzes-ceruza{ flex:none; align-self:flex-start; background:transparent; border:0; padding:4px; margin:-4px -4px 0 0; color:var(--tinta-halkabb); cursor:pointer; line-height:0; border-radius:8px; } .jelzes-ceruza svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round} .jelzes-ceruza:hover{color:var(--fo)} .jelzes-ceruza:focus-visible{outline:2px solid var(--fo); outline-offset:2px} /* Törlés: piros, mert visszafordíthatatlan. Az átírás a rendes, sötétzöld művelet — a kettő ne nézzen ki egyformán, mert egymás mellett állnak. */ .gomb.torlo{ background:transparent; color:var(--piros); border:1px solid var(--piros); } .gomb.torlo:hover{background:var(--piros); color:#fff} .gomb.torlo:focus-visible{outline:2px solid var(--piros); outline-offset:2px} /* Az X a jelzéssávon: leveszi a kártyát a saját sávról. Halk, mint a ceruza — nem verseng a tartalommal, de ott van, ha valakinek nem szól a bejegyzés. */ .jelzes-x{ flex:none; align-self:flex-start; background:transparent; border:0; padding:4px; margin:-4px -4px 0 0; color:var(--tinta-halkabb); cursor:pointer; line-height:0; border-radius:8px; } .jelzes-x svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round} .jelzes-x:hover{color:var(--tinta)} .jelzes-x:focus-visible{outline:2px solid var(--fo); outline-offset:2px} /* Nyitott kérés a jelzéssávban: a többi kártyától elüt, mert ez az egyetlen, ami másoknak szól, nem neked — „van itt valami, amit valakinek el kell vinnie". */ .neked.keres-jelzes{background:var(--lap-2); border-color:var(--vonal)} .neked.keres-jelzes .kitol{color:var(--tinta-halk)} /* „és még 2 kitűzött” — szándékosan nem kártya. Egy újabb színes doboz pont azt a zsúfoltságot hozná vissza, amit az összecsukással kerülünk. Halk szöveg, a kapcsoló szó zölddel, hogy látszódjon: nyomható. */ .kituzott-tovabb{ display:block; width:100%; text-align:right; background:transparent; border:0; padding:2px 4px 10px; font:inherit; font-size:13px; color:var(--tinta-halkabb); cursor:pointer; } .kituzott-tovabb span{color:var(--fo); font-weight:600; margin-left:6px} .kituzott-tovabb:hover span{text-decoration:underline; text-underline-offset:2px} .kituzott-tovabb:focus-visible{outline:2px solid var(--fo); outline-offset:2px; border-radius:6px} /* „Kitűzve” jelölő: a listában rögtön látszik, melyik bejegyzés van ténylegesen fent a jelzéssávban. Csak az elnöknek — a szülőnek ez üzemeltetési információ, neki a tartalom számít. */ .cimke-chip.chip-kituzve{ background:var(--meleg-halk); color:var(--meleg); text-transform:none; letter-spacing:0; font-weight:600; } /* Zárva nap az idővonalon: ugyanaz a forma, mint a programnál, de halkabb és sávozott — hogy egy pillantásra látszódjon, hogy ez nem program, hanem szünet. */ .esemeny.zarva-esemeny .naptar{ background:repeating-linear-gradient(135deg, var(--lap-2), var(--lap-2) 6px, transparent 6px, transparent 12px); color:var(--tinta-halkabb); } .esemeny.zarva-esemeny h3{color:var(--tinta-halk)} /* Előre fizetés a következő félévre: elkülönül a mostani teendőtől, mert ez lehetőség, nem kötelezettség. Vonallal választjuk el, nem színnel. */ .elore-fizetes{margin-top:14px; padding-top:12px; border-top:1px solid var(--vonal)} .elore-fizetes .kulcs{margin-bottom:8px} /* Csoportpénz-CTA: a sáv legteteje, egy sor, egy művelet. Széles, mert ez az egyetlen dolog, amit a szülőtől tényleg kérünk — és eltűnik, amint rendezte. */ /* Gergő (2026-09-20): „legyen szolíd, vegyük össze". A tömör zöld tábla kiabált: a főoldal legelső eleme volt, és minden mást lenyomott maga mellett. Keretes, halvány változat ugyanazt mondja el, csak nem ordítva — az összeg vastagon marad, azt kell meglátni. */ .befizetes-cta{ display:flex; align-items:center; gap:9px; width:100%; background:var(--fo-halk); color:var(--fo-sotet); border:1px solid var(--fo); border-radius:var(--r); padding:10px 14px; margin-bottom:16px; cursor:pointer; font:inherit; font-size:14px; font-weight:600; text-align:left; } .befizetes-cta svg{flex:none; width:17px; height:17px; stroke-width:1.9} .befizetes-cta span{flex:1} .befizetes-cta strong{font-size:14.5px; font-weight:700; white-space:nowrap} .befizetes-cta:focus-visible{outline:2px solid var(--fo); outline-offset:3px} /* A jelzősáv rovatcímei. Ugyanaz a nyelv, mint a .szekciocim, csak szűkebb térközzel: a sávon belül vagyunk, nem lapok között. */ .sav-cim{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-halkabb); margin:14px 0 8px; } .sav-cim:first-child{margin-top:0} /* ---------- lábléc: márka és jogi linkek ---------- A készítő jelzése fent, alatta a jogosult, legalul a jogi oldalak. A linkek sorba rendezve, hogy ne folyjanak egybe középre zárt szövegként. */ .lablec .lablec-marka{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--tinta-halk); } .lablec .lablec-jel{width:17px; height:17px; flex:none; color:var(--fo)} .lablec .footer-legal{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; margin-top:18px; padding-top:14px; border-top:1px solid var(--vonal); } .lablec .footer-legal a{ color:var(--tinta-halkabb); text-decoration:none; } .lablec .footer-legal a:hover{color:var(--tinta-halk); text-decoration:underline; text-underline-offset:2px} /* Csak az évszám a logó alatt. A jogosult megnevezése a Jogi nyilatkozatban van — a szerzői jog nem a © felirattól keletkezik, a lenti link pedig odavisz. */ .lablec .jog{ margin:6px 0 0; font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--tinta-halkabb); } /* A domain külön sorban, középen, a jogi linkek fölött. A linkek aláhúzva — 375 pixelen két sorba törnek, és aláhúzás nélkül nem látszana, hogy linkek. */ .lablec .lablec-domain{ margin:18px 0 0; padding-top:14px; border-top:1px solid var(--vonal); text-align:center; } .lablec .footer-legal{ display:block; margin-top:8px; padding-top:0; border-top:0; font-size:12.5px; line-height:1.9; color:var(--tinta-halkabb); text-align:center; } .lablec .footer-legal a{ color:var(--tinta-halkabb); text-decoration:underline; text-underline-offset:2px; margin:0 7px; white-space:nowrap; } .lablec .footer-legal a:hover{color:var(--tinta-halk)} /* 2026-09-19, Gergő: az évszám hónapokig a logó MELLETT állt, és az alapvonalát soha nem sikerült a rajzéhoz igazítani — a logó szövege FreeSans, a feliraté a felület betűje, más a vonalmagasságuk. A megoldás nem finomhangolás lett, hanem külön sor: így nincs mihez csúszni, és a logó körül levegő is keletkezik. */ .lablec .jelsor-ev{ display:block; line-height:1; margin-top:9px; /* a logó a LUORA és LAB szavakat FreeSans-szal rajzolja — az évszám ugyanazt kapja, különben két betűtípus ütközik egymás alatt */ font-family:FreeSans, Helvetica, Arial, sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.06em; color:var(--tinta-halkabb); white-space:nowrap; } /* A logó kerete most a tényleges rajzra van szabva, ezért az arány is változott. */ .lablec .luora-logo{width:120px} .lablec .jelsor{gap:0} /* Félév-jelölő az elnöki előíráslistán: a lista mindkét félévet mutatja, mert különben a februári tételeket fel sem lehetne venni szerkesztésre. */ .halad-tetel .felev-jel{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--tinta-halkabb); white-space:nowrap; } /* A kötelező mezőt jelölni kell, különben a felhasználó a mentés elutasításából tudja meg. */ .kotelezo-jel{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--piros); margin-left:6px; vertical-align:1px } /* Az iOS Megosztás gombjának ikonja a szövegbe ágyazva. A gomb helye készülékenként más (fent vagy lent), ezért az ikon mond többet. */ .megosztas-ikon{ width:1.05em; height:1.05em; display:inline-block; vertical-align:-.18em; margin:0 1px } /* ---------- bejelentések ---------- Nincs buborék és nincs chat-elrendezés: szándékosan. Ez nem beszélgetés, hanem ügyek listája. A buborék beszélgetést ígérne, és pont azt nem akarjuk. */ .uzenet-szal{margin-bottom:4px} .uzenet-lab{display:flex; align-items:center; justify-content:flex-end; gap:10px} /* Az .urlap a gyerekeit teljes szélességűre nyújtja; a lábsor gombja a saját méretén álljon. A méretezést a .gomb.kicsi adja. */ .uzenet-lab .gomb{flex:none} /* A küldőmező fölötti eligazítás. Nem „pirinyo": ezt el kell olvasni, mielőtt valaki ideírja, amit másnak nem szánt. */ .uzenet-bevezeto{ font-size:13.5px; line-height:1.5; color:var(--tinta-halk); margin:0 0 4px; padding-bottom:11px; border-bottom:1px solid var(--vonal); } /* A szülő oldala nem chat: a saját üzenetét nem látja viszont, csak az SZMK válaszát. Ezért ez kártyás jegyzet, nem buborék — a buborék beszélgetést ígérne. */ .szmk-valasz{ border-left:3px solid var(--fo); background:var(--fo-halk); border-radius:8px; padding:10px 13px; margin-bottom:9px; } .szmk-valasz-fej{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fo); margin-bottom:5px; } .szmk-valasz-szoveg{font-size:14.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere} .uzenet-koszonet{ margin:0; padding:10px 13px; border-radius:8px; background:var(--jo-halk); color:var(--jo); font-size:13.5px; font-weight:600; } /* A számláló visszafelé megy; a vége felé figyelmeztet. */ #uzenet-szamlalo.fogy{color:var(--meleg); font-weight:600} /* ---------- Levelezés lap (elnök) ---------- */ .ugy{margin-top:11px} /* A nyitott ügy jelölve van, a lezárt nem: a szem így a tennivalóra esik. */ .ugy-nyitott{border-left:3px solid var(--fo)} .ugy-fej{display:flex; align-items:baseline; gap:9px; margin-bottom:7px} .ugy-nev{font-weight:600; font-size:15px; flex:1; min-width:0} .ugy-mikor{font-size:11.5px; color:var(--tinta-halkabb); white-space:nowrap} .ugy-szoveg{ font-size:14.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; } .ugy-jegyzet{ margin:9px 0 0; font-size:12.5px; color:var(--tinta-halkabb); font-style:italic; } .ugy .szmk-valasz{margin-top:11px; margin-bottom:0} .ugy .lepesek{display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap} .ugy .lepesek .kuka-gomb{margin-left:auto} .ugy .urlap{margin-top:12px} .koszonet-mikor{ display:block; margin-top:3px; font-weight:400; opacity:.8; font-size:12.5px; } /* A küldés esemény, nem állapot: a visszajelzésnek látszania kell akkor is, ha a köszönő doboz már ott állt az előző bejelentés miatt. */ @keyframes uzenet-villan{ 0% {background:var(--jo); color:#fff} 100% {background:var(--jo-halk); color:var(--jo)} } .uzenet-koszonet.villan{animation:uzenet-villan .9s ease-out} @media (prefers-reduced-motion: reduce){ .uzenet-koszonet.villan{animation:none} } /* A zárolt űrlap feloldója. Aláhúzott, mert linkként viselkedik: kinyitja, ami be van csukva. Gombnak indul, hogy billentyűzetről is elérhető legyen. */ .uzenet-ujra{margin:2px 0 0} .uzenet-ujra button{ background:none; border:0; padding:6px 0; font:inherit; font-size:13.5px; color:var(--fo); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px; } .uzenet-ujra button:focus-visible{outline:2px solid var(--fo); outline-offset:2px; border-radius:4px} /* A profilgomb pöttye. Ugyanaz a jelzés, mint a Kérések fülön: a felület egy nyelvet beszéljen. Borítékikon helyett pötty, mert ekkora méretben a boríték úgyis csak folt, és a koppintás amúgy is megmutatja, mi jött. */ .avatar-burok{position:relative; display:inline-flex; flex:none} .avatar-burok .potty{top:-1px; right:-2px; transform:none} /* Amikor a jelzősávból ugrunk egy kérésre: egy pillanatra kiemeljük, hogy a szem megtalálja a listában. */ @keyframes kartya-ravillan{ 0% {box-shadow:0 0 0 3px var(--fo)} 100% {box-shadow:var(--arnyek)} } .ravillan{animation:kartya-ravillan 1.1s ease-out} @media (prefers-reduced-motion: reduce){ .ravillan{animation:none} } /* ---------- „te vagy a gyümölcsfelelős" címke ---------- A sáv legszemélyesebb sora: nem kártya, hanem egy sor, cím nélkül, legfelül. Nem is nyugtázható X-szel, mint a kitűzött hírek — itt a „Rendben" a természetes mozdulat, mert ez nem hír, hanem rád osztott feladat. */ .felelos-cimke{ display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:10px; background:var(--meleg-halk); border:1px solid var(--meleg); border-radius:var(--r); color:var(--tinta); } /* Ha MA van, erősebb: ezt ma reggel kell meglátni, nem holnap. */ .felelos-cimke.ma{background:var(--meleg); border-color:var(--meleg); color:#fff} .felelos-cimke .ikon{flex:none; width:19px; height:19px; stroke-width:1.9; color:var(--meleg)} .felelos-cimke.ma .ikon{color:#fff} .felelos-cimke .torzs{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px} .felelos-cimke strong{font-size:14.5px; font-weight:600} .felelos-cimke span{font-size:12px; opacity:.8} .felelos-cimke .gomb{flex:none} .felelos-cimke.ma .gomb.masodlagos{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); color:#fff; } /* Családi összekötés kérdése. Ugyanaz a sorforma, mint a gyümölcsfelelősé, csak zöld: ez nem teendő, hanem egy kérdés, amire egyszer kell válaszolni. */ .felelos-cimke.csalad-kerdes{ background:var(--fo-halk); border-color:var(--fo); align-items:flex-start; } .felelos-cimke.csalad-kerdes .ikon{color:var(--fo)} .csalad-valasz{display:flex; gap:7px; flex-wrap:wrap; flex:none} @media (max-width:420px){ .felelos-cimke.csalad-kerdes{flex-wrap:wrap} .csalad-valasz{width:100%; margin-top:4px} } /* Kártyacím ikonnal. A Levelezés a Pénz fül legtetején ül, és a boríték messziről megmondja, mi az — a szöveget nem kell elolvasni hozzá. */ .kartya-cim-ikonos{ display:flex; align-items:center; gap:8px; font-size:17px; font-weight:700; margin:0; } .kartya-cim-ikonos svg{ flex:none; width:19px; height:19px; stroke-width:1.9; color:var(--fo); } /* Szülinap-jelzés a sáv tetején. Ez az egyetlen sor, ami nem teendő és nem határidő, hanem öröm — ezért meleg színű, és nincs rajta gomb, amit le kellene nyomni. Nem is tüntethető el: két nap múlva magától elmúlik. */ .szulinap-jelzes{ display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:10px; background:var(--var-halk); border:1px solid var(--var); border-radius:var(--r); color:var(--tinta); } .szulinap-jelzes.ma{background:var(--var); border-color:var(--var); color:#fff} .szulinap-jelzes .ikon{flex:none; width:20px; height:20px; stroke-width:1.8; color:var(--var)} .szulinap-jelzes.ma .ikon{color:#fff} .szulinap-jelzes .torzs{display:flex; flex-direction:column; gap:1px; min-width:0} .szulinap-jelzes strong{font-size:14.5px; font-weight:600} .szulinap-jelzes span{font-size:12px; opacity:.85} /* ---------- szülinapi köszöntő a hírfolyamban ---------- Az egyetlen hír, amit a rendszer maga tesz ki, és nem teendőről szól. Meleg keret, hogy elváljon a többitől, de ne kiabáljon. */ /* Gergő: „a születésnapi keret nem szép, egy torta ikon lehetne az ünnepelt előtt". Keret helyett csak a torta jelzi — a hírfolyam így nyugodt marad. */ .hir.szulinapi .torta{ width:20px; height:20px; stroke-width:1.8; color:var(--var); vertical-align:-3px; margin-right:7px; } .hir.szulinapi .datum .auto{color:var(--var); font-weight:600} .szulinapi-lab{ margin:8px 0 0; font-size:12.5px; color:var(--tinta-halk); } .hir.szulinapi .lepesek{margin-top:12px} /* Teljes névvel a cím hosszabb: „Kovács-Nagy Boglárka ma ünnepel". Kisebb betű és kiegyensúlyozott tördelés, hogy két sorban se essen szét, és a torta a név mellett maradjon. */ .hir.szulinapi h3{ font-size:16px; line-height:1.35; text-wrap:balance; display:flex; align-items:flex-start; gap:7px; } .hir.szulinapi .torta{flex:none; margin-right:0; vertical-align:0; margin-top:1px} /* Segítség a belépőlapon. Csak itt: aki bent van, annak a profilban lévő bejelentő a jobb út, mert az nyilvántartva fut be a Levelezésbe. */ .kapu-segitseg{ margin:18px 0 0; text-align:center; font-size:12.5px; color:var(--tinta-halkabb); } .kapu-segitseg a{color:var(--fo); font-weight:600; text-underline-offset:3px} /* Súgó. Kérdés-válasz párok, nem folyószöveg: a szülő egy konkrét kérdésre keres választ, nem elolvasni akarja. */ .kartya.sugo h3{ font-size:15px; font-weight:700; margin:18px 0 4px; } .kartya.sugo h3:first-child{margin-top:0} .kartya.sugo p{font-size:14.5px; line-height:1.55; color:var(--tinta-halk); margin:0} /* ---------- nézetváltó (csak az elnöknek) ---------- */ .kartya.nezetvalto{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .kartya.nezetvalto .torzs{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px} .kartya.nezetvalto strong{font-size:15px; font-weight:600} .kartya.nezetvalto span{font-size:12.5px; color:var(--tinta-halk); line-height:1.45} .kartya.nezetvalto .gomb{flex:none} /* A sáv a lap tetején marad, amíg szülői nézetben vagyunk. Enélkül könnyű elfelejteni, és azt hinni, hogy eltűntek az elnöki felületek. */ .nezet-sav{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 14px; background:var(--meleg); color:#fff; font-size:12.5px; font-weight:600; } .nezet-sav[hidden]{display:none !important} .nezet-sav button{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.5); color:#fff; font:inherit; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; cursor:pointer; }