/* ========================================================================== PRINCESS WONDA — "MAGIC HOUR" DESIGN SYSTEM v1.0 Every value here is traceable to the Magic Hour EP artwork. Palette sampled from EP Front Cover.jpg. Nothing improvised. Built to WDOS v1.1. Zero hardcoded values below the token block. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · TOKENS -------------------------------------------------------------------------- */ :root { /* Colour — sampled from the EP front cover, contrast measured on field */ --c-field: #0B0705; /* cellar black. not #000 (WDOS C-11) */ --c-surface: #16100B; /* raised surface */ --c-surface-2: #21170F; /* pressed / hover */ --c-line: #33241A; /* hairline */ --c-gold: #E8B24C; /* hour gold — 10.42:1 on field */ --c-gold-deep: #C97A21; /* ember — 6.01:1 on field */ --c-ink: #F6EFE3; /* sandlight — 17.55:1 on field */ --c-ink-2: #B9A48A; /* dust — 8.35:1 on field */ --c-ink-3: #8A7660; /* whisper (non-text / decoration only) */ /* Type */ --f-display: "Cinzel", "Trajan Pro", Georgia, serif; --f-body: "Archivo", "Helvetica Neue", Helvetica, sans-serif; --t-display: clamp(3.4rem, 13vw, 9rem); --t-h1: clamp(2.3rem, 6.4vw, 4.4rem); --t-h2: clamp(1.75rem, 3.6vw, 2.75rem); --t-h3: clamp(1.15rem, 1.8vw, 1.4rem); --t-body: 1.0625rem; /* 17px */ --t-small: 0.8125rem; /* 13px */ --t-micro: 0.6875rem; /* 11px */ --lh-tight: 0.92; --lh-head: 1.12; --lh-body: 1.65; --measure: 68ch; /* Space — 8pt */ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4rem; --s-7: 6rem; --s-8: 8rem; --s-9: 12rem; /* Radius policy — near-zero. The artwork is engraved, not rounded. */ --r-button: 2px; --r-card: 4px; --r-input: 2px; --r-image: 0; --r-modal: 4px; /* Chrome */ --nav-h: 60px; --player-h: 88px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* The one light. Driven by JS on scroll. 0 = high noon, 1 = gone. */ --sun-p: 0; --wrap: 1240px; --wrap-narrow: 760px; } /* -------------------------------------------------------------------------- 2 · FONTS — self-hosted, subset to latin, swap, preloaded in -------------------------------------------------------------------------- */ @font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-latin-var.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; font-style: normal; } @font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-var.woff2") format("woff2-variations"); font-weight: 400 600; font-display: swap; font-style: normal; } /* -------------------------------------------------------------------------- 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(--c-field); color: var(--c-ink); font-family: var(--f-body); font-size: var(--t-body); line-height: var(--lh-body); font-weight: 400; -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(--c-gold); outline-offset: 3px; border-radius: var(--r-button); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--s-2); z-index: 200; background: var(--c-gold); color: var(--c-field); padding: var(--s-1) var(--s-2); border-radius: var(--r-button); font-weight: 600; text-decoration: none; } .skip-link:focus { top: var(--s-2); } /* -------------------------------------------------------------------------- 4 · THE SUNSET — the site's single light source and single gradient role. Fixed behind everything. Its height, size and warmth are bound to scroll. This is why the site is dark: the light is leaving. -------------------------------------------------------------------------- */ .sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--c-field); } .sky__sun { position: absolute; left: 50%; top: 0; width: 160vmax; height: 160vmax; margin-left: -80vmax; margin-top: -95vmax; border-radius: 50%; background: radial-gradient( circle at 50% 50%, rgba(255, 214, 140, 0.50) 0%, rgba(233, 154, 46, 0.26) 26%, rgba(168, 84, 16, 0.12) 44%, rgba(70, 30, 6, 0.05) 60%, rgba(11, 7, 5, 0) 72% ); /* sinks and cools as --sun-p goes 0 -> 1 */ transform: translate3d(0, calc(var(--sun-p) * 62vh), 0) scale(calc(1 - var(--sun-p) * 0.34)); opacity: calc(1 - var(--sun-p) * 0.72); will-change: transform, opacity; } /* a second, tighter core so the light has a hot centre near the top */ .sky__core { position: absolute; left: 50%; top: 0; width: 70vmax; height: 70vmax; margin-left: -35vmax; margin-top: -46vmax; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 232, 186, 0.30) 0%, rgba(255, 190, 96, 0.13) 34%, rgba(11, 7, 5, 0) 68%); transform: translate3d(0, calc(var(--sun-p) * 70vh), 0); opacity: calc(1 - var(--sun-p) * 0.92); will-change: transform, opacity; } /* Fine grain so the large flat gradient never bands on cheap panels. This used to be a live SVG feTurbulence filter stretched to inset:-50%, i.e. four times the viewport area, blended in overlay, to deliver a five percent texture. It had to be re-filtered and re-blended on every scroll frame and it was the single most expensive thing on this page. The grain is now a baked 128px tile at normal blend: the same texture, no filter, no blend, and a fixed 14 KB. */ .sky__grain { position: absolute; inset: 0; background: url("../img/fx/grain.webp") repeat; background-size: 128px 128px; opacity: 0.055; } /* Reduced motion: the light parks at its warmest and never moves. */ @media (prefers-reduced-motion: reduce) { .sky__sun, .sky__core { transform: none; animation: none; } } /* everything real sits above the light */ .page { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 5 · LAYOUT -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-3); } .wrap--narrow { max-width: var(--wrap-narrow); } @media (min-width: 768px) { .wrap { padding-inline: var(--s-4); } } .section { padding-block: var(--s-6); } .section--tight { padding-block: var(--s-5); } @media (min-width: 700px) { .section { padding-block: var(--s-7); } .section--tight { padding-block: var(--s-6); } } .rule { height: 1px; background: var(--c-line); border: 0; } /* -------------------------------------------------------------------------- 6 · TYPE -------------------------------------------------------------------------- */ .display, .h1, .h2, .h3 { font-family: var(--f-display); font-weight: 700; } .display { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: 0.015em; text-transform: uppercase; } .h1 { font-size: var(--t-h1); line-height: var(--lh-head); letter-spacing: 0.01em; text-transform: uppercase; } .h2 { font-size: var(--t-h2); line-height: var(--lh-head); letter-spacing: 0.015em; text-transform: uppercase; } .h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 400; letter-spacing: 0.02em; } .lede { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.55; color: var(--c-ink); max-width: var(--measure); } .body { max-width: var(--measure); color: var(--c-ink-2); } .body + .body { margin-top: var(--s-2); } .small { font-size: var(--t-small); color: var(--c-ink-2); } /* The ONE all-caps semantic role: metadata labels. */ .meta { font-size: var(--t-micro); letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--c-gold); } .meta--dust { color: var(--c-ink-2); } /* Over the hero photograph, metadata and small print switch to Sandlight. Gold cannot reach 4.5:1 on this image at any scrim that keeps her visible. */ @media (max-width: 899px) { .hero .meta { color: var(--c-ink); } .hero .small { color: var(--c-ink); } } .gold { color: var(--c-gold); } /* -------------------------------------------------------------------------- 7 · BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: 52px; padding: 0 var(--s-4); border: 1px solid transparent; border-radius: var(--r-button); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .12s var(--ease); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--c-gold); color: #1A1005; } .btn--primary:hover { background: #F3C570; } .btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); } .btn--ghost:hover { border-color: var(--c-gold); color: var(--c-gold); } .btn--block { width: 100%; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } } /* -------------------------------------------------------------------------- 8 · NAV -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center; /* flat, not blurred: a full-width backdrop-filter has to be recomposited on every scroll frame and over a field this dark it buys nothing */ background: linear-gradient(180deg, rgba(11,7,5,.93) 62%, rgba(11,7,5,.70) 100%); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background-color .3s var(--ease); } .nav[data-stuck="true"] { border-bottom-color: var(--c-line); background: rgba(11, 7, 5, 0.92); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; } .nav__brand { font-family: var(--f-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--c-ink); white-space: nowrap; } .nav__brand:hover { color: var(--c-gold); } .nav__links { display: none; gap: var(--s-4); align-items: center; } @media (min-width: 860px) { .nav__links { display: flex; } } .nav__link { font-size: var(--t-small); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; text-decoration: none; color: var(--c-ink-2); padding-block: var(--s-1); border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); } .nav__link:hover { color: var(--c-ink); } .nav__link[aria-current="page"] { color: var(--c-gold); border-bottom-color: var(--c-gold); } .nav__cta { display: none; } @media (min-width: 860px) { .nav__cta { display: inline-flex; min-height: 40px; padding-inline: var(--s-3); font-size: var(--t-small); } } /* mobile menu */ .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; color: var(--c-ink); } @media (min-width: 860px) { .nav__toggle { display: none; } } .nav__toggle svg { width: 22px; height: 22px; } .nav__toggle .i-close { display: none; } .nav__toggle[aria-expanded="true"] .i-close { display: block; } .nav__toggle[aria-expanded="true"] .i-open { display: none; } .drawer { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 55; background: rgba(11, 7, 5, 0.995); /* was 0.98 + a blur nothing showed through */ padding: var(--s-4) var(--s-3) var(--s-6); display: flex; flex-direction: column; gap: var(--s-1); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s; } .drawer[data-open="true"] { opacity: 1; transform: none; visibility: visible; } @media (min-width: 860px) { .drawer { display: none; } } .drawer__link { font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; color: var(--c-ink); padding-block: var(--s-2); border-bottom: 1px solid var(--c-line); } .drawer__link[aria-current="page"] { color: var(--c-gold); } .drawer .btn { margin-top: var(--s-4); } @media (prefers-reduced-motion: reduce) { .drawer { transition: none; } } /* -------------------------------------------------------------------------- 9 · HERO — split. Type left, full-height portrait right. Forced by the assets: every press shot is 2:3 portrait. There is no banner. -------------------------------------------------------------------------- */ .hero { position: relative; padding-block: var(--s-6); min-height: 86vh; display: flex; align-items: center; } @media (min-width: 900px) { .hero { padding-block: var(--s-7); min-height: 0; } } .hero__grid { display: grid; gap: var(--s-5); align-items: center; width: 100%; } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1fr 0.82fr; gap: var(--s-6); } } .hero__copy { position: relative; z-index: 2; } .hero__title { margin-block: var(--s-2) var(--s-3); } .hero__title .line { display: block; } .hero__figure { position: relative; } .hero__figure img { width: 100%; border-radius: var(--r-image); /* the portrait dissolves into the field rather than sitting in a box */ -webkit-mask-image: radial-gradient(ellipse 78% 82% at 52% 44%, #000 52%, transparent 88%); mask-image: radial-gradient(ellipse 78% 82% at 52% 44%, #000 52%, transparent 88%); } /* mobile: the portrait is the backdrop and the type sits on a measured scrim */ .hero__figure { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; } .hero__figure::after { content: ""; position: absolute; inset: 0; /* Over a photograph only Sandlight is legible: measured against the brightest pixel in this shot, at scrim 0.58 Sandlight holds 5.75:1 while gold reaches only 3.41:1 and Dust 2.74:1. So the hero eyebrow drops its gold here rather than the photograph being crushed to make gold work. */ background: linear-gradient(180deg, rgba(11,7,5,.58) 0%, rgba(11,7,5,.80) 46%, rgba(11,7,5,.97) 100%); } @media (min-width: 900px) { .hero__figure { position: relative; inset: auto; overflow: visible; } .hero__figure img { height: auto; object-fit: fill; -webkit-mask-image: radial-gradient(ellipse 68% 72% at 52% 50%, #000 34%, rgba(0,0,0,.55) 66%, transparent 88%); mask-image: radial-gradient(ellipse 68% 72% at 52% 50%, #000 34%, rgba(0,0,0,.55) 66%, transparent 88%); } .hero__figure::after { display: none; } } /* -------------------------------------------------------------------------- 10 · COUNTDOWN -------------------------------------------------------------------------- */ .countdown { display: flex; gap: var(--s-3); margin-block: var(--s-4); } .countdown__unit { text-align: left; } .countdown__n { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.1rem, 5.5vw, 3.1rem); line-height: 1; color: var(--c-ink); font-variant-numeric: tabular-nums; display: block; } .countdown__l { font-size: var(--t-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-ink-2); margin-top: var(--s-1); display: block; } .countdown[hidden] { display: none; } .outnow { display: inline-flex; align-items: center; gap: var(--s-1); border: 1px solid var(--c-gold); color: var(--c-gold); padding: var(--s-1) var(--s-2); border-radius: var(--r-button); font-size: var(--t-micro); letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; } .cta-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); } @media (max-width: 479px) { .cta-row .btn { width: 100%; } } /* -------------------------------------------------------------------------- 11 · TRACKLIST -------------------------------------------------------------------------- */ .tracks { border-top: 1px solid var(--c-line); } .track { display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; gap: var(--s-2); padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); transition: background-color .2s var(--ease); } @media (min-width: 700px) { .track { grid-template-columns: 3rem 1fr auto; gap: var(--s-3); } } .track:hover { background: rgba(233, 178, 76, 0.045); } .track__n { font-family: var(--f-display); font-weight: 400; font-size: 1.0625rem; color: var(--c-ink-3); font-variant-numeric: tabular-nums; } .track__name { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.2rem, 3.2vw, 1.65rem); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.15; } .track--locked .track__name { color: var(--c-ink-2); } .track__feat { color: var(--c-gold); } .track__credit { font-size: var(--t-small); color: var(--c-ink-3); margin-top: 0.35rem; letter-spacing: 0.02em; } .track__action { display: flex; align-items: center; gap: var(--s-2); } .play { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 1px solid var(--c-line); background: transparent; color: var(--c-gold); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .play:hover { border-color: var(--c-gold); background: rgba(233,178,76,.12); } .play svg { width: 15px; height: 15px; } .play .i-pause { display: none; } .play[aria-pressed="true"] { background: var(--c-gold); color: #1A1005; border-color: var(--c-gold); } .play[aria-pressed="true"] .i-pause { display: block; } .play[aria-pressed="true"] .i-play { display: none; } .lock { font-size: var(--t-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-3); border: 1px solid var(--c-line); padding: 0.4rem 0.6rem; border-radius: var(--r-button); white-space: nowrap; } /* -------------------------------------------------------------------------- 12 · ARTWORK — the two covers, given room -------------------------------------------------------------------------- */ .covers { display: grid; gap: var(--s-3); } @media (min-width: 760px) { .covers { grid-template-columns: 1fr 1fr; gap: var(--s-4); } } .cover figure { margin: 0; } .cover img { width: 100%; border-radius: var(--r-image); border: 1px solid var(--c-line); } .cover figcaption { margin-top: var(--s-2); } /* -------------------------------------------------------------------------- 13 · ABOUT / SPLIT BLOCK -------------------------------------------------------------------------- */ .split { display: grid; gap: var(--s-5); align-items: start; } @media (min-width: 900px) { .split { grid-template-columns: 0.72fr 1fr; gap: var(--s-6); } } .split--flip > :first-child { order: 2; } @media (max-width: 899px) { .split--flip > :first-child { order: 0; } } .split__img img { width: 100%; border-radius: var(--r-image); -webkit-mask-image: radial-gradient(ellipse 74% 78% at 50% 50%, #000 38%, rgba(0,0,0,.55) 70%, transparent 92%); mask-image: radial-gradient(ellipse 74% 78% at 50% 50%, #000 38%, rgba(0,0,0,.55) 70%, transparent 92%); } /* Below the split breakpoint the copy leads and the portrait follows. A 2:3 portrait at full width is 1152px tall on a tablet - it would push every word below the fold. Capped, and cropped to the top so her face survives. */ @media (max-width: 899px) { .split__img { order: 2; } .split__img img { max-height: 56vh; object-fit: cover; object-position: 50% 16%; } } /* -------------------------------------------------------------------------- 14 · STATS — real numbers only -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); } @media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat__n { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1; color: var(--c-gold); font-variant-numeric: tabular-nums; display: block; } .stat__l { font-size: var(--t-small); color: var(--c-ink-2); margin-top: var(--s-1); display: block; line-height: 1.4; } /* -------------------------------------------------------------------------- 15 · RELEASES GRID -------------------------------------------------------------------------- */ .releases { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } @media (min-width: 620px) { .releases { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px) { .releases { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } } .release { text-decoration: none; display: block; } .release__art { position: relative; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--r-image); background: var(--c-surface); } .release__art img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s var(--ease); } .release:hover .release__art img { transform: scale(1.035); } .release__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,7,5,.55) 100%); opacity: 0; transition: opacity .3s var(--ease); } .release:hover .release__art::after { opacity: 1; } .release__name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 0.9375rem; letter-spacing: 0.03em; margin-top: var(--s-2); line-height: 1.25; } .release:hover .release__name { color: var(--c-gold); } .release__meta { font-size: var(--t-small); color: var(--c-ink-3); margin-top: 0.15rem; } .release__flag { position: absolute; top: var(--s-1); left: var(--s-1); background: var(--c-gold); color: #1A1005; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: var(--r-button); } @media (prefers-reduced-motion: reduce) { .release__art img, .release__art::after { transition: none; } .release:hover .release__art img { transform: none; } } /* -------------------------------------------------------------------------- 16 · STICKY PLAYER — Spotify iFrame API inside our chrome. Spotify's player stays visible and unmodified (their terms + encrypted-media). Click-to-load: the iframe is only injected on first play, so no third-party cookie is set before consent and nothing is fetched on page load. -------------------------------------------------------------------------- */ .player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #120C08; /* flat, for the same reason as the nav */ border-top: 1px solid var(--c-line); transform: translateY(100%); transition: transform .38s var(--ease); padding-bottom: env(safe-area-inset-bottom); } .player[data-open="true"] { transform: none; } @media (prefers-reduced-motion: reduce) { .player { transition: none; } } .player__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); max-width: var(--wrap); margin-inline: auto; } .player__art { width: 44px; height: 44px; border-radius: 2px; border: 1px solid var(--c-line); } .player__txt { min-width: 0; } .player__name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player__sub { font-size: var(--t-micro); color: var(--c-ink-2); letter-spacing: 0.12em; text-transform: uppercase; } .player__close { width: 40px; height: 40px; border: 0; background: none; color: var(--c-ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .player__close:hover { color: var(--c-ink); } .player__close svg { width: 16px; height: 16px; } /* Spotify's own player — visible, unmodified, never hidden */ .player__embed { max-width: var(--wrap); margin-inline: auto; padding: 0 var(--s-3) var(--s-2); } .player__embed iframe { width: 100%; height: 80px; border: 0; border-radius: var(--r-card); display: block; } /* --c-ink-3 is the whisper tone and the system marks it decoration-only, never text. It was passing here on the old translucent bar and fell to 4.47:1 the moment that bar became a solid fill. This is real copy at 11px, so it takes the dust tone, which the system does clear for text. */ .player__note { max-width: var(--wrap); margin-inline: auto; padding: 0 var(--s-3) var(--s-2); font-size: var(--t-micro); color: var(--c-ink-2); letter-spacing: 0.04em; } /* pushes page content clear of the bar when open */ body[data-player-open] { padding-bottom: calc(var(--player-h) + 90px); } /* -------------------------------------------------------------------------- 17 · LOADER — the hourglass. Pure CSS, zero image dependency, so it can never delay the real content. Dismisses on window load OR 1200ms, whichever is FIRST. Once per session. -------------------------------------------------------------------------- */ .loader { position: fixed; inset: 0; z-index: 999; background: var(--c-field); display: grid; place-items: center; transition: opacity .5s var(--ease), visibility .5s; } .loader[data-done="true"] { opacity: 0; visibility: hidden; pointer-events: none; } .glass { width: 54px; height: 84px; position: relative; } .glass__frame { position: absolute; inset: 0; } .glass__frame span { position: absolute; left: 0; right: 0; height: 2px; background: var(--c-gold); border-radius: 2px; } .glass__frame span:nth-child(1) { top: 0; } .glass__frame span:nth-child(2) { bottom: 0; } /* the two bulbs, drawn as triangles meeting at the waist */ .glass__top, .glass__bot { position: absolute; left: 50%; width: 40px; height: 36px; margin-left: -20px; overflow: hidden; } .glass__top { top: 6px; } .glass__bot { bottom: 6px; } /* the glass itself: two solid triangles in a muted gold, drawn with borders so the shape is exact at any zoom. The sand sits on top of these. */ .glass__top::before, .glass__bot::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; } .glass__top::before { border-top: 36px solid rgba(233, 178, 76, 0.16); } .glass__bot::before { border-bottom: 36px solid rgba(233, 178, 76, 0.16); } .sand { position: absolute; left: 0; right: 0; z-index: 1; background: var(--c-gold); } .sand--top { top: 0; height: 100%; animation: sand-drain 1.15s var(--ease) forwards; clip-path: polygon(0 0, 100% 0, 52% 100%, 48% 100%); } .sand--bot { bottom: 0; height: 0; animation: sand-fill 1.15s var(--ease) forwards; clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%); } @keyframes sand-drain { from { height: 100%; } to { height: 0; } } @keyframes sand-fill { from { height: 0; } to { height: 100%; } } .glass__stream { position: absolute; left: 50%; top: 40px; width: 2px; height: 8px; margin-left: -1px; background: var(--c-gold); opacity: .85; animation: stream 1.15s linear forwards; } @keyframes stream { 0%,90% { opacity: .85; } 100% { opacity: 0; } } .loader__word { position: absolute; bottom: 22%; font-family: var(--f-display); font-weight: 700; font-size: var(--t-micro); letter-spacing: 0.42em; text-transform: uppercase; color: var(--c-ink-3); } @media (prefers-reduced-motion: reduce) { .loader { display: none; } } /* -------------------------------------------------------------------------- 18 · FOOTER -------------------------------------------------------------------------- */ .footer { border-top: 1px solid var(--c-line); padding-block: var(--s-6) var(--s-5); margin-top: var(--s-6); } .footer__grid { display: grid; gap: var(--s-5); } @media (min-width: 760px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-4); } } .footer__title { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8125rem; color: var(--c-ink); margin-bottom: var(--s-2); } .footer__list { list-style: none; padding: 0; display: grid; gap: 0.65rem; } .footer__list a { font-size: 0.9375rem; color: var(--c-ink-2); text-decoration: none; } .footer__list a:hover { color: var(--c-gold); } .socials { display: flex; gap: var(--s-1); flex-wrap: wrap; } .social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: var(--r-button); color: var(--c-ink-2); transition: color .2s var(--ease), border-color .2s var(--ease); } .social:hover { color: var(--c-gold); border-color: var(--c-gold); } .social svg { width: 18px; height: 18px; } .footer__base { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--c-line); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); justify-content: space-between; font-size: var(--t-small); color: var(--c-ink-3); } .advisory { border: 1px solid var(--c-ink-3); color: var(--c-ink-3); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; padding: 0.2rem 0.45rem; border-radius: 2px; } /* -------------------------------------------------------------------------- 19 · CONSENT -------------------------------------------------------------------------- */ .consent { position: fixed; left: var(--s-2); right: var(--s-2); bottom: var(--s-2); z-index: 90; max-width: 400px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: var(--s-2) var(--s-3) var(--s-3); box-shadow: 0 18px 50px rgba(0,0,0,.55); opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .consent[data-in="true"] { opacity: 1; transform: none; } .consent .small { font-size: var(--t-small); line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .consent { transition: none; } } /* never sit on top of the player bar */ body[data-player-open] .consent { bottom: calc(var(--player-h) + 96px); } .consent[hidden] { display: none; } .consent__row { display: flex; gap: var(--s-1); margin-top: var(--s-2); } .consent .btn { min-height: 42px; padding-inline: var(--s-3); font-size: var(--t-small); flex: 1; } /* -------------------------------------------------------------------------- 20 · MISC -------------------------------------------------------------------------- */ .band { border-block: 1px solid var(--c-line); background: rgba(22, 16, 11, 0.5); } .band__inner { display: grid; gap: var(--s-3); align-items: center; padding-block: var(--s-4); } @media (min-width: 820px) { .band__inner { grid-template-columns: auto 1fr auto; gap: var(--s-4); } } .band__art { width: 88px; border: 1px solid var(--c-line); } .linklist { list-style: none; padding: 0; display: grid; gap: 0; } .linklist a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-2); border-bottom: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); } .linklist a:hover { color: var(--c-gold); } /* -------------------------------------------------------------------------- 21 · DISCOGRAPHY CARD (Music page) — art doubles as a play control -------------------------------------------------------------------------- */ .disc { display: grid; gap: 0; } .disc__art { position: relative; border: 1px solid var(--c-line); background: var(--c-surface); overflow: hidden; } .disc__art img { width: 100%; aspect-ratio: 1; object-fit: cover; } .disc__art::after { content: ""; position: absolute; inset: 0; background: rgba(11,7,5,.42); opacity: 0; transition: opacity .28s var(--ease); } .disc:hover .disc__art::after, .disc:focus-within .disc__art::after { opacity: 1; } .release__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--c-ink); padding: 0; } .release__play span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-gold); color: #1A1005; transform: scale(.82); opacity: 0; transition: transform .28s var(--ease), opacity .28s var(--ease); } .disc:hover .release__play span, .release__play:focus-visible span { transform: none; opacity: 1; } .release__play svg { width: 16px; height: 16px; } .release__play .i-pause { display: none; } .release__play[aria-pressed="true"] span { opacity: 1; transform: none; } .release__play[aria-pressed="true"] .i-pause { display: block; } .release__play[aria-pressed="true"] .i-play { display: none; } /* touch devices have no hover: keep the control permanently visible */ @media (hover: none) { .release__play span { opacity: 1; transform: none; width: 44px; height: 44px; } .disc__art::after { opacity: 1; background: rgba(11,7,5,.22); } } @media (prefers-reduced-motion: reduce) { .disc__art::after, .release__play span { transition: none; } } .disc__body { padding-top: var(--s-2); } .disc__name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 0.9375rem; letter-spacing: .03em; line-height: 1.25; } .disc__meta { font-size: var(--t-small); color: var(--c-ink-3); margin-top: .15rem; } .disc__link { font-size: var(--t-small); color: var(--c-ink-2); text-decoration: none; display: inline-block; margin-top: .4rem; border-bottom: 1px solid var(--c-line); } .disc__link:hover { color: var(--c-gold); border-color: var(--c-gold); }