/* strefa360.pl - jeden arkusz dla calej witryny. =========================================================================== SWIAT: SALA PO CIEMKU. Strona jest tym, czym jest seans: ciemnym wnetrzem, w ktorym swieci wylacznie obraz. Czern nosi wszystko, zdjecia sali ida na pelna szerokosc, typografia jest ciasnym groteskiem bez ozdob, krawedzie sa ostre (zero zaokraglen, zero cieni ozdobnych, zero gradientow dekoracyjnych). Zloto z plakatu wystepuje jako JEDEN akcent: linia, etykieta, cena, przycisk. ZASADA: komponenty siegaja WYLACZNIE po role (warstwa 2). Prymitywy (warstwa 1) mowia, CO to za kolor; role mowia, DO CZEGO sluzy. KONTRAST (WCAG 2.1, policzony w kontrast.mjs, nie oszacowany): - --tekst (#ededed) na --tlo (#050505) - --tekst-2 (#9a9a9a) na --tlo - --tekst-3 (#8a8a8a) na --tlo <- najciemniejszy TEKST, 5,74:1 - --akcent (#e0b978) na --tlo i --tlo na --akcent (przycisk) - --linia (#2a2a2a): LINIA, nigdy tekst Po zmianie ktoregokolwiek koloru: node kontrast.mjs */ /* ================= 1. PRYMITYWY ================= */ :root { /* TUSZ: chlodny, nie czarny. Cale malarstwo na tej stronie jest cieple - srednia kazdej reprodukcji lezy w pasmie ochry (zmierzone, nasycenie 0,29-0,58). Grunt idzie wiec w druga strone: interfejs chlodny, obraz cieply. Wczesniej grunt byl neutralny, a akcent mial ten sam odcien co zdjecie (przycisk 198,164,107 wobec fotografii 110,90,65), przez co pierwszy ekran byl jednolita sepia bez akcentu. */ --tusz-1000: #000000; --tusz-950: #07080b; --tusz-900: #0e1015; --tusz-850: #151922; --tusz-700: #262b36; --tusz-rgb: 7 8 11; /* do kurtyn i przezroczystosci */ --popiol-500: #8b919b; --popiol-400: #9aa0aa; --biel-100: #eef0f2; --biel: #ffffff; /* PIGMENT STREFY: akcent nalezy do epoki, nie do marki. Renesans dostaje ultramaryne (lapis lazuli, pigment drozszy od zlota), barok cynober (czerwien swiatla wychodzacego z ciemnosci). Dzieki temu obie strefy roznia sie kolorem, a nie tylko podpisem. Wartosc ustawia . */ --lapis-600: #2e4fd8; --lapis-800: #2440b8; --lapis-300: #7c93ff; --grynszpan-600: #1e7a4e; --grynszpan-800: #176b45; --grynszpan-300: #3fb68b; /* ================= 2. ROLE ================= */ --tlo: var(--tusz-950); --tlo-2: var(--tusz-900); --tlo-3: var(--tusz-850); --tekst: var(--biel-100); --tekst-2: var(--popiol-400); --tekst-3: var(--popiol-500); --tekst-mocny: var(--biel); /* --akcent to WYPELNIENIE (przycisk); na nim stoi --na-akcencie. --akcent-tekst to ten sam pigment jako TEKST na ciemnym tle: musi byc jasniejszy, inaczej nie przechodzi progu 4,5:1. */ --akcent: var(--lapis-600); --akcent-ciemny: var(--lapis-800); --akcent-tekst: var(--lapis-300); --na-akcencie: var(--biel); --linia: var(--tusz-700); --linia-jasna: rgb(238 240 242 / .18); --fokus: var(--lapis-300); /* pismo: jeden kroj, cztery wagi */ --pismo: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* rytm */ --o1: .25rem; --o2: .5rem; --o3: 1rem; --o4: 1.5rem; --o5: 2.5rem; --o6: 4rem; --o7: 6.5rem; --o8: 10rem; --miara: 62ch; --szer: 1520px; --margines: clamp(1.25rem, 4vw, 4.5rem); --naglowek-h: 68px; --pasek-h: 40px; /* ruch */ --szybko: 160ms; --spokojnie: 480ms; --wyjscie: cubic-bezier(.16, 1, .3, 1); color-scheme: dark; } /* Barok: ten sam uklad, inny pigment. Jedyne miejsce, w ktorym strefy roznia sie kolorem; komponenty siegaja wylacznie po role, wiec nic wiecej nie trzeba przepisywac. */ body[data-strefa="barok"] { --akcent: var(--grynszpan-600); --akcent-ciemny: var(--grynszpan-800); --akcent-tekst: var(--grynszpan-300); --fokus: var(--grynszpan-300); } /* ================= 3. PODSTAWA ================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + var(--o3)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--tlo); color: var(--tekst-2); font-family: var(--pismo); font-size: 1.0625rem; line-height: 1.62; -webkit-font-smoothing: antialiased; scrollbar-color: var(--tusz-700) var(--tusz-950); overflow-x: hidden; } ::selection { background: var(--akcent); color: var(--na-akcencie); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--tusz-950); } ::-webkit-scrollbar-thumb { background: var(--tusz-700); } ::-webkit-scrollbar-thumb:hover { background: var(--akcent); } :focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; } a { color: var(--tekst); text-decoration-color: color-mix(in srgb, var(--akcent) 70%, var(--tlo)); text-underline-offset: .22em; text-decoration-thickness: 1px; } a:hover { text-decoration-color: var(--akcent-tekst); } img, svg, video { display: block; max-width: 100%; height: auto; } [hidden] { display: none !important; } p { margin: 0 0 var(--o3); max-width: var(--miara); } p:last-child { margin-bottom: 0; } strong { color: var(--tekst); font-weight: 500; } ol, ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } figure { margin: 0; } .przeskocz { position: absolute !important; left: var(--margines); top: -5rem; z-index: 100; } .przeskocz:focus { top: .75rem; } .szpalta { width: min(100% - 2 * var(--margines), var(--szer)); margin-inline: auto; } /* ================= 4. PISMO ================= */ h1, h2, h3, h4 { margin: 0; color: var(--tekst-mocny); font-weight: 600; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; } h1 { font-size: clamp(2.6rem, 1rem + 6vw, 6rem); } h2 { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.5rem); letter-spacing: -.028em; } h3 { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); letter-spacing: -.02em; line-height: 1.15; } h4 { font-size: 1.05rem; letter-spacing: -.01em; } /* Nadtytul nad naglowkiem jest zakazany. Ten znacznik zyje wylacznie jako dopisek WEWNATRZ naglowka ("teraz na afiszu") - nigdy jako osobny wiersz. */ .teraz { display: inline-block; margin-left: .6em; vertical-align: .28em; font-size: .58em; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--akcent-tekst); } .duzy { font-size: clamp(1.2rem, 1rem + .9vw, 1.65rem); line-height: 1.4; color: var(--tekst); max-width: 30ch; letter-spacing: -.012em; } .wiodacy { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.35rem); color: var(--tekst); } .liczba { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tekst-mocny); letter-spacing: -.03em; } .drobne { font-size: .9rem; color: var(--tekst-3); } /* Naglowek sekcji: etykieta, tytul, opcjonalny akapit. Wiecej miejsca nad niz pod. */ .tytul-sekcji { display: grid; gap: var(--o3); margin-bottom: var(--o6); max-width: 46rem; } .tytul-sekcji p { color: var(--tekst-2); } /* ================= 5. PRZYCISK ================= */ /* Ostry prostokat. Glowny: zloto na czerni. Drugi: obrys. Zero zaokraglen. */ .przycisk { --tlo-p: var(--akcent); --tekst-p: var(--na-akcencie); --obrys-p: var(--akcent); display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 1.05rem 2rem; min-height: 52px; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; line-height: 1; text-decoration: none; color: var(--tekst-p); background: var(--tlo-p); border: 1px solid var(--obrys-p); border-radius: 0; cursor: pointer; transition: background var(--szybko) linear, color var(--szybko) linear, border-color var(--szybko) linear; } .przycisk:hover { --tlo-p: var(--biel); --tekst-p: var(--tusz-950); --obrys-p: var(--biel); } .przycisk:active { --tlo-p: var(--akcent-ciemny); --obrys-p: var(--akcent-ciemny); } .przycisk-obrys { --tlo-p: transparent; --tekst-p: var(--tekst); --obrys-p: var(--linia-jasna); } .przycisk-obrys:hover { --tekst-p: var(--tusz-950); --tlo-p: var(--biel); --obrys-p: var(--biel); } .przycisk-maly { padding: .7rem 1.15rem; min-height: 40px; font-size: .72rem; letter-spacing: .12em; } .przycisk[aria-disabled="true"] { --tlo-p: transparent; --tekst-p: var(--tekst-3); --obrys-p: var(--linia); pointer-events: none; cursor: default; } .przycisk .strzalka { width: 15px; height: 10px; flex: none; } /* ================= 6. PASEK STANU ================= */ .pasek-stanu { background: var(--tlo-2); border-bottom: 1px solid var(--linia); font-size: .75rem; letter-spacing: .04em; } .pasek-stanu-w { display: flex; flex-wrap: wrap; gap: .3rem var(--o4); align-items: center; justify-content: space-between; padding: .6rem 0; } .pasek-stanu strong { color: var(--akcent-tekst); font-weight: 500; } .pasek-stanu .drobne { font-size: .75rem; } .pasek-miejsce { margin: 0; max-width: none; color: var(--tekst-3); } /* Na waskim ekranie pasek lamie sie na dwa wiersze i zmniejsza pismo, ale nie gubi ani miejsca (jedyny fakt nie do podrobienia), ani kwalifikatora "termin przykladowy". */ @media (max-width: 720px) { .pasek-stanu { font-size: .7rem; } .pasek-stanu-w { gap: .15rem; } } /* ================= 7. NAGLOWEK ================= */ .naglowek { position: sticky; top: 0; z-index: 60; background: rgb(var(--tusz-rgb) / .84); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linia); } .naglowek-w { display: flex; align-items: center; gap: var(--o4); min-height: var(--naglowek-h); } .znak { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tekst-mocny); flex: none; } .znak svg { width: 34px; height: 34px; color: var(--akcent-tekst); } .znak-napis { display: grid; line-height: 1; } .znak-napis b { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; } .znak-napis span { font-size: .62rem; text-transform: uppercase; letter-spacing: .22em; color: var(--tekst-3); margin-top: .24rem; } .naglowek nav { margin-left: auto; } .menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); } .menu a { font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; color: var(--tekst-2); padding: .4rem 0; position: relative; white-space: nowrap; transition: color var(--szybko) linear; } .menu a:hover, .menu a[aria-current="page"] { color: var(--tekst-mocny); } .menu a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--akcent); } .naglowek .przycisk { flex: none; } .menu-przycisk { display: none; } @media (max-width: 899px) { :root { --naglowek-h: 60px; --pasek-h: 42px; } .naglowek-w { gap: var(--o3); } .naglowek nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: var(--tlo); border-bottom: 1px solid var(--linia); padding: 0 var(--margines) var(--o4); } .menu { flex-direction: column; align-items: stretch; gap: 0; } .menu a { padding: 1rem 0; font-size: .95rem; border-top: 1px solid var(--linia); } .menu a[aria-current="page"]::after { display: none; } .naglowek-w > a.przycisk { display: none; } /* tylko KUP BILET; przycisk Menu ma zostac */ .menu-przycisk { display: inline-flex; margin-left: auto; } } /* ================= 8. HERO ================= */ /* Pasek stanu + naglowek + hero + fakty musza zmiescic sie w jednym ekranie, dlatego hero odejmuje takze wysokosc paska stanu (--pasek-h). */ .hero { position: relative; min-height: calc(100svh - var(--naglowek-h) - var(--pasek-h, 40px)); display: grid; grid-template-rows: 1fr auto; isolation: isolate; } .hero-tlo { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--tusz-1000); } /* Kadr rastra ma u gory czarna strefe sufitu; object-position spycha ja poza ekran. */ .hero-tlo img { width: 100%; height: 100%; object-fit: cover; object-position: center 78%; } /* Kurtyna: obraz nosi biale litery, wiec ciemnieje od dolu i od lewej. */ .hero-tlo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--tusz-rgb) / .34) 0, rgb(var(--tusz-rgb) / .22) 22%, rgb(var(--tusz-rgb) / .42) 58%, rgb(var(--tusz-rgb) / .96) 100%), linear-gradient(90deg, rgb(var(--tusz-rgb) / .92) 0, rgb(var(--tusz-rgb) / .66) 32%, rgb(var(--tusz-rgb) / .06) 68%); } .hero-tresc { display: grid; align-content: end; gap: var(--o3); padding: var(--o7) 0 var(--o5); } .hero h1 .wiersz { display: block; overflow: hidden; } .hero h1 .wiersz > span { display: block; } .hero h1 .epoka { color: var(--akcent-tekst); } .hero-obietnica { font-size: clamp(1.1rem, .95rem + .9vw, 1.55rem); line-height: 1.35; color: var(--tekst); max-width: 34ch; letter-spacing: -.015em; margin: 0; } .hero-epoka { font-size: 1rem; color: var(--tekst-2); max-width: 46ch; margin: 0; } .hero-akcje { display: flex; flex-wrap: wrap; gap: var(--o3); align-items: center; } /* Ten wiersz lezy na fotografii, nie na plaskiej czerni, wiec nie moze byc najciemniejszym stopniem tekstu. */ .hero-akcje .drobne { flex-basis: 100%; margin: 0; color: var(--tekst-2); } /* Pasek faktow pod hero */ .fakty { border-top: 1px solid var(--linia-jasna); background: rgb(var(--tusz-rgb) / .72); backdrop-filter: blur(6px); } /* Cztery fakty w jednym wierszu tekstu, nie cztery kafle z wielka liczba: "wielka liczba + mala etykieta" czyta sie jak pulpit, nie jak afisz. Wersaliki zostaja wylacznie przyciskom. */ .fakty-w { display: flex; flex-wrap: wrap; gap: .35rem var(--o5); padding: var(--o3) 0 .35rem; } .fakty-w > div { display: flex; align-items: baseline; gap: .45em; } .fakty dt { font-size: .95rem; color: var(--tekst-3); letter-spacing: 0; } .fakty dd { margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; color: var(--tekst-mocny); } /* Nota o wizualizacji siedzi na czerni pod faktami, nie na jasnym fragmencie zdjecia. */ .fakty-nota { font-size: .78rem; color: var(--tekst-3); max-width: none; margin: 0 auto; padding-bottom: var(--o3); } /* margin: 0 zabilo centrowanie .szpalta */ @media (max-width: 899px) { /* na waskim ekranie kadr trzeba przesunac jeszcze nizej: czarna strefa sufitu zajmowala gore pierwszego ekranu */ .hero-tlo img { object-position: center 88%; } .hero-tresc { padding: var(--o6) 0 var(--o4); } .fakty-w { gap: .3rem var(--o4); } } /* ================= 10. MANIFEST ================= */ .manifest { padding: var(--o8) 0; } .manifest-uklad { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--o8) var(--o7); align-items: start; } .manifest .duzy { max-width: 22ch; margin-bottom: var(--o5); } /* Prawa kolumna manifestu niesie material, nie powtorzone liczby: te same fakty staly juz w pasku pod hero. */ .manifest-obraz { margin: 0; } .manifest-obraz .ramka { overflow: hidden; aspect-ratio: 3 / 4; background: var(--tusz-900); } .manifest-obraz img { width: 100%; height: 100%; object-fit: cover; } .manifest-obraz figcaption { margin-top: var(--o3); font-size: .88rem; color: var(--tekst-3); } @media (max-width: 1023px) { .manifest { padding: var(--o7) 0; } .manifest-uklad { grid-template-columns: 1fr; gap: var(--o6); } } /* ================= 11. GALERIA EPOKI (poziomy przesuw) ================= */ .galeria { padding: var(--o8) 0 0; overflow: hidden; } .galeria .tytul-sekcji { margin-bottom: var(--o5); } .galeria-tor { display: flex; gap: var(--o4); padding: 0 var(--margines) var(--o8); will-change: transform; } .plotno { flex: none; width: min(46vw, 620px); } .plotno.pion { width: min(28vw, 380px); } .plotno img { width: 100%; height: clamp(320px, 52vh, 620px); object-fit: cover; background: var(--tusz-900); } .plotno figcaption { display: grid; gap: .2rem; margin-top: var(--o3); border-top: 1px solid var(--linia); padding-top: var(--o2); } .plotno .autor { font-size: .82rem; font-weight: 500; color: var(--tekst); } .plotno .tytul-dziela { font-size: .82rem; color: var(--tekst-3); } .galeria-koniec { flex: none; width: min(38vw, 420px); display: grid; align-content: center; gap: var(--o3); } @media (max-width: 899px) { .galeria { padding-top: var(--o7); } .galeria-tor { padding-bottom: var(--o7); gap: var(--o3); } .plotno { width: 78vw; } .plotno.pion { width: 62vw; } .plotno img { height: 56vh; } .galeria-koniec { width: 78vw; } } /* ================= 12. KADRY (zdjecia z sali) ================= */ /* Jedyna sekcja, ktora nie trzyma rytmu --o8: skleja sie z sekcja wyzej, a panorama sali idzie szerzej niz szpalta. Zlamanie rytmu jest regula, nie kolizja. */ .kadry { padding: 0 0 var(--o8); } .kadry-siatka { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--o4); } .kadr { position: relative; } .kadr .ramka { overflow: hidden; } .kadr img { width: 100%; height: 100%; object-fit: cover; } .kadr-a { grid-column: 1 / 9; } .kadr-a .ramka { aspect-ratio: 16 / 9; } .kadr-c { grid-column: 1 / 13; margin-top: var(--o5); } .kadr-c .ramka { aspect-ratio: 21 / 9; } .kadr figcaption { margin-top: var(--o3); font-size: .88rem; color: var(--tekst-3); } .kadr-zrodlo { grid-column: 9 / 13; align-self: end; } .kadr-zrodlo p { font-size: .95rem; margin: 0; } @media (max-width: 899px) { .kadry { padding: 0 0 var(--o7); } .kadr-a, .kadr-c, .kadr-zrodlo { grid-column: 1 / 13; } .kadr-c .ramka { aspect-ratio: 16 / 9; } } /* ================= 13. TERMINY ================= */ .terminy { padding: var(--o8) 0; } .lista-terminow { border-top: 1px solid var(--linia); } .termin { display: grid; grid-template-columns: 6.5rem 9rem 5.5rem minmax(0, 1fr) auto; gap: var(--o4); align-items: center; padding: var(--o4) var(--o3); border-bottom: 1px solid var(--linia); transition: background var(--szybko) linear; } .termin-data { font-size: 1.5rem; font-weight: 600; letter-spacing: -.04em; color: var(--tekst-mocny); font-variant-numeric: tabular-nums; } .termin-data small { display: block; font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tekst-3); margin-top: .25rem; } .termin-dzien { font-size: .95rem; color: var(--tekst-2); } .termin-godzina { font-size: 1.15rem; font-weight: 500; color: var(--tekst); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .termin-opis { font-size: .95rem; color: var(--tekst-3); } .termin:hover, .termin:focus-within, .termin.najblizszy { background: var(--tlo-3); } .termin.najblizszy .termin-data small { color: var(--akcent-tekst); } .terminy-uwaga { margin-top: var(--o4); color: var(--tekst-3); font-size: .92rem; max-width: 56ch; } .terminy-pusto { border: 1px solid var(--linia); padding: var(--o5); color: var(--tekst-2); max-width: 46rem; } @media (max-width: 899px) { .terminy { padding: var(--o7) 0; } .termin { grid-template-columns: 4.2rem minmax(0, 1fr) auto; grid-template-areas: "data dzien akcja" "data opis akcja"; gap: .15rem var(--o3); padding: var(--o3) var(--o2); } .termin-data { grid-area: data; font-size: 1.3rem; } .termin-dzien { grid-area: dzien; display: flex; gap: .5rem; align-items: baseline; color: var(--tekst); } .termin-dzien::after { content: attr(data-godzina); font-weight: 600; letter-spacing: -.02em; } .termin-godzina { display: none; } .termin-opis { grid-area: opis; font-size: .85rem; } .termin .przycisk { grid-area: akcja; } } /* ================= 14b. WYBOR STREFY (landing) ================= */ /* Dwa okna. Otwarte jest calym linkiem i niesie termin; zapowiedziane nie jest klikalne i mowi to wprost - znacznikiem i wygaszonym zdjeciem. */ .wybor { padding: var(--o7) 0 var(--o8); } .wybor-naglowek { display: grid; gap: var(--o4); max-width: 58rem; padding-bottom: var(--o6); } .wybor-naglowek h1 { max-width: 12ch; } .strefy-wybor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o4); } .okno { position: relative; border: 1px solid var(--linia); background: var(--tlo-2); } .okno-link { display: block; color: inherit; text-decoration: none; height: 100%; } .okno-obraz { overflow: hidden; aspect-ratio: 16 / 9; background: var(--tusz-900); } .okno-obraz img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--spokojnie, cubic-bezier(.2,.8,.2,1)); } .okno-tresc { display: grid; gap: var(--o3); padding: var(--o5) var(--o4) var(--o4); } .okno-tresc h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); } .okno-tresc h2 .epoka { color: var(--akcent-tekst); } .okno-tresc p { margin: 0; } .okno-termin { font-size: .95rem; color: var(--tekst-3); } .okno-termin strong { color: var(--tekst); font-weight: 600; } .okno .przycisk { justify-self: start; margin-top: var(--o2); } .okno-otwarte .okno-link:hover .okno-obraz img { transform: scale(1.04); } .okno-otwarte .okno-link:hover .przycisk { --tlo-p: var(--biel); --tekst-p: var(--tusz-950); --obrys-p: var(--biel); } .okno-otwarte .okno-link:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; } /* Zapowiedz: ta sama rama, mniej swiatla. Zdjecie przygaszone, bo strefy jeszcze nie ma. */ .okno-wkrotce .okno-obraz img { opacity: .38; filter: saturate(.5); } .okno-wkrotce .okno-tresc h2, .okno-wkrotce .okno-tresc p { color: var(--tekst-3); } .okno-wkrotce .okno-tresc h2 .epoka { color: var(--tekst-2); } .znacznik { display: inline-block; margin-left: .5em; vertical-align: .3em; font-size: .42em; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: var(--tekst-3); border: 1px solid var(--linia); padding: .35em .7em; } /* Fakty jako lista w kolumnie tekstu (landing), a nie pasek pod hero */ .fakty-lista { border-top: 1px solid var(--linia); margin-top: var(--o4); padding-top: var(--o4); } @media (max-width: 899px) { .wybor { padding: var(--o6) 0 var(--o7); } .strefy-wybor { grid-template-columns: 1fr; } } /* ================= 14. STREFY (karty wydarzen) ================= */ .strefy { padding: var(--o8) 0; } .strefy-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--o5); } .strefa-karta { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--o3); align-content: start; } .strefa-karta .obraz { overflow: hidden; background: var(--tusz-900); aspect-ratio: 16 / 10; } .strefa-karta-wkrotce .obraz img { opacity: .38; filter: saturate(.5); } .strefa-karta-wkrotce h3, .strefa-karta-wkrotce p { color: var(--tekst-3); } .strefa-karta .obraz img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--wyjscie); } .strefa-karta:hover .obraz img { transform: scale(1.04); } .strefa-karta h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); } .strefa-karta p { font-size: .98rem; margin: 0; } .strefa-karta .drobne { font-size: .82rem; } .strefa-karta .przycisk { justify-self: start; } /* ================= 15. MIEJSCE ================= */ .miejsce { padding: var(--o8) 0; } .miejsce-siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--o5) var(--o4); } /* Adres jest blokiem glownym, reszta lista pod nim: te cztery rzeczy nie sa rownowazne, wiec nie stoja w czterech rownych kolumnach. */ .miejsce-glowne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--o5) var(--o7); align-items: start; } .miejsce-glowne h3 { margin-bottom: var(--o2); } .miejsce-glowne address { font-style: normal; color: var(--tekst); font-size: 1.15rem; line-height: 1.5; } .miejsce-lista { display: grid; gap: var(--o3); } .miejsce-lista li { padding-top: var(--o3); border-top: 1px solid var(--linia); color: var(--tekst-2); max-width: var(--miara); } .miejsce-lista b { display: block; color: var(--tekst-mocny); font-weight: 600; font-size: .95rem; margin-bottom: .2rem; } @media (max-width: 899px) { .miejsce-glowne { grid-template-columns: 1fr; } } .miejsce-siatka > div { display: grid; gap: var(--o2); align-content: start; border-top: 1px solid var(--linia); padding-top: var(--o3); } .miejsce-siatka h3 { font-size: 1.05rem; letter-spacing: -.01em; } .miejsce-siatka p, .miejsce-siatka address { font-size: .98rem; font-style: normal; margin: 0; } /* ================= 16. REZERWACJA (pas koncowy) ================= */ .rezerwacja { padding: var(--o8) 0; border-top: 1px solid var(--linia); background: var(--tlo-2); } .rezerwacja-uklad { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--o5); align-items: center; } .rezerwacja h2 { max-width: 18ch; } .rezerwacja .drobne { margin-top: var(--o3); } @media (max-width: 899px) { .rezerwacja { padding: var(--o7) 0; } .rezerwacja-uklad { grid-template-columns: 1fr; } } /* ================= 17. STOPKA ================= */ .stopka { padding: var(--o6) 0 var(--o5); border-top: 1px solid var(--linia); } .stopka-uklad { display: grid; grid-template-columns: auto 1fr auto; gap: var(--o5); align-items: center; } .stopka-organizator { display: flex; align-items: center; gap: var(--o3); } .stopka-organizator img { height: 34px; width: auto; opacity: .9; } .stopka-organizator span { font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; color: var(--tekst-3); } .stopka-linki { display: flex; flex-wrap: wrap; gap: var(--o3) var(--o4); justify-content: center; } .stopka-linki a { font-size: .82rem; color: var(--tekst-2); text-decoration: none; } .stopka-linki a:hover { color: var(--tekst-mocny); } .stopka-prawa { font-size: .82rem; color: var(--tekst-3); text-align: right; } @media (max-width: 899px) { .stopka-uklad { grid-template-columns: 1fr; gap: var(--o4); } .stopka-linki { justify-content: flex-start; } .stopka-prawa { text-align: left; } } /* ================= 18. KSIEGA WZOROW ================= */ .ksiega { padding: var(--o6) 0 var(--o8); } .ksiega-sekcja { padding: var(--o7) 0 0; } .ksiega-sekcja + .ksiega-sekcja { border-top: 1px solid var(--linia); margin-top: var(--o7); } .probki { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--o3); } .probka { display: grid; gap: .35rem; font-size: .9rem; } .probka-kolor { height: 84px; border: 1px solid var(--linia); } .probka code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .78rem; color: var(--tekst-3); } .probka .rola { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tekst-2); } .wzor { border: 1px solid var(--linia); padding: var(--o5); margin-top: var(--o4); display: grid; gap: var(--o4); } .wzor.jasny { background: var(--tlo-2); } .wzor-rzad { display: flex; flex-wrap: wrap; gap: var(--o3); align-items: center; } .skala > div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--o4); align-items: baseline; padding: var(--o3) 0; border-bottom: 1px solid var(--linia); } .rytm { display: flex; align-items: flex-end; gap: var(--o3); } .rytm div { background: var(--akcent); width: 2.4rem; display: grid; align-items: end; justify-items: center; font-size: .68rem; color: var(--na-akcencie); font-weight: 600; } .tabela { border-collapse: collapse; width: 100%; font-size: .95rem; } .tabela th, .tabela td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--linia); vertical-align: top; } .tabela th { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; color: var(--tekst-3); } .tabela code { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: var(--tekst-2); } .kropka { display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .5em; border: 1px solid var(--linia); } .lista-zasad li { padding: var(--o3) 0; border-bottom: 1px solid var(--linia); max-width: var(--miara); } .lista-plikow li { padding: var(--o2) 0; border-bottom: 1px solid var(--linia); } .lista-plikow code { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; color: var(--akcent-tekst); } /* ================= 19. RUCH ================= */ /* Bez GSAP (brak JS albo bledna siec) wszystko stoi w stanie koncowym: zadna tresc nie jest ukryta CSS-em. Stany startowe ustawia wylacznie JS. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } } /* ================= 20. AFISZ: swiat STRONY GLOWNEJ ================= Strona glowna jest kasa biletowa, a nie wystawa: ma sprzedac seans, wiec idzie w cieplejszy, afiszowy rejestr - waski Oswald w naglowkach, zloty sygnal i karty wydarzen. Podstrona strefy zostaje przy chlodnym tuszu i ultramarynie, bo tam prowadzi malarstwo. Zloto dziala tu pod jednym warunkiem, ktory wczesniej byl zlamany: fotografia musi byc CIEMNA. Zmierzone wczesniej zlanie akcentu ze zdjeciem bralo sie z jasnych fresków; tutaj kadry sa przygaszone (brightness .55), wiec zloto jest jedynym jasnym kolorem na ekranie. Kazda zmiana jasnosci zdjec wymaga ponownego sprawdzenia tego zalozenia. */ body.afisz { --tusz-950: #0b0a08; --tusz-900: #141311; --tusz-850: #1b1917; --tusz-700: #2b2823; --tusz-rgb: 11 10 8; --popiol-500: #8f8a82; --popiol-400: #a8a29a; --biel-100: #f5f2ee; --zloto-500: #f2c14e; --zloto-700: #d9a441; --akcent: var(--zloto-500); --akcent-ciemny: var(--zloto-700); --akcent-tekst: var(--zloto-500); --na-akcencie: var(--tusz-950); --fokus: var(--zloto-500); --pismo-afisz: 'Oswald', 'Archivo', system-ui, sans-serif; /* Afisz nie ma paska stanu: pierwszy ekran odejmuje tylko naglowek. */ --pasek-h: 0px; } /* Naglowki afisza: waski krój, wersaliki, dodatni tracking - rejestr plakatu. */ body.afisz h1, body.afisz h2, body.afisz .karta-seansu h3, body.afisz .przycisk { font-family: var(--pismo-afisz); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; } body.afisz h1 { font-size: clamp(2.4rem, 1.2rem + 5.4vw, 5.2rem); line-height: 1.02; font-weight: 600; } body.afisz h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem); letter-spacing: .06em; } body.afisz .przycisk { letter-spacing: .1em; font-weight: 500; } /* ---- Hero afisza: tekst po lewej, przygaszony kadr po prawej ---- */ /* ---- Hero afisza: PELNY KADR, tresc wpisana w obraz ---- Poprzednia wersja trzymala zdjecie w pudelku po prawej i gasila je do szarosci, a pod przyciskami zostawalo martwe pole. Afisz tak nie dziala: obraz jest calym pierwszym ekranem, a tekst siedzi w jego dolnym rogu, jak na plakacie. Kurtyna idzie od dolu i od lewej, wiec tekst ma swoj kontrast niezaleznie od kadru. */ .afisz-hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--naglowek-h) - var(--pasek-h, 40px)); display: grid; grid-template-rows: 1fr auto; } .afisz-hero-tlo { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--tusz-1000); margin: 0; } /* Podpis nalezy do OBRAZU, nie do stosu tekstu pod przyciskami: siedzi w prawym dolnym rogu kadru, gdzie kurtyna jest juz gesta. */ .afisz-hero-tlo figcaption { position: absolute; right: var(--margines); bottom: var(--o3); z-index: 1; max-width: 34ch; text-align: right; font-size: .78rem; color: var(--tekst-2); } @media (max-width: 899px) { .afisz-hero-tlo figcaption { left: var(--margines); text-align: left; max-width: none; } } .afisz-hero-tlo img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; filter: brightness(.58) saturate(.95); } .afisz-hero-tlo::after { content: ; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--tusz-rgb) / .5) 0, rgb(var(--tusz-rgb) / .1) 22%, rgb(var(--tusz-rgb) / .45) 58%, rgb(var(--tusz-rgb) / .96) 100%); } .afisz-hero-tresc { position: relative; display: grid; align-content: end; justify-items: start; gap: 0; padding: var(--o7) 0 var(--o6); } /* Rytm bloku afisza: kazdy odstep ma zadanie, zamiast jednego wspolnego gap. Tytul i obietnica trzymaja sie blisko, data odbija sie od nich, akcje maja wlasne powietrze. */ .afisz-hero-tresc > * { max-width: 46rem; } .afisz-bilet { margin-top: var(--o5); } .afisz-hero .akcje { margin-top: var(--o4); } /* Kurtyna pod typografia: pelna szerokosc okna, gesta po lewej, przezroczysta po prawej. Osobna warstwa, bo gradient na calym kadrze nie da sie ustawic tak, zeby jednoczesnie chronil tekst i zostawil obraz jasnym. Progi zmierzone na pikselach zrzutu (patrz DESIGN.md), nie oszacowane. */ .afisz-hero-tresc::before { content: ""; position: absolute; z-index: -1; inset-block: -3rem 0; left: 50%; transform: translateX(-50%); width: 100vw; background: linear-gradient(90deg, rgb(var(--tusz-rgb) / .96) 0, rgb(var(--tusz-rgb) / .93) 46%, rgb(var(--tusz-rgb) / .5) 74%, transparent 92%); pointer-events: none; } .afisz-hero h1 { max-width: 15ch; text-shadow: 0 2px 40px rgb(0 0 0 / .55); } .afisz-hero .obietnica { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); color: var(--tekst); max-width: 44ch; margin: var(--o5) 0 0; } /* Bilet: data jest zdarzeniem typograficznym, nie drobnym wierszem. */ .afisz-bilet { display: grid; gap: .35rem; padding-left: var(--o3); border-left: 2px solid var(--akcent); } .afisz-bilet .kiedy { font-family: var(--pismo-afisz); font-weight: 600; text-transform: uppercase; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem); letter-spacing: .04em; color: var(--akcent); margin: 0; } .afisz-bilet .gdzie { font-size: .95rem; color: var(--tekst-2); margin: 0; } .afisz-hero .akcje { display: flex; flex-wrap: wrap; gap: var(--o3); align-items: center; margin-top: var(--o3); } .afisz-hero .zrodlo { font-size: .78rem; color: var(--tekst-2); margin: 0; } /* Stopa afisza: cztery fakty jak na dole plakatu. */ .afisz-stopa { border-top: 1px solid var(--linia); background: rgb(var(--tusz-rgb) / .82); backdrop-filter: blur(8px); } .afisz-stopa .fakty-w { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; } .afisz-stopa .fakty-w > div { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; padding: var(--o4) var(--o4) var(--o4) 0; } .afisz-stopa .fakty-w > div + div { border-left: 1px solid var(--linia); padding-left: var(--o4); } .afisz-stopa dt { font-family: var(--pismo-afisz); font-size: .72rem; font-weight: 400; text-transform: uppercase; letter-spacing: .16em; color: var(--tekst-3); } .afisz-stopa dd { margin: 0; font-family: var(--pismo-afisz); font-size: 1.05rem; font-weight: 500; letter-spacing: .02em; color: var(--tekst-mocny); text-transform: uppercase; } .afisz-zrodlo { font-size: .78rem; color: var(--tekst-3); max-width: none; margin: 0 auto; padding: 0 0 var(--o3); } /* ---- Karty seansow: obraz, tytul, data, miejsce, cena, akcja ---- */ .seanse { padding: var(--o7) 0 var(--o8); } .seanse-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o4); margin-top: var(--o5); } .karta-seansu { display: flex; flex-direction: column; background: var(--tlo-2); border: 1px solid var(--linia); } .karta-seansu .obraz { overflow: hidden; aspect-ratio: 16 / 10; background: var(--tusz-900); } .karta-seansu .obraz img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.95); transition: transform 600ms cubic-bezier(.2,.8,.2,1), filter 400ms linear; } .karta-seansu-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .karta-seansu-link:hover .obraz img { transform: scale(1.04); filter: brightness(.78) saturate(1); } .karta-seansu-tresc { display: grid; gap: var(--o2); padding: var(--o4); flex: 1; align-content: start; } .karta-seansu h3 { font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); letter-spacing: .04em; color: var(--tekst-mocny); } .karta-seansu .kiedy { font-family: var(--pismo-afisz); font-size: 1.05rem; letter-spacing: .04em; color: var(--akcent); margin: 0; } .karta-seansu .gdzie { font-size: .92rem; color: var(--tekst-3); margin: 0; } .karta-seansu p { margin: 0; font-size: .98rem; } .karta-seansu .przycisk { margin-top: var(--o3); justify-self: start; } .karta-seansu-wkrotce .obraz img { filter: brightness(.32) saturate(.4); } .karta-seansu-wkrotce h3, .karta-seansu-wkrotce p { color: var(--tekst-3); } .karta-seansu-wkrotce .kiedy { color: var(--tekst-2); } /* ---- Pasmo zdjec: "zobacz, jak to wyglada" ---- */ .pasmo { padding: var(--o7) 0; } .pasmo-tor { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--o3); margin-top: var(--o5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--o2); } .pasmo-tor figure { margin: 0; scroll-snap-align: start; } .pasmo-tor img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--tusz-900); filter: brightness(.8); } .pasmo-tor figcaption { margin-top: var(--o2); font-size: .82rem; color: var(--tekst-3); } /* ---- Pytania ---- */ .pytania { padding: var(--o7) 0; background: var(--tlo-2); border-block: 1px solid var(--linia); } .pytania-lista { display: grid; gap: 0; margin-top: var(--o5); max-width: 62rem; } .pytania-lista > div { padding: var(--o4) 0; border-top: 1px solid var(--linia); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--o4); align-items: start; } .pytania-lista dt { font-family: var(--pismo-afisz); font-size: 1.05rem; letter-spacing: .03em; color: var(--tekst-mocny); text-transform: uppercase; } .pytania-lista dd { margin: 0; color: var(--tekst-2); } @media (max-width: 899px) { .afisz-hero-tlo img { object-position: center 70%; } .afisz-hero-tresc { padding: var(--o7) 0 var(--o4); } .seanse-siatka { grid-template-columns: 1fr; } .afisz-stopa .fakty-w { grid-template-columns: repeat(2, 1fr); } .afisz-stopa .fakty-w > div { padding: var(--o3) var(--o3) var(--o3) 0; } .afisz-stopa .fakty-w > div + div { padding-left: var(--o3); } .afisz-stopa .fakty-w > div:nth-child(3) { border-left: 0; padding-left: 0; } .afisz-stopa .fakty-w > div:nth-child(n+3) { border-top: 1px solid var(--linia); } .pytania-lista > div { grid-template-columns: 1fr; gap: var(--o2); } } /* ================= 21. PODSTRONY AFISZA ================= */ /* Tytul podstrony: jeden ekran wejscia, bez zdjecia. Nie powiela hero. */ .strona-tytul { padding: var(--o7) 0 var(--o5); border-bottom: 1px solid var(--linia); } .strona-tytul h1 { max-width: 18ch; } .strona-tytul .wiodacy { margin-top: var(--o4); max-width: 52ch; } /* Pytania jako karty, nie lista z kreska pod kazdym wierszem: szesc wierszy oddzielonych wloskami czyta sie jak tabela specyfikacji, czyli jak wypelniacz. */ .pytania-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o4); margin-bottom: var(--o5); } .pytania-siatka article { border: 1px solid var(--linia); padding: var(--o4); background: var(--tlo-2); } .pytania-siatka h2 { font-size: 1.1rem; letter-spacing: .04em; margin-bottom: var(--o2); color: var(--tekst-mocny); } .pytania-siatka p { margin: 0; } /* Panorama sali na pelna szerokosc, podpis pod obrazem (nie na nim) */ .miejsce-kadr { margin: 0; } .miejsce-kadr img { width: 100%; height: clamp(240px, 42vh, 460px); object-fit: cover; background: var(--tusz-900); filter: brightness(.72); } .miejsce-kadr figcaption { padding: var(--o3) 0; font-size: .85rem; color: var(--tekst-3); border-bottom: 1px solid var(--linia); } @media (max-width: 899px) { .pytania-siatka { grid-template-columns: 1fr; } .strona-tytul { padding: var(--o6) 0 var(--o4); } } /* Nota o wizualizacji w stopie afisza: podpis obrazu nie moze chowac sie za pasmem faktow, wiec stoi razem z nim, na plaskiej czerni. */ /* ================= 22. KASA (osadzona sprzedaz Evenea) ================= Ramka trzyma cudza strone, wiec dostaje wlasna, jasna plyte: cudzy interfejs jest bialy i nie da sie go przemalowac przez granice origin. Pod ramka stoi wyjscie awaryjne, bo platnosci w ramce potrafia sie wywrocic na przekierowaniu 3-D Secure, a kupujacy nie moze wtedy zostac bez drogi. */ .bilety { padding: var(--o7) 0 var(--o8); } .kasa { border: 1px solid var(--linia); background: #ffffff; } .kasa iframe { display: block; width: 100%; height: clamp(720px, 92vh, 1180px); border: 0; } .kasa-awaria { margin-top: var(--o3); font-size: .9rem; color: var(--tekst-3); } @media (max-width: 899px) { .kasa iframe { height: clamp(640px, 88vh, 900px); } }