feat: dark luxury redesign with black heart branding

Complete visual overhaul: dark-only mode, rose/crimson accent system, glassmorphism header, animated hero with floating hearts and glow orbs, photo-backed cards, infinite team carousel with drag support, redesigned modals with hero images, black heart logo with rose glow silhouette. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 23:30:10 +03:00
parent 1f6e314af6
commit 9cf09b6894
16 changed files with 762 additions and 244 deletions
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -16,6 +16,17 @@ html {
  scroll-behavior: smooth;
 }

+body {
+  overflow-x: hidden;
+}
+
+/* ===== Selection ===== */
+
+::selection {
+  background-color: rgba(225, 29, 72, 0.3);
+  color: inherit;
+}
+
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
@@ -32,6 +43,5 @@ html {
 /* ===== Focus ===== */

 :focus-visible {
-  @apply outline-2 outline-offset-2 outline-neutral-900;
-  @apply dark:outline-white;
+  @apply outline-2 outline-offset-2 outline-rose-500;
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -26,31 +26,18 @@ export const metadata: Metadata = {
  },
 };

-const themeScript = `
-  (function() {
-    var stored = localStorage.getItem('theme');
-    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    if (stored === 'dark' || (!stored && prefersDark)) {
-      document.documentElement.classList.add('dark');
-    }
-  })();
-`;
-
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="ru" suppressHydrationWarning>
-      <head>
-        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
-      </head>
+    <html lang="ru" className="dark">
      <body
-        className={`${inter.variable} ${oswald.variable} surface-base font-sans antialiased`}
+        className={`${inter.variable} ${oswald.variable} bg-[#050505] text-neutral-50 font-sans antialiased`}
      >
        <Header />
-        <main className="pt-16">{children}</main>
+        <main>{children}</main>
        <Footer />
      </body>
    </html>
--- a/src/app/styles/animations.css
+++ b/src/app/styles/animations.css
@@ -3,7 +3,7 @@
@keyframes hero-fade-in-up {
  from {
    opacity: 0;
-    transform: translateY(24px);
+    transform: translateY(32px);
  }
  to {
    opacity: 1;
@@ -14,11 +14,59 @@
@keyframes hero-fade-in-scale {
  from {
    opacity: 0;
-    transform: scale(0.85);
+    transform: scale(0.8);
+    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
+    filter: blur(0);
+  }
+}
+
+@keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.05);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes heart-float {
+  0% {
+    opacity: 0;
+    transform: translateY(0) scale(0.5);
+  }
+  10% {
+    opacity: 0.6;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100vh) scale(1);
  }
 }

@@ -26,22 +74,95 @@

 .hero-logo {
  opacity: 0;
-  animation: hero-fade-in-scale 1s ease-out 0.1s forwards;
+  animation: hero-fade-in-scale 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
 }

 .hero-title {
  opacity: 0;
-  animation: hero-fade-in-up 0.8s ease-out 0.4s forwards;
+  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
 }

 .hero-subtitle {
  opacity: 0;
-  animation: hero-fade-in-up 0.8s ease-out 0.7s forwards;
+  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
 }

 .hero-cta {
  opacity: 0;
-  animation: hero-fade-in-up 0.8s ease-out 1s forwards;
+  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
+}
+
+/* ===== Hero Background ===== */
+
+.hero-bg-gradient {
+  background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(225, 29, 72, 0.15), transparent),
+              radial-gradient(ellipse 60% 40% at 80% 50%, rgba(225, 29, 72, 0.08), transparent),
+              radial-gradient(ellipse 60% 40% at 20% 80%, rgba(225, 29, 72, 0.06), transparent);
+}
+
+.hero-glow-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  animation: pulse-glow 6s ease-in-out infinite;
+  pointer-events: none;
+}
+
+/* ===== Gradient Text ===== */
+
+.gradient-text {
+  background: linear-gradient(135deg, #fff 0%, #e11d48 50%, #fff 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient-shift 6s ease-in-out infinite;
+}
+
+/* Light mode gradient text */
+.gradient-text-light {
+  background: linear-gradient(135deg, #171717 0%, #e11d48 50%, #171717 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient-shift 6s ease-in-out infinite;
+}
+
+/* ===== Animated Border ===== */
+
+.animated-border {
+  position: relative;
+}
+
+.animated-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(225, 29, 72, 0.3), transparent 40%, transparent 60%, rgba(225, 29, 72, 0.15));
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  transition: opacity 0.5s ease;
+  opacity: 0.5;
+}
+
+.animated-border:hover::before {
+  opacity: 1;
+  background: linear-gradient(135deg, rgba(225, 29, 72, 0.6), transparent 40%, transparent 60%, rgba(225, 29, 72, 0.4));
+}
+
+/* ===== Glow Effect ===== */
+
+.glow-hover {
+  transition: box-shadow 0.5s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.glow-hover:hover {
+  box-shadow: 0 0 30px rgba(225, 29, 72, 0.1), 0 0 60px rgba(225, 29, 72, 0.05);
+  transform: translateY(-4px);
 }

 /* ===== Scroll Reveal ===== */
@@ -49,7 +170,7 @@
 .reveal {
  opacity: 0;
  transform: translateY(30px);
-  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
+  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .reveal.visible {
@@ -62,11 +183,11 @@
@keyframes modal-fade-in {
  from {
    opacity: 0;
-    transform: scale(0.95);
+    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
-    transform: scale(1);
+    transform: scale(1) translateY(0);
  }
 }

@@ -80,11 +201,18 @@
 }

 .modal-overlay {
-  animation: modal-overlay-in 0.2s ease-out;
+  animation: modal-overlay-in 0.3s ease-out;
 }

 .modal-content {
-  animation: modal-fade-in 0.3s ease-out;
+  animation: modal-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ===== Section Divider ===== */
+
+.section-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(225, 29, 72, 0.3), transparent);
 }

 /* ===== Reduced Motion ===== */
@@ -96,6 +224,7 @@
  .hero-cta {
    animation: none !important;
    opacity: 1 !important;
+    filter: none !important;
  }

  .reveal {
@@ -108,4 +237,17 @@
  .modal-content {
    animation: none !important;
  }
+
+  .gradient-text,
+  .gradient-text-light {
+    animation: none !important;
+  }
+
+  .hero-glow-orb {
+    animation: none !important;
+  }
+
+  .glow-hover:hover {
+    transform: none;
+  }
 }
--- a/src/app/styles/components.css
+++ b/src/app/styles/components.css
@@ -1,50 +1,57 @@
 /* ===== Navigation ===== */

 .nav-link {
-  @apply text-sm font-medium text-neutral-600 transition-colors duration-200;
+  @apply text-sm font-medium transition-all duration-300;
+  @apply text-neutral-500;
  @apply hover:text-neutral-900;
  @apply dark:text-neutral-400 dark:hover:text-white;
 }

+.nav-link-active {
+  @apply text-rose-600;
+  @apply dark:text-rose-400;
+}
+
 .social-icon {
-  @apply text-neutral-500 transition-colors duration-200;
-  @apply hover:text-neutral-900;
-  @apply dark:text-neutral-400 dark:hover:text-white;
+  @apply text-neutral-400 transition-all duration-300;
+  @apply hover:text-rose-600;
+  @apply dark:text-neutral-500 dark:hover:text-rose-400;
 }

 /* ===== Cards ===== */

 .card {
-  @apply rounded-2xl border p-6 transition-all duration-200 cursor-pointer;
-  @apply border-neutral-200 bg-neutral-50;
-  @apply hover:border-neutral-400 hover:shadow-lg;
-  @apply dark:border-neutral-800 dark:bg-neutral-900;
-  @apply dark:hover:border-neutral-600;
+  @apply rounded-2xl border p-6 transition-all duration-500 cursor-pointer;
+  @apply border-neutral-200 bg-white;
+  @apply hover:border-rose-200 hover:shadow-lg;
+  @apply dark:border-white/[0.06] dark:bg-white/[0.02];
+  @apply dark:hover:border-rose-500/20 dark:hover:bg-white/[0.04];
+  @apply dark:hover:shadow-[0_0_30px_rgba(225,29,72,0.08)];
 }

 /* ===== Buttons ===== */

 .btn-primary {
-  @apply inline-flex items-center justify-center font-medium rounded-full transition-colors duration-200 cursor-pointer;
-  @apply bg-neutral-900 text-white;
-  @apply hover:bg-neutral-700;
-  @apply dark:bg-white dark:text-neutral-900;
-  @apply dark:hover:bg-neutral-200;
+  @apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
+  @apply bg-rose-600 text-white;
+  @apply hover:bg-rose-500 hover:shadow-[0_0_30px_rgba(225,29,72,0.4)];
+  @apply dark:bg-rose-600 dark:text-white;
+  @apply dark:hover:bg-rose-500 dark:hover:shadow-[0_0_30px_rgba(225,29,72,0.4)];
 }

 .btn-outline {
-  @apply inline-flex items-center justify-center font-medium rounded-full transition-colors duration-200 cursor-pointer;
-  @apply border border-neutral-900 text-neutral-900;
-  @apply hover:bg-neutral-900 hover:text-white;
-  @apply dark:border-white dark:text-white;
-  @apply dark:hover:bg-white dark:hover:text-neutral-900;
+  @apply inline-flex items-center justify-center font-semibold rounded-full transition-all duration-300 cursor-pointer;
+  @apply border border-rose-600 text-rose-600;
+  @apply hover:bg-rose-600 hover:text-white;
+  @apply dark:border-rose-500 dark:text-rose-400;
+  @apply dark:hover:bg-rose-500 dark:hover:text-white;
 }

 .btn-ghost {
-  @apply inline-flex items-center justify-center font-medium rounded-full transition-colors duration-200 cursor-pointer;
+  @apply inline-flex items-center justify-center font-medium rounded-full transition-all duration-300 cursor-pointer;
  @apply text-neutral-600;
-  @apply hover:text-neutral-900;
-  @apply dark:text-neutral-400 dark:hover:text-white;
+  @apply hover:text-rose-600;
+  @apply dark:text-neutral-400 dark:hover:text-rose-400;
 }

 /* ===== Scrollbar ===== */
@@ -74,6 +81,6 @@
 }

 .contact-icon {
-  @apply shrink-0 text-neutral-900;
-  @apply dark:text-neutral-50;
+  @apply shrink-0 text-rose-600;
+  @apply dark:text-rose-400;
 }
--- a/src/app/styles/theme.css
+++ b/src/app/styles/theme.css
@@ -1,32 +1,37 @@
 /* ===== Surfaces ===== */

 .surface-base {
-  @apply bg-white text-neutral-900;
-  @apply dark:bg-neutral-950 dark:text-neutral-50;
+  @apply bg-neutral-50 text-neutral-900;
+  @apply dark:bg-[#050505] dark:text-neutral-50;
 }

 .surface-muted {
  @apply bg-neutral-100;
-  @apply dark:bg-neutral-900;
+  @apply dark:bg-[#0a0a0a];
 }

 .surface-glass {
-  @apply bg-white/80 backdrop-blur-md;
-  @apply dark:bg-neutral-950/80;
+  @apply bg-white/70 backdrop-blur-xl;
+  @apply dark:bg-black/40 dark:backdrop-blur-xl;
+}
+
+.surface-card {
+  @apply bg-white/80 backdrop-blur-sm;
+  @apply dark:bg-white/[0.03] dark:backdrop-blur-sm;
 }

 /* ===== Borders ===== */

 .theme-border {
  @apply border-neutral-200;
-  @apply dark:border-neutral-800;
+  @apply dark:border-white/[0.06];
 }

 /* ===== Text ===== */

 .heading-text {
  @apply text-neutral-900;
-  @apply dark:text-neutral-50;
+  @apply dark:text-white;
 }

 .body-text {
@@ -36,13 +41,18 @@

 .muted-text {
  @apply text-neutral-500;
-  @apply dark:text-neutral-400;
+  @apply dark:text-neutral-500;
+}
+
+.accent-text {
+  @apply text-rose-600;
+  @apply dark:text-rose-400;
 }

 /* ===== Layout ===== */

 .section-padding {
-  @apply py-10 sm:py-14;
+  @apply py-16 sm:py-24;
 }

 .section-container {