/* ═══════════════════════════════════════════════════════════════════════ PIANOMODE — LISTEN & PLAY 2026 Light gold theme · BEM · Correct brand palette ═══════════════════════════════════════════════════════════════════════ */ /* ── Design Tokens (matching PianoMode brand) ───────────────────────── */ :root { /* Brand Gold — --pm-gold / --pm-gold-dark / --pm-gold-light / --pm-gold-pale inherited from the canonical design system (assets/design-system.css). Only the local deeper shade and the rgba helpers stay here. */ --pm-gold-deeper: #A0894A; --pm-gold-glow: rgba(215, 191, 129, .25); --pm-gold-border: rgba(215, 191, 129, .35); --pm-gold-bg: rgba(215, 191, 129, .08); --pm-spotify: #1DB954; /* Surfaces */ --pm-surface: #fafbfc; --pm-surface-alt: #f3f4f6; --pm-dark: #0B0B0B; --pm-dark-soft: #1a1a1a; /* Text */ --pm-text-2: #666666; --pm-text-3: #999999; --pm-text-inv: #f9fafb; /* Borders */ --pm-border-hover: rgba(0,0,0,.12); /* Shadows */ --pm-shadow-xs: 0 1px 2px rgb(0 0 0 / .04); --pm-shadow-sm: 0 2px 8px rgb(0 0 0 / .06); --pm-shadow-md: 0 4px 20px rgb(0 0 0 / .08); --pm-shadow-lg: 0 12px 40px rgb(0 0 0 / .10); --pm-shadow-xl: 0 24px 60px rgb(0 0 0 / .14); /* Radius */ --pm-r-sm: 8px; --pm-r-md: 12px; --pm-r-lg: 20px; --pm-r-xl: 28px; --pm-r-full: 9999px; /* Spacing */ --pm-gap: 24px; /* Transitions */ --pm-ease: cubic-bezier(.4, 0, .2, 1); --pm-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --pm-dur: .3s; --pm-dur-slow: .5s; /* Layout */ --pm-container: 1200px; --pm-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ── Page-scoped surface / text / border tokens ───────────────────────── --pm-white / --pm-text / --pm-border are GLOBAL design-system tokens (assets/design-system.css). This stylesheet loads AFTER it, so redefining them at :root used to hijack the site-wide values — e.g. --pm-text cream (#F5EFE3) → near-black (#1a1a1a) — which turned the shared header/footer titles dark/invisible on every page that loads this file. Scope the local light-gold values to the Listen & Play component roots so only these components use them; the global tokens stay intact everywhere else. */ .pm-lp-hero, .pm-lp-transition, .pm-lp-featured, .pm-lp-tabs, .pm-lp-tabpanel, .pm-lp-finder, .pm-lp-scores, .pm-lp-spotify, .pm-lp-faq, .pm-lp-loader { --pm-white: #ffffff; --pm-text: #1a1a1a; --pm-border: rgba(0,0,0,.06); } /* ── Reset ──────────────────────────────────────────────────────────── */ /* Root cause of "the background is not full width": something on the page overflows horizontally, so the page scrolls sideways and the section backgrounds (viewport wide) stop short, revealing a strip. Clip horizontal overflow at the page level. This stylesheet only loads on the Listen & Play template, and overflow-x:clip (unlike hidden) does NOT break the sticky tabs. */ html { overflow-x: clip; } .pm-lp-hero, .pm-lp-finder, .pm-lp-scores, .pm-lp-spotify, .pm-lp-transition, .pm-lp-loader { box-sizing: border-box; font-family: var(--pm-font); } .pm-lp-hero *, .pm-lp-finder *, .pm-lp-scores *, .pm-lp-spotify *, .pm-lp-loader * { box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════════════ 1. HERO — Dark overlay (matching Play page), single score image ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-hero { position: relative; /* Compact editorial hero, matching the Learn hero: sized to its content plus generous padding, NOT the full viewport, so the page continues below it. The bottom padding reserves room for the stats strip pinned to the bottom. */ min-height: clamp(440px, 64vh, 660px); display: flex; align-items: center; justify-content: center; overflow: hidden; /* The photograph is an child (see .pm-lp-hero__img); this stays as the ground it sits on, and as the whole hero when there is no photograph. */ background-color: var(--pm-dark); padding: clamp(20px, 4vh, 44px) 24px clamp(80px, 10vh, 112px); margin-bottom: 0; } /* The hero photograph. It was an inline background-image on .pm-lp-hero, paired with a naming the same file — two names for one picture, which stopped agreeing the moment LiteSpeed's WebP pass rewrote one of them and not the other (the browser then downloaded a full-size PNG it never displayed). As an it is named once, rewritten like every other image, and found by the preload scanner without a preload tag. Sits under everything: the overlay is z-index 1, the bottom fade and the floating notes are 2. The section keeps its dark background-color, so a piece with no artwork simply shows the dark ground. */ .pm-lp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; } /* Smooth bottom fade from hero dark to page surface */ .pm-lp-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, transparent, var(--pm-surface)); z-index: 2; pointer-events: none; } /* Dark overlay — stronger to dim hero image */ .pm-lp-hero__overlay { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(0, 0, 0, .82) 0%, rgba(10, 10, 10, .78) 50%, rgba(0, 0, 0, .88) 100% ); z-index: 1; } /* Floating notes (gold on dark bg) */ .pm-lp-hero__notes { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .pm-lp-hero__note { position: absolute; font-size: clamp(1.2rem, 2.5vw, 2rem); color: var(--pm-gold-light); opacity: 0; animation: pm-lp-float 12s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(215,191,129,.3)); } .pm-lp-hero__note:nth-child(1) { left:5%; top:20%; animation-delay:0s; animation-duration:11s; } .pm-lp-hero__note:nth-child(2) { left:15%; top:60%; animation-delay:1.5s; animation-duration:13s; } .pm-lp-hero__note:nth-child(3) { left:25%; top:30%; animation-delay:3s; animation-duration:10s; } .pm-lp-hero__note:nth-child(4) { left:45%; top:70%; animation-delay:2s; animation-duration:14s; } .pm-lp-hero__note:nth-child(5) { left:60%; top:15%; animation-delay:4s; animation-duration:12s; } .pm-lp-hero__note:nth-child(6) { left:70%; top:55%; animation-delay:1s; animation-duration:11s; } .pm-lp-hero__note:nth-child(7) { left:85%; top:25%; animation-delay:3.5s; animation-duration:13s; } .pm-lp-hero__note:nth-child(8) { left:92%; top:65%; animation-delay:2.5s; animation-duration:10s; } @keyframes pm-lp-float { 0% { opacity: 0; transform: translateY(30px) rotate(-8deg); } 15% { opacity: .45; } 50% { opacity: .3; transform: translateY(-20px) rotate(8deg); } 85% { opacity: .45; } 100% { opacity: 0; transform: translateY(30px) rotate(-8deg); } } /* Content — white text on dark bg (matching Play page) */ .pm-lp-hero__content { position: relative; z-index: 3; text-align: center; max-width: 720px; color: var(--pm-white); } /* Title — same size & style as Play page hero */ .pm-lp-hero__title { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 800; line-height: 1.1; margin: 0 0 2rem; letter-spacing: -1px; font-family: var(--pm-font); } /* "Listen" — white, like "Play & Master" */ .pm-lp-hero__title-main { display: block; color: var(--pm-white); margin-bottom: .5rem; text-shadow: 0 4px 20px rgba(0, 0, 0, .5); animation: pm-lp-fadeInUp 1s ease-out .3s both; } /* "Piano Music" — exact same gold as "Piano Games" */ .pm-lp-hero__title-accent { display: block; background: linear-gradient(135deg, #E6D4A8 0%, #D7BF81 30%, #BEA86E 60%, #D7BF81 100%) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; color: transparent !important; font-family: var(--pm-font); filter: drop-shadow(0 4px 12px rgba(215, 191, 129, .5)); /* Promote to its own layer so the gradient text-clip never flashes a solid rectangle while it rises in. */ will-change: transform; /* Only the gold shimmer (background-position) and the one-time rise run here. The old titlePulse also animated transform, fighting the rise and making the gradient title glitch on entrance. */ animation: pm-lp-heroShimmer 3s ease-in-out infinite, pm-lp-fadeInUp 1s ease-out .4s both; } .pm-lp-hero__subtitle { font-size: clamp(.9rem, 1.5vw, 1.05rem); line-height: 1.7; color: rgba(255,255,255,.7); margin: 0 0 32px; max-width: 540px; margin-inline: auto; text-shadow: 0 2px 10px rgba(0, 0, 0, .3); animation: pm-lp-fadeInUp 1s ease-out .7s both; } /* Hero keyframes (matching Play page) */ @keyframes pm-lp-fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes pm-lp-heroShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes pm-lp-titlePulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(215,191,129,.3)); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 20px rgba(215,191,129,.6)); } } /* CTA Buttons */ .pm-lp-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; } .pm-lp-hero__btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: .88rem; font-weight: 700; font-family: var(--pm-font); border-radius: var(--pm-r-full); border: none; cursor: pointer; text-decoration: none; transition: all var(--pm-dur) var(--pm-ease); white-space: nowrap; } .pm-lp-hero__btn--primary { background: linear-gradient(135deg, var(--pm-gold) 0%, var(--pm-gold-dark) 100%); color: var(--pm-text-on-gold, #1b1505); box-shadow: 0 4px 20px var(--pm-gold-glow); } .pm-lp-hero__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(215,191,129,.45); } .pm-lp-hero__btn--secondary { background: rgba(255,255,255,.08); color: var(--pm-white); border: 1.5px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pm-lp-hero__btn--secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); transform: translateY(-2px); color: var(--pm-white); } /* Stats — gold numbers on dark bg */ .pm-lp-hero__stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; animation: pm-lp-fadeInUp 1s ease-out 1s both; } .pm-lp-hero__stat { text-align: center; min-width: 100px; } .pm-lp-hero__stat-num { display: block; font-size: 1.8rem; font-weight: 800; color: var(--pm-gold-light); line-height: 1.2; } .pm-lp-hero__stat-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); margin-top: 4px; display: block; } /* Gold scroll arrow — clickable button, no text */ .pm-lp-hero__scroll-arrow { position: absolute; bottom: clamp(40px, 6vh, 70px); left: 50%; transform: translateX(-50%); z-index: 3; width: 46px; height: 46px; border: 2px solid var(--pm-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--pm-gold); background: rgba(215,191,129,.08); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; padding: 0; font-family: var(--pm-font); animation: pm-lp-bounce 2.5s ease-in-out infinite; transition: background var(--pm-dur) var(--pm-ease), color var(--pm-dur) var(--pm-ease); } .pm-lp-hero__scroll-arrow:hover { background: var(--pm-gold); color: var(--pm-text-on-gold, #1b1505); } @keyframes pm-lp-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ═══════════════════════════════════════════════════════════════════════ HERO 2026: unified "editorial" hero, harmonized with the Learn page. This is the confirmed design-system hero pattern. The headline uses the legacy Montserrat treatment (heavy weight, white main line, gold gradient accent), the badge is a gold pill, the CTAs are a gold plus ghost pair, and the stats sit in a strip pinned to the bottom edge of the viewport. The Learn page implements the same pattern under .pm-lp-hero--learn-2026 (see learn/hero-learn.css); keep the two in sync. ═══════════════════════════════════════════════════════════════════════ */ /* The dimensional rules (height, padding, flex centering) live once on the base .pm-lp-hero above, so the Listen and Learn heroes can never drift apart. The --2026 modifier below only layers the editorial look: overlay, badge, title, buttons, and the bottom stats strip. */ /* Richer overlay than the flat base, matching the Learn hero. */ .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__overlay { background: var(--pm-hero-overlay); } /* Badge: gold pill (placement and look matched to the Learn hero). */ /* Title: legacy Montserrat, white main line plus gold gradient accent. */ .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__title { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 clamp(16px, 2.4vw, 28px); } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__title-main { display: block; color: var(--pm-white, #fff); margin-bottom: 0.4rem; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__title-accent { display: block; background: var(--pm-hero-title-accent); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 4px 12px rgba(215, 191, 129, 0.5)); } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__subtitle { font-size: clamp(15px, 2vw, 18px); line-height: 1.65; color: rgba(245, 239, 227, 0.82); max-width: 600px; margin: 0 auto clamp(20px, 3.2vw, 32px); } /* CTA: gold primary plus ghost secondary, matching the Learn hero. */ .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__btn { padding: 14px 24px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__btn--primary { background: #D7BF81; color: #0A0908; box-shadow: 0 8px 28px rgba(215, 191, 129, 0.32); } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__btn--primary:hover { background: #E8CF92; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(215, 191, 129, 0.50); color: #0A0908; } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__btn--secondary { background: rgba(245, 239, 227, 0.06); color: #F5EFE3; border-color: rgba(245, 239, 227, 0.25); } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__btn--secondary:hover { background: rgba(245, 239, 227, 0.12); border-color: #D7BF81; color: #D7BF81; } /* Stats strip: pinned to the bottom edge of the hero. */ .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__stats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: clamp(16px, 2vw, 22px) clamp(20px, 4vw, 56px); display: flex; justify-content: center; align-items: baseline; gap: clamp(20px, 4vw, 64px); flex-wrap: wrap; background: transparent; border: 0; } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__stat { display: inline-flex; align-items: baseline; gap: 10px; color: rgba(245, 239, 227, 0.55); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; min-width: 0; text-align: left; } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__stat strong { font-family: 'Fraunces', 'Times New Roman', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(22px, 3vw, 30px); letter-spacing: 0; color: #D7BF81; line-height: 1; } /* The bouncing scroll arrow would collide with the bottom stats strip, and the Learn hero has none, so hide it for harmony. */ .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__scroll-arrow { display: none; } /* Kill the base bottom fade so the hero butts cleanly against the tab switcher. */ .pm-lp-hero.pm-lp-hero--2026::after { content: none; } /* Glue the hero to the site header. Blocksy injects roughly 50px of content top spacing above the page content (via --theme-content-vertical-spacing). Left in place it pushes the hero down so it spills past the fold and the bottom stats strip is cut off, which is what made the Listen hero read taller than Learn. We zero that spacing on any page that renders this hero. :has keeps it working whatever the body classes are: the template can be applied by slug or by the Page Attributes dropdown, and Blocksy can rename the content wrappers. That body-class fragility is exactly why the previous fix looked like it did nothing. */ body:has(.pm-lp-hero--2026) { --theme-content-vertical-spacing: 0 !important; } body:has(.pm-lp-hero--2026) #main, body:has(.pm-lp-hero--2026) .site-main, body:has(.pm-lp-hero--2026) .ct-main-content, body:has(.pm-lp-hero--2026) .ct-container, body:has(.pm-lp-hero--2026) [class*="entry-content"] { padding-top: 0 !important; margin-top: 0 !important; } .pm-lp-hero--2026 { margin-top: 0 !important; } @media (max-width: 720px) { .pm-lp-hero.pm-lp-hero--2026 { padding: clamp(14px, 3vh, 28px) 18px clamp(74px, 16vw, 104px); } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__title { font-size: clamp(2rem, 9vw, 2.9rem); margin-bottom: 14px; } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__subtitle { font-size: 14px; line-height: 1.55; margin-bottom: 18px; } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__stats { gap: 16px; padding: 12px 16px 14px; } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__stat { font-size: 9.5px; letter-spacing: 0.14em; gap: 6px; } .pm-lp-hero.pm-lp-hero--2026 .pm-lp-hero__stat strong { font-size: 18px; } } /* ── Transition zone (smooth hero → content) ───────────────────────── */ .pm-lp-transition { display: none; } /* ═══════════════════════════════════════════════════════════════════════ 1b. FEATURED SCORES (most popular) — a contrasted highlight band ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-featured { padding: 28px 24px 30px; overflow-x: clip; /* the carousel can never push the page (or its bg) wide */ background: radial-gradient(120% 100% at 50% 0%, rgba(215,191,129,.16), transparent 60%), linear-gradient(180deg, #FBF7EC 0%, #F6EFDD 100%); border-top: 1px solid var(--pm-gold-border); border-bottom: 1px solid var(--pm-gold-border); } .pm-lp-featured__inner { max-width: var(--pm-container); margin: 0 auto; } .pm-lp-featured__head { text-align: center; margin-bottom: 18px; } /* Compact head: badge + a small h2 subtitle (no big title). The subtitle is an h2 for document structure, so reset the theme's heading size and spacing. */ .pm-lp-featured__head--compact { display: flex; flex-direction: column; align-items: center; gap: 10px; } .pm-lp-featured__head--compact .pm-lp-featured__sub { font-size: 14px; font-weight: 600; color: var(--pm-text); margin: 0; padding: 0; line-height: 1.35; letter-spacing: -.01em; } /* Only "Most Loved" still prints a chip here. The Library and Good to know were removed from the markup on 2026-09-20 with the rest of the site's badges, so their selectors go with them rather than sit in the sheet waiting to style markup that no longer exists. */ .pm-lp-featured__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pm-gold-deeper); padding: 5px 14px; border-radius: var(--pm-r-full); background: rgba(215,191,129,.14); border: 1px solid var(--pm-gold-border); } .pm-lp-featured__eyebrow svg { color: var(--pm-gold-dark); } .pm-lp-featured__title, .pm-lp-faq__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--pm-text); margin: 14px 0 6px; letter-spacing: -.02em; } /* With the chip and the subtitle gone the heading is the whole head, so it no longer needs the 14px that used to separate it from the chip above. */ .pm-lp-faq__head .pm-lp-faq__title { margin-top: 0; margin-bottom: 0; } .pm-lp-featured__title-gold, .pm-lp-faq__title-gold { background: linear-gradient(135deg, var(--pm-gold-deeper), var(--pm-gold-dark) 50%, var(--pm-gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* .pm-lp-featured__sub is the Featured section's H2, not a subtitle. The FAQ's real subtitle was removed with its chip. */ .pm-lp-featured__sub { color: var(--pm-text-2); font-size: 14.5px; margin: 0; } /* Carousel: three cards visible, arrows page through the top nine. */ .pm-lp-featured__carousel { position: relative; display: flex; align-items: center; gap: 12px; } /* min-width:0 lets the viewport shrink to the row width (without it a flex item keeps its content width, so the track would push the page wide). The vertical padding gives the hover lift and the card drop-shadow room, so neither the top on hover nor the shadow at the bottom gets clipped. */ .pm-lp-featured__viewport { overflow: hidden; flex: 1 1 auto; min-width: 0; padding: 8px 0 12px; } .pm-lp-featured__track { display: flex; gap: 22px; align-items: stretch; transition: transform .5s var(--pm-ease-smooth, cubic-bezier(.22,1,.36,1)); will-change: transform; } .pm-lp-featured__track .pm-lp-feat { flex: 0 0 calc((100% - 44px) / 3); } .pm-lp-featured__nav { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--pm-gold-deeper); background: var(--pm-white); border: 1px solid var(--pm-gold-border); box-shadow: var(--pm-shadow-sm); transition: background var(--pm-dur) var(--pm-ease), color var(--pm-dur) var(--pm-ease), opacity var(--pm-dur) var(--pm-ease), transform var(--pm-dur) var(--pm-ease); } .pm-lp-featured__nav:hover { background: var(--pm-gold); color: var(--pm-dark); transform: scale(1.06); } .pm-lp-featured__nav:disabled { opacity: .3; cursor: default; pointer-events: none; } @media (max-width: 900px) { .pm-lp-featured__track .pm-lp-feat { flex-basis: 100%; } .pm-lp-featured__track { gap: 16px; } } .pm-lp-feat { display: flex; flex-direction: column; background: var(--pm-white); border: 1px solid var(--pm-gold-border); border-radius: var(--pm-r-lg); overflow: hidden; /* No drop-shadow: the carousel clips it into a square edge. The border plus the background contrast define the card; hover lifts and brightens it. */ transition: transform var(--pm-dur) var(--pm-ease), border-color var(--pm-dur) var(--pm-ease); } .pm-lp-feat:hover { transform: translateY(-3px); border-color: var(--pm-gold); } .pm-lp-feat__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #141414, #0f0f0f); } .pm-lp-feat__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--pm-dur-slow) var(--pm-ease); } .pm-lp-feat:hover .pm-lp-feat__bg { transform: scale(1.06); } .pm-lp-feat__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,7,5,.12) 0%, rgba(8,7,5,.5) 100%); } .pm-lp-feat__rank { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 10px; font-size: 14px; font-weight: 800; color: var(--pm-dark); background: linear-gradient(135deg, var(--pm-gold-light), var(--pm-gold)); border-radius: var(--pm-r-full); box-shadow: 0 4px 14px rgba(0,0,0,.28); } .pm-lp-feat__level { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pm-gold-light); padding: 5px 11px; border-radius: var(--pm-r-full); background: rgba(11,11,11,.7); border: 1px solid rgba(215,191,129,.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .pm-lp-feat__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; } .pm-lp-feat__title-link { text-decoration: none; } .pm-lp-feat__title { font-size: 17px; font-weight: 700; color: var(--pm-text); margin: 0; line-height: 1.3; letter-spacing: -.01em; transition: color var(--pm-dur) var(--pm-ease); } .pm-lp-feat__title-link:hover .pm-lp-feat__title { color: var(--pm-gold-deeper); } .pm-lp-feat__composer { font-size: 13px; color: var(--pm-text-2); margin: 0; font-style: italic; } .pm-lp-feat__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; } .pm-lp-feat__likes { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--pm-gold-deeper); overflow: visible; } /* The heart icon, fully visible. The viewBox carries a 3 unit margin on every side (viewBox="-3 -3 30 30") so the heart never reaches the icon box edge: no clipping at the top is possible whatever the surrounding line box does. */ .pm-lp-feat__heart { width: 16px; height: 16px; flex: 0 0 auto; display: block; overflow: visible; } /* Buttons inside the featured / FAQ bands (the card .pm-btn rules are scoped to .pm-sc, so these sections need their own). */ .pm-lp-featured .pm-btn, .pm-lp-faq .pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; border-radius: var(--pm-r-full); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--pm-dur) var(--pm-ease), box-shadow var(--pm-dur) var(--pm-ease), color var(--pm-dur) var(--pm-ease); } .pm-lp-featured .pm-btn--sm { padding: 9px 16px; font-size: 12.5px; } .pm-lp-featured .pm-btn--gold, .pm-lp-faq .pm-btn--gold { background: linear-gradient(135deg, var(--pm-gold) 0%, var(--pm-gold-dark) 100%); color: var(--pm-dark); box-shadow: 0 6px 20px rgba(215,191,129,.3); } .pm-lp-featured .pm-btn--gold:hover, .pm-lp-faq .pm-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(215,191,129,.45); color: var(--pm-dark); } /* ═══════════════════════════════════════════════════════════════════════ FAQ (listen, play, learn) — compact accordion + CTA to the full FAQ ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-faq { padding: 56px 24px 66px; background: var(--pm-surface); } .pm-lp-faq__inner { max-width: 820px; margin: 0 auto; } .pm-lp-faq__head { text-align: center; margin-bottom: 30px; } .pm-lp-faq__list { display: flex; flex-direction: column; gap: 12px; } .pm-lp-faq__item { background: var(--pm-white); border: 1px solid var(--pm-border); border-radius: var(--pm-r-md); overflow: hidden; transition: border-color var(--pm-dur) var(--pm-ease), box-shadow var(--pm-dur) var(--pm-ease); } .pm-lp-faq__item:hover { border-color: var(--pm-gold-border); } .pm-lp-faq__item.is-open { border-color: var(--pm-gold); box-shadow: 0 8px 28px rgba(215,191,129,.14); } .pm-lp-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--pm-text); } .pm-lp-faq__q-chev { flex: 0 0 auto; color: var(--pm-gold-dark); transition: transform var(--pm-dur) var(--pm-ease); } .pm-lp-faq__item.is-open .pm-lp-faq__q-chev { transform: rotate(180deg); } .pm-lp-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--pm-dur) var(--pm-ease); } .pm-lp-faq__item.is-open .pm-lp-faq__a { grid-template-rows: 1fr; } .pm-lp-faq__a > p { overflow: hidden; min-height: 0; margin: 0; padding: 0 20px; color: var(--pm-text-2); font-size: 14.5px; line-height: 1.6; } .pm-lp-faq__item.is-open .pm-lp-faq__a > p { padding-bottom: 20px; } .pm-lp-faq__cta { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .pm-lp-faq__cta-text { color: var(--pm-text-2); font-size: 14px; } /* ── Featured + FAQ dark mode (light mode is the default above). Warm dark, not black, matching the finder, so the lighter cards contrast clearly. ── */ html[data-theme="dark"] .pm-lp-featured { background: radial-gradient(120% 120% at 50% 0%, rgba(215,191,129,.07), transparent 62%), #101010; border-color: rgba(215,191,129,.12); } html[data-theme="dark"] .pm-lp-featured__title, html[data-theme="dark"] .pm-lp-faq__title { color: #F4EDDE; } html[data-theme="dark"] .pm-lp-featured__sub { color: #B8AE98; } html[data-theme="dark"] .pm-lp-featured__eyebrow { background: rgba(215,191,129,.12); color: var(--pm-gold-light); border-color: rgba(215,191,129,.25); } html[data-theme="dark"] .pm-lp-featured__eyebrow svg { color: var(--pm-gold-light); } html[data-theme="dark"] .pm-lp-feat { background: linear-gradient(165deg, rgba(215, 191, 129, 0.09) 0%, rgba(215, 191, 129, 0.02) 42%, transparent 100%), #201E19; border-color: rgba(215,191,129,.28); } html[data-theme="dark"] .pm-lp-feat:hover { border-color: var(--pm-gold); } html[data-theme="dark"] .pm-lp-feat__title { color: #F4EDDE; } html[data-theme="dark"] .pm-lp-feat__title-link:hover .pm-lp-feat__title { color: var(--pm-gold-light); } html[data-theme="dark"] .pm-lp-feat__composer { color: #B8AE98; } html[data-theme="dark"] .pm-lp-feat__likes { color: var(--pm-gold-light); } html[data-theme="dark"] .pm-lp-featured__nav { background: #1A1A1A; color: var(--pm-gold-light); border-color: rgba(215,191,129,.3); } html[data-theme="dark"] .pm-lp-featured__nav:hover { background: var(--pm-gold); color: var(--pm-dark); } html[data-theme="dark"] .pm-lp-faq { background: #101010; } html[data-theme="dark"] .pm-lp-faq__item { background: linear-gradient(165deg, rgba(215, 191, 129, 0.07) 0%, rgba(215, 191, 129, 0.015) 45%, transparent 100%), #1C1B18; border-color: rgba(215,191,129,.2); } html[data-theme="dark"] .pm-lp-faq__item:hover { border-color: var(--pm-gold-border); } html[data-theme="dark"] .pm-lp-faq__item.is-open { border-color: var(--pm-gold); } html[data-theme="dark"] .pm-lp-faq__q { color: #F4EDDE; } html[data-theme="dark"] .pm-lp-faq__a > p { color: #B8AE98; } html[data-theme="dark"] .pm-lp-faq__cta-text { color: #B8AE98; } /* ═══════════════════════════════════════════════════════════════════════ 2. SEARCH & FILTERS ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-finder { padding: 34px 24px 22px; background: var(--pm-surface); position: relative; z-index: 20; /* above the cards grid, below the sticky tabs (30), so dropdowns layer on top */ transition: box-shadow var(--pm-dur) var(--pm-ease), background var(--pm-dur) var(--pm-ease), padding var(--pm-dur) var(--pm-ease); } .pm-lp-finder__inner { max-width: 980px; margin: 0 auto; } /* ── Section head (harmonized with the Featured / FAQ heads) ───────────── */ .pm-lp-finder__head { text-align: center; margin-bottom: 22px; } /* Legacy flanking rules, no longer used. */ .pm-lp-finder__title-wrap, .pm-lp-finder__title-line { display: none; } .pm-lp-finder__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--pm-text); margin: 12px 0 0; text-align: center; letter-spacing: -.02em; } .pm-lp-finder__title-gold { background: linear-gradient(135deg, var(--pm-gold-deeper), var(--pm-gold-dark) 50%, var(--pm-gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Search row — single row: search bar + filters + clear + count */ .pm-lp-finder__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Search bar (gold-bordered wrapper with icon + input). Hardened against system dark mode: the wrapper AND input both assert color-scheme:light + explicit white fill + forced-color-adjust:none so Safari iOS / Firefox / Edge never invert the pill when the OS is dark. */ .pm-lp-finder__bar { flex: 1 1 320px; min-width: 220px; min-height: 44px; display: flex; align-items: center; /* Gold-bordered capsule wrapping the loupe AND the text, with a transparent fill so the page background shows through (no filled rectangle behind the text). The autofill mask on the input keeps a browser autofill from painting its own box. */ background: transparent !important; background-color: transparent !important; border: 1.5px solid var(--pm-gold-border, rgba(215, 191, 129, .45)) !important; box-shadow: none !important; outline: none !important; border-radius: var(--pm-r-pill, 999px); overflow: hidden; color-scheme: light; forced-color-adjust: none; transition: border-color var(--pm-dur) var(--pm-ease), box-shadow var(--pm-dur) var(--pm-ease); } .pm-lp-finder__bar:focus-within { border-color: var(--pm-gold, #D7BF81) !important; box-shadow: 0 0 0 3px rgba(215, 191, 129, .14) !important; outline: none !important; } .pm-lp-finder__icon-wrap { display: flex; align-items: center; justify-content: center; padding: 0 8px 0 18px; color: var(--pm-gray-400, #9CA3AF); flex-shrink: 0; transition: color var(--pm-dur) var(--pm-ease); } .pm-lp-finder__bar:focus-within .pm-lp-finder__icon-wrap { color: var(--pm-gold-dark, #BEA86E); } .pm-lp-finder__input, .pm-lp-finder__input:-webkit-autofill, .pm-lp-finder__input:-webkit-autofill:hover, .pm-lp-finder__input:-webkit-autofill:focus { flex: 1; padding: 12px 14px 12px 0; font-size: .88rem; font-family: var(--pm-font); color: #1a1a1a !important; /* Fully transparent: no inset fill, so the pill never shows a lighter rectangle over the finder band (that was the "search rectangle"). The autofill delay below keeps a browser autofill from painting a box. */ background: transparent !important; background-color: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; color-scheme: light !important; forced-color-adjust: none; -webkit-text-fill-color: #1a1a1a !important; -webkit-appearance: none; appearance: none; caret-color: var(--pm-gold-dark, #BEA86E); transition: background-color 9999s ease-out 0s; } .pm-lp-finder__input::placeholder { color: rgba(60, 60, 60, 0.55) !important; -webkit-text-fill-color: rgba(60, 60, 60, 0.55) !important; } /* Filter dropdowns — gold accent */ .pm-lp-filters { display: flex; gap: 8px; flex-wrap: wrap; } .pm-lp-filter { position: relative; } .pm-lp-filter__trigger { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; font-size: .82rem; font-weight: 600; font-family: var(--pm-font); color: var(--pm-gray-600, #4B5563); /* Transparent with a soft gold outline, matching the search pill (integrated, no white box). */ background: transparent; border: 1px solid var(--pm-gold-border); border-radius: var(--pm-r-pill, 999px); cursor: pointer; transition: background var(--pm-dur) var(--pm-ease), border-color var(--pm-dur) var(--pm-ease), color var(--pm-dur) var(--pm-ease); white-space: nowrap; } .pm-lp-filter__trigger:hover { background: var(--pm-gold-a08, rgba(215,191,129,.08)); border-color: var(--pm-gold); color: var(--pm-gold-deep, #A0894A); } .pm-lp-filter__trigger[aria-expanded="true"] { /* Open state: gentle gold border and faint tint, no halo ring. */ background: var(--pm-gold-a08, rgba(215,191,129,.08)); color: var(--pm-gold-deep, #A0894A); border-color: var(--pm-gold); } .pm-lp-filter__arrow { transition: transform var(--pm-dur) var(--pm-ease); } .pm-lp-filter__trigger[aria-expanded="true"] .pm-lp-filter__arrow { transform: rotate(180deg); } .pm-lp-filter__count { display: none; min-width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: .7rem; font-weight: 700; color: var(--pm-text-on-gold, #1b1505); background: var(--pm-gold-deeper); border-radius: var(--pm-r-full); padding: 0 6px; } .pm-lp-filter__count.is-visible { display: inline-block; } /* Dropdown menu */ .pm-lp-filter__menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 224px; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid var(--pm-gold-a25, rgba(215,191,129,.25)); border-radius: 14px; box-shadow: 0 18px 44px rgba(11,11,11,.16), 0 2px 8px rgba(11,11,11,.06); padding: 7px; z-index: 80; animation: pm-lp-dropdown-in .2s var(--pm-ease); } .pm-lp-filter__menu.is-open { display: block; } @keyframes pm-lp-dropdown-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .pm-lp-filter__option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--pm-r-sm); cursor: pointer; transition: background var(--pm-dur) var(--pm-ease); font-size: .85rem; color: var(--pm-text); } .pm-lp-filter__option:hover { background: var(--pm-gold-bg); } .pm-lp-filter__option input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .pm-lp-filter__check { width: 18px; height: 18px; border: 1.5px solid var(--pm-gold); border-radius: 5px; flex-shrink: 0; position: relative; transition: all var(--pm-dur) var(--pm-ease); } .pm-lp-filter__option input:checked ~ .pm-lp-filter__check { background: var(--pm-gold); border-color: var(--pm-gold-dark); } .pm-lp-filter__option input:checked ~ .pm-lp-filter__check::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--pm-white); border-width: 0 2px 2px 0; transform: rotate(45deg); } .pm-lp-filter__text { flex: 1; font-weight: 500; } /* Actions — inline with search row */ .pm-lp-finder__actions { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: none; flex-shrink: 0; } .pm-lp-finder__clear { display: inline-flex; align-items: center; gap: 5px; padding: 10px 12px; font-size: .78rem; font-weight: 600; font-family: var(--pm-font); color: var(--pm-gray-400, #9CA3AF); background: transparent; border: 0; border-radius: var(--pm-r-pill, 999px); cursor: pointer; transition: all var(--pm-dur) var(--pm-ease); white-space: nowrap; } .pm-lp-finder__clear:hover { color: #dc2626; background: rgba(220,38,38,.06); } .pm-lp-finder__count { font-size: .78rem; font-weight: 600; color: var(--pm-text-3); white-space: nowrap; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════ 3. LOADING ═══════════════════════════════════════════════════════════════════════ */ /* Floating overlay over the scores section: the old cards stay fully visible underneath while the next page loads, so a page change never pushes a dark strip into the layout (that strip, plus the grid briefly going transparent, was the "black screen" on pagination). Just a small pill near the top. */ .pm-lp-loader { position: absolute; inset: 0; z-index: 4; display: none; justify-content: center; align-items: flex-start; padding-top: clamp(40px, 12vh, 150px); pointer-events: none; background: transparent; } .pm-lp-loader.is-active { display: flex; } .pm-lp-loader__inner { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 100px; font-size: .9rem; color: var(--pm-text-2); background: var(--pm-surface); border: 1px solid var(--pm-gold-border, rgba(215, 191, 129, .28)); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); } .pm-lp-loader__spinner { width: 22px; height: 22px; border: 2.5px solid var(--pm-gold-pale); border-top-color: var(--pm-gold-dark); border-radius: 50%; animation: pm-lp-spin .7s linear infinite; } @keyframes pm-lp-spin { to { transform: rotate(360deg); } } .pm-lp-spin { animation: pm-lp-spin .8s linear infinite; } /* ═══════════════════════════════════════════════════════════════════════ 4. SCORES GRID ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-scores { /* Full width so the background matches the finder/featured bands above. The grid inside is what gets the max-width, not the section (the old max-width here made the dark background stop short = "background not spanning the full width"). position:relative makes it the offset parent for the loading overlay. */ position: relative; padding: 24px 24px 80px; min-height: 300px; background: var(--pm-surface); } .pm-lp-scores__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pm-gap); max-width: calc(var(--pm-container) + 48px); margin: 0 auto; transition: opacity var(--pm-dur) var(--pm-ease); } /* Loading state: keep the current cards fully visible (no dim) while the next page is fetched and its photos preload, so a page change never fades the grid down to reveal the dark section behind it. Only clicks are suspended. */ /* While the AJAX request is in flight the current grid stays fully visible (no dim): only clicks are disabled. */ .pm-lp-scores__grid.is-loading { pointer-events: none; } /* During the swap the freshly inserted grid is held invisible for two frames so each card's photo paints before the grid is shown. Without this the dark media placeholders behind the photos flashed over the grid. transition:none makes the hide instant; removing the class lets the grid's own opacity transition fade the already-painted cards in, so filter and pagination steps never show a dark flash. */ .pm-lp-scores__grid.pm-lp-swapping { opacity: 0; transition: none; } /* Page-swap entrance. The new cards (already painted, photos preloaded) rise into place. Transform only, no opacity, so each card stays fully opaque and the dark section never shows through, even while the rise is staggered. */ .pm-lp-scores__grid.pm-lp-swap-in .pm-sc { animation: pm-sc-rise .5s var(--pm-ease-smooth, cubic-bezier(.22,1,.36,1)) both; } @keyframes pm-sc-rise { from { transform: translateY(16px) scale(.985); } to { transform: none; } } .pm-lp-scores__grid.pm-lp-swap-in .pm-sc:nth-child(1) { animation-delay: 0s; } .pm-lp-scores__grid.pm-lp-swap-in .pm-sc:nth-child(2) { animation-delay: .045s; } .pm-lp-scores__grid.pm-lp-swap-in .pm-sc:nth-child(3) { animation-delay: .09s; } .pm-lp-scores__grid.pm-lp-swap-in .pm-sc:nth-child(4) { animation-delay: .135s; } .pm-lp-scores__grid.pm-lp-swap-in .pm-sc:nth-child(5) { animation-delay: .18s; } .pm-lp-scores__grid.pm-lp-swap-in .pm-sc:nth-child(6) { animation-delay: .225s; } .pm-lp-scores__grid.pm-lp-swap-in .pm-sc:nth-child(7) { animation-delay: .27s; } .pm-lp-scores__grid.pm-lp-swap-in .pm-sc:nth-child(8) { animation-delay: .315s; } .pm-lp-scores__grid.pm-lp-swap-in .pm-sc:nth-child(9) { animation-delay: .36s; } @media (prefers-reduced-motion: reduce) { .pm-lp-scores__grid.pm-lp-swap-in .pm-sc { animation: none; } } /* ── Card (matches AJAX classes + gold design) ──────────────────────── */ .pm-lp-scores__grid .score-card-premium { background: var(--pm-white); border-radius: var(--pm-r-lg); border: 2px solid var(--pm-gold); overflow: hidden; display: flex; flex-direction: column; position: relative; box-shadow: 0 2px 12px rgba(215,191,129,.12), 0 0 0 1px rgba(215,191,129,.08); transition: transform var(--pm-dur) var(--pm-ease), box-shadow var(--pm-dur) var(--pm-ease), border-color var(--pm-dur) var(--pm-ease); /* Entrance animation */ opacity: 0; transform: translateY(24px); animation: pm-lp-card-in .5s var(--pm-ease) forwards; } .pm-lp-scores__grid .score-card-premium:hover { transform: translateY(-6px); border-color: var(--pm-gold-dark); box-shadow: 0 0 0 3px rgba(215,191,129,.25), 0 16px 48px rgba(215,191,129,.25); } @keyframes pm-gold-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--pm-gold-border), 0 8px 28px rgba(215,191,129,.12); } 50% { box-shadow: 0 0 0 2px var(--pm-gold-glow), 0 14px 40px rgba(215,191,129,.22); } } @keyframes pm-lp-card-in { to { opacity: 1; transform: translateY(0); } } /* Ensure cards stay visible after entrance animation completes */ .pm-lp-scores__grid .score-card-premium.pm-lp-visible { opacity: 1; transform: translateY(0); } /* Stagger */ .pm-lp-scores__grid .score-card-premium:nth-child(1) { animation-delay: .04s; } .pm-lp-scores__grid .score-card-premium:nth-child(2) { animation-delay: .08s; } .pm-lp-scores__grid .score-card-premium:nth-child(3) { animation-delay: .12s; } .pm-lp-scores__grid .score-card-premium:nth-child(4) { animation-delay: .16s; } .pm-lp-scores__grid .score-card-premium:nth-child(5) { animation-delay: .20s; } .pm-lp-scores__grid .score-card-premium:nth-child(6) { animation-delay: .24s; } .pm-lp-scores__grid .score-card-premium:nth-child(7) { animation-delay: .28s; } .pm-lp-scores__grid .score-card-premium:nth-child(8) { animation-delay: .32s; } .pm-lp-scores__grid .score-card-premium:nth-child(9) { animation-delay: .36s; } .pm-lp-scores__grid .score-card-premium.pm-lp-appended { animation-delay: calc(var(--pm-lp-idx, 0) * .06s) !important; } /* Video */ .pm-lp-scores__grid .card-video-container { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pm-dark); } .pm-lp-scores__grid .video-thumbnail-wrapper { position: absolute; inset: 0; cursor: pointer; } .pm-lp-scores__grid .video-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform var(--pm-dur-slow) var(--pm-ease); } .pm-lp-scores__grid .video-thumbnail-wrapper:hover .video-thumbnail { transform: scale(1.04); } .pm-lp-scores__grid .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); background: none; border: none; cursor: pointer; opacity: .85; transition: all var(--pm-dur) var(--pm-ease); padding: 0; } .pm-lp-scores__grid .video-thumbnail-wrapper:hover .play-button { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } .pm-lp-scores__grid .play-bg { fill: var(--pm-dark); fill-opacity: .75; } .pm-lp-scores__grid .youtube-video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; z-index: 5; pointer-events: auto; } .pm-lp-scores__grid .video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--pm-text-3); font-size: .85rem; background: var(--pm-surface-alt); } .pm-lp-scores__grid .video-icon { font-size: 2rem; } /* Level badge */ .pm-lp-scores__grid .level-badge { position: absolute; top: 10px; left: 10px; padding: 4px 12px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pm-white); background: rgba(11,11,11,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--pm-r-full); cursor: pointer; transition: background var(--pm-dur) var(--pm-ease); z-index: 3; } .pm-lp-scores__grid .level-badge:hover { background: var(--pm-gold-dark); } /* Card body */ .pm-lp-scores__grid .card-content-wrapper { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .pm-lp-scores__grid .title-link { text-decoration: none; color: inherit; display: block; } .pm-lp-scores__grid .score-title-premium { font-size: 1rem; font-weight: 700; color: var(--pm-text); line-height: 1.35; margin: 0; transition: color var(--pm-dur) var(--pm-ease); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pm-lp-scores__grid .title-link:hover .score-title-premium { color: var(--pm-gold-deeper); } /* Composer + Like */ .pm-lp-scores__grid .composer-like-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .pm-lp-scores__grid .composer-info { font-size: .78rem; color: var(--pm-text-2); cursor: pointer; transition: color var(--pm-dur) var(--pm-ease); } .pm-lp-scores__grid .composer-info:hover { color: var(--pm-gold-deeper); } /* Like button */ .pm-lp-scores__grid .like-button { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; padding: 0; color: var(--pm-text-3); border-radius: 50%; transition: all var(--pm-dur) var(--pm-ease); } .pm-lp-scores__grid .like-button:hover { background: rgba(220,38,38,.06); color: #dc2626; } .pm-lp-scores__grid .like-button.liked { color: #dc2626; } .pm-lp-scores__grid .like-button.liked .heart-icon { animation: pm-lp-heartpop .4s var(--pm-ease-spring); } @keyframes pm-lp-heartpop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } } /* Genres */ .pm-lp-scores__grid .genres-container { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .pm-lp-scores__grid .genre-badge { padding: 3px 10px; font-size: .68rem; font-weight: 600; color: var(--pm-gold-deeper); background: var(--pm-gold-bg); border: 1px solid var(--pm-gold-border); border-radius: var(--pm-r-full); cursor: pointer; transition: all var(--pm-dur) var(--pm-ease); } .pm-lp-scores__grid .genre-badge:hover { background: var(--pm-gold); color: var(--pm-text-on-gold, #1b1505); border-color: var(--pm-gold); } /* Description */ .pm-lp-scores__grid .score-description-premium { font-size: .82rem; line-height: 1.6; color: var(--pm-text-2); margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } /* Footer */ .pm-lp-scores__grid .card-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--pm-gold-border); } .pm-lp-scores__grid .score-meta-premium { display: flex; gap: 14px; font-size: .72rem; color: var(--pm-text-3); margin-bottom: 12px; } .pm-lp-scores__grid .like-count-display { display: inline-flex; align-items: center; gap: 4px; color: #dc2626; } .pm-lp-scores__grid .heart-mini { color: #dc2626; } /* Action buttons — GOLD primary */ .pm-lp-scores__grid .card-actions { display: flex; gap: 8px; } .pm-lp-scores__grid .action-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; font-size: .78rem; font-weight: 700; font-family: var(--pm-font); text-decoration: none; border-radius: var(--pm-r-sm); transition: all var(--pm-dur) var(--pm-ease); white-space: nowrap; } .pm-lp-scores__grid .btn-primary { background: linear-gradient(135deg, var(--pm-gold) 0%, var(--pm-gold-dark) 100%); color: var(--pm-text-on-gold, #1b1505); border: none; } .pm-lp-scores__grid .btn-primary:hover { background: linear-gradient(135deg, var(--pm-gold-dark) 0%, var(--pm-gold-deeper) 100%); transform: translateY(-1px); box-shadow: 0 4px 12px var(--pm-gold-glow); } .pm-lp-scores__grid .btn-secondary { background: var(--pm-gold-bg); color: var(--pm-gold-deeper); border: 1px solid var(--pm-gold-border); } .pm-lp-scores__grid .btn-secondary:hover { border-color: var(--pm-gold); background: rgba(215,191,129,.15); transform: translateY(-1px); } .pm-lp-scores__grid .btn-icon { font-style: normal; transition: transform var(--pm-dur) var(--pm-ease); } .pm-lp-scores__grid .action-btn:hover .btn-icon { transform: translateX(3px); } /* No results */ .pm-lp-scores__grid .no-results-premium { grid-column: 1 / -1; text-align: center; padding: 60px 24px; } .pm-lp-scores__grid .no-results-premium .no-results-icon { font-size: 3.5rem; margin-bottom: 16px; } .pm-lp-scores__grid .no-results-premium h3 { font-size: 1.2rem; color: var(--pm-text); margin: 0 0 8px; } .pm-lp-scores__grid .no-results-premium p { font-size: .9rem; color: var(--pm-text-2); margin: 0; } /* ═══════════════════════════════════════════════════════════════════════ 5. PAGINATION ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 40px 0 0; flex-wrap: wrap; } .pm-lp-pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; font-size: .85rem; font-weight: 600; font-family: var(--pm-font); color: var(--pm-gold-deeper); background: var(--pm-white); border: 1.5px solid var(--pm-gold-border); border-radius: var(--pm-r-sm); cursor: pointer; text-decoration: none; transition: all var(--pm-dur) var(--pm-ease); } .pm-lp-pagination__btn:hover { background: var(--pm-gold-bg); border-color: var(--pm-gold); transform: translateY(-1px); } .pm-lp-pagination__btn.is-active { background: linear-gradient(135deg, var(--pm-gold) 0%, var(--pm-gold-dark) 100%); color: var(--pm-text-on-gold, #1b1505); border-color: var(--pm-gold-dark); box-shadow: 0 2px 12px var(--pm-gold-glow); cursor: default; } .pm-lp-pagination__btn:disabled { opacity: .4; cursor: default; transform: none; } .pm-lp-pagination__dots { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 42px; font-size: .85rem; color: var(--pm-text-3); user-select: none; } .pm-lp-pagination__btn--prev, .pm-lp-pagination__btn--next { gap: 6px; font-weight: 700; } .pm-lp-pagination.is-loading { opacity: .5; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════ 6. PLAYLISTS (Spotify) ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-spotify { padding: 80px 24px; background: var(--pm-white); } .pm-lp-spotify__inner { max-width: 1100px; margin: 0 auto; } .pm-lp-spotify__header { text-align: center; margin-bottom: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .pm-lp-spotify__icon { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(215,191,129,.12) 0%, rgba(215,191,129,.06) 100%); border: 2px solid var(--pm-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(215,191,129,.2); } .pm-lp-spotify__title { font-size: 1.75rem; font-weight: 700; color: var(--pm-text); margin: 0; line-height: 1.3; } .pm-lp-spotify__accent { background: linear-gradient(135deg, var(--pm-gold-dark) 0%, var(--pm-spotify) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pm-lp-spotify__subtitle { font-size: 1rem; color: var(--pm-text-3); margin: 0; font-style: italic; } /* Mood filter tabs */ .pm-lp-spotify__moods { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; } .pm-lp-spotify__mood-btn { padding: 8px 20px; font-size: .8rem; font-weight: 600; font-family: var(--pm-font); border-radius: var(--pm-r-full); border: 1.5px solid var(--pm-gold-border); background: var(--pm-gold-bg); color: var(--pm-gold-deeper); cursor: pointer; transition: all var(--pm-dur) var(--pm-ease); } .pm-lp-spotify__mood-btn:hover { background: rgba(215,191,129,.18); border-color: var(--pm-gold); } .pm-lp-spotify__mood-btn.is-active { background: var(--pm-gold); color: var(--pm-text-on-gold, #1b1505); border-color: var(--pm-gold-dark); box-shadow: 0 2px 10px var(--pm-gold-glow); } /* ── Playlists: a masonry of native-size Spotify embeds ─────────────────── The old fixed bento forced every embed to fill a 168px tile, which cropped Spotify's players and truncated the titles. Each playlist now keeps its own native embed height (compact 152, large 352, or extra large 552) and the cards flow in a balanced multi-column masonry. Spotify renders cleanly at its own heights, and the column width (about 340px) is wide enough that the compact player fills its tile exactly at the native Spotify height, never cropped. */ .pm-spl { columns: 320px; /* narrow columns: Spotify renders its big vertical player */ column-gap: 22px; margin: 0; } .pm-spl__card { position: relative; break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 22px; border-radius: 14px; overflow: hidden; background: #0d0d0d; /* matches Spotify's dark embed, so no edge shows */ border: 1px solid var(--pm-gold-a25, rgba(215,191,129,.25)); box-shadow: 0 8px 28px rgba(11,11,11,.10); transition: transform var(--pm-dur) var(--pm-ease-smooth, cubic-bezier(.22,1,.36,1)), box-shadow var(--pm-dur) var(--pm-ease), border-color var(--pm-dur) var(--pm-ease); } .pm-spl__card:hover { transform: translateY(-4px); border-color: var(--pm-gold, #D7BF81); box-shadow: 0 18px 44px rgba(215,191,129,.22); } /* The embed fills the whole card, which is set to the Spotify native height. */ .pm-spl__frame { display: block; width: 100%; height: 100%; border: 0; border-radius: 14px; } .pm-spl__oembed iframe { display: block; width: 100% !important; border: 0 !important; border-radius: 14px !important; } /* Quiet placeholder: a centred spinner shown until the embed paints, then it fades out. No play button: the embeds load on their own when the tab opens. */ .pm-spl__ph { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #0C0C0C, #0C0A07); transition: opacity var(--pm-dur-slow, 420ms) var(--pm-ease); } .pm-spl__ph-spin { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(215,191,129,.25); border-top-color: var(--pm-gold, #D7BF81); animation: pm-spl-spin .7s linear infinite; } .pm-spl__card.is-loaded .pm-spl__ph { opacity: 0; pointer-events: none; } @keyframes pm-spl-spin { to { transform: rotate(360deg); } } @media (max-width: 600px) { .pm-spl { columns: 1; } } @media (prefers-reduced-motion: reduce) { .pm-spl__ph-spin { animation: none; } .pm-spl__card { transition: none; } } /* See More Playlists */ .pm-lp-spotify__more { text-align: center; padding: 32px 0 0; } .pm-lp-spotify__more-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 40px; font-size: .9rem; font-weight: 700; font-family: var(--pm-font); color: var(--pm-text-on-gold, #1b1505); background: linear-gradient(135deg, var(--pm-gold) 0%, var(--pm-spotify) 100%); border: none; border-radius: var(--pm-r-full); cursor: pointer; box-shadow: 0 4px 16px rgba(29,185,84,.2); transition: all var(--pm-dur) var(--pm-ease); } .pm-lp-spotify__more-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(29,185,84,.3); } .pm-lp-spotify__more-btn.is-loading .pm-lp-spotify__more-text { display: none; } .pm-lp-spotify__more-btn.is-loading .pm-lp-spotify__more-loading { display: inline-flex !important; align-items: center; gap: 8px; } /* ═══════════════════════════════════════════════════════════════════════ 7. TOAST ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-toast { position: fixed; bottom: 28px; right: 28px; padding: 14px 24px; font-size: .85rem; font-weight: 600; font-family: var(--pm-font); color: var(--pm-gold-light); background: rgba(11,11,11,.94); border: 1px solid var(--pm-gold-glow); border-radius: var(--pm-r-sm); box-shadow: 0 8px 32px rgba(0,0,0,.3); z-index: 10000; opacity: 0; transform: translateY(16px); transition: all .3s var(--pm-ease); pointer-events: none; } .pm-lp-toast.is-visible { opacity: 1; transform: translateY(0); } /* ═══════════════════════════════════════════════════════════════════════ 8. SEARCH ERROR ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-scores__grid .search-error { grid-column: 1 / -1; text-align: center; padding: 48px 24px; background: var(--pm-white); border-radius: var(--pm-r-lg); border: 2px dashed var(--pm-gold-border); } .pm-lp-scores__grid .search-error .error-icon { font-size: 2.5rem; margin-bottom: 12px; } .pm-lp-scores__grid .search-error .retry-btn { display: inline-flex; padding: 10px 24px; background: var(--pm-gold); color: var(--pm-text-on-gold, #1b1505); border: none; border-radius: var(--pm-r-sm); font-weight: 600; font-family: var(--pm-font); cursor: pointer; margin-top: 12px; transition: all var(--pm-dur) var(--pm-ease); } .pm-lp-scores__grid .search-error .retry-btn:hover { background: var(--pm-gold-dark); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════════════════════ 9. RESPONSIVE ═══════════════════════════════════════════════════════════════════════ */ /* Tablet. The hero height is NOT set here: it rides on the root .pm-lp-hero rule (calc(100svh - --pm-header-h)) at every width, so it always matches Learn. */ @media (max-width: 1024px) { .pm-lp-scores__grid { grid-template-columns: repeat(2, 1fr); } .pm-lp-spotify__title { font-size: 1.5rem; } } /* Large mobile */ @media (max-width: 768px) { .pm-lp-finder { padding: 32px 16px 24px; } .pm-lp-finder__row { flex-wrap: wrap; } .pm-lp-finder__bar { min-width: 100%; } .pm-lp-finder__input { padding: 10px 10px 10px 0; font-size: .85rem; } .pm-lp-finder__icon { padding: 0 10px; } .pm-lp-finder__actions { width: 100%; justify-content: space-between; margin-top: 8px; } .pm-lp-finder__title-wrap { gap: 16px; } .pm-lp-finder__title-line { max-width: 60px; } .pm-lp-filters { flex-wrap: wrap; } .pm-lp-filter { flex: 1; min-width: 0; } .pm-lp-filter__trigger { width: 100%; justify-content: space-between; padding: 9px 12px; font-size: .78rem; gap: 6px; } /* Filter menu: 3 triggers sit side-by-side so each is ~33% wide. Breaking the dropdown out of the trigger width so the level / style / composer options are readable on phones. The menu is pinned to the LEFT of the filter row (left:0 on the first .pm-lp-filter) and grows up to a comfortable 280px or the full row width, whichever is smaller. */ .pm-lp-filter__menu { width: calc(100vw - 40px); min-width: 240px; max-width: 320px; max-height: 60vh; } /* Align each dropdown so it doesn't overflow the viewport on either side */ .pm-lp-filter:nth-child(1) .pm-lp-filter__menu { left: 0; right: auto; } .pm-lp-filter:nth-child(2) .pm-lp-filter__menu { left: 50%; right: auto; transform: translateX(-50%); } .pm-lp-filter:nth-child(3) .pm-lp-filter__menu { left: auto; right: 0; } .pm-lp-scores { padding: 16px 16px 60px; } .pm-lp-scores__grid { gap: 16px; } .pm-lp-spotify { padding: 60px 16px; } .pm-lp-spotify__grid { grid-template-columns: 1fr; gap: 16px; } .pm-lp-spotify__title { font-size: 1.35rem; } .pm-lp-spotify__card { padding: 10px; } .pm-lp-spotify__moods { gap: 6px; } .pm-lp-spotify__mood-btn { padding: 6px 14px; font-size: .75rem; } .pm-lp-spotify__card iframe, .pm-lp-spotify__embed iframe { min-height: 320px; } .pm-lp-pagination { gap: 4px; } .pm-lp-pagination__btn { min-width: 36px; height: 36px; padding: 0 10px; font-size: .8rem; } .pm-lp-pagination__btn--prev, .pm-lp-pagination__btn--next { padding: 0 12px; } } /* Mobile */ @media (max-width: 600px) { /* No hero height or padding here: both ride on the root .pm-lp-hero rule and the max-width 720px block above, so the hero stays one viewport tall and flush to the header, matching Learn. */ .pm-lp-hero__actions { flex-direction: column; align-items: center; } .pm-lp-hero__btn { width: 100%; max-width: 280px; justify-content: center; } .pm-lp-hero__stats { gap: 24px; } .pm-lp-hero__stat-num { font-size: 1.5rem; } .pm-lp-hero__scroll-arrow { bottom: 24px; width: 38px; height: 38px; } .pm-lp-scores__grid { grid-template-columns: 1fr; } .pm-lp-scores__grid .card-actions { flex-direction: column; } .pm-lp-scores__grid .action-btn { justify-content: center; } .pm-lp-finder__title-wrap { gap: 12px; } .pm-lp-finder__title-line { max-width: 40px; } .pm-lp-finder__title { font-size: 1.2rem; } } /* Small mobile */ @media (max-width: 400px) { .pm-lp-hero__title { font-size: 1.9rem; } .pm-lp-finder { padding: 24px 12px 20px; } .pm-lp-finder__input { padding: 12px 12px 12px 0; font-size: .85rem; } .pm-lp-filter__trigger { padding: 11px 14px; font-size: .8rem; } .pm-lp-scores { padding: 12px 12px 48px; } .pm-lp-scores__grid .card-content-wrapper { padding: 14px 16px 16px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .pm-lp-hero__note, .pm-lp-hero__scroll-circle, .pm-lp-scores__grid .score-card-premium { animation: none !important; } .pm-lp-scores__grid .score-card-premium { opacity: 1; transform: none; } .pm-lp-finder__title-gold { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════ SCORE CARD 2026 (.pm-sc): score image media with a layer, an animated colour piano (configurable 2 to 7 octaves) and a sight-reading staff on top, then the body (title, like, composer, genres, description), two related accordions, and the learning guide plus PDF buttons. Play swaps the preview for the real trainer (a lazy, isolated iframe embed). ═══════════════════════════════════════════════════════════════════════ */ .pm-sc { position: relative; /* Contain the card's own z-indexed bits (badges, staff, Listen button) so they cannot paint over the filter dropdowns above the grid. */ isolation: isolate; z-index: 0; display: flex; flex-direction: column; background: var(--pm-white, #fff); border: 1.5px solid var(--pm-gold-a45, rgba(215,191,129,.45)); border-radius: var(--pm-r-xl, 20px); overflow: hidden; box-shadow: 0 1px 0 rgba(215,191,129,.08), 0 10px 30px rgba(11,11,11,.06); transition: transform var(--pm-dur, 240ms) var(--pm-ease-smooth, cubic-bezier(.22,1,.36,1)), box-shadow var(--pm-dur, 240ms) var(--pm-ease-smooth, cubic-bezier(.22,1,.36,1)), border-color var(--pm-dur, 240ms) var(--pm-ease-smooth, cubic-bezier(.22,1,.36,1)); } /* Elegant gold edging: a gradient ring drawn with a mask (so it sits inside the card's overflow:hidden and follows the rounded corners). Subtle at rest, it brightens and rotates on hover. @property lets the conic angle animate; where it is unsupported the ring is simply static gold. */ @property --pm-ang { syntax: ''; inherits: false; initial-value: 0deg; } .pm-sc::after { content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--pm-ang, 0deg), var(--pm-gold-light, #E6D4A8), var(--pm-gold, #D7BF81), var(--pm-gold-deeper, #A0894A), var(--pm-gold, #D7BF81), var(--pm-gold-light, #E6D4A8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-sc:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 0 0 3px var(--pm-gold-a25, rgba(215,191,129,.25)), 0 24px 56px rgba(215,191,129,.22); } .pm-sc:hover::after { opacity: 1; animation: pm-sc-rot 4s linear infinite; } @keyframes pm-sc-rot { to { --pm-ang: 360deg; } } @media (prefers-reduced-motion: reduce) { .pm-sc:hover::after { animation: none; } } /* ── Media: score image background, scrim, staff + piano preview ── */ .pm-sc__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(180deg, #0F0F0F 0%, #141414 100%); } .pm-sc__media-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(.92) brightness(.7); transform: scale(1.04); transition: transform var(--pm-dur-slow, 420ms) var(--pm-ease-smooth, cubic-bezier(.22,1,.36,1)); } .pm-sc:hover .pm-sc__media-bg { transform: scale(1.09); } .pm-sc__media-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 50% 28%, rgba(215,191,129,.10), transparent 70%), linear-gradient(180deg, rgba(8,7,5,.55) 0%, rgba(8,7,5,.30) 40%, rgba(8,7,5,.72) 100%); } .pm-sc__preview { position: absolute; inset: 0; z-index: 2; } /* The resting card shows the REAL OSMD engraving (rendered by JS into the mount), no hand-drawn fallback. Transparent, so the score photo shows behind. The staff is one long line filling the width; on hover it scrolls through the measures. */ .pm-sc__staff { position: absolute; left: 0; right: 0; top: 0; bottom: 38%; overflow: hidden; } .pm-sc__osmd { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; display: flex; align-items: center; justify-content: flex-start; } .pm-sc__osmd svg { display: block; background: transparent !important; transition: transform .45s ease; } .pm-sc:hover .pm-sc__osmd.is-scrollable svg { transition: transform var(--pm-osmd-dur, 5s) linear; transform: translateX(var(--pm-osmd-pan, 0)); } @media (prefers-reduced-motion: reduce) { .pm-sc:hover .pm-sc__osmd.is-scrollable svg { transition: none; transform: none; } } /* Piano poster: white keys flow, black keys positioned on boundaries. This is the resting look under the staff; the real keyboard appears inside the engine frame on Listen. */ .pm-sc__piano { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: #fff; border-top: 2px solid var(--pm-gold, #D7BF81); box-shadow: 0 -8px 24px rgba(215,191,129,.2); } .pm-sc__piano-whites { position: absolute; inset: 0; display: flex; } .pm-sc__key--white { flex: 1 1 0; border-right: 1px solid rgba(0,0,0,.10); background: linear-gradient(180deg, #fff 60%, #f3eedf 100%); transition: background .3s ease, box-shadow .3s ease; } .pm-sc__key--white:last-child { border-right: none; } .pm-sc__key--white.is-lit { background: linear-gradient(180deg, var(--pm-gold-pale, #F5EDD6) 0%, var(--pm-gold-bright, #E6D4A8) 75%, var(--pm-gold, #D7BF81) 100%); box-shadow: inset 0 -10px 18px rgba(215,191,129,.55), 0 0 14px rgba(215,191,129,.4); } .pm-sc__piano-blacks { position: absolute; inset: 0; pointer-events: none; } .pm-sc__key--black { position: absolute; top: 0; width: var(--pm-sc-bw, 4%); height: 60%; transform: translateX(-50%); background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 60%, #000 100%); border-radius: 0 0 3px 3px; box-shadow: inset 0 -2px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.5); } .pm-sc__key--black.is-lit { background: linear-gradient(180deg, var(--pm-gold, #D7BF81) 0%, var(--pm-gold-dark, #BEA86E) 70%, #9c8038 100%); box-shadow: 0 0 12px rgba(215,191,129,.6); } /* ── Badges (level + timing) ── */ .pm-sc__badges { position: absolute; top: 12px; left: 12px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; } .pm-sc__badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--pm-r-pill, 999px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; } .pm-sc__badge--level { color: var(--pm-gold-bright, #E6D4A8); background: rgba(11,11,11,.78); border: 1px solid rgba(215,191,129,.3); } .pm-sc__badge--timing { color: var(--pm-gold-bright, #E6D4A8); background: rgba(11,11,11,.7); border: 1px solid rgba(215,191,129,.25); cursor: default; } /* ── Listen button: centered vertically on the partition viewport (the staff area is the top 62% of the media; the keyboard is the bottom 38%). ── */ .pm-sc__play { position: absolute; z-index: 5; top: 31%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px 11px 18px; border: 0; cursor: pointer; border-radius: var(--pm-r-pill, 999px); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--pm-black, #0B0B0B); background: linear-gradient(135deg, var(--pm-gold-bright, #E6D4A8), var(--pm-gold, #D7BF81)); box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 6px rgba(215,191,129,.18); transition: transform var(--pm-dur, 240ms) var(--pm-ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow var(--pm-dur, 240ms) var(--pm-ease, ease), opacity var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-sc__play:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 12px 32px rgba(0,0,0,.42), 0 0 0 8px rgba(215,191,129,.28); } .pm-sc__play-ico { display: inline-flex; } .pm-sc__play-text { white-space: nowrap; } /* The pause icon is unused now (the engine frame covers the button while playing); the close control top-right ends the preview. */ .pm-sc__play-ico--pause { display: none; } /* "Open Sheet page": the end-of-playback CTA. It inherits every value of .pm-sc__play above rather than restating them, so the two can never drift apart in size or position: same absolute slot, same pill, same gradient. Only the icon differs. Hidden until the embed reports the piece ended. */ .pm-sc__open { position: absolute; z-index: 6; top: 31%; left: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 8px; padding: 11px 20px 11px 18px; border: 0; cursor: pointer; text-decoration: none; border-radius: var(--pm-r-pill, 999px); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--pm-black, #0B0B0B); background: linear-gradient(135deg, var(--pm-gold-bright, #E6D4A8), var(--pm-gold, #D7BF81)); box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 6px rgba(215,191,129,.18); transition: transform var(--pm-dur, 240ms) var(--pm-ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-sc__open:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 12px 32px rgba(0,0,0,.42), 0 0 0 8px rgba(215,191,129,.28); } /* The engine frame covers the media while playing, so the CTA has to sit ABOVE it once the piece is done. Only .is-ended lifts it, and only .is-ended shows it: the [hidden] attribute stays on the element for anyone without CSS. */ .pm-sc--engine.is-playing.is-ended .pm-sc__open { display: inline-flex; z-index: 12; } @media (prefers-reduced-motion: reduce) { .pm-sc__open { transition: none; } .pm-sc__open:hover { transform: translate(-50%, -50%); } } /* Real engine player: fills the media (so it keeps the card's rounded corners), over the poster. On Listen the media grows to the height the engine reports (staff + key signature + keyboard, nothing clipped); the JS sets the exact pixel height. overflow:hidden stays on the card, so the corners never go square. */ .pm-sc__player { position: absolute; inset: 0; z-index: 7; overflow: hidden; background: transparent; /* no beige band: the engine frame paints its own bg */ } .pm-sc__player[hidden] { display: none; } .pm-sc__player iframe, .pm-sc__frame { width: 100%; height: 100%; border: 0; display: block; } /* The media animates to the engine height. JS sets an explicit pixel height; the 360px here is the fallback (and the engine's own minimum). It grows the moment loading starts so the custom loader fills the final size (no jump on reveal). */ .pm-sc__media { transition: height var(--pm-dur-slow, 420ms) var(--pm-ease-smooth, cubic-bezier(.22,1,.36,1)); } .pm-sc--engine.is-loading .pm-sc__media, .pm-sc--engine.is-playing .pm-sc__media { height: 360px; aspect-ratio: auto; } .pm-sc--engine.is-loading .pm-sc__play, .pm-sc--engine.is-playing .pm-sc__play { display: none; } .pm-sc__player-close { position: absolute; z-index: 9; top: 10px; right: 10px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; border-radius: 50%; color: #fff; background: rgba(11,11,11,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-sc__player-close[hidden] { display: none; } .pm-sc__player-close:hover { background: rgba(220,38,38,.85); } /* "Open the score page" button: sits just left of the close X, shown only while the player is open. Same glass pill as the close button, gold on hover. */ .pm-sc__player-open { position: absolute; z-index: 9; top: 10px; right: 52px; width: 34px; height: 34px; display: none; align-items: center; justify-content: center; border: 0; cursor: pointer; border-radius: 50%; text-decoration: none; color: #fff; background: rgba(11,11,11,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background var(--pm-dur, 240ms) var(--pm-ease, ease), color var(--pm-dur, 240ms) var(--pm-ease, ease); } /* Shown only once the player is ready, the same moment the close button appears (never during the loader). */ .pm-sc--engine.is-playing .pm-sc__player-open { display: inline-flex; } .pm-sc__player-open:hover { background: var(--pm-gold, #D7BF81); color: #0B0B0B; } /* Custom card loader (replaces the engine's own loading screen, which we hide in the frame): the PianoMode mark with a spinning ring on a solid themed panel. */ .pm-sc__loading { position: absolute; inset: 0; z-index: 8; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--pm-sc-frame-bg, #faf6ec); } .pm-sc--engine.is-loading .pm-sc__loading { display: flex; } .pm-sc__loading-badge { position: relative; width: 62px; height: 62px; display: grid; place-items: center; } .pm-sc__loading-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(215,191,129,.25); border-top-color: var(--pm-gold, #D7BF81); animation: pm-sc-spin .8s linear infinite; } .pm-sc__loading-logo { width: 36px; height: 36px; object-fit: contain; display: block; } .pm-sc__loading-word { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pm-gold-deep, #A0894A); } @keyframes pm-sc-spin { to { transform: rotate(360deg); } } /* ── Body ── */ .pm-sc__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 18px; flex: 1 1 auto; } .pm-sc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pm-sc__titles { flex: 1; min-width: 0; } .pm-sc__title-link { text-decoration: none; } .pm-sc__title { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; color: var(--pm-black, #0B0B0B); } .pm-sc__title-link:hover .pm-sc__title { color: var(--pm-gold-deep, #A0894A); } .pm-sc__composer { margin: 0; font-size: 13px; color: var(--pm-gray-600, #4B5563); } .pm-sc__composer-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--pm-gray-400, #9CA3AF); margin-right: 4px; } .pm-sc__composer em { font-family: var(--pm-font-display, 'Fraunces', Georgia, serif); font-style: italic; font-weight: 400; font-size: 15px; color: var(--pm-gold-deep, #A0894A); cursor: pointer; } .pm-sc__composer em:hover { color: var(--pm-gold-dark, #BEA86E); } /* Badges/composer/genre are now crawlable links to their taxonomy archives (the JS still intercepts the click for the in-page filter). Keep them looking like badges, not underlined links. */ .pm-sc__badge, .pm-sc__genre, .pm-sc__composer-link { text-decoration: none; } .pm-sc__composer-link { color: inherit; cursor: pointer; } /* Like control: minimalist heart with the running count beside it. No pill, no border, no background. The heart fills red when liked; the number accumulates. */ .pm-sc__like { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; } .pm-sc__like .like-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--pm-gray-400, #9CA3AF); transition: color var(--pm-dur, 240ms) var(--pm-ease, ease), transform var(--pm-dur, 240ms) var(--pm-ease-spring, cubic-bezier(.34,1.56,.64,1)); } .pm-sc__like .like-button:hover { color: #dc2626; transform: scale(1.12); } .pm-sc__like .like-button.liked { color: #dc2626; } .pm-sc__like-num { font-size: 12.5px; font-weight: 700; color: var(--pm-gray-500, #6B7280); font-variant-numeric: tabular-nums; min-width: 8px; } .pm-sc__like .like-count-display, .pm-sc__like .heart-mini { display: none; } .pm-sc__genres { display: flex; gap: 6px; flex-wrap: wrap; } .pm-sc__genre { font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; color: var(--pm-gold-deep, #A0894A); background: var(--pm-gold-a08, rgba(215,191,129,.08)); border: 1px solid var(--pm-gold-a25, rgba(215,191,129,.25)); border-radius: var(--pm-r-pill, 999px); cursor: pointer; transition: all var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-sc__genre:hover { background: var(--pm-gold-a15, rgba(215,191,129,.15)); border-color: var(--pm-gold, #D7BF81); } .pm-sc__desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--pm-gray-600, #4B5563); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Accordions (same composer / same level) ── */ .pm-sc__accs { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } .pm-sc__acc { border-top: 1px dashed var(--pm-gold-a35, rgba(215,191,129,.35)); padding-top: 8px; } .pm-sc__acc-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; border: 0; background: none; cursor: pointer; border-radius: var(--pm-r-md, 10px); font-size: 12.5px; font-weight: 600; color: var(--pm-black, #0B0B0B); text-align: left; transition: background var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-sc__acc-head:hover { background: var(--pm-gold-a08, rgba(215,191,129,.08)); } .pm-sc__acc-icon { display: inline-flex; color: var(--pm-gold-deep, #A0894A); } .pm-sc__acc-label { margin-right: auto; } .pm-sc__acc-term { font-size: 11.5px; color: var(--pm-gold-deep, #A0894A); font-family: var(--pm-font-display, 'Fraunces', Georgia, serif); font-style: italic; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-sc__acc-chev { color: var(--pm-gray-400, #9CA3AF); transition: transform var(--pm-dur, 240ms) var(--pm-ease, ease); flex-shrink: 0; } .pm-sc__acc.is-open .pm-sc__acc-chev { transform: rotate(180deg); } .pm-sc__acc-panel { display: none; padding: 4px 6px 6px; } .pm-sc__acc.is-open .pm-sc__acc-panel { display: block; } .pm-sc__rel-list { list-style: none; margin: 0; padding: 0; } .pm-sc__rel-row { margin: 0; } .pm-sc__rel-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--pm-r-md, 10px); font-size: 13px; color: var(--pm-gray-700, #374151); text-decoration: none; transition: background var(--pm-dur, 240ms) var(--pm-ease, ease), color var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-sc__rel-link:hover { background: var(--pm-gold-a08, rgba(215,191,129,.08)); color: var(--pm-gold-deep, #A0894A); } .pm-sc__rel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pm-gold, #D7BF81); flex-shrink: 0; } .pm-sc__rel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-sc__rel-more { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px 10px; font-size: 12.5px; font-weight: 700; color: var(--pm-gold-deep, #A0894A); text-decoration: none; } .pm-sc__rel-more:hover { color: var(--pm-gold-dark, #BEA86E); } /* ── Footer buttons ── */ /* Pin the buttons to the bottom of the card. When a card has fewer accordions, the empty space falls above the buttons instead of pulling them upward, so the Open Learning Guide and PDF buttons line up across the row. */ .pm-sc__foot { display: flex; gap: 8px; padding-top: 12px; margin-top: auto; } .pm-sc .pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; font-size: 13px; font-weight: 700; letter-spacing: .01em; border-radius: var(--pm-r-pill, 999px); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: all var(--pm-dur, 240ms) var(--pm-ease-smooth, cubic-bezier(.22,1,.36,1)); } .pm-sc .pm-btn--sm { padding: 10px 16px; font-size: 12.5px; } .pm-sc .pm-btn--gold { flex: 1; background: linear-gradient(135deg, var(--pm-gold, #D7BF81) 0%, var(--pm-gold-dark, #BEA86E) 100%); color: var(--pm-black, #0B0B0B); box-shadow: 0 6px 20px rgba(215,191,129,.3); } .pm-sc .pm-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(215,191,129,.45); color: var(--pm-black, #0B0B0B); } .pm-sc .pm-btn--ghost-light { flex: 0 0 auto; color: var(--pm-gold-deep, #A0894A); border-color: var(--pm-gold-a35, rgba(215,191,129,.35)); background: var(--pm-gold-a08, rgba(215,191,129,.08)); } .pm-sc .pm-btn--ghost-light:hover { background: var(--pm-gold-a15, rgba(215,191,129,.15)); border-color: var(--pm-gold, #D7BF81); } /* PDF versions menu (shown when a score has more than one PDF) */ .pm-sc__pdf { position: relative; flex: 0 0 auto; } .pm-sc__pdf-toggle { gap: 6px; } .pm-sc__pdf-chev { transition: transform var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-sc__pdf.is-open .pm-sc__pdf-chev { transform: rotate(180deg); } .pm-sc__pdf-menu { position: absolute; z-index: 8; bottom: calc(100% + 8px); right: 0; min-width: 180px; padding: 6px; background: #fff; border: 1px solid var(--pm-gold-a25, rgba(215,191,129,.25)); border-radius: var(--pm-r-md, 12px); box-shadow: 0 16px 40px rgba(11,11,11,.16); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--pm-dur, 240ms) var(--pm-ease, ease), transform var(--pm-dur, 240ms) var(--pm-ease, ease), visibility var(--pm-dur, 240ms); } .pm-sc__pdf.is-open .pm-sc__pdf-menu { opacity: 1; visibility: visible; transform: translateY(0); } .pm-sc__pdf-item { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--pm-r-md, 10px); font-size: 12.5px; font-weight: 600; color: var(--pm-gray-700, #374151); text-decoration: none; transition: background var(--pm-dur, 240ms) var(--pm-ease, ease), color var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-sc__pdf-item:hover { background: var(--pm-gold-a08, rgba(215,191,129,.08)); color: var(--pm-gold-deep, #A0894A); } .pm-sc__pdf-item svg { color: var(--pm-gold-deep, #A0894A); flex-shrink: 0; } @media (max-width: 600px) { .pm-sc__body { padding: 16px; } .pm-sc__play { padding: 10px 18px 10px 16px; font-size: 13px; } } /* ═══════════════════════════════════════════════════════════════════════ TAB SWITCHER (Sheet Music / Playlists) + SORT control ═══════════════════════════════════════════════════════════════════════ */ .pm-lp-tabs { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.86); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--pm-gold-a25, rgba(215,191,129,.25)); } /* Sticky only on laptop and desktop. On tablet and phone it scrolls away. */ @media (max-width: 1024px) { .pm-lp-tabs { position: static; } } .pm-lp-tabs__inner { max-width: var(--pm-container, 1200px); margin: 0 auto; padding: 14px 24px; display: flex; justify-content: center; } .pm-lp-tabs__group { display: inline-flex; gap: 4px; padding: 5px; background: var(--pm-gold-a08, rgba(215,191,129,.08)); border: 1px solid var(--pm-gold-a25, rgba(215,191,129,.25)); border-radius: var(--pm-r-pill, 999px); } .pm-lp-tab { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; font-size: 13.5px; font-weight: 600; color: var(--pm-gold-deep, #A0894A); background: none; border: 0; cursor: pointer; border-radius: var(--pm-r-pill, 999px); transition: color var(--pm-dur, 240ms) var(--pm-ease, ease), background var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-lp-tab__icon { display: inline-flex; } .pm-lp-tab__count { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--pm-r-pill, 999px); background: rgba(160,137,74,.12); color: var(--pm-gold-deep, #A0894A); } .pm-lp-tab.is-active { color: var(--pm-black, #0B0B0B); background: linear-gradient(135deg, var(--pm-gold-bright, #E6D4A8), var(--pm-gold, #D7BF81)); box-shadow: 0 4px 16px rgba(215,191,129,.4); } .pm-lp-tab.is-active .pm-lp-tab__count { background: rgba(11,11,11,.18); color: var(--pm-black, #0B0B0B); } .pm-lp-tabpanel[hidden] { display: none; } /* Sort control in the finder actions row */ .pm-lp-sort { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; /* Transparent with a soft gold outline, matching the search and filter pills. */ background: transparent; border: 1px solid var(--pm-gold-border); border-radius: var(--pm-r-pill, 999px); color: var(--pm-gray-500, #6B7280); font-size: .82rem; font-weight: 600; transition: border-color var(--pm-dur, 240ms) var(--pm-ease, ease); } .pm-lp-sort:hover { border-color: var(--pm-gold); } .pm-lp-sort__icon { color: var(--pm-gray-400, #9CA3AF); flex-shrink: 0; } .pm-lp-sort__label { letter-spacing: .02em; } .pm-lp-sort__select { border: 0; background: transparent; outline: none; font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--pm-black, #0B0B0B); cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 2px; } /* ═══════════════════════════════════════════════════════════════════════ DARK MODE (light is the default look and is left untouched). Warm dark background (not black), cards in a darker beige that lifts off the bg, and lighter type. The search keeps only its rounded pill (no inner white box). ═══════════════════════════════════════════════════════════════════════ */ /* Charcoal with a faint gold glow at the top of each band, the same signature evolution as the Play page (elegant charcoal and gold, never chocolate). */ html[data-theme="dark"] .pm-lp-finder, html[data-theme="dark"] .pm-lp-scores, html[data-theme="dark"] .pm-lp-spotify { background: radial-gradient(120% 70% at 50% 0%, rgba(215, 191, 129, 0.05), transparent 55%), #0F0F0F; } /* The "Searching scores" loader matches the dark band (it sits between sections on the page body, which stays light in dark mode, so a plain loader flashed white). */ html[data-theme="dark"] .pm-lp-loader { background: #101010; color: #B8AE98; } html[data-theme="dark"] .pm-lp-tabs { background: rgba(16,16,16,.9); border-bottom-color: rgba(215,191,129,.18); } /* Finder title + counts */ html[data-theme="dark"] .pm-lp-finder__title { color: #F3ECDD; } html[data-theme="dark"] .pm-lp-finder__count { color: #B8AE98; } /* Search: a transparent pill (just the loupe and the text) inside a gold border that wraps the whole capsule, no filled rectangle behind the text. */ html[data-theme="dark"] .pm-lp-finder__bar { background: transparent !important; background-color: transparent !important; border: 1.5px solid var(--pm-gold-border, rgba(215, 191, 129, .4)) !important; box-shadow: none !important; } html[data-theme="dark"] .pm-lp-finder__bar:focus-within { border-color: var(--pm-gold, #D7BF81) !important; box-shadow: 0 0 0 3px rgba(215, 191, 129, .16) !important; } html[data-theme="dark"] .pm-lp-finder__input, html[data-theme="dark"] .pm-lp-finder__input:-webkit-autofill, html[data-theme="dark"] .pm-lp-finder__input:-webkit-autofill:hover, html[data-theme="dark"] .pm-lp-finder__input:-webkit-autofill:focus { background: transparent !important; background-color: transparent !important; color: #F3ECDD !important; -webkit-text-fill-color: #F3ECDD !important; box-shadow: none !important; -webkit-box-shadow: none !important; } html[data-theme="dark"] .pm-lp-finder__input::placeholder { color: rgba(243,236,221,.45) !important; -webkit-text-fill-color: rgba(243,236,221,.45) !important; } html[data-theme="dark"] .pm-lp-finder__icon-wrap { color: #A89E88; } /* Filter pills, sort, clear, dropdown menu */ html[data-theme="dark"] .pm-lp-filter__trigger, html[data-theme="dark"] .pm-lp-sort { background: transparent; border-color: var(--pm-gold-border); color: #CBC1AA; } html[data-theme="dark"] .pm-lp-filter__trigger:hover, html[data-theme="dark"] .pm-lp-sort:hover { background: rgba(215,191,129,.12); border-color: var(--pm-gold); color: var(--pm-gold-light); } html[data-theme="dark"] .pm-lp-sort__select { color: #CBC1AA; background: transparent; } html[data-theme="dark"] .pm-lp-sort__select option { color: #F3ECDD; background: #181818; } html[data-theme="dark"] .pm-lp-filter__menu { background: #181818; border-color: rgba(215,191,129,.2); box-shadow: 0 18px 44px rgba(0,0,0,.5); } html[data-theme="dark"] .pm-lp-filter__option { color: #E6DECB; } html[data-theme="dark"] .pm-lp-filter__option:hover { background: rgba(215,191,129,.1); } /* Cards: a lighter charcoal that leans gold, lifting off the darker page, the same treatment as the Play game cards. */ html[data-theme="dark"] .pm-sc { background: linear-gradient(165deg, rgba(215, 191, 129, 0.09) 0%, rgba(215, 191, 129, 0.02) 42%, transparent 100%), #201E19; border-color: rgba(215,191,129,.2); box-shadow: 0 1px 0 rgba(215,191,129,.05), 0 12px 32px rgba(0,0,0,.4); } html[data-theme="dark"] .pm-sc:hover { border-color: var(--pm-gold); box-shadow: 0 0 0 3px rgba(215,191,129,.22), 0 26px 56px rgba(0,0,0,.5); } html[data-theme="dark"] .pm-sc__title { color: #F4EDDE; } html[data-theme="dark"] .pm-sc__title-link:hover .pm-sc__title { color: var(--pm-gold-light); } html[data-theme="dark"] .pm-sc__composer { color: #B8AE98; } html[data-theme="dark"] .pm-sc__composer-label { color: #897F6C; } html[data-theme="dark"] .pm-sc__desc { color: #B8AE98; } html[data-theme="dark"] .pm-sc__like-num { color: #B8AE98; } html[data-theme="dark"] .pm-sc__acc { border-top-color: rgba(215,191,129,.22); } html[data-theme="dark"] .pm-sc__acc-head { color: #E6DECB; } html[data-theme="dark"] .pm-sc__acc-head:hover { background: rgba(215,191,129,.1); } html[data-theme="dark"] .pm-sc__rel-link { color: #C3B9A2; } html[data-theme="dark"] .pm-sc__rel-link:hover { background: rgba(215,191,129,.1); color: var(--pm-gold-light); } html[data-theme="dark"] .pm-sc__rel-name { color: inherit; } /* Engine frame placeholder bg before the iframe paints (matches the dark card). */ html[data-theme="dark"] .pm-sc__player, html[data-theme="dark"] .pm-sc__loading { --pm-sc-frame-bg: #1A1A1A; } /* Spotify section header + See More */ html[data-theme="dark"] .pm-lp-spotify__title { color: #F3ECDD; } html[data-theme="dark"] .pm-lp-spotify__subtitle { color: #B8AE98; } /* Pagination */ html[data-theme="dark"] .pm-lp-pagination__btn { background: #181818; border-color: rgba(215,191,129,.2); color: #CBC1AA; } html[data-theme="dark"] .pm-lp-pagination__btn:hover { border-color: var(--pm-gold); color: var(--pm-gold-light); } html[data-theme="dark"] .pm-lp-pagination__btn.is-active { background: linear-gradient(135deg, var(--pm-gold-light), var(--pm-gold)); color: #1a1a1a; } html[data-theme="dark"] .pm-lp-pagination__dots { color: #897F6C; } /* Le mot d'accent tombe ici sur un panneau clair, mesure a 1.69 et 1.72:1 avec le degrade dore par defaut. Meme geste, memes glyphes, gradient de la famille papier : voir --pm-grad-gold-on-paper dans design-system.css. */ .pm-lp-finder__title-gold { /* background-IMAGE, pas le raccourci `background` : le raccourci reinitialise background-clip a border-box, donc le degrade repeint la BOITE au lieu des glyphes et le titre devient un rectangle dore avec du texte transparent dedans. Ecrit une premiere fois avec le raccourci, vu parce que la sonde a cesse de compter ces titres. */ background-image: var(--pm-grad-gold-on-paper); } html[data-theme="light"] .pm-lp-faq__title-gold { /* background-IMAGE, pas le raccourci `background` : le raccourci reinitialise background-clip a border-box, donc le degrade repeint la BOITE au lieu des glyphes et le titre devient un rectangle dore avec du texte transparent dedans. Ecrit une premiere fois avec le raccourci, vu parce que la sonde a cesse de compter ces titres. */ background-image: var(--pm-grad-gold-on-paper); }