diff --git a/DeepDrftWeb.Client/Controls/AppNavLink.razor.css b/DeepDrftWeb.Client/Controls/AppNavLink.razor.css
index 8a4ba6e..b915f5d 100644
--- a/DeepDrftWeb.Client/Controls/AppNavLink.razor.css
+++ b/DeepDrftWeb.Client/Controls/AppNavLink.razor.css
@@ -1,4 +1,4 @@
-/* Navigation menu item styling */
+/* Navigation menu item styling */
.nav-menu-item {
display: block;
padding: 8px 16px;
@@ -29,26 +29,42 @@
transition: all 0.3s ease;
}
-/* Hover state */
-.nav-menu-item:hover {
- background-color: rgba(138, 43, 226, 0.08);
- color: #8A2BE2;
- text-decoration: none;
-}
+/* === HOVER STATES === */
-.nav-menu-item:hover .nav-item-content {
- color: var(--mud-palette-tertiary);
+/* Base hover */
+.nav-menu-item:hover {
+ text-decoration: none;
}
.nav-menu-item:hover .nav-item-text {
font-weight: 600;
}
-/* Active state */
+/* Charleston (Light Mode) - Gold hover tint */
+:global(.deepdrft-theme-light) .nav-menu-item:hover {
+ background-color: rgba(201, 169, 98, 0.1);
+ color: #1C1C1C;
+}
+
+:global(.deepdrft-theme-light) .nav-menu-item:hover .nav-item-content {
+ color: #B8848C;
+}
+
+/* Lowcountry (Dark Mode) - Coral glow hover */
+:global(.deepdrft-theme-dark) .nav-menu-item:hover {
+ background-color: rgba(224, 122, 95, 0.12);
+ color: #E07A5F;
+ box-shadow: 0 0 10px rgba(224, 122, 95, 0.15);
+}
+
+:global(.deepdrft-theme-dark) .nav-menu-item:hover .nav-item-content {
+ color: #E07A5F;
+}
+
+/* === ACTIVE STATES === */
+
+/* Base active */
.nav-menu-item.active {
- background-color: rgba(138, 43, 226, 0.12);
- color: var(--mud-palette-primary);
- border-left: 4px solid #8A2BE2;
padding-left: 12px;
}
@@ -64,8 +80,39 @@
font-weight: 600;
}
-/* Focus state */
-.nav-menu-item:focus {
- outline: 2px solid #8A2BE2;
+/* Charleston (Light Mode) - Iron left border */
+:global(.deepdrft-theme-light) .nav-menu-item.active {
+ background-color: rgba(28, 28, 28, 0.08);
+ color: #1C1C1C;
+ border-left: 4px solid #1C1C1C;
+}
+
+:global(.deepdrft-theme-light) .nav-menu-item.active .nav-item-content {
+ color: #1C1C1C;
+}
+
+/* Lowcountry (Dark Mode) - Gold active indicator */
+:global(.deepdrft-theme-dark) .nav-menu-item.active {
+ background-color: rgba(233, 196, 106, 0.12);
+ color: #E9C46A;
+ border-left: 4px solid #E9C46A;
+ box-shadow: 0 0 12px rgba(233, 196, 106, 0.2);
+}
+
+:global(.deepdrft-theme-dark) .nav-menu-item.active .nav-item-content {
+ color: #E9C46A;
+}
+
+/* === FOCUS STATES === */
+
+/* Charleston (Light Mode) - Iron focus outline */
+:global(.deepdrft-theme-light) .nav-menu-item:focus {
+ outline: 2px solid #1C1C1C;
+ outline-offset: 2px;
+}
+
+/* Lowcountry (Dark Mode) - Coral focus outline */
+:global(.deepdrft-theme-dark) .nav-menu-item:focus {
+ outline: 2px solid #E07A5F;
outline-offset: 2px;
}
\ No newline at end of file
diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
index 1401ebc..c192270 100644
--- a/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
@@ -24,15 +24,33 @@
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 1rem;
- border: 1px solid var(--deepdrft-theme-primary);
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
- 0 2px 10px var(--deepdrft-theme-secondary);
+ border: 2px solid var(--deepdrft-theme-primary);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
color: #ffffff;
transition: all 0.3s ease;
overflow: hidden;
margin-bottom: 1rem;
}
+/* Charleston (Light Mode) - Iron frame effect */
+:global(.deepdrft-theme-light) .player-backdrop {
+ background: rgba(253, 251, 247, 0.92);
+ border: 2px solid #1C1C1C;
+ box-shadow: 0 4px 20px rgba(28, 28, 28, 0.2),
+ inset 0 0 0 1px rgba(28, 28, 28, 0.05);
+ color: #1C1C1C;
+}
+
+/* Lowcountry (Dark Mode) - Warm sunset glow effect */
+:global(.deepdrft-theme-dark) .player-backdrop {
+ background: rgba(20, 20, 32, 0.88);
+ border: 1px solid rgba(224, 122, 95, 0.5);
+ box-shadow: 0 0 20px rgba(224, 122, 95, 0.25),
+ 0 0 40px rgba(123, 109, 141, 0.15),
+ 0 4px 20px rgba(0, 0, 0, 0.4);
+ color: #F5F0E6;
+}
+
/* Control buttons positioning */
.player-controls {
position: absolute;
@@ -50,7 +68,7 @@
height: 60px;
border-radius: 50%;
cursor: pointer;
- background: linear-gradient(135deg,
+ background: linear-gradient(135deg,
var(--deepdrft-theme-primary) 0%,
var(--deepdrft-theme-secondary) 50%,
var(--deepdrft-theme-tertiary) 100%
@@ -58,15 +76,36 @@
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 2px solid var(--deepdrft-theme-secondary);
- box-shadow: 0 4px 20px var(--deepdrft-theme-primary),
- 0 2px 10px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
+/* Charleston (Light Mode) - Iron dock */
+:global(.deepdrft-theme-light) .minimized-dock {
+ background: linear-gradient(135deg, #1C1C1C 0%, #B8848C 50%, #C9A962 100%);
+ border: 2px solid #1C1C1C;
+ box-shadow: 0 4px 15px rgba(28, 28, 28, 0.4);
+}
+
+/* Lowcountry (Dark Mode) - Warm sunset dock */
+:global(.deepdrft-theme-dark) .minimized-dock {
+ background: linear-gradient(135deg, #E07A5F 0%, #7B6D8D 50%, #E9C46A 100%);
+ border: 2px solid rgba(224, 122, 95, 0.6);
+ box-shadow: 0 0 20px rgba(224, 122, 95, 0.4),
+ 0 0 40px rgba(123, 109, 141, 0.2);
+}
+
.minimized-dock:hover {
transform: scale(1.1);
- box-shadow: 0 6px 25px rgba(var(--deepdrft-theme-primary), 0.8),
- 0 3px 15px rgba(0, 0, 0, 0.4);
+}
+
+:global(.deepdrft-theme-light) .minimized-dock:hover {
+ box-shadow: 0 6px 20px rgba(28, 28, 28, 0.5);
+}
+
+:global(.deepdrft-theme-dark) .minimized-dock:hover {
+ box-shadow: 0 0 30px rgba(224, 122, 95, 0.5),
+ 0 0 50px rgba(123, 109, 141, 0.3);
}
/* Minimized button styles */
diff --git a/DeepDrftWeb.Client/Controls/AudioPlayerBar/SpectrumVisualizer.razor.css b/DeepDrftWeb.Client/Controls/AudioPlayerBar/SpectrumVisualizer.razor.css
index 67696e9..34349f8 100644
--- a/DeepDrftWeb.Client/Controls/AudioPlayerBar/SpectrumVisualizer.razor.css
+++ b/DeepDrftWeb.Client/Controls/AudioPlayerBar/SpectrumVisualizer.razor.css
@@ -26,11 +26,22 @@
min-width: 4px;
height: var(--bar-height, 2%);
min-height: 2px;
- background: var(--deepdrft-theme-secondary, #8A2BE2);
+ background: var(--deepdrft-theme-secondary);
border-radius: 2px 2px 0 0;
transition: height 0.05s ease-out;
}
+/* Charleston (Light Mode) - Iron to gold colored bars */
+:global(.deepdrft-theme-light) .spectrum-bar {
+ background: linear-gradient(to top, #1C1C1C 0%, #B8848C 50%, #C9A962 100%);
+}
+
+/* Lowcountry (Dark Mode) - Coral to gold bars with warm glow */
+:global(.deepdrft-theme-dark) .spectrum-bar {
+ background: linear-gradient(to top, #E07A5F 0%, #E9C46A 100%);
+ box-shadow: 0 0 4px rgba(233, 196, 106, 0.4);
+}
+
/* Responsive adjustments */
@media (max-width: 768px) {
.spectrum-container {
diff --git a/DeepDrftWeb.Client/Layout/MainLayout.razor b/DeepDrftWeb.Client/Layout/MainLayout.razor
index 4fef8eb..b75d235 100644
--- a/DeepDrftWeb.Client/Layout/MainLayout.razor
+++ b/DeepDrftWeb.Client/Layout/MainLayout.razor
@@ -6,24 +6,26 @@
-
-
-
-
-
-
-
-
-
-
-
-
- @Body
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @Body
+
+
+
+
+
+
@@ -49,35 +51,35 @@
{
Default = new DefaultTypography()
{
- FontFamily = new[] {"Electrolize", "sans-serif"}
+ FontFamily = new[] {"Source Serif 4", "serif"}
},
H1 = new H1Typography()
{
- FontFamily = new[] {"Audiowide", "sans-serif"}
+ FontFamily = new[] {"Playfair Display", "serif"}
},
H2 = new H2Typography()
{
- FontFamily = new[] {"Michroma", "sans-serif"}
+ FontFamily = new[] {"Cormorant Garamond", "serif"}
},
H3 = new H3Typography()
{
- FontFamily = new[] {"Michroma", "sans-serif"}
+ FontFamily = new[] {"Cormorant Garamond", "serif"}
},
H4 = new H4Typography()
{
- FontFamily = new[] {"Michroma", "sans-serif"}
+ FontFamily = new[] {"Cormorant Garamond", "serif"}
},
H5 = new H5Typography()
{
- FontFamily = new[] {"Michroma", "sans-serif"}
+ FontFamily = new[] {"Cormorant Garamond", "serif"}
},
H6 = new H6Typography()
{
- FontFamily = new[] {"Michroma", "sans-serif"}
+ FontFamily = new[] {"Cormorant Garamond", "serif"}
},
Button = new ButtonTypography()
{
- FontFamily = new[] {"Michroma", "sans-serif"}
+ FontFamily = new[] {"Cormorant Garamond", "serif"}
}
}
}
@@ -110,66 +112,70 @@
StateHasChanged();
}
+ // Charleston in the Day - Light Theme
+ // Inspired by Charleston's historic architecture: white stucco, black wrought iron gates, elegant accents
private readonly PaletteLight _lightPalette = new()
{
- 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
- Black = "#2F2F2F", // Dark gray for text
- White = "#FFFFFF", // Pure white
- Surface = "#FFFAF0", // FloralWhite - creamy surface
- Background = "#FAF0E6", // Linen - warm cream background
- AppbarText = "#2F2F2F", // Dark text on light appbar
- 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 = "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
+ Primary = "#1C1C1C", // Wrought iron black - strong, elegant
+ Secondary = "#B8848C", // Dusty rose - elegant accent
+ Tertiary = "#C9A962", // Antique gold - replaces brown
+ Info = "#2196F3", // MudBlazor default blue (semantic)
+ Success = "#4CAF50", // MudBlazor default green (semantic)
+ Warning = "#FF9800", // MudBlazor default amber (semantic)
+ Error = "#F44336", // MudBlazor default red (semantic)
+ Black = "#1C1C1C", // Wrought iron black
+ White = "#FDFBF7", // Cream white (stucco)
+ Surface = "#FDFBF7", // Cream stucco surface
+ Background = "#F5F2EC", // Warm linen background
+ AppbarText = "#FDFBF7", // Cream text on dark appbar (FIX)
+ AppbarBackground = "#1C1C1C", // Solid wrought iron appbar
+ DrawerBackground = "#F5F2EC", // Linen drawer
+ TextPrimary = "#1C1C1C", // Wrought iron text
+ TextSecondary = "#4A4A4A", // Softer iron text
+ GrayLight = "rgba(28,28,28,0.08)", // Light iron tint
+ GrayLighter = "rgba(28,28,28,0.04)", // Very light iron tint
+ GrayDefault = "rgba(28,28,28,0.15)", // Medium iron tint
+ GrayDark = "rgba(28,28,28,0.25)", // Darker iron tint
+ Divider = "rgba(28,28,28,0.12)", // Subtle divider lines
+ TableLines = "rgba(28,28,28,0.12)", // Table borders
};
+ // Lowcountry Summer Nights - Dark Theme
+ // Inspired by warm sunsets over marshes, fireflies, Spanish moss, lamplight
private readonly PaletteDark _darkPalette = new()
{
- 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 = "#00A86B", // Jade - true jade green success color
- Warning = "#FF8C00", // DarkOrange - orange warning color
- Error = "#FF6347", // Tomato - error color
- Black = "#000000", // Pure black
- White = "#FFFFFF", // Pure white
- 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(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
- ActionDisabled = "#757575", // Medium gray for disabled
- ActionDisabledBackground = "#2F2F2F", // Dark gray background
- TextPrimary = "#FFFFFF", // White primary text
- TextSecondary = "#E0E0E0", // Light gray secondary text
- TextDisabled = "#757575", // Disabled text
- 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
+ Primary = "#E07A5F", // Sunset coral - warm, not neon
+ Secondary = "#7B6D8D", // Twilight purple - muted
+ Tertiary = "#E9C46A", // Firefly gold - lamplight
+ Info = "#2196F3", // MudBlazor default blue (semantic)
+ Success = "#4CAF50", // MudBlazor default green (semantic)
+ Warning = "#FF9800", // MudBlazor default amber (semantic)
+ Error = "#F44336", // MudBlazor default red (semantic)
+ Black = "#0A0A0F", // Deep night black
+ White = "#F5F0E6", // Warm moonlight white
+ Surface = "rgba(123,109,141,0.12)", // Twilight-tinted surface
+ Background = "#0D0D12", // Deep twilight background
+ BackgroundGray = "#141420", // Slightly lighter night
+ AppbarText = "#F5F0E6", // Warm moonlight text
+ AppbarBackground = "rgba(13,13,18,0.95)", // Translucent night
+ DrawerBackground = "rgba(123,109,141,0.08)", // Subtle twilight tint
+ DrawerIcon = "#E0E0E0", // Light icons
+ DrawerText = "#E0E0E0", // Light drawer text
+ ActionDefault = "#BDBDBD", // Default action color
+ ActionDisabled = "#757575", // Disabled state
+ ActionDisabledBackground = "#1A1A2E", // Disabled background
+ TextPrimary = "#F5F0E6", // Warm white primary text
+ TextSecondary = "#B8B0C4", // Lavender gray secondary text
+ TextDisabled = "#757575", // Disabled text
+ GrayLight = "rgba(224,122,95,0.15)", // Coral tint light
+ GrayLighter = "rgba(224,122,95,0.08)", // Coral tint lighter
+ GrayDefault = "rgba(224,122,95,0.22)", // Coral tint default
+ GrayDark = "rgba(224,122,95,0.35)", // Coral tint dark
+ Divider = "rgba(224,122,95,0.18)", // Coral divider
+ LinesDefault = "rgba(224,122,95,0.18)", // Coral lines
+ TableLines = "rgba(224,122,95,0.18)", // Coral table lines
+ OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay
+ OverlayDark = "rgba(255,255,255,0.08)", // Light overlay
};
public string DarkLightModeButtonIcon => _isDarkMode switch
@@ -177,6 +183,9 @@
true => Icons.Material.Rounded.AutoMode,
false => Icons.Material.Outlined.DarkMode,
};
+
+ // Theme wrapper class for CSS targeting
+ private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";
}
diff --git a/DeepDrftWeb.Client/Pages/Home.razor b/DeepDrftWeb.Client/Pages/Home.razor
index 97b2264..3e7cd40 100644
--- a/DeepDrftWeb.Client/Pages/Home.razor
+++ b/DeepDrftWeb.Client/Pages/Home.razor
@@ -6,36 +6,36 @@
@* Hero Section *@
-
+
-
+
DEEPDRFT
-
-
+
+
ELECTRONIC MUSIC COLLECTIVE
-
-
+
+
Live electronic music from Charleston, SC featuring house, techno, trance, and IDM crafted with synthesizers and grooveboxes
-
-
+
+
START STREAMING
-
-
+ Class="mb-2 deepdrft-hero-button-outlined">
BROWSE TRACKS
@@ -199,22 +199,24 @@
@* Call to Action *@
-
+
Ready to Dive Deep?
-
+
Immerse yourself in the electronic soundscapes of DeepDrft
-
+
EXPLORE MUSIC
-
+
LIVE SCHEDULE
diff --git a/DeepDrftWeb/Components/App.razor b/DeepDrftWeb/Components/App.razor
index f970b6c..4d634d4 100644
--- a/DeepDrftWeb/Components/App.razor
+++ b/DeepDrftWeb/Components/App.razor
@@ -7,9 +7,9 @@
-
-
-
+
+
+
diff --git a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
index 8bd4de9..865e5d5 100644
--- a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
@@ -2,66 +2,144 @@
/* === AESTHETIC STYLES (Reusable across components) === */
-/* Color Variables - Aligned with MudBlazor Theme */
+/* Color Variables - Charleston in the Day (Light Mode Default) */
: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 */
-
+ /* Charleston Theme Colors */
+ --deepdrft-primary: #1C1C1C; /* Wrought iron black */
+ --deepdrft-secondary: #B8848C; /* Dusty rose - elegant accent */
+ --deepdrft-tertiary: #C9A962; /* Antique gold - replaces brown */
+ --deepdrft-accent: #7D9B8C; /* Sage green */
+
+ /* Extended Palette - Light Theme (Charleston) */
+ --deepdrft-quaternary: #7D9B8C; /* Sage green */
+ --deepdrft-quinary: #6B7D8A; /* Slate blue */
+ --deepdrft-senary: #C4967A; /* Warm terracotta */
+ --deepdrft-septenary: #8A7A96; /* Soft plum */
+
/* Surface Colors */
- --deepdrft-surface: rgba(255, 255, 255, 1);
- --deepdrft-surface-alpha: rgba(255, 255, 255, 0.9);
- --deepdrft-theme-background-gray: rgba(26, 26, 26, 0.5);
-
- /* Theme-aware Variables (Light Mode Default) */
+ --deepdrft-surface: #FDFBF7;
+ --deepdrft-surface-alpha: rgba(253, 251, 247, 0.9);
+ --deepdrft-background: #F5F2EC;
+ --deepdrft-theme-background-gray: rgba(245, 242, 236, 0.9);
+
+ /* Theme-aware Variables */
--deepdrft-theme-primary: var(--deepdrft-primary);
--deepdrft-theme-secondary: var(--deepdrft-secondary);
--deepdrft-theme-tertiary: var(--deepdrft-tertiary);
- --deepdrft-theme-info: var(--deepdrft-accent);
+ --deepdrft-theme-quaternary: var(--deepdrft-quaternary);
+ --deepdrft-theme-quinary: var(--deepdrft-quinary);
+ --deepdrft-theme-senary: var(--deepdrft-senary);
+ --deepdrft-theme-septenary: var(--deepdrft-septenary);
+
+ /* Charleston-specific accent colors */
+ --charleston-iron: #1C1C1C;
+ --charleston-cream: #FDFBF7;
+ --charleston-rose: #B8848C;
+ --charleston-gold: #C9A962;
+ --charleston-sage: #7D9B8C;
/* Font Hierarchy - DRY font definitions */
- --deepdrft-font-largest-headers: "Audiowide", sans-serif; /* h1, hero text, main titles */
- --deepdrft-font-headers: "Michroma", sans-serif; /* h2-h6, visual components, buttons */
- --deepdrft-font-body: "Electrolize", sans-serif; /* body text, paragraphs, smaller elements */
+ --deepdrft-font-largest-headers: "Playfair Display", serif; /* h1, hero text, main titles */
+ --deepdrft-font-headers: "Cormorant Garamond", serif; /* h2-h6, visual components, buttons */
+ --deepdrft-font-body: "Source Serif 4", serif; /* body text, paragraphs, smaller elements */
}
-/* 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 */
+/* Lowcountry Summer Nights (Dark Mode) */
+/* Use our custom theme class for reliable CSS targeting */
+.deepdrft-theme-dark {
+ --deepdrft-primary: #E07A5F; /* Sunset coral - warm, not neon */
+ --deepdrft-secondary: #7B6D8D; /* Twilight purple - muted */
+ --deepdrft-tertiary: #E9C46A; /* Firefly gold - lamplight */
+ --deepdrft-accent: #5E8B9C; /* Marsh blue */
+
+ /* Extended Palette - Dark Theme (Lowcountry) */
+ --deepdrft-quaternary: #8AA39B; /* Spanish moss */
+ --deepdrft-quinary: #5E8B9C; /* Marsh dusk */
+ --deepdrft-senary: #D4845A; /* Ember orange */
+ --deepdrft-septenary: #6A5A7C; /* Night violet */
+
+ /* Surface Colors - Dark */
+ --deepdrft-surface: rgba(123,109,141,0.12);
+ --deepdrft-surface-alpha: rgba(13, 13, 18, 0.95);
+ --deepdrft-background: #0D0D12;
+ --deepdrft-theme-background-gray: rgba(20, 20, 32, 0.85);
+
+ /* Theme-aware Variables */
+ --deepdrft-theme-primary: var(--deepdrft-primary);
+ --deepdrft-theme-secondary: var(--deepdrft-secondary);
+ --deepdrft-theme-tertiary: var(--deepdrft-tertiary);
+ --deepdrft-theme-quaternary: var(--deepdrft-quaternary);
+ --deepdrft-theme-quinary: var(--deepdrft-quinary);
+ --deepdrft-theme-senary: var(--deepdrft-senary);
+ --deepdrft-theme-septenary: var(--deepdrft-septenary);
+
+ /* Lowcountry-specific accent colors */
+ --lowcountry-coral: #E07A5F;
+ --lowcountry-twilight: #7B6D8D;
+ --lowcountry-gold: #E9C46A;
+ --lowcountry-marsh: #5E8B9C;
+ --lowcountry-moss: #8AA39B;
+ --lowcountry-ember: #D4845A;
}
-/* Primary Gradient Backgrounds */
-.deepdrft-gradient-primary {
- background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%);
+/* Primary Gradient Backgrounds - Charleston (Light Mode Default) */
+/* Light mode: subtle cream background with dark text on top */
+.deepdrft-theme-light .deepdrft-gradient-primary {
+ background: linear-gradient(135deg, #F5F2EC 0%, #E8E4DC 50%, #DDD5C8 100%) !important;
}
-.deepdrft-gradient-hero {
- background: linear-gradient(135deg, #8A2BE2 0%, #FF1493 50%, #4B0082 100%);
+.deepdrft-theme-light .deepdrft-gradient-hero {
+ background: linear-gradient(135deg, #F5F2EC 0%, #E8E4DC 50%, #DDD5C8 100%) !important;
}
-.deepdrft-gradient-soft-primary {
- background: linear-gradient(45deg, rgba(138,43,226,0.1) 0%, rgba(255,20,147,0.1) 100%);
+.deepdrft-theme-light .deepdrft-gradient-soft-primary {
+ background: linear-gradient(45deg, rgba(28,28,28,0.04) 0%, rgba(184,132,140,0.06) 100%) !important;
}
-.deepdrft-gradient-soft-secondary {
- background: linear-gradient(45deg, rgba(75,0,130,0.1) 0%, rgba(138,43,226,0.1) 100%);
+.deepdrft-theme-light .deepdrft-gradient-soft-secondary {
+ background: linear-gradient(45deg, rgba(201,169,98,0.06) 0%, rgba(28,28,28,0.04) 100%) !important;
}
-.deepdrft-gradient-soft-accent {
- background: linear-gradient(135deg, rgba(138,43,226,0.1) 0%, rgba(75,0,130,0.1) 100%);
+.deepdrft-theme-light .deepdrft-gradient-soft-accent {
+ background: linear-gradient(135deg, rgba(28,28,28,0.03) 0%, rgba(201,169,98,0.05) 100%) !important;
}
-.deepdrft-gradient-soft-tertiary {
- background: linear-gradient(135deg, rgba(255,20,147,0.1) 0%, rgba(138,43,226,0.1) 100%);
+.deepdrft-theme-light .deepdrft-gradient-soft-tertiary {
+ background: linear-gradient(135deg, rgba(184,132,140,0.05) 0%, rgba(28,28,28,0.03) 100%) !important;
}
-.deepdrft-gradient-features {
- background: linear-gradient(to right, rgba(138,43,226,0.05) 0%, rgba(255,20,147,0.05) 100%);
+.deepdrft-theme-light .deepdrft-gradient-features {
+ background: linear-gradient(to right, rgba(28,28,28,0.02) 0%, rgba(184,132,140,0.03) 100%) !important;
+}
+
+/* Lowcountry Gradient Overrides (Dark Mode) */
+/* Dark mode: warm sunset gradient with light text on top */
+.deepdrft-theme-dark .deepdrft-gradient-primary {
+ background: linear-gradient(135deg, #0D0D12 0%, #7B6D8D 50%, #E07A5F 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-hero {
+ background: linear-gradient(135deg, #0D0D12 0%, #7B6D8D 50%, #E07A5F 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-soft-primary {
+ background: linear-gradient(45deg, rgba(224,122,95,0.12) 0%, rgba(123,109,141,0.12) 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-soft-secondary {
+ background: linear-gradient(45deg, rgba(233,196,106,0.1) 0%, rgba(224,122,95,0.1) 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-soft-accent {
+ background: linear-gradient(135deg, rgba(224,122,95,0.08) 0%, rgba(106,90,124,0.08) 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-soft-tertiary {
+ background: linear-gradient(135deg, rgba(123,109,141,0.1) 0%, rgba(224,122,95,0.1) 100%) !important;
+}
+
+.deepdrft-theme-dark .deepdrft-gradient-features {
+ background: linear-gradient(to right, rgba(224,122,95,0.05) 0%, rgba(123,109,141,0.05) 100%) !important;
}
/* Font Hierarchy Styles - DRY Typography System */
@@ -77,6 +155,49 @@ h1, .deepdrft-text-hero, .deepdrft-heading-primary {
font-size: clamp(2rem, 8vw, 4rem);
}
+/* Hero Section Theme-Aware Text Colors */
+/* Light mode (cream background): dark text */
+.deepdrft-theme-light .deepdrft-hero-title {
+ color: #1C1C1C !important; /* Iron black */
+}
+.deepdrft-theme-light .deepdrft-hero-subtitle {
+ color: #B8848C !important; /* Dusty rose */
+}
+.deepdrft-theme-light .deepdrft-hero-description {
+ color: #4A4A4A !important; /* Softer iron */
+}
+
+/* Dark mode (sunset gradient background): light text */
+.deepdrft-theme-dark .deepdrft-hero-title {
+ color: #F5F0E6 !important; /* Warm moonlight white */
+}
+.deepdrft-theme-dark .deepdrft-hero-subtitle {
+ color: #E9C46A !important; /* Firefly gold */
+}
+.deepdrft-theme-dark .deepdrft-hero-description {
+ color: #B8B0C4 !important; /* Lavender gray */
+}
+
+/* Hero Button Overrides for Light Mode */
+.deepdrft-theme-light .deepdrft-hero-button-filled {
+ background-color: #1C1C1C !important;
+ color: #FDFBF7 !important;
+}
+.deepdrft-theme-light .deepdrft-hero-button-outlined {
+ border-color: #1C1C1C !important;
+ color: #1C1C1C !important;
+}
+
+/* Hero Button Overrides for Dark Mode */
+.deepdrft-theme-dark .deepdrft-hero-button-filled {
+ background-color: #E07A5F !important;
+ color: #0D0D12 !important;
+}
+.deepdrft-theme-dark .deepdrft-hero-button-outlined {
+ border-color: #F5F0E6 !important;
+ color: #F5F0E6 !important;
+}
+
/* Headers and Visual Components - Michroma */
h2, h3, h4, h5, h6,
.deepdrft-heading-secondary,
@@ -131,26 +252,34 @@ body, p, span, div,
font-family: var(--deepdrft-font-body) !important;
}
-/* Border Accents */
+/* Border Accents - Theme Aware */
.deepdrft-border-left-primary {
- border-left: 4px solid #FF1493;
+ border-left: 4px solid var(--deepdrft-theme-primary);
}
.deepdrft-border-left-secondary {
- border-left: 4px solid #8A2BE2;
+ border-left: 4px solid var(--deepdrft-theme-secondary);
+}
+
+.deepdrft-border-left-tertiary {
+ border-left: 4px solid var(--deepdrft-theme-tertiary);
}
.deepdrft-border-top-primary {
- border-top: 4px solid #8A2BE2;
+ border-top: 4px solid var(--deepdrft-theme-primary);
}
.deepdrft-border-top-secondary {
- border-top: 4px solid #FF1493;
+ border-top: 4px solid var(--deepdrft-theme-secondary);
+}
+
+.deepdrft-border-top-tertiary {
+ border-top: 4px solid var(--deepdrft-theme-tertiary);
}
/* Buttons */
.deepdrft-button-primary {
- color: #8A2BE2;
+ color: var(--deepdrft-theme-primary);
font-weight: bold;
padding: 10px 24px;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
@@ -164,21 +293,57 @@ body, p, span, div,
margin: 8px;
}
-/* Card Aesthetics */
-.deepdrft-card-purple-tint {
- background: rgba(138,43,226,0.1);
+/* Card Aesthetics - Theme Aware */
+/* Charleston (Light): iron, rose, gold, sage tints */
+/* Lowcountry (Dark): coral, twilight, gold, moss tints */
+.deepdrft-theme-light .deepdrft-card-purple-tint {
+ background: rgba(138,122,150,0.1) !important; /* Soft plum tint */
+}
+.deepdrft-theme-dark .deepdrft-card-purple-tint {
+ background: rgba(123,109,141,0.12) !important; /* Twilight purple */
}
-.deepdrft-card-pink-tint {
- background: rgba(255,20,147,0.1);
+.deepdrft-theme-light .deepdrft-card-pink-tint {
+ background: rgba(184,132,140,0.1) !important; /* Rose tint */
+}
+.deepdrft-theme-dark .deepdrft-card-pink-tint {
+ background: rgba(224,122,95,0.12) !important; /* Sunset coral */
}
-.deepdrft-card-indigo-tint {
- background: rgba(75,0,130,0.1);
+.deepdrft-theme-light .deepdrft-card-indigo-tint {
+ background: rgba(28,28,28,0.08) !important; /* Iron tint */
+}
+.deepdrft-theme-dark .deepdrft-card-indigo-tint {
+ background: rgba(106,90,124,0.12) !important; /* Night violet */
}
-.deepdrft-card-lavender-tint {
- background: rgba(147,112,219,0.1);
+.deepdrft-theme-light .deepdrft-card-lavender-tint {
+ background: rgba(125,155,140,0.1) !important; /* Sage tint */
+}
+.deepdrft-theme-dark .deepdrft-card-lavender-tint {
+ background: rgba(138,163,155,0.1) !important; /* Moss tint */
+}
+
+/* Additional theme-specific card tints */
+.deepdrft-theme-light .deepdrft-card-primary-tint {
+ background: rgba(28,28,28,0.06) !important;
+}
+.deepdrft-theme-dark .deepdrft-card-primary-tint {
+ background: rgba(224,122,95,0.1) !important;
+}
+
+.deepdrft-theme-light .deepdrft-card-secondary-tint {
+ background: rgba(184,132,140,0.08) !important;
+}
+.deepdrft-theme-dark .deepdrft-card-secondary-tint {
+ background: rgba(123,109,141,0.1) !important;
+}
+
+.deepdrft-theme-light .deepdrft-card-tertiary-tint {
+ background: rgba(201,169,98,0.08) !important;
+}
+.deepdrft-theme-dark .deepdrft-card-tertiary-tint {
+ background: rgba(233,196,106,0.1) !important;
}
/* Track Card Specific */
@@ -312,4 +477,244 @@ body, p, span, div,
width: 200px;
height: 200px;
}
+}
+
+/* === CHARLESTON IN THE DAY AESTHETICS === */
+
+/* Wrought Iron Effect - decorative borders */
+.charleston-iron-border {
+ border: 2px solid var(--charleston-iron, #1C1C1C);
+ border-radius: 0;
+}
+
+.charleston-iron-border-left {
+ border-left: 4px solid var(--charleston-iron, #1C1C1C);
+}
+
+.charleston-iron-border-top {
+ border-top: 4px solid var(--charleston-iron, #1C1C1C);
+}
+
+.charleston-iron-frame {
+ border: 2px solid var(--charleston-iron, #1C1C1C);
+ box-shadow: inset 0 0 0 1px rgba(28,28,28,0.1);
+}
+
+/* Checkerboard Pattern (Charleston marble floors) */
+.charleston-checkerboard {
+ background-image:
+ linear-gradient(45deg, rgba(28,28,28,0.05) 25%, transparent 25%),
+ linear-gradient(-45deg, rgba(28,28,28,0.05) 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, rgba(28,28,28,0.05) 75%),
+ linear-gradient(-45deg, transparent 75%, rgba(28,28,28,0.05) 75%);
+ background-size: 40px 40px;
+ background-position: 0 0, 0 20px, 20px -20px, -20px 0;
+}
+
+/* Stucco Surface Effect */
+.charleston-stucco {
+ background: var(--charleston-cream, #FDFBF7);
+ box-shadow: inset 0 0 20px rgba(28,28,28,0.03);
+}
+
+/* Gold Accent */
+.charleston-gold-accent {
+ border-bottom: 2px solid var(--charleston-gold, #C9A962);
+}
+
+.charleston-gold-border {
+ border: 1px solid var(--charleston-gold, #C9A962);
+}
+
+/* Rose Accent */
+.charleston-rose-accent {
+ border-bottom: 2px solid var(--charleston-rose, #B8848C);
+}
+
+.charleston-rose-border {
+ border: 1px solid var(--charleston-rose, #B8848C);
+}
+
+/* Garden Card (subtle green tint) */
+.charleston-garden-tint {
+ background: rgba(74, 124, 89, 0.08);
+}
+
+/* Iron Gate Pattern Overlay */
+.charleston-gate-pattern {
+ position: relative;
+}
+
+.charleston-gate-pattern::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-image:
+ repeating-linear-gradient(
+ 90deg,
+ transparent,
+ transparent 20px,
+ rgba(28,28,28,0.03) 20px,
+ rgba(28,28,28,0.03) 22px
+ );
+ pointer-events: none;
+}
+
+/* === LOWCOUNTRY SUMMER NIGHTS AESTHETICS === */
+
+/* Warm Sunset Glow Effects */
+.lowcountry-glow-coral {
+ box-shadow: 0 0 15px rgba(224, 122, 95, 0.4),
+ 0 0 30px rgba(224, 122, 95, 0.2);
+}
+
+.lowcountry-glow-gold {
+ box-shadow: 0 0 15px rgba(233, 196, 106, 0.4),
+ 0 0 30px rgba(233, 196, 106, 0.2);
+}
+
+.lowcountry-glow-twilight {
+ box-shadow: 0 0 15px rgba(123, 109, 141, 0.4),
+ 0 0 30px rgba(123, 109, 141, 0.2);
+}
+
+.lowcountry-glow-moss {
+ box-shadow: 0 0 15px rgba(138, 163, 155, 0.4),
+ 0 0 30px rgba(138, 163, 155, 0.2);
+}
+
+/* Firefly Glow (for accent elements) */
+.lowcountry-firefly-glow {
+ box-shadow: 0 0 10px rgba(233, 196, 106, 0.5),
+ 0 0 20px rgba(233, 196, 106, 0.3),
+ 0 0 40px rgba(233, 196, 106, 0.1);
+}
+
+/* Candlelight effect */
+.lowcountry-candlelight {
+ background: radial-gradient(
+ ellipse at center top,
+ rgba(233, 196, 106, 0.1) 0%,
+ transparent 60%
+ );
+}
+
+/* Sunset Gradient Backgrounds */
+.lowcountry-gradient-sunset {
+ background: linear-gradient(
+ 135deg,
+ #E07A5F 0%,
+ #7B6D8D 50%,
+ #6A5A7C 100%
+ );
+}
+
+.lowcountry-gradient-marsh {
+ background: linear-gradient(
+ 180deg,
+ rgba(13, 13, 18, 1) 0%,
+ rgba(138, 163, 155, 0.15) 100%
+ );
+}
+
+.lowcountry-gradient-twilight {
+ background: linear-gradient(
+ to bottom,
+ #E07A5F 0%,
+ #7B6D8D 40%,
+ #0D0D12 100%
+ );
+}
+
+/* Marsh Water Reflection */
+.lowcountry-water-reflection {
+ border-bottom: 2px solid var(--lowcountry-marsh, #5E8B9C);
+ box-shadow: 0 4px 15px rgba(94, 139, 156, 0.2);
+}
+
+/* Spanish Moss Texture Overlay */
+.lowcountry-moss-overlay {
+ position: relative;
+}
+
+.lowcountry-moss-overlay::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: repeating-linear-gradient(
+ 180deg,
+ transparent,
+ transparent 8px,
+ rgba(123, 109, 141, 0.03) 8px,
+ rgba(123, 109, 141, 0.03) 10px
+ );
+ pointer-events: none;
+}
+
+/* Warm Border Effect */
+.lowcountry-warm-border {
+ border: 1px solid transparent;
+ border-image: linear-gradient(
+ 135deg,
+ #E07A5F,
+ #7B6D8D,
+ #E9C46A
+ ) 1;
+}
+
+.lowcountry-border-coral {
+ border: 1px solid #E07A5F;
+ box-shadow: 0 0 8px rgba(224, 122, 95, 0.3);
+}
+
+.lowcountry-border-gold {
+ border: 1px solid #E9C46A;
+ box-shadow: 0 0 8px rgba(233, 196, 106, 0.3);
+}
+
+/* === EXTENDED PALETTE UTILITY CLASSES === */
+/* These provide theme-aware access to Quaternary through Septenary colors */
+
+/* Text Colors */
+.deepdrft-text-quaternary { color: var(--deepdrft-theme-quaternary); }
+.deepdrft-text-quinary { color: var(--deepdrft-theme-quinary); }
+.deepdrft-text-senary { color: var(--deepdrft-theme-senary); }
+.deepdrft-text-septenary { color: var(--deepdrft-theme-septenary); }
+
+/* Background Colors */
+.deepdrft-bg-quaternary { background-color: var(--deepdrft-theme-quaternary); }
+.deepdrft-bg-quinary { background-color: var(--deepdrft-theme-quinary); }
+.deepdrft-bg-senary { background-color: var(--deepdrft-theme-senary); }
+.deepdrft-bg-septenary { background-color: var(--deepdrft-theme-septenary); }
+
+/* Border Colors */
+.deepdrft-border-quaternary { border-color: var(--deepdrft-theme-quaternary); }
+.deepdrft-border-quinary { border-color: var(--deepdrft-theme-quinary); }
+.deepdrft-border-senary { border-color: var(--deepdrft-theme-senary); }
+.deepdrft-border-septenary { border-color: var(--deepdrft-theme-septenary); }
+
+/* Left Border Accents */
+.deepdrft-border-left-quaternary { border-left: 4px solid var(--deepdrft-theme-quaternary); }
+.deepdrft-border-left-quinary { border-left: 4px solid var(--deepdrft-theme-quinary); }
+.deepdrft-border-left-senary { border-left: 4px solid var(--deepdrft-theme-senary); }
+.deepdrft-border-left-septenary { border-left: 4px solid var(--deepdrft-theme-septenary); }
+
+/* Card Tints for Extended Palette */
+.deepdrft-card-quaternary-tint {
+ background: color-mix(in srgb, var(--deepdrft-theme-quaternary) 10%, transparent);
+}
+.deepdrft-card-quinary-tint {
+ background: color-mix(in srgb, var(--deepdrft-theme-quinary) 10%, transparent);
+}
+.deepdrft-card-senary-tint {
+ background: color-mix(in srgb, var(--deepdrft-theme-senary) 10%, transparent);
+}
+.deepdrft-card-septenary-tint {
+ background: color-mix(in srgb, var(--deepdrft-theme-septenary) 10%, transparent);
}
\ No newline at end of file