/* ============================================================ Playboy CRM — Dashboard theme layer Three selectable themes for the reports dashboard: data-pb-theme="ink" Editorial Ink (light, green data) data-pb-theme="nightside" Nightside (dark, gold data) data-pb-theme="cream" Cream Editorial (warm, Masthead banners) Integration: put the attribute on or on the dashboard's outermost wrapper, then style the dashboard against the --dash-* variables below. Nothing here uses !important; it is a token layer, not an override sheet. ============================================================ */ /* ---- Webfonts (binaries ship in ./fonts) ------------------- PATHS CHANGED FROM THE HANDOFF, and this is the only edit to this file. The bundle shipped url("assets/fonts/…"), which is resolved relative to THIS FILE — so with the sheet living at public/assets/ it pointed at public/assets/assets/fonts/ and silently fell back to Segoe UI. If a revised handoff is dropped in, re-apply this. ------------------------ */ @font-face{font-family:"Masthead";src:url("fonts/Masthead-Regular-Web.woff") format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Playboy Visuelt";src:url("fonts/PlayboyVisuelt-Regular.otf") format("opentype");font-weight:300 400;font-style:normal;font-display:swap} @font-face{font-family:"Playboy Visuelt";src:url("fonts/PlayboyVisuelt-Medium.ttf") format("truetype");font-weight:500 700;font-style:normal;font-display:swap} /* ---- Brand primitives (from the design system) ------------- */ :root{ --pb-black:#000000; --pb-white:#ffffff; --pb-green:#576D51; /* rgb(87,109,81) primary / data */ --pb-green-600:#4E6249; --pb-green-700:#465741; --pb-green-50:#E6E8E5; --pb-cream:#F0ECDE; /* rgb(240,236,222) */ --pb-cream-100:#F6F4EB; --pb-gold:#FFD400; /* rgb(255,212,0) best-value / top row */ --pb-gold-deep:#DE9D31; /* rgb(222,157,49) sparkle / mark */ --pb-grey-800:#333333; --pb-grey-700:#555555; --pb-grey-600:#727272; --pb-grey-300:#BBBBBB; --pb-grey-200:#D2D2D2; --pb-grey-100:#E8E8E8; --pb-grey-50:#F4F4F4; --pb-error:#E61818; --pb-success:#2A9A26; /* Type ---------------------------------------------------- */ --font-display:"Masthead",Georgia,"Times New Roman",serif; --font-sans:"Playboy Visuelt",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --dash-h1:500 30px/36px var(--font-sans); --dash-h2:500 16px/22px var(--font-sans); --dash-h3:500 15px/20px var(--font-sans); --dash-kpi:500 34px/40px var(--font-sans); --dash-body:400 14px/22px var(--font-sans); --dash-small:400 12px/18px var(--font-sans); --dash-eyebrow-size:10px; --dash-eyebrow-track:.12em; --dash-kpi-track:-.02em; /* Space & shape ------------------------------------------- */ --dash-gap:12px; --dash-pad-card:20px 22px; --dash-pad-page:26px 28px 30px; --dash-radius-card:8px; --dash-radius-pill:64px; --dash-radius-sm:4px; --dash-hairline:1px; /* Motion — quiet, editorial; no bounce ------------------- */ --dash-ease:cubic-bezier(.22,1,.36,1); --dash-dur-enter:500ms; --dash-dur-hover:180ms; --dash-dur-bar:800ms; --dash-dur-line:1400ms; --dash-stagger:60ms; } /* ============================================================ THEME 1 — Editorial Ink (light) The handoff recommended this as the default; the client chose Cream Editorial instead (2026-08-16). PB_THEME_DEFAULT in lib/Theme.php decides. ============================================================ */ [data-pb-theme="ink"]{ --dash-page:var(--pb-grey-50); --dash-card:var(--pb-white); --dash-border:var(--pb-grey-100); --dash-border-strong:var(--pb-grey-200); --dash-ink:var(--pb-black); --dash-ink-2:var(--pb-grey-700); --dash-ink-muted:var(--pb-grey-600); --dash-data-1:var(--pb-green); --dash-data-2:rgba(87,109,81,.55); --dash-data-track:rgba(87,109,81,.10); --dash-mark:var(--pb-gold-deep); --dash-pos:var(--pb-green-700); --dash-pos-bg:rgba(87,109,81,.12); --dash-neg:var(--pb-error); --dash-neg-bg:rgba(230,24,24,.10); --dash-row-hover:var(--pb-cream-100); --dash-card-shadow:none; --dash-card-shadow-hover:0 6px 18px rgba(0,0,0,.08); --dash-card-radius:var(--dash-radius-card); --dash-nav-bg:var(--pb-black); --dash-nav-ink:rgba(255,255,255,.62); --dash-nav-ink-active:var(--pb-white); --dash-nav-underline:var(--pb-gold-deep); --dash-nav-rule:transparent; --dash-chip-bg:var(--pb-white); --dash-chip-border:var(--pb-grey-200); --dash-chip-ink:var(--pb-grey-800); --dash-chip-on-bg:var(--pb-green); --dash-chip-on-ink:var(--pb-white); --dash-title-font:var(--dash-h2); --dash-title-transform:none; --dash-title-track:0; --dash-title-rule:0; --dash-grid-line:var(--pb-grey-100); --dash-axis-line:var(--pb-grey-200); --dash-eyebrow-color:var(--pb-grey-600); } /* ============================================================ THEME 2 — Nightside (dark; green & red lifted for contrast) ============================================================ */ [data-pb-theme="nightside"]{ --dash-page:#0A0A0A; --dash-card:#141414; --dash-border:rgba(255,255,255,.08); --dash-border-strong:rgba(255,255,255,.14); --dash-ink:var(--pb-cream); --dash-ink-2:rgba(240,236,222,.60); --dash-ink-muted:rgba(240,236,222,.45); --dash-data-1:var(--pb-gold-deep); --dash-data-2:rgba(222,157,49,.50); --dash-data-track:rgba(255,255,255,.06); --dash-mark:var(--pb-gold); --dash-pos:#8FB286; /* pb-green lifted for dark ground */ --dash-pos-bg:transparent; --dash-neg:#E8695A; /* pb-error lifted for dark ground */ --dash-neg-bg:transparent; --dash-row-hover:rgba(222,157,49,.07); --dash-card-shadow:none; --dash-card-shadow-hover:0 0 24px rgba(222,157,49,.12); --dash-card-radius:var(--dash-radius-card); --dash-nav-bg:#000000; --dash-nav-ink:rgba(240,236,222,.50); --dash-nav-ink-active:var(--pb-cream); --dash-nav-underline:var(--pb-gold-deep); --dash-nav-rule:rgba(222,157,49,.35); --dash-chip-bg:transparent; --dash-chip-border:rgba(255,255,255,.14); --dash-chip-ink:rgba(240,236,222,.70); --dash-chip-on-bg:var(--pb-gold-deep); --dash-chip-on-ink:#1A1206; --dash-title-font:var(--dash-h2); --dash-title-transform:none; --dash-title-track:0; --dash-title-rule:0; --dash-grid-line:rgba(255,255,255,.07); --dash-axis-line:rgba(255,255,255,.14); --dash-eyebrow-color:rgba(240,236,222,.45); } /* Nightside hover raises a gold border instead of a shadow */ [data-pb-theme="nightside"] .pb-kpi:hover{border-color:rgba(222,157,49,.50)} /* ============================================================ THEME 3 — Cream Editorial (warm paper; Masthead banners) ============================================================ */ [data-pb-theme="cream"]{ --dash-page:var(--pb-cream); --dash-card:var(--pb-white); --dash-border:transparent; --dash-border-strong:var(--pb-grey-100); --dash-ink:var(--pb-black); --dash-ink-2:var(--pb-grey-700); --dash-ink-muted:var(--pb-grey-600); --dash-data-1:var(--pb-green); --dash-data-2:var(--pb-green-600); --dash-data-track:var(--pb-cream); --dash-mark:var(--pb-gold); --dash-pos:var(--pb-green); --dash-pos-bg:transparent; --dash-neg:var(--pb-error); --dash-neg-bg:transparent; --dash-row-hover:var(--pb-cream-100); --dash-card-shadow:0 2px 12px rgba(0,0,0,.05); --dash-card-shadow-hover:0 4px 18px rgba(0,0,0,.08); --dash-card-radius:16px; --dash-nav-bg:var(--pb-white); --dash-nav-ink:var(--pb-grey-600); --dash-nav-ink-active:var(--pb-black); --dash-nav-underline:var(--pb-gold); --dash-nav-rule:var(--pb-grey-200); --dash-chip-bg:var(--pb-white); --dash-chip-border:transparent; --dash-chip-ink:var(--pb-grey-800); --dash-chip-on-bg:var(--pb-black); --dash-chip-on-ink:var(--pb-white); --dash-title-font:400 15px/20px var(--font-display); --dash-title-transform:uppercase; --dash-title-track:.1em; --dash-title-rule:2px; /* black rule under section titles */ --dash-grid-line:var(--pb-cream); --dash-axis-line:var(--pb-black); --dash-eyebrow-color:var(--pb-grey-600); --dash-kpi:500 38px/44px var(--font-sans); --dash-pad-card:24px 26px; } /* Cream draws the sessions line in black ink, not green */ [data-pb-theme="cream"] .pb-chart__line{stroke:var(--pb-black);stroke-width:1.75} [data-pb-theme="cream"] .pb-chart__area{fill:rgba(240,236,222,.9)} /* Cream tints the leading table row gold */ [data-pb-theme="cream"] .pb-table__row--lead{background:rgba(255,212,0,.14)} [data-pb-theme="cream"] .pb-table__row--lead:hover{background:rgba(255,212,0,.24)} /* ============================================================ COMPONENT RECIPES — thin, themeable, no framework ============================================================ */ .pb-dash{background:var(--dash-page);color:var(--dash-ink);font:var(--dash-body);padding:var(--dash-pad-page)} .pb-nav{height:60px;background:var(--dash-nav-bg);border-bottom:var(--dash-hairline) solid var(--dash-nav-rule);display:flex;align-items:center;gap:26px;padding:0 24px} .pb-nav a{font:400 13px/1 var(--font-sans);color:var(--dash-nav-ink);text-decoration:none;transition:color var(--dash-dur-hover) ease} .pb-nav a:hover{color:var(--dash-nav-ink-active)} .pb-nav a[aria-current]{font-weight:500;color:var(--dash-nav-ink-active);padding-bottom:4px;border-bottom:2px solid var(--dash-nav-underline)} .pb-eyebrow{font:400 var(--dash-eyebrow-size)/1.4 var(--font-sans);letter-spacing:var(--dash-eyebrow-track);text-transform:uppercase;color:var(--dash-eyebrow-color)} .pb-banner{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-weight:400;background:var(--pb-black);color:var(--pb-white);padding:6px 12px;display:inline-block} .pb-card{background:var(--dash-card);border:var(--dash-hairline) solid var(--dash-border);border-radius:var(--dash-card-radius);box-shadow:var(--dash-card-shadow);padding:var(--dash-pad-card)} .pb-card__title{margin:0 0 16px;font:var(--dash-title-font);text-transform:var(--dash-title-transform);letter-spacing:var(--dash-title-track);color:var(--dash-ink);border-bottom:var(--dash-title-rule) solid var(--pb-black);padding-bottom:var(--dash-title-rule)} .pb-kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--dash-gap)} .pb-kpi{background:var(--dash-card);border:var(--dash-hairline) solid var(--dash-border);border-radius:var(--dash-card-radius);padding:16px;transition:box-shadow var(--dash-dur-hover) ease,transform var(--dash-dur-hover) ease,border-color var(--dash-dur-hover) ease} .pb-kpi:hover{box-shadow:var(--dash-card-shadow-hover);transform:translateY(-2px)} .pb-kpi__value{font:var(--dash-kpi);letter-spacing:var(--dash-kpi-track);color:var(--dash-ink);margin-top:8px} .pb-kpi__delta{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:3px 9px;border-radius:var(--dash-radius-pill);font:500 11.5px/1 var(--font-sans)} .pb-kpi__delta--up{color:var(--dash-pos);background:var(--dash-pos-bg)} .pb-kpi__delta--down{color:var(--dash-neg);background:var(--dash-neg-bg)} .pb-kpi__note{margin-top:8px;font:400 11.5px/1 var(--font-sans);color:var(--dash-ink-muted)} .pb-chip{font:400 12.5px/1 var(--font-sans);padding:8px 14px;border-radius:var(--dash-radius-pill);background:var(--dash-chip-bg);border:var(--dash-hairline) solid var(--dash-chip-border);color:var(--dash-chip-ink);cursor:pointer;transition:background var(--dash-dur-hover) ease,color var(--dash-dur-hover) ease,border-color var(--dash-dur-hover) ease} .pb-chip:hover{border-color:var(--dash-ink);color:var(--dash-ink)} .pb-chip[aria-pressed="true"],.pb-chip--on{font-weight:500;background:var(--dash-chip-on-bg);color:var(--dash-chip-on-ink);border-color:transparent} .pb-bar{height:9px;background:var(--dash-data-track);border-radius:var(--dash-radius-pill);overflow:hidden;display:block} .pb-bar__fill{display:block;height:100%;background:var(--dash-data-1);border-radius:inherit;transform-origin:left;animation:pb-grow var(--dash-dur-bar) var(--dash-ease) both} .pb-bar__fill--minor{background:var(--dash-data-2)} .pb-table{width:100%;border-collapse:collapse} .pb-table th{font:400 9.5px/1.4 var(--font-sans);letter-spacing:var(--dash-eyebrow-track);text-transform:uppercase;color:var(--dash-eyebrow-color);text-align:left;padding-bottom:8px;border-bottom:var(--dash-hairline) solid var(--dash-border-strong)} .pb-table td{font:400 12.5px/17px var(--font-sans);color:var(--dash-ink);padding:11px 0;border-bottom:var(--dash-hairline) solid var(--dash-border)} .pb-table tbody tr{transition:background 160ms ease} .pb-table tbody tr:hover{background:var(--dash-row-hover)} .pb-table td.num{font-weight:500;text-align:right;font-variant-numeric:tabular-nums} .pb-table td.share{text-align:right;color:var(--dash-data-1)} /* Article links: black text, coloured underline on hover — not red links */ .pb-table a{color:var(--dash-ink);text-decoration:none} .pb-table a:hover{color:var(--dash-data-1);text-decoration:underline} .pb-chart__grid{stroke:var(--dash-grid-line);stroke-width:1} .pb-chart__axis{stroke:var(--dash-axis-line);stroke-width:1} .pb-chart__area{fill:var(--dash-data-track)} .pb-chart__line{fill:none;stroke:var(--dash-data-1);stroke-width:2;stroke-linejoin:round} .pb-chart__peak{fill:var(--dash-mark)} /* ---- Motion ------------------------------------------------ */ @keyframes pb-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes pb-fade{from{opacity:0}to{opacity:1}} @keyframes pb-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes pb-draw{from{stroke-dashoffset:var(--pb-path-len,1150)}to{stroke-dashoffset:0}} .pb-enter{animation:pb-up var(--dash-dur-enter) var(--dash-ease) both} .pb-enter-1{animation-delay:calc(var(--dash-stagger)*1)} .pb-enter-2{animation-delay:calc(var(--dash-stagger)*2)} .pb-enter-3{animation-delay:calc(var(--dash-stagger)*3)} .pb-enter-4{animation-delay:calc(var(--dash-stagger)*4)} .pb-enter-5{animation-delay:calc(var(--dash-stagger)*5)} .pb-chart__line--draw{stroke-dasharray:var(--pb-path-len,1150);animation:pb-draw var(--dash-dur-line) cubic-bezier(.4,0,.2,1) 350ms both} @media (prefers-reduced-motion:reduce){ .pb-enter,.pb-bar__fill,.pb-chart__line--draw{animation:none} .pb-kpi:hover{transform:none} }