/* Deployed copy of /public/maestrox/canvas.css (the design-system
handoff). Source carries an @import url('tokens.css') at the top;
this deployed copy strips that line because layouts tokens
separately. Same pattern as maestrox-components.css and maestrox-
glass.css. Patch the deployed version inline as the portal evolves. */
/* =========================================================================
MAESTROX — System Canvas
The gold gradient backdrop that lives behind the entire portal.
Three layers: gradient, grain, slow drift. Designed so glass components
have something rich to refract.
How to apply: add class="canvas" to on every page.
========================================================================= */
/* =========================================================================
FULL-STRENGTH CANVAS — for hero pages, login, splash, welcome, marketing
========================================================================= */
.canvas {
background-color: #c4a96a;
background-image:
/* Bright cream highlight, upper-left */
radial-gradient(ellipse 70% 60% at 22% 28%, rgba(248, 234, 202, 0.78) 0%, transparent 55%),
/* Warm gold pool, lower-right */
radial-gradient(ellipse 65% 70% at 78% 72%, rgba(168, 122, 70, 0.50) 0%, transparent 55%),
/* Cool darker pool, bottom-left edge */
radial-gradient(ellipse 80% 90% at 12% 92%, rgba(132, 96, 50, 0.32) 0%, transparent 60%),
/* Burnished center band */
radial-gradient(ellipse 100% 45% at 50% 50%, rgba(228, 200, 140, 0.40) 0%, transparent 70%),
/* Base diagonal */
linear-gradient(135deg, #d8c08a 0%, #c4a96a 48%, #a08560 100%);
background-size: 120% 120%;
position: relative;
/* PERF (2026-05-21): dropped `background-attachment: fixed` and the
`canvas-drift 42s` animation. Both were forcing the browser to
repaint a viewport-sized multi-layer radial gradient every frame
(drift) or every scroll pixel (fixed attachment). Combined with
the .canvas::before mix-blend-mode overlay that USED to live
below, hover and scroll interactions chained 4+ paint phases per
interaction. That was the hover-lag Drew flagged after the canvas
system shipped. The "drift" was sub-perceptual anyway. */
}
/* PERF: the .canvas::before grain overlay (mix-blend-mode: overlay on
a position:fixed full-viewport pseudo-element) used to live here.
mix-blend-mode forces a GPU re-composite of the entire blend layer
on every paint underneath, which is the textbook hover-lag pattern.
Removed. If we want texture back, it'll need a different
implementation (e.g. a one-time pre-rendered noise PNG without
blend modes, painted as a low-opacity background-image directly on
the body — no blend mode, no pseudo-element). */
/* =========================================================================
WORKING VARIANT — dialed back ~50% for data-heavy screens
Use class="canvas canvas-working" on Reports, Library, Approvals, etc.
========================================================================= */
.canvas.canvas-working {
background-color: #e6d6b0;
background-image:
radial-gradient(ellipse 70% 60% at 22% 28%, rgba(248, 240, 220, 0.85) 0%, transparent 55%),
radial-gradient(ellipse 65% 70% at 78% 72%, rgba(200, 168, 110, 0.30) 0%, transparent 55%),
radial-gradient(ellipse 80% 90% at 12% 92%, rgba(170, 138, 80, 0.18) 0%, transparent 60%),
radial-gradient(ellipse 100% 45% at 50% 50%, rgba(236, 220, 180, 0.45) 0%, transparent 70%),
linear-gradient(135deg, #ecdbb4 0%, #d8c08a 48%, #c4a96a 100%);
}
/* =========================================================================
DARK CANVAS — same gradient logic, deep oxblood + black register
For sidebar interior pages, focus modals, video pages
========================================================================= */
.canvas.canvas-dark {
background-color: #1a1208;
background-image:
radial-gradient(ellipse 70% 60% at 22% 28%, rgba(200, 169, 94, 0.18) 0%, transparent 55%),
radial-gradient(ellipse 65% 70% at 78% 72%, rgba(122, 31, 36, 0.30) 0%, transparent 55%),
radial-gradient(ellipse 80% 90% at 12% 92%, rgba(80, 50, 25, 0.45) 0%, transparent 60%),
radial-gradient(ellipse 100% 45% at 50% 50%, rgba(60, 40, 20, 0.30) 0%, transparent 70%),
linear-gradient(135deg, #2a1f12 0%, #1a1208 48%, #050402 100%);
}
.canvas.canvas-dark { color: var(--fg-on-dark); }
/* =========================================================================
PORTAL INTEGRATION — let the canvas show through .content / .client-main
The portal's existing .content (admin) and .client-main (client side)
wrap the main column with their own opaque cream backgrounds. Without
this override the canvas gradient renders on but is hidden
under a full-bleed cream box. Make those columns transparent INSIDE
canvas bodies so the gradient breathes through. Existing card-shaped
content (working surfaces) keeps its own opaque background and
remains readable. PR2 of the canvas brief will formalize a
.working-surface helper; this rule is the minimum to let PR1 actually
be visible.
========================================================================= */
.canvas .content,
.canvas .client-main,
.canvas .mx2-main {
background: transparent !important;
}
/* =========================================================================
SIDEBAR DARK-GLASS (PR5 of canvas brief)
First pass used 0.85 opacity which was visually indistinguishable
from the existing solid #0F0F0F sidebar. Dropped to 0.65 so the
gold canvas reads through with noticeable warm tint. The brief's
reference was 0.92 (subtle); we run more transparent because our
default canvas-working palette is lighter cream than the brief's
full-strength gold, so the bleed-through needs to be stronger to
register at all.
Selectors: body.canvas wins specificity over any existing
.mx2-sidebar / .sidebar rules that might also set background
(e.g., mx2.css's .mx2-sidebar { background: #0F0F0F }).
========================================================================== */
body.canvas .mx2-sidebar,
body.canvas .sidebar,
body.canvas aside.mx2-sidebar {
/* Sidebar is sticky + always-visible, so any backdrop-filter here
forces a GPU re-composite of a 220×100vh region on every paint.
That's the hover-lag Drew flagged on 2026-05-21 — every button /
chip hover anywhere on the page triggered a sidebar re-blur.
The 80%-alpha black already reads as the dark gold the design
calls for against the page canvas; the blur was purely cosmetic
and worth dropping. */
background: rgba(10, 8, 5, 0.92) !important;
}
/* =========================================================================
HERO ZONE (PR4 of canvas brief)
Opt-in on dashboard / hub / report-overview page headers. The
padding here lets the gold canvas breathe BEFORE the first working
surface takes over. We add this as an extra class on existing
, so the existing title + greeting +
org-logo markup stays unchanged — this just gives them more room.
========================================================================= */
.hero-zone {
padding: 56px 32px 24px;
position: relative;
z-index: 1;
}
/* Smaller hero on mobile so the gradient doesn't crowd the top of
the viewport on small screens. */
@media (max-width: 720px) {
.hero-zone { padding: 32px 20px 16px; }
}
/* =========================================================================
WORKING SURFACES — opaque cards that float on top of the canvas
Use for tables, KPI grids, lists, forms — anywhere readability matters
========================================================================= */
.working-surface {
background: rgba(255, 252, 244, 0.96);
border: 1px solid rgba(200, 169, 94, 0.22);
border-radius: 8px;
box-shadow:
0 8px 32px rgba(40, 28, 12, 0.12),
0 2px 8px rgba(40, 28, 12, 0.06);
padding: 24px 28px;
}
/* Use a tighter surface for content nested inside another surface */
.working-surface.nested {
background: white;
box-shadow: none;
border-color: rgba(200, 169, 94, 0.14);
padding: 18px 22px;
}
/* =========================================================================
PR2 — Existing card compat layer
The portal already has dozens of card patterns (.mx2-dash-card,
.mx2-kpi, .hub-jumpin-card, .profile-section, etc.) that hold data
on opaque cream backgrounds. The canvas brief calls them "working
surfaces." Rather than a markup sweep across every EJS file (high
risk, lots of merge conflicts), apply the working-surface POLISH
to existing classes via CSS: warmer gold-tinted border + warm
shadow that picks up the canvas behind them. Do NOT touch their
backgrounds, padding, or border-radius — only the visual chrome
that says "this surface is part of the gold canvas system."
Specificity bumped via body.canvas prefix so it beats the
per-card border + shadow rules in mx2.css / client.css / etc.
========================================================================= */
body.canvas .mx2-dash-card,
body.canvas .mx2-kpi,
body.canvas .hub-jumpin-card,
body.canvas .hub-kpi-card,
body.canvas .mx2-card-form,
body.canvas .profile-section,
body.canvas .overview-card,
body.canvas .campaign-card,
body.canvas .po-card,
body.canvas .asset-folder-card {
/* 92% opacity over a slightly cream RGB — the gold canvas refracts
* through subtly so glass overlays (modals, sheets, cmdK) have
* something rich to blur. First pass left cards at 100% opaque which
* meant glass surfaces only had cream to refract — Drew's "why do
* our modals not look like the reference?" diagnosis. Direct readability
* stays — 8% transparency on a near-cream tone is imperceptible on
* its own; the gradient bleed only shows because the body underneath
* has saturated color. */
background: rgba(255, 252, 244, 0.92) !important;
border-color: rgba(200, 169, 94, 0.22) !important;
box-shadow:
0 8px 32px rgba(40, 28, 12, 0.10),
0 2px 8px rgba(40, 28, 12, 0.06) !important;
}
/* On hover, lift slightly + bump the shadow so interactive cards
feel responsive. Existing :hover rules on these cards keep working
alongside this. */
body.canvas .hub-jumpin-card:hover,
body.canvas .hub-kpi-card:hover,
body.canvas .overview-card:hover,
body.canvas .campaign-card:hover,
body.canvas .po-card:hover,
body.canvas .asset-folder-card:hover {
box-shadow:
0 14px 40px rgba(40, 28, 12, 0.14),
0 4px 12px rgba(40, 28, 12, 0.08) !important;
}
/* =========================================================================
HERO ZONE — gradient remains visible, content sits directly on canvas
Use for page headers where the gold should breathe, before the working surface
========================================================================= */
.hero-zone {
padding: 56px 32px 24px;
position: relative;
z-index: 1;
}
.hero-zone .eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(40, 28, 12, 0.75);
margin-bottom: 14px;
}
.hero-zone h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: 44px;
line-height: 1;
letter-spacing: -0.01em;
color: rgba(20, 14, 6, 0.95);
}
.hero-zone h1 em { font-style: italic; color: rgba(40, 28, 12, 0.7); font-weight: 300; }
.hero-zone .sub {
margin-top: 12px;
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: 18px;
color: rgba(20, 14, 6, 0.65);
max-width: 640px;
line-height: 1.45;
}
/* =========================================================================
APP SHELL — sidebar + content layout that lives on the canvas
========================================================================= */
.canvas-shell {
display: grid;
grid-template-columns: 232px 1fr;
min-height: 100vh;
position: relative;
z-index: 1;
}
.canvas-shell .sidebar {
/* See note on body.canvas .mx2-sidebar above — backdrop-filter on
a sticky sidebar that's repainted constantly was the source of
the May 2026 hover-lag regression. Solid 92%-alpha black gives
us the same dark-glass look without the GPU cost. */
background: rgba(10, 8, 5, 0.95);
color: var(--fg-on-dark);
padding: 24px 16px;
border-right: 1px solid rgba(200, 169, 94, 0.18);
}
.canvas-shell .content {
padding: 24px 32px 64px;
overflow-y: auto;
}
/* =========================================================================
REDUCED MOTION
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.canvas { animation: none; }
}
/* =========================================================================
PRINT — kill the gradient so PDFs / printed reports render on a flat
white background. Per the canvas brief's acceptance checklist.
========================================================================= */
@media print {
.canvas,
.canvas.canvas-working,
.canvas.canvas-dark {
background: white !important;
color: black !important;
animation: none !important;
}
.canvas::before { display: none; }
}