/* ========================================================================== Simplicity Passerelle — Portal demonstration -------------------------------------------------------------------------- Loaded on /client-demo/ only. Everything is namespaced .ppd-* and every token is scoped to .ppd, so the Salient theme's broad element rules cannot reach inside and nothing here leaks out to the rest of the site. The palette, the type and the chrome are taken from the Portal itself (src/styles.css in passerelle-portal), not approximated: --surface-brand #102c52 navy rail, primary buttons --surface-brand-2 #164E99 brand blue accent --ink #071425 primary text --cream #f5f8fb page canvas --mist #dbe3ee borders DM Sans (body) · Space Grotesk (display) The report document uses the PSR's own warm palette (#fffdf7 cards, #e6e0d3 rules, #f0e9da sub-bars) so a client who has seen a real Performance Summary Report recognises this one. Structural notes before touching this file: · The app renders inline in the page AND, with .ppd--full on the shell, as a fixed overlay. One DOM, a class change — and a REPARENT to , because .pp-shell is a stacking context (see pp-demo.js). · Everything that is not the scrolling view is `flex: none`, or a long panel squeezes the rail and the top bar to a few pixels. ========================================================================== */ /* ---- Page-level pieces used only by /client-demo/ ----------------------- Outside the .ppd scope because they style the marketing page around the app. Here rather than in pp-next.css so a concurrent edit to the shared stylesheet cannot collide with them. */ .ppd-shell-wide { max-width: 1560px; } .ppd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .ppd-step { background: #fff; border: 1px solid var(--pp-line, #dde5ec); padding: 30px 26px; } .ppd-step .pp-h3 { margin-top: 8px; } .ppd-step .pp-body { margin-top: 12px; } .ppd-step code { font-size: 13px; background: #f2f6fa; border: 1px solid #e2eaf1; border-radius: 4px; padding: 1px 5px; word-break: break-word; } .ppd-callout { background: #fff; border: 1px solid var(--pp-line, #dde5ec); border-left: 3px solid var(--pp-blue, #0076bd); padding: 28px 30px; } .ppd-callout__t { display: flex; align-items: center; gap: 10px; font-size: clamp(17px, 2vw, 20px); font-weight: 600; color: var(--pp-navy, #004372); margin: 0; } .ppd-callout__t svg { flex: none; color: var(--pp-blue, #0076bd); } @media (max-width: 900px) { .ppd-steps { grid-template-columns: minmax(0, 1fr); } .ppd-callout { padding: 22px 20px; } } /* ========================================================================== The application ========================================================================== */ .ppd { /* Portal tokens, verbatim */ --d-navy: #102c52; --d-navy-deep: #0b1f3c; --d-navy-soft: #1b3d6b; --d-blue: #164E99; --d-blue-lift: #2f6fc4; --d-blue-soft: rgba(22, 78, 153, 0.08); --d-ink: #071425; --d-slate: #3b4a5c; --d-muted: #6b7891; --d-cream: #f5f8fb; --d-parchment: #eef2f7; --d-card: #ffffff; --d-line: #dbe3ee; --d-line-strong: #c1cbdb; --d-good: #1f7a4d; --d-good-bg: #e6f4ec; --d-warn: #8a5a08; --d-warn-bg: #fdf2dd; --d-crit: #a32b1f; --d-crit-bg: #fbeae8; --d-info-bg: #e9f0fa; /* PSR document palette */ --d-doc-paper: #ffffff; --d-doc-card: #fffdf7; --d-doc-rule: #e6e0d3; --d-doc-band: #f0e9da; --d-doc-flag: #fff6c9; /* Series palette — validated for colour-vision separation on white: worst adjacent pair ΔE 13.6 (deutan). Do not substitute by eye. */ --d-s1: #0076bd; --d-s2: #d0541f; --d-s3: #0f9b8e; --d-radius: 10px; --d-shadow: 0 24px 60px -34px rgba(7, 20, 37, 0.45), 0 2px 10px -4px rgba(7, 20, 37, 0.16); --d-rail: 232px; font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--d-ink); -webkit-font-smoothing: antialiased; } /* ---- Reset ------------------------------------------------------------- Every rule below is wrapped in :where(), which contributes ZERO specificity. That is load-bearing, not stylistic. The theme styles bare elements broadly, so the app needs a reset — but a reset written as `.ppd button` scores 0,1,1 and therefore beats every single-class component rule in this file. Written that way, `.ppd button { font: inherit }` silently forced every button in the app to the theme's 18px, and `.ppd p { margin: 0 }` cancelled `.ppd-note`'s margin. Both were real, and both looked like the theme leaking in rather than like this file fighting itself. */ .ppd *, .ppd *::before, .ppd *::after { box-sizing: border-box; } :where(.ppd) p, :where(.ppd) ul, :where(.ppd) ol, :where(.ppd) h1, :where(.ppd) h2, :where(.ppd) h3, :where(.ppd) h4, :where(.ppd) dl, :where(.ppd) dd, :where(.ppd) figure { margin: 0; } :where(.ppd) ul, :where(.ppd) ol { list-style: none; padding: 0; } :where(.ppd) button { font: inherit; border: 0; background: none; cursor: pointer; margin: 0; text-align: left; } :where(.ppd) input, :where(.ppd) select, :where(.ppd) textarea { font: inherit; color: inherit; } :where(.ppd) table { border-collapse: collapse; width: 100%; margin: 0; } :where(.ppd) th, :where(.ppd) td { border: 0; padding: 0; } /* The theme sets `h1..h6 { color: #444 }` — one element selector, enough to break inheritance on a heading that never set a colour of its own. A white-on-navy rail title rendered dark grey on navy. :where() ties the theme's 0,0,1 and wins on load order, while losing to every component rule here. */ :where(.ppd) h1, :where(.ppd) h2, :where(.ppd) h3, :where(.ppd) h4, :where(.ppd) th, :where(.ppd) td, :where(.ppd) label, :where(.ppd) legend { color: inherit; } .ppd-display { font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif; } /* ---- Window ------------------------------------------------------------ */ .ppd-window { position: relative; background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--d-radius); box-shadow: var(--d-shadow); overflow: hidden; display: flex; flex-direction: column; /* Fixed height inline, so the app scrolls inside its own frame rather than unrolling the page to 6,000px. Released on a phone — a 78vh scroll box inside a scrolling document is a gesture trap on touch. */ height: clamp(620px, 82vh, 940px); } /* 99000, deliberately under .pp-modal's 100000: the document-request and contact modals are appended at the end of and have to open over a full-screen demo, which is where most requests are raised from. */ .ppd--full { position: fixed; inset: 0; z-index: 99000; padding: 0; background: rgba(7, 20, 37, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); overflow: hidden; } .ppd--full .ppd-window { border-radius: 0; border: 0; height: 100vh; height: 100dvh; } .ppd-chrome, .ppd-banner, .ppd-foot { flex: none; } /* ---- Browser chrome bar ------------------------------------------------ */ .ppd-chrome { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: linear-gradient(180deg, #f7fafc 0%, #eef2f7 100%); border-bottom: 1px solid var(--d-line); } .ppd-chrome__dots { display: flex; gap: 6px; flex: none; } .ppd-chrome__dots i { width: 10px; height: 10px; border-radius: 50%; background: #cbd6e3; display: block; } .ppd-chrome__url { flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid var(--d-line); border-radius: 999px; padding: 5px 12px; font-size: 12px; letter-spacing: 0.01em; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; } .ppd-chrome__url svg { flex: none; color: var(--d-good); } .ppd-chrome__actions { display: flex; gap: 6px; flex: none; } .ppd-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--d-line); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; color: var(--d-slate); transition: border-color 0.18s ease, color 0.18s ease; } .ppd-chip:hover { border-color: var(--d-blue); color: var(--d-blue); } .ppd-chip svg { flex: none; } /* ---- Demo banner ------------------------------------------------------- */ .ppd-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 20px; background: var(--d-warn-bg); border-bottom: 1px solid #efdfba; color: #7a5410; font-size: 12.5px; line-height: 1.45; } .ppd-banner strong { font-weight: 700; } .ppd-banner svg { flex: none; } /* ---- Sign-in gate ------------------------------------------------------ */ .ppd-gate { display: grid; grid-template-columns: 1.05fr 1fr; flex: 1 1 auto; min-height: 0; overflow: auto; } .ppd-gate__aside { background: radial-gradient(120% 90% at 12% 4%, rgba(22, 78, 153, 0.5) 0%, rgba(22, 78, 153, 0) 58%), linear-gradient(160deg, var(--d-navy) 0%, var(--d-navy-deep) 100%); color: #fff; padding: 44px 42px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; } .ppd-gate__logo { width: 132px; height: auto; display: block; margin-bottom: 26px; } .ppd-gate__title { font-family: "Space Grotesk", "DM Sans", sans-serif; font-size: clamp(24px, 2.8vw, 31px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: #fff; } .ppd-gate__blurb { margin-top: 14px; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.76); max-width: 44ch; } .ppd-gate__list { margin-top: 24px; display: grid; gap: 11px; } .ppd-gate__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); } .ppd-gate__list svg { flex: none; margin-top: 2px; color: #7aa8e0; } .ppd-gate__legal { font-size: 11.5px; color: rgba(255, 255, 255, 0.45); line-height: 1.6; } .ppd-gate__main { padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; background: var(--d-card); } .ppd-gate__h { font-family: "Space Grotesk", sans-serif; font-size: 21px; font-weight: 600; } .ppd-gate__sub { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--d-slate); max-width: 46ch; } .ppd-profiles { display: grid; gap: 12px; margin-top: 24px; } .ppd-profile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; border: 1px solid var(--d-line); border-radius: var(--d-radius); background: #fff; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .ppd-profile:hover { border-color: var(--d-blue); box-shadow: 0 12px 30px -22px rgba(7, 20, 37, 0.6); transform: translateY(-1px); } .ppd-profile__mark { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--d-blue-soft); color: var(--d-navy); display: grid; place-items: center; font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; } .ppd-profile__name { display: block; font-size: 15.5px; font-weight: 600; } .ppd-profile__meta { display: block; font-size: 13px; color: var(--d-muted); margin-top: 3px; line-height: 1.45; } .ppd-profile__go { margin-left: auto; flex: none; color: var(--d-blue); } .ppd-gate__steps { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--d-parchment); display: grid; gap: 10px; } .ppd-gate__steps p { font-size: 13px; line-height: 1.55; color: var(--d-muted); } .ppd-gate__steps b { color: var(--d-slate); font-weight: 600; } /* Verifying interstitial. `display: flex` on the class outranks the UA sheet's `[hidden]`, and the white scrim otherwise covers the sign-in panel from first paint. */ .ppd-verify[hidden] { display: none; } .ppd-verify { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 6; text-align: center; padding: 24px; } .ppd-verify__bar { width: min(320px, 76vw); height: 4px; border-radius: 999px; background: var(--d-parchment); overflow: hidden; } .ppd-verify__bar i { display: block; height: 100%; width: 0; background: var(--d-blue); border-radius: 999px; transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1); } .ppd-verify__t { font-size: 14.5px; color: var(--d-slate); } /* ---- App shell: navy rail + canvas ------------------------------------- */ .ppd-app { display: none; flex: 1 1 auto; min-height: 0; } .ppd-app.is-on { display: grid; grid-template-columns: var(--d-rail) minmax(0, 1fr); } .ppd-gate.is-off { display: none; } .ppd-rail { background: var(--d-navy); color: #f7f5f0; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255, 255, 255, 0.06); } .ppd-rail__head { padding: 18px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 11px; } .ppd-rail__logo { width: 30px; height: auto; flex: none; } .ppd-rail__name { font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; color: #fff; } .ppd-rail__name span { display: block; font-family: "DM Sans", sans-serif; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); font-weight: 500; margin-top: 2px; } .ppd-rail__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 10px; min-height: 0; } .ppd-rail__group { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); font-weight: 600; padding: 14px 10px 7px; } .ppd-rail__link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: 7px; font-size: 13.5px; color: rgba(247, 245, 240, 0.78); transition: background 0.16s ease, color 0.16s ease; } .ppd-rail__link svg { flex: none; opacity: 0.85; } .ppd-rail__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } .ppd-rail__link[aria-current="page"] { background: var(--d-blue); color: #fff; font-weight: 600; } .ppd-rail__link[aria-current="page"] svg { opacity: 1; } .ppd-rail__count { margin-left: auto; background: #d64528; color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 6px; line-height: 1.5; } .ppd-rail__foot { flex: none; padding: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: grid; gap: 8px; } .ppd-rail__user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); } .ppd-rail__avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; } .ppd-rail__who { min-width: 0; } .ppd-rail__who b { display: block; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.3; } .ppd-rail__who span { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.5); } .ppd-rail__out { width: 100%; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 7px; padding: 7px; font-size: 12px; color: rgba(255, 255, 255, 0.8); transition: background 0.16s ease; } .ppd-rail__out:hover { background: rgba(255, 255, 255, 0.1); } /* ---- Main column ------------------------------------------------------- */ .ppd-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--d-cream); } .ppd-bar { flex: none; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--d-card); border-bottom: 1px solid var(--d-line); } /* Two classes, because .ppd-icon-btn sets `display: grid` further down the file and a single-class hide rule ties it and loses on source order. */ .ppd-bar .ppd-bar__burger { display: none; } .ppd-bar__t { font-family: "Space Grotesk", sans-serif; font-size: 16px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ppd-bar__spacer { flex: 1 1 auto; } .ppd-bar__switch { display: flex; gap: 3px; background: var(--d-parchment); border-radius: 999px; padding: 3px; } .ppd-bar__switch button { border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--d-slate); white-space: nowrap; transition: background 0.16s ease, color 0.16s ease; } .ppd-bar__switch button[aria-pressed="true"] { background: var(--d-navy); color: #fff; font-weight: 600; } .ppd-icon-btn { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--d-line); background: #fff; color: var(--d-slate); flex: none; transition: border-color 0.16s ease, color 0.16s ease; } .ppd-icon-btn:hover { border-color: var(--d-blue); color: var(--d-blue); } .ppd-icon-btn__dot { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #d64528; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; } .ppd-view { flex: 1 1 auto; min-height: 0; padding: 22px 22px 30px; overflow: auto; -webkit-overflow-scrolling: touch; } .ppd-panel { display: none; } .ppd-panel.is-on { display: block; animation: ppd-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes ppd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---- Notifications panel ----------------------------------------------- */ .ppd-notif { position: absolute; top: 0; right: 0; width: min(392px, 100%); max-height: 100%; background: #fff; border-left: 1px solid var(--d-line); box-shadow: -22px 0 48px -34px rgba(7, 20, 37, 0.6); z-index: 40; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1); } .ppd-notif.is-on { transform: none; } .ppd-notif__h { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--d-line); } .ppd-notif__h b { font-family: "Space Grotesk", sans-serif; font-size: 14.5px; font-weight: 600; } .ppd-notif__list { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .ppd-notif__i { display: flex; text-align: left; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--d-parchment); } .ppd-notif__i.is-unread { background: var(--d-info-bg); } .ppd-notif__ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--d-parchment); color: var(--d-navy); display: grid; place-items: center; } /* Block, not inline: these are inside a button (a

would be invalid there) and inline spans run the title straight into the body. */ .ppd-notif__t { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; } .ppd-notif__m { display: block; font-size: 12.5px; color: var(--d-muted); margin-top: 3px; line-height: 1.5; } .ppd-notif__when { display: block; font-size: 11.5px; color: var(--d-muted); margin-top: 5px; } .ppd-notif__f { flex: none; padding: 12px 16px; border-top: 1px solid var(--d-line); background: var(--d-cream); } /* Simulated push toast */ .ppd-push { position: absolute; top: 14px; right: 14px; width: min(346px, calc(100% - 28px)); background: rgba(255, 255, 255, 0.98); border: 1px solid var(--d-line); border-radius: 13px; box-shadow: 0 26px 54px -26px rgba(7, 20, 37, 0.55); padding: 12px 14px; display: flex; gap: 11px; z-index: 60; opacity: 0; transform: translateY(-14px) scale(0.98); transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .ppd-push.is-on { opacity: 1; transform: none; pointer-events: auto; } .ppd-push__ico { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--d-navy); display: grid; place-items: center; overflow: hidden; } .ppd-push__ico img { width: 20px; height: auto; } .ppd-push__t { display: block; font-size: 13px; font-weight: 700; } .ppd-push__m { display: block; font-size: 12.5px; color: var(--d-slate); margin-top: 2px; line-height: 1.45; } .ppd-push__meta { display: block; font-size: 11px; color: var(--d-muted); margin-top: 4px; } /* ---- Common blocks ----------------------------------------------------- */ .ppd-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .ppd-h__t { font-family: "Space Grotesk", sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; } .ppd-h__s { font-size: 13.5px; color: var(--d-slate); margin-top: 5px; line-height: 1.55; max-width: 78ch; } .ppd-card { background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--d-radius); padding: 18px; } .ppd-card--pad0 { padding: 0; overflow: hidden; } .ppd-card__h { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 13px; flex-wrap: wrap; } .ppd-card__t { font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--d-muted); font-weight: 700; } .ppd-grid { display: grid; gap: 14px; } .ppd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ppd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ppd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ppd-grid--main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } .ppd-stat { background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--d-radius); padding: 15px 16px; } .ppd-stat__k { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-muted); font-weight: 700; } .ppd-stat__v { font-family: "Space Grotesk", sans-serif; font-size: clamp(20px, 2.1vw, 26px); font-weight: 500; letter-spacing: -0.02em; margin-top: 7px; color: var(--d-navy); font-variant-numeric: tabular-nums; } .ppd-stat__n { font-size: 12.5px; color: var(--d-muted); margin-top: 5px; line-height: 1.45; } .ppd-stat--accent { background: linear-gradient(160deg, var(--d-navy) 0%, var(--d-navy-deep) 100%); border-color: var(--d-navy); } .ppd-stat--accent .ppd-stat__k { color: rgba(255, 255, 255, 0.58); } .ppd-stat--accent .ppd-stat__v { color: #fff; } .ppd-stat--accent .ppd-stat__n { color: rgba(255, 255, 255, 0.62); } .ppd-fresh { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--d-muted); line-height: 1.4; } .ppd-fresh svg { flex: none; color: var(--d-good); } .ppd-fresh--stale svg { color: var(--d-warn); } .ppd-fresh b { font-weight: 600; color: var(--d-slate); } .ppd-src { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--d-line); display: flex; flex-wrap: wrap; gap: 8px 18px; } .ppd-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .ppd-pill--good { background: var(--d-good-bg); color: var(--d-good); } .ppd-pill--warn { background: var(--d-warn-bg); color: var(--d-warn); } .ppd-pill--crit { background: var(--d-crit-bg); color: var(--d-crit); } .ppd-pill--info { background: var(--d-info-bg); color: var(--d-blue); } .ppd-pill--mute { background: var(--d-parchment); color: var(--d-muted); } .ppd-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--d-navy); color: #fff; border-radius: 8px; padding: 9px 17px; font-size: 13.5px; font-weight: 600; transition: background 0.18s ease, transform 0.18s ease; } .ppd-btn:hover { background: var(--d-blue); transform: translateY(-1px); } .ppd-btn--ghost { background: #fff; color: var(--d-navy); border: 1px solid var(--d-line); } .ppd-btn--ghost:hover { background: #fff; border-color: var(--d-blue); color: var(--d-blue); } .ppd-btn--sm { padding: 7px 13px; font-size: 12.5px; } .ppd-btn[disabled] { opacity: 0.45; pointer-events: none; } .ppd-rows { display: grid; } .ppd-row { display: flex; align-items: flex-start; gap: 13px; padding: 13px 18px; border-top: 1px solid var(--d-parchment); } .ppd-row:first-child { border-top: 0; } .ppd-row__ico { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--d-parchment); color: var(--d-navy); display: grid; place-items: center; } .ppd-row__main { flex: 1 1 auto; min-width: 0; } .ppd-row__t { font-size: 14px; font-weight: 600; line-height: 1.35; } .ppd-row__m { font-size: 12.5px; color: var(--d-muted); margin-top: 4px; line-height: 1.5; } .ppd-row__side { flex: none; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; } .ppd-kv { display: grid; } .ppd-kv > div { display: flex; gap: 14px; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--d-parchment); font-size: 13.5px; } .ppd-kv > div:first-child { border-top: 0; } .ppd-kv .k { color: var(--d-muted); } .ppd-kv .v { text-align: right; font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; } .ppd-time { display: grid; } .ppd-time__i { display: grid; grid-template-columns: 72px 1fr; gap: 13px; padding: 12px 0; border-top: 1px solid var(--d-parchment); } .ppd-time__i:first-child { border-top: 0; } .ppd-time__d { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--d-navy); padding-top: 2px; } .ppd-time__d small { display: block; font-weight: 500; color: var(--d-muted); letter-spacing: 0.01em; text-transform: none; } .ppd-time__t { font-size: 13.5px; font-weight: 600; } .ppd-time__s { font-size: 12.5px; color: var(--d-muted); margin-top: 3px; line-height: 1.5; } .ppd-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ppd-t { min-width: 620px; font-size: 13px; } .ppd-t th { text-align: right; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); font-weight: 700; padding: 0 12px 9px; border-bottom: 1px solid var(--d-line); white-space: nowrap; } .ppd-t th:first-child, .ppd-t td:first-child { text-align: left; padding-left: 0; } .ppd-t th:last-child, .ppd-t td:last-child { padding-right: 0; } .ppd-t td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--d-parchment); font-variant-numeric: tabular-nums; white-space: nowrap; } .ppd-t tbody tr:hover td { background: var(--d-cream); } .ppd-t tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--d-line); color: var(--d-navy); } .ppd-t .is-prov { background: var(--d-doc-flag); } .ppd-t .is-neg { color: var(--d-crit); } .ppd-t .is-pos { color: var(--d-good); } .ppd-note { font-size: 12.5px; line-height: 1.6; color: var(--d-muted); margin-top: 12px; } .ppd-note b { color: var(--d-slate); font-weight: 600; } .ppd-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; } .ppd-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--d-slate); } .ppd-legend i { width: 11px; height: 11px; border-radius: 3px; display: block; flex: none; } .ppd-alloc { display: grid; gap: 12px; } .ppd-alloc__r { display: grid; gap: 6px; } .ppd-alloc__t { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .ppd-alloc__t b { font-variant-numeric: tabular-nums; } .ppd-alloc__bar { height: 8px; border-radius: 999px; background: var(--d-parchment); overflow: hidden; } .ppd-alloc__bar i { display: block; height: 100%; border-radius: 999px; } .ppd-alloc__m { font-size: 12px; color: var(--d-muted); } /* ---- Controls ---------------------------------------------------------- */ .ppd-ctrl { display: grid; gap: 17px; } .ppd-ctrl__f { display: grid; gap: 7px; } .ppd-ctrl__l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-weight: 600; } .ppd-ctrl__l b { color: var(--d-blue); font-variant-numeric: tabular-nums; font-size: 15px; } .ppd-ctrl__h { font-size: 12px; color: var(--d-muted); line-height: 1.5; } .ppd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--d-line); outline: none; margin: 6px 0 2px; } .ppd-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--d-blue); box-shadow: 0 2px 6px rgba(7, 20, 37, 0.25); cursor: pointer; } .ppd-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--d-blue); cursor: pointer; } .ppd-seg { display: flex; flex-wrap: wrap; gap: 6px; } .ppd-seg button { border: 1px solid var(--d-line); border-radius: 7px; padding: 7px 12px; font-size: 12.5px; background: #fff; color: var(--d-slate); transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease; } .ppd-seg button:hover { border-color: var(--d-blue); color: var(--d-blue); } .ppd-seg button[aria-pressed="true"] { background: var(--d-navy); border-color: var(--d-navy); color: #fff; font-weight: 600; } .ppd-preset { display: grid; gap: 8px; } .ppd-preset button { border: 1px solid var(--d-line); border-radius: 9px; padding: 11px 13px; background: #fff; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .ppd-preset button:hover { border-color: var(--d-blue); box-shadow: 0 10px 26px -22px rgba(7, 20, 37, 0.7); } .ppd-preset button[aria-pressed="true"] { border-color: var(--d-blue); background: var(--d-blue-soft); } .ppd-preset__t { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .ppd-preset__m { font-size: 12.5px; color: var(--d-muted); margin-top: 4px; line-height: 1.5; } /* Form fields (profile) */ .ppd-field { display: grid; gap: 6px; } .ppd-field label { font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--d-muted); font-weight: 700; } .ppd-field input, .ppd-field select { width: 100%; border: 1px solid var(--d-line); border-radius: 8px; padding: 9px 11px; font-size: 14px; background: #fff; color: var(--d-ink); } .ppd-field input:focus, .ppd-field select:focus { outline: 2px solid var(--d-blue); outline-offset: 1px; border-color: var(--d-blue); } .ppd-field input[readonly] { background: var(--d-cream); color: var(--d-slate); } .ppd-toggle { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid var(--d-parchment); cursor: pointer; } .ppd-toggle:first-of-type { border-top: 0; } .ppd-toggle input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; } .ppd-toggle__sw { flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--d-line-strong); position: relative; transition: background 0.18s ease; margin-top: 1px; } .ppd-toggle__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 1px 3px rgba(7, 20, 37, 0.3); } .ppd-toggle input:checked ~ .ppd-toggle__sw { background: var(--d-good); } .ppd-toggle input:checked ~ .ppd-toggle__sw::after { transform: translateX(16px); } .ppd-toggle input:focus-visible ~ .ppd-toggle__sw { outline: 2px solid var(--d-blue); outline-offset: 2px; } .ppd-toggle__t { display: block; font-size: 13.5px; font-weight: 600; } .ppd-toggle__m { display: block; font-size: 12.5px; color: var(--d-muted); margin-top: 3px; line-height: 1.5; } /* ---- Chart ------------------------------------------------------------- */ .ppd-chart { position: relative; } .ppd-chart svg { display: block; width: 100%; height: auto; overflow: visible; } .ppd-chart .ax { stroke: var(--d-line); stroke-width: 1; } .ppd-chart .gl { stroke: var(--d-parchment); stroke-width: 1; } .ppd-chart .tk { font-size: 10.5px; fill: var(--d-muted); } .ppd-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .ppd-chart .dt { stroke: #fff; stroke-width: 2; } .ppd-chart__tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--d-line); border-radius: 9px; box-shadow: 0 14px 34px -18px rgba(7, 20, 37, 0.6); padding: 9px 12px; font-size: 12.5px; min-width: 156px; opacity: 0; transition: opacity 0.12s ease; z-index: 3; } .ppd-chart__tip.is-on { opacity: 1; } .ppd-chart__tip b { display: block; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--d-muted); margin-bottom: 6px; } .ppd-chart__tip div { display: flex; align-items: center; gap: 7px; justify-content: space-between; padding: 2px 0; } .ppd-chart__tip i { width: 9px; height: 9px; border-radius: 2px; display: block; flex: none; } .ppd-chart__tip span { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; } /* ========================================================================== The Performance Summary Report document -------------------------------------------------------------------------- Reproduces the Portal's own PSR: navy-ruled page header with the Passerelle lockup, uppercase section titles, warm cream policy cards on #fffdf7 with #e6e0d3 rules, navy account banners, and yellow provisional rows. A client who has seen a real report should recognise this one. Sized in absolute px at a 816px page (US Letter at 96dpi) so the print stylesheet at the bottom of this file produces the real thing rather than a screenshot of a web page. ========================================================================== */ .ppd-doc-wrap { display: grid; gap: 18px; justify-items: center; } .ppd-doc { width: 100%; max-width: 816px; background: var(--d-doc-paper); border: 1px solid var(--d-line); border-radius: 4px; box-shadow: 0 18px 44px -30px rgba(7, 20, 37, 0.55); padding: 40px 44px 30px; color: #1a1a1a; font-size: 12px; line-height: 1.45; position: relative; } .ppd-doc__wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; overflow: hidden; } .ppd-doc__wm span { font-family: "Space Grotesk", sans-serif; font-size: clamp(48px, 9vw, 96px); font-weight: 700; letter-spacing: 0.1em; color: rgba(16, 44, 82, 0.045); transform: rotate(-24deg); white-space: nowrap; } .ppd-doc__head { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding-bottom: 9px; margin-bottom: 15px; border-bottom: 2px solid var(--d-navy); } .ppd-doc__title { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 16px; color: var(--d-navy); letter-spacing: 0.02em; line-height: 1.22; } .ppd-doc__sub { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #6b6b6b; margin-top: 3px; } .ppd-doc__logo { width: 118px; height: auto; } .ppd-doc__eyebrow { font-family: "Space Grotesk", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; color: var(--d-navy); text-transform: uppercase; margin-bottom: 7px; } .ppd-doc__sectitle { background: var(--d-navy); color: #fff; font-family: "Space Grotesk", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; padding: 7px 11px; margin: 18px 0 11px; border-radius: 3px; text-transform: uppercase; } .ppd-doc__sectitle sup { font-size: 8px; } .ppd-doc__band { background: var(--d-doc-band); color: var(--d-navy); font-family: "Space Grotesk", sans-serif; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 9px; margin: 12px 0 8px; border-radius: 3px; } .ppd-doc__cover { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; } .ppd-doc__pie { display: flex; align-items: center; gap: 18px; } .ppd-doc__pie svg { flex: none; } .ppd-doc__pielegend { display: grid; gap: 6px; font-size: 11px; } .ppd-doc__pielegend span { display: flex; align-items: center; gap: 8px; } .ppd-doc__pielegend i { width: 10px; height: 10px; border-radius: 2px; flex: none; } .ppd-doc__pielegend b { margin-left: auto; font-variant-numeric: tabular-nums; } .ppd-doc__outlook { background: var(--d-doc-card); border: 1px solid var(--d-doc-rule); border-radius: 4px; padding: 11px 12px; font-size: 10.5px; line-height: 1.55; color: #3b3b3b; } .ppd-doc__outlook p + p { margin-top: 7px; } .ppd-doc__totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--d-doc-rule); border: 1px solid var(--d-doc-rule); border-radius: 4px; overflow: hidden; margin-top: 14px; } .ppd-doc__cell { background: var(--d-doc-card); padding: 9px 11px; } .ppd-doc__cell dt { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6b6b6b; font-weight: 700; } .ppd-doc__cell dd { font-family: "Space Grotesk", sans-serif; font-size: 14px; font-weight: 600; color: var(--d-navy); margin-top: 3px; font-variant-numeric: tabular-nums; } .ppd-doc__facility { margin-top: 12px; background: #ececec; border-radius: 3px; padding: 7px 11px; font-size: 11px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; } .ppd-doc__facility b { font-weight: 700; color: var(--d-navy); } .ppd-doc__disclosure { margin-top: 9px; font-size: 9.5px; color: #6b6b6b; line-height: 1.5; } /* Policy cards */ .ppd-doc__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; } .ppd-doc__card { border: 1px solid var(--d-doc-rule); border-radius: 4px; background: var(--d-doc-card); padding: 9px 10px 10px; } .ppd-doc__cardhead { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; border-bottom: 1px solid var(--d-doc-rule); padding-bottom: 5px; margin-bottom: 7px; } .ppd-doc__cardno { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 11px; color: var(--d-navy); letter-spacing: 0.01em; } .ppd-doc__cardalloc { font-size: 8.5px; color: #6b6b6b; text-align: right; line-height: 1.4; } .ppd-doc__mini { margin-bottom: 6px; } .ppd-doc__minihead { background: var(--d-navy); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; display: flex; justify-content: space-between; gap: 8px; } .ppd-doc__minibody { border: 1px solid var(--d-doc-rule); border-top: 0; padding: 4px 7px; text-align: right; font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; background: #fff; } .ppd-doc__cardret { margin-top: 7px; display: grid; gap: 3px; } .ppd-doc__cardret div { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #444; } .ppd-doc__cardret strong { font-variant-numeric: tabular-nums; color: var(--d-navy); } /* Report tables */ .ppd-doc table { font-size: 10.5px; } .ppd-doc__t th { background: var(--d-navy); color: #fff; font-family: "Space Grotesk", sans-serif; font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 6px; text-align: right; white-space: nowrap; } .ppd-doc__t th:first-child { text-align: left; } .ppd-doc__t td { padding: 4px 6px; border-bottom: 1px solid var(--d-doc-rule); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .ppd-doc__t td:first-child { text-align: left; } .ppd-doc__t tbody tr.is-prov td { background: var(--d-doc-flag); } .ppd-doc__t tbody tr.is-open td { background: #eef5ff; } .ppd-doc__three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .ppd-doc__foot { margin-top: 20px; padding-top: 9px; border-top: 1px solid var(--d-doc-rule); display: flex; gap: 14px; align-items: flex-end; justify-content: space-between; font-size: 8.5px; color: #6b6b6b; line-height: 1.5; } .ppd-doc__foot p { max-width: 74ch; } .ppd-doc__pageno { flex: none; font-weight: 600; } .ppd-doc__flagkey { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; font-size: 9.5px; color: #6b6b6b; } .ppd-doc__flagkey span { display: inline-flex; align-items: center; gap: 6px; } .ppd-doc__flagkey i { width: 11px; height: 11px; border: 1px solid var(--d-doc-rule); display: block; flex: none; } /* ---- Documents / e-sign ------------------------------------------------ */ .ppd-modal { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(7, 20, 37, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .ppd-modal[hidden] { display: none; } .ppd-modal__panel { background: #fff; border-radius: 12px; box-shadow: 0 34px 70px -30px rgba(7, 20, 37, 0.7); width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; } .ppd-modal__h { flex: none; display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--d-line); } .ppd-modal__h b { font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 600; } .ppd-modal__h .ppd-btn { margin-left: auto; } .ppd-modal__body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 20px 22px; } .ppd-modal__foot { flex: none; padding: 14px 18px; border-top: 1px solid var(--d-line); background: var(--d-cream); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ppd-modal__foot .ppd-note { margin: 0; flex: 1 1 220px; } /* Letter-styled document body */ .ppd-letter { background: #fff; border: 1px solid var(--d-doc-rule); border-radius: 3px; padding: 30px 34px; font-size: 12.5px; line-height: 1.65; color: #26303a; } .ppd-letter__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--d-navy); padding-bottom: 10px; margin-bottom: 16px; } .ppd-letter__logo { width: 104px; height: auto; } .ppd-letter__kicker { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #6b6b6b; font-weight: 700; } .ppd-letter__title { font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600; color: var(--d-navy); margin-top: 4px; } .ppd-letter h4 { font-family: "Space Grotesk", sans-serif; font-size: 12.5px; font-weight: 600; color: var(--d-navy); margin-top: 16px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em; } .ppd-letter p + p { margin-top: 9px; } .ppd-letter ul { margin-top: 7px; display: grid; gap: 5px; } .ppd-letter li { padding-left: 15px; position: relative; } .ppd-letter li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; background: var(--d-blue); border-radius: 50%; } .ppd-letter__sigblock { margin-top: 24px; border-top: 1px solid var(--d-doc-rule); padding-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .ppd-letter__sigline { display: grid; gap: 5px; } .ppd-letter__siglabel { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: #6b6b6b; font-weight: 700; } .ppd-letter__sigrule { border-bottom: 1px solid #7a8794; min-height: 40px; display: flex; align-items: flex-end; padding-bottom: 3px; } .ppd-sig-mark { font-family: "Dancing Script", "Segoe Script", "Brush Script MT", cursive; font-size: 30px; line-height: 1; color: #0f2f6b; } .ppd-letter__sigmeta { font-size: 9.5px; color: #6b6b6b; margin-top: 4px; } .ppd-esign { display: grid; gap: 16px; } .ppd-esign__tabs { display: flex; gap: 6px; } .ppd-esign__pad { border: 1px dashed var(--d-line-strong); border-radius: 9px; background: var(--d-cream); position: relative; overflow: hidden; } .ppd-esign__pad canvas { display: block; width: 100%; height: 150px; touch-action: none; cursor: crosshair; } .ppd-esign__pad--hint::after { content: "Draw your signature here"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; color: var(--d-muted); pointer-events: none; } .ppd-esign__typed { border: 1px solid var(--d-line); border-radius: 9px; background: #fff; padding: 12px 14px; min-height: 88px; display: flex; align-items: center; } .ppd-esign__consent { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border: 1px solid var(--d-line); border-radius: 9px; background: var(--d-cream); font-size: 12.5px; line-height: 1.55; color: var(--d-slate); cursor: pointer; } .ppd-esign__consent input { appearance: none; -webkit-appearance: none; flex: none; width: 17px; height: 17px; margin: 1px 0 0; border: 1.5px solid var(--d-line-strong); border-radius: 4px; background: #fff; cursor: pointer; } .ppd-esign__consent input:checked { background: var(--d-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat; border-color: var(--d-blue); } .ppd-esign__consent input:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } .ppd-audit { border: 1px solid var(--d-line); border-radius: 9px; background: var(--d-cream); padding: 13px 15px; font-size: 12px; color: var(--d-slate); display: grid; gap: 6px; } .ppd-audit b { color: var(--d-ink); font-weight: 600; } .ppd-audit code { font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--d-navy); word-break: break-all; } .ppd-done { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 18px 4px; } .ppd-done__tick { width: 56px; height: 56px; border-radius: 50%; background: var(--d-good-bg); color: var(--d-good); display: grid; place-items: center; } .ppd-done h3 { font-family: "Space Grotesk", sans-serif; font-size: 19px; font-weight: 600; } .ppd-done p { font-size: 13.5px; color: var(--d-slate); line-height: 1.6; max-width: 52ch; } /* Progress meter for "read to the end" */ .ppd-readbar { flex: none; height: 3px; background: var(--d-parchment); position: relative; } .ppd-readbar i { display: block; height: 100%; width: 0; background: var(--d-blue); transition: width 0.14s linear; } /* ---- Footer / toast ---------------------------------------------------- */ .ppd-foot { padding: 12px 20px; background: var(--d-card); border-top: 1px solid var(--d-line); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--d-muted); line-height: 1.55; } .ppd-foot__a { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .ppd-toast { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 14px); background: var(--d-navy); color: #fff; border-radius: 999px; padding: 11px 20px; font-size: 13.5px; box-shadow: 0 18px 40px -20px rgba(7, 20, 37, 0.9); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 80; max-width: min(86%, 480px); text-align: center; } .ppd-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 1180px) { .ppd-grid--main { grid-template-columns: minmax(0, 1fr); } .ppd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ppd-doc__cover { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .ppd-gate { grid-template-columns: minmax(0, 1fr); } .ppd-gate__aside { padding: 32px 24px; } .ppd-gate__main { padding: 28px 24px 34px; } .ppd-grid--3 { grid-template-columns: minmax(0, 1fr); } .ppd-doc__three { grid-template-columns: minmax(0, 1fr); } } /* The rail becomes a drawer. It is the same element, moved — a second copy would drift from the first the moment either is edited. */ @media (max-width: 860px) { .ppd-app.is-on { grid-template-columns: minmax(0, 1fr); } /* Fixed, not absolute. On a phone the app is page-scrolled (see the 690px block), so a drawer anchored to the top of the app opens off-screen for anyone who scrolled before tapping the menu. The bar is sticky for the same reason: the burger and the bell have to stay reachable. */ .ppd-rail { position: fixed; top: 0; bottom: 0; left: 0; width: 262px; z-index: 50; transform: translateX(-100%); transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 22px 0 48px -34px rgba(7, 20, 37, 0.8); } .ppd-app.is-drawer .ppd-rail { transform: none; } .ppd-bar { position: sticky; top: 0; z-index: 30; } .ppd-notif { position: fixed; height: 100%; max-height: none; } .ppd-bar .ppd-bar__burger { display: grid; } .ppd-bar__switch { display: none; } } @media (max-width: 690px) { /* Page-scroll on touch: a fixed-height app frame inside a scrolling document means the page only moves when the finger lands outside it. */ .ppd-window { height: auto; min-height: 0; border-radius: 10px; } .ppd-view { overflow: visible; padding: 16px 14px 24px; } .ppd--full .ppd-window { height: 100dvh; } .ppd--full .ppd-view { overflow: auto; } .ppd-chrome__url { font-size: 11px; } .ppd-grid--2, .ppd-grid--4 { grid-template-columns: minmax(0, 1fr); } .ppd-row { padding: 12px 14px; flex-wrap: wrap; } .ppd-row__side { width: 100%; justify-content: flex-start; padding-left: 45px; } .ppd-doc { padding: 20px 16px 18px; } .ppd-doc__cards { grid-template-columns: minmax(0, 1fr); } .ppd-doc__totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ppd-time__i { grid-template-columns: 60px 1fr; gap: 10px; } .ppd-modal { padding: 0; } .ppd-modal__panel { border-radius: 0; height: 100%; width: 100%; } .ppd-letter { padding: 20px 16px; } .ppd-letter__sigblock { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .ppd *, .ppd *::before, .ppd *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } @media (forced-colors: active) { .ppd-card, .ppd-stat, .ppd-window, .ppd-pill, .ppd-btn, .ppd-doc { border: 1px solid CanvasText; } } /* ========================================================================== Print — "Download PDF" on the report calls window.print() -------------------------------------------------------------------------- The Portal produces the client's PDF by printing this same document, so the demo does too rather than faking a download. Everything except the report is removed from the printed page, and each report page is forced onto its own sheet at US Letter. ========================================================================== */ @media print { body.ppd-printing > *:not(#ppd-print-host) { display: none !important; } #ppd-print-host { display: block !important; position: static !important; background: #fff; } #ppd-print-host .ppd-doc { box-shadow: none; border: 0; border-radius: 0; max-width: none; width: 100%; padding: 0 0 12px; break-after: page; page-break-after: always; } #ppd-print-host .ppd-doc:last-child { break-after: auto; page-break-after: auto; } #ppd-print-host .ppd-doc__wm { display: none; } @page { size: letter portrait; margin: 14mm 12mm; } } /* ========================================================================== Live view — report/live switch, cause-and-effect levers, insight tooltips ========================================================================== */ .ppd-viewswitch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--d-radius); padding: 6px; margin-bottom: 16px; } .ppd-viewswitch button { display: inline-flex; align-items: center; gap: 8px; border-radius: 7px; padding: 8px 14px; font-size: 13.5px; color: var(--d-slate); transition: background 0.16s ease, color 0.16s ease; } .ppd-viewswitch button:hover { background: var(--d-cream); color: var(--d-navy); } .ppd-viewswitch button[aria-pressed="true"] { background: var(--d-navy); color: #fff; font-weight: 600; } .ppd-viewswitch button svg { flex: none; opacity: 0.9; } .ppd-viewswitch__note { margin-left: auto; padding-right: 6px; font-size: 12px; color: var(--d-muted); } /* Levers */ .ppd-levers { display: grid; gap: 2px; } .ppd-lever { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--d-parchment); } .ppd-lever:first-child { border-top: 0; } .ppd-lever__row { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; cursor: pointer; margin: 0; } .ppd-lever__row input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; } .ppd-lever__row input:checked ~ .ppd-toggle__sw { background: var(--d-blue); } .ppd-lever__row input:checked ~ .ppd-toggle__sw::after { transform: translateX(16px); } .ppd-lever__row input:focus-visible ~ .ppd-toggle__sw { outline: 2px solid var(--d-blue); outline-offset: 2px; } .ppd-lever__t { font-size: 13.5px; line-height: 1.4; } .ppd-lever__row input:checked ~ .ppd-lever__t { font-weight: 600; color: var(--d-navy); } /* Insight tooltip trigger + the single shared popover */ .ppd-tip { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--d-muted); border: 1px solid var(--d-line); background: #fff; vertical-align: middle; transition: color 0.16s ease, border-color 0.16s ease; } .ppd-tip:hover { color: var(--d-blue); border-color: var(--d-blue); } .ppd-tip:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; } .ppd-tip-pop { position: absolute; z-index: 90; max-width: min(340px, calc(100% - 24px)); background: var(--d-navy); color: #fff; border-radius: 9px; padding: 11px 13px; font-size: 12.5px; line-height: 1.55; box-shadow: 0 20px 44px -22px rgba(7, 20, 37, 0.85); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.14s ease, transform 0.14s ease; } .ppd-tip-pop.is-on { opacity: 1; transform: none; } /* Insights */ .ppd-insights { display: grid; gap: 10px; } .ppd-insight { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.55; } .ppd-insight svg { flex: none; margin-top: 1px; } .ppd-insight--good { background: var(--d-good-bg); color: var(--d-good); } .ppd-insight--warn { background: var(--d-warn-bg); color: var(--d-warn); } .ppd-insight--crit { background: var(--d-crit-bg); color: var(--d-crit); } .ppd-insight--info { background: var(--d-info-bg); color: var(--d-blue); } .ppd-insight--mute { background: var(--d-cream); color: var(--d-muted); } @media (max-width: 690px) { .ppd-viewswitch__note { margin-left: 0; width: 100%; padding: 4px 6px 0; } .ppd-viewswitch button { flex: 1 1 auto; justify-content: center; } } /* ========================================================================== Prospect: process rail, illustration cards, notes thread ========================================================================== */ .ppd-steps-rail { display: grid; } .ppd-steprow { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--d-parchment); position: relative; } .ppd-steprow:first-child { border-top: 0; } .ppd-steprow__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--d-line-strong); background: #fff; display: grid; place-items: center; color: #fff; margin-top: 1px; } .ppd-steprow--done .ppd-steprow__dot { background: var(--d-good); border-color: var(--d-good); } .ppd-steprow--current .ppd-steprow__dot { border-color: var(--d-blue); box-shadow: 0 0 0 4px rgba(22, 78, 153, 0.14); } .ppd-steprow__t { display: block; font-size: 13.5px; font-weight: 600; } .ppd-steprow--todo .ppd-steprow__t { color: var(--d-muted); font-weight: 500; } .ppd-steprow__s { display: block; font-size: 12.5px; color: var(--d-muted); margin-top: 3px; line-height: 1.5; } .ppd-steprow .ppd-pill { margin-left: auto; align-self: center; } .ppd-illus { display: flex; flex-direction: column; } .ppd-illus.is-picked { border-color: var(--d-good); box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.12); } .ppd-illus__t { font-family: "Space Grotesk", sans-serif; font-size: 16px; font-weight: 600; } .ppd-illus__s { font-size: 13px; color: var(--d-slate); margin-top: 6px; line-height: 1.5; } .ppd-illus__note { margin-top: 13px; padding: 12px; background: var(--d-cream); border-radius: 9px; border-left: 3px solid var(--d-blue); } .ppd-illus__note p { font-size: 12.5px; line-height: 1.6; color: var(--d-slate); margin-top: 6px; } .ppd-illus__who { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--d-navy); } .ppd-illus__who svg { flex: none; } .ppd-illus__acts { margin-top: auto; padding-top: 14px; display: flex; gap: 7px; flex-wrap: wrap; } /* Notes thread */ .ppd-thread { display: grid; gap: 12px; padding: 4px 18px 14px; max-height: 340px; overflow-y: auto; } .ppd-msg { max-width: 92%; } .ppd-msg--mine { margin-left: auto; } .ppd-msg__who { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; color: var(--d-navy); margin-bottom: 4px; } .ppd-msg__who span { font-weight: 400; color: var(--d-muted); font-size: 11.5px; } .ppd-msg--mine .ppd-msg__who { justify-content: flex-end; } .ppd-msg__body { background: var(--d-cream); border: 1px solid var(--d-line); border-radius: 11px 11px 11px 3px; padding: 10px 12px; font-size: 13px; line-height: 1.55; color: var(--d-slate); } .ppd-msg--mine .ppd-msg__body { background: var(--d-blue-soft); border-color: rgba(22, 78, 153, 0.2); border-radius: 11px 11px 3px 11px; color: var(--d-ink); } @media (max-width: 1180px) { .ppd-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .ppd-grid--3 { grid-template-columns: minmax(0, 1fr); } }