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>
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user