Add track detail page with clickable cards

2026-06-06 16:33:57 -04:00
parent 1bb6e29e47
commit 0dd33a5dfc
6 changed files with 371 additions and 11 deletions
@@ -271,3 +271,79 @@ h2, h3, h4, h5, h6,
    }
 }

+/* =============================================================================
+   14. TRACK DETAIL PAGE
+   ============================================================================= */
+
+.deepdrft-track-detail-container {
+    max-width: 760px;
+    margin: 0 auto;
+    padding: 3rem 1.5rem 4rem;
+}
+
+.deepdrft-track-detail-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 1.5rem;
+    opacity: 0.65;
+    transition: opacity 0.15s ease;
+}
+
+.deepdrft-track-detail-back:hover {
+    opacity: 1;
+}
+
+/* Square cover frame — the placeholder MudPaper fills it. */
+.deepdrft-track-detail-cover {
+    aspect-ratio: 1 / 1;
+    max-width: 360px;
+    margin: 0 auto;
+    overflow: hidden;
+    box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
+}
+
+/* Stat-card parallel: elevated surface with a soft secondary wash, album icon centered. */
+.deepdrft-track-detail-cover-placeholder {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--mud-palette-surface);
+}
+
+.deepdrft-track-detail-cover-placeholder .mud-icon-root {
+    font-size: 72px;
+}
+
+.deepdrft-track-detail-masthead {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin: 2rem 0 1.5rem;
+}
+
+.deepdrft-track-detail-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+/* Small-caps mono labels match the caption/overline typography override. */
+.deepdrft-track-detail-meta .mud-typography-overline {
+    font-variant: small-caps;
+    opacity: 0.6;
+    font-family: var(--deepdrft-font-mono) !important;
+}
+
+/* display:contents so the anchor wraps the card's cover and title without
+   introducing its own box — the container's positioning context and the
+   content column's flex layout are both preserved. */
+.deepdrft-track-card-link {
+    display: contents;
+    text-decoration: none;
+    color: inherit;
+}
+