/* Sidekick Automations, mobil javítások. A töréspont mindenhol 900px, mert a Szolgáltatások és a Kapcsolatfelvétel felirat együtt tabletnél is szoros. Desktopon egyik szabály sem érvényes, kivéve ahol ez külön jelölve van. */ /* ============================================================ 1. Mobil navigáció, hamburger menü ============================================================ */ .nav-burger{ display:none; width:44px; height:44px; /* Apple ajánlott minimum érintési felület */ margin-left:auto; align-items:center; justify-content:center; background:none; border:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } .nav-burger__bars{position:relative; display:block; width:24px; height:16px} .nav-burger__bars span{ position:absolute; left:0; display:block; width:24px; height:2px; border-radius:2px; background:#F0A84B; transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .18s ease, top .28s cubic-bezier(.16,1,.3,1); } .nav-burger__bars span:nth-child(1){top:0} .nav-burger__bars span:nth-child(2){top:7px} .nav-burger__bars span:nth-child(3){top:14px} /* nyitott állapotban X, tisztán CSS transzformációval */ .nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(1){top:7px; transform:rotate(45deg)} .nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(3){top:7px; transform:rotate(-45deg)} .nav-burger:focus-visible{outline:2px solid #F0A84B; outline-offset:3px; border-radius:8px} .nav-panel{ background:#0A0A0B; border-bottom:1px solid rgba(245,245,243,.08); padding:6px clamp(20px,5vw,64px) 18px; } .nav-panel[hidden]{display:none} .nav-panel__link, .nav-panel__cta{ display:flex; align-items:center; min-height:52px; font-family:'Instrument Sans',sans-serif; font-size:16.5px; text-decoration:none; box-sizing:border-box; } .nav-panel__link{ color:rgba(245,245,243,.82); border-bottom:1px solid rgba(245,245,243,.07); transition:color .2s; } .nav-panel__link:hover{color:#F5F5F3} .nav-panel__cta{ justify-content:center; margin-top:16px; background:linear-gradient(180deg,#F0A84B,#E07B39); color:#1A1206; font-weight:600; border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); } .nav-panel__link:focus-visible, .nav-panel__cta:focus-visible{outline:2px solid #F0A84B; outline-offset:3px; border-radius:8px} @media (max-width:899px){ /* a linkek konténerén inline display:flex van, ezért kell az !important */ .nav-links, .nav-cta{display:none !important} .nav-burger{display:inline-flex} } @media (min-width:900px){ .nav-panel{display:none !important} } /* ============================================================ 2. A szövegek ne lógjanak ki oldalra ============================================================ */ /* Itt korábban overflow-x:clip volt, a html en és minden oldal body án is. Mindkettő ugyanoda vezet: a gyökér és a body overflow ja FELPROPAGÁLÓDIK a viewportra, és amint az egyik tengely nem visible, a böngésző a másikra auto t használ. A dokumentum görgetődoboza tehát megváltozik, és mobilon pont ez az, ami hirtelen irányváltásnál elszakítja a görgetést az ujjtól, és vágja is a kilógó tartalmat. Kivéve, mert nem volt mit vágnia: 280 és 1920 pixel között egyetlen oldal sem lóg ki vízszintesen. A tényleges védelmet a lenti overflow-wrap és a szekciókon lévő saját overflow:clip adja, azok a viewportot nem érintik. */ html{max-width:100%} body{max-width:100%} /* Csak akkor lép működésbe, ha a szó tényleg nem fér ki, ezért desktopon nem érzékelhető. */ h1,h2,h3,h4,p,li,td,th,blockquote,figcaption{overflow-wrap:break-word} code{overflow-wrap:anywhere} @media (max-width:899px){ /* Nincs automatikus elválasztás: a manual csak a kézzel beírt ­ helyeken enged törni. A kilógás ellen az overflow-wrap véd. */ h1,h2,h3,h4,p,li,td,th,blockquote{-webkit-hyphens:manual; hyphens:manual} /* A tipográfia inline style ban van, így a legnagyobb fokozatokat attribútum szelektorral szűkítjük. Media query mögött van, tehát a desktop tipográfia érintetlen. MINDEN fokozat KÉT alakban szerepel, szóköz nélkül és szóközzel. Ok: a megjelenési animációk JS ből írnak az elem style tulajdonságára (opacity, transform, transition). Az első ilyen írás után a böngésző ÚJRASZERIALIZÁLJA a teljes style attribútumot, a saját szabályai szerint, vagyis "font-size: clamp(" alakban, szóközzel. Egyetlen alakra írt szelektor ezért pont a címeken és a bevezetőkön hallgat el, azokon, amelyek animálódnak, és a szöveg ott nő túl a képernyőn. */ [style*="font-size:clamp(40px"], [style*="font-size: clamp(40px"]{font-size:clamp(30px, 8.2vw, 40px) !important} [style*="font-size:clamp(36px"], [style*="font-size: clamp(36px"]{font-size:clamp(27px, 7.6vw, 36px) !important} [style*="font-size:clamp(34px"], [style*="font-size: clamp(34px"]{font-size:clamp(26px, 7.2vw, 34px) !important} [style*="font-size:clamp(32px"], [style*="font-size: clamp(32px"]{font-size:clamp(25px, 7vw, 32px) !important} [style*="font-size:clamp(31px"], [style*="font-size: clamp(31px"]{font-size:clamp(25px, 6.8vw, 31px) !important} [style*="font-size:clamp(28px"], [style*="font-size: clamp(28px"]{font-size:clamp(23px, 6.4vw, 28px) !important} [style*="font-size:clamp(26px"], [style*="font-size: clamp(26px"]{font-size:clamp(22px, 6vw, 26px) !important} /* Ez volt a fő hiba: a Sidekick Automations spanon white-space:nowrap van, ezért a szó kifutott a képernyő jobb szélén. Itt is kell a szóközös alak, ugyanabból az okból. */ h1 [style*="white-space:nowrap"], h1 [style*="white-space: nowrap"], h2 [style*="white-space:nowrap"], h2 [style*="white-space: nowrap"], h3 [style*="white-space:nowrap"], h3 [style*="white-space: nowrap"], p [style*="white-space:nowrap"], p [style*="white-space: nowrap"]{white-space:normal !important} } /* ============================================================ 3.1 A haladásjelző vonal a képernyő aljára, mobilon ============================================================ */ @media (max-width:899px){ [data-pb-track]{ position:fixed !important; left:0 !important; right:0 !important; bottom:env(safe-area-inset-bottom, 0px) !important; height:3px !important; border-radius:0 !important; z-index:40; /* nav 50 alatt marad */ transition:opacity .25s ease; /* ne ugorva tűnjön el */ } } @media (max-width:899px) and (prefers-reduced-motion:reduce){ /* csökkentett mozgásnál a szekció statikus, a sáv maradjon benne */ [data-pb-track]{position:absolute !important; bottom:0 !important; transition:none} } /* ============================================================ 3.2 A záró blokk alulról csúszik fel, mobilon és desktopon is ============================================================ */ [data-mg-item]{ opacity:0; transform:translateY(40px); transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); } [data-mg-item="0"]{transition-delay:0s} [data-mg-item="1"]{transition-delay:.08s} [data-mg-item="2"]{transition-delay:.16s} [data-mg-item="3"]{transition-delay:.24s} /* az is-in osztályt a meglévő görgetésvezérlő adja rá, egyszer */ [data-mg-block].is-in [data-mg-item]{opacity:1; transform:none} /* a CTA csak akkor kattintható, amikor a blokk tényleg látszik */ [data-mg-block] [data-mg-item="3"]{pointer-events:none} [data-mg-block].is-visible [data-mg-item="3"]{pointer-events:auto} @media (prefers-reduced-motion:reduce){ [data-mg-item]{transition:none; transform:none; opacity:1} } /* ============================================================ 3.25 A SEOKLIKK-kártya címe két sorban, ahogy a Balaton Bónuszé ============================================================ A két esettanulmány-kártya címe egymás mellett áll, de a rövidebb SEOKLIKK cím bizonyos szélességeknél egy sorba fér, a hosszabb Balaton Bónusz pedig kettőbe: a két kártya szövegblokkja ilyenkor elcsúszik egymáshoz képest. Mérve, hol hány sor a két cím (kártyaszélesség szerint): 510 pixel alatt mindkettő kettő; 510 és 650 között a SEOKLIKK egy, a Balaton kettő — ez az egyetlen eltérő sáv; 650 felett mindkettő egy. Ezért a kötött törés pontosan ebbe a sávba kerül. Kétoszlopos elrendezésnél a kártya (0,84 x viewport - 24) / 2, legfeljebb 528 pixel, tehát a sáv 1150 pixeltől kezdődik; egyoszloposnál a kártya a viewport 0,9-szerese, ott 580 és 713 pixel közt. A
UTÁN szóköz áll a forrásban, különben a rejtett állapotban összeragadna az "óra" és az "egy" szó. */ .case-br{display:none} @media (min-width:580px) and (max-width:713px){ .case-br{display:inline} } @media (min-width:1150px){ .case-br{display:inline} } /* ============================================================ 3.3 A záró blokk a VALÓDI képernyőaljáról jöjjön fel, mobilon ============================================================ A ragadós doboz 100svh magas, és overflow:clip vágja, ami alóla kilóg. Az svh a KIS viewporthoz van kötve (látszó eszköztár), a haladásjelző sárga sáv viszont position:fixed, tehát mindig a VALÓDI képernyőaljon ül. Amikor az eszköztár elbújik, a látható viewport magasabb lesz, a vágóél viszont a helyén marad: a kettő közé beékelődik egy sáv, és a felúszó blokk onnan bukkan elő, nem a képernyő aljáról. Mérve (620 svh / 720 px látható): 86 pixeles rés a vágóél és a sárga sáv között. Javítás: a doboz a NAGY viewporthoz igazodik (100lvh), tehát a vágóél a valódi képernyőalj alá kerül mindkét állapotban. A plusz magasságot ugyanakkora alsó belső margó nyeli el, így a tartalomdoboz mérete és a benne középre igazított szöveg pixelre ott marad, ahol eddig volt: 100lvh - (100lvh - 100svh) = 100svh. Ugyanez kell a záró blokk burkolójára is (inset:0, tehát ő is a megnőtt dobozhoz igazodna, és a blokk a felével lejjebb ülne), és a görgetőkonténerre, különben a ragadós doboz ennyivel korábban válna le a szekció végén. A felúszás indulótávját a szkript ezután valódi geometriából méri (a blokk teteje és a vágóél távolsága), nem a doboz magasságából: az aszimmetrikus belső margó mellett a régi képlet 18 pixellel a vágóél FÖLÉ tette volna a blokk tetejét, vagyis induláskor kilátszana a címsor pereme. Csökkentett mozgásnál a szekció statikus (a szkript inline stílust ír rá), ezért ott ez a blokk szándékosan nem érvényes. Ahol nincs lvh/svh, ott a mai viselkedés marad. */ @supports (height: 100lvh) and (height: 100svh){ @media (max-width:899px) and (prefers-reduced-motion:no-preference){ [data-pb-sticky]{ min-height:100lvh !important; padding-bottom:calc(clamp(36px, 7svh, 64px) + (100lvh - 100svh)) !important; } [data-mg-blockwrap]{ padding-bottom:calc(64px + (100lvh - 100svh)) !important; } [data-pb-wrap]{ height:calc(var(--vpx, 100svh) * 3.4 + (100lvh - 100svh)) !important; } } } /* ============================================================ 4. Mobil görgetés: a képernyő ne ugráljon ============================================================ Mindhárom alábbi szabály ugyanazt az okot kezeli: olyan réteg ül a görgő tartalom fölött, amit a böngészőnek minden képkockán újra kell rajzolnia. Desktopon ez elfér, mobil GPU n nem, és ilyenkor a görgetés elszakad az ujjtól. */ /* 4.1 A teljes képernyős szemcse réteg mobilon kikapcsol. position:fixed és inset:0, vagyis lefedi a teljes viewportot, ráadásul a tartalom FÖLÖTT (z-index:80). Ez megfogja a böngésző gyors, kompozitor szálon futó görgetését, a zajtextúra miatt pedig már egy pixelnyi elcsúszás is látható vibrálás. Telefonon 5% opacitásnál a réteg gyakorlatilag láthatatlan, tehát nincs mit veszíteni rajta. */ @media (max-width:899px){ div[aria-hidden="true"][style*="z-index:80"]{display:none !important} } /* Desktopon marad, de saját kompozit rétegre kerül, hogy ott se kényszerítse újrarajzolásra a mögötte görgő tartalmat. */ @media (min-width:900px){ div[aria-hidden="true"][style*="z-index:80"]{transform:translateZ(0)} } /* 4.2 A fixált nav mögötti elmosás mobilon kikapcsol. A backdrop-filter a mögötte GÖRGŐ tartalmat mintázza újra minden képkockán. Fixált elemre ez a legdrágább dolog, amit tenni lehet, és pont a képernyő tetején van, ahol a legjobban feltűnik. Egy majdnem átlátszatlan sáv telefonon vizuálisan ugyanaz az eredmény. */ @media (max-width:899px){ nav[style*="backdrop-filter"]{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(10,10,11,0.96) !important; } } /* 4.3 A haladásjelző sáv saját kompozit rétegre kerül. Fixált elem a képernyő alján, env(safe-area-inset-bottom) alapú pozícióval: iOS on ez az érték változik, ahogy az alsó eszköztár össze és széthúzódik. Saját rétegen ez nem érinti a tartalmat. */ @media (max-width:899px){ [data-pb-track]{transform:translateZ(0)} } /* 4.5 A sütisáv saját kompozit rétegre kerül. Fixált elem a képernyő alján, MINDEN oldalon ott van, amíg a látogató nem döntött, és 80 pixeles elmosású árnyéka van. Saját réteg nélkül a böngésző ezt az árnyékot a mögötte görgő tartalommal együtt rajzolja újra minden képkockán, ami pont a leggyakoribb közös ok az esettanulmány oldalakon is, ahol egyébként semmilyen görgetésvezérelt animáció nincs. */ .sk-consent__card{will-change:transform} @media (max-width:899px){ .sk-consent{transform:translateZ(0)} } /* 4.6 A fixált nav és a görgetésvezérelt szekciók teljes képernyős rétegei saját kompozit rétegre kerülnek. A háttérráccsal és a fénnyel a szkript minden képkockán ír (opacity, transform), a nav pedig végig a tartalom fölött ül: réteg nélkül mindhárom a görgő tartalommal együtt rajzolódik. A .pb-live osztályt a görgetésvezérlő teszi a szekcióra, amíg az látszik. Enélkül a rács és a fény a teljes viewportot lefedő rétegként ült volna a memóriában az oldal minden pontján, azokon a szakaszokon is, ahol a szekció már rég kigörgött a képernyőről. */ @media (max-width:899px){ nav[style*="position:fixed"]{transform:translateZ(0)} [data-pb-wrap].pb-live [data-pb-grid], [data-pb-wrap].pb-live [data-pb-glow]{will-change:transform, opacity} } /* 4.7 A haladásjelző izzása mobilon nem kell. A szkript minden képkockán 26 és 60 pixel elmosású box-shadow-t ír a sávra. Fixált elemen ez a legdrágább, amit képkockánként újra lehet rajzolni, egy 3 pixel magas sávon pedig telefonon gyakorlatilag nem is látszik. A színes kitöltés, vagyis maga a haladásjelzés, változatlan marad. */ @media (max-width:899px){ [data-pb-progress]{box-shadow:none !important} } /* 4.8 Sima görgetés mobilon ki. A scroll-behavior:smooth minden programozott görgetést animál: horgonylinkek, scrollIntoView, és visszalépéskor a pozíció visszaállítása. Telefonon ez úgy néz ki, mintha az oldal magától csúszkálna. A beágyazott