From bac46aeb347a5167bcfefe59f43e70df8513585a Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Sun, 12 Apr 2026 15:34:01 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20dark=20luxury=20gold=20=E2=80=94=20spac?=
 =?UTF-8?q?ing,=20typography,=20frosted=20glass,=20glow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Design direction: "Dark Luxury Gold" — more breathing room, bolder
headings, frosted glass cards, and richer gold accents.

- Section padding: py-20→py-24, sm:py-32→sm:py-36, px-6→sm:px-10
- SectionHeading: text-6xl→7xl on lg, tracking-wide→wider, longer
  gold gradient underline with via-gold/40
- Section glow: larger radius (800px), positioned higher (-40px),
  elliptical shape for dark mode
- Glass card: backdrop-blur-md→lg in dark, border white/8%, hover
  with subtle gold glow shadow
- Section divider: wider gradient spread with 5% transparent edges
- About/FAQ/Pricing/DayCard: frosted glass in dark mode with
  backdrop-blur-md, subtle gold glow on hover
---
 src/app/styles/animations.css                |  4 ++--
 src/app/styles/theme.css                     | 20 ++++++++++----------
 src/components/sections/About.tsx            |  2 +-
 src/components/sections/FAQ.tsx              |  2 +-
 src/components/sections/Pricing.tsx          |  2 +-
 src/components/sections/schedule/DayCard.tsx |  2 +-
 src/components/ui/SectionHeading.tsx         |  4 ++--
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/app/styles/animations.css b/src/app/styles/animations.css
index f672a33..d31847f 100644
--- a/src/app/styles/animations.css
+++ b/src/app/styles/animations.css
@@ -362,11 +362,11 @@ html:not(.dark) .gradient-text {
 
 .section-divider {
   height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.4), transparent);
+  background: linear-gradient(90deg, transparent 5%, rgba(201, 169, 110, 0.4) 30%, rgba(201, 169, 110, 0.5) 50%, rgba(201, 169, 110, 0.4) 70%, transparent 95%);
 }
 
 :is(.dark) .section-divider {
-  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.15), transparent);
+  background: linear-gradient(90deg, transparent 5%, rgba(201, 169, 110, 0.12) 30%, rgba(201, 169, 110, 0.2) 50%, rgba(201, 169, 110, 0.12) 70%, transparent 95%);
 }
 
 /* ===== No-JS Fallback ===== */
diff --git a/src/app/styles/theme.css b/src/app/styles/theme.css
index 11576c9..b54ec65 100644
--- a/src/app/styles/theme.css
+++ b/src/app/styles/theme.css
@@ -52,11 +52,11 @@
 /* ===== Layout ===== */
 
 .section-padding {
-  @apply py-20 sm:py-32;
+  @apply py-24 sm:py-36;
 }
 
 .section-container {
-  @apply mx-auto max-w-6xl px-6 sm:px-8;
+  @apply mx-auto max-w-6xl px-6 sm:px-10;
 }
 
 /* ===== Section Glow Backgrounds ===== */
@@ -68,30 +68,30 @@
 .section-glow::before {
   content: "";
   position: absolute;
-  top: 0;
+  top: -40px;
   left: 50%;
   transform: translateX(-50%);
-  width: min(600px, 100%);
-  height: 400px;
-  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.15), transparent 70%);
+  width: min(800px, 100%);
+  height: 500px;
+  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.12), transparent 70%);
   pointer-events: none;
 }
 
 :is(.dark) .section-glow::before {
-  background: radial-gradient(ellipse, rgba(201, 169, 110, 0.05), transparent 70%);
+  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 169, 110, 0.07), transparent 70%);
 }
 
 /* ===== Glass Card ===== */
 
 .glass-card {
-  @apply rounded-2xl border backdrop-blur-sm transition-all duration-300;
+  @apply rounded-2xl border backdrop-blur-md transition-all duration-300;
   @apply border-neutral-200/80 bg-white/90 shadow-sm shadow-gold/[0.04];
-  @apply dark:border-white/[0.06] dark:bg-white/[0.04] dark:shadow-none;
+  @apply dark:border-white/[0.08] dark:bg-white/[0.05] dark:backdrop-blur-lg dark:shadow-none;
 }
 
 .glass-card:hover {
   @apply border-gold/30 bg-white shadow-md shadow-gold/[0.08];
-  @apply dark:border-gold/15 dark:bg-white/[0.06] dark:shadow-none;
+  @apply dark:border-gold/20 dark:bg-white/[0.08] dark:shadow-[0_0_30px_rgba(201,169,110,0.06)];
 }
 
 /* ===== Photo Filter ===== */
diff --git a/src/components/sections/About.tsx b/src/components/sections/About.tsx
index 79cb0e2..fb9318f 100644
--- a/src/components/sections/About.tsx
+++ b/src/components/sections/About.tsx
@@ -47,7 +47,7 @@ export function About({ data: about, stats }: AboutProps) {
               <div
                 key={i}
                 aria-label={stat.ariaLabel}
-                className="group flex flex-col items-center gap-3 rounded-2xl border border-neutral-200 bg-white/80 p-6 shadow-sm shadow-gold/[0.06] transition-all duration-300 hover:border-gold/30 hover:shadow-md hover:shadow-gold/[0.1] sm:p-8 dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none dark:hover:border-gold/20 dark:hover:shadow-none"
+                className="group flex flex-col items-center gap-3 rounded-2xl border border-neutral-200 bg-white/80 p-6 shadow-sm shadow-gold/[0.06] transition-all duration-300 hover:border-gold/30 hover:shadow-md hover:shadow-gold/[0.1] sm:p-8 dark:border-white/[0.08] dark:bg-white/[0.04] dark:backdrop-blur-md dark:shadow-none dark:hover:border-gold/20 dark:hover:shadow-[0_0_30px_rgba(201,169,110,0.06)]"
               >
                 <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gold/10 text-gold-dark transition-colors group-hover:bg-gold/20 dark:text-gold-light" aria-hidden="true">
                   {stat.icon}
diff --git a/src/components/sections/FAQ.tsx b/src/components/sections/FAQ.tsx
index 170bbab..19627f5 100644
--- a/src/components/sections/FAQ.tsx
+++ b/src/components/sections/FAQ.tsx
@@ -42,7 +42,7 @@ export function FAQ({ data: faq }: FAQProps) {
                   className={`rounded-xl border transition-all duration-300 ${
                     isOpen
                       ? "border-gold/30 bg-gradient-to-br from-gold/[0.06] via-transparent to-gold/[0.03] shadow-md shadow-gold/5"
-                      : "border-neutral-200 bg-white shadow-sm shadow-gold/[0.03] hover:border-neutral-300 hover:shadow-md hover:shadow-gold/[0.06] dark:border-white/[0.06] dark:bg-neutral-950 dark:shadow-none dark:hover:border-white/[0.12] dark:hover:shadow-none"
+                      : "border-neutral-200 bg-white shadow-sm shadow-gold/[0.03] hover:border-neutral-300 hover:shadow-md hover:shadow-gold/[0.06] dark:border-white/[0.08] dark:bg-white/[0.03] dark:backdrop-blur-md dark:shadow-none dark:hover:border-white/[0.15] dark:hover:shadow-[0_0_20px_rgba(201,169,110,0.05)]"
                   }`}
                 >
                   <button
diff --git a/src/components/sections/Pricing.tsx b/src/components/sections/Pricing.tsx
index 40f12cc..0ba50b3 100644
--- a/src/components/sections/Pricing.tsx
+++ b/src/components/sections/Pricing.tsx
@@ -92,7 +92,7 @@ export function Pricing({ data: pricing }: PricingProps) {
                     className={`group relative rounded-2xl border p-5 transition-all duration-300 ${
                       isPopular
                         ? "border-gold/40 bg-gradient-to-br from-gold/10 via-transparent to-gold/5 dark:from-gold/[0.07] dark:to-gold/[0.02] shadow-lg shadow-gold/10"
-                        : "border-neutral-200 bg-white shadow-sm shadow-gold/[0.04] hover:shadow-md hover:shadow-gold/[0.08] dark:border-white/[0.06] dark:bg-neutral-950 dark:shadow-none dark:hover:shadow-none"
+                        : "border-neutral-200 bg-white shadow-sm shadow-gold/[0.04] hover:shadow-md hover:shadow-gold/[0.08] dark:border-white/[0.08] dark:bg-white/[0.03] dark:backdrop-blur-md dark:shadow-none dark:hover:border-white/[0.15] dark:hover:shadow-[0_0_20px_rgba(201,169,110,0.05)]"
                     }`}
                   >
                     {/* Popular badge */}
diff --git a/src/components/sections/schedule/DayCard.tsx b/src/components/sections/schedule/DayCard.tsx
index 261fb46..9f95793 100644
--- a/src/components/sections/schedule/DayCard.tsx
+++ b/src/components/sections/schedule/DayCard.tsx
@@ -82,7 +82,7 @@ export function DayCard({ day, typeDots, showLocation, filterTrainerSet, toggleF
     : null;
 
   return (
-    <div className="rounded-2xl border border-neutral-200 bg-white shadow-sm shadow-gold/[0.04] dark:border-white/[0.06] dark:bg-[#0a0a0a] dark:shadow-none overflow-hidden">
+    <div className="rounded-2xl border border-neutral-200 bg-white shadow-sm shadow-gold/[0.04] dark:border-white/[0.08] dark:bg-white/[0.03] dark:backdrop-blur-md dark:shadow-none overflow-hidden">
       {/* Day header */}
       <div className="border-b border-neutral-100 bg-neutral-50 px-5 py-4 dark:border-white/[0.04] dark:bg-white/[0.02]">
         <div className="flex items-center gap-3">
diff --git a/src/components/ui/SectionHeading.tsx b/src/components/ui/SectionHeading.tsx
index 842d65b..7b9e095 100644
--- a/src/components/ui/SectionHeading.tsx
+++ b/src/components/ui/SectionHeading.tsx
@@ -8,12 +8,12 @@ export function SectionHeading({ children, className = "", centered = false }: S
   return (
     <div className={centered ? "text-center" : ""}>
       <h2
-        className={`font-display text-4xl font-bold uppercase tracking-wide sm:text-5xl lg:text-6xl gradient-text ${className}`}
+        className={`font-display text-4xl font-bold uppercase tracking-wider sm:text-5xl lg:text-7xl gradient-text ${className}`}
       >
         {children}
       </h2>
       <span
-        className={`mt-4 block h-[1px] w-20 bg-gradient-to-r from-gold to-transparent ${
+        className={`mt-5 block h-[1px] w-24 bg-gradient-to-r from-gold via-gold/40 to-transparent ${
           centered ? "mx-auto" : ""
         }`}
       />