mirror of
https://github.com/luxfi/financial.git
synced 2026-10-30 16:55:56 +00:00
zeekayandHanzo Dev
4d4fa23382
The demo tenant conceit is gone: mockups and the six animated screens brand as Lux with the triangle mark. The site drops Zen for the brand faces — Lux Sans for text, Lux Display for the hero, both vendored until @luxfi/font is on the registry. Screens record on pure black, and the showcase leads with a full-width frame. Co-authored-by: Hanzo Dev <[email protected]>
217 lines
7.2 KiB
CSS
217 lines
7.2 KiB
CSS
/* Shared design system for animated product screens.
|
|
Recorded at 1440x900, output ~1280x800 mp4. Dark, Triangle demo tenant. */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
|
|
|
|
@font-face {
|
|
font-family: 'Lux Sans';
|
|
src: url('../public/fonts/LuxSans-Book.woff2') format('woff2');
|
|
font-weight: 400;
|
|
}
|
|
@font-face {
|
|
font-family: 'Lux Sans';
|
|
src: url('../public/fonts/LuxSans-Medium.woff2') format('woff2');
|
|
font-weight: 500 800;
|
|
}
|
|
@font-face {
|
|
font-family: 'Lux Display';
|
|
src: url('../public/fonts/LuxDisplay-Medium.woff2') format('woff2');
|
|
font-weight: 500;
|
|
}
|
|
@font-face {
|
|
font-family: 'Lux Display';
|
|
src: url('../public/fonts/LuxDisplay-Bold.woff2') format('woff2');
|
|
font-weight: 700;
|
|
}
|
|
|
|
:root {
|
|
--bg: #000000;
|
|
--panel: #0a0a0b;
|
|
--panel2: #101012;
|
|
--line: rgba(255, 255, 255, 0.07);
|
|
--line2: rgba(255, 255, 255, 0.12);
|
|
--ink: rgba(255, 255, 255, 0.92);
|
|
--ink2: rgba(255, 255, 255, 0.55);
|
|
--ink3: rgba(255, 255, 255, 0.32);
|
|
--gold: #d4af37;
|
|
--gold2: #b8960c;
|
|
--green: #34d399;
|
|
--red: #f87171;
|
|
--blue: #60a5fa;
|
|
--mono: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html, body {
|
|
width: 1440px;
|
|
height: 900px;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: 'Lux Sans', -apple-system, sans-serif;
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ambient glow */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(800px 400px at 85% -10%, rgba(212, 175, 55, 0.07), transparent 60%),
|
|
radial-gradient(700px 500px at -10% 110%, rgba(96, 165, 250, 0.05), transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.app { display: flex; height: 100%; position: relative; }
|
|
|
|
/* ── Sidebar ─────────────────────────────── */
|
|
.side {
|
|
width: 232px;
|
|
flex-shrink: 0;
|
|
border-right: 1px solid var(--line);
|
|
background: var(--panel);
|
|
padding: 22px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 2px 10px 20px;
|
|
}
|
|
.brand-mark {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #ffffff 0%, var(--gold2) 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #000;
|
|
font-size: 13px;
|
|
}
|
|
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 10px;
|
|
border-radius: 8px;
|
|
color: var(--ink2);
|
|
font-weight: 500;
|
|
font-size: 13.5px;
|
|
}
|
|
.nav-item.active { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
|
|
.nav-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
|
|
.side .foot {
|
|
margin-top: auto;
|
|
padding: 10px;
|
|
font-size: 11.5px;
|
|
color: var(--ink3);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
.env-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
|
|
|
|
/* ── Main ────────────────────────────────── */
|
|
.main { flex: 1; padding: 26px 32px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
|
|
.topbar { display: flex; align-items: center; justify-content: space-between; }
|
|
.topbar h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
|
|
.topbar .who {
|
|
display: flex; align-items: center; gap: 10px;
|
|
color: var(--ink2); font-size: 12.5px;
|
|
}
|
|
.avatar {
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
background: linear-gradient(135deg, #ffffff, var(--gold2));
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: #000; font-size: 11px; font-weight: 700;
|
|
}
|
|
.pill {
|
|
padding: 4px 10px; border-radius: 99px;
|
|
border: 1px solid var(--line2);
|
|
font-size: 11px; font-weight: 600; color: var(--ink2);
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
}
|
|
.pill .env-dot { width: 6px; height: 6px; }
|
|
|
|
/* ── Cards / stats ───────────────────────── */
|
|
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
|
|
.card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 18px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.card .label { font-size: 11.5px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
.card .value { font-size: 26px; font-weight: 750; margin-top: 8px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
|
|
.card .delta { font-size: 12px; font-weight: 600; margin-top: 6px; color: var(--green); }
|
|
.card .delta.down { color: var(--red); }
|
|
|
|
/* ── Table ───────────────────────────────── */
|
|
.table { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; flex: 1; }
|
|
.table .thead, .row {
|
|
display: grid;
|
|
padding: 12px 18px;
|
|
gap: 12px;
|
|
align-items: center;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.table .thead {
|
|
font-size: 11px; font-weight: 650; color: var(--ink3);
|
|
text-transform: uppercase; letter-spacing: 0.07em;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.row { border-bottom: 1px solid var(--line); font-size: 13px; }
|
|
.row:last-child { border-bottom: none; }
|
|
.row .sub { color: var(--ink3); font-size: 11.5px; margin-top: 2px; }
|
|
.tag {
|
|
display: inline-flex; align-items: center; gap: 5px;
|
|
padding: 3px 9px; border-radius: 99px;
|
|
font-size: 11px; font-weight: 600; width: fit-content;
|
|
}
|
|
.tag.ok { background: rgba(52, 211, 153, 0.12); color: var(--green); }
|
|
.tag.wait { background: rgba(212, 175, 55, 0.12); color: var(--gold); }
|
|
.tag.info { background: rgba(96, 165, 250, 0.12); color: var(--blue); }
|
|
.tag.bad { background: rgba(248, 113, 113, 0.12); color: var(--red); }
|
|
|
|
.mono { font-family: var(--mono); font-size: 12.5px; }
|
|
|
|
/* ── Motion primitives (JS adds .in) ─────── */
|
|
.fx { opacity: 0; transform: translateY(10px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
|
|
.fx.in { opacity: 1; transform: none; }
|
|
.fx-pop { opacity: 0; transform: scale(0.96); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
|
|
.fx-pop.in { opacity: 1; transform: scale(1); }
|
|
.fx-row { opacity: 0; transform: translateX(-8px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
|
|
.fx-row.in { opacity: 1; transform: none; }
|
|
|
|
.flash { animation: rowflash 1.6s ease-out; }
|
|
@keyframes rowflash {
|
|
0% { background: rgba(212, 175, 55, 0.14); }
|
|
100% { background: transparent; }
|
|
}
|
|
|
|
.shimmer {
|
|
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 2.4s linear infinite;
|
|
}
|
|
@keyframes shimmer { to { background-position: -200% 0; } }
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
|
|
50% { box-shadow: 0 0 22px rgba(212, 175, 55, 0.25); }
|
|
}
|
|
|
|
/* chart svg */
|
|
.chart-line { fill: none; stroke: url(#goldgrad); stroke-width: 2.5; stroke-linecap: round; }
|
|
.chart-fill { fill: url(#goldfill); opacity: 0.9; }
|