/* ========================================================================== PRINCESS WONDA — MAIN SITE Built from the Princess Wonda Brand Book. Nothing here is shared with the Magic Hour EP system; that page keeps site.css + magichour.css. Batch 1: tokens, fonts, reset, base type, buttons, layout primitives. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · TOKENS -------------------------------------------------------------------------- */ :root { /* Colour — brand book p.11. Ratios measured against the field. */ --pw-field: #0A0A0A; /* not pure #000 (WDOS C-11) */ --pw-surface: #141414; /* cards, rows */ --pw-line: #2A2A2A; /* 1.38:1 — DECORATIVE ONLY, never meaningful */ --pw-yellow: #d4c230; /* 10.90:1 — the working accent */ --pw-red: #b50d04; /* 2.85:1 — A SURFACE. never type on dark */ --pw-red-lift: #E11B0F; /* 4.12:1 — display-size type only */ --pw-white: #ffffff; /* 19.80:1 */ --pw-muted: #B5B0A6; /* 9.17:1 */ --pw-ink-on-light: #0A0A0A; /* Type — brand book p.10 */ --pw-display: "Russo One", "Arial Black", sans-serif; --pw-body: "Montserrat", "Helvetica Neue", sans-serif; --pw-t-display: clamp(2.8rem, 9vw, 7rem); --pw-t-h1: clamp(2.2rem, 5.6vw, 4rem); --pw-t-h2: clamp(1.6rem, 3.4vw, 2.5rem); --pw-t-h3: 1.125rem; --pw-t-body: 1.0625rem; --pw-t-small: 0.875rem; --pw-t-label: 0.6875rem; --pw-measure: 66ch; /* Space — 8pt */ --pw-1: 0.5rem; --pw-2: 1rem; --pw-3: 1.5rem; --pw-4: 2rem; --pw-5: 3rem; --pw-6: 4rem; --pw-7: 6rem; --pw-8: 8rem; /* Radius — squared, to match Russo One */ --pw-r-button: 2px; --pw-r-card: 3px; --pw-r-image: 0; --pw-nav-h: 72px; --pw-wrap: 1240px; --pw-wrap-narrow: 760px; --pw-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* -------------------------------------------------------------------------- 2 · FONTS — self-hosted, latin subset, preloaded in -------------------------------------------------------------------------- */ @font-face { font-family: "Russo One"; src: url("../fonts/russo-one-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 3 · RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--pw-field); color: var(--pw-white); font-family: var(--pw-body); font-size: var(--pw-t-body); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100vh; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } [hidden] { display: none !important; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } :focus-visible { outline: 2px solid var(--pw-yellow); /* 10.90:1, past the 3:1 floor */ outline-offset: 3px; } .pw-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pw-skip { position: absolute; top: -100px; left: var(--pw-2); z-index: 200; background: var(--pw-yellow); color: var(--pw-ink-on-light); padding: var(--pw-1) var(--pw-2); font-weight: 700; text-decoration: none; } .pw-skip:focus { top: var(--pw-2); } /* -------------------------------------------------------------------------- 4 · LAYOUT -------------------------------------------------------------------------- */ .pw-wrap { width: 100%; max-width: var(--pw-wrap); margin-inline: auto; padding-inline: var(--pw-3); } .pw-wrap--narrow { max-width: var(--pw-wrap-narrow); } @media (min-width: 768px) { .pw-wrap { padding-inline: var(--pw-4); } } .pw-section { padding-block: var(--pw-6); } @media (min-width: 700px) { .pw-section { padding-block: var(--pw-7); } } /* The alternating rhythm the contrast law forces: black field, red band, yellow band. A band is a FILL, never a text colour on the dark field. */ .pw-band--red { background: var(--pw-red); color: var(--pw-white); } /* 6.94:1 */ .pw-band--yellow { background: var(--pw-yellow); color: var(--pw-ink-on-light); } /* 10.90:1 */ .pw-band--raise { background: var(--pw-surface); } /* -------------------------------------------------------------------------- 5 · TYPE -------------------------------------------------------------------------- */ .pw-display, .pw-h1, .pw-h2, .pw-h3 { font-family: var(--pw-display); font-weight: 400; /* Russo One has one weight; size and colour carry the hierarchy, never weight */ text-transform: uppercase; } .pw-display { font-size: var(--pw-t-display); line-height: 0.94; letter-spacing: -0.01em; } .pw-h1 { font-size: var(--pw-t-h1); line-height: 1.05; letter-spacing: -0.005em; } .pw-h2 { font-size: var(--pw-t-h2); line-height: 1.12; } .pw-h3 { font-size: var(--pw-t-h3); line-height: 1.3; letter-spacing: 0.01em; } .pw-lede { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.55; max-width: var(--pw-measure); } .pw-body { color: var(--pw-muted); max-width: var(--pw-measure); } .pw-body + .pw-body { margin-top: var(--pw-2); } .pw-small { font-size: var(--pw-t-small); color: var(--pw-muted); } /* the one all-caps role */ .pw-label { font-family: var(--pw-body); font-size: var(--pw-t-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pw-yellow); } .pw-band--red .pw-label, .pw-band--yellow .pw-label { color: inherit; opacity: .78; } .pw-yellow { color: var(--pw-yellow); } /* Red as type is display-size only, and lifted. Guarded so it can never be applied to body copy by accident. */ .pw-red-display { color: var(--pw-red-lift); font-family: var(--pw-display); font-size: max(1.75rem, var(--pw-t-h2)); } /* -------------------------------------------------------------------------- 6 · BUTTONS -------------------------------------------------------------------------- */ .pw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pw-1); min-height: 52px; padding: 0 var(--pw-4); font-family: var(--pw-body); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 2px solid transparent; border-radius: var(--pw-r-button); transition: background-color .2s var(--pw-ease), color .2s var(--pw-ease), border-color .2s var(--pw-ease), transform .12s var(--pw-ease); } .pw-btn:active { transform: translateY(1px); } /* primary: yellow fill, black ink — 10.90:1 */ .pw-btn--primary { background: var(--pw-yellow); color: var(--pw-ink-on-light); } .pw-btn--primary:hover { background: #E4D449; } /* secondary: outlined in yellow on the dark field */ .pw-btn--ghost { background: transparent; color: var(--pw-yellow); border-color: var(--pw-yellow); } .pw-btn--ghost:hover { background: var(--pw-yellow); color: var(--pw-ink-on-light); } /* on a red band the fill flips to white — 6.94:1 */ .pw-band--red .pw-btn--primary { background: var(--pw-white); color: var(--pw-red); } .pw-band--red .pw-btn--ghost { color: var(--pw-white); border-color: var(--pw-white); } .pw-band--red .pw-btn--ghost:hover { background: var(--pw-white); color: var(--pw-red); } /* on a yellow band it flips to black */ .pw-band--yellow .pw-btn--primary { background: var(--pw-ink-on-light); color: var(--pw-yellow); } .pw-band--yellow .pw-btn--ghost { color: var(--pw-ink-on-light); border-color: var(--pw-ink-on-light); } .pw-band--yellow .pw-btn--ghost:hover { background: var(--pw-ink-on-light); color: var(--pw-yellow); } .pw-btn--block { width: 100%; } /* On a phone a pair of CTAs is stacked, not wrapped. Relying on flex-wrap means the layout depends on how wide the label happens to render, and a webfont that swaps late or a longer word is enough to push the second button off the screen. Below 480 they simply take the full column. */ @media (max-width: 479px) { .pw-hero__copy p .pw-btn, .pw-ep__cta .pw-btn, .pw-contact .pw-btn { flex: 1 0 100%; } } @media (prefers-reduced-motion: reduce) { .pw-btn { transition: none; } .pw-btn:active { transform: none; } } /* -------------------------------------------------------------------------- 7 · HERO — six supplied layers, placed by percentage off the 3632x1920 canvas they were exported against. Depths are declared here; one rAF loop writes --y in Batch 3. -------------------------------------------------------------------------- */ /* Measured down the supplied background, left third, where copy sits: top 10% white 1.52:1 yellow 1.20:1 <- unusable mid 55% white 4.45:1 yellow 2.45:1 foot 85% white 15.29:1 yellow 8.42:1 <- safe So HERO COPY ALWAYS SITS IN THE FOOT, under the fade. Never the top half. The layout enforces it rather than trusting anyone to remember. */ .pw-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--pw-field); display: flex; flex-direction: column; justify-content: flex-end; min-height: min(88svh, 760px); } .pw-hero__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Three nested boxes, because three different things move this layer and a single element has only one transform: .pw-hero__l parallax translate3d(0, var(--y), 0) .pw-hero__in the entrance slide / scale, once picture the spin vinyl only, forever Collapse any two of these into one element and the last one applied wins. */ .pw-hero__l { position: absolute; transform: translate3d(0, var(--y, 0px), 0); will-change: transform; } .pw-hero__in { display: block; width: 100%; height: 100%; } /* The wrapper must be stretched too. Left at its default, the img's height:100% resolves against an auto-height box and the plate collapses to the file's own aspect ratio. */ .pw-hero__l picture { display: block; width: 100%; height: 100%; } .pw-hero__l img { width: 100%; height: auto; display: block; } /* The vinyl is a picture disc: a true circle inscribed in a square frame, centred at exactly 50/50, so it turns without a wobble and nothing sweeps outside its box. Verified against the alpha channel, not assumed. */ @keyframes pw-spin { to { transform: rotate(360deg); } } .pw-hero__l--vinyl picture { animation: pw-spin 24s linear infinite; transform-origin: 50% 50%; } /* off screen it stops: no compositor work for something nobody can see */ .pw-hero:not(.is-seen) .pw-hero__l--vinyl picture { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .pw-hero__l--vinyl picture { animation: none; } } .pw-hero__l--bg { --d: 0.00; left: 0; top: 0; width: 100%; } .pw-hero__l--bg img { width: 100%; height: 100%; object-fit: cover; } .pw-hero__l--bg { inset: 0; } .pw-hero__l--circ-r { --d: 0.05; left: 48.51%; top: 12.24%; width: 47.00%; } .pw-hero__l--circ-m { --d: 0.08; left: 25.69%; top: 19.64%; width: 36.95%; } .pw-hero__l--vinyl { --d: 0.16; left: 6.36%; top: 20.05%; width: 36.23%; } /* nearest */ /* she is composited IN FRONT of both circles, so she must travel further than them or the depth reads backwards */ .pw-hero__l--pw { --d: 0.11; left: 49.39%; top: 1.20%; width: 47.36%; } /* layer 6 was a flat vertical fade shipped as a 3630x946 PNG. Reproduced exactly, sharper at any resolution, and zero bytes. */ .pw-hero__fade { position: absolute; left: 0; right: 0; top: 50.73%; bottom: 0; z-index: 1; /* The supplied fade terminated in rgba(38,26,1), a warm brown. Against the page field of #0A0A0A that left a visible horizontal seam where the stage ends. It now resolves to the field colour so the join disappears. */ background: linear-gradient(180deg, rgba(38,26,1,0) 0%, rgba(28,20,4,.86) 62%, rgba(10,10,10,1) 100%); pointer-events: none; } .pw-hero__copy { position: relative; z-index: 2; margin-top: auto; /* pinned to the foot: see the note above */ padding-block: var(--pw-5) var(--pw-6); } /* The display scale was set for PRINCESS / WONDA. AFROFUSION is ten characters and at 7rem it ran across the vinyl and into her shoulder, so the headline sits a step down from the global display size. Line height goes to 1 as well: at 0.94 the tail of the Q cut into the A below it. */ .pw-hero__copy h1 { font-size: clamp(2.35rem, 6.2vw, 4.9rem); line-height: 1; } /* A scrim sized to the copy block, not to the artwork. Pinning the copy to the foot was not enough on its own: a tall block still reaches back up into the pale part of the sunrise, where white measures 2.64:1. This darkens only the band the words occupy and leaves the composition alone. */ .pw-hero__copy::before { content: ""; position: absolute; z-index: -1; left: -50vw; right: -50vw; bottom: 0; top: -6%; background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.55) 26%, rgba(10,10,10,.86) 58%, rgba(10,10,10,.94) 100%); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .pw-hero__l { transform: none !important; } } /* -------------------------------------------------------------------------- 8 · LOGO The lockup is 2.78:1. Sized by WIDTH it overran the bar: clamp(...,210px) rendered 75.5px tall inside a 68px nav. It is now driven by HEIGHT, which is the dimension that actually has to fit, so the bar can never be overrun again. 42px was chosen by rendering 36/42/48 against real nav type: below 42 the monogram's hair detail closes into a blob. -------------------------------------------------------------------------- */ .pw-logo { display: block; height: 42px; width: auto; } @media (max-width: 560px) { .pw-logo { height: 36px; } } .pw-logo--sm { height: 52px; } /* footer and menu, where there is room */ /* -------------------------------------------------------------------------- 9 · NAV shell -------------------------------------------------------------------------- */ /* No backdrop-filter here, and that is a measurement rather than a taste. A blurred layer pinned across the full width has to be recomposited on every scroll frame, and it was the single dominant cost on this site: removing it took a scroll sweep from 39 slow frames out of 41 down to 18, which is the same figure as switching every animation off. Over a field this dark a 94% flat fill is visually indistinguishable from a blur, so the effect was buying nothing and charging for it on every phone. A soft gradient lip does the work the blur was pretending to do. */ .pw-nav { position: sticky; top: 0; z-index: 60; height: var(--pw-nav-h); display: flex; align-items: center; background: linear-gradient(180deg, rgba(10,10,10,.94) 62%, rgba(10,10,10,.72) 100%); border-bottom: 1px solid transparent; transition: background-color .3s var(--pw-ease), border-color .3s var(--pw-ease); } .pw-nav[data-stuck="true"] { background: rgba(10,10,10,.97); border-bottom-color: var(--pw-line); } /* burger · logo · links · CTA. The burger leads on every breakpoint, so the full menu is one target that never moves. */ .pw-nav__inner { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--pw-2); width: 100%; } @media (min-width: 900px) { .pw-nav__inner { gap: var(--pw-3); } } /* Every child is placed explicitly. Left to auto-placement, hiding the link row below 1000px removed it as a grid item, so the Contact button slid into the 1fr column and stretched to fill it: on a 390px screen it rendered 148px wide against 110px of content and reached back toward the logo. Named columns cannot drift when a sibling is hidden. */ .pw-nav__inner > .pw-burger { grid-column: 1; } .pw-nav__inner > .pw-nav__brand { grid-column: 2; } .pw-nav__inner > .pw-nav__links { grid-column: 3; } .pw-nav__inner > .pw-btn--nav { grid-column: 4; justify-self: end; } .pw-nav__links { display: none; gap: var(--pw-4); align-items: center; justify-self: end; } @media (min-width: 1000px) { .pw-nav__links { display: flex; } } .pw-nav__link { position: relative; font-family: var(--pw-body); font-size: var(--pw-t-small); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pw-muted); text-decoration: none; padding-block: var(--pw-1); transition: color .2s var(--pw-ease); } /* the rule draws in from the left rather than switching on, and the current page keeps it drawn */ .pw-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pw-yellow); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--pw-ease); } .pw-nav__link:hover { color: var(--pw-white); } .pw-nav__link:hover::after, .pw-nav__link:focus-visible::after { transform: scaleX(1); } .pw-nav__link[aria-current="page"] { color: var(--pw-yellow); } .pw-nav__link[aria-current="page"]::after { transform: scaleX(1); } /* the nav CTA is a shorter button than the page ones: 40px, so it sits inside a 72px bar with air rather than filling it */ .pw-btn--nav { min-height: 40px; padding: 0 var(--pw-3); font-size: .8125rem; letter-spacing: .1em; } /* On a phone the Contact button was allowed to grow until it crowded the logo. It is now a fixed, compact chip: the label shortens and the padding tightens, so it takes the space it needs and no more. */ @media (max-width: 719px) { .pw-btn--nav { min-height: 34px; padding: 0 var(--pw-2); font-size: .6875rem; letter-spacing: .08em; } } @media (max-width: 359px) { .pw-nav .pw-btn--nav { display: none; } } /* ── Submenu ─────────────────────────────────────────────────────────────── Magic Hour hangs under Music. Opened by hover AND focus-within, so it is reachable from the keyboard with no script and no aria-expanded to keep in sync with two different input methods. */ .pw-nav__grp { position: relative; display: inline-flex; } .pw-nav__link--has { display: inline-flex; align-items: center; gap: .3rem; } .pw-nav__link--has svg { width: 13px; height: 13px; transition: transform .25s var(--pw-ease); } .pw-nav__grp:hover .pw-nav__link--has svg, .pw-nav__grp:focus-within .pw-nav__link--has svg { transform: rotate(180deg); } .pw-nav__sub { position: absolute; top: 100%; left: 50%; translate: -50% 0; min-width: 190px; margin-top: 14px; padding: var(--pw-1); background: rgba(16,16,16,.97); border: 1px solid var(--pw-line); border-radius: var(--pw-r-card); box-shadow: 0 18px 40px rgba(0,0,0,.55); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--pw-ease), transform .25s var(--pw-ease), visibility .2s; } /* the gap between the link and the panel would drop the hover, so the panel reaches back up under the pointer with a transparent lip */ .pw-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .pw-nav__grp:hover .pw-nav__sub, .pw-nav__grp:focus-within .pw-nav__sub { opacity: 1; visibility: visible; transform: none; } .pw-nav__sub a { padding: .6rem var(--pw-2); font-size: var(--pw-t-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pw-muted); text-decoration: none; border-radius: 2px; transition: color .18s var(--pw-ease), background-color .18s var(--pw-ease); } .pw-nav__sub a:hover { color: var(--pw-yellow); background: rgba(212,194,48,.09); } .pw-nav__sub a[aria-current="page"] { color: var(--pw-yellow); } @media (prefers-reduced-motion: reduce) { .pw-nav__sub, .pw-nav__sub a, .pw-nav__link--has svg { transition: none; } .pw-nav__grp:hover .pw-nav__link--has svg { transform: none; } } /* the overlay menu shows the child indented under its parent */ .pw-menu__item--sub .pw-menu__t { font-size: clamp(1.15rem, 3vw, 1.9rem); color: var(--pw-yellow); } .pw-menu__item--sub .pw-menu__n { color: var(--pw-yellow); font-size: 1rem; } /* -------------------------------------------------------------------------- 10 · CARDS + GRIDS (shared by Music, Videos, Gallery) -------------------------------------------------------------------------- */ .pw-grid { display: grid; gap: var(--pw-3); } .pw-grid--2 { grid-template-columns: repeat(2, 1fr); } .pw-grid--3 { grid-template-columns: repeat(2, 1fr); } .pw-grid--4 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .pw-grid--3 { grid-template-columns: repeat(3, 1fr); } .pw-grid--4 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .pw-grid--4 { grid-template-columns: repeat(4, 1fr); } } .pw-card { background: var(--pw-surface); border-radius: var(--pw-r-card); overflow: hidden; } .pw-card__art { position: relative; background: #000; } .pw-card__art img { width: 100%; aspect-ratio: 1; object-fit: cover; } .pw-card__body { padding: var(--pw-2); } .pw-card__name { font-family: var(--pw-display); font-size: 0.9375rem; text-transform: uppercase; line-height: 1.25; } .pw-card__meta { font-size: var(--pw-t-small); color: var(--pw-muted); margin-top: .2rem; } /* Gallery cells are built to the 400px source and never upscaled. */ .pw-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pw-2); } @media (min-width: 760px) { .pw-gal { grid-template-columns: repeat(3, 1fr); } } .pw-gal img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--pw-r-image); } .pw-rule { height: 1px; background: var(--pw-line); border: 0; } /* ========================================================================== 11 · HOME — graphics led. Few words, and every section a different shape so no two neighbours read the same (WDOS L-04). ========================================================================== */ /* ── EP band: sitewide, flips itself at the release timestamp ───────────── */ .pw-ep { position: relative; overflow: hidden; } .pw-ep__in { display: grid; gap: var(--pw-3); align-items: center; padding-block: var(--pw-5); } @media (min-width: 860px) { .pw-ep__in { grid-template-columns: auto 1fr auto; gap: var(--pw-5); } } .pw-ep__art { width: 132px; height: 132px; object-fit: cover; border-radius: var(--pw-r-image); } .pw-ep__ttl { font-family: var(--pw-display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; text-transform: uppercase; } .pw-ep__cta { display: flex; gap: var(--pw-1); flex-wrap: wrap; } @media (max-width: 859px) { .pw-ep__cta .pw-btn { flex: 1 1 auto; } } /* ── Discography: covers at full bleed, no card chrome ─────────────────── */ .pw-disc { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pw-1); } @media (min-width: 700px) { .pw-disc { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1040px) { .pw-disc { grid-template-columns: repeat(5, 1fr); } } .pw-rel { position: relative; display: block; text-decoration: none; overflow: hidden; background: #000; } .pw-rel img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s var(--pw-ease); } .pw-rel:hover img, .pw-rel:focus-visible img { transform: scale(1.05); } /* Same lesson as the video captions. Her covers run from black (Fire) to very bright (Fantasy Fair, International Lovin), and the 11px year line measured 3.64:1 through the old veil on the bright ones. Ramped earlier and deeper. */ .pw-rel__veil { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--pw-2); background: linear-gradient(180deg, rgba(10,10,10,0) 34%, rgba(10,10,10,.55) 62%, rgba(10,10,10,.96) 100%); } .pw-rel__name { font-family: var(--pw-display); font-size: .8125rem; text-transform: uppercase; line-height: 1.2; } .pw-rel__yr { font-size: .6875rem; color: var(--pw-muted); letter-spacing: .1em; } .pw-rel__flag { position: absolute; top: var(--pw-1); left: var(--pw-1); background: var(--pw-yellow); color: var(--pw-ink-on-light); font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .22rem .45rem; } @media (prefers-reduced-motion: reduce) { .pw-rel img { transition: none; } .pw-rel:hover img { transform: none; } } /* ── Watch: one big frame. Click-to-load, so YouTube sets nothing until someone actually asks for it. ───────────────────────────────────────── */ .pw-play { position: relative; display: block; width: 100%; background: #000; border: 0; padding: 0; cursor: pointer; overflow: hidden; } .pw-play img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .6s var(--pw-ease), opacity .3s linear; } .pw-play:hover img, .pw-play:focus-visible img { transform: scale(1.03); opacity: .82; } .pw-play__btn { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .pw-play__btn span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--pw-yellow); color: var(--pw-ink-on-light); transition: transform .3s var(--pw-ease); } .pw-play:hover .pw-play__btn span { transform: scale(1.08); } .pw-play__btn svg { width: 26px; height: 26px; margin-left: 4px; } /* The caption scrim has to hold white at 4.5:1 over the WORST still, not the average one. Her thumbnails run from near-black (Bust My Mind) to very pale (iSurrender, My Body), and on the pale ones a gradient that starts at transparent leaves the title sitting at roughly 19% cover, which measures about 1.2:1. The ramp now finishes before the text starts, and the padding gives it the room to do that. Verified against every thumbnail on disk. */ .pw-play__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--pw-4) var(--pw-3) var(--pw-3); background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.62) 28%, rgba(10,10,10,.92) 62%, rgba(10,10,10,.96) 100%); text-align: left; pointer-events: none; } .pw-play iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; } @media (prefers-reduced-motion: reduce) { .pw-play img, .pw-play__btn span { transition: none; } .pw-play:hover img { transform: none; } } /* ── In frame: a mosaic, deliberately not a uniform grid ───────────────── */ .pw-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pw-1); } @media (min-width: 760px) { .pw-mosaic { grid-template-columns: repeat(4, 1fr); } } .pw-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; } .pw-mosaic > a { display: block; overflow: hidden; background: #000; } .pw-mosaic > a:nth-child(1) { grid-row: span 2; } @media (min-width: 760px) { .pw-mosaic > a:nth-child(4) { grid-row: span 2; } } .pw-mosaic > a img { transition: transform .5s var(--pw-ease); } .pw-mosaic > a:hover img { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { .pw-mosaic > a img { transition: none; } .pw-mosaic > a:hover img { transform: none; } } /* ── Her words ─────────────────────────────────────────────────────────── */ .pw-quote { display: grid; gap: var(--pw-4); align-items: center; } @media (min-width: 900px) { .pw-quote { grid-template-columns: .82fr 1fr; gap: var(--pw-6); } } .pw-quote__mark { color: var(--pw-yellow); font-family: var(--pw-display); font-size: 3rem; line-height: 1; } .pw-quote blockquote { font-family: var(--pw-display); text-transform: none; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.25; margin: var(--pw-2) 0 0; } .pw-quote figcaption { margin-top: var(--pw-3); } .pw-quote__img img { width: 100%; aspect-ratio: 2/3; object-fit: cover; } /* ── Socials ───────────────────────────────────────────────────────────── */ .pw-socials { display: flex; gap: var(--pw-1); flex-wrap: wrap; } .pw-social { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--pw-line); color: var(--pw-muted); transition: color .2s var(--pw-ease), border-color .2s var(--pw-ease); } .pw-social:hover { color: var(--pw-yellow); border-color: var(--pw-yellow); } .pw-social svg { width: 19px; height: 19px; } /* ── Footer ────────────────────────────────────────────────────────────── */ .pw-foot { border-top: 1px solid var(--pw-line); padding-block: var(--pw-5); } .pw-foot__grid { display: grid; gap: var(--pw-4); } @media (min-width: 760px) { .pw-foot__grid { grid-template-columns: 1.2fr 1fr 1fr; } } .pw-foot__t { font-family: var(--pw-display); font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--pw-2); } .pw-foot ul { list-style: none; padding: 0; display: grid; gap: .1rem; } .pw-foot a { color: var(--pw-muted); text-decoration: none; font-size: .9375rem; } .pw-foot a:hover { color: var(--pw-yellow); } /* footer links measured 19px tall as bare inline text, under the 24px minimum target size; the padding replaces the list gap rather than adding to it, so the column keeps its rhythm */ .pw-foot li a, .pw-foot__addr { display: inline-block; padding-block: 5px; } .pw-foot__base { margin-top: var(--pw-4); padding-top: var(--pw-3); border-top: 1px solid var(--pw-line); font-size: var(--pw-t-small); color: var(--pw-muted); } /* ── The burger ──────────────────────────────────────────────────────────── Two bars of deliberately unequal length inside a hairline square. The short bar grows to meet the long one on hover, then the pair crosses into an X on open. Real geometry, so it stays crisp at any zoom. */ .pw-burger { --bar: 2px; position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; width: 46px; height: 46px; padding: 0 12px; background: none; border: 1px solid var(--pw-line); border-radius: var(--pw-r-button); color: var(--pw-white); cursor: pointer; transition: border-color .25s var(--pw-ease), background-color .25s var(--pw-ease); } .pw-burger:hover { border-color: var(--pw-yellow); } .pw-burger i { display: block; height: var(--bar); background: currentColor; border-radius: 1px; transition: width .3s var(--pw-ease), transform .3s var(--pw-ease), opacity .18s linear, background-color .25s var(--pw-ease); } .pw-burger i:nth-child(1) { width: 20px; } .pw-burger i:nth-child(2) { width: 12px; } .pw-burger:hover i { background: var(--pw-yellow); } .pw-burger:hover i:nth-child(2) { width: 20px; } .pw-burger[aria-expanded="true"] i { width: 20px; background: var(--pw-yellow); } .pw-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(4px) rotate(45deg); } .pw-burger[aria-expanded="true"] i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } .pw-burger[aria-expanded="true"] { border-color: var(--pw-yellow); } @media (prefers-reduced-motion: reduce) { .pw-burger, .pw-burger i { transition: none; } } /* ── The full menu ───────────────────────────────────────────────────────── Sits below the nav bar so the burger stays put and becomes the close control. Numbered list left, a press shot holding the right. */ .pw-menu { position: fixed; inset: var(--pw-nav-h) 0 0 0; z-index: 55; background: var(--pw-field); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .32s var(--pw-ease), visibility .32s; } .pw-menu[data-open="true"] { opacity: 1; visibility: visible; } .pw-menu__in { min-height: 100%; display: grid; align-content: space-between; gap: var(--pw-4); padding-block: var(--pw-4); } /* the photograph is decoration: it never carries meaning, and it drops out entirely below 900 rather than fighting the list for width */ .pw-menu__art { display: none; } @media (min-width: 900px) { .pw-menu__in { grid-template-columns: 1.15fr .85fr; align-content: start; gap: var(--pw-7); } /* capped against the panel height, not just its own ratio, so the socials and the address stay above the fold at a laptop height */ .pw-menu__art { display: block; position: relative; overflow: hidden; align-self: start; aspect-ratio: 4 / 5; background: #000; max-height: calc(100svh - var(--pw-nav-h) - 210px); } .pw-menu__art img { width: 100%; height: 100%; object-fit: cover; opacity: .9; } .pw-menu__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(10,10,10,0) 45%, rgba(10,10,10,.85) 100%); } .pw-menu__foot { grid-column: 1 / -1; } } .pw-menu__nav { display: grid; } .pw-menu__item { position: relative; display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: var(--pw-2); padding-block: clamp(var(--pw-2), 1.6vw, var(--pw-3)); border-top: 1px solid var(--pw-line); text-decoration: none; color: var(--pw-white); } .pw-menu__item:last-of-type { border-bottom: 1px solid var(--pw-line); } .pw-menu__n { font-family: var(--pw-body); font-size: .6875rem; font-weight: 700; letter-spacing: .18em; color: var(--pw-muted); transition: color .25s var(--pw-ease); } .pw-menu__t { font-family: var(--pw-display); text-transform: uppercase; line-height: 1; font-size: clamp(1.75rem, 5.2vw, 3.25rem); transition: transform .35s var(--pw-ease), color .25s var(--pw-ease); } /* the whole row lights and steps right; the arrow is the only thing that appears, so nothing reflows */ .pw-menu__go { opacity: 0; transform: translateX(-8px); color: var(--pw-yellow); transition: opacity .25s var(--pw-ease), transform .35s var(--pw-ease); } .pw-menu__go svg { width: 24px; height: 24px; } .pw-menu__item:hover .pw-menu__t, .pw-menu__item:focus-visible .pw-menu__t { color: var(--pw-yellow); transform: translateX(14px); } .pw-menu__item:hover .pw-menu__n, .pw-menu__item:focus-visible .pw-menu__n { color: var(--pw-yellow); } .pw-menu__item:hover .pw-menu__go, .pw-menu__item:focus-visible .pw-menu__go { opacity: 1; transform: none; } .pw-menu__item[aria-current="page"] .pw-menu__t, .pw-menu__item[aria-current="page"] .pw-menu__n { color: var(--pw-yellow); } /* the EP is the one row that is not a site section, so it is marked, not merely listed */ .pw-menu__item--ep .pw-menu__t { color: var(--pw-yellow); } .pw-menu__item--ep .pw-menu__n { color: var(--pw-yellow); } .pw-menu__foot { display: grid; gap: var(--pw-3); align-items: center; padding-top: var(--pw-4); border-top: 1px solid var(--pw-line); } @media (min-width: 700px) { .pw-menu__foot { grid-template-columns: auto 1fr; gap: var(--pw-5); } } /* padded to clear the 24px minimum target size; as bare inline text it measured 18px tall */ .pw-menu__mail { display: inline-block; padding-block: 4px; color: var(--pw-yellow); text-decoration: none; font-size: var(--pw-t-small); word-break: break-word; } @media (min-width: 700px) { .pw-menu__foot > :last-child { justify-self: end; text-align: right; } } /* the rows arrive in sequence once the panel is up */ .pw-anim .pw-menu__item, .pw-anim .pw-menu__foot, .pw-anim .pw-menu__art { opacity: 0; transform: translateY(14px); transition: opacity .4s linear, transform .55s var(--pw-ease); } .pw-anim .pw-menu[data-open="true"] .pw-menu__item, .pw-anim .pw-menu[data-open="true"] .pw-menu__foot, .pw-anim .pw-menu[data-open="true"] .pw-menu__art { opacity: 1; transform: none; } .pw-anim .pw-menu[data-open="true"] .pw-menu__item { transition-delay: calc(60ms + var(--i, 0) * 55ms); } .pw-anim .pw-menu[data-open="true"] .pw-menu__art { transition-delay: 120ms; } .pw-anim .pw-menu[data-open="true"] .pw-menu__foot { transition-delay: 520ms; } @media (prefers-reduced-motion: reduce) { .pw-menu { transition: none; } .pw-menu__t, .pw-menu__n, .pw-menu__go { transition: none; } .pw-menu__item:hover .pw-menu__t { transform: none; } .pw-anim .pw-menu__item, .pw-anim .pw-menu__foot, .pw-anim .pw-menu__art { opacity: 1 !important; transform: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- 12 · HERO ON A PHONE The six layers were composed against a 3632x1920 frame, 1.89:1. Mapping those percentages onto a 0.52:1 portrait box does not crop the picture, it dismantles it: the vinyl and the circles scatter into the middle of the screen and she loses her shoulders. So the stage keeps its designed ratio and is scaled up and anchored right, where she stands. The composition survives, just cropped. Everything below it is field, which is exactly where the copy wants to be anyway. -------------------------------------------------------------------------- */ @media (max-width: 780px) { .pw-hero { min-height: 92svh; } .pw-hero__stage { inset: auto; top: 0; left: auto; right: -10%; width: 168%; height: auto; aspect-ratio: 3632 / 1920; } .pw-hero__l--bg { inset: 0; } .pw-hero__copy { padding-block: var(--pw-4) var(--pw-5); } .pw-hero__copy::before { top: -14%; } } /* ========================================================================== 13 · INNER PAGES Every inner page opens on the same shallow band, so the Home hero stays the only full-height moment on the site (WDOS L-04: neighbours differ, but a page type should be consistent with itself). ========================================================================== */ .pw-phero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 48svh; } .pw-phero > picture { position: absolute; inset: 0; } .pw-phero picture, .pw-phero img { width: 100%; height: 100%; object-fit: cover; display: block; } .pw-phero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 34%, rgba(10,10,10,.95) 100%); } .pw-phero__copy { position: relative; z-index: 1; padding-block: var(--pw-6) var(--pw-5); width: 100%; } /* long-form copy */ .pw-prose { max-width: var(--pw-wrap-narrow); margin-inline: auto; } .pw-prose .pw-body { margin-top: var(--pw-3); } /* milestones: an ordered list, because no source gives reliable years and a date column invented to look tidy is worse than no column */ .pw-mile { list-style: none; padding: 0; counter-reset: m; display: grid; gap: 0; } .pw-mile li { counter-increment: m; display: grid; grid-template-columns: 3rem 1fr; gap: var(--pw-2); padding-block: var(--pw-3); border-bottom: 1px solid var(--pw-line); } .pw-mile li::before { content: counter(m, decimal-leading-zero); font-family: var(--pw-display); color: var(--pw-yellow); font-size: .9375rem; } .pw-mile li:last-child { border-bottom: 0; } .pw-mile li:last-child span { color: var(--pw-white); } /* stats live on About, where a reader has come looking for them */ .pw-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pw-4) var(--pw-3); } @media (min-width: 760px) { .pw-stats { grid-template-columns: repeat(4, 1fr); } } .pw-stat__n { display: block; font-family: var(--pw-display); font-size: clamp(1.6rem, 3.6vw, 2.4rem); color: var(--pw-yellow); line-height: 1; } .pw-stat__l { display: block; font-size: var(--pw-t-small); color: var(--pw-muted); margin-top: var(--pw-1); line-height: 1.4; } .pw-vals { display: grid; gap: var(--pw-4); } @media (min-width: 760px) { .pw-vals { grid-template-columns: repeat(3, 1fr); } } .pw-vals h3 { color: var(--pw-yellow); } .pw-vals p { margin-top: var(--pw-1); } /* Music: a denser wall on its own page */ .pw-disc--4 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .pw-disc--4 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1040px) { .pw-disc--4 { grid-template-columns: repeat(4, 1fr); } } /* Videos */ .pw-vgrid { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--pw-2); } @media (min-width: 620px) { .pw-vgrid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .pw-vgrid { grid-template-columns: repeat(3, 1fr); } } .pw-play--sm .pw-play__btn span { width: 56px; height: 56px; } .pw-play--sm .pw-play__btn svg { width: 18px; height: 18px; } .pw-play--sm .pw-play__cap { padding: var(--pw-2); } /* Gallery: a real grid, with two tall cells per row-band so it never reads as a uniform contact sheet */ .pw-gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pw-1); } @media (min-width: 760px) { .pw-gal { grid-template-columns: repeat(3, 1fr); } } .pw-gcell { padding: 0; border: 0; background: #000; cursor: zoom-in; overflow: hidden; display: block; } .pw-gcell img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2/3; transition: transform .5s var(--pw-ease), opacity .3s linear; } .pw-gcell:hover img, .pw-gcell:focus-visible img { transform: scale(1.05); opacity: .9; } .pw-gcell--tall img { aspect-ratio: 2/3; } @media (min-width: 760px) { .pw-gcell--tall { grid-row: span 2; } .pw-gcell--tall img { aspect-ratio: 1/1.55; } } @media (prefers-reduced-motion: reduce) { .pw-gcell img { transition: none; } .pw-gcell:hover img { transform: none; } } /* Lightbox */ .pw-lb { position: fixed; inset: 0; z-index: 120; background: rgba(6,6,6,.96); display: grid; place-items: center; padding: var(--pw-4); } .pw-lb[hidden] { display: none; } .pw-lb img { max-width: min(92vw, 780px); max-height: 88svh; width: auto; height: auto; object-fit: contain; } .pw-lb__x { position: absolute; top: var(--pw-2); right: var(--pw-2); width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 1px solid var(--pw-line); color: var(--pw-white); cursor: pointer; } .pw-lb__x:hover { border-color: var(--pw-yellow); color: var(--pw-yellow); } .pw-lb__x svg { width: 20px; height: 20px; } /* Contact */ .pw-contact { display: grid; gap: var(--pw-6); } @media (min-width: 860px) { .pw-contact { grid-template-columns: 1.1fr .9fr; gap: var(--pw-7); } } .pw-form { display: grid; gap: var(--pw-3); margin-top: var(--pw-4); max-width: 34rem; } .pw-form label { display: grid; gap: .4rem; font-size: var(--pw-t-small); font-weight: 600; letter-spacing: .04em; } .pw-form input, .pw-form select, .pw-form textarea { background: var(--pw-surface); border: 1px solid var(--pw-line); color: var(--pw-white); padding: .8rem .9rem; border-radius: var(--pw-r-button); font-weight: 400; font-size: 1rem; } .pw-form input:focus, .pw-form select:focus, .pw-form textarea:focus { border-color: var(--pw-yellow); outline: none; } .pw-form button { justify-self: start; } /* ========================================================================== 14 · MOTION One orchestrated moment: the hero settles once on load, then the layers separate on scroll. Everything else moves only on a state change. ========================================================================== */ /* ── The hero assembles ──────────────────────────────────────────────────── Six beats, 500ms apart, each running ~1s. The last beat starts at 2.5s and settles just under 4s, which is the window that was asked for. Every piece travels from where it belongs: the vinyl in from the left edge it sits on, the circles out of the centre they orbit, she up off the floor. The whole thing is applied only once JS confirms it can undo it. Without .pw-anim on , nothing is ever withheld from a reader. */ .pw-anim .pw-hero__in { opacity: 0; transition: opacity .85s linear, transform 1.05s var(--pw-ease); transition-delay: calc(var(--i, 0) * 500ms); } .pw-anim .pw-hero.is-in .pw-hero__in { opacity: 1; transform: none; } .pw-anim .pw-hero__l--bg .pw-hero__in { --i: 0; transform: scale(1.07); } .pw-anim .pw-hero__l--circ-r .pw-hero__in { --i: 1; transform: translateX(6%) scale(.82); } .pw-anim .pw-hero__l--circ-m .pw-hero__in { --i: 2; transform: translateX(-6%) scale(.82); } .pw-anim .pw-hero__l--vinyl .pw-hero__in { --i: 3; transform: translateX(-38%) scale(.9); } .pw-anim .pw-hero__l--pw .pw-hero__in { --i: 4; transform: translateY(10%) scale(1.03); } /* the copy is the fifth and sixth beats, so the words land last */ .pw-anim .pw-hero__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .7s linear, transform .95s var(--pw-ease); transition-delay: calc(2500ms + var(--j, 0) * 320ms); } .pw-anim .pw-hero__copy > :nth-child(2) { --j: 1; } .pw-anim .pw-hero.is-in .pw-hero__copy > * { opacity: 1; transform: none; } /* the fade over the stage arrives with the background, not before it */ .pw-anim .pw-hero__fade { opacity: 0; transition: opacity 1.1s linear; } .pw-anim .pw-hero.is-in .pw-hero__fade { opacity: 1; } /* lightbox */ .pw-lb { opacity: 0; transition: opacity .22s linear; } .pw-lb[data-open="true"] { opacity: 1; } /* The assembly rewrite moved the entrance onto .pw-hero__in and .pw-hero__fade and this block was still naming the selectors it replaced, so two live transitions survived a reduce preference set mid-session. Verified by forcing every reduced-motion block on and confirming nothing is left animating on any page. */ @media (prefers-reduced-motion: reduce) { .pw-anim .pw-hero__in, .pw-anim .pw-hero__fade, .pw-anim .pw-hero__copy > *, .pw-anim .pw-hero__stage { opacity: 1 !important; transform: none !important; transition: none !important; } .pw-lb { transition: none; opacity: 1; } } /* The last three. These are colour and border fades rather than movement, so they are not a vestibular risk, but the system claims the page is still under reduced motion and that claim should be literally true. */ @media (prefers-reduced-motion: reduce) { .pw-nav, .pw-nav__link, .pw-social, .pw-btn, .pw-form input, .pw-form select, .pw-form textarea { transition: none !important; } } /* ========================================================================== 15 · COUNTDOWN, CAROUSEL, PAGE-HERO MOTION, SCROLL-TOP ========================================================================== */ /* ── Countdown ───────────────────────────────────────────────────────────── Written by JS. The markup ships the digits already filled from build time, so it is never blank and never reads "00" before the first tick. It removes itself the moment the release lands. */ .pw-cd { display: flex; gap: var(--pw-1); margin-top: var(--pw-3); flex-wrap: wrap; } .pw-cd__u { min-width: 62px; padding: .5rem .6rem; text-align: center; background: rgba(10,10,10,.28); border: 1px solid rgba(255,255,255,.28); border-radius: var(--pw-r-button); } .pw-cd__n { display: block; font-family: var(--pw-display); line-height: 1; font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-variant-numeric: tabular-nums; } /* An explicit colour rather than opacity: opacity is invisible to a contrast check that reads `color`, so a dimmed label would audit as pure white and pass on a measurement that was never taken. */ .pw-cd__l { display: block; margin-top: .3rem; font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #F0DEDC; } /* ── Carousel ────────────────────────────────────────────────────────────── Scroll-snap, so it is a real scroller: trackpad, touch, drag and the arrow keys all work with no JS at all. It never advances on its own — an auto-advancing carousel is banned (WDOS M-09) and it takes the page away from the reader. The arrows only page it along. */ .pw-carousel { position: relative; } .pw-carousel__track { display: grid; grid-auto-flow: column; gap: var(--pw-1); grid-auto-columns: minmax(190px, 44vw); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: var(--pw-1); } .pw-carousel__track::-webkit-scrollbar { display: none; } .pw-carousel__track > * { scroll-snap-align: start; } @media (min-width: 700px) { .pw-carousel__track { grid-auto-columns: minmax(220px, 30vw); } } @media (min-width: 1040px) { .pw-carousel__track { grid-auto-columns: 224px; } } @media (prefers-reduced-motion: reduce) { .pw-carousel__track { scroll-behavior: auto; } } /* the edge fade tells you there is more without a scrollbar doing it */ .pw-carousel::after { content: ""; position: absolute; top: 0; bottom: var(--pw-1); right: -1px; width: 64px; background: linear-gradient(90deg, rgba(10,10,10,0), var(--pw-field)); pointer-events: none; opacity: 1; transition: opacity .3s linear; } .pw-carousel[data-end="true"]::after { opacity: 0; } .pw-band--raise .pw-carousel::after { background: linear-gradient(90deg, rgba(20,20,20,0), var(--pw-surface)); } .pw-carousel__nav { display: flex; gap: var(--pw-1); } .pw-carousel__btn { width: 46px; height: 46px; display: grid; place-items: center; background: none; border: 1px solid var(--pw-line); border-radius: var(--pw-r-button); color: var(--pw-white); cursor: pointer; transition: color .2s var(--pw-ease), border-color .2s var(--pw-ease), opacity .2s linear; } .pw-carousel__btn:hover:not(:disabled) { color: var(--pw-yellow); border-color: var(--pw-yellow); } .pw-carousel__btn:disabled { opacity: .3; cursor: default; } .pw-carousel__btn svg { width: 20px; height: 20px; } /* no arrows where there is no pointer to use them: touch already scrolls */ @media (max-width: 699px) { .pw-carousel__nav { display: none; } } @media (prefers-reduced-motion: reduce) { .pw-carousel__btn { transition: none; } } /* a section header with its controls on the same line */ .pw-shead { display: flex; align-items: end; justify-content: space-between; gap: var(--pw-3); flex-wrap: wrap; } /* ── Page heroes: the still image breathes ───────────────────────────────── A slow push in and across, plus two smoke plates drifting at different speeds so the loop never lines up with itself and reads as a loop. */ /* A push in AND across, fast enough to read as movement. At 34 seconds and a 10% scale it was technically animating and practically invisible: by the time the eye returned to the same spot nothing had measurably changed. 18 seconds over a 22% scale and a 4% pan is clearly alive without ever becoming a distraction behind the page title. */ @keyframes pw-kenburns { from { transform: scale(1.04) translate3d(2%, 1.5%, 0); } to { transform: scale(1.26) translate3d(-2.5%, -2%, 0); } } .pw-phero__shot { position: absolute; inset: 0; overflow: hidden; } .pw-phero__shot img { width: 100%; height: 100%; object-fit: cover; animation: pw-kenburns 18s ease-in-out infinite alternate; will-change: transform; } @keyframes pw-drift-a { from { transform: translate3d(-12%, 4%, 0) scale(1.25); } to { transform: translate3d(10%, -6%, 0) scale(1.45); } } @keyframes pw-drift-b { from { transform: translate3d(14%, -3%, 0) scale(1.5) ; } to { transform: translate3d(-9%, 7%, 0) scale(1.28); } } .pw-smoke { position: absolute; inset: -25%; pointer-events: none; overflow: hidden; } .pw-smoke::before, .pw-smoke::after { content: ""; position: absolute; inset: -20%; background: url("../img/fx/smoke.webp") repeat; background-size: 780px 780px; will-change: transform; } .pw-smoke::before { opacity: .22; animation: pw-drift-a 46s ease-in-out infinite alternate; } .pw-smoke::after { opacity: .13; animation: pw-drift-b 67s ease-in-out infinite alternate; } /* mix-blend keeps it as light in the air rather than a grey film over the photograph, so the picture underneath keeps its contrast */ .pw-smoke { mix-blend-mode: screen; opacity: .8; } @media (prefers-reduced-motion: reduce) { .pw-phero__shot img { animation: none; } .pw-smoke::before, .pw-smoke::after { animation: none; } } /* ── Scroll to top ─────────────────────────────────────────────────────── */ .pw-top { position: fixed; right: var(--pw-3); bottom: var(--pw-3); z-index: 50; width: 50px; height: 50px; display: grid; place-items: center; background: var(--pw-yellow); color: var(--pw-ink-on-light); border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s linear, transform .3s var(--pw-ease), visibility .25s, background-color .2s var(--pw-ease); } .pw-top[data-show="true"] { opacity: 1; visibility: visible; transform: none; } .pw-top:hover { background: #E4D449; } .pw-top svg { width: 20px; height: 20px; } @media (prefers-reduced-motion: reduce) { .pw-top { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ 16 · STICKY PLAYER Our bar, their player. It stays a facade until someone presses play, so no third-party request is made and no cookie is set before anyone asked for music. Once open, Spotify's own iframe does the playing, which is both the licensed route and the only one where `encrypted-media` gets a full track instead of a 30-second preview. ══════════════════════════════════════════════════════════════════════════ */ .pw-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #101010; /* flat, for the same reason as the nav */ border-top: 1px solid var(--pw-line); transform: translateY(100%); transition: transform .45s var(--pw-ease); } .pw-player[data-ready="true"] { transform: none; } /* a hairline of brand colour so the bar reads as part of the site rather than a browser chrome strip */ .pw-player::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--pw-red), var(--pw-yellow) 55%, var(--pw-red)); opacity: .85; } .pw-player__bar { display: flex; align-items: center; gap: var(--pw-2); max-width: var(--pw-wrap); margin-inline: auto; padding: var(--pw-1) var(--pw-3); min-height: 62px; } @media (min-width: 768px) { .pw-player__bar { padding-inline: var(--pw-4); } } .pw-player__cue { flex: 1; display: flex; align-items: center; gap: var(--pw-2); background: none; border: 0; padding: .35rem 0; cursor: pointer; text-align: left; color: inherit; min-width: 0; } .pw-player__ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--pw-yellow); color: var(--pw-ink-on-light); transition: transform .28s var(--pw-ease), background-color .2s var(--pw-ease); } .pw-player__cue:hover .pw-player__ico { transform: scale(1.08); background: #E4D449; } .pw-player__ico svg { width: 16px; height: 16px; margin-left: 2px; } .pw-player__txt { min-width: 0; } .pw-player__t { display: block; font-family: var(--pw-display); text-transform: uppercase; font-size: .875rem; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pw-player__s { display: block; margin-top: .15rem; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pw-yellow); } /* three equaliser bars, so the bar looks alive before anything is playing */ .pw-player__cue::after { content: ""; flex: none; width: 22px; height: 16px; margin-left: auto; background: linear-gradient(var(--pw-yellow), var(--pw-yellow)) 0 100%/4px 40% no-repeat, linear-gradient(var(--pw-yellow), var(--pw-yellow)) 9px 100%/4px 75% no-repeat, linear-gradient(var(--pw-yellow), var(--pw-yellow)) 18px 100%/4px 55% no-repeat; opacity: .55; } @media (max-width: 520px) { .pw-player__cue::after { display: none; } } .pw-player__ctl { flex: none; display: flex; gap: .25rem; } .pw-player__btn { width: 38px; height: 38px; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: var(--pw-r-button); color: var(--pw-muted); cursor: pointer; transition: color .2s var(--pw-ease), border-color .2s var(--pw-ease), transform .3s var(--pw-ease); } .pw-player__btn:hover { color: var(--pw-yellow); border-color: var(--pw-line); } .pw-player__btn svg { width: 18px; height: 18px; } [data-player-toggle][aria-expanded="false"] svg { transform: rotate(180deg); } .pw-player__body { height: 0; overflow: hidden; transition: height .38s var(--pw-ease); } .pw-player__body iframe { display: block; width: 100%; height: 152px; border: 0; } .pw-player[data-open="true"] .pw-player__body { height: 152px; } /* The back-to-top button steps up so the player never sits on it, and the page keeps enough tail that the bar never covers the last line. Driven by a class on rather than :has(), because this is layout that must not depend on selector support: without it the bar simply covers the footer. */ .pw-has-player .pw-top { bottom: calc(62px + var(--pw-2)); } .pw-player-open .pw-top { bottom: calc(214px + var(--pw-2)); } /* The reserve has to track the bar's ACTUAL height. Reserving only the 62px collapsed height left the expanded player covering the last 112px of the footer, which is where the copyright and the credit line sit. */ .pw-has-player body { padding-bottom: 62px; } .pw-player-open body { padding-bottom: 214px; } .pw-has-player body { transition: padding-bottom .38s var(--pw-ease); } @media (prefers-reduced-motion: reduce) { .pw-has-player body { transition: none; } } @media (prefers-reduced-motion: reduce) { .pw-player, .pw-player__body, .pw-player__ico, .pw-player__btn { transition: none; } .pw-player__cue:hover .pw-player__ico { transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ 17 · REVEALS Not one blanket fade on everything (WDOS M-01). Four characters, chosen by what the thing IS: headings rise and settle, images scale down into place, rows arrive from the side, and grids stagger their own children. Each one is applied once and never repeats, so scrolling back up is not a light show. ══════════════════════════════════════════════════════════════════════════ */ .pw-anim [data-rv] { will-change: transform, opacity; } .pw-anim [data-rv="up"] { opacity: 0; transform: translate3d(0, 28px, 0); } .pw-anim [data-rv="in"] { opacity: 0; transform: scale(1.06); } .pw-anim [data-rv="side"] { opacity: 0; transform: translate3d(-26px, 0, 0); } .pw-anim [data-rv="rise"] { opacity: 0; transform: translate3d(0, 40px, 0) scale(.985); } .pw-anim [data-rv] { transition: opacity .7s linear, transform .9s var(--pw-ease); transition-delay: calc(var(--rv, 0) * 90ms); } .pw-anim [data-rv].is-rv { opacity: 1; transform: none; will-change: auto; } /* a grid staggers its own children rather than arriving as one slab */ .pw-anim [data-rv-kids] > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .6s linear, transform .75s var(--pw-ease); } .pw-anim [data-rv-kids].is-rv > * { opacity: 1; transform: none; } .pw-anim [data-rv-kids].is-rv > :nth-child(1) { transition-delay: 0ms; } .pw-anim [data-rv-kids].is-rv > :nth-child(2) { transition-delay: 70ms; } .pw-anim [data-rv-kids].is-rv > :nth-child(3) { transition-delay: 140ms; } .pw-anim [data-rv-kids].is-rv > :nth-child(4) { transition-delay: 210ms; } .pw-anim [data-rv-kids].is-rv > :nth-child(5) { transition-delay: 280ms; } .pw-anim [data-rv-kids].is-rv > :nth-child(6) { transition-delay: 350ms; } .pw-anim [data-rv-kids].is-rv > :nth-child(n+7) { transition-delay: 420ms; } @media (prefers-reduced-motion: reduce) { .pw-anim [data-rv], .pw-anim [data-rv-kids] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── In-page drift ───────────────────────────────────────────────────────── The gentle version of the hero parallax, for things that sit down the page. Viewport-relative, so an element moves through its own travel as it crosses the screen rather than tracking absolute scroll. */ .pw-drift { transform: translate3d(0, var(--y, 0px), 0); will-change: transform; } @media (prefers-reduced-motion: reduce) { .pw-drift { transform: none !important; } } /* ── About: the bio runs beside a portrait ─────────────────────────────── */ .pw-bio { display: grid; gap: var(--pw-4); align-items: start; } @media (min-width: 900px) { .pw-bio { grid-template-columns: 1fr 2fr; gap: var(--pw-6); } } .pw-bio__img { position: relative; overflow: hidden; background: #000; } .pw-bio__img img { width: 100%; aspect-ratio: 2/3; object-fit: cover; } @media (min-width: 900px) { .pw-bio__img { position: sticky; top: calc(var(--pw-nav-h) + var(--pw-3)); } } .pw-bio__copy .pw-body { margin-top: var(--pw-3); } .pw-bio__copy > :first-child { margin-top: 0; } /* ── Video cards ───────────────────────────────────────────────────────── */ .pw-play__meta { display: block; margin-top: .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pw-yellow); } .pw-play--sm .pw-play__cap .pw-h3 { font-size: 1rem; } /* ══════════════════════════════════════════════════════════════════════════ 19 · THE MOVING ARTWORK STRIP Owner instruction, asked for explicitly and repeatedly. WDOS bans auto-advancing carousels (`M-09`), and the carve-out for an infinite strip (`M-05` note) is conditional on three things, all of which are met here: it pauses on hover AND focus, it respects prefers-reduced-motion, and the artwork is real and licensed to her. It is a continuous translate on a duplicated track, not a slider that jumps between positions: nothing snaps, and there is no "current slide" state for a keyboard user to get lost in. Every cover stays a real link. Direction is a variable. Kevin asked for left to right, which is what `--dir: 1` gives; set it to -1 for the conventional right-to-left. ══════════════════════════════════════════════════════════════════════════ */ .pw-strip { --dir: 1; --speed: 64s; position: relative; overflow: hidden; padding-block: var(--pw-1); /* fade both edges so covers enter and leave rather than being cut off */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .pw-strip__track { display: flex; width: max-content; animation: pw-strip var(--speed) linear infinite; animation-direction: reverse; /* reverse: the covers travel LEFT to RIGHT */ will-change: transform; } .pw-strip__set { display: flex; gap: var(--pw-1); padding-right: var(--pw-1); } @keyframes pw-strip { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } /* exactly one copy of the set */ } /* pausing on hover is a condition of the carve-out, not a nicety: it is the only way to read a cover that is moving */ .pw-strip:hover .pw-strip__track, .pw-strip:focus-within .pw-strip__track { animation-play-state: paused; } .pw-strip .pw-rel { flex: 0 0 auto; width: clamp(150px, 40vw, 214px); transition: transform .4s var(--pw-ease), filter .4s var(--pw-ease); } /* the hovered cover steps forward while the strip holds still */ .pw-strip:hover .pw-rel { filter: brightness(.55); } .pw-strip .pw-rel:hover, .pw-strip .pw-rel:focus-visible { transform: translateY(-10px) scale(1.05); filter: none; z-index: 2; } @media (prefers-reduced-motion: reduce) { .pw-strip__track { animation: none; } .pw-strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .pw-strip .pw-rel { transition: none; } .pw-strip:hover .pw-rel { filter: none; } .pw-strip .pw-rel:hover { transform: none; } } /* ── Channel card: still on top, title underneath ──────────────────────── */ .pw-vcard { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; } .pw-vcard__art { position: relative; display: block; overflow: hidden; background: #000; } .pw-vcard__art img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .5s var(--pw-ease), opacity .3s linear; } .pw-vcard:hover img, .pw-vcard:focus-visible img { transform: scale(1.04); opacity: .85; } .pw-vcard__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pw-yellow); color: var(--pw-ink-on-light); transition: transform .3s var(--pw-ease); } .pw-vcard:hover .pw-vcard__play { transform: scale(1.1); } .pw-vcard__play svg { width: 16px; height: 16px; margin-left: 2px; } .pw-vcard__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--pw-2); font-size: .875rem; font-weight: 600; line-height: 1.35; } .pw-vcard__d { display: block; margin-top: .2rem; font-size: var(--pw-t-small); color: var(--pw-muted); } @media (prefers-reduced-motion: reduce) { .pw-vcard__art img, .pw-vcard__play { transition: none; } .pw-vcard:hover img, .pw-vcard:hover .pw-vcard__play { transform: none; } } /* the channel strip runs wider tiles than the album carousel: a 16:9 still needs the width to stay recognisable */ #car-channel .pw-carousel__track { grid-auto-columns: minmax(230px, 62vw); } @media (min-width: 700px) { #car-channel .pw-carousel__track { grid-auto-columns: 270px; } } @media (min-width: 1040px) { #car-channel .pw-carousel__track { grid-auto-columns: 300px; } } /* ── Press kit ─────────────────────────────────────────────────────────── */ .pw-kit { display: grid; gap: var(--pw-2); margin-top: var(--pw-3); } .pw-kit a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--pw-2); padding: var(--pw-2); background: var(--pw-surface); border: 1px solid var(--pw-line); border-radius: var(--pw-r-card); text-decoration: none; transition: border-color .2s var(--pw-ease), background-color .2s var(--pw-ease); } .pw-kit a:hover { border-color: var(--pw-yellow); background: #191919; } .pw-kit svg { width: 22px; height: 22px; color: var(--pw-yellow); } .pw-kit__n { font-weight: 700; font-size: .9375rem; } .pw-kit__s { display: block; font-size: var(--pw-t-small); color: var(--pw-muted); font-weight: 400; } /* Looks like the eyebrow but is not one: it is a control label on a row, and counting it against the two-eyebrow page cap would be miscounting. */ .pw-kit__go { font-size: var(--pw-t-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pw-yellow); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .pw-kit a { transition: none; } } /* ══════════════════════════════════════════════════════════════════════════ 18 · HOME TYPE SCALE The home page runs a step larger than the inner pages: it carries about a hundred words in total, so the type has to do the work the copy is not doing. Scoped to .pw-home so nothing else moves, and deliberately excluding .pw-btn and the nav, which are sized for the hand and the bar respectively. ══════════════════════════════════════════════════════════════════════════ */ .pw-home { --pw-t-h2: clamp(2rem, 4.4vw, 3.15rem); --pw-t-h3: 1.25rem; --pw-t-body: 1.1875rem; --pw-t-small: 0.9375rem; --pw-t-label: 0.75rem; font-size: var(--pw-t-body); } .pw-home .pw-hero__copy h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); } .pw-home .pw-lede { font-size: clamp(1.25rem, 2.3vw, 1.6rem); } .pw-home .pw-ep__ttl { font-size: clamp(2.3rem, 5.6vw, 3.9rem); } .pw-home .pw-quote blockquote { font-size: clamp(1.5rem, 3vw, 2.35rem); } .pw-home .pw-quote__mark { font-size: 3.6rem; } .pw-home .pw-rel__name { font-size: .9375rem; } .pw-home .pw-rel__yr { font-size: .75rem; } .pw-home .pw-play__cap .pw-h3 { font-size: 1.35rem; } .pw-home .pw-play__meta { font-size: .75rem; } .pw-home .pw-foot__tag { font-size: clamp(1.6rem, 4.6vw, 3rem); } /* untouched on purpose */ .pw-home .pw-btn { font-size: 0.9375rem; } .pw-home .pw-btn--nav { font-size: .8125rem; } .pw-home .pw-nav__link { font-size: 0.875rem; } @media (max-width: 719px) { .pw-home .pw-btn--nav { font-size: .6875rem; } } /* the taller cards need a taller cell or the covers crop */ @media (min-width: 1040px) { .pw-home .pw-carousel__track { grid-auto-columns: 244px; } } /* ── Footer ────────────────────────────────────────────────────────────── */ .pw-foot__follow { text-align: center; padding-bottom: var(--pw-4); } .pw-foot__follow .pw-foot__t { margin-bottom: var(--pw-4); } /* the icons take the full width rather than huddling at one end */ .pw-socials--spread { display: flex; justify-content: space-between; align-items: center; gap: var(--pw-2); max-width: 620px; margin-inline: auto; } .pw-socials--spread .pw-social { width: 60px; height: 60px; } .pw-socials--spread .pw-social svg { width: 23px; height: 23px; } @media (max-width: 520px) { .pw-socials--spread .pw-social { width: 52px; height: 52px; } .pw-socials--spread .pw-social svg { width: 20px; height: 20px; } } .pw-foot__base { display: flex; flex-wrap: wrap; gap: var(--pw-1) var(--pw-3); align-items: center; justify-content: space-between; } .pw-foot__base a { text-decoration: underline; text-underline-offset: 3px; } .pw-foot__base a:hover { color: var(--pw-yellow); } /* The featured still is capped at its own resolution rather than being stretched past it. Sharp beats big. */ .pw-play--wide { max-width: 1280px; margin-inline: auto; }