/* ========================================================================== Gabriela i Maciej - duet akustyczny Strona prowadzi przez trzy akty: dzien -> noc -> swit. Kolory sceny przelacza JS przez [data-scene] na ; CSS uzywa wylacznie zmiennych --bg / --ink / --accent, nigdy surowych hexow. Szczegoly w DESIGN.md. ========================================================================== */ :root { /* --- Akt 1: dzien - surowy len --- */ --day-bg: #f4efe3; --day-bg-rgb: 244, 239, 227; --day-bg-alt: #eae2d0; --day-bg-alt-rgb: 234, 226, 208; --day-ink: #212a1e; --day-ink-rgb: 33, 42, 30; /* --- Akt 3: noc --- */ /* Wegiel, nie zielen: plyta winylowa i zloto potrzebuja neutralnej czerni, zeby czern plyty nie zrobila sie bura. Zielen niesie akt dzienny. */ --night-bg: #0b0c0b; --night-bg-rgb: 11, 12, 11; --night-bg-alt: #141613; --night-bg-alt-rgb: 20, 22, 19; --night-ink: #f4efe4; --night-ink-rgb: 244, 239, 228; /* --- Akt 4: swit - ciepla ziemia --- */ --dawn-bg: #191512; --dawn-bg-rgb: 25, 21, 18; --dawn-bg-alt: #221c17; --dawn-bg-alt-rgb: 34, 28, 23; /* --- Akcenty: ciemna zielen prowadzi w dzien, zloto swieci w nocy --- */ --forest: #33452f; --forest-rgb: 51, 69, 47; --forest-deep: #22301f; --forest-deep-rgb: 34, 48, 31; --gold: #bf9b3f; --gold-rgb: 191, 155, 63; --gold-warm: #dcb763; --gold-warm-rgb: 220, 183, 99; /* Zloto na lnie nie wyrabia kontrastu (2.9:1) - do akcentow TEKSTOWYCH w akcie dziennym sluzy ten przyciemniony wariant (4.2:1). */ --gold-ink: #8a6f24; --gold-ink-rgb: 138, 111, 36; /* --- Zmienne sceny (nadpisywane przez [data-scene]) --- */ --bg: var(--day-bg); --bg-rgb: var(--day-bg-rgb); --bg-alt: var(--day-bg-alt); --ink: var(--day-ink); --ink-rgb: var(--day-ink-rgb); --ink-soft: rgba(var(--day-ink-rgb), 0.7); --ink-faint: rgba(var(--day-ink-rgb), 0.46); --line: rgba(var(--day-ink-rgb), 0.14); --line-strong: rgba(var(--day-ink-rgb), 0.26); --accent: var(--gold); --accent-rgb: var(--gold-rgb); --kicker: var(--forest); /* --- Typografia --- */ /* Spectral, nie Fraunces: Fraunces rysuje polskie ogonki jako odchylony przecinek doczepiony z boku litery. Spectral osadza je poprawnie pod litera - przy nazwisku "Mieso" i slowie "najczestsze" to widac od razu. */ --font-display: "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; /* --- Uklad --- */ --max: 1180px; --max-wide: 1440px; --pad: clamp(20px, 5vw, 72px); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px; /* --- Ruch --- */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-back: cubic-bezier(0.34, 1.2, 0.4, 1); /* Wykladnicze wyhamowanie - szybki start, dlugie dojscie. To ono daje wrazenie "premium": ruch jest zdecydowany, ale nigdy nie zatrzymuje sie gwaltownie. Uzywane przy wjezdzie tresci hero i blokow "Na scenie". */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 180ms; --t-base: 400ms; --t-slow: 700ms; --t-scene: 1100ms; /* --- Glebia --- */ --shadow-raised: 0 2px 6px rgba(var(--day-ink-rgb), 0.05), 0 8px 20px rgba(var(--day-ink-rgb), 0.06); --shadow-lifted: 0 8px 18px rgba(var(--day-ink-rgb), 0.09), 0 22px 48px rgba(var(--day-ink-rgb), 0.12); --shadow-float: 0 18px 40px rgba(var(--day-ink-rgb), 0.12), 0 44px 90px rgba(var(--day-ink-rgb), 0.16); --glow-gold: 0 0 0 1px rgba(var(--gold-rgb), 0.22), 0 18px 60px rgba(var(--gold-rgb), 0.1); } body[data-scene="night"] { --bg: var(--night-bg); --bg-rgb: var(--night-bg-rgb); --bg-alt: var(--night-bg-alt); --ink: var(--night-ink); --ink-rgb: var(--night-ink-rgb); --ink-soft: rgba(var(--night-ink-rgb), 0.72); --ink-faint: rgba(var(--night-ink-rgb), 0.48); --line: rgba(var(--night-ink-rgb), 0.15); --line-strong: rgba(var(--night-ink-rgb), 0.28); --accent: var(--gold); --accent-rgb: var(--gold-rgb); --kicker: var(--gold); } body[data-scene="dawn"] { --bg: var(--dawn-bg); --bg-rgb: var(--dawn-bg-rgb); --bg-alt: var(--dawn-bg-alt); --ink: var(--night-ink); --ink-rgb: var(--night-ink-rgb); --ink-soft: rgba(var(--night-ink-rgb), 0.72); --ink-faint: rgba(var(--night-ink-rgb), 0.48); --line: rgba(var(--night-ink-rgb), 0.16); --line-strong: rgba(var(--night-ink-rgb), 0.3); --accent: var(--gold-warm); --accent-rgb: var(--gold-warm-rgb); --kicker: var(--gold-warm); } /* ========================================================================== Podstawy ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.72; letter-spacing: 0.01em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; transition: background-color var(--t-scene) var(--ease-soft), color var(--t-scene) var(--ease-soft); } /* Zmiana aktu ma przeciagac kolory tekstu i linii razem z tlem. Komponenty z wlasnym `transition` nadpisuja te regule swiadomie. */ p, h1, h2, h3, dt, dd, li, span, strong, b, em, i, summary, a, figure, article, section { transition: color var(--t-scene) var(--ease-soft), border-color var(--t-scene) var(--ease-soft); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } iframe { max-width: 100%; border: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } [id] { scroll-margin-top: 96px; } .skip-link { position: absolute; top: -60px; left: var(--pad); z-index: 60; padding: 12px 20px; border-radius: 0 0 6px 6px; background: var(--ink); color: var(--bg); font-size: 0.82rem; font-weight: 600; transition: top var(--t-fast) var(--ease-out); } .skip-link:focus { top: 0; } /* ========================================================================== Typografia ========================================================================== */ h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; text-wrap: balance; } p { text-wrap: pretty; } .section-title { font-size: clamp(1.9rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.015em; max-width: 20ch; } .section-title-glow { background: linear-gradient(96deg, var(--night-ink) 32%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-kicker, .eyebrow { margin: 0 0 var(--s-4); color: var(--kicker); font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; } .section-note { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.08rem); } /* ========================================================================== Sekcje ========================================================================== */ .section { position: relative; max-width: var(--max-wide); margin: 0 auto; padding: clamp(var(--s-9), 12vh, var(--s-11)) var(--pad); } .section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: clamp(var(--s-5), 4vw, var(--s-8)); align-items: end; margin-bottom: clamp(var(--s-7), 6vw, var(--s-9)); } /* ========================================================================== Naglowek strony ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: var(--s-5); padding: 22px var(--pad); transition: padding 240ms var(--ease-out), background-color 240ms var(--ease-soft), border-color 240ms var(--ease-soft), box-shadow 240ms var(--ease-soft); border-bottom: 1px solid transparent; } /* Nad zdjeciem hero nawigacja lezy na ciemnej koronie drzew. Zanikajaca poswiata w kolorze tla utrzymuje kontrast, nie zaslaniajac fotografii. */ /* Nawigacja rozciaga sie nad obiema kolumnami hero, wiec czesc linkow lezy na koronach drzew. Zamiast pasa gradientu (zostawial na zdjeciu widoczna pozioma krawedz) naglowek ma wlasne, lekkie tlo od samej gory - fotografia przeswituje przez rozmycie, a tekst jest czytelny niezaleznie od kadru. */ .site-header { background: rgba(var(--bg-rgb), 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .site-header.is-scrolled { padding-top: 12px; padding-bottom: 12px; border-bottom-color: var(--line); background: rgba(var(--bg-rgb), 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .site-mark { display: inline-flex; align-items: center; /* Flex traktuje kazdy wezel tekstu jak osobny element i zjada biale znaki - bez tego odstepu wychodzi "Gabriela&Maciej". */ gap: 0.24em; /* Odstep pionowy, a nie sama wysokosc - cel dotykowy ma miec 44 px, a tekst bez tego ma ich raptem 16. */ min-height: 44px; margin-right: auto; color: var(--ink); font-family: var(--font-display); font-size: clamp(0.98rem, 1.5vw, 1.16rem); font-weight: 500; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; } .site-mark i { color: var(--kicker); font-style: normal; } .site-mark:hover i { color: var(--ink); } .site-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .site-nav a { position: relative; padding: 10px 0; color: var(--ink-soft); transition: color var(--t-fast) var(--ease-out); } .site-nav a::after { content: ""; position: absolute; inset: auto 0 4px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 200ms var(--ease-out); } .site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); } .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; } .site-nav a[aria-current="true"] { color: var(--ink); } .site-nav a[aria-current="true"]::after { transform: scaleX(1); } .menu-toggle { display: none; } .social-links { display: flex; align-items: center; gap: var(--s-3); } .social-links a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft); transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .social-links a svg { width: 17px; height: 17px; } .social-links a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); } .social-links a:active { transform: translateY(0) scale(0.94); } /* ========================================================================== Przyciski ========================================================================== */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-soft), color 220ms var(--ease-soft), border-color 220ms var(--ease-soft), box-shadow 220ms var(--ease-soft); } .button-primary { background: var(--ink); color: var(--bg); } .button-primary:hover { background: var(--accent); /* Ciemna zielen na zlocie, nie len - jasny tekst na zlocie daje 2.3:1. */ color: var(--day-ink); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.32); } .button-primary:active { transform: translateY(0) scale(0.985); box-shadow: none; } .button-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .button-ghost { border-color: var(--line-strong); background: transparent; color: var(--ink); } .button-ghost:hover { border-color: var(--ink); background: rgba(var(--ink-rgb), 0.05); transform: translateY(-2px); } .button-ghost:active { transform: translateY(0) scale(0.985); } /* ========================================================================== Reveal ========================================================================== */ .reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 90ms; } .reveal-delay-2 { transition-delay: 180ms; } .reveal-delay-3 { transition-delay: 270ms; } /* ========================================================================== Hero Fotografia na pelna szerokosc, tekst lezy na niej. Czytelnosc daje PRZYCIEMNIENIE lewej strony kadru - tam, gdzie zdjecie i tak jest w cieniu (sciezka, pnie) - plus jasny tekst. Wczesniejsza wersja rozjasniala fotografie welonem w kolorze lnu i to bylo zrodlo problemu: rozjasnianie pierze ze zdjecia kolor i kontrast, przyciemnianie poglebia je. Na ciemnym tle zloto ma kontrast 6.7:1, wiec wreszcie moze byc akcentem. ========================================================================== */ .hero { position: relative; display: flex; align-items: center; min-height: 100svh; max-width: none; padding: 0; overflow: hidden; isolation: isolate; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media img { width: 100%; height: 100%; object-fit: cover; /* Na szerokim ekranie kadr jest przesuniety w prawo, zeby para wypadla obok kolumny tekstu. Na waskim to samo przesuniecie ucinalo Gabriele - dlatego pionowy kadr wraca do srodka (regula w media query nizej). */ object-position: 62% 48%; transform: scale(1.06); will-change: transform; } @media (max-width: 767px) { /* Kadr pionowy ma pare wysrodkowana w poziomie, wiec bez przesuwania. W pionie przy `cover` na waskim ekranie widac cala wysokosc zdjecia - dlatego tresc schodzi na dol (regula ponizej), zeby nie zaslaniac twarzy. */ .hero-media img { object-position: 50% 50%; } .hero { align-items: flex-end; } } /* Scrim w ciemnej zieleni, nie w czystej czerni - trzyma sie palety i nie robi z lasu czarno-bialej plamy. */ .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(101deg, rgba(14, 20, 13, 0.88) 0%, rgba(14, 20, 13, 0.80) 18%, rgba(14, 20, 13, 0.64) 32%, rgba(14, 20, 13, 0.42) 44%, rgba(14, 20, 13, 0.22) 55%, rgba(14, 20, 13, 0.08) 66%, rgba(14, 20, 13, 0) 78%), linear-gradient(0deg, rgba(14, 20, 13, 0.5) 0%, rgba(14, 20, 13, 0.12) 22%, rgba(14, 20, 13, 0) 42%); } @media (max-width: 767px) { /* Mobilny scrim narasta od dolu i wygasa przed strefa twarzy. Regula jest po wariancie bazowym, wiec boczny gradient z desktopu jej nie nadpisuje. */ .hero-scrim { background: linear-gradient(0deg, rgba(14, 20, 13, 0.93) 0%, rgba(14, 20, 13, 0.87) 24%, rgba(14, 20, 13, 0.66) 40%, rgba(14, 20, 13, 0.36) 54%, rgba(14, 20, 13, 0.13) 68%, rgba(14, 20, 13, 0.03) 82%, rgba(14, 20, 13, 0.06) 100%); } } .hero-copy { position: relative; width: 100%; max-width: calc(var(--max-wide) + var(--pad) * 2); margin: 0 auto; padding: 132px var(--pad) clamp(var(--s-8), 12vh, var(--s-10)); } /* --- wjazd z boku --- */ /* Kazdy element wchodzi zza lewej krawedzi wlasnej maski. Ruch jest poziomy i jednokierunkowy - stad wrazenie spokoju zamiast skakania. */ .hero-eyebrow, .hero-line, .hero-lead, .hero-actions { overflow: hidden; } .hero-eyebrow > span, .hero-line > span, .hero-lead, .hero-actions { display: block; transform: translate3d(-24px, 0, 0); opacity: 0; transition: transform 1150ms var(--ease-premium), opacity 900ms var(--ease-out); } .hero-line > span { white-space: nowrap; transform: translate3d(-40px, 0, 0); } body.is-ready .hero-eyebrow > span, body.is-ready .hero-line > span, body.is-ready .hero-lead, body.is-ready .hero-actions { transform: none; opacity: 1; } .hero-eyebrow > span { transition-delay: 120ms; } .hero-line:nth-child(1) > span { transition-delay: 240ms; } .hero-line:nth-child(2) > span { transition-delay: 330ms; } .hero-line:nth-child(3) > span { transition-delay: 420ms; } body.is-ready .hero-lead { transition-delay: 560ms; } body.is-ready .hero-actions { transition-delay: 660ms; } /* --- typografia hero --- */ .hero-eyebrow { margin: 0 0 var(--s-5); color: var(--gold-warm); } .hero-title { margin: 0 0 clamp(var(--s-4), 3.4vh, var(--s-6)); max-width: 15ch; font-size: clamp(2.6rem, min(6.4vw, 10.5vh), 6.4rem); font-weight: 400; line-height: 1.0; letter-spacing: -0.024em; color: var(--night-ink); } .hero-line { display: block; } .hero-line > span i { font-style: italic; font-size: 0.6em; color: rgba(var(--night-ink-rgb), 0.55); padding-right: 0.08em; } .hero-lead { max-width: 44ch; margin: 0 0 clamp(var(--s-5), 4vh, var(--s-7)); color: rgba(var(--night-ink-rgb), 0.84); font-size: clamp(1.02rem, 1.25vw, 1.18rem); line-height: 1.72; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); /* maska ucinalaby cien przycisku w stanie hover */ overflow: visible; padding-top: 2px; } @media (max-width: 767px) { /* Ten blok lezy po stylach bazowych, aby shorthand `padding` i typografia desktopowa nie nadpisywaly mobilnego ulozenia tresci. */ .hero-copy { padding-top: 0; padding-bottom: clamp(10px, 2vh, 20px); } .hero-eyebrow { margin-bottom: var(--s-4); } .hero-title { margin-bottom: clamp(10px, 2vh, 24px); } .hero-lead { margin-bottom: clamp(16px, 2.6vh, 32px); font-size: 1rem; line-height: 1.62; } } /* Przyciski hero zyja na ciemnym kadrze niezaleznie od aktu strony. */ .hero .button-primary { background: var(--night-ink); color: var(--forest-deep); } .hero .button-primary:hover { background: var(--gold-warm); color: var(--forest-deep); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); } .hero .button-ghost { border-color: rgba(var(--night-ink-rgb), 0.42); color: var(--night-ink); } .hero .button-ghost:hover { border-color: var(--night-ink); background: rgba(var(--night-ink-rgb), 0.1); } /* ========================================================================== Manifest ========================================================================== */ .manifest { position: relative; padding: clamp(var(--s-8), 9vh, var(--s-10)) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt); transition: background-color var(--t-scene) var(--ease-soft), border-color var(--t-scene) var(--ease-soft); } .manifest-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } .manifest-kicker { margin: 0 0 var(--s-4); color: var(--kicker); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .manifest-statement { max-width: 34ch; margin: 0 0 var(--s-8); font-family: var(--font-display); font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.16; letter-spacing: -0.015em; } .manifest-motifs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; } .manifest-motifs li { padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.96rem; } .manifest-motifs b { display: block; margin-bottom: 6px; color: var(--kicker); font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; } /* ========================================================================== O nas ========================================================================== */ .story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--s-5), 5vw, var(--s-9)); margin-bottom: clamp(var(--s-8), 9vw, var(--s-10)); } .story-copy p { margin: 0 0 var(--s-5); max-width: 60ch; color: var(--ink-soft); font-size: 1.05rem; } .story-copy p:last-child { margin-bottom: 0; } .profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--s-6), 5vw, var(--s-9)); } .profile-card { perspective: 1000px; } .profile-card__inner { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 420ms var(--ease-out); } .profile-card.is-tilting .profile-card__inner { transition-duration: 90ms; } .profile-media { overflow: hidden; border-radius: 4px; margin-bottom: var(--s-5); box-shadow: var(--shadow-raised); transform: translateZ(28px); transition: box-shadow var(--t-base) var(--ease-out); } .profile-card:hover .profile-media { box-shadow: var(--shadow-float); } .profile-media img { width: 100%; /* Kadr poziomy - portrety "O nas" sa sceniczne i odcinaja sie tym od pionowych kafli galerii z sesji plenerowej. */ aspect-ratio: 3 / 2; object-fit: cover; transform: scale(1.02); transition: transform 900ms var(--ease-out); } .profile-card:hover .profile-media img { transform: scale(1.06); } .profile-copy { transform: translateZ(18px); } .profile-role { margin: 0 0 var(--s-2); color: var(--kicker); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .profile-copy h3 { margin: 0 0 var(--s-4); font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.12; letter-spacing: -0.01em; transform: translateZ(24px); } .profile-copy p { margin: 0 0 var(--s-4); color: var(--ink-soft); font-size: 0.98rem; } .profile-copy p:last-child { margin-bottom: 0; } .profile-card:focus-within .profile-card__inner { transform: none; outline: 2px solid var(--accent); outline-offset: 8px; } /* ========================================================================== "Na scenie" - dwa bloki obraz + tekst Kadry sa pionowe, wiec zamiast siatki miniatur kazdy dostaje wlasny blok z tekstem obok. Zdjecie i tresc wjezdzaja z przeciwnych stron, a sam kadr plynie w ramce wolniej niz strona (paralaksa) - stad wrazenie glebi. ========================================================================== */ .stage-blocks { display: grid; gap: clamp(var(--s-9), 11vh, 150px); } .stage-block { display: grid; /* Kolumna zdjecia jest wezsza od kolumny tekstu - przy rowniejszym podziale kadr 3:4 rosl do ~780 px przy tekscie ~310 px i blok sie rozjezdzal. */ grid-template-columns: minmax(0, 0.76fr) minmax(0, 1fr); gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: center; } .stage-block__media { position: relative; margin: 0; overflow: hidden; border-radius: 4px; aspect-ratio: 3 / 4; max-height: min(76vh, 700px); box-shadow: var(--shadow-raised); opacity: 0; transform: translate3d(-46px, 0, 0); transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-premium); } .stage-block__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* zapas skali, zeby paralaksa nie odslonila krawedzi kadru */ transform: translate3d(0, var(--py, 0px), 0) scale(1.1); will-change: transform; } .stage-block__copy { opacity: 0; transform: translate3d(46px, 0, 0); transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-premium); transition-delay: 120ms; } /* Blok parzysty jest odbity - zdjecie po prawej, tekst po lewej, wiec kierunki wjazdu tez sie odwracaja. */ .stage-block--reverse .stage-block__media { order: 2; transform: translate3d(46px, 0, 0); } .stage-block--reverse .stage-block__copy { transform: translate3d(-46px, 0, 0); } .stage-block.is-visible .stage-block__media, .stage-block.is-visible .stage-block__copy { opacity: 1; transform: none; } .stage-block__index { margin: 0 0 var(--s-4); color: var(--kicker); font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; } .stage-block__copy h3 { margin: 0 0 var(--s-5); max-width: 16ch; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.1; letter-spacing: -0.015em; } .stage-block__copy p { margin: 0 0 var(--s-4); max-width: 46ch; color: var(--ink-soft); font-size: 1.02rem; } .stage-block__copy p:last-child { margin-bottom: 0; } /* ========================================================================== Posluchaj - winyl ========================================================================== */ .listen-section { overflow: hidden; } .listen-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: start; } .vinyl-stage { position: sticky; top: 128px; display: grid; justify-items: center; gap: var(--s-5); perspective: 1300px; opacity: 0; transform: translateY(40px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); } .vinyl-stage.is-visible { opacity: 1; transform: none; } .vinyl-rig { position: relative; width: min(100%, 420px); aspect-ratio: 1; transform-style: preserve-3d; /* --vinyl-tilt ustawia JS w zaleznosci od pozycji scrolla: plyta z lezacej na gramofonie prostuje sie do widoku z przodu. */ transform: rotateX(var(--vinyl-tilt, 54deg)); transition: transform 120ms linear; } /* Nieruchome odbicie swiatla - nie obraca sie razem z plyta. */ .vinyl-rig::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(122deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0.02) 54%, rgba(255, 255, 255, 0) 70%); pointer-events: none; transform: translateZ(6px); } .vinyl { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 4px), radial-gradient(circle at 50% 50%, #1c1c1c 0 30%, #101010 30% 62%, #161616 62% 100%); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(0, 0, 0, 0.9); animation: vinylSpin 3.4s linear infinite; animation-play-state: paused; } .listen-section.is-live .vinyl { animation-play-state: running; } .listen-section.is-playing .vinyl { animation-duration: 1.8s; } @keyframes vinylSpin { to { transform: rotate(360deg); } } .vinyl__sheen { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0deg, rgba(255, 255, 255, 0) 42deg, rgba(255, 255, 255, 0.05) 96deg, rgba(255, 255, 255, 0) 168deg, rgba(255, 255, 255, 0.07) 214deg, rgba(255, 255, 255, 0) 292deg, rgba(255, 255, 255, 0.04) 340deg, rgba(255, 255, 255, 0) 360deg); pointer-events: none; } .vinyl__label { position: absolute; inset: 31%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb), 0.42); } .vinyl__label img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0) contrast(1.06) brightness(0.62); } .vinyl__label b { position: relative; color: var(--gold); font-family: var(--font-display); font-size: clamp(0.9rem, 2.4vw, 1.4rem); font-weight: 500; letter-spacing: 0.08em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); } .vinyl__spindle { position: absolute; inset: 48.4%; border-radius: 50%; background: var(--night-bg); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.5); } /* --- ramie gramofonu --- */ .tonearm { position: absolute; top: -4%; right: -6%; width: 46%; height: 62%; transform: translateZ(26px) rotate(-16deg); transform-origin: 86% 10%; transition: transform 900ms var(--ease-back); pointer-events: none; } /* Przy graniu igla ma trafic na rowki, a nie na etykiete w srodku plyty. */ .listen-section.is-playing .tonearm { transform: translateZ(26px) rotate(3deg); } /* Lozysko ramienia wraz z przeciwwaga wystajaca za os obrotu. */ .tonearm__pivot { position: absolute; top: 0; right: 2%; width: 19%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #55534d 0%, #2a2a27 52%, #131311 100%); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.45), 0 10px 22px rgba(0, 0, 0, 0.55); } .tonearm__pivot::after { content: ""; position: absolute; top: -46%; left: 50%; width: 62%; height: 58%; border-radius: 999px; background: linear-gradient(160deg, #4a4844, #1c1c19); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.28); transform: translateX(-50%) rotate(22deg); } /* Rura ramienia - lekki polysk metalu wzdluz dlugosci. */ .tonearm__wand { position: absolute; top: 9%; right: 10%; width: 7px; height: 66%; border-radius: 5px; background: linear-gradient(90deg, #6f6c66 0%, #ddd8ce 38%, #b3aea5 62%, #6a6862 100%); transform: rotate(20deg); transform-origin: top center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); } /* Glowica z wkladka - ustawiona pod katem, tak jak w prawdziwym ramieniu. */ .tonearm__head { position: absolute; bottom: 21%; left: 40%; width: 19%; height: 10%; border-radius: 2px 2px 3px 3px; background: linear-gradient(155deg, #3d3c38 0%, #232320 58%, #101010 100%); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.34), 0 6px 14px rgba(0, 0, 0, 0.5); transform: rotate(20deg); } .tonearm__head::after { content: ""; position: absolute; bottom: -34%; left: 42%; width: 2px; height: 38%; background: linear-gradient(180deg, var(--gold), rgba(var(--gold-rgb), 0.25)); } .vinyl-meta { display: flex; align-items: baseline; gap: 3px; margin: 0; color: var(--ink-faint); font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; } /* Fraunces nie ma glifu ulamka - jedna trzecia bierzemy z kroju tekstowego. */ .vinyl-meta i { font-family: var(--font-body); font-style: normal; font-size: 0.94em; } .vinyl-meta b { margin-left: 8px; font-weight: 500; letter-spacing: 0.2em; } .vinyl-now { display: grid; gap: 4px; min-height: 46px; margin: calc(var(--s-3) * -1) 0 0; text-align: center; } .vinyl-now span { color: var(--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .vinyl-now strong { color: var(--ink-muted); font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.02em; transition: color 240ms var(--ease-soft), text-shadow 240ms var(--ease-soft); } .listen-section.is-playing .vinyl-now strong { color: var(--night-ink); text-shadow: 0 0 20px rgba(var(--gold-rgb), 0.28); } /* Smaczek: przy graniu litery RPM lapia drzenie, jak wskazowka gramofonu. */ .listen-section.is-playing .vinyl-meta b { color: var(--gold); animation: rpmJitter 2.6s steps(1, end) infinite; } @keyframes rpmJitter { 0%, 44% { transform: translate3d(0, 0, 0); } 46% { transform: translate3d(0.6px, -0.4px, 0); } 48% { transform: translate3d(-0.5px, 0.3px, 0); } 50%, 88% { transform: translate3d(0, 0, 0); } 90% { transform: translate3d(-0.6px, 0.4px, 0); } 92% { transform: translate3d(0.4px, -0.3px, 0); } 94%, 100% { transform: translate3d(0, 0, 0); } } /* --- tracklista --- */ .listen-content .section-title { margin-bottom: var(--s-5); } .tracklist { margin: var(--s-7) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); counter-reset: track; } .track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: clamp(10px, 2vw, var(--s-5)); width: 100%; min-height: 62px; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 1rem; text-align: left; cursor: pointer; transition: background-color 220ms var(--ease-soft), padding-left 220ms var(--ease-out), color 220ms var(--ease-soft); } .track:hover { background: rgba(var(--ink-rgb), 0.05); padding-left: 28px; } .track:active { background: rgba(var(--ink-rgb), 0.09); } .track:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .track__num { color: var(--ink-faint); font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; } .track__name { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.25; } .track__duration { color: var(--ink-faint); font-size: 0.76rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; transition: color 220ms var(--ease-soft); } .track__cue { width: 26px; height: 1px; background: var(--line-strong); transition: width 240ms var(--ease-out), background-color 240ms var(--ease-soft); } .track:hover .track__cue { width: 40px; background: var(--accent); } .track[aria-current="true"] { color: var(--gold); background: rgba(var(--gold-rgb), 0.07); } .track[aria-current="true"] .track__num { color: var(--gold); } .track[aria-current="true"] .track__duration { color: rgba(var(--gold-rgb), 0.85); } .track[aria-current="true"] .track__cue { width: 40px; background: var(--gold); } .track-player { margin-top: var(--s-6); } .track-player__shell { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: rgba(var(--ink-rgb), 0.06); box-shadow: var(--glow-gold); } .track-player__shell iframe { width: 100%; height: 100%; } /* Odtwarzacz pliku audio nie potrzebuje kadru 16:9 - to pasek kontrolek. */ .track-player__shell.is-audio { aspect-ratio: auto; display: grid; place-items: center; padding: clamp(var(--s-5), 4vw, var(--s-7)); border: 1px solid var(--line); background: radial-gradient(circle at 18% 0%, rgba(var(--gold-rgb), 0.13), transparent 42%), rgba(var(--ink-rgb), 0.045); } .track-audio { width: 100%; max-width: 520px; height: 44px; color-scheme: dark; } /* Dopisek przy tytule utworu - odroznia dwa nagrania o tej samej nazwie. */ .track__name em { margin-left: 10px; color: var(--ink-faint); font-family: var(--font-body); font-size: 0.72rem; font-style: normal; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .track[aria-current="true"] .track__name em { color: rgba(var(--gold-rgb), 0.85); } .track-player__note { margin: var(--s-3) 0 0; color: var(--ink-faint); font-size: 0.84rem; letter-spacing: 0.04em; } /* ========================================================================== Relacja ========================================================================== */ /* Pasek metadanych wydarzenia - relacja musi powiedziec co, kiedy i gdzie, zanim pokaze material. */ .event-meta { display: flex; flex-wrap: wrap; gap: clamp(var(--s-5), 4vw, var(--s-9)); margin: 0 0 clamp(var(--s-7), 6vw, var(--s-9)); padding-top: var(--s-5); border-top: 1px solid var(--line); } .event-meta dt { color: var(--kicker); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .event-meta dd { margin: 6px 0 0; color: var(--ink); font-family: var(--font-display); font-size: 1.08rem; } /* Jeden szeroki kadr pod nagraniami. Trzy male kafle probowaly udawac galerie z materialu, ktory jej nie uniesie - dwa ujecia sceniczne byly praktycznie identyczne, a zblizenie z backstage'u lamalo plan. Jedno zdjecie pokazane duzo wieksze niesie relacje lepiej niz trzy przecietne. */ .concert-shot { position: relative; margin: clamp(var(--s-7), 6vw, var(--s-9)) 0 0; overflow: hidden; border-radius: 4px; } .concert-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; clip-path: inset(0 0 100% 0); transform: scale(1.06); transition: clip-path 1100ms var(--ease-premium), transform 1400ms var(--ease-premium); } .concert-shot.is-visible img { clip-path: inset(0 0 0 0); transform: scale(1); } .concert-shot figcaption { margin-top: var(--s-4); color: var(--ink-faint); font-size: 0.84rem; letter-spacing: 0.02em; } .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(var(--s-5), 3vw, var(--s-7)); } .video-card { margin: 0; } .video-shell { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: rgba(var(--ink-rgb), 0.06); border: 1px solid var(--line); } .video-shell iframe { width: 100%; height: 100%; } .video-loading, .video-local-warning { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s-2); padding: var(--s-5); text-align: center; color: var(--ink-faint); font-size: 0.84rem; } .video-local-warning strong { color: var(--ink); font-size: 0.95rem; } .video-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); padding-top: var(--s-4); } .video-caption span { color: var(--kicker); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .video-caption h3 { margin: 0; flex: 1 1 auto; font-size: 1.15rem; } .video-open { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-faint); font-size: 0.8rem; letter-spacing: 0.04em; box-shadow: inset 0 -1px 0 var(--line); transition: color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .video-open:hover { color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); } /* ========================================================================== Koncerty ========================================================================== */ .concert-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: center; padding: clamp(var(--s-6), 4vw, var(--s-8)); border: 1px solid var(--line); border-radius: 6px; background: var(--bg-alt); transition: background-color var(--t-scene) var(--ease-soft), border-color var(--t-scene) var(--ease-soft); } .concert-panel__media { overflow: hidden; border-radius: 4px; aspect-ratio: 3 / 2; } .concert-panel__media img { width: 100%; height: 100%; object-fit: cover; } .concert-list { display: grid; gap: var(--s-5); margin-top: var(--s-6); } .concert-list article { padding-top: var(--s-4); border-top: 1px solid var(--line); } .concert-list h3 { margin: 0 0 var(--s-2); font-size: 1.15rem; } .concert-list p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } /* ========================================================================== FAQ ========================================================================== */ .faq-list { display: grid; gap: 0; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 62px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.3; transition: color var(--t-fast) var(--ease-out); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; flex: 0 0 auto; width: 13px; height: 13px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform 260ms var(--ease-out); } .faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); } .faq-item summary:hover { color: var(--accent); } .faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .faq-item p { margin: 0 0 var(--s-5); max-width: 62ch; color: var(--ink-soft); font-size: 0.98rem; } /* ========================================================================== Kontakt ========================================================================== */ .contact-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: start; } .contact-copy { margin: var(--s-5) 0 var(--s-6); max-width: 46ch; color: var(--ink-soft); font-size: 1.05rem; } .contact-points { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); } .contact-points span { padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 0.8rem; letter-spacing: 0.04em; } .contact-card { display: grid; gap: var(--s-4); } .contact-link { display: grid; gap: 3px; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: 4px; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease-out); } .contact-link span { color: var(--ink-faint); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .contact-link strong { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 500; } .contact-link:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); transform: translateY(-2px); } .contact-link:active { transform: translateY(0); } .booking-form { display: grid; gap: var(--s-4); padding: clamp(var(--s-5), 3vw, var(--s-7)); border: 1px solid var(--line); border-radius: 6px; background: rgba(var(--ink-rgb), 0.03); } .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } .booking-form label { display: grid; gap: var(--s-2); } .booking-form label > span { color: var(--ink-soft); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; } .booking-form input, .booking-form textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 3px; background: rgba(var(--ink-rgb), 0.04); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft); } .booking-form textarea { resize: vertical; min-height: 120px; } .booking-form input::placeholder, .booking-form textarea::placeholder { color: var(--ink-faint); } .booking-form input:hover, .booking-form textarea:hover { border-color: var(--line-strong); } .booking-form input:focus, .booking-form textarea:focus { outline: none; border-color: var(--accent); background: rgba(var(--ink-rgb), 0.07); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18); } /* :user-invalid, a nie :invalid - inaczej puste pole wymagane (np. data) swieci na czerwono, zanim uzytkownik cokolwiek w nim zrobil. */ .booking-form input:user-invalid, .booking-form textarea:user-invalid { border-color: #c2604a; } .form-submit { justify-self: start; margin-top: var(--s-2); } .form-note { margin: 0; color: var(--ink-faint); font-size: 0.82rem; } .hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ========================================================================== Stopka ========================================================================== */ .site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); max-width: var(--max-wide); margin: 0 auto; padding: var(--s-7) var(--pad) var(--s-8); border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 0.84rem; } /* Linki w stopce to pojedyncze wiersze tekstu - bez tego maja ~23 px wysokosci i sa trudne do trafienia kciukiem. */ .site-footer > a, .site-credit a { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--t-fast) var(--ease-out); } .site-footer > a:hover { color: var(--accent); } .site-credit { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-faint); } .site-credit a { color: var(--ink-soft); border-bottom: 1px solid var(--line); transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } .site-credit a:hover { color: var(--accent); border-color: var(--accent); } /* Serce jako SVG, nie emoji - emoji renderuje sie inaczej na kazdym systemie (raz plaskie, raz 3D, raz w innym odcieniu) i wypada z palety strony. */ .site-credit__heart { flex: 0 0 auto; color: var(--accent); transform: translateY(0.5px); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== Responsywnosc ========================================================================== */ @media (max-width: 1279px) { .listen-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } } @media (max-width: 1023px) { .story-grid { grid-template-columns: 1fr; } .section-heading { grid-template-columns: 1fr; align-items: start; } .section-title { max-width: 24ch; } .concert-panel { grid-template-columns: 1fr; } .concert-panel__media { order: -1; } .contact-content { grid-template-columns: 1fr; } } @media (max-width: 899px) { .site-header { justify-content: space-between; gap: var(--s-4); } .menu-toggle { display: inline-flex; align-items: center; gap: 10px; order: 3; padding: 10px 4px; min-height: 44px; border: 0; background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .menu-toggle i { position: relative; width: 22px; height: 9px; } .menu-toggle i::before, .menu-toggle i::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform 240ms var(--ease-out); } .menu-toggle i::before { top: 0; } .menu-toggle i::after { bottom: 0; } .site-header.is-menu-open .menu-toggle i::before { transform: translateY(4px) rotate(45deg); } .site-header.is-menu-open .menu-toggle i::after { transform: translateY(-4px) rotate(-45deg); } /* Przy otwartym menu naglowek zrzuca rozmycie i tlo: rozmycie tworzyloby containing block dla panelu (patrz wyzej), a tlo jest zbedne, bo panel i tak zakrywa caly ekran. */ .site-header.is-menu-open, .site-header.is-menu-open.is-scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } /* Logo i przycisk musza zostac nad panelem. */ .site-header.is-menu-open .site-mark, .site-header.is-menu-open .menu-toggle { position: relative; z-index: 2; } /* UWAGA: `backdrop-filter` na .site-header tworzy containing block dla `position: fixed`, wiec ten panel pozycjonowalby sie wzgledem paska naglowka (~66 px), a nie ekranu - linki wychodzily poza kadr. Dlatego przy otwartym menu naglowek traci rozmycie (regula nizej). */ .site-nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-2); padding: 96px var(--pad) var(--s-8); background: var(--bg); font-size: 1.7rem; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; text-transform: none; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 300ms, background-color var(--t-scene) var(--ease-soft); } .site-header.is-menu-open .site-nav { opacity: 1; visibility: visible; transform: none; } .site-nav a { min-height: 52px; display: flex; align-items: center; color: var(--ink); } .site-nav a::after { bottom: 12px; } .nav-social { display: none; } body.has-menu-open { overflow: hidden; } .profile-grid { grid-template-columns: 1fr; } .profile-card__inner { transform: none !important; } .listen-grid { grid-template-columns: 1fr; } .vinyl-stage { position: static; } .vinyl-rig { width: min(78vw, 340px); } .tracklist { margin-top: var(--s-5); } /* Przy czterech kolumnach siedem kafli daje trzy pary i jeden nadmiarowy - ostatni rozciagamy na pelna szerokosc, zeby siatka nie konczyla sie luka. */ /* Bloki "Na scenie" ida jeden pod drugim, kadr nad tekstem. Kierunek wjazdu zmienia sie na pionowy - poziomy nie ma tu sensu. */ .stage-block, .stage-block--reverse { grid-template-columns: 1fr; gap: var(--s-6); } .stage-block--reverse .stage-block__media { order: 0; } .stage-block__media { aspect-ratio: 4 / 5; max-height: 74svh; } .stage-block__media, .stage-block--reverse .stage-block__media { transform: translate3d(0, 34px, 0); } .stage-block__copy, .stage-block--reverse .stage-block__copy { transform: translate3d(0, 26px, 0); } /* Trzy kafle w dwoch kolumnach - ostatni bierze pelna szerokosc, zeby rzad nie konczyl sie luka. */ } @media (max-width: 759px) { } @media (max-width: 599px) { .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .button { width: 100%; } /* Na najwezszych ekranach tytul schodzi jeszcze nizej - inaczej trzy wiersze nazwisk wypychaja tresc na strefe twarzy. */ .hero-title { font-size: clamp(2rem, 9.2vw, 2.5rem); } .track { grid-template-columns: auto minmax(0, 1fr) auto; } .track__cue { display: none; } .event-meta { gap: var(--s-5) var(--s-7); } .form-row { grid-template-columns: 1fr; } .site-footer { flex-direction: column; align-items: flex-start; gap: var(--s-4); } } @media (max-width: 767px) and (max-height: 720px) { /* Krotkie telefony potrzebuja bardziej zwartego bloku, aby nazwiska zaczynaly sie pod twarzami, a oba przyciski nadal miescily sie w pierwszym ekranie. */ .hero-copy { padding-bottom: 10px; } .hero-eyebrow { margin-bottom: 8px; } .hero-title { margin-bottom: 8px; font-size: 1.8rem; } .hero-lead { margin-bottom: 12px; font-size: 0.875rem; line-height: 1.45; } .hero-actions { gap: 8px; } } /* ========================================================================== Ograniczony ruch - pelna sciezka awaryjna ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .hero-line > span { transform: none; } .hero-eyebrow > span, .hero-lead, .hero-actions { opacity: 1; transform: none; } .hero-media img { transform: scale(1.02) !important; } .vinyl { animation: none; } .vinyl-rig { transform: rotateX(0deg) !important; } .vinyl-stage { opacity: 1; transform: none; } .stage-block__media, .stage-block__copy { opacity: 1; transform: none !important; } .stage-block__media img { transform: scale(1.02) !important; } .concert-shot img { clip-path: none; transform: none; } .profile-card__inner { transform: none !important; } }