/* ================================================================== Referenciák — az ágazatválasztó TAPADÁSA mobilon ------------------------------------------------------------------ A prototípus 2026-09-14-i frissítéséből, szó szerint (css/ referenciak-page.css, „A VÁLASZTÓ STICKY" blokk). Külön fájlban azért, mert a mi referenciak-page.css-ünk már régen nem a prototípusé: az a részprototípus csak a horgonynavigációt építi, a mienk a teljes falat is (124 ügyfél, 16 ágazat) — fájlként nem cserélhető. Ez a fájl a pageCss lista VÉGÉN áll, tehát azonos specificitásnál felülírja az alap mobil szabályokat (a nyitott lista folyamból való kivétele pont ezt használja). A prototípus IDEIGLENES görgetőpályáját (.rf-jump-runway) nem vettük át: azt csak a bemutatáshoz tette be célblokkok híján — nálunk a fal maga adja a görgethető hosszt. Ami itt áll: · a tapadási pont (--rf-jump-top) a fejlécet követi — a js/jump-nav.js mountStickyJump-ja tükrözi a fejléc állapotát a body-ra (rf-header-hidden), ez a szótár betűsávjának szerződése · a sáv MOBILON tapad, de CSAK ha a JS meg is mutatta a nyitó- vezérlőt (a :has() őr) — JS nélkül a lista a folyamban marad · varrat-fedés és hajszálvonal CSAK tapadó állapotban (.is-stuck, IntersectionObserver-őrszemről) · a NYITOTT lista kikerül a folyamból: a tartalom nem ugrik meg a vezérlő alatt, és a smooth-scroll nem mér elmozdult geometriát ================================================================== */ /* A sticky ágazatválasztó TAPADÁSI PONTJA — a szótár betűsávjának szerződése, ugyanazzal az indokkal: a `.site-header` görgetésre elcsúszik, és egy fixen a fejlécmagasságon ragadó sáv alatt ilyenkor fejlécnyi üres csík maradna. Az állapotot a js/jump-nav.js tükrözi a body-ra — állapottükrözés, nem tween. */ .rf-page { --rf-jump-top: var(--layout-header-height); } .rf-page.rf-header-hidden { --rf-jump-top: 0px; } @media (max-width: 899.98px) { /* A `:has()` őr a progresszív bővítés miatt KÖTELEZŐ, nem stílus: JS nélkül a nyitóvezérlő rejtve marad és a lista kibontva áll a folyamban — egy ilyen, 900px-nél magasabb doboz tapadóvá téve csapda volna, mert a sáv a tapadási ponton marad, az alja pedig sosem görgethető a képernyőre. Tapadás tehát csak ott, ahol a modul a vezérlőt meg is mutatta. */ .rf-jump:has(.rf-jump-toggle:not([hidden])) { position: sticky; top: var(--rf-jump-top); z-index: 20; /* a fejléc (40) és a mobil dialógus (39) ALATT */ /* 320ms: pontosan a .site-header transform-transitionje, hogy a sáv vele együtt zárjon fel a viewport tetejére. */ transition: top 320ms var(--ease-out); /* Teljes szélességű felület, hogy a tartalom ne a 20px-es oldalközökben csorogjon át a vezérlő mellett. A felület a SZEKCIÓ sajátja, tehát a mezőn belül láthatatlan — sávnak csak ott olvas, ahol idegen tartalom fut alá. */ width: 100vw; /* A globális `max-width: 100%` különben 350px-re csípné vissza a 100vw-t, és a sáv jobb oldalán 40px szabadon maradna (mérve). */ max-width: none; margin-inline: calc(50% - 50vw); padding-inline: var(--space-page); background: var(--bg-tertiary); /* A függőleges levegőt a padding adja, a NEGATÍV margó pedig pontosan visszaveszi: a sáv 12px-cel magasabbra és mélyebbre fest, a nyugvó elrendezés viszont egy pixelt sem mozdul. NEM `margin-block` rövidítéssel — az a prototípus alakja volt, és az alsó margót is átírta: a nav eredeti alsó térköze (clamp(5xl, 6vw, 9xl)) elveszett, a pill a fal első ágazatcímére csúszott (mérve 2026-09-15; a prototípuson nem látszott, ott a nav alatt üres pálya áll). Az alsó margó ezért az eredeti térköz mínusz a padding: a festett doboz 12px-cel mélyebbre ér, a következő tartalom pont ott kezdődik, ahol tapadás nélkül. */ padding-block: var(--spacing-md); margin-top: calc(var(--spacing-md) * -1); margin-bottom: calc(clamp(var(--spacing-5xl), 6vw, var(--spacing-9xl)) - var(--spacing-md)); /* A sáv TELJES magassága egy helyen: a lenyíló panel ebből számolja a sajátját, hogy a kettő együtt PONTOSAN a viewport aljáig érjen. A prototípus ide még egy --spacing-6xl-t (56px) adott „ráhagyásnak" — az volt a panel alatt kilátszó, külön görgethető csík (megrendelői kép, 2026-09-15: „hülyén néz ki, hogy az alsó kilógó résen is lehet görgetni meg a select-ben is"). A sáv border-boxa a gomb + a két 12px padding, semmi több; a panel a saját paddingját border-boxban hordja (styles.css), tehát ráhagyás nem kell. */ --rf-bar-height: calc(var(--layout-button-height) + var(--spacing-md) * 2); } /* NYITVA a sáv a görgess-fel gomb (z 30, fixed) FÖLÉ kerül, a fejléc (40) és a mobil dialógus (39) alatt marad: a gomb különben a lista alsó tételeire ült (megrendelői kép, 2026-09-15). Csukva a 20 marad, hogy a gomb a tapadó sáv fölött lebegjen, ahogy minden más tartalom fölött. */ .rf-jump:has(.rf-jump-toggle[aria-expanded='true']) { z-index: 35; } /* VARRAT-FEDÉS. A tapadási pont a `--layout-header-height` TOKEN (80), a fejléc tényleges magassága viszont a tartalmából jön — mobilon mérve 69px. A maradék 11px-en átlátszana a görgő tartalom, átmenet közben pedig a rés a fejléc teljes magasságáig nyílhat. CSAK tapadó állapotban: nyugalomban a fedés a szekció-lead utolsó sorát takarná (mérve 36px). */ .rf-jump::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--layout-header-height); background: var(--bg-tertiary); pointer-events: none; display: none; } .rf-jump.is-stuck::before { display: block; } /* Elválasztás CSAK tapadó állapotban. Álelemen ül, tehát nem foglal helyet: a megjelenése nem mozdít layoutot. Nyugalomban nincs vonal — ott nem választ el semmit. Az `is-stuck`-ot a modul kapcsolja, IntersectionObserver őrszemről. */ .rf-jump::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--border-width-sm); background: var(--border-secondary); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); pointer-events: none; } .rf-jump.is-stuck::after { opacity: 1; } /* A NYITOTT LISTA KIKERÜL A FOLYAMBÓL. Két mérés kényszeríti ki: 1. folyamban a nyitás ~700px-et tol lefelé mindenből, ami a vezérlő alatt van — tapadó sáv alatt pont az, amit a brief tilt; 2. a zárás ugyanennyit ránt vissza közvetlenül a horgony-ugrás előtt, és a közös smooth-scroll elmozdult geometriát mér (mérve: −628 / +584px landolás). Modal továbbra sincs: nincs role="dialog", fátyol, fókuszcsapda — lenyíló panel a saját vezérlője alatt. A magasság azért kötött, mert egy viewportnál magasabb tapadó doboz alja elérhetetlen. A `:not([hidden])` a progresszív bővítés őre. */ .rf-jump-toggle:not([hidden]) + .rf-jump-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; margin-top: 0; padding: var(--spacing-sm) var(--space-page) var(--spacing-lg); background: var(--bg-tertiary); border-bottom: var(--border-width-sm) solid var(--border-secondary); max-height: calc(100dvh - var(--rf-jump-top) - var(--rf-bar-height)); overflow-y: auto; /* A panel aljára érve ne a lap kezdjen görögni. */ overscroll-behavior: contain; } }