-re, különben a lábléc fehér sávban, fehér ikonokkal – vagyis sehogy – jelenik meg alatta. */ body.is-dark { background: #000; color: rgba(255, 255, 255, 0.9); } .page--dark { background: #000; } .page--dark hr, body.is-dark hr { background: rgba(255, 255, 255, 0.5); } .page-inner { padding-top: calc(var(--header-h) + 6rem); } .page--home .page-inner, .page--text .page-inner { padding-top: 0; } /* --- fejléc: rögzített, "difference" keverés, hogy sötét háttéren fehér, világoson fekete legyen (mint az eredetin) --- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 4rem var(--pad-x) 2rem; mix-blend-mode: difference; pointer-events: none; } .site-header a { pointer-events: auto; } .site-header .cs { width: 100%; } .logo-line { color: rgba(255, 255, 255, 0.85); } .logo-line a { color: rgba(255, 255, 255, 0.85); } .logo-sub { color: rgba(255, 255, 255, 0.85); } .nav-link { text-align: center; } /* --- nyelvváltó (HU / EN): a menüsor végén, a jobb margóhoz simulva --- */ /* A fejlécben NEM a 12-es rács osztja a helyet: a menüpontok annyit kapnak, amennyi a szövegüknek kell. Merev 1/12-es oszlopokkal bizonyos ablakszélességeknél egymásra csúsztak a feliratok. */ .site-header .cs { gap: 2.2rem; } .site-header .cs > .cu { flex: 0 0 auto; width: auto; } /* az üres oszlop szívja fel a maradékot, így a menü jobbra tapad */ .site-header .cs > .cu--spacer { flex: 1 1 0; width: auto; min-width: 0; } .site-header .cs > .cu--lang { flex: 0 0 auto; width: auto; } .lang-switch { text-align: right; font-size: 1.4rem; font-weight: 300; line-height: 1.2; letter-spacing: 0; color: #fff; white-space: nowrap; } .lang-switch__on { opacity: 1; } .lang-switch__sep { opacity: 0.4; margin: 0 0.35em; } .lang-switch__off { color: #fff; opacity: 0.45; transition: opacity 0.2s; } .lang-switch__off:hover { opacity: 1; } /* --- lábléc: közösségi ikonok az oldal alján --- */ .site-bottom { padding: 0 10rem 1.2rem 0; text-align: right; color: var(--ink); } .site-bottom .icon-link { display: inline-block; margin-left: 1rem; } body.is-dark .site-bottom, body.is-dark .site-bottom a { color: rgba(255, 255, 255, 0.85); } /* Szövegbe ágyazott ikonok (Cargo: ). Pontosan az eredeti méretezés: 1.2em magas NÉGYZET, alapvonalhoz igazítva. A négyzet alak adja a szöveg körüli térközt, a negatív margók pedig megakadályozzák, hogy megnyújtsa a sort. */ .ticon { display: inline-block; height: 1.2em; width: auto; aspect-ratio: 1; margin-top: -1em; margin-bottom: -0.25em; vertical-align: baseline; fill: currentColor; } .site-bottom .ticon { height: 1.6rem; margin-top: 0; margin-bottom: -0.3rem; } .icon-link { display: inline-block; } /* A Cargo egyes elemekre --font-scale értéket tett a betűméret szorzására; ez tartja meg az eredeti arányokat. */ [style*="--font-scale"] { font-size: calc(1em * var(--font-scale, 1)); } /* --- fix "vissza a tetejére" nyíl --- */ .page-up { position: fixed; right: 3rem; bottom: 2rem; z-index: 55; mix-blend-mode: difference; color: rgba(255, 255, 255, 0.85); } .page-up .ticon { height: 2.6rem; margin: 0; stroke: currentColor; fill: none; } /* ========================================================= RÁCS (Cargo: column-set / column-unit, 12 oszlop) ========================================================= */ .cs { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--gutter, 0rem); width: 100%; } /* A szélesség a 12-es rácsból jön, a zsugorodás pedig elnyeli a hézagot – így a sor pontosan kitölti a helyet, nem lóg ki. */ .cu { flex: 0 1 calc(var(--span, 12) / 12 * 100%); min-width: 0; } /* span nélküli oszlop: egyenlő elosztás a soron belül */ .cu--auto { flex: 1 1 0; width: auto; } .cs > .cu:only-child { width: 100%; } /* ========================================================= MÉDIA ELEM ========================================================= */ .mi { margin: 0; position: relative; display: block; width: var(--scale, 100%); } .mi > a { display: block; } .mi img, .mi video, .mi iframe { width: 100%; height: auto; } /* A képek halkan úsznak be, nem pattannak. Csak akkor, ha fut a JS (a html.js osztályt a site.js teszi ki) – enélkül végig látszanak. */ .js .mi img { opacity: 0; transition: opacity 0.45s ease; } .js .mi img.is-loaded { opacity: 1; } .mi iframe { aspect-ratio: 16 / 9; border: 0; } .mi.zoomable img { cursor: zoom-in; } .mi figcaption { margin-top: 0.5em; } /* ========================================================= GALÉRIÁK ========================================================= */ /* --- szabad elrendezés (főoldal) --- Minden érték a konténer SZÉLESSÉGÉHEZ viszonyított százalék — pontosan úgy, ahogy a Cargo tárolta. */ .gf { position: relative; width: 100%; height: 0; /* magasságot a padding-bottom adja */ padding-bottom: var(--gf-h, 100%); } .gf-item { position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: var(--z, 1); margin: 0; } .gf-item img { width: 100%; height: auto; } /* felirat: sötét fátyol + középre igazított cím, hoverre */ .gf .caption { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.14); color: #fff; height: 100%; margin: auto; display: flex; padding: 10px; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity 0.4s; border-radius: 34px; } .gf-item:hover .caption { opacity: 1; } /* --- kisorjázott (justified) sorok: egy soron belül azonos magasság, a szélesség a képarányból adódik --- */ .gj-row { display: flex; gap: var(--gj-gap, 0.65rem); margin-bottom: var(--gj-gap, 0.65rem); align-items: stretch; } .gj-row > .mi { flex-grow: var(--ar, 1); flex-basis: 0; flex-shrink: 1; width: auto; } /* --- diavetítés --- */ .gs { position: relative; } .gs .mi { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; width: 100%; } .gs .mi img { height: 100%; object-fit: cover; } .gs .mi.is-active { opacity: 1; } .gs .mi:first-child { position: relative; } /* --- oszlopos galéria --- */ .gc { columns: 2; column-gap: 0.65rem; } .gc > .mi { break-inside: avoid; margin-bottom: 0.65rem; width: 100%; } /* ========================================================= PROJEKTEK PANEL (jobb oldali overlay) ========================================================= */ .overlay-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transition: opacity 0.2s ease-out, visibility 0.2s; z-index: 80; overflow: hidden; /* a becsúszás előtti eltolás ne lógjon ki */ } .overlay-backdrop.is-open { opacity: 1; visibility: visible; } .overlay-panel { position: absolute; top: 0; right: 0; height: 100%; width: 23%; min-width: 260px; overflow-y: auto; background: #fff; color: var(--ink); padding: 2rem; box-shadow: 0.4rem 0 3rem 0 rgba(0, 0, 0, 0.25); transform: translateX(10%); transition: transform 0.2s ease-out; } .overlay-backdrop.is-open .overlay-panel { transform: translateX(0); } .overlay-panel hr { background: var(--ink-soft); } /* ========================================================= KÉPNAGYÍTÓ ========================================================= */ .lightbox { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.97); /* sötét oldalon sötét nagyító, hogy ne vakítson */ display: none; align-items: center; justify-content: center; padding: 3rem; z-index: 100; cursor: zoom-out; } body.is-dark .lightbox { background: rgba(0, 0, 0, 0.97); } .lightbox.is-open { display: flex; } .lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius); } /* ========================================================= RESPONZÍV ========================================================= */ @media (max-width: 1199px) { html { font-size: 11px; } } /* Tabletig a fejléc együtt görög a tartalommal. Rögzítve ráúszna a képekre, és a "difference" keverés miatt a felirat beleolvadna a fotóba – nagy képernyőn ez szép, kicsin viszont zavaros. */ @media (max-width: 1100px) { .site-header { position: static; padding: 3rem var(--pad-x) 2.4rem; } .page--home, .page--text { padding-top: 2rem; } .page-inner { padding-top: 2rem; } } /* Érintőképernyőn nincs egérmutató, így a hoverre megjelenő feliratot soha nem lehetne előhívni: ezért a képek alatt, folyamatosan látszik. */ @media (hover: none) { .gf { padding-bottom: calc(var(--gf-h, 100%) + 5rem); } .gf .caption { position: absolute; top: 100%; left: 0; right: 0; inset-block-end: auto; height: auto; background: none; color: var(--ink); opacity: 1; border-radius: 0; padding: 0.7rem 0 0; justify-content: flex-start; text-align: left; font-size: 1.5rem; letter-spacing: 0.02em; } } @media (max-width: 900px) { html { font-size: 10px; } :root { --pad-x: 2.4rem; } /* a fejléc itt már együtt görög a tartalommal, nem kell alatta hely */ .page { padding: 0 2rem 8rem; } .page--home { padding: 1rem 2rem 6rem; } .page--text { padding: 1rem 2rem 8rem; } /* oszlopok egymás alá */ .cs { flex-wrap: wrap; gap: var(--gutter, 0rem); } .cu, .cu--auto { flex: 1 1 100%; width: 100%; } .cs.cs--keep { flex-wrap: nowrap; } .cs.cs--keep > .cu { flex: 0 1 calc(var(--span, 12) / 12 * 100%); } /* üres oszlopok elrejtése, hogy ne hagyjanak lyukat */ .cu:empty { display: none; } /* a szabad elrendezésű főoldal mobilon egyszerű oszlop */ .gf { height: auto; padding-bottom: 0; display: flex; flex-direction: column; gap: 4rem; } .gf-item { position: static; width: 100% !important; margin: 0; } .gf .caption { position: static; background: none; color: var(--ink); opacity: 1; height: auto; padding: 0.8rem 0 0; justify-content: flex-start; text-align: left; border-radius: 0; } /* kisorjázott sorok mobilon egymás alá */ .gj-row { flex-direction: column; } .gj-row > .mi { width: 100%; flex-basis: auto; } .gc { columns: 1; } /* fejléc mobilon: a név külön sorban, alatta a menü egy sorban */ .site-header { padding: 2.2rem 2rem 1.4rem; } .site-header .cs { flex-wrap: wrap; gap: 0.4rem 1.6rem; align-items: baseline; } /* a .cs--keep szabálynál erősebben, hogy a menü ne préselődjön 12 oszlopba */ .site-header .cs > .cu, .site-header .cs.cs--keep > .cu { flex: 0 0 auto; width: auto; } .site-header .cs > .cu:first-child, .site-header .cs.cs--keep > .cu:first-child { flex: 1 1 100%; width: 100%; } /* az üres kitöltő oszlopra mobilon nincs szükség */ .site-header .cs > .cu--spacer { display: none; } .site-header .cs > .cu--lang { margin-left: 0; } .site-header .cu div { text-align: left !important; } .site-header .bodcopy-2 { font-size: 1.25rem; } .site-bottom { padding-right: 2rem; } .page-up { right: 2rem; } .overlay-panel { width: 78%; } .page-heading { font-size: 4.2rem; } .body-copy-3 { font-size: 1.8rem; } .caption { font-size: 1.6rem; } } @media (max-width: 560px) { .page-heading { font-size: 3.4rem; } .site-header .logo-sub { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; } }