/* --------------------------------------------------------------------------- details.css — the /details product page. SOURCE: pages/details_05.html.txt (26 July 2026), the authored page. Unlike /browse and /account this source is a COMPLETE HTML document, head and all, not a Simvoly body fragment — so its was discarded and only the style block, the body markup and the one script survive into the port. Rules VERBATIM apart from the three marked below: the global `*` reset, the `body` rule, and --font-family. Variable names (--primary-color, --surface ...) are the page's own and do not collide with theme-black.css (--primary-green, --card-bg, --dark-bg). --------------------------------------------------------------------------- */ :root { --primary-color: #1DB954; --primary-hover: #1ed760; --background: #0a0a0a; --surface: #1a1a1a; --surface-elevated: #2a2a2a; --border: #333; --text-primary: #ffffff; --text-secondary: #999; --text-tertiary: #666; --text-on-primary: #000; --font-family: HelveticaNeue, Arial, 'Open Sans', 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* was -apple-system/Segoe UI/Roboto */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; } /* Global `*` reset removed — theme-black.css already sets it site-wide. */ /* The page's own `body` rule removed. It set -apple-system/Segoe UI/Roboto, a different stack from the rest of the site, plus min-height:100vh which fights the shell's header and footer. The shell owns body type, colour, background and height. --font-family below is repointed at the site stack. */ .loading-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; flex-direction: column; gap: 16px; } .loading-spinner { width: 48px; height: 48px; border: 4px solid var(--border); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .error-screen { display: none; align-items: center; justify-content: center; min-height: 100vh; flex-direction: column; gap: 16px; padding: 24px; text-align: center; } .error-screen h2 { color: var(--text-primary); font-size: 24px; } .error-screen p { color: var(--text-secondary); max-width: 500px; } .page-wrapper { max-width: 1200px; margin: 0 auto; padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xl) var(--spacing-md); display: none; } .page-wrapper.visible { display: block; } .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary) !important; text-decoration: none; font-size: 12px; margin-bottom: var(--spacing-sm); transition: color 0.2s; } .back-link:hover { color: var(--primary-color) !important; } .hero-section { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .cover-art { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .hero-info { display: flex; flex-direction: column; gap: var(--spacing-sm); min-width: 0; width: 100%; } .title { font-size: 32px; font-weight: 700; color: var(--text-primary) !important; line-height: 1.1; margin-bottom: var(--spacing-sm); } .credits-section { color: var(--text-secondary) !important; font-size: 14px; line-height: 1.5; margin-bottom: var(--spacing-sm); } .credits-section strong { color: var(--text-primary) !important; display: block; margin-bottom: 4px; } .metadata { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: var(--spacing-sm); } .metadata-item { display: flex; flex-direction: column; gap: 4px; } .metadata-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary) !important; font-weight: 600; } .metadata-value { font-size: 14px; color: var(--text-primary) !important; font-weight: 600; } .description { color: var(--text-secondary) !important; font-size: 14px; line-height: 1.5; padding: var(--spacing-sm); background: var(--surface); border-radius: var(--radius-md); border-left: 4px solid var(--primary-color); width: 100%; margin-bottom: var(--spacing-sm); white-space: pre-line; } .cta-buttons { display: flex; gap: var(--spacing-sm); margin-top: auto; } .btn { padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: 20px; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: none; font-family: var(--font-family); } .btn-primary { background: var(--primary-color) !important; color: var(--text-on-primary) !important; } .btn-primary:hover { background: var(--primary-hover) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29, 185, 84, 0.3); } .btn-secondary { background: transparent !important; color: var(--text-primary) !important; border: 2px solid var(--border) !important; } .btn-secondary:hover { border-color: var(--text-primary) !important; transform: translateY(-2px); } .packages-section { margin-bottom: var(--spacing-lg); width: 100%; } .riddim-name { font-size: 18px; color: var(--text-secondary) !important; margin: -6px 0 12px; font-style: italic; } .detail-section { width: 100%; margin-bottom: var(--spacing-lg); } .detail-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary) !important; font-weight: 600; margin-bottom: 10px; } .chip-group { margin-bottom: 18px; } .chip-group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary) !important; font-weight: 600; margin-bottom: 7px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-block; padding: 5px 13px; font-size: 13px; border-radius: 20px; background: var(--surface); border: 2px solid var(--border); color: var(--text-primary) !important; } .pkg-manifest-link { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); background: none; border: none; padding: 0; font-family: var(--font-family); cursor: pointer; text-align: left; } .pkg-manifest-link:hover { color: var(--primary-color); } .pkg-manifest-link .caret { display: inline-block; margin-left: 5px; font-size: 9px; transition: transform 0.2s ease; } .pkg-manifest-link.open .caret { transform: rotate(180deg); } .pkg-manifest { display: none; grid-column: 1 / -1; margin: 4px 0 2px; padding: 14px 16px; background: var(--background); border-radius: var(--radius-md); } .pkg-manifest.open { display: block; } .pkg-manifest-files { columns: 3; column-gap: 24px; font-size: 13px; line-height: 1.85; color: var(--text-secondary); } .pkg-manifest-files div { break-inside: avoid; } .pkg-manifest-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-tertiary); } @media (max-width: 900px) { .pkg-manifest-files { columns: 2; } } @media (max-width: 600px) { .pkg-manifest-files { columns: 1; } } .legal-notice { font-size: 12px; line-height: 1.7; color: var(--text-tertiary) !important; border-top: 2px solid var(--border); padding-top: 16px; margin-top: var(--spacing-md); white-space: pre-line; } .legal-notice a { color: var(--primary-color); } .section-header { margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-xs); border-bottom: 2px solid var(--border); } .section-title { font-size: 20px; font-weight: 700; color: var(--text-primary) !important; } .section-subtitle { font-size: 13px; color: var(--text-secondary) !important; margin-top: 2px; } .packages-grid { display: grid; gap: 6px; width: 100%; } .package-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px; display: flex; flex-direction: row; gap: var(--spacing-sm); align-items: center; transition: all 0.3s ease; width: 100%; min-height: 52px; } .package-card:hover { border-color: var(--primary-color); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(29, 185, 84, 0.15); } .package-card.featured { border-color: var(--primary-color); background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%); } .package-card:has(.play-button.playing) { border-color: var(--primary-color); background: linear-gradient(135deg, var(--surface) 0%, var(--surface-elevated) 100%); } .package-card.owned { border-color: #4CAF50; background: rgba(76, 175, 80, 0.1); } .ownership-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: rgba(76, 175, 80, 0.2); border: 1px solid #4CAF50; border-radius: 12px; font-size: 11px; font-weight: 700; color: #4CAF50 !important; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } .play-button { width: 40px; height: 40px; background: var(--primary-color) !important; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; position: relative; flex-shrink: 0; } .play-button:hover { background: var(--primary-hover) !important; transform: scale(1.05); } .play-button.playing { background: var(--primary-hover) !important; } .play-icon { width: 0; height: 0; border-left: 10px solid var(--text-on-primary); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 2px; pointer-events: none; } .pause-icon { display: none; width: 10px; height: 14px; border-left: 3px solid var(--text-on-primary); border-right: 3px solid var(--text-on-primary); pointer-events: none; } .play-button.playing .play-icon { display: none; } .play-button.playing .pause-icon { display: block; } .package-info { flex: 1 1 auto; max-width: none !important; } .package-name { font-size: 15px; font-weight: 600; color: var(--text-primary) !important; margin-bottom: 0px; line-height: 1.3; } .package-details { font-size: 13px; color: var(--text-secondary) !important; line-height: 1.3; } .package-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-xs); flex-shrink: 0; } .package-price { font-size: 20px; font-weight: 700; color: var(--primary-color) !important; white-space: nowrap; } .package-price span { font-size: 12px; font-weight: 400; color: var(--text-secondary) !important; } .package-buttons { display: flex; gap: var(--spacing-xs); } .btn-icon { width: 32px; height: 32px; background: transparent; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-size: 14px; color: var(--text-secondary) !important; } .btn-icon:hover { border-color: var(--primary-color); color: var(--primary-color) !important; transform: scale(1.05); } .btn-icon.favorited { color: #ff4444 !important; border-color: #ff4444; } .btn-cart { background: var(--primary-color) !important; color: var(--text-on-primary) !important; border: 2px solid var(--primary-color) !important; padding: 6px 16px; border-radius: 16px; font-size: 12px; font-weight: 600; white-space: nowrap; width: auto; height: 32px; cursor: pointer; transition: all 0.2s; font-family: var(--font-family); } .btn-cart:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; } .btn-cart.in-cart { background: var(--surface-elevated) !important; color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .btn-cart.owned-item { background: transparent !important; color: #4CAF50 !important; border-color: #4CAF50 !important; text-decoration: none !important; } .btn-cart.owned-item:hover { background: rgba(76, 175, 80, 0.1) !important; } .audio-player-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface-elevated); border-top: 2px solid var(--border); padding: var(--spacing-sm); display: none; align-items: center; gap: var(--spacing-md); z-index: 1000; } .audio-player-bar.active { display: flex; } .now-playing-info { display: flex; align-items: center; gap: var(--spacing-sm); flex: 0 0 auto; min-width: 200px; max-width: 300px; } .now-playing-cover { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .now-playing-text { min-width: 0; } .now-playing-title { font-size: 14px; font-weight: 600; color: var(--text-primary) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .now-playing-subtitle { font-size: 12px; color: var(--text-secondary) !important; } .player-controls { display: flex; align-items: center; gap: var(--spacing-md); flex: 1; max-width: none; } .player-time { font-size: 12px; color: var(--text-secondary) !important; min-width: 40px; text-align: right; } .progress-bar { flex: 1; height: 12px; background: var(--border); border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .progress-fill { height: 100%; background: var(--primary-color); border-radius: 6px; width: 0%; transition: width 0.1s linear; } @media (max-width: 1100px) { .hero-section { grid-template-columns: 1fr; gap: var(--spacing-md); } .cover-art { max-width: 300px; margin: 0 auto; } } @media (max-width: 768px) { .package-card { flex-direction: column; align-items: stretch; gap: var(--spacing-sm); } .package-actions { flex-direction: row; justify-content: space-between; align-items: center; width: 100%; } .audio-player-bar { flex-wrap: wrap; } .player-controls { width: 100%; order: 3; } }