/* ── PAU Music Player ─────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Syne+Mono&display=swap'); /* ── Reset ───────────────────────────────────────────────────────────────── */ .pmp-wrap *, .pmp-wrap *::before, .pmp-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Light mode variables (default) ─────────────────────────────────────── */ .pmp-wrap { --text: #111111; --muted: #999999; --border: rgba(0,0,0,.1); --surface2: rgba(0,0,0,.04); --surface3: rgba(0,0,0,.07); --active-bg: rgba(0,0,0,.06); --radius: 6px; --player-h: 72px; --sidebar-w: 300px; font-family: 'Syne', sans-serif; color: var(--text); background: transparent; width: 90%; max-width: 1400px; margin: 0 auto; padding-top: 50px; /* home/album shortcode pages only; zeroed on sound pages */ } /* ── Dark mode: Darkify adds darkify_dark_mode_enabled to ─────────── */ html.darkify_dark_mode_enabled .pmp-wrap { --text: #bebebe; --muted: #555555; --border: rgba(255,255,255,.09); --surface2: rgba(255,255,255,.05); --surface3: rgba(255,255,255,.08); --active-bg: rgba(255,255,255,.07); } /* ── Page wrap — Sound CPT single pages ─────────────────────────────────── */ /* All layout for sound pages is in single-sound.php inline styles. */ /* This block only handles transparency of WP block wrappers. */ .pmp-page-wrap { background: transparent !important; background-color: transparent !important; } /* Sidebar albums: scrollable within sidebar flex column */ .pmp-page-wrap .pmp-sidebar-albums { flex: 1; overflow-y: auto; min-height: 0; } /* Remove sticky — active album now renders first in DOM instead */ .pmp-page-wrap .pmp-album-nav-item.pmp-album-active { background: var(--active-bg); } /* ── Home page wrapper: push down 50px on desktop ───────────────────────── */ .pmp-home-wrap { margin-top: 50px; } /* Force all WP FSE block wrappers on Sound pages to be transparent */ body.single-sound .wp-site-blocks, body.single-sound main, body.single-sound .wp-block-group, body.single-sound .wp-block-post-content, body.single-sound .entry-content, body.single-sound .wp-block-template-part:not(header):not([data-slug="header"]) { background: transparent !important; background-color: transparent !important; } /* Hide footer on Sound pages */ body.single-sound footer, body.single-sound .wp-block-template-part[data-slug="footer"], body.single-sound #colophon, body.single-sound .site-footer { display: none !important; } /* ── App grid ────────────────────────────────────────────────────────────── */ .pmp-app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: 1fr var(--player-h); height: 100%; min-height: 500px; overflow: hidden; /* Clip the sidebar border at the top of the player, not the page top */ border-top: 0px solid var(--border); } /* ── Scrollbars ──────────────────────────────────────────────────────────── */ .pmp-sidebar::-webkit-scrollbar, .pmp-main::-webkit-scrollbar { width: 4px; } .pmp-sidebar::-webkit-scrollbar-thumb, .pmp-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 2px; } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ .pmp-sidebar { grid-row: 1; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; padding: 20px 0; } .pmp-sidebar-brand { display: none; } .pmp-albums-nav-title { font-size: 10px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; padding: 0 18px; } .pmp-sidebar-albums { padding: 4px 0 20px; flex: 1; } .pmp-album-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 18px; text-decoration: none; color: var(--text); transition: background .15s; margin-bottom: 2px; } .pmp-album-nav-item:hover { background: var(--surface2); } .pmp-album-nav-item.pmp-album-active { background: var(--active-bg); } .pmp-album-nav-thumb { width: 40px; height: 40px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--surface3); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); } .pmp-album-nav-thumb img { width: 100%; height: 100%; object-fit: cover; } .pmp-album-nav-info { display: flex; flex-direction: column; min-width: 0; } .pmp-album-nav-name { font-size: 13px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .pmp-album-nav-year { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: 'Syne Mono', monospace; } /* Home sidebar larger thumbs */ .pmp-home-sidebar .pmp-album-nav-thumb { width: 80px; height: 80px; border-radius: 5px; } .pmp-home-sidebar .pmp-album-nav-item { align-items: center; padding: 10px 18px; } .pmp-home-sidebar .pmp-album-nav-name { font-size: 14px; } /* Disc nav */ .pmp-sidebar-discs { padding: 0 18px 20px; } .pmp-disc-nav-title { font-size: 10px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; } .pmp-disc-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius); cursor: pointer; transition: background .15s; margin-bottom: 2px; text-decoration: none; color: var(--text); } .pmp-disc-nav-item:hover { background: var(--surface2); } .pmp-disc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--disc-color, var(--text)); opacity: .5; } .pmp-disc-nav-name { font-size: 12px; letter-spacing: .04em; } .pmp-disc-nav-count { margin-left: auto; font-size: 11px; color: var(--muted); font-family: 'Syne Mono', monospace; } /* ── Main ────────────────────────────────────────────────────────────────── */ .pmp-main { grid-column: 2; grid-row: 1; overflow-y: auto; } /* ── Hero ────────────────────────────────────────────────────────────────── */ .pmp-hero { padding: 36px 44px 28px; display: flex; align-items: flex-start; gap: 28px; } .pmp-hero-cover { width: 320px; height: 320px; flex-shrink: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.15); align-self: flex-start; } .pmp-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .pmp-hero-info { flex: 1; min-width: 0; text-align: left !important;} .pmp-hero-type { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); margin-bottom: 8px; font-weight: 600; text-align: left !important; } h1{ font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); margin-bottom: 8px; font-weight: 600; text-align: left !important; } .pmp-hero-title { font-size: clamp(28px, 3.5vw, 52px); font-weight: 800; letter-spacing: .04em; line-height: 1.05; margin-bottom: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; } .pmp-hero-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pmp-hero-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface3); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: opacity .15s; border: 1.5px solid var(--border); } .pmp-hero-avatar:hover { opacity: .7; } .pmp-hero-avatar img { width: 100%; height: 100%; object-fit: cover; } .pmp-hero-artist-name { font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--text); } .pmp-hero-meta-sep { color: var(--muted); font-size: 11px; } .pmp-hero-count { font-size: 12px; color: var(--muted); } .pmp-hero-desc { margin-top: 14px; max-width: 560px; font-size: 13px; line-height: 1.75; color: var(--muted); } .pmp-intro-read-more { background: none; border: none; cursor: pointer; color: var(--text); font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 0; margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; } .pmp-intro-read-more:hover { opacity: .6; } /* ── Controls bar ────────────────────────────────────────────────────────── */ .pmp-controls-bar { padding: 22px 44px 0; display: flex; align-items: center; gap: 16px; } .pmp-btn-play-main { width: 46px; height: 46px; border-radius: 50%; background: var(--cover-gradient, #333); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: filter .15s, transform .1s; flex-shrink: 0; box-shadow: 0 3px 12px rgba(0,0,0,.2); } .pmp-btn-play-main:hover { filter: brightness(1.15); transform: scale(1.06); } .pmp-btn-play-main svg { width: 20px; height: 20px; fill: currentColor; } .pmp-btn-icon { background: none; border: none; cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 50%; transition: color .15s; opacity: .6; } .pmp-btn-icon:hover, .pmp-btn-icon.active { color: var(--text); opacity: 1; } .pmp-btn-icon svg { width: 18px; height: 18px; fill: currentColor; } .pmp-btn-buy { padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px; background: none; color: var(--text); font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: border-color .15s; } .pmp-btn-buy:hover { border-color: var(--text); } .pmp-btn-link { text-decoration: none; } /* ── Modals ──────────────────────────────────────────────────────────────── */ .pmp-modal-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); align-items: center; justify-content: center; } .pmp-modal-overlay.pmp-open { display: flex; } .pmp-modal-box { position: absolute; inset: 5%; background: #fff; color: #111; border-radius: 10px; overflow-y: auto; padding: 50px 52px; } html.darkify_dark_mode_enabled .pmp-modal-box { background: #1a1a1a; color: #bebebe; } .pmp-avatar-modal-box { position: absolute; inset: 10%; background: #111; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .pmp-avatar-modal-box img { width: 100%; height: 100%; object-fit: contain; } .pmp-modal-close { position: absolute; top: 18px; right: 22px; background: none; border: none; cursor: pointer; color: #888; font-size: 20px; z-index: 1; } .pmp-modal-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #888; margin-bottom: 24px; } .pmp-modal-body { font-size: 15px; line-height: 1.85; white-space: pre-wrap; } /* ── Tracklist ───────────────────────────────────────────────────────────── */ .pmp-tracklist-section { padding: 28px 44px 120px; } .pmp-disc-block { margin-bottom: 36px; } .pmp-disc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .pmp-disc-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface3); } .pmp-disc-icon svg { width: 15px; height: 15px; fill: var(--disc-color, var(--text)); } .pmp-disc-label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; } .pmp-disc-name { font-size: 16px; font-weight: 700; letter-spacing: .05em; color: var(--text); } .pmp-disc-track-count { margin-left: auto; font-size: 11px; color: var(--muted); font-family: 'Syne Mono', monospace; } .pmp-track-list-header { display: grid; grid-template-columns: 40px 1fr 60px; padding: 0 12px 8px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .pmp-track-row { display: grid; grid-template-columns: 40px 1fr 60px; align-items: center; padding: 6px 12px; border-radius: var(--radius); cursor: pointer; transition: background .12s; user-select: none; } .pmp-track-row:hover { background: var(--surface2); } .pmp-track-row:hover .pmp-track-num { display: none; } .pmp-track-row:hover .pmp-track-play-hover { display: flex !important; } .pmp-track-row.pmp-active { background: var(--active-bg); } .pmp-track-num { font-family: 'Syne Mono', monospace; font-size: 12px; color: var(--muted); text-align: right; padding-right: 4px; } .pmp-track-play-hover { display: none; align-items: center; justify-content: flex-end; padding-right: 4px; color: var(--text); } .pmp-track-play-hover svg { width: 15px; height: 15px; fill: currentColor; } .pmp-track-info { min-width: 0; padding: 0 12px; } .pmp-track-title { font-size: 13px; font-weight: 500; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .pmp-track-artist { font-size: 11px; color: var(--muted); margin-top: 2px; } .pmp-track-dur { font-family: 'Syne Mono', monospace; font-size: 11px; color: var(--muted); text-align: right; } /* ── Player bar ──────────────────────────────────────────────────────────── */ .pmp-player-bar { grid-column: 1 / 3; grid-row: 2; border-top: 1px solid var(--border); background: transparent; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: 0 28px; height: var(--player-h); gap: 14px; z-index: 100; } .pmp-player-track { display: flex; align-items: center; gap: 12px; min-width: 0; } .pmp-player-thumb { width: 42px; height: 42px; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: var(--surface3); } .pmp-player-thumb img { width: 100%; height: 100%; object-fit: cover; } .pmp-player-track-info { min-width: 0; } .pmp-player-controls { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; } .pmp-player-btns { display: flex; align-items: center; gap: 14px; } .pmp-player-btn { background: none; border: none; cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 50%; transition: color .12s; opacity: .6; } .pmp-player-btn:hover { color: var(--text); opacity: 1; } .pmp-player-btn svg { width: 18px; height: 18px; fill: currentColor; } .pmp-play-pause { background: var(--cover-gradient, #111) !important; color: #fff !important; width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.2); opacity: 1 !important; } .pmp-play-pause:hover { filter: brightness(1.15); transform: scale(1.05); } .pmp-play-pause svg { width: 16px; height: 16px; } .pmp-progress-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; } .pmp-time { font-family: 'Syne Mono', monospace; font-size: 10px; color: var(--muted); min-width: 34px; text-align: center; line-height: 1; } .pmp-progress-bar { flex: 1; height: 18px; background: transparent; border-radius: 2px; cursor: pointer; position: relative; display: flex; align-items: center; } .pmp-progress-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 3px; background: rgba(128,128,128,0.3); border-radius: 2px; } .pmp-progress-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 3px; background: var(--cover-color, #888); border-radius: 2px; width: 0%; pointer-events: none; transition: width .1s linear; } .pmp-player-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .pmp-volume-row { display: flex; align-items: center; gap: 6px; } .pmp-volume-bar { width: 70px; height: 18px; background: transparent; border-radius: 2px; cursor: pointer; position: relative; display: flex; align-items: center; } .pmp-volume-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 3px; background: rgba(128,128,128,0.3); border-radius: 2px; } .pmp-volume-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 3px; background: var(--cover-color, #888); border-radius: 2px; width: 70%; pointer-events: none; } /* Track title: always legible on both light and dark player bars */ .pmp-player-track-title { font-size: 12px; font-weight: 600; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #bebebe !important; } .pmp-player-track-artist { font-size: 10px; color: #777 !important; letter-spacing: .05em; margin-top: 2px; } /* ── Injected site nav ───────────────────────────────────────────────────── */ .pmp-site-nav { display: flex; align-items: center; margin-top: 10px; padding-left: 16px; } .pmp-site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; align-items: center; flex-wrap: wrap; } .pmp-site-nav ul li a { font-size: 16.8px; font-weight: 500; letter-spacing: .04em; color: inherit; text-decoration: none; transition: opacity .15s; } .pmp-site-nav ul li a:hover { opacity: .5; } /* ── Mobile hamburger nav — class-based, Darkify-proof ──────────────────── */ .pmp-mobile-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: transparent; height: 55px; display: flex; align-items: center; padding: 0 20px; pointer-events: none; isolation: isolate; transform: translateZ(0); } .pmp-mobile-nav > * { pointer-events: all; } /* Background overlay — color set by CSS so Darkify JS cannot strip it */ .pmp-nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9990; background-color: #0a0a0a !important; } html:not(.darkify_dark_mode_enabled) .pmp-nav-overlay { background-color: #ffffff !important; } .pmp-nav-overlay.pmp-open { display: block; } /* Links list */ .pmp-nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9995; list-style: none; margin: 0; padding: 80px 28px 0 0; flex-direction: column; align-items: flex-end; pointer-events: none; } .pmp-nav-links.pmp-open { display: flex; pointer-events: all; } .pmp-nav-links li { width: 100%; text-align: right; } .pmp-nav-links li a { display: block; padding: 14px 0; font-size: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: none; transition: opacity .15s; color: #bebebe !important; } html:not(.darkify_dark_mode_enabled) .pmp-nav-links li a { color: #111111 !important; } .pmp-nav-links li a:hover { opacity: .5; } /* X close button */ .pmp-mobile-nav-close { display: none; position: fixed; top: 14px; right: 20px; background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1; padding: 4px; z-index: 10000; color: #bebebe; } html:not(.darkify_dark_mode_enabled) .pmp-mobile-nav-close { color: #111111; } .pmp-mobile-nav-close.pmp-open { display: block; } /* Hamburger: 2 equal lines, color set by JS (beats Darkify timing) */ .pmp-hamburger { background: none; border: none; cursor: pointer; padding: 4px; margin-right: auto; margin-left: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } .pmp-hamburger span { display: block; height: 2px; width: 22px; background: currentColor; border-radius: 2px; } /* ── Home layout ─────────────────────────────────────────────────────────── */ .pmp-home-wrap .pmp-home-app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: 1fr var(--player-h); height: calc(100vh - 160px); min-height: 500px; overflow: hidden; } .pmp-home-sidebar { grid-column: 1; grid-row: 1; overflow-y: auto; } .pmp-home-main { grid-column: 2; grid-row: 1; overflow-y: auto; } .pmp-home-player-bar { grid-column: 1 / 3; grid-row: 2; } .pmp-home-controls { padding: 28px 44px 0; display: flex; align-items: center; gap: 16px; } .pmp-home-section { padding: 24px 44px 80px; } .pmp-home-section-title { font-size: 18px; font-weight: 800; letter-spacing: .05em; margin-bottom: 16px; color: var(--text); } .pmp-home-intro { padding: 0 44px; max-width: 680px; font-size: 14px; line-height: 1.8; color: var(--muted); margin-bottom: 8px; } .pmp-home-intro p { margin: 0 0 10px; } .pmp-home-track-list-header { display: grid; grid-template-columns: 40px 1fr 1fr 60px; padding: 0 12px 8px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .pmp-home-track { grid-template-columns: 40px 1fr 1fr 60px !important; } .pmp-home-track-album { display: flex; align-items: center; gap: 8px; min-width: 0; } .pmp-home-track-cover { width: 28px; height: 28px; border-radius: 3px; object-fit: cover; flex-shrink: 0; } .pmp-home-track-cover-link { display: block; flex-shrink: 0; border-radius: 3px; overflow: hidden; } .pmp-home-track-album-name { font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; } .pmp-home-track-album-name:hover { color: var(--text); text-decoration: underline; } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 860px) { .pmp-wrap { width: 100%; padding-top: 20px; } /* Sound pages: layout fully handled by single-sound.php — skip these rules */ /* Generic .pmp-app (home page shortcode, not sound CPT) */ body:not(.single-sound) .pmp-app { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; border-top: none; } body:not(.single-sound) .pmp-sidebar { flex-direction: column; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 12px 0; max-height: 200px; } body:not(.single-sound) .pmp-main { overflow-y: visible; flex: 1; } /* Player bar fixed at viewport bottom — only on NON-sound pages */ body:not(.single-sound) .pmp-player-bar { position: fixed; bottom: 0; left: 0; right: 0; grid-column: auto; grid-row: auto; grid-template-columns: 1fr auto; z-index: 9999; padding: 0 16px; background: rgba(15,15,15,.97) !important; backdrop-filter: blur(12px); border-top: 1px solid var(--border); height: var(--player-h); } html:not(.darkify_dark_mode_enabled) body:not(.single-sound) .pmp-player-bar { background: rgba(255,255,255,.97) !important; } body:not(.single-sound) .pmp-tracklist-section { padding-bottom: 90px; } body:not(.single-sound) .pmp-player-right { display: flex; } body:not(.single-sound) .pmp-volume-bar { display: none; } .pmp-hero { padding: 20px 16px; flex-direction: column; } .pmp-hero-cover { width: 100%; height: auto; aspect-ratio: 1; max-width: 240px; } .pmp-controls-bar { padding: 16px 16px 0; } .pmp-tracklist-section { padding: 20px 16px 90px; } /* ── Home page mobile ── */ .pmp-home-wrap { margin-top: 20px; } .pmp-home-wrap .pmp-home-app { display: flex; flex-direction: column; height: auto; min-height: 0; overflow: visible; } /* Reorder: main (selected songs) first, then sidebar (all releases) */ .pmp-home-sidebar { order: 2; flex: 0 0 auto; max-height: 220px; overflow-y: auto; border-right: none; border-top: 1px solid var(--border); } .pmp-home-main { order: 1; overflow-y: visible; flex: 1; } /* Player bar stays last */ .pmp-home-wrap .pmp-home-app > .pmp-player-bar { order: 3; } .pmp-home-controls { padding: 16px 16px 0; } .pmp-home-section { padding: 16px 16px 90px; } .pmp-home-intro { padding: 0 16px; } .pmp-home-track { grid-template-columns: 40px 1fr 60px !important; } .pmp-home-track-album { display: none; } .pmp-home-track-list-header { grid-template-columns: 40px 1fr 60px; } .pmp-home-track-list-header span:nth-child(3) { display: none; } .pmp-modal-box { padding: 36px 20px; inset: 5% 2%; } }