/* ===================================================================== NEXT AKADÉMIA 2.0 — TUDÁSTÁR (KURZUSOK) OLDAL na-catalog.css · v1.12.0 · /kurzusok/ ÉS /bni-kurzusok/ v1.12.0 — Négy kérés: (1) a mentett könyvjelző KÉK, nem BNI-piros; (2) a „További szűrők" csoportjai teljes szélességben állnak, így az Időtartam négy értéke egy sorba fér, és a panel jóval alacsonyabb; (3) a kártyán a cím két sor, a tünetsor egy sor helyét MINDIG lefoglalja, tehát egy sorban a kártyák belseje sem csúszik el; (4) a rendezés lenyílójából kikerült a pipa — a kiválasztott sort kék felirat, halvány kék háttér és egy bal oldali jelölősáv mutatja, a felirat pedig mind a négy soron pontosan középen. v1.11.0 — A `hidden` attribútum mindig nyer (2. blokk). A számbuborék és a találatsáv saját `display`-e felülírta a böngésző `[hidden]` szabályát, ezért a „Mentett" fülön 0-s buborék maradt kint, mentett kurzus nélkül is. v1.10.0 — A rendezés lenyílójában a kiemelő sáv a panel széléig ér (a lista vízszintes belső margója 0, a sornak nincs saját lekerekítése). A Szint-címke a kártyáról levéve — a mátrixban nincs hozzá adat. v1.9.0 — A rendezés lenyílója: a pipa KIVETT ELEM lett (abszolút pozícióban), tehát a feliratok mind a négy soron pontosan ugyanott állnak; a gomb és a lista pedig a leghosszabb felirathoz van méretezve, így a gomb nem nő-zsugorodik választáskor, és a lista sem lóg ki alóla. v1.8.0 — A rendezés lenyílójában a sorok KÖZÉPRE igazodnak, és a kiválasztott a pipával kezdődik: a rejtett pipa eddig `opacity: 0`-val ott maradt, és egy üres hasábot hagyott a lista bal szélén. A Szint szűrőcsoport kikerült a másodlagos szűrők közül (a kártyacímke marad). v1.7.0 — MENTETT KURZUSAIM. A kártya sarkába könyvjelző gomb (10.2), a fülsávba pedig harmadik fül. HÁROM fül miatt a sáv törhetővé vált, és a számbuborék is javult: a fehér-áttetsző buborék az inaktív, világos fülön gyakorlatilag láthatatlan volt (5. blokk). v1.6.0 — A pill-sáv lapozó nyilánál a KARIKA TELJES. A halványuló sáv a gomb `::before`-ja volt, `z-index: -1`-gyel — az viszont a saját eleme háttere és KERETE fölé fest, tehát kimosta a kék kör külső ívét. A fade átkerült a sávra (7.1), a rétegsorrend így: pillek → fade → nyíl. FEHÉR ALAP, SÖTÉT KÁRTYÁK. Az oldal háttere fehér, a kurzuskártya viszont sötét panel rajta — így teljesül egyszerre a két kérés: fehér alapháttér, ÉS a borítókép alatti szöveg fehér vagy kék, szürke sehol. Ha a kártya is világos lenne, a fehér szöveg olvashatatlan volna rajta. Tokenek: .wpsf-root Scope: .wpsf-hero-premium.na-catalog ⚠ A HATÓKÖR-SZELEKTOR ALAKJA (javítva: v1.4.1) A gyökérelem osztályai: `wpsf-root wpsf-hero-premium na-catalog`. A `.wpsf-hero-premium` és a `.na-catalog` tehát UGYANAZON AZ ELEMEN van, nem egymás alatt. Egy `.wpsf-hero-premium .na-catalog …` alakú szabály ezért SOHA nem illeszkedik. Ahol a hatókörhöz a `.na-catalog` is kell (box-sizing, gombok, fókuszgyűrű), ott MINDKÉT alak szerepel — előbb egy elemen, aztán egymás alatt: .wpsf-hero-premium.na-catalog X, .wpsf-hero-premium .na-catalog X Ahol csak a `.wpsf-hero-premium` a hatókör (a fájl túlnyomó része), ott a `:where(.wpsf-hero-premium) .na-cat-…` alak jó és marad. MIT NEM CSINÁL — és miért ------------------------------------------------------------------- · Nincs benne `*`, `html`, `body` szelektor a saját blokkon kívül, és nincs globális `overflow` állítás. A landingnél ez már elrontotta a Divi mobil görgetését. · A `scrollbar-width: none` KIZÁRÓLAG a `.na-cat-pills` sávra kerül. · Két `!important`-os blokk van, mindkettő védekezés: – a 14. blokk a kártyaképeket védi az oldal globális `.alignleft{display:none!important}` szabályától, – a 15. blokk a Divi sor/szekció szélességét nyitja ki. · NINCS ZÁROLÁS-STÍLUS: se lakat, se halványítás. A hozzáférést kizárólag a 10.1 blokk színes címkéje jelzi. SPECIFICITÁS A `:where(...)` burkolat 0 specificitású, a mögötte álló osztálylánc viszont nem — így a fájl olvasható marad, mégis üt. MINDEN TAPPELHETŐ ELEM legalább 44 px magas. ===================================================================== */ /* ===================================================================== 1. TOKENEK ===================================================================== */ .wpsf-hero-premium.na-catalog, .wpsf-hero-premium .na-catalog { --NA-BLACK: #000000; --NA-WHITE: #ffffff; --NA-OFF-WHITE: #F5F5F7; --NA-BLUE-LIGHT: #5B8EF5; --NA-BLUE: #356DF0; --NA-BLUE-DARK: #1240C4; --NA-BLUE-DEEP: #0E32A8; --NA-PURPLE-LIGHT: #A78BFF; --NA-PURPLE: #7C5CFF; --NA-PURPLE-DEEP: #4F33D4; --NA-GRADIENT-ACCENT: linear-gradient(135deg, #356DF0 0%, #7C5CFF 100%); --NA-FONT-DISPLAY: 'Poppins', sans-serif; --NA-FONT-BODY: 'Open Sans', sans-serif; --NA-RADIUS-SM: 6px; --NA-RADIUS-MD: 12px; --NA-RADIUS-LG: 20px; --NA-RADIUS-PILL: 999px; --NA-TRANSITION: 0.25s cubic-bezier(0.4,0,0.2,1); /* --- AZ OLDAL: fehér alap --- */ --NA-CT-BG: #ffffff; --NA-CT-INK: #0A0E1A; /* fő szöveg fehéren */ --NA-CT-INK-SOFT: #39415A; /* másodlagos szöveg fehéren */ --NA-CT-SURFACE: #ffffff; /* mezők, pillek alapja */ --NA-CT-SURFACE-ALT: #F3F6FD; /* halvány kék-fehér felület */ --NA-CT-BORDER: #D7E0F5; --NA-CT-BORDER-STRONG: #9FB9EE; --NA-CT-SHADOW: 0 1px 2px rgba(10,14,26,0.05); /* --- A KÁRTYA: sötét panel a fehéren --- */ --NA-CT-CARD: #0B0F1E; --NA-CT-CARD-UP: #131933; /* hoverkor egy fokkal világosabb */ --NA-CT-CARD-BORDER: rgba(11,15,30,0.10); --NA-CT-CARD-TEXT: #ffffff; /* MINDEN kártyaszöveg fehér… */ --NA-CT-CARD-LABEL: #7FA6F8; /* …vagy kék. Szürke sehol. */ --NA-CT-CARD-SHADOW: 0 2px 10px rgba(10,14,26,0.10); --NA-CT-CARD-SHADOW-UP: 0 14px 34px rgba(53,109,240,0.26); --NA-CT-GAP: 16px; /* rács-térköz, töréspontonként nő */ --NA-CT-PAD: 20px; /* oldalsó margó */ --NA-CT-TAP: 48px; /* legkisebb tappelhető méret */ } /* ===================================================================== 2. OLDALKERET + HÁTTÉR-DERENGÉS A landing kék→lila glow-ja fehér alapon durva lenne, ezért itt csak egy nagyon halvány kék derengés marad a fejléc mögött — épp annyi, hogy a lap ne legyen steril, de a szöveg kontrasztja ne romoljon. ===================================================================== */ .wpsf-hero-premium.na-catalog *, .wpsf-hero-premium .na-catalog *, .wpsf-hero-premium.na-catalog *::before, .wpsf-hero-premium .na-catalog *::before, .wpsf-hero-premium.na-catalog *::after, .wpsf-hero-premium .na-catalog *::after { box-sizing: border-box; } /* * A `hidden` ATTRIBÚTUM MINDIG NYERJEN. * * A böngésző alap-stíluslapja `[hidden] { display: none }`-t ad, de az a * leggyengébb szabály: bármelyik saját `display` felülírja. A blokkban * több elemnek van sajátja (`display: inline-flex` a számbuborékon, * `display: flex` a találatsávon), és a JS meg a PHP ezeket `hidden`-nel * kapcsolgatja — így némán LÁTHATÓAK MARADTAK. Ezért volt kint a * „Mentett" fülön a 0-s buborék akkor is, amikor nincs mentett kurzus. * * Egyenként is meg lehetne fejelni mindet, de az minden új elemnél újra * elfelejthető. Ez az egy szabály az egész blokkra megoldja. * * `!important` — mert pontosan az a dolga, hogy minden saját `display`-t * megelőzzön. A hatóköre a katalógus blokkja, a lap többi részét nem éri. */ .wpsf-hero-premium.na-catalog [hidden], .wpsf-hero-premium .na-catalog [hidden] { display: none !important; } .wpsf-hero-premium.na-catalog { position: relative; isolation: isolate; overflow: hidden; /* csak ezen a blokkon, nem a body-n */ background: var(--NA-CT-BG); color: var(--NA-CT-INK); font-family: var(--NA-FONT-BODY); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 36px 0 56px; padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } :where(.wpsf-hero-premium) .na-cat-glow { position: absolute; top: -320px; left: 50%; z-index: 0; width: min(1200px, 170vw); height: 620px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(50% 50% at 36% 60%, rgba(53,109,240,0.10) 0%, rgba(53,109,240,0) 70%), radial-gradient(46% 46% at 66% 55%, rgba(124,92,255,0.07) 0%, rgba(124,92,255,0) 72%); } /* * A SZAKASZ SZÉLESSÉGE: a képernyő 70%-a. * * A `max()` egy alsó korlátot is ad: keskenyebb laptopon nem húzza össze * a tartalmat 70%-ra, hanem megtartja az eddigi 1180 px-et — a kérés az * volt, hogy semmit ne kelljen összezsugorítani. Széles monitoron viszont * tényleg a 70% érvényesül (1920 px-en ~1344 px, 2560-on ~1792 px). * A `min(100%, …)` pedig mobilon tartja bent az egészet. */ :where(.wpsf-hero-premium) .na-cat-inner { position: relative; z-index: 1; width: min(100%, max(70%, 1180px)); margin: 0 auto; padding: 0 var(--NA-CT-PAD); } /* ===================================================================== 3. FEJLÉC-BLOKK (eyebrow · H1 · alcím) — balra igazítva ===================================================================== */ :where(.wpsf-hero-premium) .na-cat-head { max-width: 720px; margin: 0 0 24px; } :where(.wpsf-hero-premium) .na-cat-eyebrow { margin: 0 0 10px; padding: 0; color: var(--NA-BLUE); font-family: var(--NA-FONT-DISPLAY); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; } :where(.wpsf-hero-premium) .na-cat-h1 { margin: 0 0 12px; padding: 0; color: var(--NA-CT-INK); font-family: var(--NA-FONT-DISPLAY); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } :where(.wpsf-hero-premium) .na-cat-lead { margin: 0; padding: 0; color: var(--NA-CT-INK-SOFT); font-size: 15px; line-height: 1.6; } /* ===================================================================== 4. GOMBOK ===================================================================== */ .wpsf-hero-premium.na-catalog .na-btn-primary, .wpsf-hero-premium .na-catalog .na-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--NA-CT-TAP); padding: 15px 30px; border: 2px solid transparent; border-radius: var(--NA-RADIUS-PILL); background: linear-gradient(180deg, #6b9fff 0%, #4278f5 30%, #1a4ed8 70%, #2860e8 100%); box-shadow: 0 6px 0 #0e32a8, 0 8px 20px rgba(26,78,216,.35), inset 0 1px 0 rgba(255,255,255,.35); color: #fff; font-family: var(--NA-FONT-DISPLAY); font-size: 16px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; text-align: center; text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,.25); cursor: pointer; user-select: none; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .wpsf-hero-premium.na-catalog .na-btn-primary:hover, .wpsf-hero-premium .na-catalog .na-btn-primary:hover, .wpsf-hero-premium.na-catalog .na-btn-primary:focus-visible, .wpsf-hero-premium .na-catalog .na-btn-primary:focus-visible { transform: translateY(3px); box-shadow: 0 3px 0 #0e32a8, 0 4px 10px rgba(26,78,216,.28), inset 0 1px 0 rgba(255,255,255,.35); filter: brightness(1.06); } /* Fehér alapon a másodlagos gomb szövege KÉK, nem fehér — különben eltűnne a háttérben. */ .wpsf-hero-premium.na-catalog .na-btn-secondary, .wpsf-hero-premium .na-catalog .na-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--NA-CT-TAP); padding: 13px 26px; border: 2px solid var(--NA-BLUE); border-radius: var(--NA-RADIUS-PILL); background: transparent; color: var(--NA-BLUE-DARK); font-family: var(--NA-FONT-DISPLAY); font-size: 15px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .12s ease; } .wpsf-hero-premium.na-catalog .na-btn-secondary:hover, .wpsf-hero-premium .na-catalog .na-btn-secondary:hover, .wpsf-hero-premium.na-catalog .na-btn-secondary:focus-visible, .wpsf-hero-premium .na-catalog .na-btn-secondary:focus-visible { transform: translateY(-1px); background: rgba(53,109,240,0.08); } /* Egységes fókuszjelölés — billentyűzetes használatra. */ .wpsf-hero-premium.na-catalog a:focus-visible, .wpsf-hero-premium .na-catalog a:focus-visible, .wpsf-hero-premium.na-catalog button:focus-visible, .wpsf-hero-premium .na-catalog button:focus-visible, .wpsf-hero-premium.na-catalog input:focus-visible, .wpsf-hero-premium .na-catalog input:focus-visible, .wpsf-hero-premium.na-catalog select:focus-visible, .wpsf-hero-premium .na-catalog select:focus-visible, .wpsf-hero-premium.na-catalog [tabindex]:focus-visible, .wpsf-hero-premium .na-catalog [tabindex]:focus-visible { outline: 2px solid var(--NA-BLUE); outline-offset: 3px; } /* ===================================================================== 5. FÜLEK — „Összes kurzus" / „Kurzusaim" / „Mentett" HÁROM fül fér el itt, nem kettő. A sáv ezért TÖRHET: széles képernyőn egy sorban áll mind a három, keskenyen a harmadik a második sorba csúszik — így egyik felirat sem préselődik össze, és nem kell vízszintesen görgethető fülsávot csinálni. ===================================================================== */ :where(.wpsf-hero-premium) .na-cat-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; padding: 4px; border: 1px solid var(--NA-CT-BORDER); border-radius: var(--NA-RADIUS-PILL); background: var(--NA-CT-SURFACE-ALT); max-width: 560px; } :where(.wpsf-hero-premium) .na-cat-tab { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 0; border-radius: var(--NA-RADIUS-PILL); background: transparent; color: var(--NA-CT-INK-SOFT); font-family: var(--NA-FONT-DISPLAY); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background .18s ease, color .18s ease; } :where(.wpsf-hero-premium) .na-cat-tab:hover { color: var(--NA-CT-INK); } :where(.wpsf-hero-premium) .na-cat-tab.is-active { background: var(--NA-BLUE); color: #fff; box-shadow: 0 2px 8px rgba(53,109,240,.30); } /* A fül ikonja (a Mentett könyvjelzője) a felirat előtt. */ :where(.wpsf-hero-premium) .na-cat-tab svg { width: 15px; height: 15px; flex: 0 0 auto; } /* * A számbuborék. * * Az aktív fül kék, ott a fehér-áttetsző buborék jó. INAKTÍV fülön * viszont a világos sávon a fehér 22% gyakorlatilag láthatatlan volt — * a szám ott csak csupasz szövegként ült. Az alapállapot ezért halvány * kék buborék, és a fehér-áttetsző csak az aktív fülön él. */ :where(.wpsf-hero-premium) .na-cat-tab-num { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--NA-RADIUS-PILL); background: rgba(53,109,240,0.12); color: var(--NA-BLUE-DARK); font-size: 11px; font-weight: 700; } :where(.wpsf-hero-premium) .na-cat-tab.is-active .na-cat-tab-num { background: rgba(255,255,255,0.22); color: #fff; } /* Nagyon keskeny telefonon a fülsáv két sorba törik — ott a stadion-alak furcsán állna, ezért lágy sarkú doboz lesz belőle. */ @media (max-width: 420px) { :where(.wpsf-hero-premium) .na-cat-tabs { border-radius: var(--NA-RADIUS-LG); } } :where(.wpsf-hero-premium) .na-cat-panel[hidden] { display: none; } /* ===================================================================== 6. KERESŐ A `font-size: 16px` NEM ízlésbeli döntés: az iOS Safari 16 px alatt ráközelít a mezőre fókuszkor, és az egész elrendezés megugrik. ===================================================================== */ :where(.wpsf-hero-premium) .na-cat-search { margin: 0 0 14px; } :where(.wpsf-hero-premium) .na-cat-search-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :where(.wpsf-hero-premium) .na-cat-search-box { position: relative; display: flex; align-items: center; width: 100%; max-width: 460px; border: 1px solid var(--NA-CT-BORDER); border-radius: var(--NA-RADIUS-PILL); background: var(--NA-CT-SURFACE); box-shadow: var(--NA-CT-SHADOW); transition: border-color .18s ease, box-shadow .18s ease; } :where(.wpsf-hero-premium) .na-cat-search-box:focus-within { border-color: var(--NA-BLUE); box-shadow: 0 0 0 4px rgba(53,109,240,0.14); } :where(.wpsf-hero-premium) .na-cat-search-icon { flex: 0 0 auto; width: 19px; height: 19px; margin-left: 18px; color: var(--NA-BLUE); } :where(.wpsf-hero-premium) .na-cat-search-input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px 8px 12px 12px; border: 0; background: transparent; color: var(--NA-CT-INK); font-family: var(--NA-FONT-BODY); font-size: 16px; line-height: 1.4; appearance: none; -webkit-appearance: none; } :where(.wpsf-hero-premium) .na-cat-search-input:focus { outline: none; /* a keret a dobozon jelenik meg */ } :where(.wpsf-hero-premium) .na-cat-search-input::placeholder { color: #6B7492; opacity: 1; } /* A böngésző saját törlő ikonja idegen — sajátot adunk. */ :where(.wpsf-hero-premium) .na-cat-search-input::-webkit-search-cancel-button, :where(.wpsf-hero-premium) .na-cat-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } :where(.wpsf-hero-premium) .na-cat-search-clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--NA-CT-INK-SOFT); cursor: pointer; transition: color .18s ease, background .18s ease; } :where(.wpsf-hero-premium) .na-cat-search-clear:hover { background: var(--NA-CT-SURFACE-ALT); color: var(--NA-CT-INK); } :where(.wpsf-hero-premium) .na-cat-search-clear svg { width: 16px; height: 16px; } :where(.wpsf-hero-premium) .na-cat-search-clear[hidden] { display: none; } /* ===================================================================== 7. KATEGÓRIAVÁLASZTÓ — EGYSZERRE CSAK EGY A sáv EGYETLEN választó: `Mind`, a hat Cél, a `Webinár felvételek` és az `Ingyenes` egymást kizárják. Ezért `role="radiogroup"` és `aria-checked` — a képernyőolvasó is rádiógombként mondja be, nem ki-be kapcsolóként. Mobilon vízszintesen görgethető sáv, NEM tördelve. A görgetősáv elrejtése KIZÁRÓLAG itt történik. ===================================================================== */ :where(.wpsf-hero-premium) .na-cat-pills-outer { position: relative; /* A sáv kilóg az oldalsó margóból, hogy a szélén ne vágódjon le a pill — a tartalom viszont a margóhoz igazodik. */ margin: 0 calc(var(--NA-CT-PAD) * -1) 12px; } :where(.wpsf-hero-premium) .na-cat-pills { display: flex; gap: 8px; padding: 2px var(--NA-CT-PAD); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* CSAK EZEN AZ ELEMEN */ } :where(.wpsf-hero-premium) .na-cat-pills::-webkit-scrollbar { display: none; /* CSAK EZEN AZ ELEMEN */ } :where(.wpsf-hero-premium) .na-cat-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--NA-CT-BORDER); border-radius: var(--NA-RADIUS-PILL); background: var(--NA-CT-SURFACE); color: var(--NA-CT-INK-SOFT); font-family: var(--NA-FONT-DISPLAY); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; scroll-snap-align: start; transition: background .18s ease, border-color .18s ease, color .18s ease; } :where(.wpsf-hero-premium) .na-cat-pill:hover { border-color: var(--NA-CT-BORDER-STRONG); color: var(--NA-CT-INK); } :where(.wpsf-hero-premium) .na-cat-pill.is-active { border-color: var(--NA-BLUE); background: var(--NA-BLUE); color: #fff; box-shadow: 0 2px 10px rgba(53,109,240,.28); } /* A két nem-Cél választás (Webinár felvételek · Ingyenes) vizuálisan elkülönül — de a viselkedésük ugyanaz: egyszerre csak egy lehet aktív. */ :where(.wpsf-hero-premium) .na-cat-pill--alt { position: relative; margin-left: 12px; } :where(.wpsf-hero-premium) .na-cat-pill--alt::before { content: ''; position: absolute; top: 9px; bottom: 9px; left: -12px; width: 1px; background: var(--NA-CT-BORDER); } :where(.wpsf-hero-premium) .na-cat-pill--alt svg { width: 16px; height: 16px; flex: 0 0 auto; } /* Az „Ingyenes" közvetlenül a „Webinár felvételek" után jön — a kettő közé nem kell újabb elválasztó vonal. */ :where(.wpsf-hero-premium) .na-cat-pill--free { margin-left: 8px; } :where(.wpsf-hero-premium) .na-cat-pill--free::before { content: none; } /* Utolsó pill után is maradjon levegő, hogy ne ragadjon a képernyő szélére. */ :where(.wpsf-hero-premium) .na-cat-pill:last-child { margin-right: var(--NA-CT-PAD); } /* --------------------------------------------------------------------- 7.1 LAPOZÓ NYILAK a pill-sávhoz A sáv görgethetősége önmagában nem látszik — ezért a két szélén egy-egy nyíl ül, alatta elhalványuló háttérrel, hogy a pillek „alácsússzanak". A nyilak a sáv FÖLÉ vannak pozicionálva, nem mellé. A JS teszi őket láthatóvá, és csak akkor, ha van mit lapozni. A szélére érve az ottani nyíl eltűnik. --------------------------------------------------------------------- */ :where(.wpsf-hero-premium) .na-cat-pill-nav { position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; /* Teljes értékű, jól látható gomb: vastag kék keret, tömör fehér alap, határozott árnyék. Nem „halvány jelzés", hanem kattintható vezérlő. */ border: 2px solid var(--NA-BLUE); border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(53,109,240,0.28); color: var(--NA-BLUE); cursor: pointer; transform: translateY(-50%); transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; } :where(.wpsf-hero-premium) .na-cat-pill-nav[hidden] { display: none; } /* Ráhúzva az EGÉSZ kör kékre vált, benne fehér nyíllal. */ :where(.wpsf-hero-premium) .na-cat-pill-nav:hover, :where(.wpsf-hero-premium) .na-cat-pill-nav:focus-visible { background: var(--NA-BLUE); color: #fff; box-shadow: 0 6px 18px rgba(53,109,240,0.42); transform: translateY(-50%) scale(1.06); } :where(.wpsf-hero-premium) .na-cat-pill-nav:active { transform: translateY(-50%) scale(0.97); } :where(.wpsf-hero-premium) .na-cat-pill-nav svg { width: 20px; height: 20px; } :where(.wpsf-hero-premium) .na-cat-pill-nav--prev { left: 4px; } :where(.wpsf-hero-premium) .na-cat-pill-nav--next { right: 4px; } /* * AZ ELHALVÁNYULÓ SÁV — a SÁVON ül, nem a nyílon. * * Korábban a fade a gomb `::before`-ja volt, `z-index: -1`-gyel. Egy * negatív z-indexű pszeudoelem viszont a SAJÁT ELEME HÁTTERE ÉS KERETE * FÖLÉ fest (CSS 2.1, E. függelék: előbb a rétegképző elem háttere és * kerete, csak utána a negatív z-indexű gyerekek). A fehér átmenet így * kimosta a kék karika külső ívét — a kör nem látszott teljesnek. * * A sávra téve a rétegsorrend egyértelmű: pillek → fade (z-index: 1) → * nyíl (z-index: 2). A karika hiánytalan, a pillek mégis „alácsúsznak". * * `pointer-events: none`, tehát a mögötte lévő pill tappelhető marad. */ :where(.wpsf-hero-premium) .na-cat-pills-outer::before, :where(.wpsf-hero-premium) .na-cat-pills-outer::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 56px; opacity: 0; pointer-events: none; transition: opacity .18s ease; } :where(.wpsf-hero-premium) .na-cat-pills-outer::before { left: 0; background: linear-gradient(90deg, var(--NA-CT-BG) 45%, rgba(255,255,255,0) 100%); } :where(.wpsf-hero-premium) .na-cat-pills-outer::after { right: 0; background: linear-gradient(270deg, var(--NA-CT-BG) 45%, rgba(255,255,255,0) 100%); } /* Csak azon az oldalon látszik, ahol tényleg van még pill — ugyanaz a feltétel, ami az ottani nyilat is megjeleníti. A JS teszi ki. */ :where(.wpsf-hero-premium) .na-cat-pills-outer.can-prev::before { opacity: 1; } :where(.wpsf-hero-premium) .na-cat-pills-outer.can-next::after { opacity: 1; } :where(.wpsf-hero-premium) .na-cat-pills-outer.has-nav .na-cat-pills { padding-left: calc(var(--NA-CT-PAD) + 10px); padding-right: calc(var(--NA-CT-PAD) + 10px); scroll-padding-left: 56px; scroll-padding-right: 56px; } /* --------------------------------------------------------------------- 7.2 EGÉRREL HÚZHATÓ SÁV A kurzor jelzi, hogy a sáv fogható, húzás közben pedig „markoló" lesz. A `user-select` kikapcsolása csak HÚZÁS KÖZBEN érvényes: így a pillek szövege egyébként kijelölhető marad. --------------------------------------------------------------------- */ :where(.wpsf-hero-premium) .na-cat-pills-outer.has-nav .na-cat-pills { cursor: grab; } :where(.wpsf-hero-premium) .na-cat-pills-outer.is-dragging .na-cat-pills { cursor: grabbing; scroll-snap-type: none; /* húzás közben ne rángassa a snap */ user-select: none; } :where(.wpsf-hero-premium) .na-cat-pills-outer.is-dragging .na-cat-pill { cursor: grabbing; } /* ===================================================================== 8. MÁSODLAGOS SZŰRŐK — alapból csukva Ezek TÖBBSZÖRÖS választásúak: a kategóriaválasztó egyválasztós szabálya a pill-sávra vonatkozik, nem ide. Egy szint és két tünet együtt értelmes szűkítés. ===================================================================== */ :where(.wpsf-hero-premium) .na-cat-more { margin: 0 0 18px; } :where(.wpsf-hero-premium) .na-cat-more-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } :where(.wpsf-hero-premium) .na-cat-more-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 4px; border: 0; background: transparent; color: var(--NA-CT-INK-SOFT); font-family: var(--NA-FONT-DISPLAY); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: color .18s ease; } :where(.wpsf-hero-premium) .na-cat-more-toggle:hover, :where(.wpsf-hero-premium) .na-cat-more-toggle[aria-expanded="true"] { color: var(--NA-CT-INK); } :where(.wpsf-hero-premium) .na-cat-more-toggle > svg:first-child { width: 17px; height: 17px; color: var(--NA-BLUE); } :where(.wpsf-hero-premium) .na-cat-more-chev { width: 15px; height: 15px; transition: transform .2s ease; } :where(.wpsf-hero-premium) .na-cat-more-toggle[aria-expanded="true"] .na-cat-more-chev { transform: rotate(180deg); } :where(.wpsf-hero-premium) .na-cat-more-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--NA-RADIUS-PILL); background: var(--NA-BLUE); color: #fff; font-size: 12px; font-weight: 700; } :where(.wpsf-hero-premium) .na-cat-more-num[hidden] { display: none; } :where(.wpsf-hero-premium) .na-cat-clear { min-height: 44px; padding: 10px 4px; border: 0; background: transparent; color: var(--NA-BLUE-DARK); font-family: var(--NA-FONT-BODY); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } :where(.wpsf-hero-premium) .na-cat-clear:hover { color: var(--NA-BLUE-DEEP); } :where(.wpsf-hero-premium) .na-cat-clear[hidden] { display: none; } /* * A CSOPORTOK EGYMÁS ALATT, TELJES SZÉLESSÉGBEN. * * Korábban három oszlopos rács volt. Ott az Időtartam négy hosszú * felirata („Közepes (30–90 perc)") nem fért ki egymás mellé, ezért * egymás alá tördelődött — a panel pedig fölöslegesen magas lett. * Teljes szélességben mind a négy elfér egy sorban. */ :where(.wpsf-hero-premium) .na-cat-more-body { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--NA-CT-BORDER); border-radius: var(--NA-RADIUS-LG); background: var(--NA-CT-SURFACE-ALT); } :where(.wpsf-hero-premium) .na-cat-more-body[hidden] { display: none; } :where(.wpsf-hero-premium) .na-cat-group { margin: 0; padding: 0; border: 0; } :where(.wpsf-hero-premium) .na-cat-group-title { margin: 0 0 7px; padding: 0; color: var(--NA-BLUE-DARK); font-family: var(--NA-FONT-DISPLAY); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } :where(.wpsf-hero-premium) .na-cat-group-items { display: flex; flex-wrap: wrap; gap: 7px; } /* A jelölőnégyzet valójában egy pill. A natív input ott marad a fókusz és a képernyőolvasó kedvéért, csak vizuálisan rejtjük. */ :where(.wpsf-hero-premium) .na-cat-check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 13px 6px 11px; border: 1px solid var(--NA-CT-BORDER); border-radius: var(--NA-RADIUS-PILL); background: #fff; color: var(--NA-CT-INK-SOFT); font-size: 13.5px; line-height: 1.25; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } :where(.wpsf-hero-premium) .na-cat-check:hover { border-color: var(--NA-CT-BORDER-STRONG); color: var(--NA-CT-INK); } :where(.wpsf-hero-premium) .na-cat-check input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :where(.wpsf-hero-premium) .na-cat-check-box { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid var(--NA-CT-BORDER-STRONG); border-radius: var(--NA-RADIUS-SM); background: #fff; color: transparent; transition: background .18s ease, border-color .18s ease, color .18s ease; } :where(.wpsf-hero-premium) .na-cat-check-box svg { width: 11px; height: 11px; } :where(.wpsf-hero-premium) .na-cat-check input:checked ~ .na-cat-check-box { border-color: var(--NA-BLUE); background: var(--NA-BLUE); color: #fff; } :where(.wpsf-hero-premium) .na-cat-check:has(input:checked) { border-color: var(--NA-BLUE); background: rgba(53,109,240,0.10); color: var(--NA-CT-INK); } /* :has() nélküli böngészőben a pill kerete nem vált, de a pipa megjelenik — a szűrő attól még pontosan látszik. */ :where(.wpsf-hero-premium) .na-cat-check input:focus-visible ~ .na-cat-check-box { outline: 2px solid var(--NA-BLUE); outline-offset: 3px; } /* ÉRINTŐN visszakapja a 44 px-es tappelhető magasságot — a kompaktabb méret az egeres használatnak szól. */ @media (max-width: 640px) { :where(.wpsf-hero-premium) .na-cat-check { min-height: 44px; padding: 9px 15px 9px 13px; font-size: 14px; } } /* ===================================================================== 9. TALÁLATSÁV (találatszám + rendezés) ÉS A RÁCS Mobil 1 · tablet 2 · desktop 3 oszlop, egyenlő magasságú kártyákkal. ===================================================================== */ :where(.wpsf-hero-premium) .na-cat-resultbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; } :where(.wpsf-hero-premium) .na-cat-count { margin: 0; padding: 0; color: var(--NA-CT-INK); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; } /* --------------------------------------------------------------------- 9.1 Rendezés Natív ZÁRT állapotát a fenti szabályok felöltöztetik, a LENYÍLÓ LISTÁJÁT viszont az operációs rendszer rajzolja — azt a CSS nem éri el. Ezért a JS a select mellé épít egy gombot és egy listát; ez a blokk azokat öltözteti, a lap többi eleméhez igazítva: ugyanaz a lekerekítés, keret, betű és kék kiemelés. A