/* ========================================================================= Signature Access Portal — skeleton styles. Industry-facing, data-dense reskin of the catalogue. Matches the existing BTE magenta (#e80a68) on a near-black surface. This is the scaffold pass: structure + core look. Polish (animation, responsive breakpoints, lyric/ account dialogs) comes in build-out. ========================================================================= */ .bte-signature-portal { --sig-bg: #0a0a0c; --sig-surface: #141418; --sig-surface-2: #1b1b22; --sig-line: rgba(255, 255, 255, 0.08); --sig-text: #f4f4f6; --sig-muted: #8a8a96; --sig-accent: #e80a68; --sig-accent-2: #9e0043; --sig-ok: #e80a68; position: relative; display: flex; flex-direction: column; min-height: 80vh; background: var(--sig-bg); color: var(--sig-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border-radius: 14px; /* No overflow:hidden here — it would stop the sticky player dock from pinning to the viewport. Corners are softened via background only. */ /* Clear the fixed floating player + recents strip at the bottom. */ padding-bottom: clamp(150px, 14vw, 210px); } /* Section titles render white (override theme heading colour). */ .bte-signature-portal .bte-sig-section__head h2 { color: var(--sig-text) !important; } /* Shared-playlist standalone view renders on its own page. Paint the whole page surface (html/body, not just the portal card) dark so no theme white shows below the content or behind the fixed player dock. signature.css only loads on the portal + shared views, so this stays safely scoped. */ html:has(.bte-signature-portal--shared), body:has(.bte-signature-portal--shared) { background: #0a0a0c; } /* Sans-serif for controls + work-area text (theme defaults to a serif). */ .bte-signature-portal .bte-sig-btn, .bte-signature-portal .bte-sig-pager, .bte-signature-portal .bte-sig-pager__label, .bte-signature-portal .bte-sig-recents__label, .bte-signature-portal .bte-sig-recent, .bte-signature-portal .bte-sig-recent__sep, .bte-signature-portal .bte-sig-share, .bte-signature-portal .bte-sig-share * { font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ---- The Screen (gate overlay) ---------------------------------------- */ /* The screen is fixed so it covers the viewport regardless of scroll, and the page itself is locked (see .bte-sig-locked) so a gated visitor cannot scroll the teaser content behind it. */ .bte-sig-screen { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* "Return to site" escape hatch under the gate card, so visitors who don't sign in aren't stranded (the fixed overlay covers the theme nav). */ .bte-sig-screen__back { margin-top: 18px; color: rgba(255, 255, 255, 0.6); font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; letter-spacing: 0.02em; text-decoration: none; transition: color 0.15s ease; } .bte-sig-screen__back:hover, .bte-sig-screen__back:focus { color: #ffffff; text-decoration: underline; } /* Scroll lock applied to and while the screen is up. */ html.bte-sig-locked, body.bte-sig-locked { overflow: hidden !important; } /* ------------------------------------------------------------------------- Request Access / Sign In card — mirrors the existing [bte_music_catalogue] auth modal (.bte-auth-modal__*) so the gate form is visually identical. These rules are copied (not imported) so the portal stays self-contained and the fan frontend's CSS/JS never has to load here. ------------------------------------------------------------------------- */ .bte-sig-screen .bte-auth-modal__panel { background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6); box-sizing: border-box; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; max-height: 90vh; overflow-y: auto; padding: 36px 32px 32px; position: relative; width: 100%; max-width: 420px; } .bte-sig-screen .bte-auth-modal__eyebrow { color: #e80a68; display: block; font-size: 10px; font-weight: 900; letter-spacing: 0.18em; margin-bottom: 8px; text-transform: uppercase; } .bte-sig-screen .bte-auth-modal__title { color: #ffffff; font-size: 26px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 24px; } .bte-sig-screen .bte-auth-modal__tabs { border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; gap: 4px; margin-bottom: 24px; } .bte-sig-screen .bte-auth-modal__tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; color: #b3b3b3; cursor: pointer; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: -1px; padding: 8px 16px; text-transform: uppercase; transition: color 140ms ease, border-color 140ms ease; } .bte-sig-screen .bte-auth-modal__tab:hover { color: #ffffff; } .bte-sig-screen .bte-auth-modal__tab.is-active { border-bottom-color: #e80a68; color: #ffffff; } .bte-sig-screen .bte-auth-modal__pane { display: none; } .bte-sig-screen .bte-auth-modal__pane.is-active { display: block; } .bte-sig-screen .bte-auth-modal__field { margin-bottom: 16px; } .bte-sig-screen .bte-auth-modal__label { color: #e80a68; display: block; font-size: 9px; font-weight: 900; letter-spacing: 0.16em; margin-bottom: 6px; text-transform: uppercase; } .bte-sig-screen .bte-auth-modal__input { appearance: none; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; box-sizing: border-box; color: #ffffff; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; height: 42px; outline: none; padding: 0 14px; transition: border-color 140ms ease, background 140ms ease; width: 100%; } .bte-sig-screen .bte-auth-modal__input:focus { background: rgba(255, 255, 255, 0.09); border-color: #e80a68; color: #ffffff; } .bte-sig-screen .bte-auth-modal__input:-webkit-autofill, .bte-sig-screen .bte-auth-modal__input:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff; -webkit-box-shadow: 0 0 0 1000px #2a2a2a inset; transition: background-color 5000s ease-in-out 0s; } /* Safari/macOS password + contacts autofill icons (the "key" button) render dark by default, which is nearly invisible on our dark fields. Invert to white. */ .bte-auth-modal__input::-webkit-credentials-auto-fill-button, .bte-auth-modal__input::-webkit-contacts-auto-fill-button { filter: invert(1); } .bte-sig-screen .bte-auth-modal__input::placeholder { color: rgba(255, 255, 255, 0.3); } .bte-sig-screen .bte-auth-modal__submit { appearance: none; background: #9e0043; border: none; border-radius: 10px; color: #ffffff; cursor: pointer; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 800; height: 42px; letter-spacing: 0.08em; margin-top: 8px; text-transform: uppercase; transition: background 140ms ease; width: 100%; } .bte-sig-screen .bte-auth-modal__submit:hover { background: #e80a68; } .bte-sig-screen .bte-auth-modal__footnote-text { margin: 12px 0 0; font-size: 12px; color: var(--sig-muted); line-height: 1.5; } .bte-sig-screen .bte-auth-modal__message { margin: 12px 0 0; font-size: 13px; min-height: 18px; display: none; } .bte-sig-screen .bte-auth-modal__message.is-visible { display: block; } .bte-sig-screen .bte-auth-modal__message--error { color: #ff6b8a; } .bte-sig-screen .bte-auth-modal__message--success { padding: 12px 14px; background: rgba(232, 10, 104, 0.12); border: 1px solid rgba(232, 10, 104, 0.35); border-radius: 10px; color: #ffd9e6; line-height: 1.5; } /* ---- Buttons (used across the portal layout) --------------------------- */ .bte-sig-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border: 0; border-radius: 9px; background: var(--sig-accent); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none; } .bte-sig-btn:hover { background: #ff1f7e; } .bte-sig-btn--sm { padding: 8px 12px; font-size: 13px; } /* ---- Section pager ----------------------------------------------------- */ .bte-sig-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 4px; } .bte-sig-pager__label { font-size: 12px; letter-spacing: 0.08em; color: var(--sig-muted); min-width: 48px; text-align: center; } .bte-sig-pager .bte-sig-btn[disabled] { opacity: 0.4; cursor: not-allowed; } /* ---- Top bar ----------------------------------------------------------- */ .bte-sig-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 26px 22px; border-bottom: 1px solid var(--sig-line); background: var(--sig-surface); } .bte-sig-topbar__headline { min-width: 0; } .bte-sig-topbar__eyebrow { display: block; color: var(--sig-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 8px; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-signature-portal .bte-sig-topbar__brand { margin: 0; padding: 0; color: #fff !important; font-size: clamp(34px, 6vw, 72px); line-height: 0.95; letter-spacing: -0.04em; font-weight: 800; } .bte-sig-topbar__brand span { color: var(--sig-accent); margin-left: 0.22em; } .bte-sig-topbar__subtitle { margin: 10px 0 0; color: #b3b3b3; font-size: 15px; line-height: 1.4; } .bte-sig-topbar__account { flex: 0 0 auto; } /* Account block: email + Sign Out + Manage Account (top-right). */ .bte-sig-account { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-account__row { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; } .bte-sig-account__email { color: #b3b3b3; font-size: 13px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bte-sig-account__signout { appearance: none; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; color: #fff; cursor: pointer; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; height: 36px; letter-spacing: 0.06em; padding: 0 16px; text-transform: uppercase; transition: background 140ms ease, border-color 140ms ease; } .bte-sig-account__signout:hover { background: rgba(232, 10, 104, 0.22); border-color: rgba(232, 10, 104, 0.45); } .bte-sig-account__manage { appearance: none; background: none; border: 0; color: #8f8f8f; cursor: pointer; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 0; text-transform: uppercase; } .bte-sig-account__manage:hover { color: var(--sig-accent); } @media (max-width: 720px) { .bte-sig-topbar { flex-direction: column; align-items: flex-start; } .bte-sig-account, .bte-sig-account__row { align-items: flex-start; justify-content: flex-start; text-align: left; } } /* ---- Body grid --------------------------------------------------------- */ .bte-sig-body { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 0; flex: 1; min-height: 0; } .bte-sig-center { padding: 22px; overflow-y: auto; } .bte-sig-rail { border-left: 1px solid var(--sig-line); background: var(--sig-surface); display: flex; flex-direction: column; } /* ---- Sections ---------------------------------------------------------- */ .bte-sig-section { margin-bottom: 30px; } .bte-sig-section__head { margin-bottom: 12px; } .bte-sig-eyebrow { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sig-accent); font-weight: 700; } .bte-sig-section__head h2 { margin: 2px 0 0; font-size: 26px; font-weight: 800; } .bte-sig-placeholder { color: var(--sig-muted); font-size: 14px; } /* ---- List + rows ------------------------------------------------------- */ .bte-sig-list__head, .bte-sig-row { display: grid; grid-template-columns: 1fr 210px 160px; align-items: center; gap: 16px; padding: 10px 8px; } .bte-sig-list__head { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sig-muted); border-bottom: 1px solid var(--sig-line); } /* "Actions" header aligns to the right, over the action button row. */ .bte-sig-list__head > span:last-child { text-align: right; } .bte-sig-row { border-bottom: 1px solid var(--sig-line); } /* Subtle zebra striping (applied to visible rows by JS so pagination stays even). */ .bte-sig-row.is-alt { background: rgba(255, 255, 255, 0.028); } .bte-sig-row:hover { background: var(--sig-surface-2); } /* Title doubles as a play trigger when audio exists. */ .bte-sig-row:not([data-no-audio]) .bte-sig-row__title { cursor: pointer; } .bte-sig-row:not([data-no-audio]) .bte-sig-row__title:hover { color: var(--sig-accent); } /* "No audio preview" tooltip on the play button + title of silent tracks. */ .bte-sig-row[data-no-audio] .bte-sig-playbtn, .bte-sig-row[data-no-audio] .bte-sig-row__title { position: relative; } .bte-sig-row[data-no-audio] .bte-sig-playbtn::after, .bte-sig-row[data-no-audio] .bte-sig-row__title::after { content: "No audio preview"; position: absolute; left: 0; bottom: calc(100% + 8px); background: #1c1c20; color: #fff; border: 1px solid var(--sig-line); padding: 5px 9px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease; z-index: 60; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-row[data-no-audio] .bte-sig-playbtn:hover::after, .bte-sig-row[data-no-audio] .bte-sig-row__title:hover::after { opacity: 1; transform: translateY(0); } .bte-sig-row__main { display: flex; align-items: center; gap: 12px; min-width: 0; } .bte-sig-row__text { min-width: 0; } .bte-sig-row__title { display: block; font-weight: 700; } .bte-sig-row__credits { display: block; font-size: 12px; color: var(--sig-muted); } /* Round brand-pink play button (replaces the per-song hue chip). */ .bte-sig-playbtn { flex: 0 0 auto; width: 35px; height: 35px; border: 0; border-radius: 50%; cursor: pointer; background: var(--sig-accent); color: #fff; display: flex; align-items: center; justify-content: center; position: relative; transition: background 0.14s ease, transform 0.14s ease; } .bte-sig-playbtn:hover { background: #ff2e85; transform: scale(1.05); } .bte-sig-playbtn__icon { width: 16px; height: 16px; display: block; line-height: 1; } .bte-sig-playbtn__icon::before { content: '\25B6\FE0E'; color: #fff; font-size: 13px; line-height: 16px; display: block; margin-left: 2px; text-align: center; } /* Current track shows a pause glyph; when paused it reverts to play. */ .bte-sig-row.is-playing .bte-sig-playbtn__icon::before { content: '\275A\275A'; font-size: 12px; letter-spacing: -2px; margin-left: 0; } .bte-sig-row.is-playing.is-paused .bte-sig-playbtn__icon::before { content: '\25B6\FE0E'; font-size: 13px; letter-spacing: 0; margin-left: 2px; } /* No-audio tracks: muted button, no hover lift. */ .bte-sig-row[data-no-audio] .bte-sig-playbtn { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.55); cursor: default; } .bte-sig-row[data-no-audio] .bte-sig-playbtn:hover { transform: none; background: rgba(255, 255, 255, 0.10); } /* Status pills */ .bte-sig-row__flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; } .bte-sig-col { font-size: 12px; } .bte-sig-pill { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; } .bte-sig-pill.is-on { background: rgba(61, 220, 132, 0.16); color: #3ddc84; } .bte-sig-pill.is-off { color: var(--sig-muted); } /* Row actions */ .bte-sig-row__actions { display: flex; gap: 6px; justify-content: flex-end; } /* Row action buttons — mirrors the fan frontend's .bte-list-row__action-btn so the lyrics / YouTube / TikTok / download / add icons match exactly. */ .bte-signature-portal .bte-list-row__action-btn { align-items: center; appearance: none; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 5px; color: #fff; cursor: pointer; display: inline-flex; height: 28px; width: 28px; justify-content: center; padding: 0; text-decoration: none; transition: background 140ms ease, border-color 140ms ease; } .bte-signature-portal .bte-list-row__action-btn:hover { background: rgba(232, 10, 104, 0.28); border-color: rgba(232, 10, 104, 0.45); } .bte-signature-portal .bte-list-row__action-btn svg { height: 13px; width: 13px; flex-shrink: 0; } .bte-signature-portal .bte-list-row__action-btn--lyrics:hover, .bte-signature-portal .bte-list-row__action-btn--add:hover, .bte-signature-portal .bte-list-row__action-btn--dl:hover { background: rgba(232, 10, 104, 0.22); border-color: rgba(232, 10, 104, 0.45); } .bte-signature-portal .bte-list-row__action-btn--yt svg, .bte-signature-portal .bte-list-row__action-btn--tt svg { border-radius: 4px; display: block; height: 20px; width: 20px; } .bte-signature-portal .bte-list-row__action-btn--add.is-added { background: rgba(232, 10, 104, 0.3); border-color: rgba(232, 10, 104, 0.6); } .bte-sig-iconbtn { width: 32px; height: 32px; border: 1px solid var(--sig-line); border-radius: 8px; background: var(--sig-surface-2); color: var(--sig-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; } .bte-sig-iconbtn:hover { border-color: var(--sig-accent); color: var(--sig-accent); } .bte-sig-iconbtn--play { background: var(--sig-accent); color: #fff; border-color: var(--sig-accent); } /* ---- Right rail (Playlists) -------------------------------------------- */ .bte-sig-rail__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--sig-line); } .bte-sig-rail__head h2 { margin: 0; font-size: 16px; font-weight: 800; } .bte-sig-rail__body { flex: 1; overflow-y: auto; padding: 12px 14px; } .bte-sig-share { margin: 0 14px 12px; padding: 14px; background: var(--sig-surface-2); border: 1px solid var(--sig-line); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-share__head { display: flex; align-items: center; justify-content: space-between; } .bte-sig-share h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sig-muted); } .bte-sig-share__close { appearance: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sig-line); border-radius: 7px; background: var(--sig-surface); color: var(--sig-text); cursor: pointer; font-size: 12px; line-height: 1; } .bte-sig-share__close:hover { border-color: var(--sig-accent); color: var(--sig-accent); } .bte-sig-share__label { font-size: 9px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sig-accent); margin: 4px 0 -2px; } .bte-sig-share__linkrow { display: flex; gap: 6px; align-items: center; } .bte-sig-share__link { flex: 1; min-width: 0; padding: 9px 11px; background: var(--sig-surface); border: 1px solid var(--sig-line); border-radius: 8px; color: var(--sig-text); font-size: 12px; } .bte-sig-share__linkrow .bte-sig-btn { flex: 0 0 auto; } .bte-sig-share input[type="email"], .bte-sig-share input[type="text"] { padding: 9px 11px; background: var(--sig-surface); border: 1px solid var(--sig-line); border-radius: 8px; color: var(--sig-text); font-size: 13px; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-share__msg { margin: 4px 0 0; font-size: 12px; color: #6ee7a0; min-height: 14px; } .bte-sig-share__msg.is-error { color: #ff6b8a; } .bte-sig-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sig-muted); } /* ---- Recently played strip (fixed; sits at page bottom, lifts above the player when it's visible) ------------------------------------------- */ .bte-sig-recents { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; width: min(1180px, calc(100vw - 20px)); z-index: 9998; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: rgba(18, 18, 18, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); transition: bottom 180ms ease; } /* Lifted above the floating player once a track has started. */ .bte-sig-recents.has-player { bottom: 120px; } .bte-sig-recents[hidden] { display: none; } .bte-sig-recents__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sig-muted); white-space: nowrap; } .bte-sig-recents__track { display: flex; align-items: center; gap: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge */ } .bte-sig-recents__track::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .bte-sig-recents__empty { color: var(--sig-muted); font-size: 13px; } /* End arrows replace the scrollbar. */ .bte-sig-recents__arrow { flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--sig-line); border-radius: 7px; background: var(--sig-surface-2); color: var(--sig-text); cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .bte-sig-recents__arrow:hover { border-color: var(--sig-accent); color: var(--sig-accent); } .bte-sig-recents__arrow[hidden] { display: none; } /* Plain text titles (no pills) with a pip separator. */ .bte-sig-recent { flex: 0 0 auto; border: 0; background: none; padding: 0 2px; color: var(--sig-muted); cursor: pointer; font-size: 11px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .bte-sig-recent:hover { color: var(--sig-accent); } .bte-sig-recent__sep { flex: 0 0 auto; color: rgba(255, 255, 255, 0.30); font-size: 11px; padding: 0 6px; user-select: none; } /* Now-playing row highlight */ .bte-sig-row.is-playing { background: rgba(232, 10, 104, 0.10); } .bte-sig-row.is-playing .bte-sig-row__title { color: var(--sig-accent); } .bte-sig-row.is-playing .bte-sig-playbtn { background: #ff2e85; } /* ---- Persistent player (ported from the fan frontend's floating player) - */ .bte-signature-portal .bte-player { bottom: 18px; left: 50%; opacity: 0; pointer-events: none; position: fixed; transform: translate(-50%, 120%); transition: opacity 180ms ease, transform 180ms ease; width: min(1180px, calc(100vw - 36px)); z-index: 9999; } .bte-signature-portal .bte-player.is-active { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } .bte-signature-portal .bte-player__inner { align-items: center; background: rgba(18, 18, 18, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; box-shadow: 0 22px 80px rgba(0, 0, 0, 0.55); display: grid; gap: 14px; padding: 12px 14px; grid-template-columns: auto auto auto 58px minmax(180px, 1fr) minmax(260px, 1.6fr) minmax(120px, 0.5fr) auto auto; } .bte-signature-portal .bte-player__control { align-items: center; background: rgba(255, 255, 255, 0.08); border: 0; border-radius: 10px; color: #fff; cursor: pointer; display: inline-flex; font: inherit; font-size: 22px; height: 40px; justify-content: center; line-height: 1; width: 40px; } .bte-signature-portal .bte-player__cover { border-radius: 14px; height: 58px; object-fit: cover; width: 58px; } .bte-signature-portal .bte-player__cover[hidden] { display: none; } .bte-signature-portal .bte-player__meta { min-width: 0; } .bte-signature-portal .bte-player__label { color: #ff3b83; display: block; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; margin-bottom: 3px; text-transform: uppercase; } .bte-signature-portal .bte-player__meta strong, .bte-signature-portal .bte-player__meta span[data-bte-player-artist] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bte-signature-portal .bte-player__meta strong { color: #fff; font-size: 15px; } .bte-signature-portal .bte-player__meta span[data-bte-player-artist] { color: #c8c8c8; font-size: 13px; } .bte-signature-portal .bte-player__timeline { align-items: center; color: #cfcfcf; display: grid; font-size: 12px; gap: 10px; grid-template-columns: 42px minmax(120px, 1fr) 42px; } /* Sliders are fully custom-drawn. Relying on native rendering + accent-color left desktop Safari showing a thumb with NO visible track on this dark bar (Safari's native range track is inconsistent on dark backgrounds). The input itself is the 5px bar; JS paints the pink progress fill as a background gradient (see paintRange in signature.js). */ .bte-signature-portal .bte-player input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; margin: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.28); /* JS overwrites with the fill gradient */ outline: none; cursor: pointer; } .bte-signature-portal .bte-player input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border: 0; border-radius: 50%; background: #d92f70; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .bte-signature-portal .bte-player input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #d92f70; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .bte-signature-portal .bte-player input[type="range"]::-moz-range-track { background: transparent; /* the input's own background is the bar */ } .bte-signature-portal .bte-player__volume { margin-bottom: 20px; /* lifts the volume slider level with the seek bar */ align-items: center; color: #b9b9b9; display: grid; font-size: 11px; gap: 5px; } .bte-signature-portal .bte-player__actions { display: flex; gap: 6px; align-items: center; } /* Keep hidden action buttons hidden despite the action-btn display rule. */ .bte-signature-portal .bte-list-row__action-btn[hidden] { display: none !important; } /* Play-circle icon button */ .bte-signature-portal .bte-player__control--primary.bte-play-circle { align-items: center; background: #e80a68; border: 0; border-radius: 999px; box-shadow: 0 14px 34px rgba(232, 10, 104, 0.35); color: #050505; display: inline-flex; height: 56px; justify-content: center; width: 56px; } .bte-signature-portal .bte-play-circle span { border: 0; display: block; height: auto; margin: 0; width: auto; } .bte-signature-portal .bte-play-circle span::before { color: #050505; content: '\25B6\FE0E'; display: block; font-size: 22px; line-height: 1; margin-left: 4px; } .bte-signature-portal .bte-play-circle.is-playing span::before { content: '\275A\275A'; font-size: 17px; letter-spacing: -2px; margin-left: 0; } .bte-signature-portal .bte-play-circle:hover, .bte-signature-portal .bte-play-circle:focus { background: #ff4f93; color: #050505; } @media (max-width: 980px) { .bte-signature-portal .bte-player { bottom: 10px; width: calc(100vw - 20px); } .bte-signature-portal .bte-player__inner { grid-template-columns: auto auto auto minmax(0, 1fr) auto; } .bte-signature-portal .bte-player__cover, .bte-signature-portal .bte-player__timeline, .bte-signature-portal .bte-player__volume { display: none; } .bte-sig-recents { bottom: 12px; } .bte-sig-recents.has-player { bottom: 112px; } } /* ---- Standalone shared-playlist view ----------------------------------- */ .bte-sig-shared-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; background: #0a0a0c; color: #f4f4f6; padding: 15px; } .bte-sig-shared-card { max-width: 720px; width: 100%; background: #141418; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 32px; text-align: center; } /* ---- Responsive (scaffold) --------------------------------------------- */ @media (max-width: 900px) { .bte-sig-body { grid-template-columns: 1fr; } .bte-sig-rail { border-left: 0; border-top: 1px solid var(--sig-line); } .bte-sig-rail::after { border-left: 0; } .bte-sig-list__head, .bte-sig-row { grid-template-columns: 1fr 150px; } .bte-sig-list__head > span:last-child, .bte-sig-row__actions { display: none; } } /* === Brand YouTube + TikTok PNG icons — copied verbatim from frontend.css so the portal matches music-catalogue-test (signature.css only loads on the portal). === */ .bte-version-card__panel-icon-link--yt svg, .bte-version-card__panel-icon-link--tt svg, .bte-list-row__action-btn--yt svg, .bte-list-row__action-btn--tt svg { display: none !important; } .bte-version-card__panel-icon-link--yt, .bte-version-card__panel-icon-link--tt, .bte-list-row__action-btn--yt, .bte-list-row__action-btn--tt { background-color: transparent !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; border: 0 !important; box-shadow: none !important; display: inline-block !important; height: 26px !important; opacity: 1 !important; text-decoration: none !important; transform: none !important; transition: opacity 160ms ease, transform 160ms ease !important; width: 26px !important; } .bte-version-card__panel-icon-link--yt, .bte-list-row__action-btn--yt { background-image: url("../img/youtube.png") !important; } .bte-version-card__panel-icon-link--tt, .bte-list-row__action-btn--tt { background-image: url("../img/tiktok.png") !important; } .bte-version-card__panel-icon-link--yt:hover, .bte-version-card__panel-icon-link--tt:hover, .bte-list-row__action-btn--yt:hover, .bte-list-row__action-btn--tt:hover, .bte-version-card__panel-icon-link--yt:focus, .bte-version-card__panel-icon-link--tt:focus, .bte-list-row__action-btn--yt:focus, .bte-list-row__action-btn--tt:focus { opacity: 1 !important; transform: translateY(-1px) scale(1.08) !important; background-color: transparent !important; } .bte-version-card__panel-icon-link--yt::after, .bte-version-card__panel-icon-link--tt::after, .bte-list-row__action-btn--yt::after, .bte-list-row__action-btn--tt::after, .bte-version-card__panel-icon-link--yt:hover::after, .bte-version-card__panel-icon-link--yt:focus::after, .bte-version-card__panel-icon-link--tt:hover::after, .bte-version-card__panel-icon-link--tt:focus::after, .bte-list-row__action-btn--yt:hover::after, .bte-list-row__action-btn--tt:hover::after { content: none !important; display: none !important; } /* ========================================================================== /* ========================================================================= Playlist work-area + share + standalone recipient view ========================================================================= */ /* The share box is revealed (JS clears [hidden]) once a playlist is selected. */ .bte-sig-share[hidden] { display: none; } /* Selectable playlist rows in the rail. */ .bte-sig-pl { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--sig-line); border-radius: 10px; background: var(--sig-surface-2); color: var(--sig-text); cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease; } .bte-sig-pl:hover { border-color: rgba(232, 10, 104, 0.5); } .bte-sig-pl.is-selected { border-color: var(--sig-accent); background: rgba(232, 10, 104, 0.10); } .bte-sig-pl__name { font-weight: 700; font-size: 14px; } .bte-sig-pl__meta { font-size: 12px; color: var(--sig-muted); display: flex; align-items: center; gap: 6px; } .bte-sig-pl__dl { color: var(--sig-accent); font-weight: 800; } .bte-sig-pl-msg { margin: 0; padding: 0 14px 10px; min-height: 16px; font-size: 12px; color: var(--sig-accent); font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ---- Standalone recipient view: track list ----------------------------- */ .bte-sig-shared-card--center { text-align: center; } .bte-sig-shared-eyebrow { display: block; color: var(--sig-accent); font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-shared-title { margin: 0 0; font-size: 30px; line-height: 1.1; } .bte-sig-shared-curator { margin: 0 0 10px; font-size: 12px; font-style: italic; color: #b8b8b8; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-shared-note { margin: 0 0 18px; font-size: 13px; color: #6ee7a0; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-shared-list { list-style: none; margin: 18px 0 0; padding: 0; text-align: left; } .bte-sig-shared-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .bte-sig-shared-row__text { min-width: 0; flex: 1 1 auto; } .bte-sig-shared-row__title { display: block; font-weight: 700; font-size: 15px; } .bte-sig-shared-row__credits { display: block; font-size: 12px; color: var(--sig-muted); margin-top: 2px; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Row credit labels (Lyrics / Music / Performed by / Cast | Character / Comment) read in white so they pop against the muted values (item 5). */ .bte-sig-shared-row__credit-label { color: #fff; } .bte-sig-shared-row__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; } .bte-sig-shared-dl { white-space: nowrap; } .bte-sig-shared-cta { margin: 28px 0 0; text-align: center; } /* Cover art doubles as the play button. */ .bte-sig-shared-cover { position: relative; flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.06); cursor: pointer; } .bte-sig-shared-cover--static { cursor: default; } /* Per-song cover wash (matches .bte-cover-wash in frontend.css — the shared page only loads THIS stylesheet, so the rule is duplicated here). Applied in PHP only to covers that repeat within the playlist, mirroring the Latest Releases duplicate-cover rule. isolation contains the `color` blend to the thumbnail. */ .bte-sig-shared-cover { isolation: isolate; } .bte-sig-shared-cover .bte-cover-wash { position: absolute; inset: 0; pointer-events: none; background: hsla(var(--bte-wash-hue, 320), 90%, 20%, 0.35); mix-blend-mode: color; } .bte-sig-shared-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .bte-sig-shared-cover__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.42); opacity: 0; transition: opacity 140ms ease; } .bte-sig-shared-cover__icon::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 2px; } .bte-sig-shared-cover:hover .bte-sig-shared-cover__icon, .bte-sig-shared-row.is-playing .bte-sig-shared-cover__icon { opacity: 1; } .bte-sig-shared-row.is-playing:not(.is-paused) .bte-sig-shared-cover__icon::before { border-style: none; width: 4px; height: 13px; border-left: 3px solid #fff; border-right: 3px solid #fff; margin-left: 0; } /* ========================================================================= Playlist work-area panel (selector chip · track list · action bar) ========================================================================= */ .bte-sig-btn--ghost { background: var(--sig-surface-2); color: var(--sig-text); border: 1px solid var(--sig-line); } .bte-sig-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--sig-accent); } /* Header: playlist selector + rename/pin/delete */ .bte-sig-plh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .bte-sig-plh__select { flex: 1; min-width: 0; height: 36px; box-sizing: border-box; appearance: none; -webkit-appearance: none; padding: 0 30px 0 10px; background-color: var(--sig-surface-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8a96' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; border: 1px solid var(--sig-line); border-radius: 9px; color: var(--sig-text); font-size: 14px; font-weight: 700; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-plh__actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .bte-sig-plh__btn { width: 36px; height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sig-line); border-radius: 8px; background: var(--sig-surface-2); color: var(--sig-text); cursor: pointer; font-size: 13px; line-height: 1; } .bte-sig-plh__btn:hover { border-color: var(--sig-accent); } .bte-sig-plh__btn.is-on { background: rgba(232, 10, 104, 0.18); border-color: var(--sig-accent); } .bte-sig-plh__btn--danger:hover { border-color: #ff5a7a; color: #ff5a7a; } .bte-sig-plh__dlnote { margin: -4px 0 10px; font-size: 11px; color: #6ee7a0; letter-spacing: 0.04em; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-pl-reorder { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sig-muted); font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-pl-empty { margin: 6px 0 14px; } /* Track list */ .bte-sig-pltracks { list-style: none; margin: 0 0 14px; padding: 0; } .bte-sig-pli { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 8px; margin-bottom: 6px; border: 1px solid var(--sig-line); border-radius: 10px; background: var(--sig-surface-2); cursor: grab; } .bte-sig-pli.is-dragging { opacity: 0.5; border-color: var(--sig-accent); } .bte-sig-pli__cover { position: relative; width: 48px; height: 48px; border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #000; } .bte-sig-pli__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .bte-sig-pli__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--sig-muted); font-size: 18px; background: var(--sig-surface); } .bte-sig-pli__ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.42); opacity: 0; transition: opacity 0.14s ease; } .bte-sig-pli__ov::before { content: '\25B6\FE0E'; color: #fff; font-size: 16px; line-height: 1; margin-left: 2px; } .bte-sig-pli__cover:hover .bte-sig-pli__ov, .bte-sig-pli.is-playing .bte-sig-pli__ov { opacity: 1; } .bte-sig-pli__meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .bte-sig-pli__meta strong { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bte-sig-pli__meta span { font-size: 12px; color: var(--sig-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-pli__len { font-size: 11px; } .bte-sig-pli__acts { display: flex; align-items: center; gap: 6px; } .bte-sig-pli__remove { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sig-line); border-radius: 8px; background: var(--sig-surface); color: var(--sig-text); cursor: pointer; font-size: 18px; line-height: 1; } .bte-sig-pli__remove:hover { border-color: #ff5a7a; color: #ff5a7a; } .bte-sig-pli[data-no-audio] .bte-sig-pli__cover { cursor: default; } /* Bottom action bar */ .bte-sig-plbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 12px; border-top: 1px solid var(--sig-line); } .bte-sig-plbar .bte-sig-btn { width: 100%; padding-left: 4px; padding-right: 4px; } /* ---- Rail head: "Custom Playlists / Now Queued [n]" -------------------- */ .bte-sig-rail__heading { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .bte-sig-rail__eyebrow { color: var(--sig-accent); font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-rail__head .bte-sig-rail__title { margin: 0; font-size: 26px; line-height: 1.04; font-weight: 800; color: var(--sig-text); display: flex; align-items: center; gap: 10px; } .bte-sig-rail__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--sig-accent); color: #fff; font-size: 13px; font-weight: 800; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Catalogue "+" button reflects active-playlist membership (becomes "−"). */ .bte-signature-portal .bte-list-row__action-btn--add.is-added { background: var(--sig-accent); border-color: var(--sig-accent); color: #fff; } .bte-signature-portal .bte-list-row__action-btn--add.is-added svg { display: none; } .bte-signature-portal .bte-list-row__action-btn--add.is-added::before { content: '−'; font-size: 18px; line-height: 1; color: #fff; } /* =================================================================== Lyrics drawer — ported from the fan frontend (left-anchored slide-in). signature.css is portal-only, so these unscoped classes are safe. =================================================================== */ .bte-lyrics-open { overflow: hidden; } .bte-lyrics-drawer { inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity 180ms ease; z-index: 10000; } .bte-lyrics-drawer.is-open { opacity: 1; pointer-events: auto; } .bte-lyrics-drawer__overlay { background: transparent; inset: 0; position: absolute; transition: background 180ms ease; } .bte-lyrics-drawer.is-top .bte-lyrics-drawer__overlay { background: rgba(0, 0, 0, 0.68); } .bte-lyrics-drawer__panel { background: #141414; border-right: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 20px 0 80px rgba(0, 0, 0, 0.55); color: #fff; height: 100%; left: 0; max-width: min(480px, 94vw); overflow: hidden; position: absolute; top: 0; transform: translateX(-100%); transition: transform 220ms ease; width: 480px; } .bte-lyrics-drawer.is-open .bte-lyrics-drawer__panel { transform: translateX(0); } /* Cascading watermark graphic behind the lyrics (mirrors common cover-art cascade). */ .bte-lyrics-drawer__watermark { background-position: center top; background-repeat: no-repeat; background-size: 118% auto; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity 200ms ease; z-index: 0; } .bte-lyrics-drawer__watermark.has-watermark { opacity: 0.15; } .bte-lyrics-drawer__inner { height: 100%; overflow-y: auto; padding: 28px; position: relative; z-index: 1; } .bte-lyrics-drawer__header { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 18px; } .bte-lyrics-drawer__eyebrow { color: #ff3b83; display: block; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; margin-bottom: 8px; text-transform: uppercase; } .bte-lyrics-drawer__close { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; color: #fff; cursor: pointer; flex-shrink: 0; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 10px; font-weight: 900; height: auto; letter-spacing: 0.14em; line-height: 1; padding: 7px 12px; text-transform: uppercase; transition: background 160ms ease, border-color 160ms ease; width: auto; } .bte-lyrics-drawer__close:hover, .bte-lyrics-drawer__close:focus { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); outline: none; } .bte-lyrics-drawer h3 { color: #ffffff; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.05em; line-height: 1.02; margin: 0 0 14px; } .bte-lyrics-drawer__credits { margin: 0 0 22px; } .bte-lyrics-drawer__credit { color: #d8d8d8; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.3; margin: 0 0 2px; } .bte-lyrics-drawer__credit-label { color: #ff3b83; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; margin-right: 6px; } .bte-lyrics-drawer__credit-value { font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-lyrics-drawer__content { color: #eeeeee; font-size: 17px; line-height: 1.72; white-space: normal; } .bte-lyrics-drawer__content p { margin: 0 0 1.15em; } /* =================================================================== Filter bar — Collection + Genre multi-select, styled to match the music-catalogue-test toolbar. Portal-only file, so unscoped. =================================================================== */ .bte-sig-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 0 22px; padding: 16px 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } .bte-sig-filterfield { display: grid; grid-template-rows: 20px 38px; /* label row + control row, fixed so all fields align */ gap: 6px; align-self: end; position: relative; } .bte-sig-filterfield--collection { min-width: 220px; } .bte-sig-filterfield--genre { min-width: 240px; } /* Field labels (Collection / Genre) and the Search label */ .bte-sig-filterfield > label, .bte-sig-search-head label[for="bte-sig-search"] { align-items: center; color: var(--sig-accent); display: flex; font-size: 10px; font-weight: 900; letter-spacing: 0.16em; margin: 0; text-transform: uppercase; } .bte-sig-filterselect { appearance: none; -webkit-appearance: none; background-color: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; color: #fff; font: inherit; font-size: 13px; font-weight: 600; min-height: 38px; padding: 0 30px 0 14px; width: 100%; cursor: pointer; transition: border-color 160ms ease, background 160ms ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' fill-opacity='0.45' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .bte-sig-filterselect:focus { outline: none; background-color: rgba(232, 10, 104, 0.12); border-color: rgba(232, 10, 104, 0.6); box-shadow: 0 0 0 2px rgba(232, 10, 104, 0.18); } .bte-sig-filterselect option { background: #1e1e1e; color: #fff; } .bte-sig-filterbar__reset { margin-left: auto; align-self: flex-end; background: var(--sig-accent); border: 0; border-radius: 12px; color: #fff; font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; min-height: 38px; padding: 0 20px; cursor: pointer; transition: background 160ms ease; } .bte-sig-filterbar__reset:hover { background: #ff4f93; } /* ---- Genre multi-select widget (ported from the fan toolbar) ------- */ .bte-genre-multi { align-items: center; appearance: none; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; box-sizing: border-box; color: #fff; cursor: pointer; display: flex; font-size: 13px; font-weight: 600; gap: 6px; min-height: 38px; justify-content: space-between; outline: none; padding: 0 14px; position: relative; transition: border-color 160ms ease, background 160ms ease; user-select: none; width: 100%; } .bte-genre-multi:focus, .bte-genre-multi[aria-expanded="true"] { background: rgba(232, 10, 104, 0.12); border-color: rgba(232, 10, 104, 0.6); box-shadow: 0 0 0 2px rgba(232, 10, 104, 0.18); } .bte-genre-multi__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bte-genre-multi__arrow { color: rgba(255, 255, 255, 0.45); flex-shrink: 0; font-size: 11px; transition: transform 160ms ease; } .bte-genre-multi[aria-expanded="true"] .bte-genre-multi__arrow { transform: rotate(180deg); } .bte-genre-multi__dropdown { background: #1c1c1e; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55); display: none; left: 0; max-height: 280px; min-width: 220px; overflow-y: auto; padding: 6px; position: absolute; top: calc(100% + 5px); width: 100%; z-index: 200; } .bte-genre-multi__dropdown::-webkit-scrollbar { width: 4px; } .bte-genre-multi__dropdown::-webkit-scrollbar-track { background: transparent; } .bte-genre-multi__dropdown::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; } .bte-genre-multi[aria-expanded="true"] .bte-genre-multi__dropdown { display: block; } .bte-genre-multi__option input[type="checkbox"] { display: none; } .bte-genre-multi__option { align-items: center; border-left: 4px solid transparent; border-radius: 8px; color: #fff; cursor: pointer; display: flex; padding: 8px 12px; text-transform: none; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .bte-genre-multi__option:hover { background: rgba(255, 255, 255, 0.07); } .bte-genre-multi__option.is-checked { background: rgba(232, 10, 104, 0.12); border-left-color: var(--sig-accent); } .bte-genre-multi__check { display: none; } .bte-genre-multi__name { color: #fff; flex: 1 1 auto; font-size: 13px; font-weight: 600; line-height: 1.25; overflow: hidden; padding-left: 8px; text-overflow: ellipsis; white-space: nowrap; text-transform: none; } .bte-genre-multi__count { color: rgba(255, 255, 255, 0.45); flex-shrink: 0; font-size: 12px; font-weight: 600; margin-left: 8px; } .bte-genre-multi__option.is-checked .bte-genre-multi__name, .bte-genre-multi__option.is-checked .bte-genre-multi__count { color: #ff4f93; font-weight: 800; } .bte-genre-multi__option--all { appearance: none; background: transparent; border: 0; border-left: 4px solid transparent; font: inherit; text-align: left; width: 100%; } .bte-genre-multi__option--all.is-checked { background: rgba(232, 10, 104, 0.12); border-left-color: var(--sig-accent); } /* Bulletproof hide for the filter view toggles (guards against theme overrides). */ [data-bte-default-view][hidden], .bte-sig-section--filtered[hidden] { display: none !important; } /* ---- Search field + Exclude-lyrics (restored, fan-styled) ---------- */ .bte-sig-filterfield--search { flex: 1 1 300px; min-width: 240px; } .bte-sig-search-head { display: flex; align-items: center; justify-content: flex-start; gap: 15px; /* Exclude lyrics sits ~15px left of "SEARCH" */ } .bte-sig-exclude { display: inline-flex; align-items: center; gap: 6px; color: var(--sig-muted); font-size: 11px; cursor: pointer; margin: 0; text-transform: none; letter-spacing: normal; } .bte-sig-exclude input { accent-color: var(--sig-accent); margin: 0; } .bte-signature-portal .bte-sig-searchinput { appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 12px !important; color: #fff !important; font: inherit; font-size: 13px; font-weight: 600; height: 38px !important; min-height: 38px !important; padding: 0 14px !important; width: 100%; box-shadow: none !important; transition: border-color 160ms ease, background 160ms ease; } .bte-signature-portal .bte-sig-searchinput::placeholder { color: rgba(255, 255, 255, 0.4) !important; } .bte-signature-portal .bte-sig-searchinput:focus { outline: none; background: rgba(232, 10, 104, 0.12) !important; border-color: rgba(232, 10, 104, 0.6) !important; box-shadow: 0 0 0 2px rgba(232, 10, 104, 0.18) !important; } /* ---- Collection custom dropdown (enhanced native