/* ═══════════════════════════════════════════════════════════════════════════ mysportdesignfactory.com — közös stíluslap VILÁGOS, RÉTEGZETT FELÜLET. A bolt korábban sötét volt (majdnem fekete alap, narancs kiemelés). Helyette most egy hűvös, enyhén kékes-szürke HÁTTÉRSÍK van, amiből fehér felületek emelkednek ki. A „3D világ" itt nem textúra és nem árnyékorgia, hanem három réteg: 1. háttérsík — var(--bg), a lap alja, ide semmi nem kerül közvetlenül 2. felület — var(--surface), a fehér kártyák, amik ELVÁLNAK a síktól 3. tartalom — szöveg és vezérlők a felületen A mélységet kétrétegű árnyék adja (szűk sötét kontaktárnyék + tág halvány szórt árnyék), NEM vastag keret. Kevés elem lebeg erősen: a fejléc, a toast és a mobil sáv. Ha minden lebegne, semmi nem lebegne. FONTOS SZABÁLYOK EBBEN A FÁJLBAN ───────────────────────────────── • A Google Fonts @import VISSZAKERÜLT. A projekt szabálya „nincs külső forrás" — de ez a kettő itt kivétel, mert a bolt CSP-je NÉVVEL engedi őket (public/.htaccess: style-src … fonts.googleapis.com; font-src … fonts.gstatic.com). Vagyis nem megkerülés, hanem a már meghozott döntés. A betűnevek megmaradtak a stack ELEJÉN, így ha a gépen HELYILEG telepítve van az Archivo / IBM Plex, azt kapjuk, ha nincs, a rendszerbetűre esünk vissza. Letöltés semmiképp nem történik. • A CSS-változók NEVE nem változott (--bg, --surface, --text, --muted, --border, --accent, --accent-d, --success, --font-*, --radius*, --max-w), mert az admin.php és az oldalak beágyazott stílusai ezekre épülnek. Csak az ÉRTÉKÜK új; az új változók MELLÉJÜK kerültek. • 2026-09-06 (3. fázis): öt ÚJ változó került be — --accent-szoveg, --toast-bg, --toast-szoveg, --fenyfolt-1, --fenyfolt-2 —, mind olyan helyre, ahol eddig BEÉGETETT szín állt. Az értékük betűre a régi, tehát a bolt megjelenése nem változott; a Megjelenés admin-lap (szabad paletta, docs/TARTALOMKEZELES_TERV.md 5/5) viszont már ezeket is tudja állítani. 2026-09-07 (3/b): a fejléc logó-ikonjának narancsa is ide került (`--logo-narancs`) — a 12 HTML fejléce megszűnt, a markup a `api/lib/sablonresz.php`-ban él. Ami beégetett maradt: a toast „Visszavonás" linkje (#9DBEFF/#C3D8FF). • Nincs prefers-color-scheme blokk. A megrendelő világos boltot kért, és a korábbi fájlban sem volt sötét mód — egy félkész sötét mód rosszabb lenne a semminél. ═══════════════════════════════════════════════════════════════════════════ */ /* A betűkészletek. Az @import-nak a fájl LEGELEJÉN kell állnia — a CSS szabálya szerint minden más szabály előtt —, különben a böngésző CSENDBEN eldobja, és rendszerbetűvel jelenik meg az egész bolt. Archivo — display: címek, gombok, számok. Széles, magabiztos. IBM Plex Sans — folyó szöveg. Kis méretben is jól olvasható. IBM Plex Mono — cikkszám, kód, mért érték. A display=swap: amíg a betű tölt, a rendszerbetű látszik, nem üres hely — lassú hálózaton is olvasható marad a lap. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* A BOLT SAJÁT SZÍNEI — admin › Megjelenés (3. fázis). docs/TARTALOMKEZELES_TERV.md 3.5, 5/5 (szabad paletta). MIÉRT @import ÉS MIÉRT ITT: a felülírt CSS-változókat minden lapra el kell juttatni. A tizenkét vevői `.html` fejléce ebben a körben más ügynök keze alatt van, a szkriptek pedig a `` előtt állnak — egy JS-ből beszúrt a lapot előbb gyári színnel rajzolná ki, aztán átfestené. Ez az egyetlen hely, ahol EGYSZER kell leírni, és villanás sincs. A SORREND NEM SZÁMÍT: a CSS az @import-ot a fájl elejére kényszeríti, tehát a felülírás az alábbi `:root` ELŐTT érkezne. Ezért a generált szabály nagyobb fajsúlyú szelektort használ (`:root:not([data-admin])`, 0,2,0), és nem a sorrendre épít. Ha a bolt gyári színekkel fut, a válasz üres. */ @import url('/api/megjelenes.css.php'); *, *::before, *::after { box-sizing: border-box; } /* A `hidden` ATTRIBÚTUM MINDIG ERŐSEBB A SAJÁT DISPLAY-SZABÁLYUNKNÁL. A böngésző alapértelmezése `[hidden] { display: none }`, de ezt bármelyik saját osztályunk felülírja, ha `display`-t állít — és a szerzői szabály erősebb a felhasználóügynökénél. Emiatt a `#designer-loading` (amin `.designer-loading { display: flex }` van) NEM tűnt el az `el.hidden = true` hatására: a tervező betöltött, a kézfogás lefutott, de a fehér betöltő réteg ott maradt fölötte — kívülről ez látszott „az iframe nem tölt be"-nek. Ugyanez érintett minden más `hidden` elemet is (üres állapotok, méretsáv, hibasáv). Ez az egy sor mindet rendbe teszi. */ [hidden] { display: none !important; } /* ─── PALETTA ───────────────────────────────────────────────────────────── A semleges színek NEM tiszta szürkék: mindegyik kap egy leheletnyi kék hangolást a kiemelőszín felé. A tiszta közép-szürke „meg nem gondoltnak" hat, a hangolt szürke választottnak. Minden szövegszín-párt a tesztek/kontraszt_ellenorzes.py számolt ki a WCAG relatív luminancia képletével — nem szemre lettek belőve. A legszűkebb átmenő pár 4,73:1 (--success a saját halvány foltján). */ :root { /* Rétegek */ --bg: #EBEEF4; /* háttérsík — hűvös, enyhén kékes szürke */ --surface: #FFFFFF; /* lebegő felület — kártya, fejléc, oldalsáv */ --surface-2: #F4F7FB; /* süllyesztett felület — input, halk sáv, well */ /* Vonalak */ --border: #D2D9E6; /* hajszálvonal, kártyakeret */ --border-eros: #78849B; /* hangsúlyos keret / hover — 3,77:1 fehéren */ /* Szöveg */ --text: #0E1420; /* fő szöveg — 18,4:1 fehéren */ --muted: #55607A; /* másodlagos szöveg — 6,3:1 fehéren, 5,4:1 --bg */ /* Kiemelés — mély kobalt. Sötétebb, mint egy szokásos link-kék, hogy FEHÉR felirattal is átmenjen a gombokon (login.html a .btn-login-ra fixen `color:#fff`-et ír, azt nem tudom módosítani). */ --accent: #1550D0; /* 6,80:1 fehéren */ --accent-d: #0E3AA0; /* lenyomott / demó sáv — 9,85:1 */ --accent-dd: #0A2B78; /* :active legalsó fok */ --accent-halk: rgba(21, 80, 208, .09); /* halvány folt: címke, chip */ --accent-vonal:rgba(21, 80, 208, .28); /* halvány folt kerete */ /* A FELIRAT A KIEMELÉSEN. Eddig beégetett `#FFFFFF` volt az elsődleges gombon és a felső sávon. Azért lett változó, mert a Megjelenés lap (3. fázis, 5/5: szabad paletta) engedi világosra állítani a kiemelést — és akkor a fehér felirat olvashatatlan lenne. Az ÉRTÉKE változatlan, tehát a mai bolt egyetlen képponttal sem néz ki másképp. */ --accent-szoveg: #FFFFFF; /* 6,80:1 a --accent-en */ /* A háttérsík két fényfoltja — a kiemelőszín áttetsző változata. A Megjelenés lap a kiemelőszínnel EGYÜTT írja felül őket, különben egy zöld boltban is kék maradna a háttér derengése. */ --fenyfolt-1: rgba(21, 80, 208, .055); --fenyfolt-2: rgba(14, 58, 160, .040); /* A FEJLÉC LOGÓ-IKONJÁNAK NARANCSA. 2026-09-07-ig (3/b) BEÉGETVE állt a tizenkét HTML fejlécének `stroke="#F0653A"` attribútumában — a bolt egyetlen olyan színe volt, amit a Megjelenés lap nem ért el. Az érték változatlan, tehát a bolt egyetlen képponttal sem néz ki másképp. A `stroke` attribútum a markupban MEGMARADT tartaléknak: a prezentációs attribútum gyengébb minden CSS-szabálynál, tehát az alábbi szabály felülírja — de ha a stíluslap nem töltődik be, a logó akkor sem lesz láthatatlan. */ --logo-narancs: #F0653A; /* Jelentés-színek */ --success: #0F7A4E; /* 5,37:1 fehéren, 4,73:1 a halvány foltján */ --danger: #B0341A; /* hiba — 6,26:1 fehéren */ /* Az üzenetsáv (toast) — szintén beégetett érték volt. Sötét felület, fehér felirattal: a lap fölött lebeg, ezért nem a --surface skálából való. Az érték változatlan. */ --toast-bg: #121A2B; --toast-szoveg: #FFFFFF; /* MIÉRT külön --danger: eddig a hibajelzés a kiemelőszínt használta. Az régen működött (a narancs hibának olvasódott), de kék kiemeléssel a „kék hibaüzenet" félrevezet. */ /* Betűk — CSAK helyi keresés, semmilyen letöltés. */ --font-display: 'Archivo', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-body: 'IBM Plex Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Kerekítés — SKÁLA, nem egyetlen érték. Apró vezérlő kicsit, kártya nagyot, lebegő sáv a legnagyobbat kap. Így a mérethierarchia a formában is látszik. */ --radius-sm: 8px; /* chip, thumbnail, kis input */ --radius: 12px; /* gomb, közepes doboz */ --radius-lg: 18px; /* kártya, panel */ --radius-xl: 22px; /* lebegő fejléc, mobil sáv */ /* Árnyék — szintén skála: alap / emelt / lebegő. Mindegyik KÉT rétegű: egy szűk, sötétebb kontaktárnyék (a tárgy „ül" valamin) és egy tág, halvány szórt árnyék (a tárgy távolsága a síktól). */ --arnyek-alap: 0 1px 2px rgba(14,20,32,.05), 0 1px 3px rgba(14,20,32,.04); --arnyek-emelt: 0 1px 2px rgba(14,20,32,.06), 0 10px 24px -8px rgba(14,20,32,.15); --arnyek-lebego: 0 1px 2px rgba(14,20,32,.06), 0 20px 44px -14px rgba(14,20,32,.24); /* Elrendezés */ --max-w: 1180px; /* Lebegő fejléc mérete — a ragadó oldalsávok ebből számolják a helyüket, hogy ne kelljen három helyen kézzel egyeztetni. */ --fejlec-magassag: 64px; --fejlec-hezag: 12px; --ragado-tav: calc(var(--fejlec-magassag) + var(--fejlec-hezag) + 16px); } html { color-scheme: light; scroll-behavior: smooth; /* Horgony-ugrásnál a lebegő fejléc ne takarja el a célt. */ scroll-padding-top: var(--ragado-tav); } body { margin: 0; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* A háttérsík nem egyenletes: két nagyon halvány, hideg fényfolt adja neki a mélységet. Az alfa szándékosan 6% alatt marad — ez nem gradiens-hős, hanem légtér a lebegő felületek mögött. */ background-color: var(--bg); background-image: radial-gradient(1100px 520px at 14% -10%, var(--fenyfolt-1), transparent 62%), radial-gradient(900px 460px at 92% 2%, var(--fenyfolt-2), transparent 60%); background-repeat: no-repeat; background-attachment: fixed; } /* ─── TIPOGRÁFIA ────────────────────────────────────────────────────────── Egy betűcsalád van (rendszerbetű), a hierarchiát MÉRET, VASTAGSÁG és BETŰKÖZ hordozza. Nagy címeknél enyhén negatív a betűköz (a nagy fokozatnál a rendszerbetű túl lazának hat), a nagybetűs címkéknél enyhén pozitív. */ h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.12; letter-spacing: -.022em; text-wrap: balance; color: var(--text); } h1 { letter-spacing: -.028em; } h4 { letter-spacing: -.012em; } p { text-wrap: pretty; } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--accent-d); } img { max-width: 100%; display: block; } /* Számok, amik oszlopban állnak, ne ugráljanak soronként. */ .mono, .price, .cart-count, .kosar-item-ar, .visszaig-rendsz, .osszesito-sor .val, input, table { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } /* ─── FÓKUSZ ────────────────────────────────────────────────────────────── A fókuszgyűrű AZONNAL jelenik meg (outline-ra nincs átmenet), és minden interaktív elemre vonatkozik. Elemszelektor + :focus-visible = 0,2,0 vagy 0,1,1 specificitás, ami erősebb a `.form-input { outline: none }` típusú 0,1,0-s szabályoknál — így egyetlen oldal beágyazott stílusa sem tudja némán kiütni. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ─── LAYOUT ──────────────────────────────────────────────────────────────── */ .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; } @media (max-width: 640px) { .wrap { padding: 0 20px; } } /* ─── DEMÓ SÁV ──────────────────────────────────────────────────────────── A lap legtetején fut, a lebegő fejléc FÖLÖTT. Világos háttéren a korábbi halvány narancs folt beleolvadt volna, ezért ez most TÖMÖR mély kék sáv fehér felirattal (9,85:1). Két dolgot csinál egyszerre: nem lehet véletlenül átnézni rajta, és sötét peremet ad a lap tetejének, amiből a fehér fejléc láthatóan kiemelkedik. */ .demo-bar { background: var(--accent-d); color: var(--accent-szoveg); border: none; text-align: center; padding: 9px 20px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .05em; } /* ─── LEBEGŐ FEJLÉC ─────────────────────────────────────────────────────── Nem ragad bele a lap tetejébe: elválik tőle, lekerekített, saját árnyéka van, és görgetéskor a tartalom ALATTA úszik el. ÁTTETSZŐSÉG ÉS TARTALÉK: alapból TÖMÖR fehér a háttér. Az áttetsző + backdrop-filter változatot csak az @supports blokk kapcsolja rá, tehát ha a böngésző nem ismeri a backdrop-filter-t, marad a tömör fehér, és a menü olvasható. (Fordítva — áttetsző alap + @supports-szal visszajavítva — a nem támogató böngésző olvashatatlan, átlátszó sávot kapna.) */ .site-header { position: sticky; top: var(--fejlec-hezag); z-index: 100; width: calc(100% - 32px); max-width: calc(var(--max-w) + 40px); margin: var(--fejlec-hezag) auto 0; display: flex; align-items: center; justify-content: space-between; gap: 28px; height: var(--fejlec-magassag); padding: 0 10px 0 20px; background: var(--surface); /* ← TARTALÉK: tömör, mindig olvasható */ border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--arnyek-lebego); transition: box-shadow .2s ease, background-color .2s ease; } @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .site-header { background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); } } /* Görgetett állapot. A JS ma NEM ad `scrolled` osztályt — ez a szabály előkészítés: ha egyszer ad, a fejléc magától tömörebbé és mélyebbé válik. Amíg nem ad, semmi nem történik, a sima sticky viselkedés marad. */ .site-header.scrolled { background: rgba(255, 255, 255, .92); box-shadow: var(--arnyek-lebego), 0 0 0 1px rgba(14,20,32,.04); } .site-header .logo { display: flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; } .site-header .logo:hover { color: var(--accent); } /* A logó-ikon vonala — a `--logo-narancs`-ból (admin › Megjelenés). A `sablonresz.php` `stroke="#F0653A"` attribútuma a tartalék; ez a szabály (0,2,1 fajsúly) mindig erősebb nála. */ .site-header .logo svg path { stroke: var(--logo-narancs); } .site-header nav { display: flex; align-items: center; gap: 4px; font-size: 14px; } .site-header nav a { color: var(--muted); padding: 7px 11px; border-radius: var(--radius-sm); transition: color .15s ease, background-color .15s ease; } .site-header nav a:hover { color: var(--text); background: var(--surface-2); } .site-header nav a.active { color: var(--accent); background: var(--accent-halk); font-weight: 600; } .site-header .header-actions { display: flex; align-items: center; gap: 10px; } .cart-btn { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 13px; font-size: 13px; color: var(--muted); background: var(--surface); cursor: pointer; transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; text-decoration: none; } .cart-btn:hover { border-color: var(--border-eros); color: var(--text); box-shadow: var(--arnyek-alap); } .cart-btn .cart-count { font-family: var(--font-mono); font-size: 13px; color: var(--text); font-weight: 600; } @media (max-width: 640px) { .site-header { width: calc(100% - 20px); padding: 0 8px 0 14px; gap: 12px; } .site-header nav { display: none; } } /* ─── LÁBLÉC ──────────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); padding: 40px; margin-top: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .site-footer .footer-left { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); } /* Korábban ez `color: var(--border)` volt — sötét háttéren épp csak látszott, világoson gyakorlatilag eltűnne, és bukná a kontrasztot. Építési bélyeg ide vagy oda, szöveg: a --muted az alsó határa. */ .site-footer .footer-right { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .06em; } .demo-badge { display: inline-block; background: var(--accent-halk); color: var(--accent); border: 1px solid var(--accent-vonal); border-radius: 6px; padding: 3px 8px; font-size: 11px; font-family: var(--font-mono); letter-spacing: .08em; font-weight: 500; } /* ─── GOMBOK ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius); padding: 13px 24px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: -.005em; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; border: 1px solid transparent; text-decoration: none; line-height: 1; } .btn-primary { background: var(--accent); color: var(--accent-szoveg); box-shadow: var(--arnyek-alap); } /* A hover SÖTÉTÍT, nem világosít: a fehér felirat így minden állapotban 4,5:1 fölött marad (6,80 → 9,85 → 12,4). A „megemelkedés" az árnyékból és 1px elmozdulásból jön, nem a szín kivilágosodásából. */ .btn-primary:hover { background: var(--accent-d); color: var(--accent-szoveg); box-shadow: var(--arnyek-emelt); transform: translateY(-1px); } .btn-primary:active { background: var(--accent-dd); box-shadow: var(--arnyek-alap); transform: translateY(0); } .btn-lg { padding: 16px 32px; font-size: 15px; border-radius: var(--radius-lg); } .btn-outline { background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: var(--arnyek-alap); } /* A `color` KIÍRÁSA nem fölösleges: az általános `a:hover { color: var(--accent-d) }` specificitása 0,1,1, a `.btn-outline`-é 0,1,0 — vagyis egy felirata hoverre magától kékre váltana. Itt 0,2,0-val rögzítjük a szándékot. */ .btn-outline:hover { color: var(--text); border-color: var(--border-eros); box-shadow: var(--arnyek-emelt); transform: translateY(-1px); } .btn-outline:active { transform: translateY(0); box-shadow: var(--arnyek-alap); } .btn-ghost { background: none; border-color: transparent; color: var(--muted); padding: 10px 16px; box-shadow: none; } .btn-ghost:hover { color: var(--text); background: var(--surface-2); } .btn:disabled, .btn[aria-busy="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none; } /* ─── KÁRTYÁK ───────────────────────────────────────────────────────────── Az alapkártya a síkon ÜL (alap árnyék). Csak akkor emelkedik, ha kattintható (lásd .product-card). Ez a különbségtétel a lényeg: az árnyék itt információ, nem díszítés. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--arnyek-alap); overflow: hidden; } /* ─── CSONTVÁZ (betöltés alatti helykitöltő) ────────────────────────────── A terméklisták (oldal_index.js, oldal_termekek.js) a válasz megérkezéséig `.card.skeleton` dobozokkal foglalják le a rács helyét, hogy a kész kártyák ne ugrasszák el a lapot. Eddig az osztálynak NEM volt definíciója, a kinézet inline stílusból és az oldalak aljára beágyazott `@keyframes pulse`-ból állt össze — két helyen, kétféleképp. Most egy helyen él: • a lüktetés (pulse) a dobozon — a régi viselkedés, változatlan ütemmel; • egy halvány, balról jobbra futó fénycsík a ::after-en — a paletta halk kiemelőszínéből (--accent-halk), hogy a fehér kártyán is látsszon, de ne kiabáljon. A csík a pseudo-elemen fut, így az inline `animation-delay` (a kártyák lépcsőzött indítása) nem üti felül; a delay-t `inherit`-tel örökli, hogy a csík és a lüktetés együtt lépjen. A `prefers-reduced-motion` blokk mindkét animációt leállítja — ott a doboz álló, üres FEHÉR kártya (az opacity az animáció nélkül az alapértékére, 1-re áll vissza; az ellenőrzés 2026-09-05-én mérte). */ .skeleton { position: relative; overflow: hidden; animation: pulse 1.5s ease-in-out infinite; } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--accent-halk) 50%, transparent 70%); transform: translateX(-100%); animation: skeleton-csik 1.6s ease-in-out infinite; animation-delay: inherit; } @keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: .7; } } @keyframes skeleton-csik { to { transform: translateX(100%); } } /* ─── ÉRTESÍTÉS / TOAST ─────────────────────────────────────────────────── A toast szándékosan SÖTÉT a világos lapon. Egy ideiglenes, a felület fölé úszó közlés — ha fehér lenne, összeolvadna a kártyákkal, és nem lehetne megkülönböztetni, hogy ez most a lap része-e vagy egy pillanatnyi üzenet. */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--toast-bg); border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius); box-shadow: var(--arnyek-lebego); padding: 12px 20px; font-size: 14px; color: var(--toast-szoveg); white-space: nowrap; z-index: 999; opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; } .toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .toast .toast-undo { margin-left: 12px; color: #9DBEFF; /* világos kék a sötét toaston — 7,4:1 */ cursor: pointer; font-weight: 600; background: none; border: none; font: inherit; } .toast .toast-undo:hover { color: #C3D8FF; } /* ─── TERMÉKLISTA RÁCS ────────────────────────────────────────────────────── */ .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1023px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } } /* A terméklap-kártya kattintható, ezért EMELKEDIK hoverre. A `.card` osztállyal együtt kerül ki (`class="product-card card"`), a felületet és a keretet onnan kapja — itt csak az elrendezés és a mozgás van. */ .product-card { display: flex; flex-direction: column; cursor: pointer; text-decoration: none; color: var(--text); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* Ugyanaz a csapda: a termékkártya egy , tehát az `a:hover` (0,1,1) erősebb a `.product-card` (0,1,0) színénél — a kártya teljes szövege kékre váltana hoverre. A kártya emelkedik, nem színt vált. */ .product-card:hover { color: var(--text); border-color: var(--accent-vonal); box-shadow: var(--arnyek-emelt); transform: translateY(-3px); } .product-card:active { transform: translateY(-1px); } /* A képmező SÜLLYESZTETT: a fehér kártyán belül a háttérsík színét kapja, így a termékkép egy mélyedésben ül, nem a kártya síkján lebeg. */ .product-card-image { aspect-ratio: 4/3; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .product-card-image img { width: 100%; height: 100%; object-fit: contain; } .product-card-image .img-placeholder { width: 80px; height: 100px; opacity: .18; } .product-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .product-card-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.012em; } .product-card-meta { font-size: 13px; color: var(--muted); } .product-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; } .price { font-family: var(--font-mono); font-size: 16px; color: var(--text); font-weight: 600; } .price-note { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ─── TERMÉKOLDAL ─────────────────────────────────────────────────────────── */ .product-layout { display: grid; grid-template-columns: 1fr 420px; gap: 56px; padding: 56px 0 80px; align-items: start; } @media (max-width: 1023px) { .product-layout { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 56px; } } .product-gallery { position: sticky; top: var(--ragado-tav); } .gallery-main { aspect-ratio: 4/3; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--arnyek-emelt); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px; } .gallery-main img { width: 100%; height: 100%; object-fit: contain; } .gallery-thumbs { display: flex; gap: 8px; } .gallery-thumb { width: 60px; height: 60px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease, box-shadow .15s ease; padding: 0; } .gallery-thumb:hover { border-color: var(--border-eros); box-shadow: var(--arnyek-alap); } .gallery-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-halk); } .gallery-thumb img { width: 100%; height: 100%; object-fit: contain; } /* MODELLEN VISELT FOTÓ A GALÉRIÁBAN (bolt 1.18). A címke a bélyegkép ALJÁN ül, mert a mez sziluettje fölül a legsűrűbb — ott takarna. A `position: relative` csak a címkés bélyegre kerül: a tervezői nézetek egy pixelt sem mozdulnak. */ .gallery-thumb-cimkes { position: relative; } .gallery-thumb-cimke { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(17, 17, 17, .72); color: #FFFFFF; font-size: 8px; line-height: 1.5; letter-spacing: .02em; text-align: center; text-transform: uppercase; pointer-events: none; /* a kattintás a gombé, nem a feliraté */ } .product-info { display: flex; flex-direction: column; gap: 20px; } .product-title { font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.13; letter-spacing: -.028em; text-wrap: balance; } .size-grid { display: flex; flex-wrap: wrap; gap: 8px; } .size-chip { padding: 7px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); box-shadow: var(--arnyek-alap); } .size-chip.unavailable { opacity: .45; background: var(--surface-2); box-shadow: none; cursor: not-allowed; } /* ─── IFRAME WRAPPER (3D TERVEZŐ) ───────────────────────────────────────── Ez az egyetlen elem, ami a boltban tényleg 3D-t mutat, ezért a legmagasabb rétegre emeljük: a felület fölé, saját erős árnyékkal. */ .designer-wrap { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--arnyek-emelt); overflow: hidden; min-height: 600px; display: flex; flex-direction: column; } .designer-wrap iframe { border: none; width: 100%; flex: 1; min-height: 600px; background: var(--surface); } .designer-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--surface); color: var(--muted); font-size: 14px; z-index: 10; } .designer-loading .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* BETÖLTŐ LOGÓ (termek.html, `#designer-loading`). A `.spinner` szabály marad, mert a diagnosztikai réteg és a régi lapok hivatkozhatnak rá. 2026-09-06: a 100×100 px-es GIF-et (120-ra nagyítva, ezért PIXELES) a tervező éles, VEKTOROS betöltője váltotta — ugyanaz az inline SVG, ami a tervező buildjében fut. A rajz maga STATIKUS: minden mozgás itt, a lap CSS-ében van, mert az -be zárt SVG nem látná a `prefers-reduced-motion` beállítást, inline SVG + lap-CSS viszont igen. Egyetlen SMIL sincs benne, így a mozgáscsökkentés EGY médialekérdezéssel az egészet leállítja. 2026-09-06 este, megrendelői visszajelzés — KÉT változás: (a) MEZ-FORMA: a rajz addig lekerekített sötét TÉGLALAP panel volt; most a mez sziluettje az alakzat, a háttér átlátszó. Ezért a vetett árnyék nem `box-shadow` (az a téglalapot rajzolná), hanem `drop-shadow` szűrő: az az alfacsatornát követi, tehát pontosan a mez formáját. (b) A MOZGÁS MARAD: a megrendelő a vágás kérésekor külön kiemelte, hogy az animáció jó — a fénypászta, a lüktetés és a csillanások mechanikája változatlan. Panel nélkül a kontrasztot a sziluetten belüli sötét kitöltés és a vastagabb, fényesebb kontúr adja. A méret a doboz kisebbik oldalához kötött (`vmin`), felül 172 px-nél megáll: a betöltő jelzés legyen, ne plakát. A „Tervező betöltése…" felirat marad — a boltban ez mondja meg, mire vár a látogató. */ .designer-loading .bmSvg { width: clamp(126px, 32vmin, 172px); height: auto; display: block; filter: drop-shadow(0 8px 18px rgba(10, 20, 45, .30)) drop-shadow(0 1px 3px rgba(10, 20, 45, .22)); } /* A mozgás MECHANIKÁJA változatlan (a megrendelő szerint jó); csak a pászta útja rövidült a mez-formára vágott, szűkebb vászonhoz. Fénypászta: a maszk sávja végigfut a hálón, és csak a VONALAKAT világítja meg — ettől „épül fel" a mez, nem a panel villog. 45 → 308 px: a sáv alsó éle a mez vállánál lép be, a felső éle az aljánál lép ki; a régi 0 → 336 px-ből a mez fölött és alatt holtidő volt. */ .designer-loading .bmBand { animation: bmBand 2.8s linear infinite; } @keyframes bmBand { from { transform: translateY(45px); } to { transform: translateY(308px); } } /* lassú lüktetés: a mez belsejébe vágott fényudvarok. `transform-box: fill-box` + `transform-origin: center` — így az ellipszis a SAJÁT középpontja körül nagyít; a régi view-box + px-origó a szűkített viewBox-szal félrecsúszna. */ .designer-loading .bmAura { transform-box: fill-box; transform-origin: center; animation: bmAura 5.2s ease-in-out infinite; } .designer-loading .bmAura2 { animation-duration: 6.4s; animation-delay: -2.1s; } @keyframes bmAura { 0%, 100% { opacity: .72; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } } /* csomópont-csillanások, eltolt fázissal */ .designer-loading .bmGlint { animation: bmGlint 2.9s ease-in-out infinite; } .designer-loading .bmG1 { animation-delay: -.72s; } .designer-loading .bmG2 { animation-delay: -1.45s; } .designer-loading .bmG3 { animation-delay: -2.17s; } @keyframes bmGlint { 0%, 100% { opacity: .18; } 45% { opacity: 1; } 70% { opacity: .30; } } /* MOZGÁSCSÖKKENTÉS: minden áll, a pásztázó réteg eltűnik (a maszkja miatt amúgy is csak egy sávot mutatna), a csillanások fix fényen maradnak. A „Tervező betöltése…" felirat itt is ott van, tehát mozgás nélkül is látszik, hogy a lap dolgozik. FIGYELEM: ha a látogató gépén a RENDSZERSZINTŰ mozgáscsökkentés be van kapcsolva, a betöltő SZÁNDÉKOSAN áll — nem hiba. */ @media (prefers-reduced-motion: reduce) { .designer-loading .bmBand, .designer-loading .bmAura, .designer-loading .bmGlint { animation: none; } .designer-loading .bmSweep { display: none; } .designer-loading .bmGlint { opacity: .85; } } .designer-status { display: flex; align-items: center; gap: 8px; font-size: 12px; font-family: var(--font-mono); color: var(--muted); padding: 8px 16px; border-top: 1px solid var(--border); background: var(--surface-2); } .designer-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-eros); } .designer-status.connected .dot { background: var(--success); } .designer-status.error .dot { background: var(--danger); } /* ─── KOSÁR ───────────────────────────────────────────────────────────────── */ .kosar-empty { text-align: center; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--muted); } .kosar-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--border); } .kosar-item-kep { width: 80px; height: 80px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; } .kosar-item-kep img { width: 100%; height: 100%; object-fit: contain; } .kosar-item-info { display: flex; flex-direction: column; gap: 6px; } .kosar-item-nev { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.012em; } .kosar-item-meta { font-size: 13px; color: var(--muted); } .kosar-sorok { margin-top: 8px; } .kosar-sor { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 13px; color: var(--muted); } .kosar-sor .meret-chip { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; background: var(--surface-2); border: 1px solid var(--border); padding: 2px 7px; border-radius: 5px; color: var(--text); } .kosar-item-ar { font-family: var(--font-mono); font-size: 16px; font-weight: 600; white-space: nowrap; } /* Összesítő oldalsáv — ez a lap egyik döntési pontja, ezért EMELT árnyékot kap, míg a mellette futó tételsorok a síkon maradnak. */ .osszesito { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--arnyek-emelt); padding: 24px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: var(--ragado-tav); } .osszesito-sor { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; } .osszesito-sor.total { border-top: 1px solid var(--border); padding-top: 14px; font-weight: 700; font-size: 17px; } .osszesito-sor .label { color: var(--muted); } .osszesito-sor .val { font-family: var(--font-mono); } .osszesito-note { font-size: 11px; color: var(--muted); text-align: center; } /* ─── PÉNZTÁR ─────────────────────────────────────────────────────────────── */ .penztar-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; padding: 40px 0 80px; align-items: start; } @media (max-width: 900px) { .penztar-layout { grid-template-columns: 1fr; } .penztar-osszesito { order: -1; } } .form-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; } .form-label { font-size: 13px; font-weight: 600; color: var(--text); } /* A beviteli mező SÜLLYESZTETT (halkabb felület + belső árnyék), a gombok EMELTEK. Így ránézésre látszik, melyik elem fogad és melyik cselekszik. */ .form-input { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--font-body); font-size: 15px; color: var(--text); width: 100%; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; box-shadow: inset 0 1px 2px rgba(14,20,32,.05); } .form-input:hover { border-color: var(--border-eros); } .form-input:focus { border-color: var(--accent); background: var(--surface); box-shadow: inset 0 1px 2px rgba(14,20,32,.04), 0 0 0 3px var(--accent-halk); } .form-input.error { border-color: var(--danger); } .form-input::placeholder { color: var(--muted); } .form-hint { font-size: 12px; color: var(--muted); } .form-hint.error-msg { color: var(--danger); font-weight: 500; } .section-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; } /* Demo kártya doboz */ .demo-card-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--arnyek-alap); padding: 20px; display: flex; flex-direction: column; gap: 14px; } .demo-card-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-halk); border: 1px solid var(--accent-vonal); border-radius: var(--radius-sm); padding: 6px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: .08em; } .demo-card-fields { display: flex; flex-direction: column; gap: 10px; } .demo-card-field { display: flex; flex-direction: column; gap: 4px; } .demo-card-field label { font-size: 11px; color: var(--muted); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; } .demo-card-field input { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-mono); font-size: 15px; color: var(--text); width: 100%; pointer-events: none; user-select: none; box-shadow: inset 0 1px 2px rgba(14,20,32,.05); } .demo-card-explain { font-size: 12px; color: var(--muted); line-height: 1.5; } /* ─── VISSZAIGAZOLÁS ──────────────────────────────────────────────────────── */ .visszaig-hero { text-align: center; padding: 64px 20px 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .visszaig-icon { width: 64px; height: 64px; background: rgba(15,122,78,.10); border: 1px solid rgba(15,122,78,.28); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--success); box-shadow: var(--arnyek-alap); } .visszaig-rendsz { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--text); letter-spacing: .04em; } .visszaig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 640px; margin: 0 auto; } @media (max-width: 640px) { .visszaig-grid { grid-template-columns: 1fr; } } .visszaig-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--arnyek-alap); padding: 18px; display: flex; flex-direction: column; gap: 4px; text-align: left; } .visszaig-cell .cimke { font-size: 11px; font-family: var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .visszaig-cell .ertek { font-size: 16px; font-weight: 600; color: var(--text); } /* ─── ÜRES ÁLLAPOTOK ──────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 72px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); } .empty-state h3 { font-size: 20px; color: var(--text); margin-bottom: 4px; } .empty-state p { max-width: 40ch; margin: 0; } /* ─── HIBAJELZŐK ──────────────────────────────────────────────────────────── */ .api-error-bar { background: rgba(176,52,26,.07); border: 1px solid rgba(176,52,26,.24); border-radius: var(--radius); padding: 11px 16px; font-size: 13px; color: var(--danger); margin-bottom: 20px; } /* ─── UTILITY ─────────────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .divider { height: 1px; background: var(--border); margin: 0; border: none; } .label-accent { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 500; } /* ═══════════════════════════════════════════════════════════════════════════ BEÉGETETT SÖTÉT ÉRTÉKEK SEMLEGESÍTÉSE Az oldalak -jében lévő beágyazott stílusok néhány színt fixen írnak, nem változóból. Azokat a fájlokat MÁS dolgozza most, ezért nem nyúlok hozzájuk — de ha érintetlenül hagyom őket, a világos lapon vagy olvashatatlan, vagy hangosan ütő foltok maradnak. A beágyazott stílus a -ünk UTÁN jön, tehát azonos specificitásnál ő nyer. Ezért — és CSAK ezért — kap ez a néhány szabály `body` előtagot: 0,1,1 legyőzi a 0,1,0-t. Semmi mást nem írok felül ilyen módon, és mindegyik szabály csak SZÍNT állít, elrendezést nem — így ha a másik ügynök átírja a szerkezetet, ez akkor sem szól bele. ═══════════════════════════════════════════════════════════════════════════ */ /* index.html: `.trust-bar { background: #0E0F12 }` — beégetett majdnem fekete sáv. A benne lévő szöveg var(--text)-et használ, ami most sötét: fekete szöveg fekete sávon. Ez a sáv most halk, süllyesztett szalag lesz. */ body .trust-bar { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* index.html `.hero-visual`: ITT NINCS TÖBBÉ HÁTTÉR-FELÜLÍRÁS. Ez a szabály akkor született, amikor a hero-doboz háttere egy beégetett NARANCS radiális folt volt (rgba(240,101,58,.16)) — azt kellett hideg fényudvarra cserélni. Azóta a hero saját szabálya tömör SÖTÉT panelt ír (#070C18), és a `body .hero-visual` (0,1,1) csendben legyőzte (0,1,0): a sötét panel világos maradt, 390 px-en pedig világos sáv látszott a kép fölött és alatt (a kép nem tölti ki a vásznat). A javítás nem újabb felülírás, hanem a MEGSZŰNT indok törlése — a hero háttere a heroé. */ /* index.html: a hős alatti indexminták a --surface-re épülnek; a hőskártyák emelt árnyékot kapnak, hogy a lap teteje is rétegzett legyen. */ body .how-card { box-shadow: var(--arnyek-alap); transition: box-shadow .18s ease, transform .18s ease; } body .how-card:hover { box-shadow: var(--arnyek-emelt); transform: translateY(-2px); } /* 404.html / 500.html: `.err-code { color: var(--border) }` — a hibakód 80px-es nagy szöveg, tehát 3:1 a küszöbe; a hajszálvonal-szürke ezt bukja. A --border-eros pont erre való (3,47:1). */ body .err-code { color: var(--border-eros); } /* rendelesek.html: az állapotcímkék narancs/sárga rgba foltokat használnak beégetve, `color: var(--accent)`-tel. Kék kiemelés mellett a „beérkezett" narancs folton kék betű lenne. Mindegyiket a saját jelentés-színére állítjuk, olvasható értékekkel. */ body .allapot-chip.beerkezett { background: var(--accent-halk); border: 1px solid var(--accent-vonal); color: var(--accent); } body .allapot-chip.keszul { background: rgba(138,90,0,.10); border: 1px solid rgba(138,90,0,.26); color: #8A5A00; /* 5,93:1 fehéren */ } body .allapot-chip.kesz { background: rgba(15,122,78,.10); border: 1px solid rgba(15,122,78,.26); color: var(--success); } body .allapot-chip.torolt { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); } /* login.html: `.login-error` narancs foltot és `var(--accent)` betűt kap beégetve — hibaüzenet a kiemelőszínben. Piros a helye. */ body .login-error { background: rgba(176,52,26,.08); border: 1px solid rgba(176,52,26,.30); color: var(--danger); } /* login.html: `input:focus { border-color: var(--accent) }` mellé itt jön a halvány gyűrű, hogy a belépőkártya mezője ugyanúgy viselkedjen, mint a bolt többi mezője. */ body .login-card input:focus { box-shadow: 0 0 0 3px var(--accent-halk); } /* megrendeles.html / kosar.html / penztar.html / termek.html: a beágyazott dobozok mind `background: var(--surface); border: 1px solid var(--border)` párost használnak — ezek a változóval már világosak lettek, csak az árnyék hiányzik, hogy a síkról elemelkedjenek. */ body .section-box, body .trust-box, body .rend-sor, body .login-card, body .designer-placeholder-msg { box-shadow: var(--arnyek-alap); } /* ─── MOBIL ─────────────────────────────────────────────────────────────── */ /* 44px minimum érintési célméretek minden interaktív elemen */ @media (max-width: 640px) { .btn { min-height: 44px; padding: 12px 20px; } .gallery-thumb { width: 52px; height: 52px; } .cart-btn { min-width: 44px; min-height: 44px; } .header-actions a, .header-actions button { min-height: 44px; } .kosar-item-torl { min-width: 44px; min-height: 44px; } /* Ez korábban csupasz `nav a` volt (0,0,2), a fejléc menüjét pedig a `.site-header nav a` (0,1,2) állítja — vagyis ez a 44px-es érintési célméret SOSEM lépett életbe, némán alulmaradt. Azonos specificitásra hozva és később állva már nyer. */ .site-header nav a { padding: 10px 8px; min-height: 44px; display: inline-flex; align-items: center; } .form-input { padding: 14px 14px; font-size: 16px; } .product-title { font-size: 24px; } } /* Lebegő kosár sáv mobilon (kosár.html és termék oldalon) */ .mobile-bar { display: none; } @media (max-width: 640px) { .mobile-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--surface); /* ← TARTALÉK backdrop-filter nélkül */ border-top: 1px solid var(--border); box-shadow: 0 -1px 2px rgba(14,20,32,.06), 0 -14px 34px -12px rgba(14,20,32,.20); padding: 12px 20px; padding-bottom: max(12px, env(safe-area-inset-bottom)); gap: 12px; align-items: center; } .mobile-bar .btn { flex: 1; justify-content: center; } /* Helyet ad a fixed sávnak */ .main-content-padded { padding-bottom: 88px; } } @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { @media (max-width: 640px) { .mobile-bar { background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); } } } /* ─── TERVEZŐ — MINDIG TELJES KÉPERNYŐS OVERLAY ──────────────────────────── */ /* A tervező minden ablakméretben a böngésző teljes területét foglalja el. position:fixed mindig kiveszi a dokumentum-flow-ból, a viewport-hoz igazodik. A bezárás gomb visszaadja a termékoldalt. */ #designer-section:not([hidden]) { position: fixed; inset: 0; /* A termékoldal `.designer-section { margin-top: 16px }` szabálya (termek.html fejléc-stílusa) a fixed dobozon is él: `top:0` MELLETT 16 px-szel lejjebb tolta a teljes képernyős réteget, és a lap háttere kilátszott a tervező fölött egy csíkban. Teljes képernyőn margó nem kell. */ margin: 0; z-index: 300; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; } #designer-section:not([hidden]) .designer-wrap { flex: 1; min-height: 0; border: none; border-radius: 0; box-shadow: none; } #designer-section:not([hidden]) .designer-wrap iframe { height: 100%; } /* ─── BOLT-SÁV A TERVEZŐ FÖLÖTT + VISSZA GOMB ─────────────────────────────── */ /* MIÉRT SÁV, ÉS NEM LEBEGŐ GOMB A SAROKBAN: a tervező saját fejléce teljes szélességű — a bal szélén a terv címe, a jobb szélén a ⋯ menü és a narancs MEGRENDELÉS gomb —, a bal alsó sarkot az AI-buborék, a jobb alsót a verziójelvény, a két oldalt a szerszám-sínek foglalják. Nincs olyan sarok, ahová a bolt gombja ütközés nélkül lebeghetne. A 2.33.0 ellenőrzésekor a jobb felső sarokba tett „Bezárás" (1330–1428 × 12–47) pont a MEGRENDELÉS gombra (1285–1424 × 11–45) feküdt rá: a képen csak „MEG…" látszott, a vevő nem tudott megrendelni, csak bezárni. Ezért a burkoló kapott saját, vékony sávot az iframe FÖLÖTT: ez a bolt fejléce, amíg a tervező nyitva van (a `site-header`-t a JS elrejti). Az iframe alatta 100 %-os szélességben — az átfedés így nem „kicsi", hanem szerkezetileg lehetetlen. Ára ~44 px magasság, ami mobilon is elfér. */ .designer-boltsav { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 6px 14px; /* A bevágás (notch) és a lekerekített sarkok elől a sáv húzódik el, nem a gomb — a gomb már a sávon belül ül. */ padding-top: max(6px, env(safe-area-inset-top)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } /* A bolt neve a sáv jobb szélén: ez mondja meg a vevőnek, hogy a teljes képernyős tervező még mindig a webáruházon belül van. Halk, másodlagos — nem versenyez a tervező fejlécével. Szűk kijelzőn kimarad, hogy a gomb szövege soha ne törjön. */ .designer-boltsav-bolt { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 480px) { .designer-boltsav-bolt { display: none; } } .designer-bezaro { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 14px; min-height: 32px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--text); cursor: pointer; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .designer-bezaro:hover { background: var(--surface-2); border-color: var(--border-eros); } /* Érintési célméret mobilon — a fenti 640px-es blokk `.btn`-re szól, ez a gomb nem `.btn`, ezért itt kapja meg a 44px-et. */ @media (max-width: 640px) { .designer-bezaro { min-height: 44px; padding: 10px 14px; } } /* ═══════════════════════════════════════════════════════════════════════════ MOZGÁSCSÖKKENTÉS NEM opcionális. Aki `prefers-reduced-motion: reduce`-ot állít, annál minden átmenet és animáció leáll. A `.01ms` (és nem `0s`) azért kell, mert az `animationend`/`transitionend` eseményre épülő JS különben soha nem sülne el. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } /* A `body .how-card:hover` szabály specificitása 0,2,1 — egy sima `.how-card:hover` (0,2,0) NEM tudná visszavonni a transform-ot, csak némán alulmaradna. Ezért itt is `body` előtaggal szerepel. */ .product-card:hover, .btn-primary:hover, .btn-outline:hover, body .how-card:hover { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ LÁBLÉC-MENÜ — három oszlop (tartalomkezelés 2. fázis) docs/TARTALOMKEZELES_TERV.md 2.12 (a menüjavaslat), 5/2 (a megrendelő döntése: a fejléc marad, az új oldalak CSAK a láblécbe kerülnek) MIÉRT NEM KELLETT A `.site-footer`-HEZ HOZZÁNYÚLNI: az már ma is `display:flex` + `flex-wrap:wrap`. Két gyerek, mindkettő `flex-basis:100%`, tehát egymás ALÁ kerülnek — a menü fölülre, a mai bolt-név/verzió sor alá. A régi szabályok (`.footer-left`, `.footer-right`) érintetlenek maradnak, így a lapok alsó sora betűre ugyanaz, mint eddig. A MENÜT A `tartalom.js` ÉPÍTI ÚJRA az adatbázisból, de a HTML-ben ott áll a gyári változat TARTALÉKNAK. Ez a CSS mindkettőre ugyanúgy vonatkozik — ezért nincs „betöltés alatti" külön állapot, és nem villan a lap. ═══════════════════════════════════════════════════════════════════════════ */ .site-footer .footer-menu { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; } .site-footer .footer-also { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } /* 640 px alatt a három hasáb egymás alá kerül. Nem kettőre bontunk: egy 4 elemes lista két hasábban keskeny telefonon félbe töri a hosszabb feliratokat („Visszaküldés"), és a lábléc amúgy sem verseng a helyért. */ @media (max-width: 640px) { .site-footer .footer-menu { grid-template-columns: 1fr; gap: 22px; } } .site-footer .footer-oszlop-cim { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin: 0 0 12px; } .site-footer .footer-oszlop-cim a { color: inherit; text-decoration: none; } .site-footer .footer-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .site-footer .footer-menu a { font-size: 13.5px; color: var(--muted); text-decoration: none; } .site-footer .footer-menu a:hover, .site-footer .footer-menu a:focus-visible { color: var(--accent); } /* ══════════════════════════════════════════════════════════════════════════ TERV ÁTVITELE MÁSIK TERMÉKRE — a közös modális (assets/terv_migralas.js) MIÉRT ITT, ÉS NEM A LAPOK