/* ============================================================ FLUX — bespoke concert-work page "A continuous flow between spaces." After San Francisco's Wave Organ: a tidal sea-teal field with layered flowing waves (flow.js), Fraunces type, particle-assembled title. Distinct from Void gold / Whispers copper / Morphé blue / Akousma mint+violet+grey. ============================================================ */ :root { --fx-bg: #04101c; --fx-bg-2: #08202e; --fx-ink: #e2eef3; --fx-ink-dim: #7e94a0; --fx-teal: #45c8e0; --fx-teal-soft:#2c8298; --fx-line: rgba(69, 200, 224, 0.16); --fx-gutter: clamp(20px, 5vw, 64px); /* media-player tokens (driven by theme; dark defaults) */ --np-bg: rgba(6,20,30,0.92); --np-ink: var(--fx-ink); --np-ink-soft: rgba(226,238,243,0.65); --np-ink-faint:rgba(226,238,243,0.55); --np-accent: var(--fx-teal); --np-line: var(--fx-line); --np-track: rgba(226,238,243,0.20); --np-vol-fill: rgba(226,238,243,0.6); --np-vol-thumb:rgba(226,238,243,0.85); --np-divider: rgba(226,238,243,0.10); --np-accent-soft: rgba(69,200,224,0.14); } /* =========================================================== LIGHT THEME — cream/beige content sections, Flux BLUE accent kept. Hero stays DARK in both themes (cinematic audio-reactive field). Scoped to .theme-light on either (no-flash) or . =========================================================== */ .theme-light { --fx-bg: #f4f1ea; /* paper */ --fx-bg-2: #ece7db; /* paper-soft */ --fx-ink: #2F2D2A; /* body ink */ --fx-ink-dim: #5F5A55; /* muted */ --fx-teal: #2f6fb0; /* deepened blue for text/eyebrows on cream */ --fx-teal-soft:#2f6fb0; --fx-line: rgba(47,111,176,0.22); /* light media-player tokens (cream card, blue accents) */ --np-bg: rgba(236,231,219,0.95); --np-ink: #2F2D2A; --np-ink-soft: rgba(47,45,42,0.66); --np-ink-faint:rgba(47,45,42,0.5); --np-accent: #2f6fb0; --np-line: rgba(47,111,176,0.22); --np-track: rgba(47,45,42,0.18); --np-vol-fill: rgba(47,45,42,0.5); --np-vol-thumb:rgba(47,45,42,0.7); --np-divider: rgba(47,45,42,0.12); --np-accent-soft: rgba(47,111,176,0.14); } .theme-light body, .theme-light.fx-body { background: var(--fx-bg); color: var(--fx-ink); } /* smooth the flip on the surfaces that change */ body, .fx-prose, .fx-press, .fx-downloads, .fx-foot { transition: background .5s ease, color .5s ease; } /* The HERO must stay dark in light mode: pin the dark palette inside it so the cinematic field, glow, particle title and bright aqua accents are unchanged. */ .theme-light .fx-hero { --fx-bg: #04101c; --fx-bg-2: #08202e; --fx-ink: #e2eef3; --fx-ink-dim: #7e94a0; --fx-teal: #45c8e0; --fx-teal-soft:#2c8298; --fx-line: rgba(69, 200, 224, 0.16); } /* footer flips to a cream well in light mode */ .theme-light .fx-foot { background: var(--fx-bg-2); color: var(--fx-ink-dim); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--fx-bg); color: var(--fx-ink); font-family: 'Spectral', Georgia, serif; font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .skip { position: absolute; left: -9999px; top: 0; } .skip:focus { left: 16px; top: 16px; padding: 8px 12px; background: var(--fx-teal); color: #04101c; z-index: 999; } .fx-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 85% 75% at 50% 56%, rgba(69,200,224,0.08) 0%, rgba(44,130,152,0.05) 38%, rgba(4,16,28,0) 68%), radial-gradient(ellipse at center, var(--fx-bg-2) 0%, var(--fx-bg) 72%, #020a12 100%); } .fx-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* flowing-waves canvas (flow.js) sits at z:1, behind the copy */ .fx-flow { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .fx-glow { position: absolute; left: 50%; top: 44%; width: 60vmax; height: 60vmax; transform: translate(-50%, -50%); background: radial-gradient(circle at center, rgba(69,200,224,0.12) 0%, rgba(44,130,152,0.05) 34%, transparent 64%); filter: blur(24px); mix-blend-mode: screen; animation: fx-breathe 13s ease-in-out infinite; } @keyframes fx-breathe { 0%,100% { opacity: 0.6; } 50% { opacity: 0.95; } } .fx-grain { position: absolute; inset: 0; background: radial-gradient(circle at 18% 24%, rgba(69,200,224,0.05) 0%, transparent 0.5%), radial-gradient(circle at 63% 41%, rgba(69,200,224,0.045) 0%, transparent 0.5%), radial-gradient(circle at 41% 73%, rgba(69,200,224,0.04) 0%, transparent 0.5%); background-size: 8px 8px; opacity: 0.5; mix-blend-mode: screen; } .fx-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(4,16,28,0) 0%, rgba(4,16,28,0.4) 72%, rgba(4,16,28,0.85) 100%), linear-gradient(to bottom, transparent 62%, var(--fx-bg) 100%); } .fx-copy { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(140px, 24vh, 290px) var(--fx-gutter) 0; max-width: 100%; } .fx-title { margin: 0; font-family: 'Jost', sans-serif; font-weight: 300; font-size: clamp(60px, 15vw, 210px); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.0; color: #d4eef5; text-shadow: 0 0 30px rgba(0,0,0,0.5), 0 0 64px rgba(69,200,224,0.28), 0 0 120px rgba(44,130,152,0.2); } .fx-tag { margin: 1.4em auto 0; max-width: 42ch; font-family: 'Spectral', Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(17px, 1.9vw, 23px); letter-spacing: 0.04em; color: var(--fx-ink-dim); text-shadow: 0 0 12px rgba(0,0,0,0.9); } .fx-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 2.2em; } .fx-watch { display: inline-flex; align-items: center; gap: 10px; padding: 12px 36px; font-family: 'Spectral', sans-serif; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-ink); text-decoration: none; border: 1px solid var(--fx-line); border-radius: 999px; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 0 10px rgba(0,0,0,0.85); transition: border-color 0.4s, color 0.4s, background 0.4s; } .fx-watch:hover { border-color: var(--fx-teal); color: var(--fx-teal); background: rgba(69,200,224,0.1); } .fx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fx-teal); box-shadow: 0 0 8px var(--fx-teal), 0 0 16px rgba(69,200,224,0.6); animation: fx-pulse 2.4s ease-in-out infinite; } @keyframes fx-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.82); } } .fx-scroll { position: absolute; left: 0; right: 0; bottom: 28px; width: max-content; margin-inline: auto; z-index: 3; font-family: 'Spectral', sans-serif; font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fx-ink-dim); } .fx-scroll::after { content: ""; display: block; width: 1px; height: 28px; margin: 8px auto 0; background: linear-gradient(to bottom, var(--fx-teal), transparent); } .fx-prose { padding: clamp(80px, 14vh, 180px) var(--fx-gutter); background: var(--fx-bg); } .fx-prose--alt { background: var(--fx-bg-2); } .fx-press { padding: clamp(60px, 12vh, 140px) var(--fx-gutter); background: var(--fx-bg); } .fx-prose + .fx-prose { padding-top: clamp(40px, 7vh, 90px); } .fx-prose + .fx-press { padding-top: 0; } .fx-prose:has(+ .fx-press) { padding-bottom: clamp(20px, 4vh, 50px); } .fx-inner { max-width: 760px; margin: 0 auto; } .fx-eyebrow { font-family: 'Spectral', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fx-teal); margin: 0 0 1.6em; } .fx-prose p { font-family: 'Spectral', Georgia, serif; font-weight: 300; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.62; letter-spacing: 0.005em; color: var(--fx-ink); margin: 0 0 1.4em; } .fx-prose p:last-child { margin-bottom: 0; } .fx-prose em { font-style: italic; color: var(--fx-teal); } .fx-lede { font-size: clamp(20px, 2.2vw, 27px) !important; font-style: italic; color: var(--fx-ink); } .fx-meta { margin-top: 2.2em !important; font-size: 15px !important; color: var(--fx-ink-dim) !important; } .fx-tool { display: inline-block; padding: 1px 0.4em; font-family: 'Spectral', sans-serif; font-weight: 300; font-size: 0.92em; font-style: normal; letter-spacing: 0.06em; color: var(--fx-teal); border-bottom: 1px solid var(--fx-line); } /* downloads / materials */ .fx-downloads { padding: clamp(60px, 10vh, 130px) var(--fx-gutter); background: var(--fx-bg-2); } .fx-dl { list-style: none; margin: 0; padding: 0; } .fx-dl li { border-top: 1px solid var(--fx-line); } .fx-dl li:last-child { border-bottom: 1px solid var(--fx-line); } .fx-dl a { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5em; padding: 1.1em 0; text-decoration: none; color: var(--fx-ink); transition: color 0.3s, padding-left 0.3s; } .fx-dl a::before { content: "↓"; margin-right: 0.7em; color: var(--fx-teal); align-self: center; } .fx-dl a:hover { color: var(--fx-teal); padding-left: 0.4em; } .fx-dl__name { flex: 1; font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(16px, 1.7vw, 21px); } .fx-dl__meta { flex-shrink: 0; font-family: 'Spectral', sans-serif; font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fx-ink-dim); white-space: nowrap; } .fx-list { list-style: none; margin: 0; padding: 0; } .fx-list li { display: flex; align-items: baseline; gap: 1.5em; padding: 1em 0; border-top: 1px solid var(--fx-line); font-family: 'Jost', sans-serif; font-weight: 400; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.4; color: var(--fx-ink); } .fx-list li:last-child { border-bottom: 1px solid var(--fx-line); } .fx-year { flex-shrink: 0; width: 4em; color: var(--fx-teal); font-family: 'Spectral', sans-serif; font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase; } .fx-venue { flex: 1; } .fx-venue em { color: var(--fx-teal-soft); font-style: italic; } .fx-foot { padding: clamp(40px, 6vh, 80px) var(--fx-gutter); text-align: center; font-family: 'Spectral', sans-serif; font-size: 12px; letter-spacing: 0.04em; color: var(--fx-ink-dim); background: #020a12; } .fx-foot p { margin: 0.4em 0; } .foot__back a { color: var(--fx-ink-dim); text-decoration: none; transition: color 0.3s; } .foot__back a:hover { color: var(--fx-teal); } [data-fade], [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); } [data-fade].is-revealed, [data-reveal].is-revealed { opacity: 1; transform: none; } @media (max-width: 640px) { .fx-title { font-size: clamp(54px, 19vw, 120px); } } @media (prefers-reduced-motion: reduce) { .fx-glow { animation: none !important; } [data-fade], [data-reveal] { opacity: 1 !important; transform: none !important; } } /* audio toolkit + reactive */ .fx-audio { position:absolute; bottom:26px; right:clamp(20px,3vw,40px); z-index:4; display:flex; align-items:center; gap:14px; color:var(--fx-ink); pointer-events:auto; } .hero__audio-btn { width:30px;height:30px; display:inline-flex;align-items:center;justify-content:center; padding:0; background:transparent; border:1px solid var(--fx-line); border-radius:50%; color:var(--fx-ink); cursor:pointer; transition:border-color .3s,color .3s,background .3s,transform .2s; } .hero__audio-btn:hover { border-color:var(--fx-accent); color:var(--fx-accent); background:rgba(255,255,255,0.06); } .hero__audio-btn:active { transform:scale(0.94); } .hero__audio-icon { width:14px;height:14px;display:block; } .hero__audio-icon--off { display:none; } .fx-audio.is-muted .hero__audio-icon--on { display:none; } .fx-audio.is-muted .hero__audio-icon--off { display:block; } .fx-audio.is-muted .hero__audio-slider__fill, .fx-audio.is-muted .hero__audio-slider__thumb { background:var(--fx-ink-dim); } .hero__audio-slider { position:relative; width:84px;height:18px; display:flex;align-items:center; cursor:pointer; touch-action:none; outline:none; } .hero__audio-slider__track,.hero__audio-slider__fill { position:absolute; left:0;top:50%; height:1px; transform:translateY(-50%); pointer-events:none; } .hero__audio-slider__track { width:100%; background:var(--fx-line); } .hero__audio-slider__fill { background:var(--fx-accent); width:0%; transition:width .08s linear, background .3s; } .hero__audio-slider__thumb { position:absolute;top:50%;left:0%; width:8px;height:8px; border-radius:50%; background:var(--fx-accent); transform:translate(-50%,-50%) scale(1); pointer-events:none; transition:left .08s linear, transform .22s ease, background .3s; } .hero__audio-slider:hover .hero__audio-slider__thumb { transform:translate(-50%,-50%) scale(1.5); } .hero__fs-btn { margin-left:4px; } .hero__fs-icon--exit { display:none; } .hero__fs-btn.is-fs .hero__fs-icon--enter { display:none; } .hero__fs-btn.is-fs .hero__fs-icon--exit { display:block; } /* ============== NOW PLAYING — floating media player (Flux aqua/dark) ============== */ .now-playing{position:fixed;bottom:20px;right:20px;z-index:100;width:min(300px,calc(100vw - 28px));padding:16px 20px 14px;background:var(--np-bg);color:var(--np-ink);border:1px solid var(--np-line);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,0.5);font-family:'Jost',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s,background .5s ease,color .5s ease,border-color .5s ease;} .now-playing.is-hidden{transform:translateY(150%);opacity:0;pointer-events:none;} .np-close{position:absolute;top:9px;right:12px;width:24px;height:24px;background:transparent;border:none;color:var(--np-ink-faint);font-size:22px;cursor:pointer;line-height:1;padding:0;font-family:inherit;} .np-close:hover{color:var(--np-accent);} .np-fs{position:absolute;top:12px;right:42px;width:22px;height:22px;background:transparent;border:none;color:var(--np-ink-faint);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;} .np-fs:hover{color:var(--np-accent);} .np-fs svg{width:13px;height:13px;display:block;} .np-label{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--np-accent);margin:0 0 6px;display:flex;align-items:center;gap:7px;} .np-label .np-dot{width:6px;height:6px;border-radius:50%;background:var(--np-accent);display:inline-block;box-shadow:0 0 8px var(--np-accent);} .np-title{font-family:'Spectral',Georgia,serif;font-size:22px;font-weight:400;color:var(--np-ink);margin:0 0 2px;line-height:1.2;letter-spacing:0.005em;} .np-artist{font-size:12.5px;letter-spacing:0.02em;color:var(--np-ink-soft);margin:0 0 10px;} .np-controls{display:flex;align-items:center;gap:10px;} .np-play{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid var(--np-accent);background:transparent;color:var(--np-accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .2s,transform .15s;} .np-play:hover{background:var(--np-accent-soft);} .np-play:active{transform:scale(.94);} .np-play svg{width:11px;height:11px;display:block;} .np-play .icon-pause{display:none;} .np-play[data-state="playing"] .icon-play{display:none;} .np-play[data-state="playing"] .icon-pause{display:block;} .np-progress{flex:1;position:relative;height:18px;cursor:pointer;touch-action:none;} .np-progress-track,.np-progress-fill{position:absolute;left:0;top:50%;height:1px;transform:translateY(-50%);pointer-events:none;} .np-progress-track{width:100%;background:var(--np-track);} .np-progress-fill{background:var(--np-accent);width:0%;} .np-progress-thumb{position:absolute;top:50%;left:0%;width:6px;height:6px;border-radius:50%;background:var(--np-accent);transform:translate(-50%,-50%);pointer-events:none;transition:transform .2s;} .np-progress:hover .np-progress-thumb{transform:translate(-50%,-50%) scale(1.5);} .np-time{flex-shrink:0;font-size:12px;color:var(--np-ink-soft);font-variant-numeric:tabular-nums;letter-spacing:0.02em;} .np-volume{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--np-divider);} .np-vol-icon{font-size:10px;color:var(--np-ink-soft);flex-shrink:0;letter-spacing:0.16em;} .np-vol-slider{flex:1;position:relative;height:14px;cursor:pointer;touch-action:none;} .np-vol-track,.np-vol-fill{position:absolute;left:0;top:50%;height:1px;transform:translateY(-50%);pointer-events:none;} .np-vol-track{width:100%;background:var(--np-track);} .np-vol-fill{background:var(--np-vol-fill);width:0%;} .np-vol-thumb{position:absolute;top:50%;left:0%;width:5px;height:5px;border-radius:50%;background:var(--np-vol-thumb);transform:translate(-50%,-50%);pointer-events:none;transition:transform .2s;} .np-vol-slider:hover .np-vol-thumb{transform:translate(-50%,-50%) scale(1.6);} @media (max-width:520px){.now-playing{bottom:14px;right:14px;left:14px;width:auto;}} /* venue link (museum) */ .fx-venue a { color: var(--fx-teal); text-decoration: none; border-bottom: 1px solid var(--fx-line); transition: border-color .3s, color .3s; } .fx-venue a:hover { border-bottom-color: var(--fx-teal); } /* =========================================================== TOP-RIGHT CONTROLS — Listen chip (left) + theme toggle (right) Sits over the dark hero, so it keeps the bright aqua look in both themes; the chip mirrors the hero "Watch / Listen" pills. =========================================================== */ .fx-controls{ position:fixed; z-index:60; top:clamp(14px,2.2vw,26px); right:clamp(14px,2.2vw,26px); display:flex; align-items:center; gap:10px; } .fx-listen{ height:38px; display:inline-flex; align-items:center; gap:10px; padding:0 18px; border-radius:999px; border:1px solid rgba(69,200,224,0.30); background:rgba(0,0,0,0.55); color:#dbeef5; font-family:'Spectral',sans-serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 2px 12px rgba(0,0,0,0.25); transition:border-color .4s,color .4s,background .4s,transform .2s; } .fx-listen:hover{ border-color:var(--fx-teal); color:var(--fx-teal); background:rgba(69,200,224,0.10); } .fx-listen:active{ transform:scale(.96); } .fx-listen__dot{ width:7px; height:7px; border-radius:50%; background:var(--fx-teal); box-shadow:0 0 8px var(--fx-teal),0 0 16px rgba(69,200,224,0.6); flex-shrink:0; animation:fx-pulse 2.4s ease-in-out infinite; } @keyframes fx-ring { 0% { box-shadow: 0 0 0 0 rgba(69,200,224,0.55); } 70% { box-shadow: 0 0 0 10px rgba(69,200,224,0); } 100% { box-shadow: 0 0 0 0 rgba(69,200,224,0); } } .theme-toggle{ width:38px; height:38px; flex-shrink:0; border-radius:50%; border:1px solid rgba(69,200,224,0.45); background:rgba(0,0,0,0.45); color:#dbeef5; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 2px 12px rgba(0,0,0,0.18); transition:border-color .3s,color .3s,background .3s,transform .2s; } .theme-toggle:hover{ color:var(--fx-teal); border-color:var(--fx-teal); } .theme-toggle:active{ transform:scale(.94); } .theme-toggle svg{ width:16px; height:16px; display:block; } .theme-toggle .icon-moon{ display:block; } .theme-toggle .icon-sun{ display:none; } .theme-light .theme-toggle .icon-sun{ display:block; } .theme-light .theme-toggle .icon-moon{ display:none; } @media (max-width:520px){ .fx-controls{ top:12px; right:12px; } .fx-listen{ height:34px; padding:0 13px; font-size:10px; letter-spacing:0.14em; } .theme-toggle{ width:34px; height:34px; } } /* =========================================================== SCROLL INDICATOR — the thin line breathes (scaleY pulse, top-anchored). =========================================================== */ .fx-scroll::after { transform-origin: top; animation: fx-scrollpulse 2.6s ease-in-out infinite; } @keyframes fx-scrollpulse { 0%,100% { transform: scaleY(0.35); opacity: 0.45; } 50% { transform: scaleY(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fx-scroll::after { animation: none !important; } .fx-listen__dot { animation: none !important; } }