/* ============================================================ Phase 2 — Dashboard body overrides (≥1024px) ------------------------------------------------------------ Flatten the unified dashboard's dark glass hero + gradient surfaces into the new light, token-driven design language: - Plain page-bg hero (no dark card) - White KPI tiles with stat-card tier hierarchy - Amber setup banner instead of three onboarding cards - Sentence-case labels >12px, micro-labels ≤11px stay UPPER - Tabular-nums monospace for values + dates Mobile (≤1023px) keeps the existing styling — gated below. No hex codes here; everything routes through :root tokens. ============================================================ */ @media (min-width: 1024px) { /* ── Page scrollbar on the left side (desktop only). Trick: set to RTL, then explicitly set back to LTR so all content reads left-to-right. The browser renders the html-level scrollbar on whichever side the html's direction puts it — RTL = left edge. ─────────── */ html { direction: rtl !important; } body { direction: ltr !important; } /* ── Flat page background — kill the rainbow radial-gradients from light.css. Solid soft-grey only, no glow blobs. ── */ body { background: var(--bg) !important; background-image: none !important; background-attachment: scroll !important; } /* The legacy `.ud-page` wrapper carries a 22px border-radius + box-shadow that renders a faint "second card" outline around the entire dashboard content area. The wrapper should be invisible — only its child cards should show. */ .main .ud-page { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 1rem 1.25rem 2rem !important; max-width: none !important; } /* ── Mono utility (also used by Phase 3 pages) ─────────────── */ body .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* ── Hero: kill the dark card; use the page bg ─────────────── */ .main .ud-page > .ud-hero-v2 { background: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 1rem !important; overflow: visible !important; } .main .ud-hero-v2::before, .main .ud-hero-v2::after { display: none !important; } .main .ud-hero-v2 .ud-hero-v2-top { padding: 0 !important; background: transparent !important; border: none !important; } .main .ud-hero-v2 .ud-hero-v2-greet, .main .ud-hero-v2 .ud-hero-v2-greet *, .main .ud-hero-v2 .ud-hero-v2-title { color: var(--text) !important; } .main .ud-hero-v2 .ud-hero-v2-title { font-family: 'Public Sans', 'Public Sans', sans-serif !important; font-size: 32px !important; font-weight: 700 !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; text-transform: none !important; margin: 0 !important; } .main .ud-hero-v2 .ud-hero-v2-sub { color: var(--text-muted) !important; font-size: 13px !important; margin-top: 4px !important; } /* ── KPI tiles: flat white cards with tier hierarchy ───────── */ .main .ud-page .ud-hero-stats { background: transparent !important; padding: 0 !important; margin: 0.75rem 0 1rem !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 12px !important; /* The legacy template uses translateY(40%) so the row overlaps the dark hero card. We've made the hero transparent, so the transform now just creates a phantom gap. Reset it. */ transform: none !important; position: static !important; } .main .ud-hero-stats .ud-hero-stat { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 16px 18px !important; /* The legacy stat tile carries a heavy drop-shadow designed to float above the dark hero. With the new flat layout it reads as a duplicate card edge — kill it. */ box-shadow: none !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } /* Same fix for the parent hero card itself — bottom shadow leaked through after we made the gradient bg transparent. Also nuke border/border-radius so the rounded glass shape doesn't leave a faint outline on the page bg. */ .main .ud-page > .ud-hero-v2 { box-shadow: none !important; overflow: visible !important; margin-bottom: 1rem !important; border: none !important; border-radius: 0 !important; } .main .ud-page > .ud-hero-v2::before, .main .ud-page > .ud-hero-v2::after { display: none !important; } /* Hero top row: greeting left, period tabs right. Tabs sit ABOVE the KPI cards so the user can flip the time scope without scrolling. */ .main .ud-hero-v2 .ud-hero-v2-top { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 1rem !important; flex-wrap: wrap !important; margin-bottom: 1rem !important; } .main .ud-hero-v2 .ud-period-tabs { margin: 0 !important; flex-shrink: 0; } .main .ud-hero-stats .ud-hero-stat-label { color: var(--text-muted) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; order: 1; } .main .ud-hero-stats .ud-hero-stat-num { color: var(--text) !important; font-family: var(--font-mono); font-size: 28px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; font-variant-numeric: tabular-nums; line-height: 1.1 !important; order: 2; } .main .ud-hero-stats .ud-hero-stat--accent .ud-hero-stat-num { color: var(--text) !important; } /* ── Period tabs: clean text tabs above the dashlets ───────── */ .main .ud-period-tabs { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 1rem !important; gap: 4px !important; box-shadow: none !important; } .main .ud-period-tab { background: transparent !important; border: 1px solid transparent !important; color: var(--text-muted) !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 14px !important; border-radius: var(--radius-md) !important; text-transform: none !important; } .main .ud-period-tab:hover { background: var(--panel-soft) !important; color: var(--text) !important; } .main .ud-period-tab.is-active { background: var(--panel) !important; border-color: var(--border) !important; color: var(--text) !important; } /* ── Welcome trial card → amber setup banner ───────────────── */ .main .ud-welcome-card { background: var(--amber-bg) !important; border: 1px solid var(--amber-text) !important; box-shadow: none !important; border-radius: var(--radius-lg) !important; padding: 14px 18px !important; color: var(--amber-text) !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 16px !important; } .main .ud-welcome-card::before, .main .ud-welcome-card::after { display: none !important; } .main .ud-welcome-card .ud-welcome-trial-pill, .main .ud-welcome-card .ud-welcome-title, .main .ud-welcome-card .ud-welcome-body, .main .ud-welcome-card .ud-welcome-feature, .main .ud-welcome-card .ud-welcome-foot, .main .ud-welcome-card strong { color: var(--amber-text) !important; background: transparent !important; } .main .ud-welcome-card .ud-welcome-title { font-size: 16px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; margin: 0 !important; flex: 1 1 240px !important; } .main .ud-welcome-card .ud-welcome-body, .main .ud-welcome-card .ud-welcome-foot { font-size: 13px !important; margin: 0 !important; flex: 1 1 100% !important; line-height: 1.45 !important; } .main .ud-welcome-card .ud-welcome-features { display: none !important; /* hide the 8-feature grid; banner stays compact */ } .main .ud-welcome-card .ud-welcome-trial-pill { background: var(--panel) !important; color: var(--amber-text) !important; border: 1px solid var(--amber-text) !important; padding: 4px 10px !important; border-radius: var(--radius-pill) !important; font-size: 11px !important; letter-spacing: 0.02em !important; } .main .ud-welcome-card .ud-welcome-dismiss { /* Drop the absolute positioning the inline CSS sets so the button joins the flex row and the body text stops sliding under it. Push to the far right via margin-left: auto. */ position: static !important; top: auto !important; right: auto !important; margin-left: auto !important; flex: 0 0 auto !important; color: var(--amber-text) !important; background: transparent !important; border-color: var(--amber-text) !important; } /* Reserve full-width row for the body so its left edge doesn't collide with the dismiss chip on narrow viewports. */ .main .ud-welcome-card .ud-welcome-body { padding-right: 0 !important; } /* ── Onboarding tiles: flatten gradients to white cards ────── */ .main .ud-onboard-tile { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; } .main .ud-onboard-tile::before, .main .ud-onboard-tile::after { display: none !important; } .main .ud-onboard-title { color: var(--text) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; } .main .ud-onboard-desc { color: var(--text-muted) !important; font-size: 13px !important; } .main .ud-onboard-cta { background: var(--text) !important; color: white !important; border-radius: var(--radius-md) !important; font-size: 12px !important; text-transform: none !important; letter-spacing: 0 !important; } /* ── All other dashlet cards: white panel + soft border ────── */ .main .ud-page .ud-card, .main .ud-page section[class*="ud-"]:not(.ud-hero-v2):not(.ud-welcome-card) > .ud-card, .main .ud-page .ud-dashlet, .main .ud-page .pnl-card, .main .ud-page .widget-card { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Sentence-case ANY UPPERCASE label larger than 12px ────── */ .main .ud-page :where(h1, h2, h3, h4, .ud-card-title, .widget-title, .ud-onboard-title) { text-transform: none !important; letter-spacing: -0.01em; } /* ── Mono numerals in stat-style elements (covers existing markup that hasn't been wrapped in .mono yet) ────────── */ .main .ud-page :where(.ud-stat-num, .ud-hero-stat-num, .pnl-value, .widget-stat-num) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } }