/* LON Hub — megosztott stíluslap. A publikus /start oldal ÉS az admin élő előnézet is ezt tölti be, hogy a kettő pontosan ugyanazt renderelje. */ /* ── Színek: alapból VILÁGOS, csak akkor vált sötétre, ha a látogató eszköze azt kéri (prefers-color-scheme). Az admin explicit 'dark'/'light' választása a attribútumon keresztül felülbírálja a rendszerbeállítást is. ── */ :root { --hub-bg: #EDF0EA; --hub-ink: #15302A; --hub-secondary: rgba(21, 48, 42, 0.62); --hub-accent: #2C5F4F; --hub-frame-border: rgba(21, 48, 42, 0.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hub-bg: #0A1512; --hub-ink: #F2F5F1; --hub-secondary: #A3B2AA; --hub-accent: #D9C7A3; --hub-frame-border: rgba(242, 245, 241, 0.12); } } :root[data-theme="dark"] { --hub-bg: #0A1512; --hub-ink: #F2F5F1; --hub-secondary: #A3B2AA; --hub-accent: #D9C7A3; --hub-frame-border: rgba(242, 245, 241, 0.12); } :root[data-theme="light"] { --hub-bg: #EDF0EA; --hub-ink: #15302A; --hub-secondary: rgba(21, 48, 42, 0.62); --hub-accent: #2C5F4F; --hub-frame-border: rgba(21, 48, 42, 0.14); } /* ── Reset ── */ .hub-page, .hub-page *, .hub-page *::before, .hub-page *::after { box-sizing: border-box; } /* html/body maguk is a téma hátterét kapják, különben mobil rugalmas görgetésnél (overscroll bounce) vagy a safe-area sávokban a böngésző natív fehér alapja villan ki a .hub-page divje mögül. */ html:has(.hub-page), body:has(.hub-page) { background: var(--hub-bg); } .hub-page { background: var(--hub-bg); color: var(--hub-ink); min-height: 100vh; padding: 36px 20px 60px; font-family: 'Karla', sans-serif; transition: background 0.3s ease, color 0.3s ease; overflow-x: hidden; } /* ── Fejléc: logó balra, mellette a szövegblokk, mindkettő balra zárva (nem középre — a margin:auto korábban a grid bal szélétől eltérő behúzást okozott asztali nézetben). ── */ .hub-header { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 0 0 28px; } .hub-header-logo { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } .hub-header-text { min-width: 0; } .hub-eyebrow { color: var(--hub-accent); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; } .hub-headline { font-family: 'Karla', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--hub-ink); margin: 6px 0 0; } .hub-subheadline { font-size: 13px; line-height: 1.4; color: var(--hub-secondary); margin: 8px 0 0; max-width: 420px; } @media (min-width: 900px) { .hub-header { gap: 20px; } .hub-header-logo { width: 60px; height: 60px; } .hub-eyebrow { font-size: 13px; letter-spacing: 0.16em; } .hub-headline { font-size: 36px; line-height: 1.1; margin-top: 10px; } .hub-subheadline { font-size: 15px; margin-top: 12px; } } /* ── Rács: container query alapú, mert az admin élő előnézet szűkebb konténerben fut, nem a teljes viewportban. ── */ .hub-grid-container { container-type: inline-size; container-name: hub-grid; max-width: 1900px; margin: 0 auto; } .hub-grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 80px; gap: 12px; } /* Két tiszta rács-tier: mobil 4 oszlop (<900px), asztali 12 oszlop (>=900px). A kézi elhelyezés (hub_tile_layouts) is ehhez a két oszlopszámhoz igazodik, ezért nincs köztes (korábbi 6 oszlopos) tier. */ @container hub-grid (min-width: 900px) { .hub-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 52px; gap: 16px; } } /* ── Méret tokenek: mobil → közepes → asztali span-ok. Elv: mobilon az XL+T pár pontosan kiadja a sor szélességét, az L és a W mindig önálló, teljes szélességű sáv (nem kell hozzá párja), az M/S pár pedig egymással tölti ki a maradék sort. Közepes törésponton az XL/L/T/W mind önálló teljes szélességű sáv, csak M/S alkot párt. Asztalin az XL+L pár tölti ki az első sávot, a T/M/S hármasa a másodikat, a W pedig önálló teljes szélességű sáv. Lásd includes/hub.php HUB_SIZE_RULE/ HUB_SIZE_CYCLE — a token-sorrend ehhez van hangolva, hogy grid-auto-flow: dense ne hagyjon lyukat a jelenlegi (10 elemes) csempeszámnál. Ha a csempék száma jelentősen változik, ellenőrizd újra élőben mind a 3 töréspontot. ── */ .hub-tile[data-size="XL"] { grid-column: span 2; grid-row: span 4; } .hub-tile[data-size="T"] { grid-column: span 2; grid-row: span 4; } .hub-tile[data-size="L"] { grid-column: span 4; grid-row: span 3; } .hub-tile[data-size="M"] { grid-column: span 2; grid-row: span 3; } .hub-tile[data-size="S"] { grid-column: span 2; grid-row: span 3; } .hub-tile[data-size="W"] { grid-column: span 4; grid-row: span 2; } @container hub-grid (min-width: 900px) { .hub-tile[data-size="XL"] { grid-column: span 6; grid-row: span 6; } .hub-tile[data-size="T"] { grid-column: span 4; grid-row: span 3; } .hub-tile[data-size="L"] { grid-column: span 6; grid-row: span 6; } .hub-tile[data-size="M"] { grid-column: span 4; grid-row: span 3; } .hub-tile[data-size="S"] { grid-column: span 4; grid-row: span 3; } .hub-tile[data-size="W"] { grid-column: span 12; grid-row: span 3; } } /* ── Csempe alapstruktúra: a csempe maga egyetlen , sose div+onclick ── */ .hub-tile { position: relative; display: block; border-radius: 20px; overflow: hidden; isolation: isolate; text-decoration: none; color: inherit; background: #1c2420; /* betöltés közbeni placeholder szín, kép alatt nem látszik */ } .hub-tile:focus-visible { outline: 3px solid var(--hub-accent); outline-offset: 2px; } .hub-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-m, 50% 50%); display: block; } @container hub-grid (min-width: 900px) { .hub-tile-img { object-position: var(--focus-d, 50% 50%); } } /* ── Kétirányú fátyol (egész képre): világosítás (fehér) vagy sötétítés (fekete), törespontonként külön. A cím áttetsző betűit ez a réteg NEM érinti (azt a saját fényereje emeli, lásd --title-bright), így a fátyol a környező képet/alcímet hangolja. ── */ .hub-tile-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; } @container hub-grid (max-width: 899.98px) { .hub-tile.veil-img-m .hub-tile-veil { opacity: 1; background: rgba(var(--veil-col-m, 0,0,0), var(--veil-a-m, 0)); } } @container hub-grid (min-width: 900px) { .hub-tile.veil-img-d .hub-tile-veil { opacity: 1; background: rgba(var(--veil-col-d, 0,0,0), var(--veil-a-d, 0)); } } /* ── Szöveg mögötti világos pad (sötét feliratú csempékhez): alulról felfelé halványuló világos sáv, törespontonként külön. ── */ .hub-tile-textpad { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; } @container hub-grid (max-width: 899.98px) { .hub-tile.veil-text-m .hub-tile-textpad { opacity: 1; background: linear-gradient(to top, rgba(255,255,255, var(--textpad-a-m, 0)) 0%, rgba(255,255,255, calc(var(--textpad-a-m, 0) * 0.6)) 35%, rgba(255,255,255, 0) 72%); } } @container hub-grid (min-width: 900px) { .hub-tile.veil-text-d .hub-tile-textpad { opacity: 1; background: linear-gradient(to top, rgba(255,255,255, var(--textpad-a-d, 0)) 0%, rgba(255,255,255, calc(var(--textpad-a-d, 0) * 0.6)) 35%, rgba(255,255,255, 0) 72%); } } /* ── Chip, minden módban azonos ── */ .hub-tile-chip { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(242, 245, 241, 0.14); border: 1px solid rgba(242, 245, 241, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #F2F5F1; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } @supports not (backdrop-filter: blur(1px)) { .hub-tile-chip { background: rgba(10, 21, 18, 0.75); } } .hub-tile-chip-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #D9605A; display: inline-block; flex-shrink: 0; } .hub-tile-chip-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #D9605A; animation: hub-pulse 1.8s ease-out infinite; } @keyframes hub-pulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(2.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hub-tile-chip-dot::after { animation: none; opacity: 0; } } /* ── Blend mód: háttér nélküli felirat, lokális scrim ── */ /* A sáv magasabbra nyúlik fel, mint korábban (0-70% helyett 0-100%), mert a nagyobb (task: "minden cím legyen nagyobb") címek magasabb szövegblokkot foglalnak el, és a screen-blend cím csak akkor tud kontrasztosan világosabb lenni a képnél, ha a mögötte lévő terület eleve elég sötét — ehhez kell a szélesebb, erősebb sáv. ── */ .hub-tile-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to top, rgba(4, 10, 8, calc(var(--hub-ov, 0.32) * 1.15)) 0%, rgba(4, 10, 8, calc(var(--hub-ov, 0.32) * 0.85)) 40%, rgba(4, 10, 8, calc(var(--hub-ov, 0.32) * 0.35)) 70%, rgba(4, 10, 8, 0) 100% ); } /* A cím alapból mix-blend-mode-dal jelenik meg (mindig helyes, olvasható szín) — ez a biztonságos visszaesés, amíg a JS (assets/js/hub.js, buildTitleMask) le nem fut. A CSS background-clip: text megbízhatatlannak bizonyult ezzel a betűtípus/böngésző kombinációval (bizonyos sortördeléseknél eltüntette az ékezeteket, kontraszttól/mérettől függetlenül) — ezért a TÉNYLEGES "a kép látszik át a betűkön" hatást a JS Canvas 2D-vel rajzolja meg a szöveget (más raszterizációs útvonal, megbízhatóan kezeli az ékezeteket), és ezt CSS mask-image-ként alkalmazza — innentől a betű ténylegesen átlátszó, a fotó látszik át rajta, a fényerőt a filter emeli meg. ── */ .hub-tile-title--blend { color: var(--hub-tile-text-color, #969696); mix-blend-mode: var(--hub-tile-blend, screen); } .hub-tile-title--blend.hub-title-masked { color: transparent; mix-blend-mode: normal; /* A background-image/-size/-position tényleges, csempéhez igazított értékeit a JS (alignTitleBackground) állítja be inline, hogy a betűkben pontosan a mögöttük lévő pixelek látszódjanak. Az itteni cover/center csak biztonsági visszaesés, ha a JS valamiért nem futna le. */ background-image: var(--hub-tile-bg-img, none); background-size: cover; background-position: center; background-repeat: no-repeat; /* A betűk fényereje a világosító fátyollal együtt nő (sötét képnél így az áttetsző cím is olvashatóan világosabb lesz). Alap 1.55 = változatlan. */ filter: brightness(var(--title-bright-m, 1.55)) saturate(1.12) contrast(1.1); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @container hub-grid (min-width: 900px) { .hub-tile-title--blend.hub-title-masked { filter: brightness(var(--title-bright-d, 1.55)) saturate(1.12) contrast(1.1); } } /* ── Glass mód: teljes szélességű elmosott sáv a cím tetejétől a csempe aljáig (nem a fél kép, csak addig magas, ameddig szöveg van mögötte). ── */ /* Glass mód: az elmosott sáv a csempe aljához tapad (a szöveg mögé), nem az egész csempét fedi — a szövegblokk mostantól teljes csempe méretű pozicionáló konténer (lásd .hub-tile-text). */ .hub-tile-text--glass::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 35%; z-index: -1; pointer-events: none; background: rgba(242, 245, 241, 0.10); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%); mask-image: linear-gradient(to top, #000 60%, transparent 100%); } @supports not (backdrop-filter: blur(1px)) { .hub-tile-text--glass::before { background: rgba(10, 21, 18, 0.55); } } .hub-tile-text--glass .hub-tile-title { color: #fff; } /* ── Szöveges blokk (cím + alcím + CTA). A konténer a TELJES csempét lefedi (inset:0), és flexbox-szal a bal-alsó sarokba rendezi a tartalmat — ez vizuálisan azonos a korábbi bal-alsó blokkal, DE most a szabadon húzott elemek (position:absolute) hozzá képest, azaz a csempéhez képest pozicionálódnak. ── */ .hub-tile-text { position: absolute; inset: 0; z-index: 2; padding: 16px 14px 14px; display: flex; flex-direction: column; align-items: stretch; /* a cím/alcím teljes szélességű (mint a régi blokk) */ justify-content: flex-end; /* a tartalom a csempe aljához tapad */ } /* A CTA pirula sose nyúljon teljes szélességre — tartalomhoz zsugorodik, balra. */ .hub-tile-cta { align-self: flex-start; } @container hub-grid (min-width: 900px) { .hub-tile-text { padding: 22px 26px 26px; } } .hub-tile-title { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.94; margin: 0; display: block; } @container hub-grid (min-width: 900px) { .hub-tile-title { line-height: 0.92; } } /* A font-size minden esetben var(--hub-*-size-mobile/desktop, ) — ha az admin nem állít be egyedi betűméretet egy csempén, a fallback (az eddigi, méret-token szerinti alapérték) érvényesül változatlanul. */ .hub-tile[data-size="XL"] .hub-tile-title { font-size: var(--hub-title-size-mobile, 32px); } .hub-tile[data-size="T"] .hub-tile-title { font-size: var(--hub-title-size-mobile, 22px); } .hub-tile[data-size="L"] .hub-tile-title { font-size: var(--hub-title-size-mobile, 21px); } .hub-tile[data-size="M"] .hub-tile-title { font-size: var(--hub-title-size-mobile, 20px); } .hub-tile[data-size="S"] .hub-tile-title { font-size: var(--hub-title-size-mobile, 20px); } .hub-tile[data-size="W"] .hub-tile-title { font-size: var(--hub-title-size-mobile, 24px); } @container hub-grid (min-width: 900px) { .hub-tile[data-size="XL"] .hub-tile-title { font-size: var(--hub-title-size-desktop, 50px); } .hub-tile[data-size="T"] .hub-tile-title { font-size: var(--hub-title-size-desktop, 29px); } .hub-tile[data-size="L"] .hub-tile-title { font-size: var(--hub-title-size-desktop, 27px); } .hub-tile[data-size="M"] .hub-tile-title { font-size: var(--hub-title-size-desktop, 25px); } .hub-tile[data-size="S"] .hub-tile-title { font-size: var(--hub-title-size-desktop, 25px); } .hub-tile[data-size="W"] .hub-tile-title { font-size: var(--hub-title-size-desktop, 32px); } } .hub-tile-sub { margin: 6px 0 0; font-size: var(--hub-sub-size-mobile, 11.5px); line-height: 1.35; color: rgba(242, 245, 241, 0.86); max-width: 92%; } @container hub-grid (min-width: 900px) { .hub-tile-sub { font-size: var(--hub-sub-size-desktop, 14px); margin-top: 8px; max-width: 75%; } } .hub-tile-cta { margin-top: 10px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(217, 199, 163, 0.94); color: #15302A; font-size: var(--hub-cta-size-mobile, 12px); font-weight: 600; } @container hub-grid (min-width: 900px) { .hub-tile-cta { margin-top: 16px; padding: 11px 20px; font-size: var(--hub-cta-size-desktop, 14px); } } /* ══════════════════════════════════════════════════════════════════════════ KÉZI ELRENDEZÉS — töréspontonként teljesen külön (mobil <900px / asztali >=900px). Ezek a szabályok a fájl VÉGÉN vannak, hogy a size-token span szabályokat azonos specifikusság mellett forrás-sorrend alapján felülírják. Ha egy csempének nincs kézi elhelyezése egy törésponton, a size-token (auto) elrendezés érvényesül változatlanul — nincs regresszió. ══════════════════════════════════════════════════════════════════════════ */ /* ── Explicit rács-elhelyezés (oszlop/sor kezdet + span) ── */ @container hub-grid (max-width: 899.98px) { .hub-tile.is-placed-m { grid-column: var(--col-start-m) / span var(--col-span-m); grid-row: var(--row-start-m) / span var(--row-span-m); } } @container hub-grid (min-width: 900px) { .hub-tile.is-placed-d { grid-column: var(--col-start-d) / span var(--col-span-d); grid-row: var(--row-start-d) / span var(--row-span-d); } } /* ── Elemek szabad pozíciója (chip / cím / alcím / CTA), a csempe bal-felső sarkához mért %-ban. A szabadon húzott elem kilép a bal-alsó flex-flow-ból és abszolút pozíciót kap. Törespontonként külön. ── */ @container hub-grid (max-width: 899.98px) { .hub-tile.chip-free-m .hub-tile-chip { left: var(--chip-x-m); top: var(--chip-y-m); right: auto; bottom: auto; } /* Szabadon mozgatott cím: a SAJÁT tartalmához méreteződjön (max-content), ne a bal offset által megszabott maradék helyhez — különben a nem tördelhető szó (pl. KREATIN) utolsó betűje levágódna a maszkban. */ .hub-tile.title-free-m .hub-tile-title { position: absolute; left: var(--title-x-m); top: var(--title-y-m); margin: 0; width: max-content; max-width: none; } .hub-tile.sub-free-m .hub-tile-sub { position: absolute; left: var(--sub-x-m); top: var(--sub-y-m); margin: 0; max-width: 90%; } .hub-tile.cta-free-m .hub-tile-cta { position: absolute; left: var(--cta-x-m); top: var(--cta-y-m); margin: 0; } } @container hub-grid (min-width: 900px) { .hub-tile.chip-free-d .hub-tile-chip { left: var(--chip-x-d); top: var(--chip-y-d); right: auto; bottom: auto; } .hub-tile.title-free-d .hub-tile-title { position: absolute; left: var(--title-x-d); top: var(--title-y-d); margin: 0; width: max-content; max-width: none; } .hub-tile.sub-free-d .hub-tile-sub { position: absolute; left: var(--sub-x-d); top: var(--sub-y-d); margin: 0; max-width: 90%; } .hub-tile.cta-free-d .hub-tile-cta { position: absolute; left: var(--cta-x-d); top: var(--cta-y-d); margin: 0; } } /* ── Elemenkénti forgatás (fok), a pozíciótól függetlenül. A forgatás az elem közepe körül történik; szabadon pozicionált elemnél a left/top után rajzol. ── */ @container hub-grid (max-width: 899.98px) { .hub-tile.chip-rot-m .hub-tile-chip { transform: rotate(var(--chip-rot-m, 0deg)); transform-origin: center; } .hub-tile.title-rot-m .hub-tile-title { transform: rotate(var(--title-rot-m, 0deg)); transform-origin: center; } .hub-tile.sub-rot-m .hub-tile-sub { transform: rotate(var(--sub-rot-m, 0deg)); transform-origin: center; } .hub-tile.cta-rot-m .hub-tile-cta { transform: rotate(var(--cta-rot-m, 0deg)); transform-origin: center; } } @container hub-grid (min-width: 900px) { .hub-tile.chip-rot-d .hub-tile-chip { transform: rotate(var(--chip-rot-d, 0deg)); transform-origin: center; } .hub-tile.title-rot-d .hub-tile-title { transform: rotate(var(--title-rot-d, 0deg)); transform-origin: center; } .hub-tile.sub-rot-d .hub-tile-sub { transform: rotate(var(--sub-rot-d, 0deg)); transform-origin: center; } .hub-tile.cta-rot-d .hub-tile-cta { transform: rotate(var(--cta-rot-d, 0deg)); transform-origin: center; } }