sky121113
a38387f2ad
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 1m10s
98 lines
2.2 KiB
CSS
98 lines
2.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-display: 'Outfit', var(--font-sans);
|
|
--color-luxury-deep: #0f172a;
|
|
--color-luxury-card: #1e293b;
|
|
--color-accent: #06b6d4;
|
|
/* Cyan 500 */
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.font-display {
|
|
font-family: var(--font-display);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
/* Luxury Cards */
|
|
.luxury-card {
|
|
@apply bg-white dark:bg-[#1e293b] border-0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.luxury-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Luxury Gradient Accents */
|
|
.bg-luxury-gradient {
|
|
background: linear-gradient(135deg, var(--color-accent), #6366f1);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(15px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-luxury-in {
|
|
animation: fadeUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
}
|
|
|
|
/* Custom Scrollbar - Minimal & Elegant */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #94a3b8;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
background: #334155;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #64748b;
|
|
}
|
|
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #94a3b8 transparent;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
} |