/* RAISE.BAI — Realize intelligence dashboard. A premium, theme-switchable surface (dark default, light ready). Scoped under .rzb; theme flips via [data-rzb-theme]. Brand gold (#E5B45A) is the accent across both themes. Charts render with ECharts; the chart palette mirrors these tokens (see the template's JS theme). */ .rzb { /* light only — dark mode removed */ --rzb-bg: #F3EEE4; --rzb-bg-2: #EFE8DB; --rzb-panel: #EAE3D6; /* sand */ --rzb-panel-2: #F1EBDF; /* lighter sand — inner tiles */ --rzb-line: rgba(22, 20, 18, 0.10); --rzb-line-2: rgba(22, 20, 18, 0.06); --rzb-ink: #1B1610; --rzb-ink-2: #5A5044; --rzb-muted: #8A7F70; --rzb-gold: #701F30; --rzb-gold-2: #8E2A3E; --rzb-teal: #6F8578; --rzb-bordeaux:#A34E52; --rzb-plum: #6E4658; --rzb-grid: rgba(22, 20, 18, 0.07); --rzb-shadow: 0 1px 2px rgba(22,20,18,.05), 0 18px 40px -26px rgba(22,20,18,.30); --rzb-glow: 0 0 0 1px rgba(184,134,43,0.20), 0 18px 40px -24px rgba(184,134,43,0.22); --rzb-radius: 18px; font-family: var(--sl-sans, 'Jost', system-ui, sans-serif); color: var(--rzb-ink); background: transparent; border-radius: 22px; } .rzb * { box-sizing: border-box; } /* The sculpted background + frosted topbar/sidebar/cards are global (seller.css). Light theme only. */ /* The frosted-glass main panel (border + blur) is now global (seller.css). Realize's own padding comes from .rzb-canvas, so drop the panel padding. */ .sl-realize .sl-main { padding: 0; overflow: hidden; } .rzb-canvas { min-height: 100%; padding: 26px 30px 44px; background: transparent; } /* header */ .rzb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; } .rzb-eyebrow { font-family: var(--sl-mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rzb-gold); } .rzb-title { font-family: var(--sl-serif, 'Bodoni Moda', serif); font-weight: 600; font-size: 32px; letter-spacing: 0.01em; margin: 8px 0 4px; color: var(--rzb-ink); } .rzb-sub { font-size: 14px; color: var(--rzb-ink-2); margin: 0; max-width: 60ch; } .rzb-head-actions { display: inline-flex; align-items: center; gap: 10px; } /* theme toggle */ .rzb-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; cursor: pointer; background: var(--rzb-panel); border: 1px solid var(--rzb-line); color: var(--rzb-ink-2); font: inherit; font-size: 13px; font-weight: 500; transition: border-color .15s, color .15s, background .15s; } .rzb-toggle:hover { color: var(--rzb-ink); border-color: var(--rzb-gold); } .rzb-toggle svg { width: 16px; height: 16px; } .rzb-toggle i { font-size: 15px; } .rzb-toggle .rzb-moon { display: inline-flex; } .rzb-toggle .rzb-sun { display: none; } .rzb[data-rzb-theme="light"] .rzb-toggle .rzb-moon { display: none; } .rzb[data-rzb-theme="light"] .rzb-toggle .rzb-sun { display: inline-flex; } /* grid */ /* minmax(0, 1fr), not 1fr: a bare 1fr floors at the column's min-content, so one wide card pushes the whole grid past the viewport instead of letting its own content scroll. */ .rzb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; } /* Every card is a soft clay tile — sage-turquoise fading to cream, varied per card so neighbours never match. Matte, both themes. */ .rzb-card { --rzb-ink: #4A4640; --rzb-ink-2: #6E675C; --rzb-muted: #A79E90; --rzb-bg-2: #E7E3D9; --rzb-line-2: rgba(120, 114, 100, 0.16); position: relative; min-width: 0; border: 0; border-radius: 30px; padding: 22px 22px 16px; background: linear-gradient(150deg, #BEC5BC 0%, #E5E2D8 42%); box-shadow: -13px 11px 15px -4px rgba(120, 122, 112, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* every card sits somewhere between sage #91A099 and cream #E5E2D8 */ .rzb-card:nth-child(4n+1) { background: linear-gradient(150deg, #A8B2AA 0%, #DEDACE 3%); } .rzb-card:nth-child(4n+2) { background: linear-gradient(150deg, #CFD3C8 0%, #E5E2D8 50%); } .rzb-card:nth-child(4n+3) { background: linear-gradient(155deg, #B4BCB2 0%, #E2DED3 44%); } .rzb-card:nth-child(4n) { background: linear-gradient(148deg, #C0C7BD 0%, #E5E2D8 46%); } /* Corner cream pin + title clearance — only on cards that have a header. */ .rzb-card-head { padding-left: 34px; } .rzb-card:has(.rzb-card-head)::before { content: ''; position: absolute; top: 20px; left: 22px; width: 21px; height: 21px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #F6EFE2 0%, #E4D8C3 55%, #CDBFA6 100%); box-shadow: 2px 3px 6px rgba(120, 110, 92, 0.42), inset -2px -2px 4px rgba(150, 138, 116, 0.5), inset 2px 2px 3px rgba(255, 255, 255, 0.85); } /* The download tile carries one link per template, so it is a plain block rather than a single anchor. */ .rzb-drop--links { cursor: default; } .rzb-drop-links { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; } .rzb-drop-links a { font-size: 12px; font-weight: 600; color: var(--rzb-gold); text-decoration: underline; text-underline-offset: 2px; } .rzb-drop-links a:hover { color: var(--rzb-ink); } /* custom legend — bumpy 3D dots matching the corner pin, coloured per item */ .rzb-clay-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 4px; } .rzb-clay-legend span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sl-sans, sans-serif); font-size: 11.5px; color: #8A8377; } .rzb-clay-legend i { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 72%, #fff), var(--c) 88%); box-shadow: 1px 2px 4px rgba(80, 74, 62, 0.4), inset -1px -1px 2px rgba(0, 0, 0, 0.28), inset 1px 1px 2px rgba(255, 255, 255, 0.6); } .rzb-col-3 { grid-column: span 3; } .rzb-col-4 { grid-column: span 4; } .rzb-col-5 { grid-column: span 5; } .rzb-col-6 { grid-column: span 6; } .rzb-col-7 { grid-column: span 7; } .rzb-col-8 { grid-column: span 8; } .rzb-col-12 { grid-column: span 12; } .rzb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .rzb-card-title { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--rzb-ink); } .rzb-card-meta { font-family: var(--sl-mono, monospace); font-size: 11px; color: var(--rzb-muted); text-transform: uppercase; letter-spacing: 0.1em; } /* KPI tile */ .rzb-kpi { display: flex; flex-direction: column; gap: 4px; } .rzb-kpi__label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rzb-ink-2); } .rzb-kpi__ico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(142,42,62,0.14); color: var(--rzb-gold); flex: none; } .rzb-kpi__ico svg { width: 16px; height: 16px; } .rzb-kpi__ico i { font-size: 15px; } .rzb-kpi__val { font-family: var(--sl-mono, monospace); font-weight: 700; font-size: 26px; color: var(--rzb-ink); letter-spacing: -0.01em; margin-top: 6px; } .rzb-kpi__val em { font-style: normal; color: var(--rzb-gold); } .rzb-kpi__delta { font-size: 12px; font-weight: 600; } .rzb-up { color: var(--rzb-teal); } .rzb-down { color: var(--rzb-bordeaux); } /* chart mount */ .rzb-chart { width: 100%; } /* detailed buyer information — three-column profile */ .rzb-buyer { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 22px; align-items: start; } .rzb-buyer__sub { font-family: var(--sl-mono, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rzb-muted); margin-bottom: 6px; } .rzb-buyer__stats { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .rzb-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 11px; background: var(--rzb-bg-2); } .rzb-stat span { font-size: 12px; color: var(--rzb-ink-2); } .rzb-stat b { font-family: var(--sl-mono, monospace); font-size: 15px; color: var(--rzb-ink); font-weight: 700; } .rzb-buyer__name { font-family: var(--sl-serif, 'Bodoni Moda', serif); font-size: 18px; font-weight: 600; color: var(--rzb-ink); margin-bottom: 8px; } @media (max-width: 1100px) { .rzb-buyer { grid-template-columns: minmax(0, 1fr); } } /* market performance — grouped bars + totals */ .rzb-mperf { display: grid; grid-template-columns: 1fr 268px; gap: 24px; align-items: center; } .rzb-mperf__totals { display: flex; flex-direction: column; gap: 9px; } .rzb-mperf__yr { font-family: var(--sl-mono, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rzb-muted); margin: 6px 0 1px; } .rzb-mperf__totals .rzb-stat b { color: var(--rzb-teal); } @media (max-width: 1100px) { .rzb-mperf { grid-template-columns: minmax(0, 1fr); } } /* seller comparison — radar + recommended targets */ .rzb-cmp { display: grid; grid-template-columns: 1fr 288px; gap: 24px; align-items: center; } .rzb-cmp__reco { display: flex; flex-direction: column; gap: 7px; } .rzb-cmp__head { font-family: var(--sl-mono, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rzb-teal); margin-bottom: 3px; } .rzb-cmp__reco .rzb-stat b { color: var(--rzb-teal); font-size: 13px; } @media (max-width: 1100px) { .rzb-cmp { grid-template-columns: minmax(0, 1fr); } } /* dotted map (reused SVG, recoloured) */ .rzb-map { position: relative; } .rzb-map svg { width: 100%; height: auto; display: block; } .rzb-map__legend { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; } .rzb-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--rzb-ink-2); } .rzb-leg i { width: 9px; height: 9px; border-radius: 50%; } /* table */ .rzb-table { width: 100%; border-collapse: collapse; } .rzb-table th { text-align: left; font-family: var(--sl-mono, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rzb-muted); font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--rzb-line-2); } .rzb-table td { padding: 11px 12px; font-size: 13px; color: var(--rzb-ink); border-bottom: 1px solid var(--rzb-line-2); } .rzb-table tr:last-child td { border-bottom: 0; } .rzb-table .rzb-num { font-family: var(--sl-mono, monospace); text-align: right; } .rzb-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; } .rzb-pill--up { background: rgba(111,133,120,0.16); color: var(--rzb-teal); } .rzb-pill--down { background: rgba(163,78,82,0.16); color: var(--rzb-bordeaux); } .rzb-pill--gold { background: rgba(142,42,62,0.16); color: var(--rzb-gold); } .rzb-pill--neutral { background: rgba(22,20,18,0.06); color: var(--rzb-muted); } @media (max-width: 1100px) { .rzb-col-3 { grid-column: span 6; } .rzb-col-4, .rzb-col-5 { grid-column: span 6; } .rzb-col-7, .rzb-col-8 { grid-column: span 12; } } @media (max-width: 680px) { .rzb-canvas { padding: 18px 14px 30px; } .rzb-col-3, .rzb-col-4, .rzb-col-5, .rzb-col-6 { grid-column: span 12; } } /* Upload card — client & order lists (top of the dashboard) */ .rzb-upload-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .rzb-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 16px; border-radius: 14px; text-align: center; cursor: pointer; border: 1.5px dashed var(--rzb-line); background: var(--rzb-bg-2); color: var(--rzb-ink-2); box-shadow: 0 8px 16px -6px rgb(84 104 104 / 55%), 0 1px 3px rgba(22, 20, 18, .12); position: relative; text-decoration: none; transition: border-color .15s, background .15s; } .rzb-drop:hover { border-color: var(--rzb-gold); background: rgba(142,42,62,.08); } .rzb-drop i { font-size: 22px; color: var(--rzb-gold); } .rzb-drop-title { font-weight: 600; font-size: 14px; color: var(--rzb-ink); } .rzb-drop-hint { font-size: 12px; color: var(--rzb-muted); max-width: 26ch; } .rzb-drop.has-file { border-style: solid; border-color: var(--rzb-teal); background: rgba(52,183,185,.07); } .rzb-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } @media (max-width: 900px) { .rzb-upload-grid { grid-template-columns: minmax(0, 1fr); } } .rzb-upload-foot { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 16px; } .rzb-upload-note { font-size: 12px; color: var(--rzb-muted); margin-right: auto; } .rzb-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 12px; border: 0; cursor: pointer; font-family: var(--sl-sans, sans-serif); font-size: 14px; font-weight: 600; line-height: 1; background: #6E4658; color: #fff; box-shadow: 0 8px 16px -6px rgba(90, 46, 69, .55), 0 1px 3px rgba(22, 20, 18, .12); transition: transform .12s, box-shadow .15s, opacity .15s; } .rzb-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -6px rgba(90, 46, 69, .6), 0 1px 3px rgba(22, 20, 18, .12); } .rzb-btn:active { transform: translateY(1px); } .rzb-btn:disabled { opacity: .75; cursor: default; } .rzb-btn i { font-size: 15px; } .rzb-btn.is-busy i { animation: rzb-spin 1s linear infinite; } @keyframes rzb-spin { to { transform: rotate(360deg); } } /* Card head with a link beside the meta — the two sit together on the right rather than being spread apart by the head's space-between. */ .rzb-head-aside { display: inline-flex; align-items: center; gap: 16px; } .rzb-guide-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sl-sans, sans-serif); font-size: 12.5px; font-weight: 600; color: var(--rzb-gold); text-decoration: none; } .rzb-guide-link:hover { text-decoration: underline; } .rzb-guide-link i { font-size: 12px; } /* ── Order-list upload ─────────────────────────────────────────── The order dropzone is a
wrapping a