daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

Front End Work

Browse Source 
- Home Page
 - Custom Site Styles & Mud Theme Adjustments
This commit is contained in:
daniel-c-harvey
2025-09-06 14:19:09 -04:00
parent 66d800bd26
commit 5a8a2da842
8 changed files with 555 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftWeb.Client/Controls/AudioPlayerBar.razor
+5 -5
View File
@@ -15,7 +15,7 @@
Disabled="!IsLoaded"/>
}
</MudStack>
<MudText Typo="Typo.body2" Class="font-monospace" Style="min-width: 120px">
<MudText Typo="Typo.body2" Class="font-monospace deepdrft-audio-time">
@FormatTime(CurrentTime) / @FormatTime(Duration)
</MudText>
</MudStack>
@@ -27,17 +27,17 @@
Value="@CurrentTime"
ValueChanged="@OnSeek"
Disabled="!IsLoaded"
Style="flex: 1; margin-right: 8px;"/>
Class="deepdrft-audio-slider-seek"/>
<div style="display: flex; align-items: center; width: 140px;">
<MudIcon Icon="@GetVolumeIcon()" Style="margin-right: 4px;"/>
<div class="deepdrft-audio-controls">
<MudIcon Icon="@GetVolumeIcon()" Class="deepdrft-audio-volume-icon"/>
<MudSlider T="double"
Min="0"
Max="1"
Step="0.01"
Value="@Volume"
ValueChanged="@OnVolumeChange"
Style="flex: 1;"/>
Class="deepdrft-audio-slider"/>
</div>
</MudStack>
@if (!string.IsNullOrEmpty(ErrorMessage))
DeepDrftWeb.Client/Controls/TrackCard.razor
+10 -17
View File
@@ -1,42 +1,35 @@
<MudCard Style="width: 250px; height: 250px; position: relative; overflow: hidden;"
<MudCard Class="deepdrft-track-card-container"
Elevation="4">
@if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
{
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background-image: url('@TrackModel.ImagePath');
background-size: cover;
background-position: center;
filter: brightness(0.7);">
<div class="deepdrft-track-card-bg" style="background-image: url('@TrackModel.ImagePath');">
</div>
}
else
{
<MudPaper Style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
Class="mud-theme-secondary"
<MudPaper Class="deepdrft-track-card-fallback mud-theme-secondary"
Elevation="0">
</MudPaper>
}
<MudCardContent Style="position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;">
<MudCardContent Class="deepdrft-track-card-content">
<div>
<div class="deepdrft-track-info-top">
<MudText Typo="Typo.h6"
Color="Color.Surface"
Style="margin-bottom: 4px;"
Class="text-truncate">
Class="text-truncate mb-1">
@TrackModel?.TrackName
</MudText>
<MudText Typo="Typo.subtitle1"
Color="Color.Surface"
Style="margin-bottom: 8px;"
Class="text-truncate">
Class="text-truncate mb-2">
@TrackModel?.Artist
</MudText>
</div>
<div Style="margin: 8px 0;">
<div class="deepdrft-track-info-middle">
@if (!string.IsNullOrEmpty(TrackModel?.Album))
{
<MudText Typo="Typo.caption"
@@ -52,13 +45,13 @@
Size="Size.Small"
Variant="Variant.Filled"
Color="Color.Primary"
Style="opacity: 0.9; margin-top: 4px;">
Class="deepdrft-genre-chip">
@TrackModel.Genre
</MudChip>
}
</div>
<div Style="display: flex; justify-content: space-between; align-items: center;">
<div class="deepdrft-track-info-bottom">
@if (TrackModel?.ReleaseDate.HasValue == true)
{
<MudText Typo="Typo.caption"
DeepDrftWeb.Client/Controls/TracksGallery.razor
+1 -1
View File
@@ -3,7 +3,7 @@
@foreach (var track in Tracks)
{
<MudItem xs="12" sm="6" md="4" lg="2" xl="2">
<div Style="display: flex; justify-content: center;">
<div class="deepdrft-track-gallery-item-center">
<TrackCard TrackModel="@track" IsPlaying="@(track.Id == SelectedTrack?.Id)" OnPlay="@HandlePlayClick"/>
</div>
</MudItem>
DeepDrftWeb.Client/Layout/MainLayout.razor
+27 -27
View File
@@ -74,10 +74,10 @@
private readonly PaletteLight _lightPalette = new()
{
Primary = "#9370DB", // MediumPurple - stronger but still pastel
Secondary = "#F4A460", // SandyBrown - warm pastel orange
Tertiary = "#FF1493", // DeepPink - vibrant accent (kept neon)
Info = "#8A2BE2", // BlueViolet - stronger purple info
Primary = "#8A2BE2", // BlueViolet - main DeepDrft purple
Secondary = "#FF1493", // DeepPink - main DeepDrft pink
Tertiary = "#4B0082", // Indigo - DeepDrft deep purple
Info = "#9370DB", // MediumPurple - DeepDrft accent purple
Success = "#98FB98", // PaleGreen - soft success
Warning = "#FFEAA7", // Light peach - soft warning
Error = "#FFB6C1", // LightPink - soft error
@@ -86,35 +86,35 @@
Surface = "#FFFAF0", // FloralWhite - creamy surface
Background = "#FAF0E6", // Linen - warm cream background
AppbarText = "#2F2F2F", // Dark text on light appbar
AppbarBackground = "rgba(211,180,221,0.90)", // Translucent plum - more presence
DrawerBackground = "#D3B4DD", // Plum drawer - stronger presence
AppbarBackground = "rgba(138,43,226,0.85)", // Translucent DeepDrft primary
DrawerBackground = "rgba(138,43,226,0.1)", // Very light DeepDrft primary
TextPrimary = "#2F2F2F", // Dark primary text
TextSecondary = "#6B6B6B", // Medium gray secondary text
GrayLight = "#E6E6FA", // Lavender - light purple-tinted gray
GrayLighter = "#F8F8FF", // GhostWhite - very light purple-tinted
GrayDefault = "#BC8F8F", // RosyBrown - warm gray
GrayDark = "#8B4513", // SaddleBrown - warm dark gray
Divider = "#E6E6FA", // Lavender - soft purple divider lines
TableLines = "#E6E6FA", // Lavender - soft table lines
GrayLight = "rgba(138,43,226,0.1)", // Light DeepDrft tint
GrayLighter = "rgba(138,43,226,0.05)", // Very light DeepDrft tint
GrayDefault = "rgba(138,43,226,0.2)", // Medium DeepDrft tint
GrayDark = "rgba(138,43,226,0.4)", // Darker DeepDrft tint
Divider = "rgba(138,43,226,0.15)", // Soft DeepDrft divider lines
TableLines = "rgba(138,43,226,0.15)", // Soft DeepDrft table lines
};
private readonly PaletteDark _darkPalette = new()
{
Primary = "#FF69B4", // HotPink - softer magenta for dark mode
Secondary = "#4B0082", // Indigo - deep purple from logo
Tertiary = "#8A2BE2", // BlueViolet - purple accent instead of blue
Info = "#9370DB", // MediumPurple - purple info instead of blue
Primary = "#FF1493", // DeepPink - main DeepDrft pink for dark mode
Secondary = "#8A2BE2", // BlueViolet - main DeepDrft purple
Tertiary = "#9370DB", // MediumPurple - DeepDrft accent
Info = "#4B0082", // Indigo - DeepDrft deep purple
Success = "#00FF7F", // SpringGreen - bright success
Warning = "#FFD700", // Gold - warning color
Error = "#FF6347", // Tomato - error color
Black = "#000000", // Pure black
White = "#FFFFFF", // Pure white
Surface = "#2D1B4E", // Dark purple - surface with purple tint
Background = "#0D0D0D", // Near black - very dark background
Surface = "rgba(75,0,130,0.2)", // Dark DeepDrft indigo tint
Background = "#0A0A0A", // Very dark background
BackgroundGray = "#1A1A1A", // Very dark gray
AppbarText = "#FFFFFF", // White text on dark appbar
AppbarBackground = "rgba(45,27,78,0.95)", // Translucent dark purple
DrawerBackground = "#2D1B4E", // Dark purple drawer
AppbarBackground = "rgba(75,0,130,0.95)", // Translucent DeepDrft indigo
DrawerBackground = "rgba(75,0,130,0.15)", // Dark DeepDrft indigo tint
DrawerIcon = "#E0E0E0", // Light gray icons
DrawerText = "#E0E0E0", // Light gray drawer text
ActionDefault = "#BDBDBD", // Light gray for actions
@@ -123,13 +123,13 @@
TextPrimary = "#FFFFFF", // White primary text
TextSecondary = "#E0E0E0", // Light gray secondary text
TextDisabled = "#757575", // Disabled text
GrayLight = "#424242", // Light gray in dark mode
GrayLighter = "#2F2F2F", // Lighter gray in dark mode
GrayDefault = "#757575", // Default gray
GrayDark = "#BDBDBD", // Dark gray (inverted for dark mode)
Divider = "#424242", // Medium gray divider lines
LinesDefault = "#424242", // Default lines
TableLines = "#424242", // Table lines
GrayLight = "rgba(255,20,147,0.15)", // Light DeepDrft pink tint
GrayLighter = "rgba(255,20,147,0.08)", // Lighter DeepDrft pink tint
GrayDefault = "rgba(255,20,147,0.25)", // Default DeepDrft pink tint
GrayDark = "rgba(255,20,147,0.4)", // Darker DeepDrft pink tint
Divider = "rgba(255,20,147,0.2)", // DeepDrft pink divider lines
LinesDefault = "rgba(255,20,147,0.2)", // DeepDrft pink lines
TableLines = "rgba(255,20,147,0.2)", // DeepDrft pink table lines
OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay
OverlayDark = "rgba(255,255,255,0.1)", // Light overlay for dark mode
};
DeepDrftWeb.Client/Layout/NavMenu.razor
+1 -2
View File
@@ -1,8 +1,7 @@
@using DeepDrftWeb.Client.Controls
<AppNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</AppNavLink>
<AppNavLink Href="/tracks" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.BrowseGallery">Track Gallery</AppNavLink>
<AppNavLink Href="/audio-example" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.LibraryMusic">Audio Test</AppNavLink>
<AppNavLink Href="/tracks" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.LibraryMusic">Track Gallery</AppNavLink>
DeepDrftWeb.Client/Pages/Home.razor
+222 -1
View File
@@ -1,4 +1,225 @@
@page "/"
<PageTitle>Deep Drft Home</PageTitle>
<PageTitle>DeepDrft - Electronic Music Collective</PageTitle>
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-0">
@* Hero Section *@
<MudPaper Elevation="0" Class="pa-8 mb-6 text-center deepdrft-gradient-hero deepdrft-hero-container">
<MudGrid Justify="Justify.Center" AlignItems="Center">
<MudItem xs="12" md="8">
<MudText Typo="Typo.h1" Color="Color.Surface"
Class="mb-4 deepdrft-text-hero">
DEEPDRFT
</MudText>
<MudText Typo="Typo.h4" Color="Color.Surface"
Class="mb-6 deepdrft-text-subtitle">
ELECTRONIC MUSIC COLLECTIVE
</MudText>
<MudText Typo="Typo.h6" Color="Color.Surface"
Class="mb-8 deepdrft-text-description deepdrft-hero-text-container">
Live electronic music from Charleston, SC featuring house, techno, trance, and IDM crafted with synthesizers and grooveboxes
</MudText>
<MudButton Variant="Variant.Filled"
Color="Color.Surface"
Size="Size.Large"
Class="mr-4 mb-2 deepdrft-button-primary">
<MudIcon Icon="@Icons.Material.Filled.PlayArrow" Class="mr-2" />
START STREAMING
</MudButton>
<MudButton Variant="Variant.Outlined"
Color="Color.Surface"
Size="Size.Large"
Class="mb-2 deepdrft-button-outlined">
<MudIcon Icon="@Icons.Material.Filled.LibraryMusic" Class="mr-2" />
BROWSE TRACKS
</MudButton>
</MudItem>
</MudGrid>
</MudPaper>
@* About Section *@
<MudGrid Class="mb-8" Spacing="6">
<MudItem xs="12" md="6">
<MudPaper Elevation="4" Class="pa-6 deepdrft-gradient-soft-primary deepdrft-border-left-primary deepdrft-about-card">
<MudText Typo="Typo.h4" Color="Color.Primary" Class="mb-4 deepdrft-text-bold">
<MudIcon Icon="@Icons.Material.Filled.Group" Class="mr-2" />
The Collective
</MudText>
<MudText Typo="Typo.body1" Class="mb-4 deepdrft-text-readable">
DeepDrft is a two-member electronic music collective based in Charleston, South Carolina.
We create immersive soundscapes that blend the energy of underground club culture with
the precision of live electronic performance.
</MudText>
<MudText Typo="Typo.body1" Class="deepdrft-text-readable">
Using an arsenal of synthesizers, drum machines, and grooveboxes, we craft dynamic live
performances that span house, techno, trance, and intelligent dance music (IDM).
Every session is a journey through sound and rhythm.
</MudText>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6">
<MudPaper Elevation="4" Class="pa-6 deepdrft-gradient-soft-secondary deepdrft-border-left-secondary deepdrft-about-card">
<MudText Typo="Typo.h4" Color="Color.Secondary" Class="mb-4 deepdrft-text-bold">
<MudIcon Icon="@Icons.Material.Filled.MusicNote" Class="mr-2" />
Our Sound
</MudText>
<MudChipSet T="string" Class="mb-4">
<MudChip Color="Color.Primary" Class="deepdrft-chip-spacing">House</MudChip>
<MudChip Color="Color.Secondary" Class="deepdrft-chip-spacing">Techno</MudChip>
<MudChip Color="Color.Tertiary" Class="deepdrft-chip-spacing">Trance</MudChip>
<MudChip Color="Color.Info" Class="deepdrft-chip-spacing">IDM</MudChip>
<MudChip Color="Color.Primary" Variant="Variant.Outlined" Class="deepdrft-chip-spacing">Progressive</MudChip>
<MudChip Color="Color.Secondary" Variant="Variant.Outlined" Class="deepdrft-chip-spacing">Ambient</MudChip>
</MudChipSet>
<MudText Typo="Typo.body1" Class="deepdrft-text-readable">
From deep, driving basslines to ethereal atmospheric textures, our music explores the
full spectrum of electronic expression. We believe in the power of live performance
to create unique, unrepeatable moments that connect artist and audience through rhythm and melody.
</MudText>
</MudPaper>
</MudItem>
</MudGrid>
@* Features Section *@
<MudPaper Elevation="2" Class="pa-8 mb-8 deepdrft-gradient-features">
<MudText Typo="Typo.h3" Align="Align.Center" Color="Color.Primary" Class="mb-8 deepdrft-text-bold">
Experience DeepDrft
</MudText>
<MudGrid Spacing="6">
<MudItem xs="12" sm="6" md="3">
<MudCard Elevation="8" Class="pa-4 deepdrft-feature-card deepdrft-feature-icon-container deepdrft-card-purple-tint">
<MudIcon Icon="@Icons.Material.Filled.Headphones"
Size="Size.Large"
Color="Color.Primary"
Class="mb-3 deepdrft-icon-large" />
<MudText Typo="Typo.h6" Color="Color.Primary" Class="mb-2 deepdrft-text-bold">
High-Quality Streaming
</MudText>
<MudText Typo="Typo.body2">
Crystal-clear audio streaming with lossless quality for the best listening experience
</MudText>
</MudCard>
</MudItem>
<MudItem xs="12" sm="6" md="3">
<MudCard Elevation="8" Class="pa-4 deepdrft-feature-card deepdrft-feature-icon-container deepdrft-card-pink-tint">
<MudIcon Icon="@Icons.Material.Filled.LiveTv"
Size="Size.Large"
Color="Color.Tertiary"
Class="mb-3 deepdrft-icon-large" />
<MudText Typo="Typo.h6" Color="Color.Tertiary" Class="mb-2 deepdrft-text-bold">
Live Sessions
</MudText>
<MudText Typo="Typo.body2">
Join us for live streaming sessions and experience electronic music as it's created
</MudText>
</MudCard>
</MudItem>
<MudItem xs="12" sm="6" md="3">
<MudCard Elevation="8" Class="pa-4 deepdrft-feature-card deepdrft-feature-icon-container deepdrft-card-indigo-tint">
<MudIcon Icon="@Icons.Material.Filled.VideoLibrary"
Size="Size.Large"
Color="Color.Secondary"
Class="mb-3 deepdrft-icon-large" />
<MudText Typo="Typo.h6" Color="Color.Secondary" Class="mb-2 deepdrft-text-bold">
Video Content
</MudText>
<MudText Typo="Typo.body2">
Watch behind-the-scenes content and live performance videos (coming soon)
</MudText>
</MudCard>
</MudItem>
<MudItem xs="12" sm="6" md="3">
<MudCard Elevation="8" Class="pa-4 deepdrft-feature-card deepdrft-feature-icon-container deepdrft-card-lavender-tint">
<MudIcon Icon="@Icons.Material.Filled.Archive"
Size="Size.Large"
Color="Color.Info"
Class="mb-3 deepdrft-icon-large" />
<MudText Typo="Typo.h6" Color="Color.Info" Class="mb-2 deepdrft-text-bold">
Growing Archive
</MudText>
<MudText Typo="Typo.body2">
Explore our expanding collection of tracks, mixes, and live recordings
</MudText>
</MudCard>
</MudItem>
</MudGrid>
</MudPaper>
@* Location & Connect Section *@
<MudGrid Class="mb-8" Spacing="6">
<MudItem xs="12" md="6">
<MudPaper Elevation="4" Class="pa-6 deepdrft-gradient-soft-accent deepdrft-border-top-primary">
<MudText Typo="Typo.h4" Color="Color.Primary" Class="mb-4 deepdrft-text-bold">
<MudIcon Icon="@Icons.Material.Filled.LocationOn" Class="mr-2" />
Charleston, SC
</MudText>
<MudText Typo="Typo.body1" Class="mb-4 deepdrft-text-readable">
Based in the vibrant music scene of Charleston, South Carolina, DeepDrft draws inspiration
from both the city's rich cultural heritage and the cutting-edge sounds of global electronic music.
</MudText>
<MudText Typo="Typo.body1" Class="deepdrft-text-readable">
The Holy City's unique blend of tradition and innovation provides the perfect backdrop
for our electronic explorations, where historic charm meets futuristic beats.
</MudText>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6">
<MudPaper Elevation="4" Class="pa-6 deepdrft-gradient-soft-tertiary deepdrft-border-top-secondary">
<MudText Typo="Typo.h4" Color="Color.Tertiary" Class="mb-4 deepdrft-text-bold">
<MudIcon Icon="@Icons.Material.Filled.ConnectWithoutContact" Class="mr-2" />
Connect With Us
</MudText>
<MudText Typo="Typo.body1" Class="mb-4 deepdrft-text-readable">
Stay connected with DeepDrft for the latest releases, live session announcements,
and updates from our studio in Charleston.
</MudText>
<MudButtonGroup Variant="Variant.Outlined" Class="mb-2">
<MudButton StartIcon="@Icons.Material.Filled.Email" Color="Color.Primary">
Newsletter
</MudButton>
<MudButton StartIcon="@Icons.Material.Filled.Notifications" Color="Color.Tertiary">
Live Alerts
</MudButton>
</MudButtonGroup>
</MudPaper>
</MudItem>
</MudGrid>
@* Call to Action *@
<MudPaper Elevation="8" Class="pa-8 deepdrft-gradient-primary deepdrft-cta-container">
<MudText Typo="Typo.h3" Color="Color.Surface" Class="mb-4 deepdrft-text-bold">
Ready to Dive Deep?
</MudText>
<MudText Typo="Typo.h6" Color="Color.Surface" Class="mb-6 deepdrft-text-description">
Immerse yourself in the electronic soundscapes of DeepDrft
</MudText>
<MudButtonGroup Size="Size.Large" Class="deepdrft-cta-buttons">
<MudButton Variant="Variant.Filled"
Color="Color.Surface"
Class="deepdrft-button-primary deepdrft-button-spaced">
<MudIcon Icon="@Icons.Material.Filled.PlayCircle" Class="mr-2" />
EXPLORE MUSIC
</MudButton>
<MudButton Variant="Variant.Outlined"
Color="Color.Surface"
Class="deepdrft-button-outlined deepdrft-button-spaced">
<MudIcon Icon="@Icons.Material.Filled.Schedule" Class="mr-2" />
LIVE SCHEDULE
</MudButton>
</MudButtonGroup>
</MudPaper>
</MudContainer>
DeepDrftWeb/Components/App.razor
+1
View File
@@ -11,6 +11,7 @@
<link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
<link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
<link rel="stylesheet" href="@Assets["DeepDrftWeb.styles.css"]"/>
<link rel="stylesheet" href="styles/deepdrft-styles.css" />
<ImportMap />
<link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
<HeadOutlet @rendermode="InteractiveAuto" />
DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
+288
View File
@@ -0,0 +1,288 @@
/* DeepDrft Global Styles - Aesthetic and Structural Classes */
/* === AESTHETIC STYLES (Reusable across components) === */
/* Color Variables - Aligned with MudBlazor Theme */
:root {
/* Main DeepDrft Colors */
--deepdrft-primary: #8A2BE2; /* BlueViolet - Primary brand color */
--deepdrft-secondary: #FF1493; /* DeepPink - Secondary brand color */
--deepdrft-tertiary: #4B0082; /* Indigo - Deep accent color */
--deepdrft-accent: #9370DB; /* MediumPurple - Light accent */
/* Surface Colors */
--deepdrft-surface: rgba(255, 255, 255, 1);
--deepdrft-surface-alpha: rgba(255, 255, 255, 0.9);
/* Theme-aware Variables (Light Mode Default) */
--deepdrft-theme-primary: var(--deepdrft-primary);
--deepdrft-theme-secondary: var(--deepdrft-secondary);
--deepdrft-theme-tertiary: var(--deepdrft-tertiary);
--deepdrft-theme-info: var(--deepdrft-accent);
}
/* Dark Mode Variables */
[data-theme="dark"], .mud-theme-dark {
--deepdrft-theme-primary: #FF1493; /* DeepPink for dark mode */
--deepdrft-theme-secondary: #8A2BE2; /* BlueViolet for dark mode */
--deepdrft-theme-tertiary: #9370DB; /* MediumPurple for dark mode */
--deepdrft-theme-info: #4B0082; /* Indigo for dark mode */
}
/* Primary Gradient Backgrounds */
.deepdrft-gradient-primary {
background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%);
}
.deepdrft-gradient-hero {
background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%);
}
.deepdrft-gradient-soft-primary {
background: linear-gradient(45deg, rgba(138,43,226,0.1) 0%, rgba(255,20,147,0.1) 100%);
}
.deepdrft-gradient-soft-secondary {
background: linear-gradient(45deg, rgba(75,0,130,0.1) 0%, rgba(138,43,226,0.1) 100%);
}
.deepdrft-gradient-soft-accent {
background: linear-gradient(135deg, rgba(138,43,226,0.1) 0%, rgba(75,0,130,0.1) 100%);
}
.deepdrft-gradient-soft-tertiary {
background: linear-gradient(135deg, rgba(255,20,147,0.1) 0%, rgba(138,43,226,0.1) 100%);
}
.deepdrft-gradient-features {
background: linear-gradient(to right, rgba(138,43,226,0.05) 0%, rgba(255,20,147,0.05) 100%);
}
/* Text Shadows and Effects */
.deepdrft-text-hero {
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
font-size: clamp(2rem, 8vw, 4rem);
}
.deepdrft-text-subtitle {
font-weight: 300;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.deepdrft-text-description {
font-weight: 400;
opacity: 0.9;
}
.deepdrft-text-bold {
font-weight: bold;
}
.deepdrft-text-readable {
line-height: 1.6;
}
/* Border Accents */
.deepdrft-border-left-primary {
border-left: 4px solid #FF1493;
}
.deepdrft-border-left-secondary {
border-left: 4px solid #8A2BE2;
}
.deepdrft-border-top-primary {
border-top: 4px solid #8A2BE2;
}
.deepdrft-border-top-secondary {
border-top: 4px solid #FF1493;
}
/* Buttons */
.deepdrft-button-primary {
color: #8A2BE2;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.deepdrft-button-outlined {
border: 2px solid rgba(255,255,255,0.8);
}
.deepdrft-button-spaced {
margin: 8px;
}
/* Card Aesthetics */
.deepdrft-card-purple-tint {
background: rgba(138,43,226,0.1);
}
.deepdrft-card-pink-tint {
background: rgba(255,20,147,0.1);
}
.deepdrft-card-indigo-tint {
background: rgba(75,0,130,0.1);
}
.deepdrft-card-lavender-tint {
background: rgba(147,112,219,0.1);
}
/* Track Card Specific */
.deepdrft-track-card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(0.7);
}
.deepdrft-track-card-content {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
}
.deepdrft-genre-chip {
opacity: 0.9;
margin-top: 4px;
}
.deepdrft-chip-spacing {
margin: 2px;
}
/* Icons */
.deepdrft-icon-large {
font-size: 3rem;
}
/* === STRUCTURAL STYLES (Layout and positioning) === */
/* Hero Section Layout */
.deepdrft-hero-container {
min-height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.deepdrft-hero-text-container {
max-width: 600px;
margin: 0 auto;
}
/* Feature Cards Layout */
.deepdrft-feature-card {
height: 100%;
}
.deepdrft-feature-icon-container {
text-align: center;
}
/* About Section Layout */
.deepdrft-about-card {
height: 100%;
}
/* CTA Section Layout */
.deepdrft-cta-container {
border-radius: 16px;
text-align: center;
}
.deepdrft-cta-buttons {
margin-bottom: 16px;
}
/* Track Card Layout */
.deepdrft-track-card-container {
width: 250px;
height: 250px;
position: relative;
overflow: hidden;
}
.deepdrft-track-card-fallback {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.deepdrft-track-info-top {
/* Used for track name and artist at top */
}
.deepdrft-track-info-middle {
margin: 8px 0;
/* Used for album and genre in middle */
}
.deepdrft-track-info-bottom {
display: flex;
justify-content: space-between;
align-items: center;
/* Used for year and play button at bottom */
}
.deepdrft-track-gallery-item-center {
display: flex;
justify-content: center;
}
/* Audio Player Layout */
.deepdrft-audio-controls {
display: flex;
align-items: center;
width: 140px;
}
.deepdrft-audio-time {
min-width: 120px;
}
.deepdrft-audio-volume-icon {
margin-right: 4px;
}
.deepdrft-audio-slider {
flex: 1;
}
.deepdrft-audio-slider-seek {
flex: 1;
margin-right: 8px;
}
/* Responsive Utilities */
@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%;
}
}
@media (max-width: 480px) {
.deepdrft-track-card-container {
width: 200px;
height: 200px;
}
}