/* ==================================================================
EXECUTIVE AGENDA DASHBOARD — PREMIUM DESIGN SYSTEM (CSS ONLY)
==================================================================
Dibangun di atas TailwindCSS (utility-first) sebagai lapisan
tambahan berisi komponen & efek premium yang tidak praktis
diekspresikan lewat utility class Tailwind biasa: glassmorphism,
gradient border, layered soft shadow, dan keyframe animation.
CARA PAKAI:
Muat file ini SETELAH Tailwind pada , contoh:
...
Dokumen ini murni CSS — tidak ada JavaScript sama sekali.
================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/* ==================================================================
1. DESIGN TOKENS
================================================================== */
:root {
/* Warna Dasar */
--color-bg: #0F172A;
--color-card: #1E293B;
--color-card-alt: #253346;
--color-primary: #2563EB;
--color-primary-light: #60A5FA;
--color-primary-dark: #1D4ED8;
/* Status Color — Green / Blue / Orange / Red */
--color-success: #22C55E; /* Green — Selesai */
--color-info: #2563EB; /* Blue — Terjadwal */
--color-warning: #F59E0B; /* Orange — Berlangsung */
--color-danger: #EF4444; /* Red — Batal */
/* Teks */
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-tertiary: #94A3B8;
--text-muted: #64748B;
/* Border & Glass */
--border-subtle: rgba(255, 255, 255, 0.08);
--border-glass: rgba(255, 255, 255, 0.12);
--glass-bg: rgba(30, 41, 59, 0.55);
/* Radius */
--radius-lg: 16px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-pill: 999px;
/* Easing premium — smooth, sedikit "overshoot" halus */
--ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==================================================================
2. TYPOGRAPHY — ELEGAN & TERSTRUKTUR
================================================================== */
body,
.font-elegant {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01' 1, 'cv01' 1, 'tnum' 1;
}
.text-display {
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
}
.text-heading {
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
}
.text-subheading {
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.35;
color: var(--text-secondary);
}
.text-body-elegant {
font-weight: 400;
letter-spacing: 0;
line-height: 1.6;
color: var(--text-secondary);
}
.text-caption {
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.text-numeric {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
letter-spacing: -0.02em;
}
/* Gradient text — dipakai secukupnya untuk elemen angka/highlight utama */
.text-gradient-primary {
background: linear-gradient(135deg, #60A5FA 0%, #2563EB 60%, #1D4ED8 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ==================================================================
3. ROUNDED XL — RADIUS KONSISTEN
================================================================== */
.rounded-card { border-radius: var(--radius-xl); }
.rounded-hero { border-radius: var(--radius-2xl); }
.rounded-chip { border-radius: var(--radius-pill); }
.rounded-input { border-radius: var(--radius-lg); }
/* ==================================================================
4. SOFT SHADOW — LAYERED, PREMIUM (BUKAN SHADOW TUNGGAL KERAS)
================================================================== */
.shadow-soft-sm {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.24),
0 2px 8px rgba(0, 0, 0, 0.18);
}
.shadow-soft-md {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.20),
0 8px 24px rgba(0, 0, 0, 0.32);
}
.shadow-soft-lg {
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.22),
0 16px 40px rgba(0, 0, 0, 0.40);
}
/* Shadow dengan tint warna primary — untuk elemen aksen/CTA */
.shadow-glow-primary {
box-shadow:
0 8px 24px rgba(37, 99, 235, 0.35),
0 2px 6px rgba(37, 99, 235, 0.25);
}
.shadow-glow-warning {
box-shadow:
0 8px 24px rgba(245, 158, 11, 0.30),
0 2px 6px rgba(245, 158, 11, 0.20);
}
/* ==================================================================
5. GRADIENT — BACKGROUND, BORDER, DAN BUTTON
================================================================== */
.bg-gradient-premium {
background: linear-gradient(135deg, #1E293B 0%, #16223A 50%, #0F172A 100%);
}
.bg-gradient-primary {
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 55%, #1D4ED8 100%);
}
.bg-gradient-radial-glow {
background: radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.25), transparent 60%);
}
/* Gradient border — trik dua layer background (padding-box + border-box) */
.border-gradient-premium {
position: relative;
background:
linear-gradient(var(--color-card), var(--color-card)) padding-box,
linear-gradient(135deg, rgba(96, 165, 250, 0.6), rgba(37, 99, 235, 0.1)) border-box;
border: 1px solid transparent;
}
.btn-gradient-premium {
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
border-radius: var(--radius-pill);
color: #FFFFFF;
font-weight: 600;
letter-spacing: 0.01em;
transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium), filter 0.3s ease;
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
}
.btn-gradient-premium:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(37, 99, 235, 0.45);
filter: brightness(1.08);
}
.btn-gradient-premium:active {
transform: translateY(0);
filter: brightness(0.96);
}
/* ==================================================================
6. GLASSMORPHISM — RINGAN & PREMIUM
================================================================== */
.glass {
background: var(--glass-bg);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid var(--border-glass);
}
.glass-strong {
background: rgba(30, 41, 59, 0.72);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid var(--border-glass);
}
.glass-inner-glow {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 0 40px rgba(37, 99, 235, 0.04);
}
/* ==================================================================
7. CARD PREMIUM (KOMPOSISI SIAP PAKAI)
================================================================== */
.card-premium {
border-radius: var(--radius-xl);
background: var(--color-card);
border: 1px solid var(--border-subtle);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.20),
0 8px 24px rgba(0, 0, 0, 0.32);
transition:
transform 0.35s var(--ease-premium),
box-shadow 0.35s var(--ease-premium),
border-color 0.35s var(--ease-premium);
}
.card-premium-glass {
border-radius: var(--radius-2xl);
background: var(--glass-bg);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid var(--border-glass);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.22),
0 16px 40px rgba(0, 0, 0, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition:
transform 0.35s var(--ease-premium),
box-shadow 0.35s var(--ease-premium),
border-color 0.35s var(--ease-premium);
}
/* ==================================================================
8. TRANSITION — HALUS & KONSISTEN
================================================================== */
.transition-smooth {
transition: all 0.3s var(--ease-soft);
}
.transition-premium {
transition: all 0.4s var(--ease-premium);
}
.transition-fast {
transition: all 0.18s var(--ease-soft);
}
/* ==================================================================
9. HOVER EFFECT
================================================================== */
.hover-lift {
transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium);
}
.hover-lift:hover {
transform: translateY(-6px);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.24),
0 20px 48px rgba(0, 0, 0, 0.45);
border-color: rgba(255, 255, 255, 0.18);
}
.hover-scale {
transition: transform 0.3s var(--ease-premium);
}
.hover-scale:hover {
transform: scale(1.03);
}
.hover-glow {
transition: box-shadow 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium);
}
.hover-glow:hover {
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4), 0 8px 32px rgba(37, 99, 235, 0.28);
border-color: rgba(37, 99, 235, 0.5);
}
.hover-brighten {
transition: filter 0.25s ease, opacity 0.25s ease;
}
.hover-brighten:hover {
filter: brightness(1.1);
}
/* ==================================================================
10. ANIMATION — FADE / SLIDE / SCALE
================================================================== */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-24px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slideUp 0.55s var(--ease-premium) both; }
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
@keyframes softPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
@keyframes shimmerPremium {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.animate-fade-in { animation: fadeIn 0.6s var(--ease-soft) both; }
.animate-fade-in-up { animation: fadeInUp 0.6s var(--ease-premium) both; }
.animate-fade-in-down { animation: fadeInDown 0.6s var(--ease-premium) both; }
.animate-slide-in-left { animation: slideInLeft 0.5s var(--ease-premium) both; }
.animate-slide-in-right{ animation: slideInRight 0.5s var(--ease-premium) both; }
.animate-scale-in { animation: scaleIn 0.4s var(--ease-premium) both; }
.animate-soft-pulse { animation: softPulse 2.2s ease-in-out infinite; }
.animate-shimmer {
background: linear-gradient(90deg, #1E293B 25%, #2A3B54 37%, #1E293B 63%);
background-size: 800px 100%;
animation: shimmerPremium 1.6s linear infinite;
}
/* Delay utilities — untuk efek staggered saat beberapa elemen muncul berurutan */
.delay-75 { animation-delay: 75ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
/* ==================================================================
11. STATUS COLOR — GREEN / BLUE / ORANGE / RED
================================================================== */
.status-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.status-dot-success { background: var(--color-success); }
.status-dot-info { background: var(--color-info); }
.status-dot-warning { background: var(--color-warning); }
.status-dot-danger { background: var(--color-danger); }
/* Badge/chip status — soft background + teks berwarna senada (bukan solid block) */
.badge-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.badge-success {
background: rgba(34, 197, 94, 0.14);
color: var(--color-success);
border: 1px solid rgba(34, 197, 94, 0.25);
}
.badge-info {
background: rgba(37, 99, 235, 0.14);
color: var(--color-primary-light);
border: 1px solid rgba(37, 99, 235, 0.28);
}
.badge-warning {
background: rgba(245, 158, 11, 0.14);
color: var(--color-warning);
border: 1px solid rgba(245, 158, 11, 0.28);
}
.badge-danger {
background: rgba(239, 68, 68, 0.14);
color: var(--color-danger);
border: 1px solid rgba(239, 68, 68, 0.28);
}
/* Border kiri aksen — dipakai pada card hero/highlight sesuai status */
.accent-left-success { border-left: 4px solid var(--color-success); }
.accent-left-info { border-left: 4px solid var(--color-info); }
.accent-left-warning { border-left: 4px solid var(--color-warning); }
.accent-left-danger { border-left: 4px solid var(--color-danger); }
/* Progress bar — status-aware */
.progress-track-premium {
background: rgba(255, 255, 255, 0.08);
border-radius: var(--radius-pill);
overflow: hidden;
}
.progress-fill-success { background: var(--color-success); }
.progress-fill-info { background: var(--color-info); }
.progress-fill-warning { background: var(--color-warning); }
.progress-fill-danger { background: var(--color-danger); }
/* ==================================================================
13. ANIMASI "HIDUP" — CLOCK, BLINK, PROGRESS SHEEN, ANIMATED NUMBER
================================================================== */
/* Realtime Clock Animation — denyut halus tiap detik, dipicu ulang via JS (retrigger class) */
@keyframes clockTick {
0% { transform: scale(1); opacity: 1; }
35% { transform: scale(1.045); opacity: 0.92; }
100% { transform: scale(1); opacity: 1; }
}
.clock-tick {
animation: clockTick 0.5s var(--ease-premium);
}
/* Blink — dipakai untuk kondisi butuh perhatian (mis. agenda hampir berakhir) */
@keyframes blinkAttention {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.animate-blink {
animation: blinkAttention 1s steps(2, jump-none) infinite;
}
/* Pulse — dot LIVE / status aktif (ring melebar & memudar) */
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
70% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
.animate-pulse-ring {
animation: pulseRing 1.8s ease-out infinite;
}
/* Progress Animation — sheen bergerak di atas progress bar yang sedang aktif */
.progress-animated {
position: relative;
overflow: hidden;
}
@keyframes progressSheen {
0% { transform: translateX(-120%); }
100% { transform: translateX(320%); }
}
.progress-animated::after {
content: '';
position: absolute;
inset: 0;
width: 40%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
animation: progressSheen 1.7s ease-in-out infinite;
}
/* Animated Number — angka dihitung naik/turun lewat JavaScript (requestAnimationFrame);
class ini hanya memastikan transisi visual antar frame tetap halus, bukan "melompat". */
.animate-number {
display: inline-block;
font-variant-numeric: tabular-nums;
transition: color 0.3s ease;
}
/* Running Text Animation — kecepatan alternatif untuk konten lebih panjang/pendek */
.marquee-slow { animation-duration: 42s !important; }
.marquee-fast { animation-duration: 22s !important; }
/* ==================================================================
14. AKSESIBILITAS — HORMATI PREFERENSI "REDUCED MOTION"
================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}