← back to Watches
src/index.css
1107 lines
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Tailwind v4 Color Utilities */
@layer utilities {
/* Slate backgrounds */
.bg-slate-700 { background-color: #334155; }
.bg-slate-700\/30 { background-color: rgb(51 65 85 / 0.3); }
.bg-slate-700\/50 { background-color: rgb(51 65 85 / 0.5); }
.bg-slate-800 { background-color: #1e293b; }
.bg-slate-800\/50 { background-color: rgb(30 41 59 / 0.5); }
.bg-slate-800\/80 { background-color: rgb(30 41 59 / 0.8); }
.bg-slate-900 { background-color: #0f172a; }
.bg-slate-900\/90 { background-color: rgb(15 23 42 / 0.9); }
.bg-slate-900\/95 { background-color: rgb(15 23 42 / 0.95); }
/* Amber backgrounds */
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-amber-500\/10 { background-color: rgb(245 158 11 / 0.1); }
.bg-amber-500\/20 { background-color: rgb(245 158 11 / 0.2); }
.bg-amber-600 { background-color: #d97706; }
/* Other backgrounds */
.bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }
.bg-white\/5 { background-color: rgb(255 255 255 / 0.05); }
.bg-white\/10 { background-color: rgb(255 255 255 / 0.1); }
.bg-white\/50 { background-color: rgb(255 255 255 / 0.5); }
.bg-green-500 { background-color: #22c55e; }
.bg-green-500\/20 { background-color: rgb(34 197 94 / 0.2); }
.bg-red-500 { background-color: #ef4444; }
.bg-red-500\/20 { background-color: rgb(239 68 68 / 0.2); }
/* Text colors */
.text-white { color: #ffffff; }
.text-black { color: #000000; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-amber-300 { color: #fcd34d; }
.text-amber-400 { color: #fbbf24; }
.text-green-400 { color: #4ade80; }
.text-red-400 { color: #f87171; }
/* Border colors */
.border-slate-600 { border-color: #475569; }
.border-slate-700 { border-color: #334155; }
.border-amber-400 { border-color: #fbbf24; }
.border-amber-500 { border-color: #f59e0b; }
.border-amber-500\/20 { border-color: rgb(245 158 11 / 0.2); }
.border-amber-500\/30 { border-color: rgb(245 158 11 / 0.3); }
.border-amber-500\/50 { border-color: rgb(245 158 11 / 0.5); }
.border-gray-700 { border-color: #374151; }
.border-green-500\/50 { border-color: rgb(34 197 94 / 0.5); }
.border-red-500\/50 { border-color: rgb(239 68 68 / 0.5); }
/* Gradient utilities */
.from-amber-400 { --tw-gradient-from: #fbbf24; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(251 191 36 / 0)); }
.from-amber-500 { --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(245 158 11 / 0)); }
.from-amber-500\/20 { --tw-gradient-from: rgb(245 158 11 / 0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(245 158 11 / 0)); }
.from-amber-600 { --tw-gradient-from: #d97706; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(217 119 6 / 0)); }
.from-slate-700\/50 { --tw-gradient-from: rgb(51 65 85 / 0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(51 65 85 / 0)); }
.from-slate-800 { --tw-gradient-from: #1e293b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(30 41 59 / 0)); }
.from-slate-900 { --tw-gradient-from: #0f172a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(15 23 42 / 0)); }
.via-amber-500 { --tw-gradient-via: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgb(245 158 11 / 0)); }
.via-slate-800 { --tw-gradient-via: #1e293b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgb(30 41 59 / 0)); }
.via-slate-900\/50 { --tw-gradient-via: rgb(15 23 42 / 0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, rgb(15 23 42 / 0)); }
.to-amber-600 { --tw-gradient-to: #d97706; }
.to-amber-600\/20 { --tw-gradient-to: rgb(217 119 6 / 0.2); }
.to-amber-700 { --tw-gradient-to: #b45309; }
.to-slate-800\/50 { --tw-gradient-to: rgb(30 41 59 / 0.5); }
.to-slate-900 { --tw-gradient-to: #0f172a; }
.to-gray-300 { --tw-gradient-to: #d1d5db; }
/* Hover states */
.hover\:text-amber-300:hover { color: #fcd34d; }
.hover\:text-amber-400:hover { color: #fbbf24; }
.hover\:text-white:hover { color: #ffffff; }
.hover\:bg-amber-500:hover { background-color: #f59e0b; }
.hover\:bg-amber-500\/20:hover { background-color: rgb(245 158 11 / 0.2); }
.hover\:bg-amber-600:hover { background-color: #d97706; }
.hover\:bg-slate-700\/30:hover { background-color: rgb(51 65 85 / 0.3); }
.hover\:bg-slate-700\/50:hover { background-color: rgb(51 65 85 / 0.5); }
.hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.1); }
.hover\:bg-white\/5:hover { background-color: rgb(255 255 255 / 0.05); }
.hover\:border-amber-500:hover { border-color: #f59e0b; }
.hover\:border-amber-500\/50:hover { border-color: rgb(245 158 11 / 0.5); }
.hover\:from-amber-600:hover { --tw-gradient-from: #d97706; }
.hover\:to-amber-700:hover { --tw-gradient-to: #b45309; }
/* Focus states */
.focus\:border-amber-500\/50:focus { border-color: rgb(245 158 11 / 0.5); }
/* Shadow utilities */
.shadow-amber-500\/20 { --tw-shadow-color: rgb(245 158 11 / 0.2); }
.shadow-amber-500\/25 { --tw-shadow-color: rgb(245 158 11 / 0.25); }
.shadow-amber-500\/30 { --tw-shadow-color: rgb(245 158 11 / 0.3); }
/* Ring utilities */
.ring-amber-500\/30 { --tw-ring-color: rgb(245 158 11 / 0.3); }
/* Sizing utilities */
.h-3 { height: 0.75rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-56 { height: 14rem; }
.h-80 { height: 20rem; }
.w-3 { width: 0.75rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-80 { width: 20rem; }
/* Spacing */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-bottom: 3rem; padding-top: 3rem; }
.pt-0 { padding-top: 0; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-12 { padding-bottom: 3rem; }
.pl-10 { padding-left: 2.5rem; }
.pr-4 { padding-right: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
/* Positioning */
.inset-0 { inset: 0; }
.-inset-4 { inset: -1rem; }
.top-0 { top: 0; }
.top-4 { top: 1rem; }
.left-0 { left: 0; }
.left-3 { left: 0.75rem; }
.left-4 { left: 1rem; }
.right-0 { right: 0; }
.right-4 { right: 1rem; }
.bottom-0 { bottom: 0; }
.bottom-4 { bottom: 1rem; }
.bottom-8 { bottom: 2rem; }
.-bottom-1 { bottom: -0.25rem; }
.-right-1 { right: -0.25rem; }
/* Borders */
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.border-2 { border-width: 2px; }
/* Text */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
/* Other */
.min-w-0 { min-width: 0; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.blur-3xl { filter: blur(64px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: .5; }
}
/* Responsive utilities */
@media (min-width: 640px) {
.sm\:block { display: block; }
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.md\:flex { display: flex; }
.md\:hidden { display: none; }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md\:gap-4 { gap: 1rem; }
.md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.md\:h-20 { height: 5rem; }
.md\:h-\[600px\] { height: 600px; }
.md\:w-12 { width: 3rem; }
.md\:h-12 { height: 3rem; }
.md\:text-xl { font-size: 1.25rem; }
.md\:text-2xl { font-size: 1.5rem; }
.md\:text-5xl { font-size: 3rem; }
.md\:text-xs { font-size: 0.75rem; }
}
@media (min-width: 1024px) {
.lg\:flex { display: flex; }
.lg\:hidden { display: none; }
.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg\:text-6xl { font-size: 3.75rem; }
}
@media (min-width: 1280px) {
.xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/**
* OMEGA WATCH PRICE HISTORY - ULTRA LUXURY EDITION
* Premium design system inspired by Omega.com
* 3D animations, parallax effects, cinematic reveals
* WCAG AAA accessibility compliant
*/
/* ============================================================================
LUXURY TYPOGRAPHY - Premium Fonts
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Montserrat:wght@300;400;500;600;700;800&family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');
:root {
/* Omega Brand Colors */
--omega-red: #C8102E;
--omega-navy: #1A1A2E;
--omega-gold: #D4AF37;
--omega-champagne: #F7E7CE;
--omega-silver: #C0C0C0;
--omega-platinum: #E5E4E2;
/* Luxury Gradients */
--gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
--gradient-rose-gold: linear-gradient(135deg, #B76E79 0%, #E8B4BC 50%, #B76E79 100%);
--gradient-platinum: linear-gradient(135deg, #E5E4E2 0%, #F8F8F8 50%, #E5E4E2 100%);
--gradient-omega: linear-gradient(135deg, #1A1A2E 0%, #C8102E 100%);
--gradient-luxury-dark: linear-gradient(180deg, #0A0A14 0%, #1A1A2E 50%, #2D2D44 100%);
/* Shadows */
--shadow-luxury: 0 30px 60px -15px rgba(0, 0, 0, 0.3), 0 0 40px rgba(200, 16, 46, 0.05);
--shadow-gold: 0 0 30px rgba(212, 175, 55, 0.4), 0 0 60px rgba(212, 175, 55, 0.2);
--shadow-red: 0 0 30px rgba(200, 16, 46, 0.4), 0 0 60px rgba(200, 16, 46, 0.2);
--shadow-deep: 0 50px 100px -20px rgba(0, 0, 0, 0.5);
}
* {
transition-property: background-color, border-color, color, fill, stroke, transform, opacity, box-shadow;
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Luxury easing */
transition-duration: 400ms;
}
body {
margin: 0;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--gradient-luxury-dark);
overflow-x: hidden;
position: relative;
color: #ffffff;
}
.font-display {
font-family: 'Playfair Display', serif;
}
.font-luxury {
font-family: 'Cormorant Garamond', serif;
}
/* Prevent iOS auto-zoom on input focus */
input, select, textarea {
font-size: 16px;
}
@media (min-width: 768px) {
input, select, textarea {
font-size: 14px;
}
}
/* ============================================================================
CINEMATIC BACKGROUND EFFECTS
============================================================================ */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(200, 16, 46, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 40%);
pointer-events: none;
z-index: 0;
animation: backgroundPulse 20s ease-in-out infinite;
}
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
opacity: 0.3;
}
@keyframes backgroundPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
/* Ensure content is above background */
#root {
position: relative;
z-index: 1;
}
/* ============================================================================
LUXURY ANIMATIONS & EFFECTS
============================================================================ */
/* Floating animation for hero elements */
@keyframes float {
0%, 100% {
transform: translateY(0px) translateZ(0);
}
50% {
transform: translateY(-20px) translateZ(0);
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
/* Gold shimmer effect */
@keyframes goldShimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.shimmer-gold {
background: linear-gradient(
90deg,
rgba(212, 175, 55, 0) 0%,
rgba(212, 175, 55, 0.8) 50%,
rgba(212, 175, 55, 0) 100%
);
background-size: 1000px 100%;
animation: goldShimmer 3s linear infinite;
position: relative;
overflow: hidden;
}
.shimmer-gold::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: goldShimmer 2s linear infinite;
}
/* Parallax effect */
.parallax {
transform-style: preserve-3d;
perspective: 1000px;
}
.parallax-layer {
position: relative;
transform: translateZ(0);
will-change: transform;
}
/* 3D Card effect */
.card-3d {
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-3d:hover {
transform: rotateY(5deg) rotateX(5deg) scale(1.02);
}
.card-3d-face {
backface-visibility: hidden;
}
/* Cinematic reveal */
@keyframes cinematicReveal {
0% {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
opacity: 0;
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
opacity: 1;
}
}
.cinematic-reveal {
animation: cinematicReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
/* Luxury text reveal */
@keyframes luxuryTextReveal {
0% {
opacity: 0;
transform: translateY(30px);
letter-spacing: 0.5em;
}
100% {
opacity: 1;
transform: translateY(0);
letter-spacing: 0.05em;
}
}
.text-reveal {
animation: luxuryTextReveal 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Pulsing glow */
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.1);
}
50% {
box-shadow: 0 0 40px rgba(212, 175, 55, 0.5), 0 0 80px rgba(212, 175, 55, 0.2);
}
}
.pulse-glow {
animation: pulseGlow 3s ease-in-out infinite;
}
/* Rotating border */
@keyframes rotateBorder {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.rotating-border {
position: relative;
}
.rotating-border::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-gold);
border-radius: inherit;
z-index: -1;
animation: rotateBorder 4s linear infinite;
filter: blur(10px);
}
/* Particle effect */
@keyframes particleFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
opacity: 0;
}
10%, 90% {
opacity: 1;
}
50% {
transform: translate(var(--tx), var(--ty)) rotate(180deg);
}
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--gradient-gold);
border-radius: 50%;
animation: particleFloat 10s ease-in-out infinite;
pointer-events: none;
}
/* Luxury hover lift */
.luxury-lift {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
}
.luxury-lift:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: var(--shadow-luxury);
}
.luxury-lift::after {
content: '';
position: absolute;
bottom: -20px;
left: 10%;
right: 10%;
height: 20px;
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
}
.luxury-lift:hover::after {
opacity: 1;
}
/* Gold text gradient */
.text-gold {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.text-rose-gold {
background: var(--gradient-rose-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.text-omega {
background: var(--gradient-omega);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* ============================================================================
PREMIUM SCROLLBAR
============================================================================ */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #1a1a2e;
border-left: 1px solid rgba(212, 175, 55, 0.1);
}
::-webkit-scrollbar-thumb {
background: var(--gradient-gold);
border-radius: 6px;
border: 2px solid #1a1a2e;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
/* ============================================================================
LUXURY CARD COMPONENTS
============================================================================ */
.luxury-card {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
overflow: hidden;
position: relative;
}
.luxury-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--gradient-gold);
opacity: 0;
transition: opacity 0.4s ease;
}
.luxury-card:hover::before {
opacity: 1;
}
.luxury-card-premium {
background: linear-gradient(
135deg,
rgba(26, 26, 46, 0.95) 0%,
rgba(45, 45, 68, 0.95) 100%
);
border: 2px solid;
border-image: var(--gradient-gold) 1;
box-shadow: var(--shadow-luxury), inset 0 0 30px rgba(212, 175, 55, 0.05);
}
/* Glass morphism effect */
.glass-luxury {
background: rgba(26, 26, 46, 0.7);
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.37),
inset 0 0 60px rgba(255, 255, 255, 0.03);
}
/* ============================================================================
PREMIUM BUTTONS
============================================================================ */
.btn-luxury {
position: relative;
padding: 16px 48px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--gradient-gold);
border: none;
border-radius: 50px;
color: #1a1a2e;
cursor: pointer;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}
.btn-luxury::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-luxury:hover::before {
width: 300px;
height: 300px;
}
.btn-luxury:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);
}
.btn-luxury-outline {
background: transparent;
border: 2px solid var(--omega-gold);
color: var(--omega-gold);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}
.btn-luxury-outline:hover {
background: var(--gradient-gold);
color: #1a1a2e;
box-shadow: 0 0 40px rgba(212, 175, 55, 0.4);
}
/* ============================================================================
HAPTIC FEEDBACK SIMULATION
============================================================================ */
.haptic-click {
transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.haptic-click:active {
transform: scale(0.95);
animation: hapticPulse 0.3s ease-out;
}
@keyframes hapticPulse {
0% { transform: scale(0.95); }
50% { transform: scale(0.98); }
100% { transform: scale(1); }
}
/* ============================================================================
GESTURE CONTROL INDICATORS
============================================================================ */
.swipe-indicator {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 50;
}
.swipe-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.swipe-dot.active {
width: 32px;
border-radius: 4px;
background: var(--gradient-gold);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
/* ============================================================================
LOADING STATES - PREMIUM
============================================================================ */
.luxury-spinner {
width: 60px;
height: 60px;
border: 4px solid rgba(212, 175, 55, 0.1);
border-top: 4px solid var(--omega-gold);
border-right: 4px solid var(--omega-gold);
border-radius: 50%;
animation: luxurySpin 1s cubic-bezier(0.87, 0, 0.13, 1) infinite;
box-shadow: var(--shadow-gold);
}
@keyframes luxurySpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.skeleton-luxury {
background: linear-gradient(
90deg,
rgba(45, 45, 68, 0.3) 0%,
rgba(60, 60, 85, 0.5) 50%,
rgba(45, 45, 68, 0.3) 100%
);
background-size: 200% 100%;
animation: luxurySkeleton 2s ease-in-out infinite;
border-radius: 8px;
}
@keyframes luxurySkeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ============================================================================
ACCESSIBILITY - LUXURY EDITION
============================================================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--omega-gold);
outline-offset: 4px;
border-radius: 4px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.luxury-card {
border: 2px solid white;
}
.text-gold,
.text-rose-gold,
.text-omega {
-webkit-text-fill-color: currentColor;
color: #FFD700;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================================
MOBILE OPTIMIZATIONS
============================================================================ */
@media (max-width: 768px) {
.luxury-card {
border-radius: 16px;
}
.btn-luxury {
padding: 12px 32px;
font-size: 14px;
}
/* Touch-friendly sizing */
button, a {
min-height: 44px;
min-width: 44px;
}
/* Prevent iOS zoom on input focus */
input, select, textarea {
font-size: 16px !important;
}
}
/* Safe area for notched devices */
.h-safe-top {
height: env(safe-area-inset-top);
}
.h-safe-bottom {
height: env(safe-area-inset-bottom);
}
.pb-safe {
padding-bottom: env(safe-area-inset-bottom);
}
/* ============================================================================
SMOOTH SCROLLING
============================================================================ */
html {
scroll-behavior: smooth;
}
.smooth-scroll {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* ============================================================================
PRINT STYLES
============================================================================ */
@media print {
body::before,
body::after {
display: none;
}
.no-print {
display: none !important;
}
.luxury-card {
border: 1px solid #000;
page-break-inside: avoid;
}
}
/* ============================================================================
PERFORMANCE OPTIMIZATIONS
============================================================================ */
.gpu-accelerated {
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
}
.contain-layout {
contain: layout;
}
.contain-paint {
contain: paint;
}
/* ============================================================================
UTILITY CLASSES
============================================================================ */
.blur-backdrop {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.shadow-luxury {
box-shadow: var(--shadow-luxury);
}
.shadow-gold {
box-shadow: var(--shadow-gold);
}
.shadow-red {
box-shadow: var(--shadow-red);
}
.shadow-deep {
box-shadow: var(--shadow-deep);
}
.gradient-overlay {
position: relative;
}
.gradient-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(0, 0, 0, 0.8) 100%
);
pointer-events: none;
}
/* ============================================================================
DARK MODE ENHANCEMENTS
============================================================================ */
.dark {
color-scheme: dark;
}
.dark .luxury-card {
background: linear-gradient(
135deg,
rgba(26, 26, 46, 0.95) 0%,
rgba(45, 45, 68, 0.95) 100%
);
}
/* ============================================================================
RESPONSIVE TYPOGRAPHY
============================================================================ */
@media (max-width: 640px) {
html {
font-size: 14px;
}
}
@media (min-width: 1280px) {
html {
font-size: 16px;
}
}
@media (min-width: 1920px) {
html {
font-size: 18px;
}
}
/* ============================================================================
CUSTOM ANIMATIONS FOR WATCH ELEMENTS
============================================================================ */
@keyframes tickTock {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
75% { transform: rotate(-5deg); }
}
.animate-tick-tock {
animation: tickTock 4s ease-in-out infinite;
transform-origin: center center;
}
@keyframes priceRise {
0% {
transform: translateY(20px);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(-10px);
opacity: 0;
}
}
.animate-price-rise {
animation: priceRise 2s ease-out forwards;
}
/* Luxury transition for page changes */
.page-transition-enter {
opacity: 0;
transform: scale(0.95) translateY(20px);
}
.page-transition-enter-active {
opacity: 1;
transform: scale(1) translateY(0);
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-transition-exit {
opacity: 1;
transform: scale(1) translateY(0);
}
.page-transition-exit-active {
opacity: 0;
transform: scale(0.95) translateY(-20px);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}