sky121113
02918ce0e1
All checks were successful
star-cloud-deploy-demo / deploy-demo (push) Successful in 43s
124 lines
3.0 KiB
CSS
124 lines
3.0 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;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.luxury-nav-item {
|
|
@apply flex items-center gap-x-3.5 py-2.5 px-4 text-sm font-medium rounded-xl transition-all duration-200;
|
|
@apply text-slate-500 hover:text-slate-900 hover:bg-slate-100;
|
|
@apply dark:text-slate-400 dark:hover:text-white dark:hover:bg-white/5;
|
|
}
|
|
|
|
.luxury-nav-item.active {
|
|
@apply bg-slate-100 text-slate-900;
|
|
@apply dark:bg-white/10 dark:text-white;
|
|
position: relative;
|
|
}
|
|
|
|
.luxury-nav-item.active::before {
|
|
content: "";
|
|
@apply absolute left-0 w-1 h-5 bg-cyan-500 rounded-full shadow-[0_0_8px_rgba(6,182,212,0.5)];
|
|
left: 0;
|
|
}
|
|
|
|
/* Submenu styling */
|
|
.luxury-submenu {
|
|
@apply mt-2 space-y-1 ps-4 border-l border-slate-200 ms-4;
|
|
@apply dark:border-white/10;
|
|
}
|
|
} |