/* Shared UI theme for Shriju web dashboard (no gradients). Applied when has class="sd-theme". */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"); .sd-theme { /* Elegant neutral palette (dark) */ --sd-bg: #0b0b0d; --sd-surface: #111114; --sd-surface-2: #151519; --sd-border: rgba(255, 255, 255, 0.10); --sd-border-2: rgba(255, 255, 255, 0.16); --sd-text: #f4f4f5; --sd-muted: rgba(244, 244, 245, 0.70); /* zinc-100-ish */ --sd-muted-2: rgba(244, 244, 245, 0.52); --sd-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sd-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --sd-accent: #60a5fa; /* blue-400 */ --sd-accent-2: #a78bfa; /* violet-400 */ --sd-ring: rgba(96, 165, 250, 0.40); --sd-success: #22c55e; --sd-danger: #ef4444; --sd-shadow: 0 28px 70px rgba(0, 0, 0, 0.55); --sd-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.35); color-scheme: dark; } .sd-theme body { background: var(--sd-bg) !important; color: var(--sd-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: var(--sd-font-body) !important; } /* Mono for code-y elements only */ .sd-theme code, .sd-theme pre, .sd-theme kbd, .sd-theme samp, .sd-theme .log-font, .sd-theme .font-mono { font-family: var(--sd-font-mono) !important; } .sd-theme a { color: inherit; text-decoration-color: rgba(244,244,245,0.35); } .sd-theme a:hover { text-decoration-color: rgba(244,244,245,0.55); } /* Better headings (works alongside Tailwind classes) */ .sd-theme h1, .sd-theme h2, .sd-theme h3 { letter-spacing: -0.015em; font-weight: 600; } .sd-theme ::selection { background: rgba(96, 165, 250, 0.25); } /* Focus ring: shadcn-ish */ .sd-theme :where(a, button, input, select, textarea):focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18); border-color: var(--sd-ring) !important; } /* Smooth, professional motion */ .sd-theme .sd-page-enter { animation: sdPageEnter 320ms cubic-bezier(.2,.9,.2,1) both; } @keyframes sdPageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Cards / panels */ .sd-theme .card, .sd-theme .glass-panel { background: rgba(17, 17, 20, 0.92) !important; border: 1px solid var(--sd-border) !important; box-shadow: var(--sd-shadow-soft); backdrop-filter: none !important; } .sd-theme .card:hover, .sd-theme .glass-panel:hover { background: rgba(21, 21, 25, 0.96) !important; border-color: var(--sd-border-2) !important; } .sd-theme .card, .sd-theme .glass-panel, .sd-theme button, .sd-theme a, .sd-theme input, .sd-theme select, .sd-theme textarea { transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; } /* Inputs */ .sd-theme input, .sd-theme select, .sd-theme textarea { background: rgba(17, 17, 20, 0.78) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--sd-text) !important; border-radius: 0.75rem; } .sd-theme input:focus, .sd-theme select:focus, .sd-theme textarea:focus { outline: none; border-color: var(--sd-ring) !important; box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16); } .sd-theme ::placeholder { color: rgba(244, 244, 245, 0.45); } /* Buttons */ .sd-theme .btn-primary, .sd-theme .sd-btn-primary { background: rgba(96, 165, 250, 0.18) !important; border: 1px solid rgba(96, 165, 250, 0.36) !important; } .sd-theme .btn-primary:hover, .sd-theme .sd-btn-primary:hover { background: rgba(96, 165, 250, 0.24) !important; border-color: rgba(96, 165, 250, 0.55) !important; transform: translateY(-1px); } .sd-theme .btn-danger, .sd-theme .sd-btn-danger { background: rgba(239, 68, 68, 0.16) !important; border: 1px solid rgba(239, 68, 68, 0.35) !important; } .sd-theme .btn-danger:hover, .sd-theme .sd-btn-danger:hover { background: rgba(239, 68, 68, 0.22) !important; border-color: rgba(239, 68, 68, 0.55) !important; transform: translateY(-1px); } /* Scrollbars */ .sd-theme ::-webkit-scrollbar { width: 10px; height: 10px; } .sd-theme ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); } .sd-theme ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 999px; } .sd-theme ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); } /* Utility text */ .sd-theme .sd-muted { color: var(--sd-muted) !important; } .sd-theme .sd-muted-2 { color: var(--sd-muted-2) !important; } /* Nice defaults for common Tailwind-ish “surface blocks” */ .sd-theme :where(.bg-slate-900\/40, .bg-slate-900\/50, .bg-slate-900\/60) { background: rgba(15, 15, 18, 0.70) !important; } .sd-theme :where(.border-slate-700\/30, .border-slate-700\/40, .border-slate-700\/50) { border-color: rgba(255, 255, 255, 0.10) !important; } /* Badges / pills */ .sd-theme :where(.rounded-full, .rounded-xl, .rounded-2xl) { --sd-round: 0.75rem; } /* Remove gradients if any slipped through */ .sd-theme .no-gradients { background-image: none !important; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .sd-theme *, .sd-theme *::before, .sd-theme *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }