/* ============================================ Kantongin.id - Aplikasi Keuangan Modern Custom styles untuk Tailwind CDN ============================================ */ :root { /* === NEW THEME: Lime + Purple + Dark Ink + Soft Beige === */ --color-lime: #c8f23c; --color-lime-dark: #aee016; --color-lime-light: #ecffaa; --color-purple: #a98bff; --color-purple-deep: #7c5cff; --color-ink: #0f0f14; --color-ink-soft: #1b1b24; --color-bg-soft: #f4f4f2; /* Brand primary mapping */ --color-primary: #0f0f14; /* dark ink for primary buttons */ --color-primary-dark: #000000; --color-primary-light: #ecffaa; --color-accent: #c8f23c; /* lime accent */ --color-accent-2: #a98bff; /* purple accent */ /* Semantic colors */ --color-income: #1fbf75; --color-expense: #ff5a5f; --color-transfer: #7c5cff; /* Gradients */ --gradient-brand: linear-gradient(100deg, #7c5cff 0%, #aee016 100%); --gradient-warm: linear-gradient(135deg, #ff9ecf 0%, #a98bff 100%); --gradient-cool: linear-gradient(135deg, #c8f23c 0%, #a98bff 100%); --shadow-card: 0 18px 50px -24px rgba(0,0,0,0.18); --shadow-card-hover: 0 22px 50px -18px rgba(0,0,0,0.25); --radius-xl: 22px; } /* ============================================================ TEMA PINK — aktif saat . Remap SEMUA aksen brand (hijau/emerald/teal/lime) jadi pink biar tampilan nyeluruh & estetik. Merah (pengeluaran) tetap. ============================================================ */ html[data-theme="pink"] { --color-lime: #ff4f9a; --color-lime-dark: #e63b86; --color-lime-light: #ffd9ea; --color-primary-light: #ffd9ea; --color-accent: #ff4f9a; --gradient-brand: linear-gradient(100deg, #7c5cff 0%, #ff4f9a 100%); --gradient-cool: linear-gradient(135deg, #ff4f9a 0%, #a98bff 100%); } /* Latar app sedikit nuansa pink */ html[data-theme="pink"] body { background-color: #fdf2f8 !important; } /* Teks aksen (emerald → pink) */ html[data-theme="pink"] .text-emerald-300 { color: #ffc2dd !important; } html[data-theme="pink"] .text-emerald-400 { color: #ff8fc0 !important; } html[data-theme="pink"] .text-emerald-500 { color: #ff5fa6 !important; } html[data-theme="pink"] .text-emerald-600 { color: #ec3b86 !important; } html[data-theme="pink"] .text-emerald-700 { color: #d12d72 !important; } /* Background aksen */ html[data-theme="pink"] .bg-emerald-50 { background-color: #fff0f6 !important; } html[data-theme="pink"] .bg-emerald-100 { background-color: #ffe0ee !important; } html[data-theme="pink"] .bg-emerald-400 { background-color: #ff8fc0 !important; } html[data-theme="pink"] .bg-emerald-500 { background-color: #ff4f9a !important; } /* Border aksen (termasuk varian opacity di kalender) */ html[data-theme="pink"] .border-emerald-200, html[data-theme="pink"] .border-emerald-200\/70 { border-color: rgb(255 196 222 / .85) !important; } html[data-theme="pink"] .border-emerald-300, html[data-theme="pink"] .border-emerald-300\/40 { border-color: rgb(255 158 200 / .6) !important; } /* Kartu statistik "Pemasukan" (gradient hijau hardcoded) → pink */ html[data-theme="pink"] .stat-card.income { background: linear-gradient(135deg, #ff5fa6 0%, #e6327f 100%) !important; } /* Gradient hijau Tailwind di sel kalender surplus → pink */ html[data-theme="pink"] .from-emerald-50 { --tw-gradient-from: #fff0f6 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(255 240 246 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; } html[data-theme="pink"] .to-emerald-100\/50 { --tw-gradient-to: rgb(255 215 235 / .5) var(--tw-gradient-to-position) !important; } /* Kalender: sel "hari ini" + glow jadi pink, hover border pink */ html[data-theme="pink"] .cal-today { background-image: linear-gradient(to bottom right, #ff8fc0 0%, #ff4f9a 50%, #d12d72 100%) !important; animation: calPop .35s ease backwards, calGlowPink 2.6s ease-in-out infinite !important; } html[data-theme="pink"] .cal-cell:hover { border-color: rgba(255,79,154,.55) !important; } @keyframes calGlowPink { 0%, 100% { box-shadow: 0 8px 20px -6px rgba(255,79,154,.45), 0 0 0 0 rgba(255,79,154,.30); } 50% { box-shadow: 0 12px 30px -4px rgba(255,79,154,.65), 0 0 0 8px rgba(255,79,154,0); } } /* ============================================================ TEMA HIJAU (default) — dipoles biar cohesive, fresh & premium (setara tema pink). Bawa warna brand lime di aksen kalender. ============================================================ */ html[data-theme="hijau"] body { background-color: #f1faf6 !important; } /* Kartu "Pemasukan": emerald lebih fresh & premium */ html[data-theme="hijau"] .stat-card.income { background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #047857 100%) !important; } /* Kalender "hari ini": gradient lime→emerald (warna brand lime ikut tampil) */ html[data-theme="hijau"] .cal-today { background-image: linear-gradient(to bottom right, #a3e635 0%, #10b981 55%, #047857 100%) !important; } * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--color-bg-soft); color: var(--color-ink); } /* Dark mode */ html.dark body { background-color: #0f172a; color: #e2e8f0; } /* Sidebar */ .sidebar { width: 260px; transition: transform 0.25s ease; } @media (max-width: 1024px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 50; transform: translateX(-100%); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); } .sidebar.open { transform: translateX(0); } } .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; color: #cbd5e1; font-weight: 500; font-size: 14px; transition: all 0.15s ease; } .nav-link:hover { background-color: rgba(255, 255, 255, 0.07); color: #ffffff; } .nav-link.active { background-color: rgba(255, 255, 255, 0.06); color: var(--color-lime); font-weight: 600; position: relative; } .nav-link.active::before { content: ''; position: absolute; left: 3px; top: 22%; bottom: 22%; width: 3px; border-radius: 99px; background: var(--color-lime); box-shadow: 0 0 10px var(--color-accent); } /* === Sidebar gelap (gaya Budggt) === */ #sidebar { background: #14141c !important; color: #cbd5e1; border-color: rgba(255,255,255,.07) !important; } #sidebar .border-slate-100 { border-color: rgba(255,255,255,.07) !important; } #sidebar .text-slate-500 { color: #94a3b8 !important; } #sidebar a span.text-xl { color: #ffffff; } #sidebar .font-semibold { color: #f1f5f9; } #sidebar .btn-ghost { color: #cbd5e1; } #sidebar .btn-ghost:hover { background: rgba(255,255,255,.08) !important; color: #fff; } /* === Kartu saldo hero (gelap, gaya Budggt) === */ .hero-card { position: relative; overflow: hidden; background: linear-gradient(135deg, #1a1a26 0%, #0f0f14 100%); border: 1px solid rgba(255,255,255,.06); border-radius: 22px; padding: 24px; color: #fff; box-shadow: 0 24px 60px -30px rgba(0,0,0,.55); } .hero-glow { position: absolute; width: 360px; height: 360px; right: -80px; top: -140px; border-radius: 50%; background: var(--color-accent); filter: blur(90px); opacity: .22; pointer-events: none; } .hero-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); padding: 5px 11px; border-radius: 99px; font-size: 12px; color: #cbd5e1; } .hero-watermark { position: absolute; left: -8px; bottom: -66px; z-index: 0; font-size: 200px; font-weight: 900; line-height: 1; color: rgba(255,255,255,.035); pointer-events: none; user-select: none; } /* Cards */ .card { background-color: white; border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-card); border: 1px solid #ececec; transition: transform 0.15s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } html.dark .card { background-color: #16161f; border-color: #262633; } /* Stat cards with gradient */ .stat-card { position: relative; overflow: hidden; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border-radius: 16px; padding: 20px; } .stat-card.income { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .stat-card.expense { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .stat-card.balance { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); } .stat-card.savings { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .stat-card::after { content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: all 0.15s ease; cursor: pointer; border: none; text-decoration: none; } .btn-primary { background: var(--color-ink); color: white; border-radius: 14px; font-weight: 700; } .btn-primary:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 28px -10px rgba(0,0,0,0.4); } /* Lime CTA — for "Beli" / strong action buttons */ .btn-lime { background: var(--color-lime); color: var(--color-ink); font-weight: 800; border-radius: 14px; padding: 12px 22px; display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s ease; } .btn-lime:hover { background: var(--color-lime-dark); transform: translateY(-1px); box-shadow: 0 10px 28px -10px var(--color-lime); } /* Purple secondary CTA */ .btn-purple { background: var(--color-purple); color: var(--color-ink); font-weight: 800; border-radius: 14px; padding: 12px 22px; display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s ease; } .btn-purple:hover { background: var(--color-purple-deep); color: white; transform: translateY(-1px); box-shadow: 0 10px 28px -10px var(--color-purple); } .btn-secondary { background-color: #f1f5f9; color: #0f172a; } .btn-secondary:hover { background-color: #e2e8f0; } html.dark .btn-secondary { background-color: #334155; color: #f8fafc; } html.dark .btn-secondary:hover { background-color: #475569; } .btn-danger { background-color: #ef4444; color: white; } .btn-danger:hover { background-color: #dc2626; } .btn-ghost { background-color: transparent; color: #475569; } .btn-ghost:hover { background-color: #f1f5f9; } html.dark .btn-ghost { color: #94a3b8; } html.dark .btn-ghost:hover { background-color: #1e293b; color: #f8fafc; } /* Form inputs */ .input, .select, .textarea { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid #e2e8f0; background-color: white; color: #0f172a; font-size: 14px; transition: all 0.15s ease; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); } html.dark .input, html.dark .select, html.dark .textarea { background-color: #1e293b; border-color: #334155; color: #f8fafc; } .label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155; } html.dark .label { color: #cbd5e1; } /* Badge */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; } .badge-income { background-color: #d1fae5; color: #047857; } .badge-expense { background-color: #fee2e2; color: #b91c1c; } .badge-transfer { background-color: #e0e7ff; color: #4338ca; } /* Modal */ .modal-backdrop { position: fixed; inset: 0; background-color: rgba(15, 23, 42, 0.5); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; } .modal-backdrop.open { display: flex; } .modal { background-color: white; border-radius: 20px; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 24px; animation: modalIn 0.2s ease; } html.dark .modal { background-color: #1e293b; } @keyframes modalIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Toast notification */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; } .toast { background-color: #0f172a; color: white; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); animation: toastIn 0.3s ease; min-width: 250px; display: flex; align-items: center; gap: 10px; } .toast.success { background-color: #10b981; } .toast.error { background-color: #ef4444; } .toast.warning { background-color: #f59e0b; } .toast.info { background-color: #6366f1; } @keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Transaction list item */ .transaction-item { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; cursor: pointer; transition: background-color 0.15s ease; } .transaction-item:hover { background-color: #f8fafc; } html.dark .transaction-item:hover { background-color: #334155; } .transaction-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Empty state */ .empty-state { text-align: center; padding: 54px 20px; animation: emptyFloat 0.5s ease backwards; } .empty-state-icon { width: 82px; height: 82px; margin: 0 auto 18px; border-radius: 24px; background: color-mix(in srgb, var(--color-lime) 16%, #ffffff); color: color-mix(in srgb, var(--color-lime) 60%, #0f172a); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--color-lime) 55%, transparent); animation: emptyPulse 3s ease-in-out infinite; } .empty-state-icon::after { content: ''; position: absolute; inset: -7px; border-radius: 30px; border: 1.5px dashed color-mix(in srgb, var(--color-lime) 45%, transparent); opacity: 0.55; } @keyframes emptyPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes emptyFloat { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Loading skeleton */ .skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: skeleton 1.5s infinite; border-radius: 8px; } html.dark .skeleton { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; } @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Progress bar */ .progress { width: 100%; height: 8px; background-color: #f1f5f9; border-radius: 9999px; overflow: hidden; } .progress-bar { height: 100%; background-color: var(--color-primary); border-radius: 9999px; transition: width 0.3s ease; } .progress-bar.warning { background-color: #f59e0b; } .progress-bar.danger { background-color: #ef4444; } html.dark .progress { background-color: #334155; } /* Scroll bar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } html.dark ::-webkit-scrollbar-thumb { background: #475569; } /* Tab */ .tab-list { display: inline-flex; background-color: #f1f5f9; padding: 4px; border-radius: 12px; gap: 4px; } html.dark .tab-list { background-color: #1e293b; } .tab { padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; border: none; background: transparent; transition: all 0.15s ease; } .tab.active { background-color: white; color: #0f172a; box-shadow: var(--shadow-card); } html.dark .tab.active { background-color: #334155; color: #f8fafc; } /* Chart container */ .chart-container { position: relative; width: 100%; height: 280px; } /* Avatar */ .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-primary); color: white; font-weight: 600; font-size: 14px; } /* Landing page specifics */ .hero-gradient { background: var(--color-bg-soft); } .feature-icon { width: 50px; height: 50px; border-radius: 14px; background: color-mix(in srgb, var(--color-lime) 32%, transparent); display: flex; align-items: center; justify-content: center; color: var(--color-ink); font-weight: 800; } /* Colored feature icons - rotate per index */ .feature-icon-1 { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4f46e5; } .feature-icon-2 { background: linear-gradient(135deg, #fce7f3, #fbcfe8); color: #db2777; } .feature-icon-3 { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; } .feature-icon-4 { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #047857; } .feature-icon-5 { background: linear-gradient(135deg, #cffafe, #a5f3fc); color: #0891b2; } .feature-icon-6 { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; } .feature-icon-7 { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #ea580c; } .feature-icon-8 { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; } .feature-icon-9 { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #9333ea; } /* Animations */ .fade-in { animation: fadeIn 0.4s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Utility */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Print styles */ @media print { .no-print { display: none !important; } body { background: white !important; } .card { box-shadow: none !important; border: 1px solid #e2e8f0 !important; } } /* ============================================ Testimoni "Kata Netizen" - marquee cards ============================================ */ .netizen-card { flex-shrink: 0; width: 340px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 20px; white-space: normal; display: flex; flex-direction: column; gap: 10px; transition: transform 0.3s ease, background 0.3s ease; } .netizen-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.14); } .netizen-stars { font-size: 14px; letter-spacing: 2px; } .netizen-text { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); } .netizen-author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .netizen-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: white; font-size: 14px; flex-shrink: 0; } .netizen-name { font-weight: 600; font-size: 13px; color: white; } .netizen-role { font-size: 11px; color: rgba(255, 255, 255, 0.6); } /* Marquee reverse (scroll dari kiri ke kanan) */ .marquee-reverse { animation: scroll-reverse 35s linear infinite; } @keyframes scroll-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* Pause animation on hover */ .marquee:hover, .marquee-reverse:hover { animation-play-state: paused; } /* ============================================ Flatpickr customization (match brand emerald) ============================================ */ .flatpickr-input.flatpickr-enhanced, .flatpickr-input.form-control.input { display: none !important; } .flatpickr-input ~ .input.form-control, input.flatpickr-mobile { cursor: pointer !important; } .flatpickr-calendar { font-family: 'Inter', system-ui, sans-serif !important; border-radius: 14px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05) !important; border: 1px solid #e2e8f0 !important; padding: 8px !important; width: 320px !important; } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: #fff !important; } .flatpickr-day { border-radius: 10px !important; height: 38px !important; line-height: 38px !important; max-width: 38px !important; font-weight: 500 !important; color: #334155 !important; border: none !important; } .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: #ecfdf5 !important; color: #10b981 !important; } .flatpickr-day.selected, .flatpickr-day.selected:hover { background: #10b981 !important; color: white !important; border-color: #10b981 !important; } .flatpickr-day.today { border: 2px solid #10b981 !important; color: #10b981 !important; font-weight: 700 !important; } .flatpickr-day.today:hover { background: #10b981 !important; color: white !important; } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #cbd5e1 !important; } .flatpickr-weekday { color: #94a3b8 !important; font-weight: 600 !important; font-size: 11px !important; } .flatpickr-months { padding: 6px 0 !important; } .flatpickr-month { color: #0f172a !important; font-weight: 700 !important; } .flatpickr-current-month .numInputWrapper, .flatpickr-current-month input.cur-year { font-weight: 700 !important; } .flatpickr-prev-month, .flatpickr-next-month { color: #64748b !important; border-radius: 8px !important; padding: 8px !important; } .flatpickr-prev-month:hover, .flatpickr-next-month:hover { background: #f1f5f9 !important; color: #10b981 !important; } .flatpickr-prev-month svg, .flatpickr-next-month svg { fill: currentColor !important; } /* Dark mode Flatpickr */ html.dark .flatpickr-calendar { background: #1e293b !important; border-color: #334155 !important; } html.dark .flatpickr-day { color: #e2e8f0 !important; } html.dark .flatpickr-day:hover { background: rgba(16,185,129,0.2) !important; color: #34d399 !important; } html.dark .flatpickr-day.prevMonthDay, html.dark .flatpickr-day.nextMonthDay { color: #475569 !important; } html.dark .flatpickr-month, html.dark .flatpickr-current-month input.cur-year { color: #f1f5f9 !important; } html.dark .flatpickr-weekday { color: #64748b !important; } html.dark .flatpickr-prev-month:hover, html.dark .flatpickr-next-month:hover { background: #334155 !important; } /* ============================================ Aktivitas Bulan Ini — Kalender ============================================ */ @keyframes calGlow { 0%, 100% { box-shadow: 0 8px 20px -6px rgba(16,185,129,.45), 0 0 0 0 rgba(16,185,129,.30); } 50% { box-shadow: 0 12px 30px -4px rgba(16,185,129,.65), 0 0 0 8px rgba(16,185,129,0); } } @keyframes calPop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } } .cal-grid { perspective: 800px; } .cal-cell { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .18s ease; animation: calPop .35s ease backwards; will-change: transform; } .cal-cell:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 14px 26px -10px rgba(15,23,42,.25); border-color: rgba(16,185,129,.55); z-index: 5; } .cal-today { animation: calPop .35s ease backwards, calGlow 2.6s ease-in-out infinite; } .cal-today:hover { transform: translateY(-4px) scale(1.03); } html.dark .cal-cell:hover { box-shadow: 0 14px 26px -10px rgba(0,0,0,.55); }