daniel-c-harvey
375 lines
12 KiB
CSS
375 lines
12 KiB
CSS
/* DeepDrft Global Styles - Simplified & Maintainable */
|
|
|
|
/* =============================================================================
|
|
1. CSS VARIABLES - Theme System
|
|
============================================================================= */
|
|
|
|
/* Light Theme (Charleston in the Day) */
|
|
:root {
|
|
/* Core Palette */
|
|
--deepdrft-primary: #1A1A1A;
|
|
--deepdrft-secondary: #B8623D;
|
|
--deepdrft-tertiary: #2A7B8C;
|
|
--deepdrft-quaternary: #D4A556;
|
|
--deepdrft-quinary: #3D5A47;
|
|
--deepdrft-senary: #6B4C6A;
|
|
|
|
/* Surfaces */
|
|
--deepdrft-surface: #FDFBF7;
|
|
--deepdrft-background: #F5F2EC;
|
|
--deepdrft-surface-alpha: rgba(253, 251, 247, 0.9);
|
|
|
|
/* Theme-aware aliases */
|
|
--theme-primary: var(--deepdrft-primary);
|
|
--theme-secondary: var(--deepdrft-secondary);
|
|
--theme-tertiary: var(--deepdrft-tertiary);
|
|
--theme-quaternary: var(--deepdrft-quaternary);
|
|
--theme-quinary: var(--deepdrft-quinary);
|
|
--theme-senary: var(--deepdrft-senary);
|
|
--theme-surface: var(--deepdrft-surface);
|
|
--theme-surface-soft: #4A4A4A;
|
|
|
|
/* Gradient colors */
|
|
--gradient-base: #FDFBF7;
|
|
--gradient-accent: #1A1A1A;
|
|
--gradient-warm: #B8623D;
|
|
--gradient-light: #D4A556;
|
|
|
|
/* Fonts */
|
|
--font-hero: "Bodoni Moda", serif;
|
|
--font-headers: "Cormorant", serif;
|
|
--font-body: "DM Sans", sans-serif;
|
|
}
|
|
|
|
/* Dark Theme (Lowcountry Summer Nights) */
|
|
.deepdrft-theme-dark {
|
|
/* Core Palette */
|
|
--deepdrft-primary: #D4654A;
|
|
--deepdrft-secondary: #7B6D8D;
|
|
--deepdrft-tertiary: #E9C46A;
|
|
--deepdrft-quaternary: #8AA39B;
|
|
--deepdrft-quinary: #9EB8C4;
|
|
--deepdrft-senary: #D4845A;
|
|
|
|
/* Surfaces */
|
|
--deepdrft-surface: rgba(123,109,141,0.12);
|
|
--deepdrft-background: #0D0D12;
|
|
--deepdrft-surface-alpha: rgba(13, 13, 18, 0.95);
|
|
|
|
/* Theme-aware aliases */
|
|
--theme-primary: var(--deepdrft-primary);
|
|
--theme-secondary: var(--deepdrft-secondary);
|
|
--theme-tertiary: var(--deepdrft-tertiary);
|
|
--theme-quaternary: var(--deepdrft-quaternary);
|
|
--theme-quinary: var(--deepdrft-quinary);
|
|
--theme-senary: var(--deepdrft-senary);
|
|
--theme-surface: #F5F0E6;
|
|
--theme-surface-soft: #B8B0C4;
|
|
|
|
/* Gradient colors */
|
|
--gradient-base: #0D0D12;
|
|
--gradient-accent: #7B6D8D;
|
|
--gradient-warm: #D4654A;
|
|
--gradient-light: #E9C46A;
|
|
}
|
|
|
|
/* =============================================================================
|
|
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(--font-hero);
|
|
font-weight: bold;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
/* Headers */
|
|
h2, h3, h4, h5, h6,
|
|
.deepdrft-text-subtitle {
|
|
font-family: var(--font-headers);
|
|
}
|
|
|
|
.deepdrft-text-subtitle {
|
|
font-weight: 300;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* Body */
|
|
body, p, span, div,
|
|
.deepdrft-text-description,
|
|
.deepdrft-text-readable {
|
|
font-family: var(--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 { font-family: var(--font-hero) !important; }
|
|
.mud-typography-h2, .mud-typography-h3, .mud-typography-h4,
|
|
.mud-typography-h5, .mud-typography-h6,
|
|
.mud-button-text, .mud-navlink-text, .mud-appbar-content {
|
|
font-family: var(--font-headers) !important;
|
|
}
|
|
.mud-typography-body1, .mud-typography-body2,
|
|
.mud-typography-caption, .mud-typography-overline,
|
|
.mud-input-text, .mud-select-text, .mud-form-label {
|
|
font-family: var(--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. TRACK CARDS
|
|
============================================================================= */
|
|
|
|
.deepdrft-track-card-container {
|
|
width: 250px;
|
|
height: 250px;
|
|
min-width: 250px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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-track-card-fallback {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.deepdrft-track-info-middle { margin: 8px 0; }
|
|
|
|
.deepdrft-track-info-bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.deepdrft-track-gallery-item-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* =============================================================================
|
|
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%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.deepdrft-track-card-container {
|
|
min-width: 200px;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|