and delete the query string. Nothing about it ships to a normal visitor. */ .wp-tuner { position: fixed; right: clamp(0.6rem, 2vw, 1.2rem); /* Clear of the jay switch, which sits in the same corner. */ bottom: 3.6rem; z-index: 80; width: min(17rem, calc(100vw - 1.6rem)); padding: 0.85rem 0.9rem 0.7rem; background: rgba(6, 12, 14, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--pw-rule); font-family: var(--pw-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--pw-bone-dim); } .wp-tuner h2 { margin: 0 0 0.6rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp-frost); } .wp-tuner label { display: block; margin-bottom: 0.55rem; } .wp-tuner label span { display: flex; justify-content: space-between; margin-bottom: 0.2rem; } .wp-tuner input[type="range"] { width: 100%; accent-color: var(--wp-frost); } .wp-tuner button { width: 100%; margin-top: 0.3rem; padding: 0.4rem; font: inherit; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp-frost); background: transparent; border: 1px solid var(--pw-brass-dim); cursor: pointer; } .wp-tuner button:hover { background: var(--wp-frost); color: var(--pw-void); } .wp-tuner code { display: block; margin-top: 0.5rem; color: var(--pw-bone-faint); word-break: break-all; line-height: 1.5; } /* ------------------------------------------------------------ fallback */ /* If WebGL is missing entirely, pines.js adds this class and the fog becomes two slowly-sliding CSS gradients. Not the same thing, but the page still reads as a foggy forest instead of a bare video. */ .wp-nogl .wp-fog { display: none; } .wp-nogl .wp-stage::after, .wp-nogl .wp-stage::before { content: ""; position: absolute; left: -30%; right: -30%; height: 70%; pointer-events: none; background: radial-gradient(60% 100% at 30% 60%, rgba(190, 215, 222, 0.16), transparent 70%), radial-gradient(50% 100% at 75% 40%, rgba(150, 180, 190, 0.13), transparent 70%); filter: blur(22px); } .wp-nogl .wp-stage::before { bottom: -6%; animation: wp-drift 68s linear infinite; } .wp-nogl .wp-stage::after { bottom: 22%; opacity: 0.6; animation: wp-drift 104s linear infinite reverse; } @keyframes wp-drift { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .wp-plate { transform: scale(1.06); } .wp-nogl .wp-stage::before, .wp-nogl .wp-stage::after { animation: none; } } /* ------------------------------------------------------------- narrow */ /* On a phone the text spans the full width, so a left-weighted scrim protects nothing. Swap it for a bottom-up one. */ @media (max-width: 48rem) { .wp-vignette { background: linear-gradient(to top, rgba(2, 6, 8, 0.86) 0%, rgba(2, 6, 8, 0.52) 34%, transparent 68%), radial-gradient(130% 80% at 50% 30%, transparent 40%, rgba(2, 5, 7, 0.6) 100%), linear-gradient(to bottom, rgba(2, 5, 7, 0.55) 0%, transparent 24%); } } @media (max-width: 34rem) { .wp-roster__link { grid-template-columns: auto 1fr; } .wp-roster__status { grid-column: 2; justify-self: start; margin-top: 0.3rem; } } /* -------------------------------------------------------------- tuner switch */ /* The panel used to require ?tune in the URL, which hid the most enjoyable thing on the page from everyone who did not already know about it. It is closed by default and it stays out of the way, but it is findable: a small switch that sits at 50% until you approach it. */ .wp-tuner-toggle { position: fixed; right: clamp(0.6rem, 2vw, 1.2rem); /* Above the jay switch, below the panel it opens. */ bottom: 3.6rem; z-index: 81; padding: 0.36rem 0.62rem; font-family: var(--pw-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pw-bone-faint); background: rgba(6, 12, 14, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--pw-rule); cursor: pointer; opacity: 0.5; transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .wp-tuner-toggle:hover, .wp-tuner-toggle:focus-visible, .wp-tuner-toggle.is-open { opacity: 1; color: var(--wp-frost); border-color: var(--wp-frost); } .wp-tuner-toggle:focus-visible { outline: 2px solid var(--wp-frost); outline-offset: 2px; } /* Clears the switch instead of covering it. Overrides the bottom set on .wp-tuner above — same specificity, later in the file. */ .wp-tuner { bottom: 6.4rem; } .wp-tuner[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .wp-tuner-toggle { transition: none; } }