/* ========================================================================== EOS One — design tokens, theming, reset and shared components Theming works on two independent axes, both set on : data-theme="dark|light" surfaces, text, borders data-accent="violet|…" the brand gradient and every glow Translucent surfaces are expressed as rgba(var(--tint), a): --tint is the ink colour that gets layered over the page. Dark themes tint with white, light themes tint with slate, so one alpha scale serves both. ========================================================================== */ /* ============================================== accent palettes (8) ====== */ /* --a1 primary · --a2 mid · --a3 tertiary · --a1s the soft tint used for text */ :root, [data-accent="violet"] { --a1: #8b5cf6; --a2: #6366f1; --a3: #22d3ee; --a1s: #a78bfa; --a1-rgb: 139, 92, 246; --a2-rgb: 99, 102, 241; --a3-rgb: 34, 211, 238; --a1s-rgb: 167, 139, 250; } [data-accent="ocean"] { --a1: #0ea5e9; --a2: #3b82f6; --a3: #2dd4bf; --a1s: var(--t-sky); --a1-rgb: 14, 165, 233; --a2-rgb: 59, 130, 246; --a3-rgb: 45, 212, 191; --a1s-rgb: 125, 211, 252; } [data-accent="sunset"] { --a1: #f97316; --a2: #ec4899; --a3: #a855f7; --a1s: #fdba74; --a1-rgb: 249, 115, 22; --a2-rgb: 236, 72, 153; --a3-rgb: 168, 85, 247; --a1s-rgb: 253, 186, 116; } [data-accent="emerald"] { --a1: #10b981; --a2: #14b8a6; --a3: #a3e635; --a1s: var(--t-emerald); --a1-rgb: 16, 185, 129; --a2-rgb: 20, 184, 166; --a3-rgb: 163, 230, 53; --a1s-rgb: 110, 231, 183; } [data-accent="rose"] { --a1: #f43f5e; --a2: #ec4899; --a3: #fb923c; --a1s: var(--t-rose); --a1-rgb: 244, 63, 94; --a2-rgb: 236, 72, 153; --a3-rgb: 251, 146, 60; --a1s-rgb: 253, 164, 175; } [data-accent="amber"] { --a1: #f59e0b; --a2: #f97316; --a3: #facc15; --a1s: var(--t-amber); --a1-rgb: 245, 158, 11; --a2-rgb: 249, 115, 22; --a3-rgb: 250, 204, 21; --a1s-rgb: 252, 211, 77; } [data-accent="royal"] { --a1: #6366f1; --a2: #a855f7; --a3: #d946ef; --a1s: var(--t-indigo); --a1-rgb: 99, 102, 241; --a2-rgb: 168, 85, 247; --a3-rgb: 217, 70, 239; --a1s-rgb: 165, 180, 252; } [data-accent="graphite"] { --a1: #64748b; --a2: #475569; --a3: #94a3b8; --a1s: #cbd5e1; --a1-rgb: 100, 116, 139; --a2-rgb: 71, 85, 105; --a3-rgb: 148, 163, 184; --a1s-rgb: 203, 213, 225; } /* ==================================================== dark theme ======== */ :root, [data-theme="dark"] { --tint: 255, 255, 255; --bg-deep: #05070f; --bg-900: #070a14; --bg-850: #0a0e1c; --bg-800: #0e1324; --bg-750: #131a2e; /* Panel wells, progress tracks, and the solid colour behind avatar rings */ --sunken: rgba(0, 0, 0, .22); --track: rgba(0, 0, 0, .32); --ring-bg: #0b0f1d; /* Aurora base tints behind the animated backdrop */ --atmos-1: #131a35; --atmos-2: #10203a; --atmos-opacity: .5; --stars-opacity: 1; /* Chrome */ --sidebar-bg: linear-gradient(180deg, rgba(14, 19, 36, .9), rgba(7, 10, 20, .92)); --topbar-bg: rgba(7, 10, 20, .72); --pop-bg: rgba(15, 20, 38, .97); --panel-bg: rgba(12, 17, 32, .99); --card-bg: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .022)); --text: #e9edfb; --text-dim: #9ba5c4; --text-faint: #6a7395; --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3); --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, .55); --shadow-lg: 0 30px 70px -20px rgba(0, 0, 0, .75); } /* =================================================== light theme ======== */ [data-theme="light"] { /* Slate ink instead of white, so the same alpha scale shades rather than lifts */ --tint: 15, 23, 42; --bg-deep: #f4f6fb; --bg-900: #eef1f8; --bg-850: #e8ecf5; --bg-800: #ffffff; --bg-750: #f8fafc; --sunken: rgba(15, 23, 42, .04); --track: rgba(15, 23, 42, .09); --ring-bg: #ffffff; --atmos-1: #dfe7fb; --atmos-2: #dcecf8; --atmos-opacity: .28; --stars-opacity: 0; --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .94)); --topbar-bg: rgba(255, 255, 255, .82); --pop-bg: rgba(255, 255, 255, .99); --panel-bg: #ffffff; --card-bg: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .86)); --text: #0f172a; --text-dim: #4a5570; --text-faint: #77839e; --shadow-sm: 0 1px 3px rgba(15, 23, 42, .09); --shadow-md: 0 10px 26px -10px rgba(15, 23, 42, .22); --shadow-lg: 0 26px 60px -22px rgba(15, 23, 42, .3); } /* =========================================== derived, theme-agnostic ==== */ :root { --surface: rgba(var(--tint), .035); --surface-2: rgba(var(--tint), .06); --surface-3: rgba(var(--tint), .09); --border: rgba(var(--tint), .08); --border-strong: rgba(var(--tint), .16); /* Brand accent aliases — these follow data-accent everywhere they are used */ --violet: var(--a1); --violet-soft: var(--a1s); --indigo: var(--a2); --cyan: var(--a3); /* Fixed semantic colours: green means good regardless of accent */ --sky: #38bdf8; --emerald: #10b981; --lime: #a3e635; --amber: #f59e0b; --rose: #f43f5e; --grad-brand: linear-gradient(135deg, var(--a1) 0%, var(--a2) 45%, var(--a3) 100%); --grad-brand-soft: linear-gradient(135deg, rgba(var(--a1-rgb), .22), rgba(var(--a3-rgb), .18)); --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --glow: 0 0 0 1px rgba(var(--a1-rgb), .35), 0 12px 40px -12px rgba(var(--a1-rgb), .55); --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --sidebar-w: 268px; --topbar-h: 68px; --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace; } /* Theme changes animate rather than snap, except on the first paint. */ html.theme-ready body, html.theme-ready .sidebar, html.theme-ready .topbar, html.theme-ready .card, html.theme-ready .atmos { transition: background-color .35s var(--ease), background-image .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { min-height: 100vh; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--text); background: var(--bg-deep); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } h1, h2, h3, h4 { font-weight: 650; letter-spacing: -.02em; line-height: 1.25; } ::selection { background: rgba(var(--a1-rgb), .4); color: #fff; } :focus-visible { outline: 2px solid var(--violet-soft); outline-offset: 2px; } /* -------------------------------------------------------------- scroll -- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--tint), .1); border: 3px solid transparent; border-radius: 99px; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--tint), .2); background-clip: content-box; } /* ================================================================ atmos == */ /* Shared animated backdrop: aurora blobs + drifting grid + starfield. */ .atmos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 90% at 15% 0%, var(--atmos-1) 0%, transparent 55%), radial-gradient(100% 80% at 90% 10%, var(--atmos-2) 0%, transparent 60%), var(--bg-deep); } .atmos__grid { position: absolute; inset: -50%; background-image: linear-gradient(rgba(var(--tint), .035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--tint), .035) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%); animation: grid-drift 24s linear infinite; } @keyframes grid-drift { to { transform: translate3d(58px, 58px, 0); } } .atmos__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--atmos-opacity); will-change: transform; } .atmos__blob--1 { width: 46vw; height: 46vw; top: -14vw; left: -10vw; background: radial-gradient(circle, rgba(var(--a1-rgb), .75), transparent 68%); animation: float-a 22s var(--ease) infinite; } .atmos__blob--2 { width: 40vw; height: 40vw; bottom: -16vw; right: -8vw; background: radial-gradient(circle, rgba(var(--a3-rgb), .55), transparent 68%); animation: float-b 27s var(--ease) infinite; } .atmos__blob--3 { width: 32vw; height: 32vw; top: 42%; left: 46%; background: radial-gradient(circle, rgba(var(--a2-rgb), .5), transparent 68%); animation: float-c 19s var(--ease) infinite; } @keyframes float-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(8vw, 6vw, 0) scale(1.18); } } @keyframes float-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); } 50% { transform: translate3d(-9vw, -5vw, 0) scale(.9); } } @keyframes float-c { 0%, 100% { transform: translate3d(-50%, -50%, 0) scale(.95); } 50% { transform: translate3d(-38%, -62%, 0) scale(1.15); } } /* Sparse twinkling starfield, drawn with layered radial gradients. */ .atmos__stars { position: absolute; inset: 0; opacity: var(--stars-opacity); background-image: radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, .8), transparent), radial-gradient(1.5px 1.5px at 68% 14%, rgba(255, 255, 255, .55), transparent), radial-gradient(1px 1px at 34% 62%, rgba(255, 255, 255, .5), transparent), radial-gradient(1.5px 1.5px at 84% 48%, rgba(255, 255, 255, .65), transparent), radial-gradient(1px 1px at 52% 86%, rgba(255, 255, 255, .45), transparent), radial-gradient(1px 1px at 22% 78%, rgba(255, 255, 255, .4), transparent), radial-gradient(1.5px 1.5px at 92% 82%, rgba(255, 255, 255, .5), transparent); animation: twinkle 6s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .35; } to { opacity: .9; } } /* ============================================================ utilities == */ .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .gap-1 { gap: 6px; } .gap-2 { gap: 10px; } .gap-3 { gap: 16px; } .gap-4 { gap: 24px; } .ml-auto { margin-left: auto; } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } .tiny { font-size: 12px; } .small { font-size: 13px; } .mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: -.01em; } .gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* =============================================================== brand === */ /* The anchor that wraps the logo lockup in the sidebar and on login. */ .brand { display: inline-flex; align-items: center; min-width: 0; } /* ============================================================== buttons == */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; height: 42px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; transition: transform .18s var(--ease-spring), box-shadow .25s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s; } .btn svg { width: 16px; height: 16px; flex: 0 0 16px; } .btn:active { transform: scale(.97); } .btn:disabled, .btn.is-loading { opacity: .6; pointer-events: none; } .btn--primary { color: #fff; background: var(--grad-brand); background-size: 200% 100%; box-shadow: 0 10px 30px -10px rgba(var(--a2-rgb), .8); } .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s var(--ease); } .btn--primary:hover { background-position: 100% 0; box-shadow: 0 16px 40px -12px rgba(var(--a2-rgb), .95); transform: translateY(-1px); } .btn--primary:hover::after { transform: translateX(120%); } .btn--ghost { color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); } .btn--ghost:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); } .btn--danger { color: #ffe4e9; background: rgba(244, 63, 94, .14); border: 1px solid rgba(244, 63, 94, .32); } .btn--danger:hover { background: rgba(244, 63, 94, .24); border-color: rgba(244, 63, 94, .5); } .btn--sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 9px; } .btn--icon { width: 36px; height: 36px; padding: 0; border-radius: 10px; } .btn--block { width: 100%; } /* Spinner shown while a form submits. */ .btn__spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; } .btn.is-loading .btn__spinner { display: block; } .btn.is-loading .btn__label, .btn.is-loading>svg { display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* Click ripple, positioned by app.js. */ .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: scale(0); animation: ripple .6s var(--ease-out); pointer-events: none; } @keyframes ripple { to { transform: scale(2.4); opacity: 0; } } /* =============================================================== fields == */ .field { position: relative; display: block; } .field+.field { margin-top: 18px; } .field__label { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--text-dim); } .field__req { color: var(--rose); } .input, .select, .textarea { width: 100%; height: 46px; padding: 0 14px; border-radius: var(--r-md); color: var(--text); background: rgba(var(--tint), .04); border: 1px solid var(--border); transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); } .textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.55; } .input::placeholder, .textarea::placeholder { color: var(--text-faint); } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); } .input:focus, .select:focus, .textarea:focus { outline: none; background: rgba(var(--tint), .06); border-color: rgba(var(--a1-rgb), .65); box-shadow: 0 0 0 4px rgba(var(--a1-rgb), .14); } .select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba5c4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; cursor: pointer; } .select option { background: var(--bg-800); color: var(--text); } /* Input with a leading icon */ .field--icon .input { padding-left: 44px; } .field__icon { position: absolute; left: 14px; bottom: 15px; width: 17px; height: 17px; color: var(--text-faint); pointer-events: none; transition: color .2s var(--ease); } .field--icon .input:focus~.field__icon { color: var(--violet-soft); } /* Trailing button (password reveal) */ .field__trail { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--text-faint); transition: color .2s, background-color .2s; } .field__trail:hover { color: var(--text); background: var(--surface-2); } .field__trail svg { width: 17px; height: 17px; } .field--icon.field--trail .input { padding-right: 44px; } .field__error { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; color: var(--t-rose); animation: shake .4s var(--ease); } .field__error svg { width: 13px; height: 13px; flex: 0 0 13px; } .input.is-invalid, .select.is-invalid { border-color: rgba(244, 63, 94, .6); background: rgba(244, 63, 94, .06); } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } .field__hint { margin-top: 6px; font-size: 12px; color: var(--text-faint); } /* ------------------------------------------------------------- switch --- */ .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch__track { position: relative; width: 42px; height: 24px; flex: 0 0 42px; border-radius: 99px; background: rgba(var(--tint), .1); border: 1px solid var(--border); transition: background-color .25s var(--ease), border-color .25s var(--ease); } .switch__thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .28s var(--ease-spring); } .switch input:checked+.switch__track { background: var(--grad-brand); border-color: transparent; } .switch input:checked+.switch__track .switch__thumb { transform: translateX(18px); } .switch input:focus-visible+.switch__track { box-shadow: 0 0 0 4px rgba(var(--a1-rgb), .25); } /* ------------------------------------------------------------ checkbox -- */ .check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check__box { position: relative; display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; border-radius: 6px; background: rgba(var(--tint), .05); border: 1px solid var(--border-strong); transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease-spring); } .check__box svg { width: 12px; height: 12px; color: #fff; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .3s var(--ease) .05s; } .check input:checked+.check__box { background: var(--grad-brand); border-color: transparent; } .check input:checked+.check__box svg { stroke-dashoffset: 0; } .check:hover .check__box { transform: scale(1.08); } .check input:focus-visible+.check__box { box-shadow: 0 0 0 4px rgba(var(--a1-rgb), .25); } /* ================================================================ chips == */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; border: 1px solid transparent; } .badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .badge--violet { color: var(--t-violet); background: rgba(139, 92, 246, .14); border-color: rgba(139, 92, 246, .3); } .badge--sky { color: var(--t-sky); background: rgba(56, 189, 248, .14); border-color: rgba(56, 189, 248, .3); } .badge--cyan { color: var(--t-cyan); background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .3); } .badge--emerald { color: var(--t-emerald); background: rgba(16, 185, 129, .14); border-color: rgba(16, 185, 129, .3); } .badge--lime { color: var(--t-lime); background: rgba(163, 230, 53, .14); border-color: rgba(163, 230, 53, .3); } .badge--amber { color: var(--t-amber); background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .3); } .badge--rose { color: var(--t-rose); background: rgba(244, 63, 94, .14); border-color: rgba(244, 63, 94, .3); } .badge--indigo { color: var(--t-indigo); background: rgba(99, 102, 241, .14); border-color: rgba(99, 102, 241, .3); } .badge--muted { color: var(--text-dim); background: var(--surface-2); border-color: var(--border); } /* =============================================================== avatar == */ .avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--grad-brand); box-shadow: inset 0 0 0 1px rgba(var(--tint), .12); } .avatar--sm { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; font-size: 11px; } .avatar--lg { width: 52px; height: 52px; flex-basis: 52px; border-radius: 15px; font-size: 17px; } /* Deterministic per-user tint so faces are distinguishable at a glance. */ .avatar[data-tint="1"] { background: linear-gradient(135deg, #8b5cf6, #6366f1); } .avatar[data-tint="2"] { background: linear-gradient(135deg, #06b6d4, #3b82f6); } .avatar[data-tint="3"] { background: linear-gradient(135deg, #10b981, #14b8a6); } .avatar[data-tint="4"] { background: linear-gradient(135deg, #f59e0b, #f43f5e); } .avatar[data-tint="5"] { background: linear-gradient(135deg, #ec4899, #8b5cf6); } .avatar[data-tint="0"] { background: linear-gradient(135deg, #6366f1, #22d3ee); } /* ================================================================ cards == */ .card { position: relative; border-radius: var(--r-lg); background: var(--card-bg); border: 1px solid var(--border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow-md); overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(150deg, rgba(var(--tint), .18), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .card__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .card__title { font-size: 14.5px; font-weight: 650; } .card__sub { font-size: 12.5px; color: var(--text-faint); margin-top: 1px; } .card__body { padding: 20px; } .card__body--flush { padding: 0; } .card__foot { padding: 14px 20px; border-top: 1px solid var(--border); background: var(--sunken); } /* =============================================================== alerts == */ .alert { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; border-radius: var(--r-md); font-size: 13.5px; border: 1px solid; animation: slide-down .45s var(--ease-out); } .alert svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; } .alert--success { color: var(--t-emerald); background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); } .alert--error { color: var(--t-rose); background: rgba(244, 63, 94, .1); border-color: rgba(244, 63, 94, .3); } .alert--info { color: var(--t-sky); background: rgba(56, 189, 248, .1); border-color: rgba(56, 189, 248, .3); } @keyframes slide-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================== animations == */ /* Staggered entrance — set --d inline for the delay. */ .rise { opacity: 0; animation: rise .7s var(--ease-out) forwards; animation-delay: var(--d, 0s); } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .fade-in { opacity: 0; animation: fade-in .6s var(--ease) forwards; animation-delay: var(--d, 0s); } @keyframes fade-in { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .rise, .fade-in { opacity: 1; transform: none; } } /* ========================================================================== Theme-specific colour corrections ========================================================================== */ /* Tinted text colours: light shades read on dark surfaces, dark shades on light ones. Every badge, alert, trend and pill draws from these. */ :root, [data-theme="dark"] { --t-violet: #c4b5fd; --t-indigo: #a5b4fc; --t-sky: #7dd3fc; --t-cyan: #67e8f9; --t-emerald: #6ee7b7; --t-lime: #bef264; --t-amber: #fcd34d; --t-rose: #fda4b4; --headline-1: #fff; } [data-theme="light"] { --t-violet: #6d28d9; --t-indigo: #4338ca; --t-sky: #0369a1; --t-cyan: #0e7490; --t-emerald: #047857; --t-lime: #4d7c0f; --t-amber: #b45309; --t-rose: #be123c; --headline-1: #1e293b; } /* Chips carry more colour on white so they do not wash out. */ [data-theme="light"] .badge { border-width: 1px; font-weight: 650; } /* These three sit on a translucent tint rather than the brand gradient, so white text would disappear once the tint turns pale. */ [data-theme="light"] .navlink.is-active, [data-theme="light"] .eos-filter.is-active, [data-theme="light"] .eos-preset:hover { color: var(--a1); } [data-theme="light"] .navlink.is-active { background: linear-gradient(95deg, rgba(var(--a1-rgb), .14), rgba(var(--a2-rgb), .06) 60%, transparent); } [data-theme="light"] .eos-filter.is-active { background: #fff; box-shadow: var(--shadow-sm); } /* The glass edge highlight is a light catch on dark; on white it becomes a hairline instead of a glow. */ [data-theme="light"] .card::before { background: linear-gradient(150deg, rgba(var(--tint), .1), transparent 45%); } /* Solid cards read better than translucent ones over a pale backdrop. */ [data-theme="light"] .card, [data-theme="light"] .stat, [data-theme="light"] .auth__card { border-color: rgba(var(--tint), .1); box-shadow: var(--shadow-md); } /* Inputs need a real white field on a light page, not a wash. */ [data-theme="light"] .input, [data-theme="light"] .select, [data-theme="light"] .textarea, [data-theme="light"] .search input, [data-theme="light"] .eos-search input { background: #fff; border-color: rgba(var(--tint), .14); } [data-theme="light"] .input:focus, [data-theme="light"] .select:focus, [data-theme="light"] .textarea:focus, [data-theme="light"] .search input:focus, [data-theme="light"] .eos-search input:focus { background: #fff; } /* The auth headline fades from ink rather than white. */ .auth__headline span { background: linear-gradient(100deg, var(--headline-1) 0%, var(--a1s) 42%, var(--a3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Scrollbars follow the ink colour too. */ [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(var(--tint), .16); background-clip: content-box; } /* ========================================================================== Brand logo The navy body follows --logo-ink so it knocks out to white on dark; the lime accent is fixed, matching the brand sheet. ========================================================================== */ :root, [data-theme="dark"] { --logo-ink: #ffffff; } [data-theme="light"] { --logo-ink: #131428; } .logo { display: inline-flex; align-items: center; gap: .6em; color: var(--logo-ink); line-height: 1; font-size: 17px; } .logo--lg { font-size: 23px; } .logo__mark { width: auto; flex: 0 0 auto; height: 2.05em; /* The mark is taller than it is wide, so lock the ratio explicitly. */ aspect-ratio: 149 / 198; } .logo--markonly .logo__mark { height: 2.4em; } .logo__text { display: flex; flex-direction: column; gap: .2em; min-width: 0; } .logo__word { display: inline-flex; align-items: baseline; font-family: "Poppins", "Inter", "Segoe UI", system-ui, sans-serif; font-size: 1em; letter-spacing: -.005em; white-space: nowrap; } /* "eos" carries the weight; "One" is set light, as in the artwork. */ .logo__eos { position: relative; font-weight: 700; padding-right: .06em; } .logo__one { font-weight: 300; padding-left: .22em; } /* Concentric signal arcs sit behind "eos", centred on its middle letter. */ .logo__arcs { position: absolute; top: 50%; left: 50%; width: 2.55em; height: 2.55em; transform: translate(-50%, -50%); opacity: .5; pointer-events: none; } /* Below the login size the arcs are sub-pixel, so they only add noise. */ .logo--sm .logo__arcs { display: none; } .logo__tag { font-size: .58em; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }