@font-face { font-family: "Coastal Mirage"; src: url("assets/CoastalMirage.otf") format("opentype"); font-display: swap; } @font-face { font-family: "Belanosima"; src: url("assets/Belanosima-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Belanosima"; src: url("assets/Belanosima-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; } @font-face { font-family: "Belanosima"; src: url("assets/Belanosima-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Merchant Ledger"; src: url("assets/MerchantLedgerRegular.woff2") format("woff2"); font-display: swap; } :root { /* Typography, by role. The literal stacks live here once; every rule below references the token so the families can be retuned in one place. */ --font-display: "Belanosima", "Arial Rounded MT Bold", sans-serif; --font-mono: "Merchant Ledger", ui-monospace, SFMono-Regular, Menlo, monospace; --font-script: "Coastal Mirage", cursive; --font-ui: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; /* Base palette = Color Grid, the system's default face. Every page also carries a skin + theme class that redeclares these on , so this block only governs markup rendered outside a skin (component previews, embeds, anything reusing the stylesheet on its own). It used to hold an unused crimson/cream palette, which made unstyled contexts look like a different brand. */ --paper: #f7f5ef; --paper-raised: #efc7bf; --ink: #191918; --muted: #5a5651; --line: #98938a; --accent: #ff6239; --accent-soft: #aebcf0; --radius: 18px; --page: min(1280px, calc(100vw - 48px)); color-scheme: light dark; } @media (prefers-color-scheme: dark) { /* dark counterpart of the base palette = Night Bloom */ :root { --paper: #292c26; --paper-raised: #353830; --ink: #f4efe6; --muted: #c6beb1; --line: #696c61; --accent: #f04fa6; --accent-soft: #f15a43; } .brand img, .parent-brand img, .home-title-logo img, .spotify-mark { filter: invert(1); } } body.home-page { --paper: #ffaed0; --paper-raised: #ffc1da; --ink: #171616; --muted: #51464a; --line: rgba(23, 22, 22, 0.24); --accent: #b6021a; --accent-soft: #bfa5e9; position: relative; font-family: var(--font-mono); } @media (prefers-color-scheme: dark) { body.home-page { --paper: #20191c; --paper-raised: #2d2226; --ink: #f4edf0; --muted: #c9b8bf; --line: rgba(255, 174, 208, 0.24); --accent: #ff7daa; --accent-soft: #4f2b38; } } body.editorial-page { --paper: #f7f7f7; --paper-raised: #ffffff; --ink: #191918; --muted: #686762; --line: #d2d2ce; --accent: #cf2a5e; --accent-soft: #ffc3d4; } .editorial-page .brand img, .editorial-page .parent-brand img, .editorial-page .spotify-mark { filter: none; } @media (prefers-color-scheme: dark) { body.editorial-page { --paper: #181817; --paper-raised: #222220; --ink: #f3f1eb; --muted: #aaa8a1; --line: #3a3935; --accent: #f16088; --accent-soft: #512739; } .editorial-page .brand img, .editorial-page .parent-brand img, .editorial-page .spotify-mark { filter: invert(1); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; /* always-on scroll track: keeps viewport width identical on every page so centered layout never shifts (overlay scrollbars show nothing) */ overflow-y: scroll; } body { --accent-text: var(--accent); --focus-ring: var(--accent); --focus-ring-outer: var(--paper); margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); } img { display: block; max-width: 100%; } a { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button, .button { font: inherit; } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; box-shadow: 0 0 0 6px var(--focus-ring-outer); } .site-header { width: var(--page); min-height: 76px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; } .brand { width: 190px; min-height: 44px; justify-self: start; display: flex; align-items: center; } .brand img { width: 100%; height: auto; } .parent-brand { width: 165px; min-height: 44px; justify-self: end; display: flex; align-items: center; } .parent-brand img { width: 100%; height: auto; } .site-nav { display: flex; align-items: center; justify-content: center; gap: 28px; } .site-nav a { position: relative; min-width: 44px; min-height: 44px; padding: 8px 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); /* pinned so the nav renders identically on typewriter-font pages */ font-family: var(--font-ui); font-size: 13px; font-weight: 650; line-height: 1; text-transform: uppercase; letter-spacing: 0.07em; text-decoration: none; transition: color 140ms ease; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); } /* the marker stroke: a hand-drawn accent line hugging the text; it draws itself in on hover/focus and stays put on the current page */ .site-nav a .nav-stroke { position: absolute; left: -3px; right: -3px; bottom: 6px; width: calc(100% + 6px); height: 9px; overflow: visible; pointer-events: none; } .site-nav a .nav-stroke path { fill: none; stroke: var(--accent); stroke-width: 2.4px; stroke-linecap: round; /* theme-picker.js sizes the viewBox to the link so units == px; no vector-effect needed (Chrome's dash math breaks with it on stretched paths). Idle offset overshoots the length so the round cap of the hidden dash can't peek out as a dot at the path start. */ stroke-dasharray: 100 200; stroke-dashoffset: 106; /* retreat is quicker than the draw-in below */ transition: stroke-dashoffset 150ms cubic-bezier(0.16, 1, 0.3, 1); } .site-nav a:hover .nav-stroke path, .site-nav a:focus-visible .nav-stroke path, .site-nav a[aria-current="page"] .nav-stroke path { stroke-dashoffset: 0; transition-duration: 240ms; } @media (prefers-reduced-motion: reduce) { .site-nav a .nav-stroke path { transition: none; } } .header-note { justify-self: end; max-width: 190px; color: var(--muted); font-size: 11px; font-weight: 650; line-height: 1.35; text-align: right; } .human-tagline { max-width: 340px; color: var(--ink); font-family: var(--font-mono); font-size: 13px; font-weight: 400; line-height: 1.15; white-space: nowrap; } .human-tagline .script { font-family: var(--font-script); font-size: 20px; font-weight: 400; letter-spacing: 0.01em; } .eyebrow { display: block; margin: 0 0 18px; color: var(--accent-text); font-size: 11px; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { letter-spacing: -0.04em; } h1 { max-width: 12ch; margin-bottom: 24px; font-size: clamp(52px, 7.2vw, 108px); font-weight: 780; line-height: 0.92; } h2 { font-size: clamp(34px, 4.2vw, 60px); font-weight: 760; line-height: 0.98; } h3 { font-size: 22px; line-height: 1.08; } .lede { max-width: 46ch; color: var(--muted); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; } .button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 750; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms ease, color 180ms ease; } .button:hover { transform: translateY(-2px); background: var(--accent); border-color: var(--accent); color: var(--on-accent, #181817); } .button:active { transform: translateY(1px) scale(0.99); } .text-link { display: inline-flex; /* bottom-aligned so the border underline hugs the text — centered in the 44px tap box, the line floated ~12px below the words */ align-items: flex-end; min-height: 44px; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 720; text-decoration: none; } .text-link:hover { color: var(--accent-text); } .home-main { width: var(--page); min-height: calc(100dvh - 76px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr); align-items: center; gap: clamp(50px, 7vw, 120px); padding: 46px 0 44px; } .home-page .site-header, .home-page .home-main { position: relative; z-index: 1; } .home-page h1, .home-page h2, .home-page .active-track .artist, .home-page .button { font-family: var(--font-display); } .home-glyph { position: fixed; z-index: 2; display: block; width: 70px; height: 70px; pointer-events: none; object-fit: contain; opacity: 1; } .glyph-sun { top: 118px; right: 2.3%; transform: rotate(-7deg); } .glyph-flower { bottom: 74px; left: 2.1%; width: 62px; height: 62px; transform: rotate(8deg); } .home-copy { align-self: center; } .home-copy h1 { font-size: clamp(56px, 6.3vw, 94px); } .home-copy .home-title-logo { width: min(100%, 420px); margin-bottom: 14px; line-height: 1; } .home-title-logo img { width: 100%; height: auto; } .home-copy .lede { max-width: 46ch; margin-bottom: 28px; } .active-track { /* a record card, not running text — so it never reads as part of the headline stack */ margin-top: 42px; max-width: 430px; padding: 24px 26px; background: var(--paper-raised); border: 2px solid var(--ink); border-radius: var(--radius); transition: opacity 220ms ease, transform 220ms ease; } .active-track-label { margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .active-track h1 { margin-bottom: 8px; font-size: clamp(27px, 2.4vw, 39px); /* track titles wrap to the card, not the global 12ch headline cap — balance keeps multi-line titles from stranding a single word */ max-width: none; text-wrap: balance; } .active-track .artist { margin-bottom: 4px; color: var(--accent-text); font-size: 16px; font-weight: 720; } .listener-line { margin-bottom: 12px; color: var(--ink); font-size: 12px; font-weight: 680; letter-spacing: 0.035em; } .listener-line strong { font-variant-numeric: tabular-nums; } .track-bio { max-width: 46ch; margin-bottom: 15px; color: var(--muted); font-size: 13px; line-height: 1.48; } /* the tier tag: a hand-drawn marker loop around the word, drawn in when the listener count lands (replaces the old geometric bordered pill) */ .stagepill { position: relative; display: inline-block; margin-left: 6px; padding: 4px 9px 3px; font-size: 9.5px; font-weight: 720; letter-spacing: 0.09em; text-transform: uppercase; vertical-align: 2px; } .stagepill[hidden] { display: none; } .stagepill .pill-stroke { position: absolute; inset: -1px -3px; width: calc(100% + 6px); height: calc(100% + 2px); overflow: visible; pointer-events: none; } .stagepill .pill-stroke path { fill: none; stroke: var(--accent); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; } .stagepill.is-drawn .pill-stroke path { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms; } @media (prefers-reduced-motion: reduce) { .stagepill.is-drawn .pill-stroke path { transition: none; } } .feature-receipt { display: inline-block; /* padding grows the tap target to ~45px; the negative top margin and 1px bottom margin cancel most of it visually, leaving ~9px of air under the listener line (~10px on desktop, where .listener-line's margin-bottom drops to 7px) */ margin: -16px 0 1px; padding: 13px 0; color: var(--ink); font-size: 12px; font-weight: 680; letter-spacing: 0.03em; text-decoration: underline; text-decoration-color: var(--accent-text, var(--accent)); text-decoration-thickness: 1px; text-underline-offset: 4px; } .feature-receipt:hover { color: var(--accent-text, var(--accent)); } .feature-receipt[hidden] { display: none; } .tour-line { display: block; width: fit-content; /* same tap-target trick as .feature-receipt above */ margin: -16px 0 1px; padding: 13px 0; color: var(--ink); font-size: 12px; font-weight: 680; letter-spacing: 0.03em; text-decoration: underline; text-decoration-color: var(--accent-text, var(--accent)); text-decoration-thickness: 1px; text-underline-offset: 4px; } .tour-line:hover { color: var(--accent-text, var(--accent)); } .tour-line[hidden] { display: none; } /* when the Substack receipt shows above, back off the negative margin so the two rows don't overlap each other's tap padding */ .feature-receipt:not([hidden]) + .tour-line { margin-top: -6px; } .stream-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 25px; color: var(--ink); font-family: var(--font-display); font-size: 13px; font-weight: 600; } .stream-links a { min-height: 44px; display: inline-flex; align-items: center; padding-bottom: 0; border-bottom: 0; text-decoration: none; } .stream-links a:hover { color: var(--accent-text); } .stream-links.is-hidden { visibility: hidden; } .roulette-shell { min-width: 0; display: block; } .reel-window { --reel-cover: min(34vw, 460px); position: relative; height: min(68vh, 650px); min-height: 540px; overflow: hidden; border-radius: var(--radius); cursor: pointer; isolation: isolate; } .reel-window::before, .reel-window::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 18%; pointer-events: none; opacity: 0; transition: opacity 160ms ease; } .reel-window::before { top: 0; background: linear-gradient(to bottom, var(--paper) 0%, transparent 78%); } .reel-window::after { bottom: 0; background: linear-gradient(to top, var(--paper) 0%, transparent 78%); } .reel-window.is-spinning::before, .reel-window.is-landed::before { opacity: 0.72; } /* The lower peek needs less veil than the upper one. Together with the lighter cover shadow, this keeps it from reading as a dark blurred bar. */ .reel-window.is-spinning::after, .reel-window.is-landed::after { opacity: 0.46; } .reel-track { position: absolute; top: 50%; left: 50%; width: var(--reel-cover); display: grid; row-gap: 14px; transform: translate3d(-50%, -50%, 0); } .reel-card { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--paper-raised); opacity: 0.55; transform: scale(0.96); transition: opacity 180ms ease, transform 180ms ease; } .reel-card.is-center { opacity: 1; transform: scale(1); box-shadow: 0 14px 42px rgba(93, 31, 55, 0.1); } .reel-card img { width: 100%; height: 100%; object-fit: cover; } .reel-window.is-spinning .reel-track { will-change: transform; } .reel-window.is-spinning .reel-card { opacity: 0.66; transform: scale(1); outline: 2px solid var(--ink); outline-offset: -2px; box-shadow: none; } .reel-window.is-spinning .reel-card.is-center { opacity: 1; } .reel-window.is-landed .reel-card:not(.is-center) { opacity: 0.58; transform: scale(0.985); outline: 1px solid color-mix(in srgb, var(--ink) 58%, transparent); outline-offset: -1px; } .reel-reticle { position: absolute; top: 50%; left: 50%; z-index: 3; width: var(--reel-cover); aspect-ratio: 1; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 0 0 0 6px var(--paper), 14px 16px 0 var(--accent-soft); pointer-events: none; transform: translate(-50%, -50%); } .active-track > * { transition: opacity 220ms ease; } .home-page:has(.reel-window.is-spinning) .active-track > :not(.card-actions) { opacity: 1; } .home-page .button:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); } .home-credit { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; } .home-tagline-footer { color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 1.25; } .home-tagline-footer .script { font-family: var(--font-script); font-size: 20px; font-weight: 400; } .spotify-credit { display: inline-flex; align-items: center; gap: 7px; } .spotify-mark { width: 17px; height: 17px; } @media (min-width: 761px) { html.home-document, body.home-page { height: 100%; /* auto, not hidden: the hero already fits one screen, and this keeps the scrollbar gutter identical to the other pages (no 2px nav shift) */ overflow-y: scroll; overflow-x: hidden; } .home-main { height: calc(100dvh - 76px); min-height: 0; grid-template-rows: minmax(0, 1fr) auto; padding: 12px 0 10px; } .home-copy h1 { margin-bottom: 14px; max-width: none; font-size: clamp(50px, 5vw, 72px); white-space: nowrap; } .home-copy .lede { margin-bottom: 18px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.4; } .home-page .button { min-height: 46px; padding-inline: 21px; } .active-track { margin-top: 32px; } .active-track-label { margin-bottom: 6px; } .active-track h1 { margin-bottom: 6px; font-size: clamp(26px, 2.2vw, 36px); } .active-track .artist, .listener-line, .track-bio { margin-bottom: 7px; } /* keep ~10px of visual air above the receipt when .listener-line's margin-bottom compresses to 7px */ .feature-receipt { margin-top: -10px; } .reel-window { --reel-cover: min(31vw, 48dvh, 420px); height: min(66dvh, 590px); min-height: 0; } .home-credit { padding-top: 8px; } } .page-main { width: var(--page); margin: 0 auto; padding: clamp(70px, 9vw, 130px) 0 110px; } .page-hero { padding-bottom: clamp(56px, 7vw, 96px); } .page-hero h1 { max-width: 14ch; margin: 0 0 26px; } .page-intro { max-width: 54ch; margin: 0; color: var(--muted); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.6; } .page-intro strong { color: var(--ink); font-weight: 750; } .graduate-feature { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr); gap: clamp(36px, 6vw, 86px); align-items: center; margin-bottom: clamp(90px, 11vw, 150px); } .graduate-feature img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius); object-fit: cover; } .graduate-copy h2 { margin-bottom: 8px; } .listener-count { margin-bottom: 28px; color: var(--accent-text); font-size: 17px; font-weight: 740; } .graduate-copy .bio { max-width: 42ch; margin-bottom: 30px; color: var(--muted); font-size: 16px; line-height: 1.62; } .played-track { margin: 0 0 12px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; } .played-track strong { color: inherit; font-weight: inherit; } .graduate-pair { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 7vw, 100px); align-items: start; margin-bottom: 110px; } .graduate-card { min-width: 0; } .graduate-card.offset { padding-top: 140px; } .graduate-card img { width: 100%; aspect-ratio: 5 / 6; margin-bottom: 26px; border-radius: var(--radius); object-fit: cover; } .graduate-card h2 { margin-bottom: 7px; font-size: clamp(32px, 3.4vw, 50px); } .graduate-card .bio { max-width: 46ch; color: var(--muted); font-size: 14px; line-height: 1.6; } .closing-band { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; margin: 30px 0 44px; padding: clamp(46px, 7vw, 76px) clamp(24px, 5vw, 60px); background: var(--ink); color: var(--paper); } .closing-band h2 { max-width: 16ch; margin: 0; } .closing-band .button { background: var(--paper); color: var(--ink); border-color: var(--paper); } .spotlight-hero { min-height: 58vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(62px, 8vw, 100px); } .spotlight-hero h1 { /* the headline carries its own
lockup (break at the em dash) — the old 10ch cap forced a fourth wrap that stranded "to—and" */ max-width: none; margin-bottom: 26px; } @media (max-width: 760px) { .spotlight-hero h1 { /* a notch under the generic mobile h1 size so the widest line, "and talking about.", fits a 375px viewport without rewrapping */ font-size: clamp(30px, 10vw, 42px); } } .spotlight-hero .lede { max-width: 46ch; margin: 0; } .feature-story { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr); gap: clamp(36px, 6vw, 84px); align-items: end; padding: 36px 0 clamp(86px, 10vw, 140px); border-top: 1px solid var(--line); } .feature-story img { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); object-fit: cover; } .story-date { margin-bottom: 12px; color: var(--accent-text); font-size: 11px; font-weight: 740; letter-spacing: 0.1em; text-transform: uppercase; } .feature-story h2 { margin-bottom: 18px; font-size: clamp(42px, 5.2vw, 74px); } .story-excerpt { margin-bottom: 26px; color: var(--muted); font-size: 15px; line-height: 1.62; } .story-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .story { min-width: 0; padding: 34px; background: var(--paper); text-decoration: none; transition: background 180ms ease; } .story:hover { background: var(--paper-raised); } .story-large { grid-row: span 2; padding-left: 0; } .story img { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 28px; border-radius: var(--radius); object-fit: cover; } .story-large img { aspect-ratio: 4 / 3; } .story h3 { margin-bottom: 12px; font-size: clamp(25px, 2.8vw, 40px); } .story-small { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 28px; align-items: center; } .story-small img { aspect-ratio: 1; margin: 0; } .story-small h3 { font-size: clamp(22px, 2.2vw, 31px); } .story-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(38px, 6vw, 80px); padding: clamp(80px, 10vw, 140px) 0; } .story-row article { min-width: 0; } .story-row article:nth-child(2) { padding-top: 90px; } .story-row img { width: 100%; aspect-ratio: 16 / 9; margin-bottom: 24px; border-radius: var(--radius); object-fit: cover; } .story-row h3 { margin-bottom: 12px; font-size: clamp(28px, 3.2vw, 45px); } .newsletter { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; margin: 30px 0 44px; padding: clamp(46px, 7vw, 76px) clamp(24px, 5vw, 60px); background: var(--ink); color: var(--paper); } .newsletter h2 { margin-bottom: 10px; } .newsletter div p { margin: 0; color: var(--paper); opacity: 0.85; } .newsletter .button { background: var(--paper); color: var(--ink); border-color: var(--paper); } .newsletter h2 { max-width: 11ch; margin-bottom: 18px; } .newsletter p { max-width: 46ch; margin-bottom: 0; color: var(--muted); line-height: 1.55; } .site-footer { width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding: 26px 0 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; } .footer-script { color: var(--ink); font-family: var(--font-mono); font-size: 12px; text-align: center; } .footer-script .script { font-family: var(--font-script); font-size: 20px; font-weight: 400; } .footer-links { display: flex; justify-self: end; gap: 20px; } .footer-links a { text-decoration: none; } .footer-links a:hover { color: var(--accent-text); } @media (max-width: 1020px) { :root { --page: min(100% - 36px, 900px); } html.home-document, body.home-page { height: auto; overflow-y: auto; } .site-header { grid-template-columns: 1fr auto; } .site-nav { grid-row: 2; grid-column: 1 / -1; width: calc(100% + 8px); justify-content: flex-start; overflow-x: auto; /* the 4px side padding/negative margin keeps the marker stroke's overhang from clipping against this scroll container's edge */ margin: 0 -4px; padding: 0 4px 13px; } .header-note { display: none; } .home-main { height: auto; min-height: calc(100dvh - 112px); grid-template-rows: auto; grid-template-columns: 0.8fr 1.2fr; gap: 44px; padding: 32px 0 26px; } .roulette-shell { display: block; } .reel-window { --reel-cover: min(42vw, 410px); } .home-glyph { opacity: 0.78; } .page-hero, .graduate-feature, .feature-story { grid-template-columns: 1fr 1fr; } .story-small { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; } } @media (max-width: 760px) { :root { --page: calc(100% - 32px); --radius: 14px; } .site-header { min-height: 68px; gap: 14px; } .brand { width: 162px; } .parent-brand { width: 126px; } .site-nav { gap: 22px; padding-bottom: 12px; } .site-nav a { font-size: 12px; white-space: nowrap; } h1, .home-copy h1 { max-width: none; font-size: clamp(34px, 10.8vw, 44px); /* nowrap was for the old wordmark-as-headline layout; current h1s are sentences and track names, which must wrap on small screens */ text-wrap: balance; } .home-copy .home-title-logo { width: min(82vw, 330px); } .home-main { min-height: auto; /* minmax(0, …), not bare 1fr: a bare 1fr track can't shrink below its items' min-content (the record card's is ~406px), which pushed the whole column past a 375px viewport and clipped the right edge */ grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 60px 0 48px; } .home-main > * { min-width: 0; } .home-copy { display: contents; } .home-copy > h1, .home-copy > .lede, .home-copy > .button { grid-column: 1; } .home-copy > .button { justify-self: start; } .roulette-shell { grid-row: 4; display: block; } .reel-window { --reel-cover: min(82vw, 350px); height: 540px; min-height: 500px; } .active-track { grid-row: 5; margin-top: 0; } .home-credit { grid-row: 6; align-items: flex-start; flex-direction: column; } .glyph-sun { top: 148px; right: -12px; width: 48px; height: 48px; } /* the fixed-position flower collides with the credit strip now that the first screen is compact (and the card height changes per track) — phones keep just the sun */ .glyph-flower { display: none; } .page-main { padding: 68px 0 80px; } .page-hero { grid-template-columns: 1fr; gap: 30px; } .page-hero h1 { max-width: 10.5ch; } .proof-strip { grid-template-columns: 1fr; } .proof-item, .proof-item + .proof-item { min-height: auto; padding: 22px 0; border-left: 0; } .proof-item + .proof-item { border-top: 1px solid var(--line); } .graduate-feature { grid-template-columns: 1fr; gap: 34px; } .graduate-pair { grid-template-columns: 1fr; gap: 76px; } .graduate-card.offset, .story-row article:nth-child(2) { padding-top: 0; } .closing-band { grid-template-columns: 1fr; align-items: start; } /* the newsletter band stays fully centered on mobile — align-items: start here left-pinned the button under centered text */ .spotlight-hero { min-height: 50vh; } .feature-story { grid-template-columns: 1fr; align-items: start; } .story-grid { grid-template-columns: 1fr; } .story-large { grid-row: auto; padding: 28px 0; } .story-small { grid-template-columns: 96px minmax(0, 1fr); padding: 28px 0; border-top: 1px solid var(--line); } .story-row { grid-template-columns: 1fr; gap: 76px; } .site-footer { grid-template-columns: 1fr; justify-items: start; gap: 12px; } .footer-script { text-align: left; } .footer-links { justify-self: start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ---------- pitch form (editorial mode) ---------- */ .pitch-hero { padding: clamp(48px, 8vh, 96px) 0 clamp(36px, 6vh, 64px); } .pitch-hero .lede { margin-bottom: 10px; } .pitch-alt { color: var(--muted); font-size: 14px; line-height: 1.55; } .pitch-alt a { color: var(--ink); font-weight: 650; text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; } .pitch-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; max-width: 860px; margin: 0 0 clamp(56px, 9vh, 110px); } .pitch-form .span-2 { grid-column: 1 / -1; } .pitch-field { display: flex; flex-direction: column; gap: 8px; } /* in a paired row the two cells stretch to equal height; anchoring the control to the bottom keeps both inputs level even when one field's hint runs a line longer than the other's */ .pitch-field input, .pitch-field textarea { margin-top: auto; } .pitch-field label { font-size: 13px; font-weight: 750; letter-spacing: 0.02em; } .pitch-required-note { margin: 0 0 -8px; color: var(--muted); font-size: 12px; } .pitch-required-note span, .pitch-field .req { color: var(--accent-text); font-weight: 800; } .pitch-field .opt { color: var(--muted); font-weight: 500; } .pitch-hint { margin: -2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; } .pitch-field input, .pitch-field textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 15px; transition: border-color 140ms ease; } .pitch-field input:hover, .pitch-field textarea:hover { border-color: var(--muted); } .pitch-field input:focus-visible, .pitch-field textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); box-shadow: 0 0 0 5px var(--focus-ring-outer); } .pitch-field input:user-invalid, .pitch-field textarea:user-invalid { border-color: var(--accent-text); } .pitch-field textarea { min-height: 110px; resize: vertical; } .pitch-field textarea.tall { min-height: 170px; } .pitch-actions { margin-top: 6px; } .pitch-error { display: none; padding: 14px 16px; border: 1px solid var(--accent-text); border-radius: var(--radius); background: var(--paper-raised); color: var(--accent-text); font-size: 14px; line-height: 1.5; } .pitch-error.show { display: block; } .pitch-done { display: none; max-width: 860px; margin: 0 0 clamp(56px, 9vh, 110px); padding: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); } .pitch-done h2 { margin-bottom: 10px; } .pitch-done p { max-width: 52ch; color: var(--muted); font-size: 16px; line-height: 1.55; margin-bottom: 20px; } .sent .pitch-form { display: none; } .sent .pitch-done { display: block; } /* honeypot — hidden from people (incl. screen readers), visible to bots */ .bf { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (max-width: 760px) { .pitch-form { grid-template-columns: 1fr; } .pitch-form .span-2 { grid-column: auto; } } /* ---------- spin button under the machine + on-cover playback ---------- */ .roulette-shell { display: flex; flex-direction: column; align-items: center; gap: 26px; } .roulette-shell .reel-window { width: 100%; /* short windows: the reel yields to the button instead of pushing the hero (and the nav) past one screen */ max-height: calc(100dvh - 244px); } /* the reticle frame stays click-through, but the play button inside it doesn't */ .reel-reticle { pointer-events: none; } .pp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border: none; border-radius: 999px; background: var(--ink); color: var(--paper); display: grid; place-items: center; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity 180ms ease; } .pp[hidden] { display: none; } .pp svg { width: 24px; height: 24px; fill: currentColor; display: block; } .pp .ic-play { margin-left: 3px; display: none; } .pp.paused .ic-pause { display: none; } .pp.paused .ic-play { display: block; } .pp:focus-visible { opacity: 1; } /* the button appears once you've landed on a track: on hover for pointers, always for touch */ @media (hover: hover) { .reel-window.is-landed:hover .pp { opacity: 1; } } @media (hover: none) { .reel-window.is-landed .pp { opacity: 1; } } .reel-window.is-spinning .pp { opacity: 0; pointer-events: none; } /* hidden Spotify embed player (the pp button drives it) */ .sp-host { position: fixed; bottom: 0; left: 0; width: 300px; height: 80px; opacity: 0; pointer-events: none; z-index: -1; } /* ---------- now-playing record card (desktop composition) ---------- */ @media (min-width: 761px) { .home-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; } .home-brand { margin-top: auto; } .home-copy .active-track { /* hug the gutter so the card reads as belonging to the cover, not to the headline */ margin-top: auto; margin-left: auto; margin-right: -28px; } } /* ---------- spread layout: brand band up top, machine left, card right ---------- */ .home-main--spread > .lede { font-size: 15px; line-height: 1.6; } .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 20px; } .roulette-shell { position: relative; } .roulette-shell .reel-window { position: relative; z-index: 1; } @media (min-width: 761px) { html.home-document { height: 100%; } /* The footer is fixed, so reserve its real 64px height before centering the hero. Grid rows let the browser account for either the one-row desktop nav or the two-row tablet nav without hard-coded vertical nudges. */ body.home-page.has-sticky-footer { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); padding-bottom: 64px; } body.home-page.has-sticky-footer > .home-main--spread { height: auto; min-height: 0; padding-block: 11px; } .home-main--spread { --spread-cover: clamp(280px, min(31vw, 48dvh), 420px); grid-template-columns: var(--spread-cover) minmax(0, 580px); grid-template-rows: minmax(0, 1fr); grid-template-areas: "machine card"; column-gap: clamp(34px, 4vw, 60px); justify-content: center; align-items: center; } .home-main--spread .roulette-shell { grid-area: machine; align-self: center; } .home-main--spread .reel-window { --reel-cover: var(--spread-cover); width: var(--spread-cover); } .home-main--spread .active-track { grid-area: card; position: relative; z-index: 2; /* min-, not fixed, height: long titles/bios grow the card instead of overflowing it and crushing the bottom padding */ min-height: min(31vw, 48dvh, 420px); display: flex; flex-direction: column; justify-content: center; width: 100%; margin: 0; max-width: 580px; padding: 32px 36px; align-self: center; } .home-main--spread .active-track h1 { margin-bottom: 12px; font-size: clamp(34px, 3.2vw, 50px); } .home-main--spread .active-track .artist { font-size: 18px; margin-bottom: 6px; } .home-main--spread .track-bio { font-size: 15px; max-width: 44ch; } } @media (min-width: 761px) and (max-height: 800px) { .home-main--spread .active-track { padding-block: 26px; } } @media (max-width: 760px) { .home-main--spread { gap: 28px; /* the 60px page padding reads as a hole above the artwork on phones */ padding-top: 14px; } .home-main--spread .roulette-shell { grid-row: 1; position: relative; } /* first-viewport budget: the cover at ~74vw with a slim reel peek, so the headline and CTA land above the fold on a 390x844 phone */ .home-main--spread .reel-window { --reel-cover: min(74vw, 330px); height: calc(var(--reel-cover) + 76px); min-height: 0; } .home-main--spread .active-track { grid-row: 2; position: relative; z-index: 2; /* pull the card into the window's empty peek zone so it sits ~14px below the cover's edge — close, but never overlapping the art */ margin-top: -52px; padding: 20px 22px; } .home-main--spread .home-credit { grid-row: 3; } /* a touch more air under the card so the credit strip's top edge starts below iOS Safari's bottom toolbar on the first screen instead of peeking 2-3px above it (the strip's own margins are locked to 0) */ .home-main--spread .active-track { margin-bottom: 14px; } /* on phones the not-yet-visible stream links wrap to their own row and leave a dead band under the CTA — collapse them until a track lands (desktop keeps the reserved space: there they share the button's row) */ .home-main--spread .stream-links.is-hidden { display: none; } } @media (max-width: 760px) and (hover: none) { /* the flowed tap hint would sit exactly where the card now laps the artwork — float it as a chip on the window's lower peek instead */ .home-main--spread .play-hint { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 1; width: max-content; max-width: 90%; margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--paper); color: var(--ink); } } /* ---------- solid footer bands (no hairline) ---------- */ /* declared on body so it re-resolves against whichever palette is active (a :root declaration would freeze the root-level accent-soft) */ body { --band: var(--accent-soft); } /* editorial + shared footer: full-bleed color strip */ .site-footer { width: 100%; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px max(24px, calc((100vw - var(--page)) / 2)) 18px; border-top: none; background: var(--band); color: var(--ink); font-family: var(--font-mono); font-size: 12px; } .site-footer a, .footer-links a { color: var(--ink); } /* home page credit line: bleed out of the page column into a strip */ .home-credit { border-top: none; background: var(--band); margin-inline: calc((100vw - var(--page)) / -2); padding: 16px max(24px, calc((100vw - var(--page)) / 2)) 18px; margin-bottom: -44px; color: var(--ink); } @media (min-width: 761px) { .home-credit { margin-bottom: -10px; } } /* ---------- Casa Bele pass: square corners, black borders, cream paper ---------- */ :root { --radius: 0px; } /* the spin page joins the editorial paper */ body.home-page.editorial-skin { --paper: #f7f7f7; --paper-raised: #ffffff; --ink: #191918; --muted: #686762; --line: #d2d2ce; --accent: #cf2a5e; --accent-soft: #ffc3d4; } @media (prefers-color-scheme: dark) { body.home-page.editorial-skin { --paper: #181817; --paper-raised: #222220; --ink: #f3f1eb; --muted: #aaa8a1; --line: #3a3935; --accent: #f16088; --accent-soft: #512739; } } .editorial-skin .reel-reticle { border-width: 2px; box-shadow: none; transition: border-color 180ms ease; } .editorial-skin .reel-window.is-spinning .reel-reticle { border-color: transparent; } /* ---------- graduate track players + streaming links ---------- */ .grad-tracks { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; } .grad-play { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; padding: 9px 15px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background 140ms ease, color 140ms ease; } .grad-play svg { width: 12px; height: 12px; fill: currentColor; display: block; } .grad-play .ic-pause { display: none; } .grad-play.is-playing { background: var(--ink); color: var(--paper-raised); } .grad-play.is-playing .ic-play { display: none; } .grad-play.is-playing .ic-pause { display: block; } @media (hover: hover) { .grad-play:hover { background: var(--ink); color: var(--paper-raised); } } .grad-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 16px; font-size: 13px; font-weight: 650; } .grad-links a { min-height: 44px; display: inline-flex; align-items: center; padding-bottom: 2px; border-bottom: 1px solid currentColor; text-decoration: none; } .grad-links a:hover { color: var(--accent-text); } /* ---------- editorial footer brand lockup ---------- */ .footer-brandline { display: inline-flex; align-items: center; gap: 10px; } .footer-brandline a { min-height: 44px; display: inline-flex; align-items: center; } .footer-brandline img { display: block; height: 20px; width: auto; } .footer-brandline .fb-playnext { height: 30px; } .fb-by { font-size: 12px; } @media (prefers-color-scheme: dark) { .editorial-page .footer-brandline img { filter: invert(1); } } /* ---------- pick your palette ---------- An explicit palette beats the OS auto light/dark. The selector group is deliberately over-specific so it outranks body.editorial-page and body.home-page.editorial-skin (and their dark-mode media overrides). */ html[data-palette="paper"] body, html[data-palette="paper"] body.editorial-page, html[data-palette="paper"] body.home-page.editorial-skin { --paper: #f7f7f7; --paper-raised: #ffffff; --ink: #191918; --muted: #686762; --line: #d2d2ce; --accent: #cf2a5e; --accent-soft: #ffc3d4; color-scheme: light; } html[data-palette="pink"] body, html[data-palette="pink"] body.editorial-page, html[data-palette="pink"] body.home-page.editorial-skin { --paper: #ffaed0; --paper-raised: #ffc1da; --ink: #171616; --muted: #51464a; --line: rgba(23, 22, 22, 0.24); --accent: #a30017; --accent-soft: #bfa5e9; color-scheme: light; } html[data-palette="lime"] body, html[data-palette="lime"] body.editorial-page, html[data-palette="lime"] body.home-page.editorial-skin { --paper: #e8fc73; --paper-raised: #f2ffa3; --ink: #171616; --muted: #565b25; --line: rgba(23, 22, 22, 0.24); --accent: #b6021a; --accent-soft: #ffc3d4; color-scheme: light; } html[data-palette="ink"] body, html[data-palette="ink"] body.editorial-page, html[data-palette="ink"] body.home-page.editorial-skin { --paper: #181817; --paper-raised: #222220; --ink: #f3f1eb; --muted: #aaa8a1; --line: #3a3935; --accent: #f16088; --accent-soft: #512739; color-scheme: dark; } /* logo artwork is dark ink — flip it on the ink palette, never otherwise */ html[data-palette="ink"] .brand img, html[data-palette="ink"] .parent-brand img, html[data-palette="ink"] .home-title-logo img, html[data-palette="ink"] .footer-brandline img, html[data-palette="ink"] .spotify-mark { filter: invert(1) !important; } html[data-palette="paper"] .brand img, html[data-palette="paper"] .parent-brand img, html[data-palette="paper"] .home-title-logo img, html[data-palette="paper"] .footer-brandline img, html[data-palette="paper"] .spotify-mark, html[data-palette="pink"] .brand img, html[data-palette="pink"] .parent-brand img, html[data-palette="pink"] .home-title-logo img, html[data-palette="pink"] .footer-brandline img, html[data-palette="pink"] .spotify-mark, html[data-palette="lime"] .brand img, html[data-palette="lime"] .parent-brand img, html[data-palette="lime"] .home-title-logo img, html[data-palette="lime"] .footer-brandline img, html[data-palette="lime"] .spotify-mark { filter: none !important; } /* the picker itself: four square swatches in the footer band */ .palette-picker { display: inline-flex; align-items: center; gap: 9px; } .palette-picker button { width: 16px; height: 16px; padding: 0; border: 2px solid var(--ink); cursor: pointer; transition: transform 120ms ease; } .palette-picker button:hover { transform: translateY(-2px); } .palette-picker button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; } .swatch-paper { background: #f7f7f7; } .swatch-pink { background: #ffaed0; } .swatch-lime { background: #e8fc73; } .swatch-ink { background: #181817; } /* ---------- accessibility pass ---------- --on-accent: text color that clears WCAG AA on the active accent (light accents want dark text, deep reds want light text) */ body { /* Dark ink on the accent, matching Color Grid. The previous #ffffff dated from the old crimson base palette and scores only 2.98:1 on Color Grid's orange, which is below the AA this block promises. Skinned pages are unaffected -- their theme block sets --on-accent directly. */ --on-accent: #191918; } @media (prefers-color-scheme: dark) { body { /* Night Bloom's own value is #292c26; #181817 is visually identical on the hot-pink accent and clears AA (5.39:1 vs 4.30:1), so it stays. */ --on-accent: #181817; } } html[data-palette="paper"] body { --on-accent: #ffffff; } html[data-palette="pink"] body { --on-accent: #ffaed0; } html[data-palette="lime"] body { --on-accent: #e8fc73; } html[data-palette="ink"] body { --on-accent: #181817; } /* palette swatches: 16px visual, 28px touch target */ .palette-picker button { position: relative; } .palette-picker button::after { content: ""; position: absolute; inset: -6px; } /* ---------- skip-to-content link (visible only on keyboard focus) ---------- */ .skip-link { position: absolute; top: 10px; left: 10px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; text-decoration: none; transform: translateY(-200%); min-height: 44px; } .skip-link:focus-visible { transform: none; outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-ring-outer); } /* Screen-reader-only text and visible cue for links that open a new tab. */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .external-marker { display: inline-block; margin-left: 0.35em; font-size: 0.82em; line-height: 1; } .external-marker svg { display: inline-block; width: 0.72em; height: 0.72em; vertical-align: baseline; } /* inline wordmark inside running text (graduates standfirst, pitch lede) */ .intro-logo { display: inline-block; height: 1.3em; width: auto; margin: 0 2px; vertical-align: -0.28em; } html[data-palette="ink"] .intro-logo { filter: invert(1); } @media (prefers-color-scheme: dark) { body.editorial-page .intro-logo { filter: invert(1); } } html[data-palette="paper"] .intro-logo, html[data-palette="pink"] .intro-logo, html[data-palette="lime"] .intro-logo { filter: none; } /* index header: same box as .brand, rendered invisible */ .brand-ghost { visibility: hidden; } /* ---------- three-direction color study ---------- This page deliberately keeps the working Spin composition intact. Only the color system and its small comparison control change between views. */ html[data-study-palette="night"] body.home-page.editorial-skin.palette-study-page { --paper: #292c26; --paper-raised: #353830; --ink: #f4efe6; --muted: #c6beb1; --line: #696c61; --accent: #f04fa6; --accent-soft: #f15a43; --band: #f15a43; --band-ink: #292c26; --on-accent: #292c26; --study-logo-filter: invert(1); --study-footer-icon-filter: none; color-scheme: dark; } html[data-study-palette="room"] body.home-page.editorial-skin.palette-study-page { --paper: #f2eee3; --paper-raised: #fbf7ed; --ink: #6f211f; --muted: #405346; --line: #aa9585; --accent: #285241; --accent-soft: #7d2722; --band: #7d2722; --band-ink: #f2eee3; --on-accent: #f2eee3; --study-logo-filter: none; --study-footer-icon-filter: invert(1); color-scheme: light; } html[data-study-palette="grid"] body.home-page.editorial-skin.palette-study-page { --paper: #f7f5ef; --paper-raised: #efc7bf; --ink: #191918; --muted: #5f5b55; --line: #98938a; --accent: #ff6239; --accent-soft: #aebcf0; --band: #aebcf0; --band-ink: #191918; --on-accent: #191918; --study-logo-filter: none; --study-footer-icon-filter: none; color-scheme: light; } .palette-study-page .brand img, .palette-study-page .parent-brand img, .palette-study-page .home-title-logo img { filter: var(--study-logo-filter) !important; } .palette-study-page .home-credit { color: var(--band-ink); } .palette-study-page .home-tagline-footer, .palette-study-page .spotify-credit { color: inherit; } .palette-study-page .spotify-mark { filter: var(--study-footer-icon-filter) !important; } .palette-study-page { overflow-x: hidden; } .study-picker { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .study-picker button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: 11px/1 var(--font-mono); cursor: pointer; white-space: nowrap; transition: transform 120ms ease, background-color 120ms ease, color 120ms ease; } .study-picker button:hover { transform: translateY(-2px); } .study-picker button[aria-pressed="true"] { background: var(--band-ink); color: var(--band); } .study-picker button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .study-colors { width: 36px; height: 12px; flex: none; border: 1px solid currentColor; } .colors-night { background: linear-gradient(90deg, #292c26 0 33.33%, #f04fa6 33.33% 66.66%, #f15a43 66.66%); } .colors-room { background: linear-gradient(90deg, #7d2722 0 33.33%, #285241 33.33% 66.66%, #f2eee3 66.66%); } .colors-grid { background: linear-gradient(90deg, #ff6239 0 33.33%, #aebcf0 33.33% 66.66%, #efc7bf 66.66%); } @media (max-width: 980px) and (min-width: 761px) { .study-picker button { padding-inline: 7px; font-size: 10px; } .study-colors { width: 27px; } } @media (max-width: 760px) { .palette-study-page .home-credit { gap: 16px; } .study-picker { width: 100%; flex-wrap: wrap; } } /* ---------- selected system ---------- Night Bloom carries the immersive Spin page. Color Grid carries the two editorial pages. Their shared typography, rules and footer treatment keep them feeling like one Play Next family. */ body.home-page.editorial-skin.theme-night-bloom, body.editorial-page.theme-night-bloom { --paper: #292c26; --paper-raised: #353830; --ink: #f4efe6; --muted: #c6beb1; --line: #696c61; --accent: #f04fa6; --accent-text: #ff6fb6; --accent-soft: #f15a43; --band: #f15a43; --on-accent: #292c26; --focus-ring: #ffffff; --focus-ring-outer: #191918; color-scheme: dark; } .theme-night-bloom .brand img, .theme-night-bloom .parent-brand img, .theme-night-bloom .home-title-logo img, .theme-night-bloom .intro-logo { filter: invert(1) !important; } .theme-night-bloom .home-glyph { filter: invert(1); } .theme-color-grid .home-glyph { filter: none; } .theme-night-bloom .spotify-mark, .theme-night-bloom .footer-brandline img { filter: none !important; } .theme-night-bloom .home-credit, .theme-night-bloom .home-tagline-footer, .theme-night-bloom .spotify-credit, .theme-night-bloom .site-footer, .theme-night-bloom .site-footer a { color: #191918; } .theme-night-bloom .site-footer .footer-script, .theme-night-bloom .site-footer .fb-by { color: #191918; } body.home-page.editorial-skin.theme-color-grid, body.editorial-page.theme-color-grid { --paper: #f7f5ef; --paper-raised: #efc7bf; --ink: #191918; --muted: #5a5651; --line: #98938a; --accent: #ff6239; --accent-text: #9f321c; --accent-soft: #aebcf0; --band: #aebcf0; --on-accent: #191918; --focus-ring: #191918; --focus-ring-outer: #ffffff; color-scheme: light; } .theme-color-grid .brand img, .theme-color-grid .parent-brand img, .theme-color-grid .footer-brandline img, .theme-color-grid .page-intro .intro-logo { filter: none !important; } .theme-color-grid .newsletter { background: var(--accent-soft); color: var(--ink); } .theme-color-grid .newsletter div p { color: var(--ink); } .theme-color-grid .newsletter .button { border-color: var(--ink); background: var(--ink); color: var(--paper); } .theme-color-grid .closing-band { background: var(--accent-soft); color: var(--ink); } .theme-color-grid .site-footer, .theme-color-grid .site-footer a { color: var(--ink); } .theme-night-bloom .newsletter, .theme-night-bloom .closing-band { background: var(--accent); color: #191918; } .theme-night-bloom .newsletter div p { color: #191918; opacity: 1; } .theme-night-bloom .newsletter .button, .theme-night-bloom .closing-band .button { border-color: #292c26; background: #292c26; color: #f4efe6; } /* two final palette choices, available from every persistent footer */ .selected-theme-picker { color: inherit; gap: 4px; } .selected-theme-picker button { width: 44px; height: 44px; border: 0; background: transparent; } .selected-theme-picker button::before { content: ""; position: absolute; inset: 11px; border: 2px solid currentColor; } .selected-theme-picker button::after { inset: 0; } .selected-theme-picker button[aria-pressed="true"] { outline: none; } .selected-theme-picker button[aria-pressed="true"]::before { outline: 2px solid currentColor; outline-offset: 2px; } .selected-theme-picker button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 0; box-shadow: 0 0 0 6px var(--focus-ring-outer); } .selected-theme-picker .swatch-night-bloom::before { background: linear-gradient(135deg, #292c26 0 50%, #f04fa6 50% 75%, #f15a43 75%); } .selected-theme-picker .swatch-color-grid::before { background: linear-gradient(135deg, #f7f5ef 0 34%, #ff6239 34% 58%, #aebcf0 58% 80%, #efc7bf 80%); } /* fixed footer bar: visible while browsing without covering the page end */ .sticky-footer { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 50; width: 100%; min-height: 58px; margin: 0 !important; padding: 10px max(24px, calc((100vw - var(--page)) / 2)) calc(10px + env(safe-area-inset-bottom)); border-top: 0; box-shadow: 0 -1px 0 color-mix(in srgb, currentColor 25%, transparent); } .site-footer.sticky-footer, .home-credit.sticky-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; } .site-footer.sticky-footer .footer-script, .home-credit.sticky-footer .spotify-credit { justify-self: end; } .has-sticky-footer .page-main { padding-bottom: 150px; } @media (max-width: 760px) { .sticky-footer { min-height: 52px; padding: 7px 16px calc(7px + env(safe-area-inset-bottom)); } .site-footer.sticky-footer, .home-credit.sticky-footer { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; } .site-footer.sticky-footer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand picker" "tagline tagline"; row-gap: 2px; } .site-footer.sticky-footer .footer-brandline { grid-area: brand; } .site-footer.sticky-footer .selected-theme-picker { grid-area: picker; justify-self: end; } .site-footer.sticky-footer .footer-script { grid-area: tagline; justify-self: start; } .has-sticky-footer .home-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .sticky-footer .footer-brandline { gap: 5px; } .sticky-footer .footer-brandline .fb-playnext { height: 24px; } .sticky-footer .footer-brandline .fb-ro { height: 14px; } /* keep the full "playnext by Rare Originals" lockup on mobile (the "by" was hidden here in an earlier space-saving pass) */ .sticky-footer .footer-script, .sticky-footer .home-tagline-footer { font-size: 9px; white-space: nowrap; } .sticky-footer .footer-script .script, .sticky-footer .home-tagline-footer .script { font-size: 15px; } .sticky-footer .spotify-label { display: none; } .selected-theme-picker { gap: 7px; } .selected-theme-picker button { width: 20px; height: 20px; } .sticky-footer { position: static !important; min-height: 0; box-shadow: none; } .selected-theme-picker { display: none !important; } .site-footer.sticky-footer, .home-credit.sticky-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-block: 16px calc(16px + env(safe-area-inset-bottom)); } .home-credit.sticky-footer { width: 100vw; margin-left: calc((100vw - 100%) / -2) !important; } .has-sticky-footer .home-main { padding-bottom: 24px; } .has-sticky-footer .page-main { padding-bottom: 80px; } .sticky-footer .footer-script, .sticky-footer .home-tagline-footer { font-size: 11px; } .sticky-footer .footer-script .script, .sticky-footer .home-tagline-footer .script { font-size: 18px; } .sticky-footer .spotify-label { display: inline; } } /* ---------- closed sleeve opening state ---------- */ .reel-card.is-closed { background: var(--paper-raised); } .reel-card.is-branded-cover { background: transparent; } .reel-card .branded-opening-art { width: 100%; height: 100%; object-fit: contain; } .closed-sleeve { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; padding: clamp(24px, 8%, 42px); background: var(--paper-raised); color: var(--ink); } .closed-sleeve::after { content: ""; position: absolute; right: 0; bottom: 0; width: 42%; height: 34%; background: var(--accent); } .closed-sleeve-kicker, .closed-sleeve-logo, .closed-sleeve-prompt { position: relative; z-index: 1; } .closed-sleeve-kicker { max-width: 18ch; color: var(--accent-text); font: 13px/1.35 var(--font-mono); } .reel-card .closed-sleeve-logo { width: min(82%, 310px); height: auto; object-fit: contain; align-self: center; justify-self: start; } .closed-sleeve-glyph { position: absolute; z-index: 1; top: 7%; right: 7%; width: 18%; aspect-ratio: 1; background: var(--accent); transform: rotate(8deg); -webkit-mask: url("assets/icons/sanolia-sun.svg") center / contain no-repeat; mask: url("assets/icons/sanolia-sun.svg") center / contain no-repeat; } .closed-sleeve-prompt { width: 36%; justify-self: end; color: var(--on-accent); font: 14px/1 var(--font-mono); text-align: center; text-transform: lowercase; } .theme-night-bloom .closed-sleeve-logo { filter: invert(1) !important; } .theme-color-grid .closed-sleeve-logo { filter: none !important; } @media (max-width: 760px) { .closed-sleeve-kicker { font-size: 11px; } .closed-sleeve-prompt { font-size: 12px; } } /* ---------- mobile nav: hamburger toggle (≤760px) ---------- */ .nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; } .nav-toggle svg { width: 24px; height: 24px; display: block; } .nav-toggle .ic-close { display: none; } .nav-toggle[aria-expanded="true"] .ic-burger { display: none; } .nav-toggle[aria-expanded="true"] .ic-close { display: block; } .nav-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } @media (max-width: 760px) { .site-header { grid-template-columns: 1fr auto auto; } .site-header .brand { grid-row: 1; grid-column: 1; } .site-header .parent-brand { grid-row: 1; grid-column: 2; } .site-header .nav-toggle { display: inline-flex; grid-row: 1; grid-column: 3; } /* collapsed by default; the toggle opens an in-flow dropdown panel */ .site-nav { display: none; } .site-header.nav-open .site-nav { grid-row: 2; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 4px 0 14px; overflow: visible; } .site-header.nav-open .site-nav a { justify-content: flex-start; min-height: 48px; padding: 10px 2px; border-top: 1px solid var(--line); font-size: 15px; white-space: normal; } /* the horizontal-nav marker stroke doesn't fit a stacked list — mark the current page on the text itself instead */ .site-header.nav-open .site-nav a .nav-stroke { display: none; } .site-header.nav-open .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; } } @media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .site-header.nav-open .site-nav { animation: nav-drop 160ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes nav-drop { from { opacity: 0; transform: translateY(-4px); } } } /* ---------- tap hint under the cover (touch devices) ---------- */ /* the cover is always tappable — spin at rest, stop mid-spin, play/pause once landed — so the hint is always present on touch and just changes its wording with the state. Pointer devices get the hover-reveal button instead, no caption. */ .play-hint { display: none; margin: -8px 0 0; color: var(--muted); font-size: 12px; letter-spacing: 0.02em; text-align: center; } @media (hover: none) { .play-hint { display: block; } .play-hint .hint-stop, .play-hint .hint-play { display: none; } .roulette-shell:has(.reel-window.is-spinning) .hint-spin, .roulette-shell:has(.reel-window.is-landed) .hint-spin { display: none; } .roulette-shell:has(.reel-window.is-spinning) .hint-stop { display: inline; } .roulette-shell:has(.reel-window.is-landed) .hint-play { display: inline; } } /* ---------- motion: page turns + theme reveal ---------- */ /* Cross-document view transitions between the four pages: the header holds still while the content does a short settle. Browsers without support ignore all of this and hard-cut as before. */ @view-transition { navigation: auto; } .site-header { view-transition-name: site-header; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: page-leave 90ms ease both; } ::view-transition-new(root) { animation: page-arrive 240ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes page-leave { to { opacity: 0; } } @keyframes page-arrive { from { opacity: 0; transform: translateY(10px); } } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* Theme reveal: a transform-only circle grows behind the live page. This avoids Chrome's full-page view-transition snapshot, which could stutter or briefly present a flat frame on high-density displays. */ body.theme-revealing { isolation: isolate; background: transparent !important; } .theme-reveal-bubble { position: fixed; z-index: 0; width: 96px; height: 96px; border-radius: 50%; pointer-events: none; transform-origin: 50% 50%; will-change: transform; contain: strict; } body.theme-revealing > .site-header, body.theme-revealing > main, body.theme-revealing > .site-footer, body.theme-revealing > .home-credit { position: relative; z-index: 1; } body.theme-revealing > .home-glyph, body.theme-revealing > .skip-link { z-index: 2; } /* Smaller themed surfaces settle at the same pace as the growing background. Include filters so the two wordmarks do not snap between light and dark. */ body.theme-morph, body.theme-morph *, body.theme-morph *::before, body.theme-morph *::after { transition-property: background-color, color, border-color, fill, stroke, filter, box-shadow; transition-duration: 520ms; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .theme-reveal-bubble { display: none; } } /* --------------------------------------------------------------------------- Header wordmark: inline SVG that traces itself on hover / focus. Ported from the Remotion LogoDraw comp (~/Desktop/claude/remotion/web/). Color comes from currentColor, so it follows --ink on every palette and no longer needs the invert() filter the old PNG did. --------------------------------------------------------------------------- */ .brand { color: var(--ink); } .brand .pn-draw { width: 100%; } /* PlayNext stroke-draw logo — pure CSS, no JS. Put the SVG inside an element with class .pn-draw-host (the logo link). Hover or keyboard-focus on the host replays the draw; resting state is the full logo. Ported from the Remotion LogoDraw composition. Color comes from currentColor. */ .pn-draw { display:block; width:100%; height:auto; overflow:visible; --pn-stroke-w: 28; } .pn-draw .pn-fill { fill: currentColor; } .pn-draw .pn-stroke { fill:none; stroke: currentColor; stroke-width: var(--pn-stroke-w); stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: var(--len); stroke-dashoffset: 0; } .pn-draw-host:hover .pn-stroke, .pn-draw-host:focus-visible .pn-stroke { animation: pn-trace 0.75s cubic-bezier(.3,0,.2,1) var(--delay) both; } .pn-draw-host:hover .pn-fill, .pn-draw-host:focus-visible .pn-fill { animation: pn-fill-in .25s ease-out var(--fill-delay) both; } /* fill delay per letter: pops in just as its outline closes */ .pn-draw .pn-fill:nth-of-type(1) { --fill-delay: 0.6s; } .pn-draw .pn-fill:nth-of-type(3) { --fill-delay: 0.97s; } .pn-draw .pn-fill:nth-of-type(5) { --fill-delay: 1.34s; } .pn-draw .pn-fill:nth-of-type(7) { --fill-delay: 1.71s; } .pn-draw .pn-fill:nth-of-type(9) { --fill-delay: 2.08s; } .pn-draw .pn-fill:nth-of-type(11) { --fill-delay: 2.45s; } .pn-draw .pn-fill:nth-of-type(13) { --fill-delay: 2.82s; } .pn-draw .pn-fill:nth-of-type(15) { --fill-delay: 3.19s; } @keyframes pn-trace { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } } @keyframes pn-fill-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pn-draw-host:hover .pn-fill, .pn-draw-host:focus-visible .pn-fill, .pn-draw-host:hover .pn-stroke, .pn-draw-host:focus-visible .pn-stroke { animation: none; } }