/* Bear Music Player — app shell layout. Self-contained theme tokens (the player's --player-* vars are scoped to the player container, so the shell defines its own). */ body.bmp-shell-active { /* Unified "frosted glass" music-app palette. Panels and the main pane are translucent dark surfaces laid over the active theme's background, so the theme still shows through (softly, blurred) but text stays legible on any theme — light or dark. One palette, no OS-scheme branch, so the shell reads as one cohesive app instead of light-panels-around-a-dark-hole. */ --bmp-text: #f2f4f8; --bmp-secondary: rgba(242, 244, 248, 0.6); --bmp-faint: rgba(242, 244, 248, 0.4); --bmp-border: rgba(255, 255, 255, 0.10); --bmp-border-strong: rgba(255, 255, 255, 0.18); --bmp-accent: #6ea8fe; --bmp-hover: #9cc2ff; --bmp-panel: rgba(20, 23, 31, 0.72); --bmp-raise: rgba(255, 255, 255, 0.06); --bmp-raise-strong: rgba(255, 255, 255, 0.12); --bmp-scrim: rgba(11, 13, 19, 0.5); --bmp-top-h: 60px; /* Height of the WordPress admin bar, when it's showing, so the fixed shell chrome sits below it instead of under it. 0 for logged-out visitors. */ --bmp-admin-bar: 0px; /* Horizontal insets of the main pane (and visualizer). Collapsing a side panel sets the corresponding value to 0 so the main area grows. */ --bmp-main-left: 264px; --bmp-main-right: 344px; margin: 0; color: var(--bmp-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* WordPress adds `admin-bar` to when the fixed admin bar is showing. Push the shell's fixed top bar and panels down by its height so nothing overlaps. The admin bar is 32px, or 46px on the mobile (<=782px) layout. */ body.bmp-shell-active.admin-bar { --bmp-admin-bar: 32px; } @media screen and (max-width: 782px) { body.bmp-shell-active.admin-bar { --bmp-admin-bar: 46px; } } /* Unify the player bar AND the Up Next panel with the shell. Their children read the --player-* vars off #bmp-player-container, so re-pointing them here re-tints both to match the frosted-glass panels (instead of a white slab). The queue panel is a sibling of the bar, so it needs the re-point too. */ body.bmp-shell-active #bmp-player-container, body.bmp-shell-active #bmp-queue-panel { --player-bg: var(--bmp-panel); --player-text: var(--bmp-text); --player-secondary: var(--bmp-secondary); --player-border: var(--bmp-border); --player-accent: var(--bmp-accent); --player-hover: var(--bmp-hover); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); } body.bmp-shell-active #bmp-queue-panel { color: var(--bmp-text); } /* Scoped CTA button — the player's .bmp-button relies on --player-accent, which is undefined out here in the shell, so style play-all/details ourselves. */ body.bmp-shell-active .bmp-shell-main .bmp-button { background: var(--bmp-accent); color: #0b0d13; font-weight: 700; border-radius: 999px; height: 42px; padding: 0 22px; box-shadow: 0 8px 22px -8px var(--bmp-accent); transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; } body.bmp-shell-active .bmp-shell-main .bmp-button:hover { background: var(--bmp-hover); color: #0b0d13; transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--bmp-accent); } /* Consistent keyboard focus ring across the shell. */ body.bmp-shell-active a:focus-visible, body.bmp-shell-active button:focus-visible, body.bmp-shell-active summary:focus-visible, body.bmp-shell-active input:focus-visible { outline: 2px solid var(--bmp-accent); outline-offset: 2px; border-radius: 8px; } /* Slim, themed scrollbars on the panels (WebKit/Blink). */ body.bmp-shell-active .bmp-shell-nav::-webkit-scrollbar, body.bmp-shell-active .bmp-shell-detail::-webkit-scrollbar, body.bmp-shell-active .bmp-shell-main::-webkit-scrollbar { width: 10px; } body.bmp-shell-active .bmp-shell-nav::-webkit-scrollbar-thumb, body.bmp-shell-active .bmp-shell-detail::-webkit-scrollbar-thumb, body.bmp-shell-active .bmp-shell-main::-webkit-scrollbar-thumb { background: var(--bmp-raise-strong); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } body.bmp-shell-active .bmp-shell-nav:hover::-webkit-scrollbar-thumb, body.bmp-shell-active .bmp-shell-detail:hover::-webkit-scrollbar-thumb, body.bmp-shell-active .bmp-shell-main:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); background-clip: padding-box; } /* Top bar */ .bmp-shell-top { position: fixed; top: var(--bmp-admin-bar); left: 0; right: 0; height: var(--bmp-top-h); z-index: 996; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--bmp-panel); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--bmp-border); } /* Brand cluster: logo (if any) + site title, side by side. */ .bmp-shell-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; } .bmp-shell-home { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; color: var(--bmp-text); text-decoration: none; white-space: nowrap; } /* Site logo (WordPress custom-logo / site-logo block) in the top bar. */ .bmp-shell-logo { display: flex; align-items: center; flex: 0 0 auto; } .bmp-shell-logo .custom-logo-link, .bmp-shell-logo a { display: flex; align-items: center; line-height: 0; } .bmp-shell-logo img, .bmp-shell-logo .custom-logo { width: auto; height: 36px; max-height: 36px; object-fit: contain; } /* Site's primary navigation (core Navigation block) in the top bar. It renders with theme/core classes, so scope typography + color to our frosted bar. */ .bmp-shell-headernav { display: flex; align-items: center; min-width: 0; overflow: hidden; } .bmp-shell-headernav .wp-block-navigation { font-size: 14px; --wp--preset--color--contrast: var(--bmp-text); } .bmp-shell-headernav a, .bmp-shell-headernav .wp-block-navigation-item__label { color: var(--bmp-text); text-decoration: none; } .bmp-shell-headernav .wp-block-navigation__container { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; } .bmp-shell-headernav li { list-style: none; margin: 0; } .bmp-shell-headernav .wp-block-navigation-item__content { padding: 6px 10px; border-radius: 8px; white-space: nowrap; transition: background 0.15s ease; } .bmp-shell-headernav .wp-block-navigation-item__content:hover { background: var(--bmp-raise); color: var(--bmp-text); } /* Submenus / search popovers get the dark-glass surface too. */ .bmp-shell-headernav .wp-block-navigation__submenu-container { background: var(--bmp-panel); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); border: 1px solid var(--bmp-border); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); } /* On smaller widths the shell already exposes its own search + left nav, so drop the theme nav to keep the bar from overflowing. */ @media (max-width: 900px) { .bmp-shell-headernav { display: none; } } .bmp-top-spacer { flex: 1 1 auto; } /* Native (?s=) search box in the top bar. */ .bmp-search { flex: 0 1 320px; margin: 0 4px; min-width: 0; } .bmp-search-input { width: 100%; height: 38px; padding: 0 16px; font-size: 14px; color: var(--bmp-text); background: var(--bmp-raise); border: 1px solid var(--bmp-border); border-radius: 19px; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .bmp-search-input:hover { background: var(--bmp-raise-strong); } .bmp-search-input::placeholder { color: var(--bmp-secondary); } .bmp-search-input:focus { border-color: var(--bmp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bmp-accent) 25%, transparent); } @media (max-width: 600px) { .bmp-search { flex-basis: 160px; } } .bmp-shell-toggle { display: inline-flex; align-items: center; background: transparent; border: none; color: var(--bmp-text); font-size: 20px; line-height: 1; cursor: pointer; padding: 6px; border-radius: 6px; } .bmp-shell-toggle:hover { background: var(--bmp-raise); } /* Panels */ .bmp-shell-nav, .bmp-shell-detail, .bmp-shell-main { position: fixed; top: calc(var(--bmp-top-h) + var(--bmp-admin-bar)); bottom: var(--bmp-player-h); overflow-y: auto; } .bmp-shell-nav { left: 0; width: var(--bmp-main-left); padding: 16px 12px; border-right: 1px solid var(--bmp-border); background: var(--bmp-panel); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); } .bmp-shell-detail { right: 0; width: var(--bmp-main-right); padding: 24px; border-left: 1px solid var(--bmp-border); background: var(--bmp-panel); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); } /* The main pane sits over the theme background. A soft scrim + blur keeps the theme visible (dimmed, frosted) while guaranteeing body text stays legible. */ .bmp-shell-main { left: var(--bmp-main-left); right: var(--bmp-main-right); padding: 30px 34px 40px; background: var(--bmp-scrim); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); } /* In the shell, keep the visualizer within the main pane so it never slides under the side panels. (Outside the shell it stays full width.) */ body.bmp-shell-active #bmp-visualizer-container { left: var(--bmp-main-left); right: var(--bmp-main-right); /* Match the shell's frosted glass. */ background: var(--bmp-scrim); border-top-color: var(--bmp-border); } /* Navigation tree (native

) */ .bmp-tree { font-size: 14px; } .bmp-tree-link { display: block; padding: 6px 10px; border-radius: 6px; color: var(--bmp-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s ease; } .bmp-tree-link:hover { background: var(--bmp-raise); color: var(--bmp-text); } .bmp-tree-summary { cursor: pointer; padding: 6px 10px; border-radius: 6px; font-weight: 600; list-style: none; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bmp-tree-summary::-webkit-details-marker { display: none; } .bmp-tree-summary::before { content: "\25B8"; /* ▸ */ display: inline-block; width: 1em; color: var(--bmp-secondary); transition: transform 0.15s ease; } details[open] > .bmp-tree-summary::before { transform: rotate(90deg); } .bmp-tree-summary:hover { background: var(--bmp-raise); } .bmp-tree-children { padding-left: 14px; } .bmp-tree-album > .bmp-tree-summary { font-weight: 500; } .bmp-tree-track { color: var(--bmp-secondary); } .bmp-tree-track:hover { color: var(--bmp-text); } .bmp-tree-open { font-style: italic; color: var(--bmp-accent); } /* Center: grid of cards */ .bmp-main-title { margin: 0 0 22px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .bmp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; } .bmp-card { display: flex; flex-direction: column; gap: 8px; } .bmp-card-art-wrap { position: relative; border-radius: 10px; overflow: hidden; background: var(--bmp-border); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .bmp-card-art { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.3s ease; } /* Fade artwork in as it loads (JS adds .bmp-fade only to not-yet-loaded imgs, so if JS is absent the art stays visible). The wrap's tint shows underneath until the image arrives. */ .bmp-card-art.bmp-fade { opacity: 0; transition: opacity 0.35s ease, transform 0.3s ease; } .bmp-card-art.bmp-fade.is-loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { .bmp-card-art.bmp-fade { transition: none; } } .bmp-card-art-empty { aspect-ratio: 1 / 1; } .bmp-card:hover .bmp-card-art { transform: scale(1.06); } /* Play overlay on hover (grow-on-hover + play icon) */ .bmp-card .bmp-image-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .bmp-card:hover .bmp-image-overlay { opacity: 1; pointer-events: auto; } .bmp-card .bmp-overlay-play { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; } .bmp-card .bmp-overlay-play:hover { background: var(--bmp-accent); transform: scale(1.08); } @media (hover: none) { .bmp-card .bmp-image-overlay { opacity: 1; pointer-events: auto; background: rgba(0, 0, 0, 0.25); } } .bmp-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bmp-card-title { font-weight: 600; font-size: 14px; color: var(--bmp-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bmp-card-title:hover { color: var(--bmp-accent); } .bmp-card-artist { font-size: 12px; color: var(--bmp-secondary); } .bmp-empty { color: var(--bmp-secondary); } /* ---- Loading states: a calm spinner (no shimmer) ---------------------- * * A quiet rotating ring in the accent colour. Used for lazy-load ("loading * more") and while an in-frame navigation (search / category / album) fetches; * the incoming content then fades in via the card entrance animation. */ @keyframes bmp-spin { to { transform: rotate(360deg); } } .bmp-loader { display: inline-block; width: 26px; height: 26px; border: 3px solid var(--bmp-border); border-top-color: var(--bmp-accent); border-radius: 50%; animation: bmp-spin 0.7s linear infinite; } .bmp-grid-loader { display: flex; justify-content: center; padding: 26px 0 10px; } /* In-frame navigation: gently fade the outgoing content and show a centred spinner until the new content swaps in. Turbo toggles [busy]/[aria-busy]. */ turbo-frame#bmp-main { position: relative; display: block; } turbo-frame#bmp-main[busy] > *, turbo-frame#bmp-main[aria-busy="true"] > * { opacity: 0.45; transition: opacity 0.2s ease; } turbo-frame#bmp-main[busy]::after, turbo-frame#bmp-main[aria-busy="true"]::after { content: ""; position: absolute; top: 44px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border: 3px solid var(--bmp-border); border-top-color: var(--bmp-accent); border-radius: 50%; animation: bmp-spin 0.7s linear infinite; z-index: 5; } /* Turbo Drive's full-page progress bar, in the app's accent colour. */ .turbo-progress-bar { background-color: var(--bmp-accent); } @media (prefers-reduced-motion: reduce) { .bmp-loader, .bmp-grid-loader::before, turbo-frame#bmp-main[busy]::after, turbo-frame#bmp-main[aria-busy="true"]::after { animation-duration: 0s; } } .bmp-post-content { max-width: 760px; line-height: 1.7; } /* === Song page (article-first masthead) ============================== */ .bmp-song-masthead { display: flex; align-items: center; gap: 22px; padding: 4px 0 26px; margin-bottom: 28px; border-bottom: 1px solid var(--bmp-border); } .bmp-song-cover { flex: 0 0 auto; width: 132px; height: 132px; border-radius: 14px; background: var(--bmp-raise) center/cover no-repeat; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); outline: 1px solid var(--bmp-border); outline-offset: -1px; } .bmp-song-headings { min-width: 0; } .bmp-song-kind { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bmp-secondary); } .bmp-song-album-link { color: var(--bmp-secondary); text-decoration: none; } .bmp-song-album-link:hover { color: var(--bmp-accent); } .bmp-song-title { margin: 6px 0 4px; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.02em; } .bmp-song-sub { margin: 0 0 16px; color: var(--bmp-secondary); font-size: 14px; } .bmp-song-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* State-aware Play: a launch button, not a transport. Turns into a "Now playing" indicator (with an equalizer) when this is the live track. */ .bmp-song-play { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 22px; border: none; border-radius: 999px; background: var(--bmp-accent); color: #0b0d13; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 8px 22px -8px var(--bmp-accent); transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; } .bmp-song-play:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--bmp-accent); } .bmp-song-play-icon { display: inline-flex; } .bmp-song-play-label-on, .bmp-song-play-eq { display: none; } /* When this song is the loaded track, show "Now playing" + equalizer. */ .bmp-song-play.bmp-currently-playing .bmp-song-play-icon, .bmp-song-play.bmp-currently-playing .bmp-song-play-label { display: none; } .bmp-song-play.bmp-currently-playing .bmp-song-play-label-on { display: inline; } .bmp-song-play.bmp-currently-playing .bmp-song-play-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; } .bmp-song-play-eq i { width: 3px; height: 100%; background: #0b0d13; border-radius: 1px; transform: scaleY(0.4); } /* Bars only dance while audio is actually playing. */ body.bmp-is-playing .bmp-song-play.bmp-currently-playing .bmp-song-play-eq i { animation: bmp-song-eq 0.9s ease-in-out infinite; } .bmp-song-play-eq i:nth-child(1) { animation-delay: -0.4s; } .bmp-song-play-eq i:nth-child(2) { animation-delay: -0.2s; } .bmp-song-play-eq i:nth-child(3) { animation-delay: 0s; } @keyframes bmp-song-eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } body.bmp-shell-active .bmp-shell-main .bmp-button.bmp-song-ghost { background: var(--bmp-raise); color: var(--bmp-text); border: 1px solid var(--bmp-border); box-shadow: none; text-decoration: none; font-weight: 600; } body.bmp-shell-active .bmp-shell-main .bmp-button.bmp-song-ghost:hover { background: var(--bmp-raise-strong); color: var(--bmp-text); transform: none; } /* Admin-only "edit" link, kept quiet next to the primary actions. */ .bmp-song-edit { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; font-size: 13px; color: var(--bmp-secondary); text-decoration: none; } .bmp-song-edit:hover { color: var(--bmp-accent); } .bmp-song-body { max-width: 720px; } @media (max-width: 600px) { .bmp-song-masthead { flex-direction: column; align-items: flex-start; gap: 16px; } .bmp-song-cover { width: 108px; height: 108px; } } @media (prefers-reduced-motion: reduce) { .bmp-song-play-eq i { animation: none; } } /* Album hero */ .bmp-album-hero { display: flex; gap: 24px; align-items: flex-end; margin-bottom: 28px; } .bmp-album-cover { flex: 0 0 auto; width: 210px; height: 210px; border-radius: 16px; background: var(--bmp-raise) center/cover no-repeat; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); outline: 1px solid var(--bmp-border); outline-offset: -1px; } .bmp-album-headings { min-width: 0; } .bmp-album-kind { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bmp-secondary); } .bmp-album-name { margin: 6px 0 8px; font-size: clamp(28px, 5vw, 48px); line-height: 1.05; letter-spacing: -0.02em; } .bmp-album-sub { margin: 0 0 16px; color: var(--bmp-secondary); font-size: 14px; } /* Track rows (albums & playlists) */ .bmp-track-rows { list-style: none; margin: 0; padding: 0; max-width: 920px; } .bmp-track-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 0.7fr) 56px; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 8px; transition: background 0.15s ease; } /* Quiet separator between discs of a multi-disc album: extra space and a hairline that fades to the right — no "Disc N" label, just a sense of a new group. Single-disc albums never render this. */ .bmp-disc-sep { list-style: none; height: 1px; margin: 14px 44px 14px 10px; background: linear-gradient(90deg, var(--bmp-border), transparent); } .bmp-track-row:hover { background: var(--bmp-raise); } /* The number cell is a play button: shows the track number, and a play icon on hover (or an accent while it's the current track). */ .bmp-track-play { position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: none; background: transparent; color: var(--bmp-secondary); cursor: pointer; border-radius: 6px; } .bmp-track-num { color: var(--bmp-secondary); font-variant-numeric: tabular-nums; font-size: 14px; } .bmp-track-play-icon { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: var(--bmp-text); } .bmp-track-row:hover .bmp-track-num { opacity: 0; } .bmp-track-row:hover .bmp-track-play-icon { opacity: 1; } .bmp-track-play:hover { background: var(--bmp-raise-strong); } .bmp-track-row-title { font-weight: 500; color: var(--bmp-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bmp-track-row-title:hover { color: var(--bmp-accent); } .bmp-track-row-artist { color: var(--bmp-secondary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bmp-track-row-dur { color: var(--bmp-secondary); font-size: 13px; font-variant-numeric: tabular-nums; } /* The currently-playing row: accent the play button and keep the icon shown. */ .bmp-track-play.bmp-currently-playing { color: var(--bmp-accent); } .bmp-track-play.bmp-currently-playing .bmp-track-num { opacity: 0; } .bmp-track-play.bmp-currently-playing .bmp-track-play-icon { opacity: 1; color: var(--bmp-accent); } @media (max-width: 600px) { .bmp-album-hero { flex-direction: column; align-items: flex-start; gap: 16px; } .bmp-album-cover { width: 150px; height: 150px; } .bmp-track-row { grid-template-columns: 24px 1fr auto; } .bmp-track-row-artist { display: none; } } turbo-frame.bmp-main-frame { display: block; } /* Detail pane */ .bmp-detail-art-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; /* On-theme placeholder shown until a song's artwork loads (never a broken image). Real art (the layers) sits on top and covers it. */ background: #141821 url("../assets/placeholder-art.svg") center / cover no-repeat; margin-bottom: 16px; } .bmp-detail-art { width: 100%; height: 100%; object-fit: cover; } /* Clickable when the song has art to view in the lightbox gallery. */ .bmp-detail-art-wrap.bmp-has-gallery { cursor: zoom-in; } /* Concept-art slideshow: layer B stacks over A and cross-fades in/out. The featured image (layer A) is the base; art rotates gently on top. */ .bmp-detail-art-b { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; pointer-events: none; } .bmp-detail-art-wrap.bmp-art-b-front .bmp-detail-art-b { opacity: 1; } @media (prefers-reduced-motion: reduce) { .bmp-detail-art-b { transition: none; } } .bmp-detail-title { margin: 0 0 2px; font-size: 18px; } .bmp-detail-artist { margin: 0 0 2px; color: var(--bmp-secondary); } .bmp-detail-album { margin: 0 0 16px; font-size: 13px; color: var(--bmp-secondary); } .bmp-detail-album:empty, .bmp-detail-artist:empty { display: none; } .bmp-detail-heading { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bmp-secondary); } .bmp-detail-lyrics { margin: 0; white-space: pre-wrap; font-family: monospace; font-size: 13px; line-height: 1.6; color: var(--bmp-text); } /* Desktop: panels are optional — collapsing one lets the main area grow. The main pane animates its insets while the panel slides off-screen, so a collapse/expand reads as one smooth motion instead of a hard jump. */ @media (min-width: 981px) { .bmp-shell-main, body.bmp-shell-active #bmp-visualizer-container { transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), right 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .bmp-shell-nav, .bmp-shell-detail { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; } body.bmp-nav-collapsed { --bmp-main-left: 0px; } body.bmp-nav-collapsed .bmp-shell-nav { transform: translateX(-100%); opacity: 0; pointer-events: none; } body.bmp-detail-collapsed { --bmp-main-right: 0px; } body.bmp-detail-collapsed .bmp-shell-detail { transform: translateX(100%); opacity: 0; pointer-events: none; } } /* Mobile: main pane is full width; side panels become slide-in drawers. */ @media (max-width: 980px) { body.bmp-shell-active { --bmp-main-left: 0px; --bmp-main-right: 0px; } .bmp-shell-nav, .bmp-shell-detail { z-index: 995; transition: transform 0.25s ease; box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); } .bmp-shell-nav { width: 280px; transform: translateX(-100%); } .bmp-shell-detail { width: 300px; transform: translateX(100%); } body.bmp-nav-open .bmp-shell-nav { transform: translateX(0); } body.bmp-detail-open .bmp-shell-detail { transform: translateX(0); } } /* Content entrance — cards and track rows fade up as a view loads (incl. Turbo frame swaps). A short stagger on the first few keeps it lively, not laggy. */ @keyframes bmp-fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .bmp-grid > .bmp-card, .bmp-track-rows > .bmp-track-row { animation: bmp-fade-in-up 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; } .bmp-grid > .bmp-card:nth-child(1), .bmp-track-rows > .bmp-track-row:nth-child(1) { animation-delay: 0.02s; } .bmp-grid > .bmp-card:nth-child(2), .bmp-track-rows > .bmp-track-row:nth-child(2) { animation-delay: 0.05s; } .bmp-grid > .bmp-card:nth-child(3), .bmp-track-rows > .bmp-track-row:nth-child(3) { animation-delay: 0.08s; } .bmp-grid > .bmp-card:nth-child(4), .bmp-track-rows > .bmp-track-row:nth-child(4) { animation-delay: 0.11s; } .bmp-grid > .bmp-card:nth-child(5), .bmp-track-rows > .bmp-track-row:nth-child(5) { animation-delay: 0.14s; } .bmp-grid > .bmp-card:nth-child(6), .bmp-track-rows > .bmp-track-row:nth-child(6) { animation-delay: 0.17s; } .bmp-grid > .bmp-card:nth-child(7), .bmp-track-rows > .bmp-track-row:nth-child(7) { animation-delay: 0.20s; } .bmp-grid > .bmp-card:nth-child(n + 8), .bmp-track-rows > .bmp-track-row:nth-child(n + 8) { animation-delay: 0.22s; } /* The album hero gets a single gentle entrance. */ .bmp-album-hero { animation: bmp-fade-in-up 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Respect users who ask for less motion: keep layout, drop the movement. */ @media (prefers-reduced-motion: reduce) { .bmp-shell-main, body.bmp-shell-active #bmp-visualizer-container, .bmp-shell-nav, .bmp-shell-detail, .bmp-grid > .bmp-card, .bmp-track-rows > .bmp-track-row, .bmp-album-hero { transition: none; animation: none; } } /* Infinite-scroll trigger; the observer watches this to append more cards. */ .bmp-grid-sentinel { height: 1px; } /* Tile-view sort control (above the grid). */ .bmp-list-toolbar { display: flex; justify-content: flex-end; align-items: center; margin: -4px 0 16px; } .bmp-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bmp-secondary); } #bmp-sort-select { background: var(--bmp-raise); color: var(--bmp-text); border: 1px solid var(--bmp-border); border-radius: 8px; padding: 6px 10px; font-size: 14px; cursor: pointer; outline: none; } #bmp-sort-select:hover { border-color: var(--bmp-accent); } #bmp-sort-select option { color: #1a1a1a; } /* ---- Preferences: footer at the end of the content -------------------- */ /* A hairline separates the footer from the content, with room before the player bar. The theme variant keeps the theme's own footer styling; the custom variant is a quiet copyright line. */ .bmp-shell-foot { margin-top: 34px; padding: 20px 0; border-top: 1px solid var(--bmp-border); } .bmp-shell-foot-theme a { color: var(--bmp-accent); } .bmp-shell-foot-custom { color: var(--bmp-secondary); font-size: 12px; } /* Custom footer: social icons pinned to the bottom of the nav pane. */ .bmp-shell-nav { display: flex; flex-direction: column; } .bmp-shell-navfoot { margin-top: auto; /* pin to the bottom when the tree is short */ padding: 14px 6px 4px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--bmp-border); } .bmp-shell-navfoot .bmp-social { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--bmp-secondary); border: 1px solid var(--bmp-border); transition: color 0.15s ease, border-color 0.15s ease; } .bmp-shell-navfoot .bmp-social:hover { color: var(--bmp-accent); border-color: var(--bmp-accent); } /* ---- Preferences: solid (opaque) surfaces ----------------------------- */ /* Drops the backdrop blur and makes panels opaque — lighter on weak GPUs and for anyone who prefers no translucency. The shell palette is dark regardless of theme, so a solid dark app stays consistent. */ body.bmp-shell-active.bmp-surface-solid { --bmp-panel: #14171f; background: #0e1119; } body.bmp-surface-solid .bmp-shell-top, body.bmp-surface-solid .bmp-shell-nav, body.bmp-surface-solid .bmp-shell-detail, body.bmp-surface-solid #bmp-player-container, body.bmp-surface-solid #bmp-visualizer-container { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.bmp-surface-solid #bmp-player-container, body.bmp-surface-solid #bmp-visualizer-container { background: #14171f; } /* ---- Detail pane: "listen elsewhere" service links -------------------- */ .bmp-detail-services { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } .bmp-detail-services .bmp-service { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--bmp-text); background: var(--bmp-raise); border: 1px solid var(--bmp-border); transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .bmp-detail-services .bmp-service:hover { background: var(--bmp-raise-strong); border-color: var(--bmp-border-strong); transform: translateY(-1px); } .bmp-detail-services .bmp-service svg { flex: 0 0 auto; } .bmp-service-spotify:hover { color: #1db954; border-color: #1db954; } .bmp-service-apple:hover { color: #fc3c44; border-color: #fc3c44; } .bmp-service-soundcloud:hover { color: #ff5500; border-color: #ff5500; } /* ---- Detail pane: admin-only song diagnostics ------------------------- */ /* Debug button sits beside the expand button; the title keeps the left. */ .bmp-detail-heading-row .bmp-detail-heading { margin-right: auto; } .bmp-song-debug-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border: 0; background: transparent; color: var(--bmp-secondary); cursor: pointer; border-radius: 6px; line-height: 0; transition: color 0.15s ease, background 0.15s ease; } .bmp-song-debug-toggle:hover { color: var(--bmp-text); background: var(--bmp-raise); } /* Diagnostics modal. */ .bmp-debug-modal { position: fixed; inset: 0; z-index: 100001; /* above the karaoke stage */ display: flex; align-items: center; justify-content: center; padding: 24px; } .bmp-debug-modal[hidden] { display: none; } .bmp-debug-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 12, 0.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .bmp-debug-dialog { position: relative; width: min(680px, 100%); max-height: 86vh; overflow: auto; background: var(--bmp-surface, #12151d); color: var(--bmp-text, #e8eef7); border: 1px solid var(--bmp-border); border-radius: 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); } .bmp-debug-head { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: inherit; border-bottom: 1px solid var(--bmp-border); } .bmp-debug-head h2 { margin: 0; font-size: 16px; } .bmp-debug-build { font-size: 11px; font-weight: 700; color: #22d3ee; border: 1px solid var(--bmp-border); border-radius: 999px; padding: 2px 8px; } .bmp-debug-close { margin-left: auto; border: 0; background: transparent; color: var(--bmp-secondary); font-size: 24px; line-height: 1; cursor: pointer; } .bmp-debug-close:hover { color: var(--bmp-text); } .bmp-debug-body { padding: 14px 18px 20px; font-size: 13px; } .bmp-debug-status { margin: 0 0 12px; font-weight: 600; line-height: 1.45; } .bmp-debug-note { margin: 6px 0; color: var(--bmp-secondary); } .bmp-debug-section { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bmp-secondary); } .bmp-debug-rows { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; } .bmp-debug-rows dt { color: var(--bmp-secondary); } .bmp-debug-rows dd { margin: 0; word-break: break-word; } .bmp-debug-sample { margin: 6px 0 0; padding: 10px 12px; background: var(--bmp-raise); border: 1px solid var(--bmp-border); border-radius: 8px; font-size: 12px; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; } /* Severity colours, shared by status lines and row values. */ .bmp-lrc-lvl-ok { color: #34d399; } .bmp-lrc-lvl-warn { color: #fbbf24; } .bmp-lrc-lvl-error { color: #f87171; } .bmp-lrc-lvl-muted { color: var(--bmp-secondary); }