Add Playlists page with Spotify and YouTube Music links for BSKZ

New page at /playlists listing 40 curated playlists (5 Spotify + 5 YouTube Music per dance style) for Bachata, Salsa, Kizomba and Zouk. Each card shows mood tags and links directly to the playlist or search. Navigation updated across all pages. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-02 15:07:28 +07:00
parent f7e43a57fe
commit 9b13ac93de
8 changed files with 673 additions and 12 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -1503,3 +1503,108 @@ body > *:not(.sfB-bg) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .sfB-palm { animation: none !important; }
 }
+
+/* ── Playlists page ── */
+.sfB-pl-section {
+  margin-top: 40px;
+}
+.sfB-pl-section + .sfB-pl-section {
+  padding-top: 32px;
+  border-top: 1px solid rgba(255,246,232,0.06);
+}
+.sfB-pl-section-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+.sfB-pl-title {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 800;
+  font-size: 48px;
+  letter-spacing: -1.5px;
+  line-height: 1;
+}
+.sfB-pl-platform-group {
+  margin-bottom: 14px;
+}
+.sfB-pl-platform-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+.sfB-pl-platform-label .pdot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.sfB-pl-platform-label .pdot.spotify { background: #1DB954; box-shadow: 0 0 6px #1DB954; }
+.sfB-pl-platform-label .pdot.ytmusic { background: #FF4444; box-shadow: 0 0 6px #FF4444; }
+.sfB-pl-platform-label.spotify { color: rgba(29,185,84,0.85); }
+.sfB-pl-platform-label.ytmusic { color: rgba(255,80,80,0.85); }
+.sfB-pl-grid5 {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.sfB-pl-card {
+  padding: 16px;
+  border-radius: 14px;
+  background: rgba(255,246,232,0.04);
+  border: 1px solid rgba(255,246,232,0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: all .2s;
+  text-decoration: none;
+}
+.sfB-pl-card:hover { background: rgba(255,246,232,0.07); transform: translateY(-2px); }
+.sfB-pl-card.spotify:hover { border-color: rgba(29,185,84,0.45); }
+.sfB-pl-card.ytmusic:hover { border-color: rgba(255,68,68,0.4); }
+.sfB-pl-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  flex: 1;
+}
+.sfB-pl-tag {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  padding: 3px 7px;
+  border-radius: 4px;
+  background: rgba(255,246,232,0.08);
+  color: rgba(255,246,232,0.6);
+}
+.sfB-pl-open {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  padding: 7px 11px;
+  border-radius: 8px;
+  transition: all .15s;
+  align-self: flex-start;
+}
+.sfB-pl-card.spotify .sfB-pl-open { background: rgba(29,185,84,0.12); color: #1DB954; }
+.sfB-pl-card.spotify .sfB-pl-open:hover { background: rgba(29,185,84,0.22); }
+.sfB-pl-card.ytmusic .sfB-pl-open { background: rgba(255,68,68,0.12); color: #FF7070; }
+.sfB-pl-card.ytmusic .sfB-pl-open:hover { background: rgba(255,68,68,0.22); }
+
+@media (max-width: 960px) {
+  .sfB-pl-grid5 { grid-template-columns: repeat(3, 1fr); }
+  .sfB-pl-title { font-size: 36px; }
+}
+@media (max-width: 600px) {
+  .sfB-pl-grid5 { grid-template-columns: repeat(2, 1fr); }
+  .sfB-pl-title { font-size: 28px; }
+}