diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark luxury gold — spacing, typography, frosted glass, glow

Browse Source 
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
This commit is contained in:
Diana Dolgolyova
2026-04-12 15:34:01 +03:00
parent 3621503470
commit bac46aeb34
7 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/styles/animations.css
+2 -2
View File
@@ -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 ===== */
src/app/styles/theme.css
+10 -10
View File
@@ -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 ===== */
src/components/sections/About.tsx
+1 -1
View File
@@ -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}
src/components/sections/FAQ.tsx
+1 -1
View File
@@ -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
src/components/sections/Pricing.tsx
+1 -1
View File
@@ -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 */}
src/components/sections/schedule/DayCard.tsx
+1 -1
View File
@@ -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">
src/components/ui/SectionHeading.tsx
+2 -2
View File
@@ -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" : ""
}`}
/>