deepdrft/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

/* DeepDrft Global Styles - Simplified & Maintainable

   Note: the palette / token layer (--deepdrft-*, --theme-*, --gradient-*, and the
   .deepdrft-theme-dark override block) lives in DeepDrftShared.Client and is
   served at _content/DeepDrftShared.Client/styles/deepdrft-tokens.css. Link that
   file BEFORE this one in App.razor — every rule below depends on those tokens. */

/* =============================================================================
   1. PAGE BASELINE
   ============================================================================= */

/* Base page colours — use MudBlazor's theme-injected variables so they
   switch automatically when IsDarkMode toggles. The --mud-palette-background
   and --mud-palette-text-primary variables are injected by MudThemeProvider
   and update in both light and dark modes. */
html, body {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

/* Ensure the theme wrapper fills the full viewport so no background gap shows. */
.deepdrft-theme-dark,
.deepdrft-theme-light {
    min-height: 100vh;
}

/* =============================================================================
   2. GRADIENTS
   ============================================================================= */

.deepdrft-gradient-primary,
.deepdrft-gradient-hero {
    background: linear-gradient(135deg,
        var(--gradient-base) 0%,
        color-mix(in srgb, var(--gradient-base) 90%, var(--gradient-accent) 10%) 50%,
        color-mix(in srgb, var(--gradient-base) 80%, var(--gradient-accent) 20%) 100%);
}

.deepdrft-gradient-soft-primary {
    background: linear-gradient(45deg,
        color-mix(in srgb, var(--gradient-accent) 4%, transparent) 0%,
        color-mix(in srgb, var(--gradient-warm) 6%, transparent) 100%);
}

.deepdrft-gradient-soft-secondary {
    background: linear-gradient(45deg,
        color-mix(in srgb, var(--gradient-light) 6%, transparent) 0%,
        color-mix(in srgb, var(--gradient-accent) 4%, transparent) 100%);
}

.deepdrft-gradient-soft-accent {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gradient-accent) 3%, transparent) 0%,
        color-mix(in srgb, var(--gradient-light) 5%, transparent) 100%);
}

.deepdrft-gradient-soft-tertiary {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--gradient-warm) 5%, transparent) 0%,
        color-mix(in srgb, var(--gradient-accent) 3%, transparent) 100%);
}

.deepdrft-gradient-features {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--gradient-accent) 2%, transparent) 0%,
        color-mix(in srgb, var(--gradient-warm) 3%, transparent) 100%);
}

/* =============================================================================
   3. TYPOGRAPHY
   ============================================================================= */

/* Hero text */
h1, .deepdrft-text-hero {
    font-family: var(--deepdrft-font-display);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Suppress the browser focus ring that FocusOnNavigate triggers on h1 after navigation. */
h1:focus-visible { outline: none; }

/* Headers */
h2, h3, h4, h5, h6,
.deepdrft-text-subtitle {
    font-family: var(--deepdrft-font-display);
}

.deepdrft-text-subtitle {
    font-weight: 300;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Body */
.deepdrft-text-description,
.deepdrft-text-readable {
    font-family: var(--deepdrft-font-body);
}

.deepdrft-text-description {
    font-weight: 400;
    opacity: 0.9;
}

.deepdrft-text-bold { font-weight: bold; }
.deepdrft-text-readable { line-height: 1.6; }

/* MudBlazor font overrides */
.mud-typography-h1,
.mud-typography-h2, .mud-typography-h3, .mud-typography-h4,
.mud-typography-h5, .mud-typography-h6,
.mud-navlink-text, .mud-appbar-content {
    font-family: var(--deepdrft-font-display) !important;
}
.mud-button-text,
.mud-typography-caption, .mud-typography-overline {
    font-family: var(--deepdrft-font-mono) !important;
}
.mud-typography-body1, .mud-typography-body2,
.mud-input-text, .mud-select-text, .mud-form-label {
    font-family: var(--deepdrft-font-body) !important;
}

/* =============================================================================
   4. HERO SECTION
   ============================================================================= */

.deepdrft-hero-container {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.deepdrft-hero-text-container {
    max-width: 600px;
}

/* Light mode hero text */
.deepdrft-theme-light .deepdrft-hero-title { color: var(--deepdrft-primary); }
.deepdrft-theme-light .deepdrft-hero-subtitle { color: var(--deepdrft-secondary); }
.deepdrft-theme-light .deepdrft-hero-description { color: var(--theme-surface-soft); }

/* Dark mode hero text */
.deepdrft-theme-dark .deepdrft-hero-title { color: var(--theme-surface); }
.deepdrft-theme-dark .deepdrft-hero-subtitle { color: var(--deepdrft-tertiary); }
.deepdrft-theme-dark .deepdrft-hero-description { color: var(--theme-surface-soft); }

/* Hero buttons - Light */
.deepdrft-theme-light .deepdrft-hero-button-filled.mud-button-filled {
    background-color: var(--deepdrft-primary);
    color: var(--gradient-base);
}
.deepdrft-theme-light .deepdrft-hero-button-outlined.mud-button-outlined {
    border-color: var(--deepdrft-primary);
    color: var(--deepdrft-primary);
}

/* Hero buttons - Dark */
.deepdrft-theme-dark .deepdrft-hero-button-filled.mud-button-filled {
    background-color: var(--deepdrft-primary);
    color: var(--gradient-base);
}
.deepdrft-theme-dark .deepdrft-hero-button-outlined.mud-button-outlined {
    border-color: var(--theme-surface);
    color: var(--theme-surface);
}

/* =============================================================================
   5. APPBAR
   ============================================================================= */

.deepdrft-theme-light .mud-appbar,
.deepdrft-theme-light .mud-appbar *,
.deepdrft-theme-light .mud-appbar .mud-icon-button {
    color: var(--gradient-base);
}

.deepdrft-theme-dark .mud-appbar,
.deepdrft-theme-dark .mud-appbar *,
.deepdrft-theme-dark .mud-appbar .mud-icon-button {
    color: var(--theme-surface);
}

/* =============================================================================
   6. BORDERS (Only used variants)
   ============================================================================= */

.deepdrft-border-left-secondary { border-left: 4px solid var(--theme-secondary); }
.deepdrft-border-left-tertiary { border-left: 4px solid var(--theme-tertiary); }
.deepdrft-border-top-quaternary { border-top: 4px solid var(--theme-quaternary); }
.deepdrft-border-top-senary { border-top: 4px solid var(--theme-senary); }

/* =============================================================================
   7. CARDS & TINTS (Only used variants)
   ============================================================================= */

.deepdrft-feature-card,
.deepdrft-about-card { height: 100%; }

.deepdrft-feature-icon-container { text-align: center; }

/* Card tints - using theme variables */
.deepdrft-card-purple-tint { background: color-mix(in srgb, var(--deepdrft-secondary) 10%, transparent); }
.deepdrft-card-pink-tint { background: color-mix(in srgb, var(--gradient-warm) 10%, transparent); }
.deepdrft-card-indigo-tint { background: color-mix(in srgb, var(--gradient-accent) 8%, transparent); }
.deepdrft-card-lavender-tint { background: color-mix(in srgb, var(--theme-quinary) 10%, transparent); }

/* =============================================================================
   8. (moved to TrackCard.razor.css and TracksGallery.razor.css)
   ============================================================================= */

/* =============================================================================
   9. CHIPS & BUTTONS
   ============================================================================= */

.deepdrft-chip-spacing { margin: 2px; }
.deepdrft-genre-chip { opacity: 0.9; margin-top: 4px; }
.deepdrft-button-spaced { margin: 8px; }

/* Extended palette chips */
.mud-chip.deepdrft-chip-quaternary {
    background-color: var(--theme-quaternary);
    color: white;
}
.mud-chip.deepdrft-chip-quinary {
    background-color: var(--theme-quinary);
    color: white;
}
.mud-chip.deepdrft-chip-senary {
    background-color: var(--theme-senary);
    color: white;
}

/* =============================================================================
   10. EXTENDED PALETTE TEXT COLORS (Only used variants)
   ============================================================================= */

.deepdrft-text-quaternary { color: var(--theme-quaternary); }
.deepdrft-text-quinary { color: var(--theme-quinary); }
.deepdrft-text-senary { color: var(--theme-senary); }

/* =============================================================================
   11. CTA SECTION
   ============================================================================= */

.deepdrft-cta-container {
    border-radius: 16px;
    text-align: center;
}

.deepdrft-cta-buttons { margin-bottom: 16px; }

/* =============================================================================
   12. ICONS & UTILITIES
   ============================================================================= */

.deepdrft-icon-large { font-size: 3rem; }

/* =============================================================================
   13. RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    .deepdrft-hero-text {
        font-size: clamp(1.5rem, 6vw, 3rem) !important;
    }
    .deepdrft-cta-buttons .mud-button {
        margin: 4px !important;
        width: 100%;
    }
}

/* =============================================================================
   14. TRACK DETAIL PAGE
   ============================================================================= */

.deepdrft-track-detail-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

/* Mix detail widens its body to the Sessions detail width (MudContainer Large, ~1280px) by hosting the
   scaffold inside a MudContainer Large and neutralizing the scaffold's own 760px cap for that instance.
   Both classes are global, so a plain descendant selector reaches the scaffold div without ::deep. The
   horizontal gutter is dropped here because the wrapping MudContainer supplies its own. Mix-scoped, so
   Track detail (which also uses .deepdrft-track-detail-container) stays at 760px. */
.mix-detail-container .deepdrft-track-detail-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.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 2rem;
    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;
}

/* Album art fills the square frame; background-size:cover handles any aspect ratio. */
.deepdrft-track-detail-cover-art {
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.deepdrft-track-detail-masthead {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.deepdrft-track-detail-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
    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;
}

.deepdrft-share-popover-body {
    padding: 0.75rem 1rem;
    min-width: 280px;
    max-width: 360px;
}

/* The lava-lamp visualizer-settings popover (Wave 4). Holds the four RadialKnobs in a row; sized so the
   four read clearly with comfortable padding, wrapping to 2×2 on narrow viewports (the inner
   .mix-visualizer-controls owns the flex-wrap). MudPopover renders into the popover-provider portal at
   the document root, so this is a global class — not component-scoped. */
.mix-visualizer-popover {
    padding: 0.75rem;
    max-width: 360px;
}

/* Monospace snippet so the iframe markup stays legible inside the readonly field. */
.deepdrft-share-embed-field {
    flex: 1 1 auto;
}

.deepdrft-share-embed-field .mud-input-slot {
    font-family: var(--deepdrft-font-mono) !important;
    font-size: 0.75rem;
    word-break: break-all;
}

/* 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;
}

@media (max-width: 419.98px) {
    .deepdrft-track-detail-meta {
        flex-direction: column;
    }
}

/* =============================================================================
   BUTTON UTILITIES  (btn-primary, btn-ghost)
   ============================================================================= */

.btn-primary {
    font-family: var(--deepdrft-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--deepdrft-white);
    background: var(--deepdrft-navy);
    border: none;
    padding: 1rem 2.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.25s, transform 0.2s;
    display: inline-block;
}

.btn-primary:hover {
    background: var(--deepdrft-green);
    transform: translateY(-1px);
}

.btn-ghost {
    font-family: var(--deepdrft-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--deepdrft-navy);
    background: transparent;
    border: 1px solid var(--deepdrft-border);
    padding: 1rem 2.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.25s, color 0.25s;
    display: inline-block;
}

.btn-ghost:hover { border-color: var(--deepdrft-navy); }

@media (max-width: 599px) {
    .btn-primary,
    .btn-ghost {
        text-align: center;
    }
}

/* =============================================================================
   CUT ALBUM DETAIL  (/cuts/{id})
   Header splits left-meta / right-cover; the cover carries an explicit theme
   border (the new visual element vs. the borderless Session/Mix covers).
   ============================================================================= */

.cut-detail-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    margin: 2rem 0 1.5rem;
}

.cut-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.cut-detail-subline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.75;
    font-family: var(--deepdrft-font-mono);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.cut-detail-sep { opacity: 0.5; }

.cut-detail-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Square cover with a framed theme border — the new visual element this page introduces. */
.cut-detail-cover {
    aspect-ratio: 1 / 1;
    width: 260px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 3px solid var(--mud-palette-secondary);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
}

.cut-detail-divider { margin: 1.5rem 0 0.5rem; }

.cut-detail-empty {
    opacity: 0.7;
    padding: 1rem 0;
}

.cut-detail-tracklist {
    display: flex;
    flex-direction: column;
}

.cut-detail-track-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-secondary) 12%, transparent);
}

.cut-detail-track-row:last-child { border-bottom: none; }

.cut-detail-track-number {
    width: 1.75rem;
    text-align: right;
    flex: 0 0 auto;
    opacity: 0.55;
    font-family: var(--deepdrft-font-mono);
    font-size: 0.9rem;
}

.cut-detail-track-play { flex: 0 0 auto; }

.cut-detail-track-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* Stack the header on narrow screens: cover above the meta column. */
@media (max-width: 599px) {
    .cut-detail-header {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 1.25rem;
    }

    .cut-detail-cover {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
}