/* ========================================================================== Playground of Possibilities — theme stylesheet Colours are runtime-swappable CSS custom properties (see playground.js). ========================================================================== */ @font-face { font-family: "Marmabounce"; src: url("../fonts/marmabounce-regular.woff2") format("woff2"); font-weight: 400; /* "optional" (not "swap"): the wordmark plays a scale/opacity entrance animation immediately on page load, so swapping fonts mid-animation is a visible flash of the fallback font. With the font preloaded in header.php it is normally ready in time; if not, the browser keeps the fallback for that render instead of swapping later and causing a jump. */ font-display: optional; } @font-face { font-family: "BasisMono"; src: url("../fonts/basis-grotesque-mono-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "NeueMontreal"; src: url("../fonts/neuemontreal-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "NeueMontreal"; src: url("../fonts/neuemontreal-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } :root { --pg-bg: #5a1024; --pg-ink: #c7b9db; --pg-drift: 1; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--pg-bg); max-width: 100%; -webkit-text-size-adjust: 100%; } /* Never add overflow-x:hidden here — it turns into its own scroll container, freezes window.scrollY at 0, and kills the whole choreography. */ body.pg { font-family: "BasisMono", ui-monospace, monospace; color: var(--pg-ink); background: var(--pg-bg); } .pg a { color: var(--pg-ink); text-decoration: none; border-bottom: 1px solid currentColor; } .pg a:hover { opacity: .6; } .pg :focus-visible { outline: 2px solid var(--pg-ink); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .pg *, .pg *::before, .pg *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; } } /* ------------------------------------------------------------------------- Keyframes ------------------------------------------------------------------------- */ @keyframes pgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes pgLand { 0% { transform: scale(2.9); opacity: 0; } 18% { opacity: 1; } 62% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } } @keyframes pgFade { 0%, 55% { opacity: 0; } 100% { opacity: 1; } } @keyframes pgDriftA { 0%, 100% { transform: translate(0,0) rotate(-3deg); } 33% { transform: translate(14px,-18px) rotate(4deg); } 66% { transform: translate(-10px,10px) rotate(-1deg); } } @keyframes pgDriftB { 0%, 100% { transform: translate(0,0) rotate(3deg); } 40% { transform: translate(-16px,14px) rotate(-4deg); } 70% { transform: translate(12px,-12px) rotate(2deg); } } @keyframes pgBlob { 0%, 100% { border-radius: 52% 48% 43% 57% / 57% 42% 58% 43%; } 33% { border-radius: 44% 56% 58% 42% / 45% 55% 45% 55%; } 66% { border-radius: 58% 42% 50% 50% / 50% 58% 42% 50%; } } @keyframes pgBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* ------------------------------------------------------------------------- Fixed chrome (cursor, top bar, colour toggle, booking blobs) ------------------------------------------------------------------------- */ .pg-cursor { position: fixed; left: 0; top: 0; width: 16px; height: 14px; border: 2.5px solid var(--pg-ink); background: transparent; animation: pgBlob 7s ease-in-out infinite; pointer-events: none; z-index: 60; opacity: .95; transform: translate(-100px, -100px); will-change: transform; } @media (hover: none), (pointer: coarse) { .pg-cursor { display: none; } } .pg-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 56; background: var(--pg-bg); padding: clamp(14px,2.6vh,28px) 0 clamp(12px,2vh,20px); display: flex; justify-content: center; transition: opacity .25s linear; } .pg-topbar--scroll-driven { opacity: var(--pg-mini-op, 1); } .pg-topbar--scroll-driven:not(.is-active) { pointer-events: none; } .pg a.pg-topbar-link { border-bottom: none; display: block; text-align: center; } .pg-wordmark-mini { font-family: "Marmabounce", cursive; font-size: clamp(20px,2.4vw,30px); line-height: .86; } .pg-wordmark-mini-sub { font-size: 8px; letter-spacing: .28em; margin-top: 5px; } .pg-farbe { position: fixed; top: clamp(14px,2.6vh,28px); right: clamp(12px,2.6vw,32px); z-index: 58; font-family: "BasisMono", ui-monospace, monospace; font-size: clamp(9px,2.5vw,11px); letter-spacing: .2em; color: var(--pg-ink); background: transparent; border: 1.5px solid var(--pg-ink); border-radius: 52% 48% 43% 57% / 57% 42% 58% 43%; animation: pgBlob 9s ease-in-out infinite; padding: clamp(11px,3vw,14px) clamp(15px,4vw,20px); cursor: pointer; transition: background .3s ease, color .3s ease; } .pg-farbe:hover { background: var(--pg-ink); color: var(--pg-bg); } .pg-bookings { position: fixed; left: 0; right: 0; bottom: clamp(16px,3.4vh,40px); z-index: 55; display: flex; justify-content: center; gap: clamp(18px,4vw,64px); } .pg a.pg-bookings-link { border-bottom: none; display: block; } .pg-bookings-link--a { animation: pgDriftA calc(9s / var(--pg-drift,1)) ease-in-out infinite; } .pg-bookings-link--b { animation: pgDriftB calc(11s / var(--pg-drift,1)) ease-in-out infinite; } .pg-blob { width: clamp(104px,15vw,176px); height: clamp(94px,13.5vw,158px); border: 1.5px solid var(--pg-ink); background: var(--pg-bg); display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(9px, max(1.15vmin,2.4vw), 13px); letter-spacing: .16em; line-height: 1.7; transition: background .35s ease, color .35s ease; } .pg-blob:hover, .pg-bookings-link:hover .pg-blob { background: var(--pg-ink); color: var(--pg-bg); } .pg-blob--a { border-radius: 52% 48% 43% 57% / 57% 42% 58% 43%; animation: pgBlob calc(11s / var(--pg-drift,1)) ease-in-out infinite; } .pg-blob--b { border-radius: 44% 56% 58% 42% / 45% 55% 45% 55%; animation: pgBlob calc(13s / var(--pg-drift,1)) ease-in-out infinite reverse; } @media (max-height: 760px) { .pg-blob { width: 88px; height: 80px; font-size: 9px; letter-spacing: .1em; } } @media (max-height: 620px) { .pg-blob { width: 82px; height: 74px; } } /* ------------------------------------------------------------------------- Scroll stage (hero) ------------------------------------------------------------------------- */ .pg-scrollstage { height: 320svh; position: relative; } .pg-hero { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px,4vw,56px) clamp(20px,4vw,56px) clamp(120px,19svh,190px); overflow: hidden; } @media (max-height: 760px) { .pg-hero { padding-bottom: 132px; } } @media (max-height: 620px) { .pg-hero { padding-bottom: 118px; } } .pg-hero-wordmark-wrap { flex: 0 0 auto; transform: translateY(calc(var(--pg-logo-y, 0) * 1vh)) scale(var(--pg-logo-scale, 1)); opacity: var(--pg-logo-op, 1); transition: transform .18s linear, opacity .2s linear; } .pg-hero-wordmark-inner { text-align: center; animation: pgLand 2.1s cubic-bezier(.2,.8,.2,1) both; } .pg-hero-wordmark { font-family: "Marmabounce", cursive; font-size: min(23vw, 20svh, 190px); line-height: .82; } @media (max-height: 760px) { .pg-hero-wordmark { font-size: min(14vw,14svh,110px); } } @media (max-height: 620px) { .pg-hero-wordmark { font-size: min(11vw,11svh,84px); } } .pg-hero-wordmark-sub { font-size: clamp(10px,1.6vmin,16px); letter-spacing: .36em; padding-left: .36em; margin-top: clamp(10px,1.6vmin,20px); } .pg-hero-wordmark-sub + .pg-hero-wordmark-sub { margin-top: clamp(8px,1.2vmin,14px); } @media (max-height: 760px) { .pg-hero-wordmark-sub { font-size: 10px; margin-top: 6px; } } @media (max-height: 620px) { .pg-hero-wordmark-sub { font-size: 9px; margin-top: 5px; } } .pg-intro { width: 100%; max-width: 1240px; flex: 1 1 auto; min-height: 0; overflow: hidden; margin-top: clamp(14px,3vh,56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: clamp(14px,2.4vw,44px); font-size: clamp(10px, max(1.4vmin,2.7vw), 13px); line-height: 1.5; letter-spacing: .045em; animation: pgFade 2.6s ease; opacity: var(--pg-col-op, 1); transform: translate(calc(var(--pg-col-x, 0) * 1vw), calc(var(--pg-col-y, 0) * 1px)) rotate(calc(var(--pg-col-rot, 0) * 1deg)); transition: opacity .12s linear, transform .2s cubic-bezier(.6,0,.9,.2); } @media (max-height: 760px) { .pg-intro { font-size: 11px; line-height: 1.45; margin-top: 14px; } } @media (max-height: 620px) { .pg-intro { font-size: 11px; line-height: 1.35; margin-top: 6px; } } .pg-intro a { } .pg-intro-gap-sm { margin-top: 14px; } .pg-intro-gap-lg { margin-top: 26px; } .pg-cue { position: absolute; left: 0; right: 0; bottom: clamp(8px,1.2vh,14px); display: flex; justify-content: center; font-size: 10px; letter-spacing: .34em; animation: pgBlink 2.4s ease-in-out infinite; opacity: var(--pg-cue-op, 1); } .pg-reveal-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(74px,10svh,90px) clamp(20px,5vw,72px) clamp(104px,15svh,150px); opacity: var(--pg-big-op, 0); transition: opacity .2s linear; } .pg-reveal-wrap.is-active { pointer-events: auto; } .pg-reveal-wrap:not(.is-active) { pointer-events: none; } .pg-reveal { max-width: min(1500px, 100% - min(6cm, 6vw)); max-height: 100%; overflow: hidden; font-size: clamp(20px,3.2vw,42px); line-height: 1.22; letter-spacing: -.01em; text-wrap: pretty; } @media (max-height: 1000px) { .pg-reveal { font-size: clamp(18px,2.6vw,30px); line-height: 1.26; } } @media (max-height: 760px) { .pg-reveal { font-size: clamp(15px,2.2vw,22px); line-height: 1.28; } } @media (max-height: 620px) { .pg-reveal { font-size: clamp(13px,2vw,18px); line-height: 1.25; } } .pg-reveal-line { display: flex; flex-wrap: wrap; margin-bottom: .5em; } .pg-reveal-line:last-child { margin-bottom: 0; } .pg-w { display: inline-block; margin-right: .3em; opacity: .17; } /* ------------------------------------------------------------------------- Marquee ------------------------------------------------------------------------- */ .pg-marquee-wrap { padding: clamp(60px,10vh,140px) 0 clamp(40px,7vh,100px); overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .pg-marquee-track { display: flex; width: max-content; animation: pgMarquee 26s linear infinite; will-change: transform; font-family: "NeueMontreal", ui-sans-serif, sans-serif; font-weight: 500; font-size: clamp(38px,7.5vw,120px); line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; } .pg-marquee-item { padding-right: clamp(40px,6vw,90px); } /* ------------------------------------------------------------------------- Footer + sponsor strip ------------------------------------------------------------------------- */ .pg-footer { min-height: 82svh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(36px,6vh,72px); padding: clamp(48px,8vw,110px) clamp(20px,4vw,56px) clamp(56px,9vh,96px); } .pg-footer-grid { width: 100%; max-width: 1240px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: clamp(24px,3vw,48px); font-size: clamp(11px, max(1.4vmin,2.7vw), 13px); line-height: 1.62; letter-spacing: .045em; overflow-wrap: anywhere; } .pg-label { opacity: .6; } .pg-footer-credits { width: 100%; max-width: 1240px; font-size: clamp(10px,1.3vmin,12px); letter-spacing: .14em; line-height: 1.7; opacity: .6; } .pg-sponsors { background: #ffffff; padding: clamp(28px,4vw,48px) clamp(20px,4vw,56px) clamp(190px,26vh,250px); display: flex; justify-content: center; } .pg-sponsors-strip { display: block; width: 100%; max-width: 1080px; height: auto; } /* ------------------------------------------------------------------------- Inner pages (FAQ / Impressum) — shared page chrome ------------------------------------------------------------------------- */ .pg-page { min-height: 100vh; } .pg-page-body { padding: clamp(118px,17svh,190px) clamp(20px,4vw,56px) clamp(60px,10vh,120px); display: flex; flex-direction: column; gap: clamp(40px,7vh,80px); align-items: center; } .pg-page-head { width: 100%; max-width: 1240px; } .pg-page-title { font-family: "NeueMontreal", ui-sans-serif, sans-serif; font-weight: 500; font-size: min(8.5vw,12vh,96px); line-height: 1; letter-spacing: -.02em; } .pg-page-intro { font-size: clamp(11px,1.4vmin,13px); letter-spacing: .045em; line-height: 1.6; margin-top: clamp(18px,3vh,34px); max-width: 620px; } .pg-page-footer { width: 100%; max-width: 1240px; display: flex; flex-wrap: wrap; gap: clamp(18px,4vw,56px); font-size: clamp(11px,1.4vmin,13px); letter-spacing: .045em; line-height: 1.6; } /* FAQ accordion */ .pg-faq-group { width: 100%; max-width: 1240px; display: flex; flex-direction: column; } .pg-faq-group-title { font-family: "NeueMontreal", ui-sans-serif, sans-serif; font-weight: 500; font-size: clamp(24px,3.4vw,46px); line-height: 1.05; letter-spacing: -.015em; margin: clamp(30px,5vh,58px) 0 clamp(12px,2vh,22px); } .pg-faq-item { border-top: 1px solid var(--pg-ink); } .pg-faq-group > .pg-faq-divider { border-top: 1px solid var(--pg-ink); } .pg-faq-question { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: clamp(16px,3vw,48px); background: transparent; border: none; padding: clamp(18px,2.6vh,30px) 0; cursor: pointer; color: var(--pg-ink); font-family: "BasisMono", ui-monospace, monospace; font-size: clamp(13px, max(1.9vmin,3.4vw), 19px); letter-spacing: .04em; line-height: 1.4; text-align: left; overflow-wrap: anywhere; transition: opacity .2s ease; } .pg-faq-question:hover { opacity: .6; } .pg-faq-marker { flex: 0 0 auto; font-size: clamp(14px,2vmin,20px); opacity: .7; } .pg-faq-answer-wrap { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; } .pg-faq-item.is-open .pg-faq-answer-wrap { max-height: 1600px; opacity: 1; } .pg-faq-answer { font-size: clamp(12px, max(1.5vmin,3vw), 14px); line-height: 1.75; letter-spacing: .04em; max-width: 780px; padding-bottom: clamp(22px,3.4vh,36px); display: flex; flex-direction: column; gap: 14px; white-space: pre-line; } .pg-faq-answer-link { align-self: flex-start; word-break: break-all; } /* Impressum */ .pg-legal-note { max-width: 720px; } .pg-legal-grid { width: 100%; max-width: 1240px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(28px,4vw,64px); font-size: clamp(12px, max(1.4vmin,2.9vw), 13px); line-height: 1.75; letter-spacing: .04em; overflow-wrap: anywhere; } .pg-legal-grid--4 { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); border-top: 1px solid var(--pg-ink); padding-top: clamp(28px,4vh,48px); } .pg-legal-label { opacity: .6; margin-bottom: 10px; } .pg-legal-block + .pg-legal-block { margin-top: 18px; } .pg-legal-section { width: 100%; max-width: 1240px; border-top: 1px solid var(--pg-ink); padding-top: clamp(34px,5vh,60px); } .pg-legal-section-title { font-family: "NeueMontreal", ui-sans-serif, sans-serif; font-weight: 500; font-size: min(7vw,10vh,76px); line-height: 1; letter-spacing: -.02em; } .pg-legal-section-body { font-size: clamp(12px, max(1.4vmin,2.9vw), 13px); line-height: 1.75; letter-spacing: .04em; overflow-wrap: anywhere; margin-top: clamp(18px,3vh,32px); max-width: 780px; } .pg-legal-section-body p { margin: 0 0 1em; } .pg-legal-section-body p:last-child { margin-bottom: 0; } .pg-legal-subhead { text-transform: uppercase; letter-spacing: .06em; margin: clamp(20px,3vh,32px) 0 10px; } .pg-legal-subhead:first-child { margin-top: 0; } .pg-legal-stand { margin-top: clamp(20px,3vh,32px); opacity: .6; }