/* Fonts are loaded via in — no @import needed here */ :root { --font-sans: "Inter", sans-serif; --font-serif: "Playfair Display", serif; } /* Base */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-sans); background-color: #0a0a1a; color: #f0eeff; overflow-x: hidden; -webkit-text-size-adjust: 100%; } /* Typography */ .font-serif { font-family: var(--font-serif); } .font-playfair { font-family: var(--font-serif); } /* Backgrounds */ .cosmic-bg { background: radial-gradient(circle at 50% 30%, #151836, #0a0a1a 70%); } /* Gold utilities */ .gold-gradient { background: linear-gradient(135deg, #f5d67a, #c9a84c, #997825); } .gold-text { background: linear-gradient(135deg, #ffe599, #c9a84c, #e6ca65); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gold-border { border: 1px solid rgba(201, 168, 76, 0.25); transition: border-color 0.3s ease; } .gold-border:hover { border-color: rgba(201, 168, 76, 0.5); } /* Foreground helper */ .text-foreground { color: #f0eeff; } /* Animations */ @keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.85); } 50% { opacity: 0.55; transform: scale(1.15); } } .animate-twinkle { animation: twinkle 4s ease-in-out infinite; } @keyframes breathing { 0%, 100% { transform: scale(0.98); filter: drop-shadow(0 0 8px rgba(212,175,55,.08)); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 20px rgba(212,175,55,.22)); } } .animate-breathing { animation: breathing 6s ease-in-out infinite; } .transition-fade { transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; } /* Testimonials carousel — hide scrollbar */ .testimonials-track { -ms-overflow-style: none; scrollbar-width: none; } .testimonials-track::-webkit-scrollbar { display: none; } /* Images — prevent layout shift */ img { display: block; max-width: 100%; } /* Smooth image rendering */ img { image-rendering: auto; } /* Tap targets — all interactive elements at least 44px */ button, a { touch-action: manipulation; } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { .animate-twinkle, .animate-breathing { animation: none; } .transition-fade, .transition-all, .transition-transform, .transition-colors { transition: none !important; } }