/* ================================================================= E-SIAP Soft UI Evolution — Design System PA Atambua · 2026 ================================================================= */ /* ── 1. FONT IMPORT ─────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lato:wght@300;400;700&display=swap'); /* ── 2. DESIGN TOKENS — LIGHT MODE (Default) ────────────────────── */ :root { /* Colors - Soft UI Light Mode */ --c-bg: #E8EDF2; --c-surface: #EFF4F9; --c-surface-2: #F8FAFE; --c-white: #FFFFFF; --c-primary: #1A3D80; --c-primary-lt: #2E5BA8; --c-accent: #0369A1; --c-accent-lt: #0EA5E9; --c-text: #1E293B; --c-text-md: #475569; --c-text-sm: #94A3B8; --c-border: #D4DCE8; --c-success: #10B981; --c-warning: #F59E0B; --c-danger: #EF4444; /* Soft UI Shadows — Light Mode */ --shadow-raised: -4px -4px 10px rgba(255, 255, 255, 0.9), 4px 4px 12px rgba(163, 177, 198, 0.45); --shadow-raised-lg: -6px -6px 16px rgba(255, 255, 255, 0.95), 6px 6px 20px rgba(163, 177, 198, 0.5); --shadow-inset: inset -2px -2px 6px rgba(255, 255, 255, 0.8), inset 2px 2px 8px rgba(163, 177, 198, 0.4); --shadow-card: 0 4px 20px rgba(30, 41, 59, 0.07), 0 1px 4px rgba(30, 41, 59, 0.05); --shadow-float: 0 8px 32px rgba(30, 41, 59, 0.12), 0 2px 8px rgba(30, 41, 59, 0.06); --shadow-btn: 0 4px 12px rgba(3, 105, 161, 0.30); /* Radius */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 9999px; /* Spacing (8pt grid) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Typography */ --font-heading: 'EB Garamond', Georgia, serif; --font-body: 'Lato', system-ui, -apple-system, sans-serif; --font-mono: 'Fira Code', 'Cascadia Code', monospace; /* Transitions */ --t-fast: 150ms cubic-bezier(.4, 0, .2, 1); --t-normal: 250ms cubic-bezier(.4, 0, .2, 1); --t-slow: 350ms cubic-bezier(.4, 0, .2, 1); --t-spring: 400ms cubic-bezier(.34, 1.56, .64, 1); } /* ── 2b. DESIGN TOKENS — DARK MODE ──────────────────────────────── */ /* Aktif ketika memiliki class="dark" */ html.dark { /* Colors - Soft UI Dark Mode */ --c-bg: #0F172A; --c-surface: #1E293B; --c-surface-2: #243045; --c-primary: #3B82F6; --c-primary-lt: #60A5FA; --c-accent: #0EA5E9; --c-accent-lt: #38BDF8; --c-text: #F8FAFC; --c-text-md: #94A3B8; --c-text-sm: #64748B; --c-border: rgba(255, 255, 255, 0.08); /* Soft UI Shadows — Dark Mode */ --shadow-raised: -3px -3px 8px rgba(255, 255, 255, 0.03), 4px 4px 12px rgba(0, 0, 0, 0.4); --shadow-raised-lg: -5px -5px 12px rgba(255, 255, 255, 0.03), 6px 6px 18px rgba(0, 0, 0, 0.5); --shadow-inset: inset -2px -2px 6px rgba(255, 255, 255, 0.02), inset 2px 2px 8px rgba(0, 0, 0, 0.4); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.15); --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-btn: 0 4px 12px rgba(59, 130, 246, 0.30); } /* ── 3. RESET & BASE ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-text); background-color: var(--c-bg); min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.25; color: var(--c-primary); font-weight: 600; } a { color: var(--c-accent); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--c-primary); } img { max-width: 100%; height: auto; display: block; } :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: var(--r-xs); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── 4. SCROLLBAR ───────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--c-text-sm); } /* ── 5. SOFT UI COMPONENTS ─────────────────────────────────────── */ /* Card — raised surface */ .su-card { background: var(--c-surface-2); border-radius: var(--r-xl); box-shadow: var(--shadow-raised); padding: var(--sp-6); transition: box-shadow var(--t-normal), transform var(--t-normal); } .su-card:hover { box-shadow: var(--shadow-raised-lg); transform: translateY(-1px); } /* Panel — flat card */ .su-panel { background: var(--c-surface-2); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--sp-5); border: 1px solid var(--c-border); } /* Input — inset effect */ .su-input { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-family: var(--font-body); font-size: 14px; color: var(--c-text); width: 100%; box-shadow: var(--shadow-inset); transition: border-color var(--t-fast), box-shadow var(--t-fast); outline: none; } .su-input:focus { border-color: var(--c-accent); box-shadow: var(--shadow-inset), 0 0 0 3px rgba(3, 105, 161, .15); } .su-input::placeholder { color: var(--c-text-sm); } /* Textarea */ .su-textarea { resize: vertical; min-height: 80px; } /* Primary Button */ .su-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-body); font-size: 14px; font-weight: 700; padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill); border: none; cursor: pointer; transition: all var(--t-normal); text-decoration: none; white-space: nowrap; user-select: none; } .su-btn:active { transform: scale(.97); } .su-btn-primary { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-lt) 100%); color: #fff; box-shadow: var(--shadow-btn); } .su-btn-primary:hover { box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45); transform: translateY(-1px); color: #fff; } .su-btn-accent { background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-lt) 100%); color: #fff; box-shadow: 0 4px 12px rgba(14, 165, 233, .30); } .su-btn-accent:hover { box-shadow: 0 6px 20px rgba(14, 165, 233, .45); transform: translateY(-1px); color: #fff; } .su-btn-ghost { background: var(--c-surface-2); color: var(--c-text-md); box-shadow: var(--shadow-raised); } .su-btn-ghost:hover { color: var(--c-primary); box-shadow: var(--shadow-raised-lg); } .su-btn-sm { padding: var(--sp-2) var(--sp-4); font-size: 13px; } .su-btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text-md); box-shadow: var(--shadow-raised); } .su-btn-icon:hover { color: var(--c-primary); box-shadow: var(--shadow-raised-lg); } /* Badge */ .su-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .su-badge-blue { background: rgba(59, 130, 246, .15); color: #60A5FA; } .su-badge-green { background: rgba(16, 185, 129, .15); color: #34D399; } .su-badge-yellow { background: rgba(245, 158, 11, .15); color: #FBBF24; } .su-badge-red { background: rgba(239, 68, 68, .15); color: #F87171; } .su-badge-gray { background: rgba(148, 163, 184, .12); color: var(--c-text-md); } /* ── 6. NAVBAR ──────────────────────────────────────────────────── */ .su-navbar { background: rgba(239, 244, 249, 0.88); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--c-border); border-radius: var(--r-pill); box-shadow: var(--shadow-raised); padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 50; transition: background var(--t-normal), border-color var(--t-normal), box-shadow var(--t-normal); } .su-nav-pill { display: flex; background: var(--c-bg); border-radius: var(--r-pill); padding: 4px; box-shadow: var(--shadow-inset); gap: 2px; } .su-nav-link { padding: 6px 18px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--c-text-md); transition: all var(--t-fast); text-decoration: none; white-space: nowrap; } .su-nav-link:hover { color: var(--c-primary); } .su-nav-link.active { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-lt)); color: #fff; box-shadow: 0 2px 8px rgba(59, 130, 246, .30); } /* ── 7. CHAT UI ─────────────────────────────────────────────────── */ .chat-bubble { max-width: 82%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-xl); font-size: 14px; line-height: 1.65; position: relative; transition: opacity var(--t-fast); } .chat-bubble-user { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-lt)); color: #fff; border-bottom-right-radius: var(--r-xs); box-shadow: 0 4px 12px rgba(59, 130, 246, .30); margin-left: auto; } .chat-bubble-bot { background: var(--c-surface-2); color: var(--c-text); border-bottom-left-radius: var(--r-xs); box-shadow: var(--shadow-raised); } /* Typing indicator */ .typing-dot { width: 7px; height: 7px; background: var(--c-text-sm); border-radius: 50%; animation: typingBounce 1.2s infinite ease-in-out; } .typing-dot:nth-child(2) { animation-delay: .2s; } .typing-dot:nth-child(3) { animation-delay: .4s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } } /* Typewriter cursor */ .typewriter-cursor::after { content: '|'; animation: blink .7s step-end infinite; color: var(--c-accent); font-weight: 300; } @keyframes blink { 50% { opacity: 0; } } /* Message entrance animation */ .msg-enter { animation: msgSlideIn .25s var(--t-normal) both; } @keyframes msgSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── 8. PWA INSTALL BANNER ─────────────────────────────────────── */ #pwa-install-banner { position: fixed; bottom: var(--sp-4); left: 50%; transform: translateX(-50%) translateY(120%); background: var(--c-surface-2); box-shadow: var(--shadow-float); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-4) var(--sp-5); display: flex; align-items: center; gap: var(--sp-4); z-index: 999; transition: transform var(--t-spring); max-width: 360px; width: calc(100% - 32px); } #pwa-install-banner.show { transform: translateX(-50%) translateY(0); } /* ── 9. TOAST NOTIFICATION ─────────────────────────────────────── */ .su-toast { position: fixed; top: var(--sp-4); right: var(--sp-4); background: var(--c-surface-2); box-shadow: var(--shadow-float); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-5); font-size: 13px; font-weight: 600; color: var(--c-text); display: flex; align-items: center; gap: var(--sp-2); z-index: 9999; transform: translateX(120%); transition: transform var(--t-spring); border-left: 3px solid var(--c-success); } .su-toast.show { transform: translateX(0); } .su-toast.error { border-left-color: var(--c-danger); } .su-toast.warning { border-left-color: var(--c-warning); } /* ── 10. TABLE ──────────────────────────────────────────────────── */ .su-table { width: 100%; border-collapse: collapse; font-size: 13px; } .su-table th { text-align: left; padding: var(--sp-3) var(--sp-4); color: var(--c-text-sm); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--c-border); } .su-table td { padding: var(--sp-3) var(--sp-4); color: var(--c-text); border-bottom: 1px solid rgba(212, 220, 232, .5); } .su-table tr:last-child td { border-bottom: none; } .su-table tr:hover td { background: rgba(3, 105, 161, .03); } /* ── 10.5. ROW CARD HYBRID (List View) ──────────────────────────── */ .su-row-card { display: block; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-3); text-decoration: none; color: var(--c-text); transition: all var(--t-fast); position: relative; overflow: hidden; } .su-row-card:hover { background: var(--c-surface-2); border-color: var(--c-accent-lt); box-shadow: var(--shadow-raised); transform: translateY(-2px); } .su-row-card:active { transform: translateY(0); } .su-date-block { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(3, 105, 161, .05); border: 1px solid rgba(3, 105, 161, .15); border-radius: var(--r-sm); padding: var(--sp-2); min-width: 60px; } .su-date-block .day { font-size: 1.25rem; font-weight: 700; color: var(--c-primary); line-height: 1; } .su-date-block .month-year { font-size: 0.65rem; font-weight: 700; color: var(--c-accent); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; } .su-status-badge { position: absolute; top: var(--sp-3); right: var(--sp-3); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 4px; } .su-status-badge.active { background: rgba(16, 185, 129, .15); color: #10B981; } html.dark .su-status-badge.active { color: #34D399; } .su-status-badge.delayed { background: rgba(245, 158, 11, .15); color: #F59E0B; } html.dark .su-status-badge.delayed { color: #FBBF24; } .su-status-badge.past { background: rgba(148, 163, 184, .15); color: #64748B; } html.dark .su-status-badge.past { color: #94A3B8; } .su-row-card-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; } @media (max-width: 640px) { .su-row-card-grid { grid-template-columns: 1fr; gap: var(--sp-3); } .su-date-block { flex-direction: row; gap: var(--sp-2); align-items: baseline; justify-content: flex-start; padding: var(--sp-2) var(--sp-3); } } /* ── 11. SKELETON LOADER ────────────────────────────────────────── */ .su-skeleton { background: linear-gradient(90deg, var(--c-surface) 25%, var(--c-surface-2) 50%, var(--c-surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--r-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── 12. RESPONSIVE ─────────────────────────────────────────────── */ @media (max-width: 768px) { .su-card { padding: var(--sp-4); border-radius: var(--r-lg); } .su-panel { padding: var(--sp-4); } .su-navbar { border-radius: var(--r-lg); padding: 8px 14px; } h1 { font-size: 1.4rem; } h2 { font-size: 1.2rem; } } @media (max-width: 480px) { body { font-size: 14px; } .su-btn { padding: var(--sp-2) var(--sp-5); font-size: 13px; } } /* ── 13. DARK MODE SPECIFIC OVERRIDES ──────────────────────────── */ /* Smooth transition on theme toggle — all key properties */ html, body { transition: background-color var(--t-normal), color var(--t-normal); } .su-card, .su-panel, .su-navbar, .su-input, .su-btn-ghost, .su-btn-icon, .chat-bubble-bot { transition: background var(--t-normal), background-color var(--t-normal), border-color var(--t-normal), box-shadow var(--t-normal), color var(--t-normal); } /* ── Navbar ── */ html.dark .su-navbar { background: rgba(30, 41, 59, 0.92); border-color: var(--c-border); box-shadow: 0 4px 24px rgba(0,0,0,0.35); } html.dark .su-nav-pill { background: rgba(15, 23, 42, 0.6); } /* ── Cards & Panels ── */ html.dark .su-card { background: var(--c-surface-2); border: 1px solid var(--c-border); } html.dark .su-panel { background: var(--c-surface); border-color: var(--c-border); } /* ── Inputs ── */ html.dark .su-input { background: var(--c-bg); border-color: var(--c-border); color: var(--c-text); } html.dark .su-input:focus { border-color: var(--c-accent); box-shadow: var(--shadow-inset), 0 0 0 3px rgba(14, 165, 233, .2); } html.dark .su-input::placeholder, html.dark input::placeholder, html.dark textarea::placeholder { color: var(--c-text-sm); } /* ── Buttons ── */ html.dark .su-btn-ghost { background: var(--c-surface-2); color: var(--c-text-md); box-shadow: var(--shadow-raised); } html.dark .su-btn-icon { background: var(--c-surface-2); color: var(--c-text-md); border: 1px solid var(--c-border); box-shadow: var(--shadow-raised); } html.dark .su-btn-icon:hover { color: var(--c-primary-lt); } /* ── Chat Bubbles ── */ html.dark .chat-bubble-bot { background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-border); box-shadow: var(--shadow-raised); } /* Bot avatar icon ring */ html.dark .bot-avatar-ring { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-primary-lt); } /* ── Markdown in dark mode ── */ html.dark .markdown-body code { background: rgba(255, 255, 255, 0.06); color: var(--c-accent-lt); } html.dark .markdown-body pre { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--c-border); } /* su-panel dark */ html.dark .su-panel { background: var(--c-surface); border-color: var(--c-border); } /* Input placeholder dark */ html.dark .su-input::placeholder, html.dark input::placeholder { color: var(--c-text-sm); } /* Ghost button dark */ html.dark .su-btn-ghost { background: var(--c-surface-2); color: var(--c-text-md); } html.dark .su-btn-icon { background: var(--c-surface-2); color: var(--c-text-md); border: 1px solid var(--c-border); } /* Table rows dark */ html.dark .su-table th { background: var(--c-surface); color: var(--c-text-sm); border-bottom-color: var(--c-border); } html.dark .su-table td { color: var(--c-text); border-bottom-color: var(--c-border); } html.dark .su-table tr:hover td { background: rgba(255, 255, 255, 0.03); } /* Toast dark */ html.dark .su-toast { background: var(--c-surface-2); color: var(--c-text); } /* PWA banner dark */ html.dark #pwa-install-banner { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); }