/* ═══════════════════════════════════════════════════════════════════ ÁTTEKINTŐ NAPTÁR + SZŰRŐ — közös stílus Saját előnév (`ov-`), hogy a lapok `.eqb-`, `.walls-` és `.eq-` szabályaival egyik se ütközzön. KORÁBBAN BEÉGETVE ÁLLT az events.html-ben. Amíg csak az az egy lap használta, ez nem zavart — de a tagi felületre is kell, és egy harmadik másolat rossz válasz lett volna: a mai napból három hiba jött abból, hogy ugyanaz a dolog két helyen élt. ═══════════════════════════════════════════════════════════════════ */ /* ÁTTEKINTŐ NAPTÁR + SZŰRŐ. Saját előnév (`ov-`), hogy a lap `.eqb-`, `.walls-` és `.eq-` szabályaival egyik se ütközzön. */ .ov-holder { position: relative; } /* A TAPADÁS. A `sticky` a szülőn belül tart: mivel a sáv és a lista ugyanabban a `.ov-holder`-ben áll, a sáv a lista végén magától továbbgördül. A `top` a fix fejléc alá teszi. */ /* A TAPADÓ SÁV NEM EHETI MEG A KÉPERNYŐT. Szűk margók: ami itt elvész, az a listából megy el. */ .ov-stick { position: sticky; top: 88px; z-index: 25; background: var(--cream, #F6F3EE); padding: 10px 0 8px; border-bottom: 1px solid var(--rule, #DEDAD4); margin-bottom: 16px; } .ov-bar { display: flex; gap: 26px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .ov-intro { flex: 1 1 240px; min-width: 0; } .ov-h { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(18px, 2vw, 21px); color: var(--ink, #1C1917); margin-bottom: 2px; line-height: 1.15; } .ov-lead { font-size: 12.5px; color: var(--muted, #6B6860); max-width: 42ch; line-height: 1.5; margin-bottom: 10px; } .ov-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .ov-head b { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 14.5px; color: var(--ink, #1C1917); white-space: nowrap; } .ov-head b span { color: var(--faint, #A8A296); font-size: 11.5px; } .ov-nav { font: inherit; font-size: 11px; line-height: 1; background: transparent; border: 1px solid var(--rule, #DEDAD4); color: var(--green, #005C4B); width: 21px; height: 21px; cursor: pointer; border-radius: 2px; } .ov-nav:hover { border-color: var(--green, #005C4B); } /* A NAPTÁR KOMPAKT: a tapadó sáv nem eheti meg a képernyőt. Hat sor 24 pixeles cellával ~150 pixel — ennyi még elfér a szöveg mellett. */ /* KISEBB CELLA: 24 -> 20 pixel. A kattintási felület a cellák KÖZÖTTI hellyel együtt még bőven elég telefonon is; ez alatt viszont már nem mennék. */ .ov-names, .ov-grid { display: grid; grid-template-columns: repeat(7, 20px); gap: 2px; } .ov-names span { font-size: 7.5px; text-transform: uppercase; text-align: center; color: var(--faint, #A8A296); padding-bottom: 1px; } .ov-names .we { color: var(--rule, #C9C2B4); } .ov-d { position: relative; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 9.5px; line-height: 1; border: 1px solid transparent; background: transparent; color: var(--faint, #A8A296); padding: 0; } .ov-blank { visibility: hidden; } /* AMIN VAN PROGRAM: gomb. A többi nap csak szám — nincs mit kezdeni vele, ne is csábítson kattintásra. */ button.ov-d { cursor: pointer; color: var(--green, #005C4B); background: #fff; border-color: var(--rule, #DEDAD4); font-weight: 500; } button.ov-d:hover { border-color: var(--gold, #D8B750); } button.ov-d:focus-visible { outline: 2px solid var(--gold, #D8B750); outline-offset: 1px; } .ov-on i { position: absolute; top: -3px; right: -3px; font-style: normal; font-size: 7px; background: var(--gold, #D8B750); color: #1C1917; border-radius: 50%; width: 10px; height: 10px; display: flex; align-items: center; justify-content: center; } .ov-ma { text-decoration: underline; text-underline-offset: 2px; } /* AHOL ÉPP JÁRSZ. Nem csak szín: a külső keret is jelöli, hogy színtévesztéssel is látszódjon. */ .ov-here { background: var(--green, #005C4B) !important; color: var(--cream, #F6F3EE) !important; border-color: var(--green, #005C4B) !important; box-shadow: 0 0 0 2px rgba(216,183,80,.55); } .ov-empty { font-size: 12px; color: var(--muted, #6B6860); margin-top: 6px; max-width: 40ch; line-height: 1.55; } .ov-empty span { color: var(--faint, #A8A296); } .ov-jump { font: inherit; font-size: 12px; background: transparent; border: 0; color: var(--green, #005C4B); cursor: pointer; padding: 0; border-bottom: 1px solid currentColor; } /* A SZŰRŐ a naptár alatt, ugyanabban a tapadó sávban. */ /* A SZŰRŐ a bal oszlopban, a szöveg alatt — nem külön sorban. */ #eq-filter-slot .eqb-filter { margin-bottom: 0; flex-wrap: wrap; } /* A LISTA KÉT OSZLOPBAN. Így a kártya elég széles ahhoz, hogy a cím és a kép is megálljon rajta — három oszlopban mindkettő szűk lett. */ .ov-holder .eqb-onsale-grid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 720px) { .ov-holder .eqb-onsale-grid { grid-template-columns: 1fr; } } /* ALACSONY KÉPERNYŐN a tapadó sáv túl sokat enne meg: ott a magyarázó szöveg elmarad, és a naptár szorosabb. */ @media (max-height: 760px), (max-width: 640px) { .ov-lead { display: none; } .ov-stick { top: 74px; padding-top: 10px; } } /* A MEGTALÁLT KÁRTYA felvillan: a görgetés végén a szem tudja, hova ért. */ .eqb-card-flash { animation: eqb-flash 1.4s ease-out; } @keyframes eqb-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(216,183,80,0); } 18% { box-shadow: 0 0 0 3px rgba(216,183,80,.75); } } /* ══════════════════════════════════════════════════════════════════════ ÖSSZECSUKOTT SÁV A tapadó sáv és a magas kártyák ugyanazért a képernyőért versenyeznek. Egy 1080 pixeles kijelzőn a fejléc és a sáv együtt ~290 pixelt eszik meg, a kártya pedig ~500 — görgetés közben így egy kártya sem fér el egészben. Görgetéskor a rács, a napnevek és a magyarázó szöveg eltűnik. Marad: hónap + a jelölt napok pontokként + a szűrő. Ez ~150 pixelt ad vissza. A SZŰRŐ MARAD, mert az nem áttekintés, hanem VEZÉRLŐ: görgetés közben pont akkor jut valakinek eszébe szűrni, és ha akkor eltűnne, vissza kellene görgetnie érte. ══════════════════════════════════════════════════════════════════════ */ .ov-dots { display: none; } .ov-mini { padding: 6px 0 5px; margin-bottom: 12px; } .ov-mini .ov-intro > .ov-h, .ov-mini .ov-lead, .ov-mini .ov-names, .ov-mini .ov-grid, .ov-mini .ov-empty { display: none; } /* MINDEN MARAD A HELYÉN: a naptár jobbra, a szűrő balra — nyitva és csukva egyaránt. Korábban összecsukáskor a kettő HELYET CSERÉLT (`order: 1` / `2`). A szem viszont megszokta a helyeket: ha görgetés közben átugranak, a látogató újra megkeresi mindkettőt — épp abban a pillanatban, amikor a legkevésbé ér rá. Így az összecsukódás nem átrendezés, hanem összehúzódás: csak a naptár TARTALMA változik, rács helyett egy sor. */ .ov-mini .ov-bar { align-items: center; gap: 16px; } .ov-mini .ov-intro { flex: 0 1 auto; min-width: 0; } .ov-mini #eq-strip { flex: 0 0 auto; } .ov-mini .ov-head { margin-bottom: 0; flex-wrap: nowrap; } /* A JELÖLT NAPOK PONTKÉNT. Ugyanaz a `data-go`, mint a rácson: a navigáció megmarad, csak kevesebb helyen. */ .ov-mini .ov-dots { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--rule, #DEDAD4); } .ov-dot { font: inherit; font-size: 9.5px; line-height: 1; cursor: pointer; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule, #DEDAD4); background: #fff; color: var(--green, #005C4B); font-weight: 500; border-radius: 2px; padding: 0; } .ov-dot:hover { border-color: var(--gold, #D8B750); } .ov-dot:focus-visible { outline: 2px solid var(--gold, #D8B750); outline-offset: 1px; } .ov-dot.span { background: #F3F7F4; font-weight: 400; color: var(--muted, #6B6860); } /* AHOL ÉPP JÁRSZ — ugyanaz a jelölés, mint a rácson. */ .ov-dot.on { background: var(--green, #005C4B); color: var(--cream, #F6F3EE); border-color: var(--green, #005C4B); box-shadow: 0 0 0 2px rgba(216,183,80,.5); } .ov-dot.on.span { background: #2F6B58; box-shadow: none; } /* KESKENY KIJELZŐN a pontok új sorba csúszhatnak — az is jobb, mint a teljes rács. */ @media (max-width: 700px) { .ov-mini .ov-bar { flex-wrap: wrap; } } /* HÓNAP-ELVÁLASZTÓ a listában. Teljes szélességű sor a rácsban: ettől az új hónap BIZTOSAN új sorban kezdődik — két oszlopnál különben a szeptember 30-i és az október 1-i esemény egymás mellé kerülne, és semmi nem jelezné a váltást. */ .eqb-month-sep { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 12px 0 2px; } .eqb-month-sep:first-child { margin-top: 0; } .eqb-month-sep span { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 17px; color: var(--ink, #1C1917); white-space: nowrap; } .eqb-month-sep::after { content: ''; flex: 1; height: 1px; background: var(--rule, #DEDAD4); } /* TÖBBNAPOS ESEMÉNY a naptárban. A köztes napok halkabbak, mint a kezdés: a látogató lássa, hol KEZDŐDIK, és azt is, meddig tart. Egyforma jelöléssel nem lehetne megkülönböztetni két külön eseményt egy kétnapostól. */ button.ov-d.ov-span { background: #F3F7F4; font-weight: 400; } button.ov-d.ov-span:not(.ov-here) { color: var(--muted, #6B6860); } /* A KIEMELT FOLYTATÁS. Görgetés közben a `.ov-here` `!important`-tal írja felül a hátteret — külön szabály nélkül a kezdés és a folytatás EGYFORMÁN nézne ki, és két kétnapos esemény egyetlen négynapos tömbnek látszana. Világosabb zöld, és NINCS arany gyűrű: a gyűrű mostantól azt jelenti, hogy ITT KEZDŐDIK. Így a négy napból két párost lehet kiolvasni. */ .ov-here.ov-span { background: #2F6B58 !important; box-shadow: none !important; } /* A kezdés gyűrűje marad — ez a horgony, amire a szem rááll. */ /* -- A masodik blokk, ami ugyanezen a lapon kulon