instead (layout). */ } body { @apply bg-ocean-900 text-slate-100 antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Custom scrollbar */ ::-webkit-scrollbar { @apply w-2 h-2; } ::-webkit-scrollbar-track { @apply bg-ocean-800; } ::-webkit-scrollbar-thumb { @apply bg-ocean-600 rounded-full; } ::-webkit-scrollbar-thumb:hover { @apply bg-ocean-500; } /* Focus visible for accessibility */ *:focus-visible { @apply outline-none ring-2 ring-marina-400 ring-offset-2 ring-offset-ocean-900; } /* Selection styling */ ::selection { @apply bg-marina-500/30 text-white; } } /* Component Styles */ @layer components { /* ===== Typography ===== */ .font-display { font-family: 'Archivo', 'Inter var', ui-sans-serif, system-ui, sans-serif; @apply font-extrabold tracking-tight; } .text-gradient { @apply bg-clip-text text-transparent bg-gradient-to-r from-marina-400 to-coral-400; } .text-gradient-gold { @apply bg-clip-text text-transparent bg-gradient-to-r from-gold-400 to-coral-400; } /* ===== Buttons ===== */ .btn-primary { @apply inline-flex items-center justify-center gap-2 bg-gradient-to-r from-marina-500 to-marina-400 text-ocean-950 px-8 py-4 rounded-xl text-lg font-bold hover:from-marina-400 hover:to-marina-300 transition-all duration-300 shadow-lg shadow-marina-400/30 hover:shadow-xl hover:shadow-marina-400/50 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98]; } .btn-secondary { @apply inline-flex items-center justify-center gap-2 bg-white/20 text-white px-8 py-4 rounded-xl text-lg font-bold hover:bg-white/30 transition-all duration-300 border-2 border-white/30 hover:border-white/50 hover:-translate-y-0.5; } .btn-coral { @apply inline-flex items-center justify-center gap-2 bg-gradient-to-r from-coral-500 to-coral-400 text-white px-8 py-4 rounded-xl text-lg font-bold hover:from-coral-400 hover:to-coral-300 transition-all duration-300 shadow-lg shadow-coral-400/30 hover:shadow-xl hover:shadow-coral-400/50 hover:-translate-y-0.5; } .btn-outline { @apply inline-flex items-center justify-center gap-2 bg-transparent text-white px-6 py-3 rounded-xl font-semibold border-2 border-white/40 hover:border-white/60 hover:bg-white/10 transition-all duration-300; } /* ===== Cards ===== */ .card-glass { @apply bg-ocean-50/95 backdrop-blur-lg border border-ocean-200/80 rounded-2xl shadow-soft-lg transition-all duration-300; } .card-glass:hover { @apply shadow-soft-xl border-ocean-300/80; transform: translateY(-4px); } .card-dark { @apply bg-ocean-800/80 backdrop-blur-sm border border-ocean-700/50 rounded-2xl shadow-soft transition-all duration-300; } .card-dark:hover { @apply border-marina-500/30 shadow-soft-lg; transform: translateY(-2px); } .card-light { @apply bg-white rounded-2xl shadow-soft-lg border border-ocean-100 transition-all duration-300; } .card-light:hover { @apply shadow-soft-xl border-marina-200; transform: translateY(-4px); } /* ===== Form Elements ===== */ .input-field { @apply w-full px-4 py-3 rounded-xl border border-ocean-200 focus:border-marina-500 focus:ring-2 focus:ring-marina-200/50 transition-all duration-200 bg-white text-ocean-900 placeholder:text-slate-400; } .input-field-dark { @apply w-full px-4 py-3 rounded-xl border border-ocean-600/50 focus:border-marina-400 focus:ring-2 focus:ring-marina-400/30 transition-all duration-200 bg-ocean-800/80 text-white placeholder:text-slate-400; } .select-field { @apply w-full px-4 py-3 rounded-xl border border-ocean-200 focus:border-marina-500 focus:ring-2 focus:ring-marina-200/50 transition-all duration-200 bg-white text-ocean-900 appearance-none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7'/%3E%3C/svg%3E"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.25rem; padding-right: 2.5rem; } /* ===== Badges & Tags ===== */ .badge { @apply inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold tracking-wide; } .badge-marina { @apply bg-marina-100 text-marina-700 border border-marina-200; } .badge-coral { @apply bg-coral-100 text-coral-700 border border-coral-200; } .badge-glass { @apply bg-white/10 text-white border border-white/20 backdrop-blur-sm; } /* ===== Decorative Elements ===== */ .decorative-blur { @apply absolute rounded-full filter blur-3xl opacity-40; } .glow-ring { @apply absolute rounded-full border border-marina-400/20 animate-pulse-slow; } /* ===== Navigation ===== */ .nav-link { @apply text-slate-200 hover:text-marina-300 transition-colors duration-200 relative; } .nav-link::after { content: ''; @apply absolute bottom-0 left-0 w-0 h-0.5 bg-marina-400 transition-all duration-300; } .nav-link:hover::after { @apply w-full; } /* ===== Hero Section Elements ===== */ .hero-badge { @apply inline-flex items-center gap-2 bg-white/10 border border-white/15 text-marina-300 px-4 py-1.5 rounded-full backdrop-blur text-xs font-semibold tracking-wide; } .hero-badge-pulse::before { content: ''; @apply absolute inline-flex h-full w-full rounded-full bg-marina-400 opacity-75 animate-ping; } /* ===== Section Dividers ===== */ .wave-divider { @apply absolute left-0 w-full h-6 text-marina-400/20; fill: currentColor; preserveAspectRatio: none; viewBox: "0 0 1200 24"; } /* ===== Icon Containers ===== */ .icon-circle { @apply w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300; } .icon-circle-light { @apply bg-ocean-100; } .icon-circle-glass { @apply bg-white/10 backdrop-blur-sm; } /* ===== Gradient Backgrounds ===== */ .gradient-ocean-dark { @apply bg-gradient-to-b from-ocean-900 via-ocean-950 to-ocean-1000; } .gradient-ocean-light { @apply bg-gradient-to-b from-ocean-50 via-ocean-100 to-ocean-200; } .gradient-marina { @apply bg-gradient-to-r from-marina-600 to-marina-400; } /* ===== Overlay Gradients ===== */ .overlay-dark { @apply absolute inset-0 bg-gradient-to-t from-ocean-900/90 via-ocean-900/60 to-transparent; } .overlay-light { @apply absolute inset-0 bg-gradient-to-t from-ocean-100/90 via-ocean-100/60 to-transparent; } } /* Utility Classes */ @layer utilities { /* Text utilities */ .tracking-wider-plus { letter-spacing: 0.075em; } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } /* ===== Scroll reveal ===== Content is fully visible by default. The hidden/transform state is only applied when JS has confirmed IntersectionObserver + no reduced-motion preference (html.reveal-on), so headless renderers and no-JS never ship blank. */ .reveal-on .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .reveal-on .reveal.is-visible { opacity: 1; transform: none; } /* Animation utilities */ .animate-on-scroll { @apply opacity-0 translate-y-8; animation: fadeInUp 0.8s ease-out forwards; } /* Gradient text utilities */ .bg-gradient-text { background-clip: text; -webkit-background-clip: text; color: transparent; } /* Glass effect utilities */ .glass { @apply bg-white/10 backdrop-blur-md; } .glass-dark { @apply bg-ocean-800/50 backdrop-blur-sm; } /* Hover scale utilities */ .hover-scale { transition: transform 0.3s ease; } .hover-scale:hover { transform: scale(1.02); } /* Perspective utilities */ .perspective-1000 { perspective: 1000px; } /* Transform style utilities */ .preserve-3d { transform-style: preserve-3d; } /* Line clamp utilities */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } /* Keyframes for custom animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* Responsive adjustments */ @media (min-width: 640px) { .hero-badge { @apply text-sm; } } @media (min-width: 768px) { .btn-primary { @apply px-10 py-4; } } /* Print styles */ @media print { .no-print { display: none !important; } body { @apply bg-white text-black; } a { @apply text-marina-600; } } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { @apply scroll-auto; } }