diff --git a/DeepDrftPublic.Client/Pages/Home.razor b/DeepDrftPublic.Client/Pages/Home.razor index 2e5a731..4ae0fbf 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor +++ b/DeepDrftPublic.Client/Pages/Home.razor @@ -6,13 +6,19 @@ @* Hero - split 50/50 *@
-
- -
+ + +
+ +
+ -
- -
+ +
+ +
+ +
@* Divider *@ @@ -24,14 +30,18 @@ @* Sound section *@
-
-
-
Genres & Moods
-

Every
Frequency
Explored

-
-

- From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette — not a cage. Each session begins as something and ends as something else entirely. -

+
+ + +
Genres & Moods
+

Every
Frequency
Explored

+ + +

+ From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette — not a cage. Each session begins as something and ends as something else entirely. +

+ +
@@ -104,41 +114,47 @@ @* Split: origin + connect *@
-
-
Our Origin
-

Where the Holy City
Meets the Future

-

- Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio — tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined. -

-
+ + +
+
Our Origin
+

Where the Holy City
Meets the Future

+

+ Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio — tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined. +

+
+ -
-
Stay Connected
-

Never Miss
a Session

-
- @* TODO: wire to subscription system when newsletter/alerts backend exists *@ -
-
- -
-
-
Newsletter
-
New releases & studio dispatches
+ +
+
Stay Connected
+

Never Miss
a Session

+
+ @* TODO: wire to subscription system when newsletter/alerts backend exists *@ +
+
+ +
+
+
Newsletter
+
New releases & studio dispatches
+
+
+
+
+ +
+
+
Live Alerts
+
Know the moment we go live
+
+
+ @* TODO: subscription form lives behind this CTA *@ +
-
-
- -
-
-
Live Alerts
-
Know the moment we go live
-
-
-
- @* TODO: subscription form lives behind this CTA *@ - -
+ +
@* CTA banner *@ diff --git a/DeepDrftPublic.Client/Pages/Home.razor.css b/DeepDrftPublic.Client/Pages/Home.razor.css index 3124603..29562e8 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor.css +++ b/DeepDrftPublic.Client/Pages/Home.razor.css @@ -6,8 +6,6 @@ /* ── HERO ── */ .hero { min-height: 100vh; - display: grid; - grid-template-columns: 1fr 1fr; overflow: hidden; } @@ -18,6 +16,7 @@ padding: 6rem 3rem; position: relative; background: var(--deepdrft-white); + height: 100%; } .hero-right { @@ -27,6 +26,13 @@ flex-direction: column; justify-content: flex-end; overflow: hidden; + height: 100%; +} + +@media (max-width: 960px) { + .hero { min-height: auto; } + .hero-left { padding: 4rem 1.5rem 3rem; } + .hero-right { min-height: 50vh; } } /* ── DIVIDER ── */ @@ -59,12 +65,10 @@ background: var(--deepdrft-white); } -.section-header { - display: grid; - grid-template-columns: 1fr 2fr; - gap: 4rem; - margin-bottom: 5rem; - align-items: end; +@media (min-width: 960px) { + .section-header-grid { + align-items: end; + } } .section-label { @@ -109,6 +113,14 @@ margin-bottom: 4rem; } +@media (max-width: 960px) { + .genre-grid { grid-template-columns: repeat(3, 1fr); } +} + +@media (max-width: 600px) { + .genre-grid { grid-template-columns: repeat(2, 1fr); } +} + .genre-card { background: var(--deepdrft-white); padding: 2rem 1.5rem; @@ -191,6 +203,20 @@ .feature-card:hover { background: rgba(250, 250, 248, 0.04); } +/* Below md: per-card border-right leaves dangling hairlines when columns + collapse, so switch to border-bottom dividers instead. */ +@media (max-width: 960px) { + .features-grid { grid-template-columns: repeat(2, 1fr); } + .feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); } + .feature-card:last-child { border-bottom: none; } +} + +@media (max-width: 600px) { + .features-grid { grid-template-columns: 1fr; } + .feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); } + .feature-card:last-child { border-bottom: none; } +} + .feature-icon { width: 2.5rem; height: 2.5rem; @@ -227,11 +253,13 @@ /* ── SPLIT: ORIGIN + CONNECT ── */ .section-split { - display: grid; - grid-template-columns: 1fr 1fr; min-height: 60vh; } +@media (max-width: 960px) { + .section-split { min-height: auto; } +} + .split-left { background: var(--deepdrft-green); padding: 6rem 4rem; @@ -240,6 +268,7 @@ justify-content: center; position: relative; overflow: hidden; + height: 100%; } .split-left::before { @@ -259,6 +288,7 @@ flex-direction: column; justify-content: center; background: var(--deepdrft-white); + height: 100%; } .split-eyebrow { @@ -442,6 +472,7 @@ position: relative; z-index: 1; flex-shrink: 0; + flex-wrap: wrap; } .btn-white { @@ -480,3 +511,29 @@ } .btn-outline-white:hover { border-color: var(--deepdrft-white); } + +@media (max-width: 600px) { + .cta-banner { + flex-direction: column; + align-items: flex-start; + gap: 2rem; + padding: 4rem 1.5rem; + } + + .cta-actions { + width: 100%; + } + + .btn-white, + .btn-outline-white { + flex: 1; + text-align: center; + min-width: 140px; + } + + /* At 22rem the "DRFT" watermark forces horizontal scroll on mobile. */ + .cta-banner::before { + font-size: 8rem; + right: -0.5rem; + } +}