278 lines
6.9 KiB
CSS
278 lines
6.9 KiB
CSS
/* resources/css/app.css */
|
|
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap');
|
|
@import "tailwindcss";
|
|
@config "../../tailwind.config.js";
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
/* Brand Palette (Based on Image) */
|
|
--color-page-bg: #E3EBE8;
|
|
--color-sidebar-bg: #3D4E4B;
|
|
--color-accent-gold: #D4A017;
|
|
--color-accent-teal: #21A59F;
|
|
|
|
/* Dark Mode Adjustments */
|
|
--color-dark-bg: #1A2120;
|
|
--color-dark-card: #ffffff;
|
|
--color-dark-border: #f3f4f6;
|
|
--color-dark-text: #E3EBE8;
|
|
|
|
--color-primary-500: #D4A017;
|
|
--color-primary-600: #B88B14;
|
|
|
|
/* Sidebar Specific */
|
|
--color-sidebar-text: #E3EBE8;
|
|
--color-sidebar-active-bg: #E3EBE8;
|
|
--color-sidebar-active-text: #3D4E4B;
|
|
|
|
/* Typography */
|
|
--font-sans: 'Lexend', ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: 'Lexend', sans-serif;
|
|
|
|
/* Premium Radius */
|
|
--radius-xs: 0.25rem;
|
|
--radius-sm: 0.5rem;
|
|
--radius-md: 1rem;
|
|
--radius-lg: 1.5rem;
|
|
--radius-xl: 2rem;
|
|
--radius-2xl: 3rem;
|
|
|
|
/* Shadows */
|
|
--shadow-card: 0 10px 40px oklch(23% 0.05 180 / 0.04), 0 2px 8px oklch(23% 0.05 180 / 0.02);
|
|
--shadow-modal: 0 30px 100px oklch(0% 0 0 / 0.15);
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background-color: var(--color-page-bg);
|
|
color: #2D3748;
|
|
-webkit-font-smoothing: antialiased;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.dark body {
|
|
background-color: var(--color-dark-bg);
|
|
color: var(--color-dark-text);
|
|
}
|
|
|
|
/* Removed global .bg-white override to allow explicit white cards */
|
|
|
|
/* Removed aggressive overrides to restore theme consistency */
|
|
.dark .text-gray-400,
|
|
.dark .text-gray-500 {
|
|
color: #94a3a8;
|
|
}
|
|
|
|
.dark .text-[#3D4E4B] {
|
|
color: var(--color-dark-text);
|
|
}
|
|
|
|
.dark .bg-gray-50,
|
|
.dark .bg-gray-50\/30,
|
|
.dark .bg-gray-50\/50,
|
|
.dark .bg-gray-50\/20 {
|
|
background-color: rgba(255, 255, 255, 0.02) !important;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--font-display);
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #3D4E4B22;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: #3D4E4B44;
|
|
}
|
|
|
|
/* Dashboard Card Variants */
|
|
.card-gold {
|
|
background-color: var(--color-accent-gold);
|
|
color: white;
|
|
}
|
|
|
|
.card-teal {
|
|
background-color: var(--color-accent-teal);
|
|
color: white;
|
|
}
|
|
|
|
.card-dark {
|
|
background-color: var(--color-sidebar-bg);
|
|
color: white;
|
|
}
|
|
|
|
.card-white {
|
|
background-color: white;
|
|
color: #2D3748;
|
|
}
|
|
|
|
/* ─── Smooth Animation System ──────────────────────────────────────────────
|
|
Replaces animate.css. All animations use:
|
|
- Small translate distances (10-16px) — not 100% like animate.css
|
|
- cubic-bezier(0.16, 1, 0.3, 1) — ease-out-expo, natural deceleration
|
|
- GPU-composited properties only: opacity + transform
|
|
─────────────────────────────────────────────────────────────────────── */
|
|
|
|
@keyframes _fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes _fade-up {
|
|
from { opacity: 0; transform: translateY(14px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
@keyframes _fade-down {
|
|
from { opacity: 0; transform: translateY(-14px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
@keyframes _fade-left {
|
|
from { opacity: 0; transform: translateX(-18px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
@keyframes _fade-right {
|
|
from { opacity: 0; transform: translateX(18px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
@keyframes _zoom-in {
|
|
from { opacity: 0; transform: scale(0.93); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
@keyframes _shake {
|
|
0%,100% { transform: none; }
|
|
18% { transform: translateX(-7px); }
|
|
36% { transform: translateX(6px); }
|
|
54% { transform: translateX(-4px); }
|
|
72% { transform: translateX(3px); }
|
|
}
|
|
|
|
@keyframes _page-in {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
|
|
@keyframes _shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.anim-shimmer {
|
|
background: linear-gradient(90deg,
|
|
rgba(0,0,0,0.03) 25%,
|
|
rgba(0,0,0,0.06) 37%,
|
|
rgba(0,0,0,0.03) 63%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: _shimmer 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.dark .anim-shimmer {
|
|
background: linear-gradient(90deg,
|
|
rgba(255,255,255,0.03) 25%,
|
|
rgba(255,255,255,0.06) 37%,
|
|
rgba(255,255,255,0.03) 63%
|
|
);
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
.anim-fade { animation: _fade-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
.anim-up { animation: _fade-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
.anim-down { animation: _fade-down 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
.anim-left { animation: _fade-left 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
.anim-right { animation: _fade-right 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
.anim-zoom { animation: _zoom-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
.anim-shake { animation: _shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
|
|
.anim-page { animation: _page-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
|
|
|
/* Authentication Styling */
|
|
.auth-card {
|
|
background-color: white;
|
|
border-radius: 2.5rem;
|
|
box-shadow: 0 30px 60px -12px rgba(61, 78, 75, 0.15), 0 18px 36px -18px rgba(61, 78, 75, 0.1);
|
|
}
|
|
|
|
.auth-input {
|
|
width: 100%;
|
|
padding: 0.625rem 0.875rem;
|
|
border-radius: 0.75rem;
|
|
background-color: #ffffff;
|
|
border: 1px solid #e5e7eb;
|
|
font-size: 0.875rem;
|
|
color: #111827;
|
|
transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
|
|
box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.auth-input::placeholder {
|
|
color: #d1d5db;
|
|
}
|
|
|
|
.auth-input:focus {
|
|
border-color: #3D4E4B;
|
|
box-shadow: 0 0 0 3px rgba(61, 78, 75, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
/* App-wide input field — same border/shape as auth-input, gold accent on focus */
|
|
.input-field {
|
|
width: 100%;
|
|
padding: 0.625rem 0.875rem;
|
|
border-radius: 0.75rem;
|
|
background-color: #ffffff;
|
|
border: 1px solid #e5e7eb;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: #111827;
|
|
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
|
font-family: var(--font-sans);
|
|
outline: none;
|
|
}
|
|
.dark .input-field {
|
|
background-color: #ffffff;
|
|
border-color: #e5e7eb;
|
|
color: #111827;
|
|
}
|
|
.input-field::placeholder {
|
|
color: #d1d5db;
|
|
font-weight: 400;
|
|
}
|
|
.input-field:focus {
|
|
border-color: #D4A017;
|
|
box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12);
|
|
}
|
|
.input-field.is-error {
|
|
border-color: #fca5a5;
|
|
background-color: #fef2f2;
|
|
}
|
|
.dark .input-field.is-error {
|
|
background-color: rgba(239, 68, 68, 0.05);
|
|
} |