/* ══════════════════════════════════════════════════════════ LA CHAT — floating "Now Playing" music player Shared across all pages. Self-contained layout/typography via namespaced --lc-* tokens; borrows the site's theme-aware COLOR tokens (defined on every page) with safe fallbacks so it renders correctly even on sub-pages that omit the spacing/radius tokens. ══════════════════════════════════════════════════════════ */ /* Reserve bottom space so the fixed player never hides footer/credit. Mobile + sub-pages scroll on ; index's ≥1024px two-column card scrolls inside .content (body is overflow:hidden there), so reserve there too. */ html.lc-has-player body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 1024px) { html.lc-has-player .content { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); } /* Lift the hero's bottom-left "Memphis legacy artist" stamp clear of the player */ html.lc-has-player .stamp { margin-bottom: 88px; } } .lc-player { /* self-contained layout tokens (independent of per-page token sets) */ --lc-s2: 0.5rem; --lc-s3: 0.75rem; --lc-s4: 1rem; --lc-radius: 1rem; --lc-pill: 9999px; --lc-font-display: 'Cormorant Garamond', Georgia, serif; --lc-shadow: var(--shadow-md, 0 20px 48px rgba(0,0,0,.4)); /* theme colors borrowed from the page (with fallbacks for safety) */ --lc-surface: var(--color-surface-2, #211c17); --lc-surface-solid: var(--color-surface, #171411); --lc-border: var(--color-border, rgba(255,255,255,.10)); --lc-text: var(--color-text, #f3ede5); --lc-muted: var(--color-text-muted, #c8bcaf); --lc-faint: var(--color-text-faint, #b5a999); --lc-gold: var(--color-primary, #c79b4c); --lc-gold-hi: var(--color-primary-hover, #ddb564); --lc-on-gold: var(--color-text-inverse, #171411); position: fixed; left: max(var(--lc-s4), env(safe-area-inset-left, 0px)); bottom: calc(var(--lc-s4) + env(safe-area-inset-bottom, 0px)); z-index: 9990; /* below the one-time splash (9999), above content */ width: min(360px, calc(100vw - 2 * var(--lc-s4))); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--lc-s3); padding: var(--lc-s3); border: 1px solid var(--lc-border); border-radius: var(--lc-radius); background: color-mix(in srgb, var(--lc-surface) 86%, transparent); box-shadow: var(--lc-shadow); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); color: var(--lc-text); transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease; animation: lc-player-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Opaque fallback where backdrop-filter is unsupported */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lc-player { background: var(--lc-surface); } } @keyframes lc-player-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .lc-player.is-hidden { opacity: 0; transform: translateY(140%); pointer-events: none; } /* ── Vinyl play / pause button ── */ .lc-disc { position: relative; width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--lc-pill); border: none; cursor: pointer; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, var(--lc-surface-solid) 0 18%, transparent 19%), conic-gradient(from 0deg, var(--lc-gold), var(--lc-gold-hi), var(--lc-gold)); box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.12); transition: transform 0.2s ease; } .lc-disc::after { /* spindle hole */ content: ""; position: absolute; width: 6px; height: 6px; border-radius: var(--lc-pill); background: var(--lc-gold); box-shadow: 0 0 0 2px var(--lc-surface-solid); } .lc-disc:hover { transform: scale(1.05); } .lc-disc:active { transform: scale(0.95); } .lc-disc .lc-disc-icon { position: relative; z-index: 2; width: 20px; height: 20px; color: var(--lc-gold); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); } .lc-player.is-playing .lc-disc { animation: lc-spin 4s linear infinite; } @keyframes lc-spin { to { transform: rotate(360deg); } } /* ── Meta + scrubber column ── */ .lc-meta { min-width: 0; display: grid; gap: 4px; } .lc-meta-top { display: flex; align-items: baseline; gap: var(--lc-s2); min-width: 0; } .lc-title { font-family: var(--lc-font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.1; color: var(--lc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lc-artist { font-size: 0.7rem; color: var(--lc-muted); white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; } /* animated equalizer — only visible while playing */ .lc-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: auto; opacity: 0; transition: opacity 0.25s ease; } .lc-player.is-playing .lc-eq { opacity: 1; } .lc-eq span { width: 3px; height: 100%; border-radius: 2px; background: var(--lc-gold); transform-origin: bottom; transform: scaleY(0.4); } .lc-player.is-playing .lc-eq span { animation: lc-eq 0.9s ease-in-out infinite; } .lc-eq span:nth-child(2) { animation-delay: 0.18s; } .lc-eq span:nth-child(3) { animation-delay: 0.36s; } .lc-eq span:nth-child(4) { animation-delay: 0.54s; } @keyframes lc-eq { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } .lc-scrub-row { display: flex; align-items: center; gap: var(--lc-s2); } /* --lc-muted (not --lc-faint) so the timecodes pass WCAG AA contrast in light theme too */ .lc-time { font-size: 0.7rem; color: var(--lc-muted); font-variant-numeric: tabular-nums; min-width: 2.6em; } .lc-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lc-time.lc-time-end { text-align: right; } /* range input — themed seek bar */ .lc-range { -webkit-appearance: none; appearance: none; flex: 1 1 auto; height: 4px; border-radius: var(--lc-pill); background: linear-gradient(to right, var(--lc-gold) var(--lc-progress, 0%), color-mix(in srgb, var(--lc-faint) 45%, transparent) var(--lc-progress, 0%)); cursor: pointer; margin: 0; } .lc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: var(--lc-pill); background: var(--lc-gold); border: 2px solid var(--lc-surface-solid); box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; } .lc-range::-moz-range-thumb { width: 13px; height: 13px; border-radius: var(--lc-pill); background: var(--lc-gold); border: 2px solid var(--lc-surface-solid); box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; } .lc-range::-moz-range-track { height: 4px; border-radius: var(--lc-pill); background: transparent; } /* ── Dismiss ── */ .lc-dismiss { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--lc-pill); border: 1px solid transparent; background: transparent; color: var(--lc-faint); cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .lc-dismiss:hover { color: var(--lc-text); background: color-mix(in srgb, var(--lc-faint) 18%, transparent); } .lc-dismiss svg { width: 16px; height: 16px; } /* a11y: visible focus on every control */ .lc-disc:focus-visible, .lc-range:focus-visible, .lc-dismiss:focus-visible { outline: 2px solid var(--lc-gold); outline-offset: 2px; } /* error / unavailable state */ .lc-player.is-error .lc-disc { opacity: 0.5; pointer-events: none; } @media (max-width: 380px) { .lc-player { gap: var(--lc-s2); padding: var(--lc-s2) var(--lc-s3); } .lc-artist { display: none; } } /* Comfortable touch targets on touch devices (WCAG 2.5.5 ≥ 44px) */ @media (hover: none) and (pointer: coarse) { .lc-dismiss { width: 44px; height: 44px; } .lc-range { height: 6px; } .lc-range::-webkit-slider-thumb { width: 16px; height: 16px; } .lc-range::-moz-range-thumb { width: 16px; height: 16px; } } @media (prefers-reduced-motion: reduce) { .lc-player { animation: none; } .lc-player.is-playing .lc-disc { animation: none; } .lc-player.is-playing .lc-eq span { animation: none; transform: scaleY(0.6); } .lc-player, .lc-disc, .lc-dismiss { transition: none; } }