/** * Revelry AI - Shared Styles * * This file contains custom DaisyUI theme overrides and utility classes. * * Required external dependencies (add to HTML ): * - Google Fonts: Manrope * - Lucide Icons (CDN): * - DaisyUI CSS (CDN) * - Tailwind CSS (CDN) * - Tailwind config script (for font family) * * Don't forget to call lucide.createIcons() after DOM is loaded. */ /* ============================================ BASE STYLES ============================================ */ :root { --gradient-primary: linear-gradient(85deg, #00B59D 7.27%, #00CFA2 96%); --gradient-fade: linear-gradient(96deg, rgba(242, 240, 239, 0.80) 0.15%, rgba(242, 240, 239, 0.50) 74.08%); --gradient-fade-light: linear-gradient(0deg, #FCFBFB 0%, #FFF 100%); } body { font-family: 'Manrope', system-ui, sans-serif; font-weight: 500; line-height: 180% !important; } /* ============================================ DAISYUI THEME - LIGHT MODE ============================================ */ [data-theme="light"] { --p: 68.5% 0.155 175; /* primary #00B59D */ --pf: 62% 0.14 175; /* darker for focus */ --pc: 100% 0 0; /* white text on primary */ --s: 0% 0 0; /* secondary black */ --sf: 20% 0 0; --sc: 100% 0 0; /* white text on black secondary */ --a: 68.5% 0.155 175; /* accent #00B59D (same as primary) */ --af: 62% 0.14 175; --ac: 100% 0 0; --n: 63.8% 0 0; /* neutral - black at 40% opacity */ --nf: 55% 0 0; --nc: 100% 0 0; --b1: 100% 0 0; /* base-100 white */ --b2: 95.64% 0.0025 48.72; /* base-200 #F2F0EF */ --b3: 0% 0 0; /* base-300 black */ --bc: 0% 0 0; /* base content black */ --rounded-btn: 100px; /* button border radius */ --rounded-box: 12px; /* box border radius */ } /* ============================================ DAISYUI THEME - DARK MODE ============================================ */ [data-theme="dark"] { --p: 100% 0 0; /* primary white in dark mode */ --pf: 85% 0 0; --pc: 100% 0 0; --s: 87.3% 0.14 130; --sf: 92% 0.12 130; --sc: 0% 0 0; --a: 75.5% 0.12 155; /* accent #7CCB97 */ --af: 82% 0.13 155; --ac: 100% 0 0; --n: 23.57% 0.01 286.07; --nf: 28% 0.01 286.07; --nc: 75% 0.01 250; --b1: 14.08% 0.004 286.07; /* #0A0A0A */ --b2: 23.57% 0.01 286.07; /* #18181B */ --b3: 27.47% 0.014 286.07; /* #27272A */ --bc: 97% 0.008 90; --rounded-btn: 100px; /* button border radius */ --rounded-box: 12px; /* box border radius */ } /* ============================================ COMPONENT OVERRIDES ============================================ */ /* Input border radius */ .input, .select, .textarea { border-radius: 3px; } /* Button height - default/medium only, won't override size variants */ .btn:where(:not(.btn-xs):not(.btn-sm):not(.btn-lg)) { height: auto; min-height: 2.75rem; /* 44px */ padding-left: 2rem; padding-right: 2rem; } .btn-lg { font-weight: 500; height: auto; min-height: 3rem; /* 44px */ padding-left: 2rem; padding-right: 2rem; } /* Primary background uses gradient */ .bg-primary, .btn-primary { background-color: transparent !important; background-image: linear-gradient(85deg, #00B59D 7.27%, #00CFA2 96%) !important; color: oklch(var(--bc)) !important; } .checkbox-primary:checked, .toggle-primary:checked, .progress-primary, .badge-primary { background-color: transparent !important; background-image: linear-gradient(85deg, #00B59D 7.27%, #00CFA2 96%) !important; color: oklch(var(--bc)) !important; } .radio-primary:checked { background-color: transparent !important; background-image: linear-gradient(85deg, #00B59D 7.27%, #00CFA2 96%) !important; } .range-primary::-webkit-slider-thumb { background-color: transparent !important; background-image: linear-gradient(85deg, #00B59D 7.27%, #00CFA2 96%) !important; } .range-primary::-moz-range-thumb { background-color: transparent !important; background-image: linear-gradient(85deg, #00B59D 7.27%, #00CFA2 96%) !important; } /* ============================================ UTILITY CLASSES ============================================ */ /* Brand color utilities */ .text-brand { color: oklch(var(--p)); } .bg-brand { background-color: oklch(var(--p)); } .bg-gradient-fade { background: var(--gradient-fade); } .bg-gradient-fade-light { background: var(--gradient-fade-light); } /* Pattern background */ .pattern-grid { background-image: linear-gradient(rgba(128, 128, 128, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 128, 128, 0.1) 1px, transparent 1px); background-size: 32px 32px; } .card.bg-gradient-fade-light { border: 1px solid oklch(var(--b3)); box-shadow: 0 4px 0 0 oklch(var(--b3)); } .card-compact .card-body { padding-left: 2rem; padding-right: 2rem; } /* ============================================ SCROLL ANIMATIONS ============================================ */ /* Fade up animation */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* Staggered delays */ .animate-on-scroll.delay-1 { transition-delay: 0.1s; } .animate-on-scroll.delay-2 { transition-delay: 0.2s; } .animate-on-scroll.delay-3 { transition-delay: 0.3s; } .animate-on-scroll.delay-4 { transition-delay: 0.4s; } .animate-on-scroll.delay-5 { transition-delay: 0.5s; } /* Slide from left animation */ .animate-slide-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-slide-left.is-visible { opacity: 1; transform: translateX(0); } /* Slide from right animation */ .animate-slide-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-slide-right.is-visible { opacity: 1; transform: translateX(0); } /* Scale up animation */ .animate-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animate-scale.is-visible { opacity: 1; transform: scale(1); }