/* ========================================================= SoundTribus Gallery Editorial Scroll-Snap-Galerie · Playfair + Lato ========================================================= */ /* Variablen global, damit das ans ausgelagerte Overlay sie ebenfalls erbt */ :root { --stgal-height: 100svh; --stgal-ink: #15110e; --stgal-paper: #ffffff; --stgal-accent: #1c3a32; /* bottle green */ --stgal-font-title: "Playfair Display", Georgia, "Times New Roman", serif; --stgal-font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .stgal { --stgal-height: 100svh; --stgal-ink: #15110e; --stgal-paper: #ffffff; --stgal-accent: #1c3a32; /* bottle green – passt zur Studio-Tribus-Identität */ --stgal-font-title: "Playfair Display", Georgia, "Times New Roman", serif; --stgal-font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; position: relative; width: 100%; height: var(--stgal-height); overflow: hidden; background: #000; font-family: var(--stgal-font-body); isolation: isolate; } /* ---------- Scroll-Snap-Track (Reels-Prinzip) ---------- */ .stgal-track { height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .stgal-track::-webkit-scrollbar { display: none; } /* WebKit */ .stgal-slide { position: relative; height: 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: block; } /* Hintergrundbild */ .stgal-picture { display: contents; } .stgal-slide .stgal-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transform: scale(1.03); transition: transform 8s ease-out; } .stgal-slide:hover .stgal-bg { transform: scale(1.08); } /* Lesbarkeits-Verlauf hinter dem Text */ .stgal-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.32) 32%, rgba(0,0,0,0) 60%), linear-gradient(to right, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 45%); } /* Klickfläche = ganze Slide */ .stgal-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; text-align: left; color: #fff; font: inherit; display: flex; align-items: flex-end; } .stgal-open:focus-visible { outline: 3px solid #fff; outline-offset: -6px; } /* Theme-Hover (z. B. Elementor-Button-Farbe) auf der Klickfläche unterdrücken */ .stgal .stgal-open, .stgal .stgal-open:hover, .stgal .stgal-open:focus, .stgal .stgal-open:active { background: transparent; box-shadow: none; color: #fff; -webkit-appearance: none; appearance: none; } /* Textbaustein */ .stgal-caption { padding: clamp(28px, 6vw, 84px); padding-bottom: clamp(48px, 9vh, 110px); max-width: min(760px, 86%); } .stgal-kicker { display: inline-block; font-family: var(--stgal-font-body); font-weight: 700; font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.92); margin-bottom: 16px; } .stgal-title { font-family: var(--stgal-font-title); font-weight: 600; line-height: 1.04; font-size: clamp(2.4rem, 6.2vw, 5.2rem); color: #fff; margin: 0 0 0.4em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,0.35); } .stgal-teaser { font-family: var(--stgal-font-body); font-weight: 300; font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.55; color: rgba(255,255,255,0.94); margin: 0 0 1.4em; max-width: 52ch; text-shadow: 0 1px 12px rgba(0,0,0,0.3); } .stgal-more { display: inline-flex; align-items: center; margin-top: 24px; font-family: var(--stgal-font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; color: var(--stgal-ink, #15110e) !important; padding: 14px 30px; border: 0 !important; border-radius: 999px; background: #fff !important; box-shadow: 0 8px 30px rgba(0,0,0,0.18); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .stgal-open:hover .stgal-more, .stgal-open:focus-visible .stgal-more { background: var(--stgal-accent, #1c3a32) !important; color: #fff !important; transform: translateY(-1px); } /* ---------- Filterleiste ---------- */ .stgal-filter { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px; padding: clamp(16px, 3vw, 32px); pointer-events: none; /* nur Chips klickbar */ } .stgal-chip { pointer-events: auto; font-family: var(--stgal-font-body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; color: #fff; padding: 8px 18px; border: 1.5px solid rgba(255,255,255,0.45); border-radius: 999px; background: rgba(0,0,0,0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: all 0.22s ease; } .stgal-chip:hover { border-color: #fff; } .stgal-chip.is-active { background: #fff; color: var(--stgal-ink); border-color: #fff; } /* ---------- Scroll-Hinweis ---------- */ .stgal-scroll-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; opacity: 0.85; transition: opacity 0.4s ease; } .stgal.is-scrolled .stgal-scroll-hint { opacity: 0; } .stgal-mouse { display: block; width: 24px; height: 38px; border: 2px solid rgba(255,255,255,0.8); border-radius: 14px; position: relative; } .stgal-mouse::after { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 3px; height: 7px; background: #fff; border-radius: 2px; animation: stgal-wheel 1.8s ease-in-out infinite; } @keyframes stgal-wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%, 10px); } 100% { opacity: 0; transform: translate(-50%, 12px); } } /* ========================================================= Detail-Overlay (weiße Gesamtfläche) ========================================================= */ .stgal-overlay { position: fixed; inset: 0; z-index: 2147483647; /* maximal – liegt garantiert über Header & allem anderen */ background: var(--stgal-paper); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity 0.32s ease; } .stgal-overlay.is-open { opacity: 1; } .stgal-overlay[hidden] { display: none; } .stgal-overlay-inner { position: relative; min-height: 100%; display: flex; flex-direction: column; justify-content: center; /* zentriert kurzen Inhalt vertikal; langer Inhalt scrollt normal */ padding: clamp(72px, 10vh, 130px) clamp(22px, 6vw, 56px) clamp(60px, 8vh, 100px); width: 100%; } /* Bühne: zentrierter Text in der Mitte, Bilder als Collage drumherum */ .stgal-stage { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; } .stgal-overlay-content { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; } /* Schließknopf – gut sichtbar, immer erreichbar, theme-fest */ .stgal-close { position: fixed; top: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px); z-index: 5; display: inline-flex; align-items: center; gap: 8px; font-family: var(--stgal-font-body); font-weight: 700; font-size: 0.9rem; color: #fff !important; background: var(--stgal-ink, #15110e) !important; border: 0 !important; border-radius: 999px; padding: 11px 18px 11px 14px; cursor: pointer; box-shadow: 0 6px 24px rgba(0,0,0,0.22); transition: background 0.2s ease, transform 0.2s ease; } .stgal-close:hover { background: var(--stgal-accent, #1c3a32) !important; transform: translateY(-1px); } .stgal-close:focus-visible { outline: 3px solid var(--stgal-accent, #1c3a32); outline-offset: 2px; } .stgal-close svg { flex: none; } .stgal-overlay-title { font-family: var(--stgal-font-title); font-weight: 600; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.08; color: var(--stgal-ink); margin: 0 0 0.7em; text-wrap: balance; text-align: center; } .stgal-overlay-body { font-family: var(--stgal-font-body); font-weight: 400; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.75; color: #2b2723; text-align: center; } .stgal-overlay-body > * + * { margin-top: 1.15em; } .stgal-overlay-body ul, .stgal-overlay-body ol { list-style: none; padding: 0; margin-left: 0; } .stgal-overlay-body li { margin: 0.2em 0; } .stgal-overlay-body h2, .stgal-overlay-body h3, .stgal-overlay-body h4 { font-family: var(--stgal-font-title); font-weight: 600; line-height: 1.2; color: var(--stgal-ink); margin-top: 1.8em; } .stgal-overlay-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); } .stgal-overlay-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); } .stgal-overlay-body a { color: var(--stgal-accent); text-underline-offset: 3px; } .stgal-overlay-body img { max-width: 100%; height: auto; border-radius: 8px; } .stgal-overlay-body blockquote { border-left: 3px solid var(--stgal-accent); padding-left: 1.2em; font-family: var(--stgal-font-title); font-style: italic; font-size: 1.3em; color: var(--stgal-ink); } /* ---------- Detail-Bilder ---------- */ .stgal-collage { width: 100%; } /* Standard / Mobile: Bilder gestapelt unter dem Text, zentriert */ .stgal-detail-images { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin: 2.4em auto 0; } .stgal-detail-images figure { margin: 0; } .stgal-detail-images .stgal-detail-img { width: 100%; height: auto; display: block; border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,0.14); } /* Desktop: Collage links/rechts um den zentrierten Text (wie Referenz) */ @media (min-width: 1024px) { .stgal-stage { display: flex; flex-direction: column; justify-content: center; min-height: 78vh; } .stgal-collage { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .stgal-detail-images { display: block; position: relative; height: 100%; max-width: none; margin: 0; } .stgal-detail-images figure { position: absolute; width: 24%; max-width: 340px; box-shadow: 0 22px 55px rgba(0,0,0,0.18); } .stgal-detail-images .stgal-detail-img { box-shadow: none; border-radius: 4px; } /* vier Positionen rund um den Text */ .stgal-detail-images figure:nth-child(1) { top: 2%; left: 0; transform: rotate(-2deg); } .stgal-detail-images figure:nth-child(2) { top: 6%; right: 0; transform: rotate(1.5deg); } .stgal-detail-images figure:nth-child(3) { bottom: 4%; left: 5%; width: 19%; transform: rotate(2deg); } .stgal-detail-images figure:nth-child(4) { bottom: 2%; right: 4%; width: 26%; transform: rotate(-1.5deg); } /* Collage zeigt max. 4 Bilder; weitere unauffällig ausblenden */ .stgal-detail-images figure:nth-child(n+5) { display: none; } } /* ---------- Body-Scroll-Lock, wenn Overlay offen ---------- */ body.stgal-lock { overflow: hidden; } /* ---------- Bewegungsreduktion respektieren ---------- */ @media (prefers-reduced-motion: reduce) { .stgal-track { scroll-behavior: auto; } .stgal-slide .stgal-bg { transition: none; transform: none; } .stgal-slide:hover .stgal-bg { transform: none; } .stgal-mouse::after { animation: none; } .stgal-overlay { transition: none; } } /* ---------- Kleinere Screens ---------- */ @media (max-width: 600px) { .stgal-caption { max-width: 92%; } .stgal-filter { gap: 6px; } .stgal-chip { font-size: 0.76rem; padding: 7px 14px; } }