/* pn-pitch-device-def-20260920.css — Tracey, CEO 2026-09-20. ============================================================================================= CEO verbatim: "keep background same or add some drama but right now it still looks like a full screen page give some definition — also ensure key action appear on ipad page without scrolling." Loads AFTER pn-ds.css (genuinely last) on purpose — both fixes here must out-rank every earlier sheet, and neither one touches the worn-look/theme-pack system. ── ASK 1 · THE DEVICE HAS NO DEFINITION ON THE PITCH ──────────────────────────────────────── MEASURED at 1440x900: `.dev`/`.screen` geometry is IDENTICAL office vs pitch (CEO-74 keeps it that way on purpose — the pitch is art-directed and must never wear the equipped look, `PN_WEAR_VIEWS` in script-01.js does not include "pitch" and stays untouched here). What was missing is a LIGHT edge: the base `.dev` shadow (`_before.css`/`pn-system-v4.css`) is `rgba(28,22,12,.34)` — a warm-black shadow that is visually identical to the near-black pitch room behind it, so the device reads as a flat rectangle on a flat page. This is DEVICE CHROME ONLY: a rim-light top edge (as if lit from a desk lamp), a real dark cast shadow with body (contrast against the room, not more black-on-black), and a faint warm edge-glow that reads as screen bleed. The ROOM/backdrop is untouched — same near-black surround, same marble/walnut desk texture, same PN_WEAR_VIEWS gate. Scoped to `[data-view="pitch"]` only. ── ASK 2 · THE PITCH DOCK ──────────────────────────────────────────────────────────────────── Chrome for `#pn-pitchdock`, built by `pnPitchDock()` in script-01.js. Anchored on the same `--pn-glass-l/-r/-b` rect `pnGlassVars()` already publishes for every other piece of cased chrome (REPORT tab, theme chip) — not a fourth positioning mechanism. Bottom-CENTERED and inset from both side edges on purpose: the REPORT tab rides the right edge at mid-height and the theme chip sits in the bottom-right corner (`--pn-glass-r`/`--pn-glass-b`), so a bar that only occupies the centre of the bottom edge cannot collide with either without the coordinate math the file above this one already had to write once. The theme chip is nudged up while the dock is visible (`body.pn-pitchdock-on .mvc-palfloat`), mirroring the SAME precedent already shipped for the PN/OS dock (`pn-ceo-0720.css`: `body.pnos-dock-on .mvc-palfloat{bottom:86px}`). ============================================================================================= */ /* ── ASK 1 — the device earns an edge against the near-black room ────────────────────────────── SPECIFICITY NOTE: `pn-shell-adopt.css`'s own `html.pn-cased body.pn-folio .dev{box-shadow:… !important}` (the 19 Aug contact-shadow) out-specifies a bare `html body[data-view="pitch"] .dev` (3 classes+2 elements beats 2+2) regardless of load order, so the FIRST version of this rule silently lost its box-shadow (background still applied — that property wasn't contested). Matched here at equal-or-greater specificity (`html.pn-cased` + `.pn-folio` + `[data-view]` + `.dev`) and their good multi-layer contact shadow (seam/contact/ambient/cast) is kept verbatim, with the rim-highlight + orange edge-glow layers ADDED, not swapped in — box-shadow does not merge across two separate rules, so replacing wholesale would have thrown their grounding away. */ html.pn-cased body.pn-folio[data-view="pitch"] .dev, html.pn-cased body[data-view="pitch"].pn-folio .dev{ background: linear-gradient(158deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 32%), #0F1419 !important; box-shadow: 0 1px 2px rgba(0,0,0,.72), 0 3px 7px rgba(0,0,0,.55), 0 8px 20px rgba(0,0,0,.34), 0 28px 64px rgba(20,14,6,.52), inset 0 0 0 1px rgba(255,255,255,.13), inset 0 -1px 0 rgba(255,255,255,.06), 0 0 86px rgba(249,115,22,.16) !important; } html body[data-view="pitch"] .screen{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.10), 0 0 54px rgba(249,115,22,.11) !important; } /* light theme: the room stays the CEO's warm-walnut desk, so the rim reads ink-side instead of glow-side — same idea (an edge you can measure), opposite value, never inverted by accident */ html.pn-cased[data-theme="light"] body.pn-folio[data-view="pitch"] .dev, html.pn-cased body.mvc-light.pn-folio[data-view="pitch"] .dev{ background: linear-gradient(158deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 32%), #0F1419 !important; box-shadow: 0 1px 2px rgba(34,28,20,.6), 0 3px 8px rgba(40,34,26,.4), 0 9px 22px rgba(40,34,26,.26), 0 28px 62px rgba(60,50,36,.26), inset 0 0 0 1px rgba(255,255,255,.5), 0 0 70px rgba(180,56,13,.18) !important; } /* ── ASK 2 — the docked primary action ──────────────────────────────────────────────────────── */ #pn-pitchdock{ position:fixed; z-index:396; /* above .mvc-palfloat(390 range)/pn-trybar, below modals(10000+) */ left:calc(var(--pn-glass-l, 0px) + 20px); right:calc(var(--pn-glass-r, 0px) + 20px); bottom:calc(var(--pn-glass-b, 16px) + 16px); display:flex; justify-content:center; align-items:center; pointer-events:none; /* only the button itself is clickable — the strip never eats a tap */ } #pn-pitchdock[hidden]{ display:none; } #pn-pitchdock .pd-btn{ pointer-events:auto; appearance:none; border:0; cursor:pointer; font:800 15px/1 'Inter', var(--lg-font, sans-serif); letter-spacing:-.01em; min-height:52px; padding:14px 30px; width:min(460px, 100%); border-radius:3px; color:#0b1c30; /* near-black ink on the orange fill — 7.06:1, UX_RULES §1 */ background:linear-gradient(180deg, #ffb178, #f97316 48%, #d95a0e); box-shadow: 0 18px 40px -10px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.5); transition:transform .14s ease, box-shadow .14s ease, filter .14s ease; } #pn-pitchdock .pd-btn:hover{ filter:brightness(1.04); transform:translateY(-1px); } #pn-pitchdock .pd-btn:active{ transform:translateY(0); filter:brightness(.98); } #pn-pitchdock .pd-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; } html[data-theme="light"] #pn-pitchdock .pd-btn{ color:#fff; background:linear-gradient(180deg,#c8551c,#b4380d 60%,#8f2c09); } /* 5.98:1 */ /* the theme chip steps up while the dock is showing, same precedent as the PN/OS dock */ body.pn-pitchdock-on .mvc-palfloat{ bottom:calc(var(--pn-glass-b, 47px) + 84px) !important; } @media (max-width:560px){ #pn-pitchdock{ left:calc(var(--pn-glass-l, 0px) + 12px); right:calc(var(--pn-glass-r, 0px) + 12px); bottom:calc(var(--pn-glass-b, 8px) + 10px); } #pn-pitchdock .pd-btn{ width:100%; } } /* ══ THE BEZEL READS AGAINST ANY ROOM (CEO, 2026-09-20, fourth time of asking) ════════════════ "STILL no clear ipad framing." The previous pass lifted the bezel/room boundary by 68%, which is a real improvement and still not enough: 68% brighter than almost-black is almost-black. The mistake was making the EDGE depend on the room behind it. On the floor the desk is lit and the device reads; on the pitch and the call the room is near-black and the same bezel vanishes. So the device stops borrowing contrast from its surroundings and carries its own: a graphite frame with a lit top rim and a dark underside, the way a real object sits under a light. It now reads on a lit desk and in a black room without either being changed - which is what the CEO asked for twice ("keep background same... give some definition"). Applies to every cased view, not the pitch alone. Scoping this to one screen is what produced four rounds of "and this one too". */ html.pn-cased body .dev{ background: linear-gradient(180deg, #3a4048 0%, #22262c 6px, #1a1e23 46%, #0f1216 100%) !important; border-radius:36px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.85), 0 2px 0 rgba(0,0,0,.55), 0 30px 60px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6) !important; } /* the glass sits INSIDE the frame, with its own dark inset so the bezel reads as thickness rather than as a border drawn on a flat panel */ html.pn-cased body .screen{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.9), inset 0 2px 6px rgba(0,0,0,.6) !important; }