lorentz
9658640c04
The soft reset to 77073ba inadvertently staged deletions of all phase 2
and 3 artifacts. This commit restores them from their source commits so
subsequent task commits build on the complete prior-phase foundation:
- components/mobile/{BottomNav,HeaderBar,KpiCardMobile,MoreDrawer,NeedsAttentionStrip,WorkerStatusRow}
- app/mobile/layout.tsx, dashboard/page.tsx, analyzer/page.tsx
- app/api/mobile/dashboard/route.ts
- All .planning/** files from phases 01-04
- CLAUDE.md, app/layout.tsx, app/styles/brand.css, public/manifest.json
193 lines
6.5 KiB
CSS
193 lines
6.5 KiB
CSS
/* === Wulf Consulting brand layer ====================================
|
|
*
|
|
* Authoritative palette per the Logo Standards Guide (docs/StandardsGuide
|
|
* (1).pdf, dated 2013-09-04):
|
|
*
|
|
* Primary blue #0075AD (Pantone 110-7 U)
|
|
* Secondary gray #6D6E70 (Pantone 179-10 U)
|
|
* Primary face Helvetica / Arial — Bold for headers, Light for tagline
|
|
* Tagline "Don't be afraid to cry" (Helvetica Light, gray, 16pt ref.)
|
|
*
|
|
* Typography update (2026-05): the brand-mandated Helvetica/Arial has
|
|
* been replaced with IBM Plex Sans. Plex Sans honors the spirit of the
|
|
* mandate (clean engineered sans, supports a Light weight for the
|
|
* tagline) while loading reliably from Google Fonts; Helvetica/Arial
|
|
* stay in the fallback chain so the look degrades gracefully. Plex
|
|
* Mono carries numeric data (KPIs, IDs, timestamps).
|
|
*
|
|
* Imported once from app/globals.css. The :root overrides below repoint
|
|
* --primary / --ring / --accent / fonts; the rest of the shadcn token
|
|
* graph stays untouched.
|
|
* ==================================================================== */
|
|
|
|
:root {
|
|
/* --- Brand-scoped tokens (do not consume directly from components;
|
|
they exist so we can reason about brand vs. app intent). ---- */
|
|
--wulf-blue: oklch(0.540 0.136 233.3); /* #0075AD */
|
|
--wulf-blue-700: oklch(0.470 0.142 234.5); /* hover / pressed */
|
|
--wulf-blue-300: oklch(0.760 0.090 232); /* tinted fills */
|
|
--wulf-gray: oklch(0.515 0.001 271); /* #6D6E70 */
|
|
--wulf-gray-100: oklch(0.970 0.002 271); /* near-white surface */
|
|
--wulf-gray-300: oklch(0.880 0.002 271); /* borders */
|
|
--wulf-gray-700: oklch(0.380 0.002 271); /* body text on light bg */
|
|
|
|
/* --- App-level overrides: repoint shadcn tokens to Wulf values. ---
|
|
Light theme. --- */
|
|
--primary: var(--wulf-blue);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--accent: var(--wulf-blue);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--ring: var(--wulf-blue);
|
|
--sidebar-primary: var(--wulf-blue);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-ring: var(--wulf-blue);
|
|
|
|
/* Chart slot 2 = Wulf Blue so single-series charts default to brand. */
|
|
--chart-2: var(--wulf-blue);
|
|
|
|
/* Font tokens are wired in app/globals.css (@theme inline) — they
|
|
resolve --font-helvetica and --font-plex-mono variables that are
|
|
supplied by app/layout.tsx via next/font. We don't override them
|
|
here. */
|
|
}
|
|
|
|
.dark {
|
|
/* Slightly lifted blue for dark surfaces — keeps the tone, raises L. */
|
|
--primary: oklch(0.660 0.150 233.3);
|
|
--accent: oklch(0.660 0.150 233.3);
|
|
--ring: oklch(0.660 0.150 233.3);
|
|
--sidebar-primary: oklch(0.660 0.150 233.3);
|
|
--sidebar-ring: oklch(0.660 0.150 233.3);
|
|
--chart-2: oklch(0.660 0.150 233.3);
|
|
}
|
|
|
|
/* === Utility classes ================================================
|
|
*
|
|
* These are the canonical helpers for the dashboard refresh. Prefer
|
|
* them over re-rolling spacing / typography per page.
|
|
* ==================================================================== */
|
|
|
|
@utility num {
|
|
/* Numeric data — tabular nums in the mono face. Use on KPI values,
|
|
table cells, timestamps, IDs. Never wrap full sentences in this. */
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
@utility num-lg {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -0.015em;
|
|
font-size: 1.875rem; /* text-3xl */
|
|
line-height: 2.25rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@utility num-xl {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -0.02em;
|
|
font-size: 2.25rem; /* text-4xl */
|
|
line-height: 2.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@utility metric-label {
|
|
/* Pair with .num / .num-lg. 11px uppercase tracked label sitting
|
|
above a metric value. */
|
|
font-size: 0.6875rem; /* 11px */
|
|
line-height: 1rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
@utility surface-brand {
|
|
background-color: var(--wulf-gray-100);
|
|
}
|
|
|
|
@utility surface-brand-ink {
|
|
background-color: var(--wulf-gray);
|
|
color: oklch(0.985 0 0);
|
|
}
|
|
|
|
@utility rule-brand {
|
|
/* The 2px Wulf-blue rule used under PageHeader when accent={true}.
|
|
Echoes the standards-guide blue header band. */
|
|
border-bottom: 2px solid var(--wulf-blue);
|
|
}
|
|
|
|
@utility text-chrome {
|
|
/* Sidebar / chrome text. Use for nav text, table column headers, and
|
|
anywhere the brand gray should carry weight without going full ink. */
|
|
color: var(--wulf-gray);
|
|
}
|
|
|
|
@utility border-chrome {
|
|
border-color: var(--wulf-gray-300);
|
|
}
|
|
|
|
@utility tagline {
|
|
/* Footer tagline. Helvetica Light, gray, 12px, gentle tracking.
|
|
Do NOT use this anywhere except the page footer line. */
|
|
font-family: var(--font-sans);
|
|
font-weight: 300;
|
|
color: var(--wulf-gray);
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
/* === Safe-area insets =================================================
|
|
*
|
|
* Opt-in padding helpers for sticky top / fixed bottom bars on devices
|
|
* with notches, dynamic islands, or gesture home indicators. Pair with
|
|
* the viewport-fit=cover viewport meta (set in app/layout.tsx) — without
|
|
* that, env(safe-area-inset-*) resolves to 0 and these utilities are
|
|
* no-ops, which is the desired fallback on non-PWA / non-mobile contexts.
|
|
*
|
|
* Usage:
|
|
* <header class="sticky top-0 pt-safe ..."> // header clears notch
|
|
* <nav class="fixed bottom-0 pb-safe ..."> // bottom bar clears home bar
|
|
*
|
|
* Closes PWA-04 (REQUIREMENTS.md) and ROADMAP Phase 1 SC #3.
|
|
* ==================================================================== */
|
|
|
|
@utility pt-safe {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
|
|
@utility pb-safe {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* === Wolf-mark watermark ============================================
|
|
*
|
|
* Apply .has-mark-watermark to a positioned container; place a child
|
|
* with class `mark-watermark` inside. The child stays behind content
|
|
* via z-index, anchored to the right edge.
|
|
* ==================================================================== */
|
|
|
|
@utility has-mark-watermark {
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* The child class can't be a `@utility` (it's only meaningful in the
|
|
parent context), so it's a plain rule. */
|
|
.mark-watermark {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
inset-inline-end: 1.5rem;
|
|
z-index: -1;
|
|
opacity: 0.04;
|
|
pointer-events: none;
|
|
height: 100%;
|
|
aspect-ratio: 412 / 290; /* W mark intrinsic ratio */
|
|
color: var(--wulf-blue);
|
|
}
|
|
|
|
.dark .mark-watermark {
|
|
opacity: 0.06;
|
|
}
|