/* ===================================================================== v17 "The Curated, full width" - the Apple Music LAYOUT (library sidebar, editorial Top Picks, playlist detail + song table, mood tiles, Replay) reskinned into the KeepCalm design system. NO custom color scheme: every color is a shared-engine --mus-* token (kc-music-engine.css maps them to the site's own tokens and flips them with the theme), so this page reads as keepcalm.org. This file owns layout, shapes and a few fills DERIVED from those tokens; it never introduces a hue of its own. CHROME (the reusable recipe for every Music version): the page is the STANDARD site page - body.watchtower-body, crisis ribbon, .wt-mini scroll header + .wt-mini__drawer, .wt-shell > .wt-masthead, .kc-footer - all copied from create-flow-options/21-refined and styled/wired by cdo-watchtower.css + cdo-watchtower.js (+ kc-i18n/kc-auth/kc-signup/ kc-resources). The music app lives in .am-app INSIDE .wt-shell, below the masthead; .am-app re-asserts Montserrat because .wt-shell body copy is serif. Theme = the site header toggle ([data-wt-batmode] -> html[data-mode="batman"]), which the engine tokens already follow; the old per-page theme button is gone. The engine now-playing bar stays fixed to the viewport bottom (z 60), riding above the footer. Z-INDEX MAP: site mini header 1100 < site drawer 1250 < music sidebar drawer scrim 1300 / panel 1310 (the music drawer must overlay the fixed mini header, like the site drawer does). Contrast (measured, WCAG): accent #2c5f4e on page #f7f4ee 6.7:1, on fill #ede7da 6.0:1, on hover fill #e4ddcf 5.5:1 · tile ink #26302b on tile bg #ede7da 11.1:1 · hero ink #fffdf9 on #2c5f4e 7.2:1, chip reverse 7.2:1. Dark: accent #8fd0b4 on page #161a18 9.9:1, on surface-2 (composited #293631) 7.1:1, on rule fill #2c342f 7.2:1 · tile ink #ece7dc on tile bg #1e2522 12.7:1 · hero ink #10140f on #8fd0b4 10.5:1, chip reverse 10.5:1. The engine's own pairs are documented in kc-music-engine.css; poster-art ink is fixed by the 6-color system; mood-tile ink is measured by the engine per gradient. ===================================================================== */ :root { --am-side-w: 260px; --am-sticky-top: 100px; /* clears the site's fixed .wt-mini scroll header (measured ~89-91px tall at 1000-1440px wide) + a little air */ /* fills derived from engine tokens: they flip with the theme on their own, so v17 needs no dark-mode token block at all */ --am-side-bg: var(--mus-surface); --am-fill: var(--mus-surface-2); --am-fill-hover: var(--mus-rule); --am-active: var(--mus-surface-2); } /* ---------- frame ---------- The page canvas (background, margins, skip link) belongs to the site chrome now: body.watchtower-body + .wt-shell paint it and flip it dark. v17 only scopes the music app. The engine bar / toasts / playlist drawer mount on , outside .am-app, so the font stays on body; .am-app re-asserts it against .wt-shell's serif body-copy rule. */ /* border-box for the music app AND the engine's body-mounted UI (bar, toast, playlist drawer), without leaking into the site chrome, which was authored without a global reset */ .am-app, .am-app *, [class^="mus-"], [class*=" mus-"], [class^="mus-"] *, [class*=" mus-"] * { box-sizing: border-box; } html { scroll-padding-top: 70px; } body { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .am-app { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--mus-ink); } .am-app a { color: inherit; } .am-main a:focus-visible, .am-main button:focus-visible, .am-side a:focus-visible, .am-side button:focus-visible, .am-topbar a:focus-visible, .am-topbar button:focus-visible { outline: 3px solid var(--mus-focus); outline-offset: 2px; border-radius: 6px; } /* ---------- layout: sidebar + main, in-flow below the site masthead ---------- */ .am-layout { display: flex; align-items: flex-start; } .am-side { position: sticky; top: var(--am-sticky-top); max-height: calc(100vh - var(--am-sticky-top)); width: var(--am-side-w); flex: 0 0 var(--am-side-w); background: var(--am-side-bg); border-right: 1px solid var(--mus-rule); display: flex; flex-direction: column; padding: 16px 12px 18px; overflow-y: auto; } html.kc-has-musicbar .am-side { max-height: calc(100vh - var(--am-sticky-top) - var(--mus-bar-h) - env(safe-area-inset-bottom, 0px)); } .am-crownglyph { display: inline-block; width: 20px; aspect-ratio: 1.246 / 1; background: currentColor; flex: 0 0 auto; -webkit-mask: url("/assets/logos/keepcalm-crown-white.svg?v=20260720") no-repeat center / contain; mask: url("/assets/logos/keepcalm-crown-white.svg?v=20260720") no-repeat center / contain; } .am-side__search { display: flex; align-items: center; gap: 8px; background: var(--mus-bg); border: 1px solid var(--mus-rule); border-radius: 8px; padding: 0 10px; min-height: 40px; margin: 4px 4px 8px; } .am-side__search:focus-within { outline: 3px solid var(--mus-focus); outline-offset: 1px; } .am-side__search svg { width: 15px; height: 15px; color: var(--mus-ink-quiet); flex: 0 0 auto; } .am-side__search input { font: inherit; font-size: 14px; color: var(--mus-ink); background: none; border: 0; outline: none; flex: 1 1 auto; min-width: 0; height: 38px; } .am-side__search input::placeholder { color: var(--mus-ink-quiet); } .am-side__nav { flex: 1 1 auto; display: flex; flex-direction: column; } .am-side__hd { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mus-ink-quiet); margin: 16px 10px 5px; } .am-side__nav a, .am-side__newpl { display: flex; align-items: center; gap: 10px; font: inherit; font-size: 14.5px; font-weight: 500; text-align: left; color: var(--mus-ink); text-decoration: none; padding: 8px 10px; border-radius: 8px; min-height: 40px; border: 0; background: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .am-side__nav a svg, .am-side__newpl svg { width: 18px; height: 18px; color: var(--mus-accent); flex: 0 0 auto; } .am-side__nav a:hover, .am-side__newpl:hover { background: var(--am-fill-hover); } .am-side__nav a[aria-current="page"] { background: var(--am-active); color: var(--mus-accent); font-weight: 600; } .am-side__newpl { color: var(--mus-ink-soft); } /* theme button gone: the SITE header's [data-wt-batmode] toggle owns the mode now (one switch for the whole page, chrome + music) */ .am-side__foot { display: flex; flex-direction: column; gap: 6px; padding: 14px 10px 0; } .am-side__foot a { font-size: 12.5px; color: var(--mus-ink-quiet); padding: 6px 0; } /* ---------- mobile top bar + drawer ---------- In-flow (not sticky) below the site masthead: the site's own mini header takes the viewport top on scroll, so the music bar must not fight it for the same edge. */ .am-topbar { display: none; border-bottom: 1px solid var(--mus-rule); align-items: center; gap: 6px; padding: 5px 0; min-height: 54px; } .am-topbar__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--mus-ink); border-radius: 10px; flex: 0 0 auto; text-decoration: none; } .am-topbar__btn svg { width: 22px; height: 22px; } .am-topbar__brand { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--mus-ink); text-decoration: none; min-height: 44px; } .am-topbar__brand .am-crownglyph { color: var(--mus-accent); } /* scrim above the site's fixed mini header (1100), under the panel (1310) */ .am-scrim { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, 0.45); border: 0; padding: 0; cursor: pointer; } /* ---------- main ---------- */ .am-main { flex: 1 1 auto; padding: 20px 0 48px 32px; min-width: 0; } .am-h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; } .am-h1:focus { outline: none; } /* the crown + "Music" home lockup (Kaʻo). The crown is a little TALLER than the cap height of the M and centred on the word, so it reads as one mark with equal air above and below. Uses the accent so it echoes the site crown. */ .am-lockup { display: inline-flex; align-items: flex-end; gap: 5px; margin-top: -10px; } .am-lockup__crown { width: auto; height: 1.18em; /* taller than the M's cap height */ /* the crown matches the WORD ink: near-black in light mode, light in dark mode (was the green accent). One solid lockup in both themes. */ align-self: center; color: var(--mus-ink); } .am-lockup__word { line-height: 1; color: var(--mus-ink); transform: translateY(-2px); } .am-status { color: var(--mus-ink-soft); } /* ---------- song detail page (Kaʻo) ---------- */ .am-song { display: flex; gap: 28px; align-items: flex-end; margin: 6px 0 28px; flex-wrap: wrap; } .am-song__art { width: 224px; height: 224px; flex: 0 0 auto; border-radius: var(--mus-radius-sm, 12px); overflow: hidden; box-shadow: var(--mus-shadow, 0 10px 30px rgba(38, 48, 43, 0.18)); } .am-song__art .mus-crownart { width: 100%; height: 100%; border-radius: 0; } .am-song__info { flex: 1 1 320px; min-width: 260px; } .am-song__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mus-ink-quiet, #5f6a60); margin: 0 0 6px; } .am-song__title { font-size: clamp(30px, 5vw, 52px); line-height: 1.03; margin: 0 0 12px; } .am-song__meta { color: var(--mus-ink-soft); font-size: 14px; margin: 0 0 18px; } .am-song__artist { color: inherit; font-weight: 700; text-decoration: none; } .am-song__artist:hover { text-decoration: underline; } .am-song__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .am-song__play { min-width: 128px; } .am-song__more { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--mus-ink-soft); cursor: pointer; transition: background 0.14s ease, color 0.14s ease; } .am-song__more:hover { background: color-mix(in srgb, var(--mus-ink) 9%, transparent); color: var(--mus-ink); } .am-song__more svg { width: 22px; height: 22px; } .am-song__lyricsec .am-lyrics { white-space: pre-wrap; line-height: 1.72; font-size: 16px; color: var(--mus-ink); max-width: 640px; } /* list rows: the name now links to the detail page; play lives on the art */ .am-row__art { position: relative; } .am-row__play { position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; opacity: 0; transform: scale(0.82); transition: transform 0.14s ease, opacity 0.14s ease; } .am-row:hover .am-row__play, .am-row__play:focus-visible { opacity: 1; transform: scale(1); } a.am-row__t { text-decoration: none; color: inherit; cursor: pointer; background: none; border: 0; text-align: left; } a.am-row__t:hover { text-decoration: underline; } /* card: title links to detail, "..." button top-right, whole card is clickable */ .mus-card--clickable { cursor: pointer; } a.mus-card__title { text-decoration: none; color: inherit; display: block; } a.mus-card__title:hover { text-decoration: underline; } .mus-card__more { position: absolute; top: 8px; right: 8px; z-index: 4; opacity: 0; transform: scale(0.82); transition: transform 0.16s ease, opacity 0.16s ease; } .mus-card:hover .mus-card__more, .mus-card__more:focus-visible { opacity: 1; transform: scale(1); } .am-card--clickable { cursor: pointer; } a.am-card__t { text-decoration: none; color: inherit; display: block; } a.am-card__t:hover { text-decoration: underline; } /* ---------- shelves + rails ---------- */ .am-shelf { margin: 28px 0 0; } .am-shelf__hd { display: flex; align-items: baseline; margin: 0 0 12px; border-top: 1px solid var(--mus-rule); padding-top: 18px; } .am-shelf__hd h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .am-shelf__hd h2 a { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 8px; } .am-shelf__hd h2 a:hover { text-decoration: none; color: var(--mus-accent); } /* Kaʻo: the "see all" arrows were lost. Give them Apple's prominence and space: a real circular target that fills with the accent on hover and nudges right, not a faint chevron crammed against the title. */ .am-shelf__hd .am-chev { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 17px; font-weight: 700; line-height: 1; color: var(--mus-ink-quiet); background: var(--mus-surface-2); transition: background 140ms ease, color 140ms ease, transform 140ms ease; } .am-shelf__hd h2 a:hover .am-chev { background: var(--mus-accent); color: var(--mus-accent-ink); transform: translateX(2px); } @media (prefers-reduced-motion: reduce) { .am-shelf__hd .am-chev { transition: background 140ms ease, color 140ms ease; } } .am-shelf__hd .am-hdbtn { margin-left: auto; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--mus-accent); background: none; border: 0; padding: 10px 2px; min-height: 44px; } .am-rail { display: grid; grid-auto-flow: column; gap: 18px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; } .am-rail > * { scroll-snap-align: start; } .am-rail--pick { grid-auto-columns: 420px; } .am-rail--sq { grid-auto-columns: 180px; } .am-rail--mood { grid-auto-columns: 236px; } .am-rail--replay { grid-auto-columns: 188px; } .am-rail--artist { grid-auto-columns: 132px; } .am-grid { display: grid; gap: 20px 18px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: 4px; } .am-grid--tile { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } /* ---------- engine tiles, v17 shapes ---------- ALL non-song art (Top Picks editorial cards, mixes, radio stations, browse categories, moods, Replay) is the engine's tile()/moodRail(): the 20% cropped-crown watermark, category tiles blending with the page (dark bg in dark mode, light in light) and the lively mood gradients. v17 only sets shapes and type sizes on top. */ .am-pick, .am-station { aspect-ratio: 8 / 5; } .am-pick .mus-tile__title { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; } .am-pick .mus-tile__sub { font-size: 13px; } .am-mix .mus-tile__title, .am-station .mus-tile__title { font-size: 19px; letter-spacing: -0.01em; } .am-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mus-ink-quiet); margin: 0 0 6px; } .am-tile__eyebrow { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.9; margin: 0 0 1px; } .am-replay { aspect-ratio: 3 / 4; } .am-replay .mus-tile__title { font-size: 40px; letter-spacing: -0.02em; } .am-replay .am-tile__eyebrow { font-size: 12px; } .am-replayart { align-items: center; justify-content: center; } .am-replayart .mus-tile__title { font-size: 44px; letter-spacing: -0.02em; } /* Hovering a card BUTTON (play or "...") must not tint the card background. Tiles therefore do NOT brighten on hover at all (overrides the engine's a.mus-tile:hover brightness): moving between the tile body and its buttons leaves the tile unchanged, so only the buttons react. Song cards never had a background hover filter; their loop-video overlay is the intended hover. */ .am-main a.mus-tile:hover, .am-main button.mus-tile:hover, .am-main .mus-tile--mood:hover { filter: none; } /* Kaʻo (2026-07-21): Apple Music hover. The WHOLE card dims a step while the hover buttons appear; the dim sits at z-index 1 (over art + crown, under the z2 text and z4 buttons) so labels and buttons stay bright. Applies on :hover and :focus-within so keyboard users get the same cue. */ .am-main .mus-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: rgba(0, 0, 0, 0); transition: background 0.16s ease; } .am-main a.mus-tile:hover::before, .am-main button.mus-tile:hover::before, .am-main .mus-tile:focus-within::before, .am-main .mus-tile--mood:hover::before { background: rgba(0, 0, 0, 0.18); } @media (prefers-reduced-motion: reduce) { .am-main .mus-tile::before { transition: none; } } /* Browse Categories genre tiles (Search page) have no play button, so their hover/focus affordance is a subtle lift + shadow (NOT the brightness tint removed above): consistent with the app and visible for keyboard focus too. */ .am-genre { transition: transform 0.16s ease, box-shadow 0.16s ease; } .am-genre:hover, .am-genre:focus-visible { transform: translateY(-3px) scale(1.01); box-shadow: var(--mus-shadow); } @media (prefers-reduced-motion: reduce) { .am-genre { transition: box-shadow 0.16s ease; } .am-genre:hover, .am-genre:focus-visible { transform: none; } } /* .am-badge - the corner "MUSIC" tag, parked until podcasts arrive (everything is music today; tags stay 7px rectangles). Restore together with badge() in v17.js. .am-badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border-radius: 7px; } .am-badge .am-crownglyph { width: 13px; color: #fff; } */ /* ---------- square song card ---------- */ .am-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .am-card__art { position: relative; } /* POSITION only: the look is .mus-playbtn--art in the shared engine CSS, so tuning the button tunes /music/ and every version at once. Do not re-add background/color here. */ .am-card__play { position: absolute; right: 8px; bottom: 8px; z-index: 4; width: 42px; height: 42px; opacity: 0; transform: scale(0.85); /* reveal by SCALING, never by fading: opacity is binary (1 while shown, 0 only in the fully-hidden resting state) and is NOT a transitioned property, so the disc is never semi-transparent mid-animation (no card art showing through it) */ transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease; } .am-card:hover .am-card__play, .am-card:focus-within .am-card__play, .am-card.is-playing .am-card__play { opacity: 1; transform: none; } /* keep BOTH buttons revealed while this card's "..." share menu is open (the engine adds .is-menu-open to the card art on open, removes it on close) */ .am-card__art.is-menu-open .am-card__play, .am-card__art.is-menu-open .am-card__more { opacity: 1; transform: none; } @media (hover: none) { .am-card__play { opacity: 1; transform: none; } } .am-card__t { font-size: 14px; font-weight: 600; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .am-card.is-current .am-card__t { color: var(--mus-accent); } .am-card__c { font-size: 12.5px; color: var(--mus-ink-quiet); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; padding: 2px 0; } .am-card__c:hover { color: var(--mus-ink); text-decoration: underline; } /* ---------- creator circle card ---------- */ .am-artist { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; text-align: center; padding: 6px; border-radius: 12px; } .am-artist:hover { background: var(--mus-surface-2); } .am-artist .mus-crownart { width: 104px; } .am-artist strong { font-size: 13.5px; font-weight: 600; } .am-artist span { font-size: 12px; color: var(--mus-ink-quiet); } /* ---------- radio hero ---------- */ .am-hero { border-radius: 16px; padding: 26px 28px; margin: 18px 0 6px; background: linear-gradient(135deg, var(--mus-accent), var(--mus-accent-hover)); color: var(--mus-accent-ink); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .am-live { display: inline-flex; align-items: center; gap: 6px; background: var(--mus-accent-ink); color: var(--mus-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; padding: 4px 9px; border-radius: 7px; text-transform: uppercase; /* tag = 7px rectangle */ } .am-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .am-hero h2 { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -0.01em; } .am-hero p { margin: 0 0 6px; font-size: 14px; color: inherit; max-width: 520px; } .am-hero .am-btn { background: var(--mus-accent-ink); color: var(--mus-accent); } .am-hero .am-btn:hover { background: var(--mus-accent-ink); filter: brightness(1.06); } /* the site focus green vanishes on the green hero: use the hero's ink */ .am-hero .am-btn:focus-visible { outline-color: var(--mus-accent-ink); } /* ---------- twin Play / Shuffle buttons + small actions ---------- The SITE standard button (engine accent tokens, pill), not a fill. */ .am-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; min-height: 48px; min-width: 136px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--mus-accent); color: var(--mus-accent-ink); } .am-btn:hover { background: var(--mus-accent-hover); } .am-btn svg { width: 17px; height: 17px; flex: 0 0 auto; } .am-btn--sm { min-width: 0; min-height: 44px; padding: 0 16px; font-size: 13.5px; background: none; color: var(--mus-ink-soft); border: 1px solid var(--mus-rule); } .am-btn--sm:hover { background: var(--mus-surface-2); color: var(--mus-ink); } .am-addbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%; cursor: pointer; background: var(--am-fill); color: var(--mus-accent); } .am-addbtn:hover { background: var(--am-fill-hover); } .am-addbtn svg { width: 18px; height: 18px; } /* ---------- detail header ---------- */ .am-detail { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 30px; margin: 18px 0 8px; align-items: start; } .am-detail__artwrap { position: relative; border-radius: var(--mus-radius-sm); box-shadow: var(--mus-shadow); } .am-detail__artwrap .mus-crownart, .am-detail__artwrap .mus-tile { border-radius: var(--mus-radius-sm); } .am-mosaic { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1 / 1; border-radius: var(--mus-radius-sm); overflow: hidden; } .am-mosaic .mus-crownart { border-radius: 0; } .am-detail__title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 2px; line-height: 1.12; } .am-detail__curator { font-size: 15px; font-weight: 600; color: var(--mus-accent); margin: 0 0 10px; } .am-detail__curator a { color: inherit; text-decoration: none; } .am-detail__curator a:hover { text-decoration: underline; } .am-desc { position: relative; max-width: 640px; } .am-desc p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--mus-ink-soft); } .am-desc.is-clamped p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .am-more { font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; cursor: pointer; color: var(--mus-accent); background: none; border: 0; padding: 12px 10px 12px 0; margin: 0; } .am-detail__meta { font-size: 13px; color: var(--mus-ink-quiet); margin: 8px 0 14px; } .am-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; } .am-creator { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin: 18px 0 10px; } .am-creator .mus-crownart { width: 168px; } /* ---------- song table (Song / Artist / Album / Time) ---------- */ .am-rows { margin: 18px 0 0; } .am-rows__hd { display: grid; grid-template-columns: 44px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) 56px 96px; gap: 12px; align-items: center; padding: 0 8px 8px; font-size: 12px; font-weight: 600; color: var(--mus-ink-quiet); border-bottom: 1px solid var(--mus-rule); } .am-rows__hd span:nth-child(5) { text-align: right; } .am-rowlist { list-style: none; margin: 0; padding: 0; } .am-row { display: grid; grid-template-columns: 44px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) 56px 96px; grid-template-areas: "art t a al time acts"; gap: 12px; align-items: center; padding: 5px 8px; min-height: 56px; border-bottom: 1px solid var(--mus-rule); border-radius: 6px; } .am-row:hover, .am-row:focus-within { background: var(--mus-surface-2); } .am-row__art { grid-area: art; position: relative; width: 44px; } .am-row__t { grid-area: t; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--mus-ink); background: none; border: 0; cursor: pointer; text-align: left; padding: 10px 0; min-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .am-row.is-current .am-row__t { color: var(--mus-accent); } .am-row__a, .am-row__al { font-size: 13.5px; color: var(--mus-ink-quiet); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 8px 0; } .am-row__a { grid-area: a; } .am-row__al { grid-area: al; } .am-row__a:hover, .am-row__al:hover { color: var(--mus-ink); text-decoration: underline; } .am-row__time { grid-area: time; font-size: 13px; color: var(--mus-ink-quiet); font-variant-numeric: tabular-nums; text-align: right; } .am-row__acts { grid-area: acts; display: inline-flex; justify-content: flex-end; gap: 4px; opacity: 0; } .am-row:hover .am-row__acts, .am-row:focus-within .am-row__acts { opacity: 1; } @media (hover: none) { .am-row__acts { opacity: 1; } } .am-row__acts .mus-iconbtn { border-color: transparent; background: none; } .am-row__acts .mus-iconbtn:hover { border-color: var(--mus-rule); background: var(--mus-surface); } /* suggested songs rows: thumb + title/artist + add */ .am-srow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 8px; min-height: 56px; border-bottom: 1px solid var(--mus-rule); } .am-srow > .am-row__art { grid-area: auto; } /* srow has no named areas */ .am-srow__meta { display: flex; flex-direction: column; min-width: 0; } .am-srow__meta .am-row__t { min-height: 0; padding: 2px 0; } .am-srow__meta a { align-self: flex-start; padding: 2px 0; } /* ---------- search ---------- */ .am-search { display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 12px 0 6px; } .am-search input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; color: var(--mus-ink); background: var(--mus-surface-2); border: 1px solid transparent; border-radius: 10px; padding: 11px 16px; min-height: 48px; } .am-search input:focus-visible { outline: 3px solid var(--mus-focus); outline-offset: 1px; } .am-search input::placeholder { color: var(--mus-ink-quiet); } .am-topresult { display: flex; align-items: center; gap: 18px; max-width: 620px; background: var(--mus-surface-2); border-radius: 14px; padding: 16px; } .am-topresult .am-card__art { width: 116px; flex: 0 0 auto; } .am-topresult__meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .am-topresult__meta strong { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; } .am-topresult__meta a { font-size: 13.5px; color: var(--mus-ink-quiet); text-decoration: none; align-self: flex-start; padding: 2px 0; } .am-topresult__meta a:hover { text-decoration: underline; color: var(--mus-ink); } .am-topresult .mus-playbtn { margin-left: auto; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .am-topbar { display: flex; } .am-layout { display: block; } /* off-canvas drawer again: fixed, full height, OVER the site mini header (1310 > 1100), exactly like the site's own drawer overlays it */ .am-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 1310; max-height: none; transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: none; width: min(300px, 86vw); } html.kc-has-musicbar .am-side { max-height: none; padding-bottom: calc(var(--mus-bar-h) + env(safe-area-inset-bottom, 0px) + 22px); } .am-side.is-open { transform: none; box-shadow: var(--mus-shadow); } .am-main { padding: 18px 0 40px; } .am-side__nav a, .am-side__newpl { min-height: 44px; } } @media (min-width: 901px) { .am-scrim { display: none; } } @media (max-width: 720px) { .am-h1 { font-size: 27px; } .am-rail--pick { grid-auto-columns: min(84vw, 340px); } .am-rail--sq { grid-auto-columns: 150px; } .am-rail--mood { grid-auto-columns: 200px; } .am-rail--replay { grid-auto-columns: 160px; } .am-pick .mus-tile__title { font-size: 20px; } .am-detail { grid-template-columns: 1fr; gap: 18px; } .am-detail__artwrap, .am-mosaic { width: min(62vw, 250px); margin: 0 auto; } .am-detail__info { text-align: center; } .am-desc { margin: 0 auto; } .am-detail__actions { justify-content: center; } .am-detail__actions .am-btn { flex: 1 1 40%; } .am-creator { justify-content: center; text-align: center; } .am-rows__hd { display: none; } .am-row { grid-template-columns: 44px minmax(0, 1fr) 44px 96px; grid-template-areas: "art t time acts" "art a time acts"; row-gap: 0; column-gap: 10px; } .am-row__al { display: none; } .am-row__t { padding: 4px 0 0; min-height: 0; } .am-row__a { padding: 0 0 4px; justify-self: start; max-width: 100%; } /* full-row 44px+ play target: the title button's hit area covers the row; artist link, actions and the poster overlay stay clickable above it */ .am-row, .am-srow { position: relative; } .am-row__t::after { content: ""; position: absolute; inset: 0; } .am-row__a, .am-row__acts, .am-addbtn { position: relative; z-index: 2; } .am-row__acts .mus-iconbtn { width: 44px; height: 44px; } .am-card__play, .am-card__more { width: 44px; height: 44px; } .am-topresult { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .am-side, .am-card__play { transition: none; } .am-main .mus-tile--mood:hover, .am-hero .am-btn:hover { filter: none; } } /* ================= v17: full width between the site header and footer ======= v6 sits inside .wt-shell, which caps every page at 1280px. Here the shell runs edge to edge and the masthead re-constrains itself, so the site header still reads exactly as it does on every other page while the music app owns the whole viewport: library rail hard left, everything else fills the rest. Only this page carries .wt-shell--musicwide, so no other page is affected. The .watchtower-body prefix raises specificity above cdo-watchtower's .wt-shell { max-width: 1280px } so the content is guaranteed full-width. */ .watchtower-body .wt-shell--musicwide { max-width: none; padding-left: 0; padding-right: 0; } .wt-shell--musicwide > .wt-masthead { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } @media (min-width: 901px) { /* the rail sits flush to the left edge; main keeps a right gutter so text never runs into the viewport edge */ .am-main { padding-right: clamp(20px, 2.5vw, 44px); } } @media (max-width: 900px) { /* the rail is off-canvas here, and the shell gutter is gone, so the app restores its own edge spacing */ .am-app { padding-left: 16px; padding-right: 16px; } } /* ---------- square tiles: push the crown right ---------- The crown is sized off the tile HEIGHT (130%), so on a square it is about 1.6x the tile's width and lands centred, while on the 8/5 picks/stations it is about 1.0x and sits right. Same rule, different framing. Offsetting the squares further right lines their crown up with the wide cards. */ .am-mix .mus-tile__crown { right: -88%; } /* Fix: every tilePlay tile carries the "..." share button at the TOP-RIGHT, so move the crown watermark to the LEFT (out from under the button). Two forms: the big cropped crown on colour tiles (Top Picks / Radio stations / mixes) and the small crown on the mood/replay gradients. Placed after .am-mix so it wins the crown's horizontal position. */ /* Kaʻo: big colour tiles (Top Picks / Radio / mixes) keep the crown on the RIGHT (reverted the left-shift; the hover "..." may lightly overlap the faint watermark, which is fine, and it matches the wide cards). The Mood + Replay gradient tiles (.mus-tile--mood) STAY centred, so keep their override. */ .am-tileplay .mus-tile--mood .mus-tile__crown { right: auto; left: 9%; } /* Play + "..." share buttons on Top Picks / Made for You / Radio / Mood tiles (Kaʻo). The tile is a whole-tile link, so BOTH buttons are sibling overlays in this positioned wrap. align-self:start keeps the wrap hugging the tile even when the rail/grid stretches its cells to equal height, so the buttons sit INSIDE the tile (the play button used to hang below the bottom-right corner when a taller sibling stretched the cell). Same reveal + on-art look as the song-card buttons; both always visible on touch. Play sits at the SAME 8px inset from the bottom/right edges as the song cards; "..." is its matched pair at the top-right. */ .am-tileplay { position: relative; display: block; align-self: start; } .am-tileplay__btn, .am-tileplay__more { position: absolute; right: 8px; z-index: 4; width: 46px; height: 46px; opacity: 0; transform: scale(0.85); /* reveal by SCALING, never by fading (see .am-card__play): opacity stays binary so the disc is never see-through mid-animation */ transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease; } .am-tileplay__btn { bottom: 8px; } .am-tileplay__more { top: 8px; } .am-tileplay:hover .am-tileplay__btn, .am-tileplay:focus-within .am-tileplay__btn, .am-tileplay:hover .am-tileplay__more, .am-tileplay:focus-within .am-tileplay__more, .am-tileplay.is-menu-open .am-tileplay__btn, .am-tileplay.is-menu-open .am-tileplay__more { opacity: 1; transform: none; } .am-tileplay__btn:focus-visible, .am-tileplay__more:focus-visible { opacity: 1; } @media (hover: none) { .am-tileplay__btn, .am-tileplay__more { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .am-tileplay__btn, .am-tileplay__more { transition: background 0.16s ease, color 0.16s ease; } } /* the "..." share button on song cards (Kaʻo). Top-right of the art, revealed with the play button, so the card stays calm at rest. POSITION only: the look is .mus-playbtn--art in the shared engine CSS, the SAME as .am-card__play, so "..." and play are a matched pair (identical size, shape, resting translucency and green-on-hover). Do not re-add a background/color/blur here. */ .am-card__more { position: absolute; top: 8px; right: 8px; z-index: 4; width: 42px; height: 42px; opacity: 0; transform: scale(0.85); /* reveal by SCALING, never by fading (see .am-card__play): opacity stays binary so the disc is never see-through mid-animation */ transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease; } .am-card:hover .am-card__more, .am-card:focus-within .am-card__more { opacity: 1; transform: none; } .am-card__more:focus-visible { opacity: 1; } @media (hover: none) { .am-card__more { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .am-card__more { transition: background 0.16s ease, color 0.16s ease; } }