/* PMP Reps — share card + OG image (§13, §18.10). Both are fixed-size canvases rendered from real state, then rasterised. In the build these become server-rendered PNGs (Pillow or headless capture); this file is the layout spec and the pixel reference. */ .sc-page *,.sc-page *::before,.sc-page *::after{box-sizing:border-box} .sc-page{padding:var(--space-8) var(--space-6) var(--space-16);max-width:1360px;margin:0 auto;font-family:var(--font-body)} .sc-hero{max-width:62ch;margin-bottom:var(--space-8)} .sc-eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary)} .sc-hero h1{font-family:var(--font-sans);font-size:clamp(28px,4vw,40px);font-weight:600;letter-spacing:-0.025em;line-height:1.14;color:var(--color-text-heading);margin:var(--space-3) 0 var(--space-3)} .sc-hero p{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--color-text-body);margin:0;text-wrap:pretty} .sc-h2{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-10) 0 var(--space-2)} .sc-h2 span{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--color-primary)} .sc-h2 h2{font-family:var(--font-sans);font-size:var(--fs-h2);font-weight:600;color:var(--color-text-heading);margin:0;flex:1 1 auto;min-width:0} .sc-lead{font-size:var(--fs-body);color:var(--color-text-muted);max-width:66ch;margin:0 0 var(--space-5);text-wrap:pretty} .sc-lead code{font-family:var(--font-mono);font-size:12.5px;background:var(--color-surface-raised);border-radius:var(--radius-sm);padding:1px 6px;color:var(--color-text-heading)} .sc-specrow{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:0 0 var(--space-4)} .sc-tag{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:4px 11px;white-space:nowrap} .sc-tag b{color:var(--color-text-heading)} /* the desk the fixed-size canvases sit on */ .sc-desk{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start;padding:var(--space-6);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-2xl)} .sc-item{display:flex;flex-direction:column;gap:var(--space-2)} .sc-cap{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);letter-spacing:.04em} .sc-cap b{color:var(--color-text-heading);font-weight:600} .sc-shadow{box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);overflow:hidden;background:#fff} .sc-scale-50{transform:scale(.5);transform-origin:top left} .sc-box-600x315{width:600px;height:315px;overflow:hidden} .sc-box-540x540{width:540px;height:540px;overflow:hidden} .sc-box-500x263{width:500px;height:262.5px;overflow:hidden} /* ══ the canvases themselves ══════════════════════════════════════════ Authored at final pixel size. No viewport units — these must rasterise identically at any zoom, in any renderer. */ .card{position:relative;overflow:hidden;font-family:var(--font-body);background:var(--color-surface-card);color:var(--color-text-body)} /* Light theme is PINNED, not merely recommended (§13). OG and share images are composited on unpredictable backgrounds by every platform, and a dark PNG on a dark unfurl disappears. Each canvas carries data-theme="light", which re-declares the light palette ON the element from design-system/tokens.css — a directly matched declaration beats one inherited from , so the canvases stay light whatever the page theme. No palette values are copied here: one source of truth. */ .card-1200x630{width:1200px;height:630px} .card-1080x1080{width:1080px;height:1080px} /* the one graphic device both cards share: a soft indigo wash + hairline grid */ .card-wash{position:absolute;inset:0;background: radial-gradient(780px 460px at 88% -12%, var(--color-primary-subtle) 0%, transparent 62%), var(--color-surface-card)} .card-grid{position:absolute;inset:0;opacity:.5;background-image: linear-gradient(to right, var(--color-border-subtle) 1px, transparent 1px), linear-gradient(to bottom, var(--color-border-subtle) 1px, transparent 1px); background-size:60px 60px} .card-body{position:relative;height:100%;display:flex;flex-direction:column} .card-brand{display:flex;align-items:center;gap:10px} .card-brand svg{width:26px;height:26px;color:var(--color-primary)} .card-brand-t{font-family:var(--font-sans);font-size:19px;font-weight:700;color:var(--color-text-heading);letter-spacing:-0.01em} .card-brand-t b{color:var(--color-primary);font-weight:700} .card-brand-sep{width:1px;height:18px;background:var(--color-border)} .card-brand-sub{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--color-primary);white-space:nowrap} /* ── share card (1200×630) ─────────────────────────────────────────── */ .sh{padding:52px 60px} .sh-top{display:flex;align-items:center;justify-content:space-between;gap:24px} .sh-streak{display:flex;align-items:center;gap:9px;background:var(--reps-streak-surface);border-radius:var(--radius-full);padding:8px 18px 8px 14px} .sh-streak svg{width:22px;height:22px;color:var(--reps-streak)} .sh-streak-n{font-family:var(--font-sans);font-size:24px;font-weight:700;color:var(--reps-streak);line-height:1;font-variant-numeric:tabular-nums} .sh-streak-l{font-size:13px;color:var(--reps-streak);text-transform:uppercase;letter-spacing:.05em;font-weight:600;white-space:nowrap} .sh-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:22px 0 4px} .sh-kicker{font-size:17px;color:var(--color-text-muted);margin:0 0 10px} .sh-head{font-family:var(--font-sans);font-size:60px;font-weight:600;line-height:1.06;letter-spacing:-0.03em;color:var(--color-text-heading);margin:0;text-wrap:balance;max-width:19ch} .sh-head em{font-style:normal;color:var(--color-primary)} .sh-stats{display:flex;align-items:stretch;gap:0;margin-top:26px;border-top:1px solid var(--color-border);padding-top:22px} .sh-stat{padding-right:44px;margin-right:44px;border-right:1px solid var(--color-border)} .sh-stat:last-child{border-right:0;padding-right:0;margin-right:0} .sh-stat-n{font-family:var(--font-sans);font-size:40px;font-weight:700;line-height:1;letter-spacing:-0.025em;color:var(--color-text-heading);font-variant-numeric:tabular-nums} .sh-stat-n small{font-size:22px;font-weight:600;color:var(--color-text-muted);letter-spacing:0} .sh-stat-l{font-size:14px;color:var(--color-text-muted);margin-top:7px} .sh-stat.is-accent .sh-stat-n{color:var(--color-primary)} .sh-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding-top:18px} .sh-url{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--color-primary)} /* Height is intentionally NOT declared: the chart's height is exactly its content (track + gap + label), so it can never disagree with itself. align-items:flex-end keeps the bars sitting on a common baseline. */ .sh-boxes{display:flex;align-items:flex-end;gap:6px} .sh-bx{width:22px;display:flex;flex-direction:column;align-items:center;gap:4px} .sh-bx-track{width:100%;height:36px;background:var(--color-surface-raised);border-radius:4px;display:flex;align-items:flex-end;overflow:hidden} .sh-bx-fill{width:100%;border-radius:4px} .sh-bx-l{font-family:var(--font-mono);font-size:9px;color:var(--color-text-muted);line-height:11px;height:11px} /* ── square variant (1080×1080) ─────────────────────────────────────── */ .sq{padding:76px 72px} .sq-mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:0} .sq-head{font-family:var(--font-sans);font-size:78px;font-weight:600;line-height:1.04;letter-spacing:-0.032em;color:var(--color-text-heading);margin:0 0 22px;text-wrap:balance;max-width:15ch} .sq-head em{font-style:normal;color:var(--color-primary)} .sq-kicker{font-size:22px;color:var(--color-text-muted);margin:0 0 40px;max-width:30ch;line-height:1.45} .sq-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden} .sq-cell{background:var(--color-surface-card);padding:30px 32px} .sq-cell-n{font-family:var(--font-sans);font-size:52px;font-weight:700;line-height:1;letter-spacing:-0.03em;color:var(--color-text-heading);font-variant-numeric:tabular-nums} .sq-cell-n small{font-size:26px;font-weight:600;color:var(--color-text-muted)} .sq-cell-l{font-size:16px;color:var(--color-text-muted);margin-top:11px} .sq-cell.is-accent{background:var(--color-primary-subtle)} .sq-cell.is-accent .sq-cell-n{color:var(--color-primary)} .sq-cell.is-accent .sq-cell-l{color:var(--color-primary-active)} .sq-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:34px} /* ── OG image (1200×630) ────────────────────────────────────────────── */ .og{padding:0;display:grid;grid-template-columns:1fr 460px} .og-l{padding:56px 0 56px 60px;display:flex;flex-direction:column} .og-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 0} .og-head{font-family:var(--font-sans);font-size:56px;font-weight:600;line-height:1.06;letter-spacing:-0.03em;color:var(--color-text-heading);margin:0 0 18px;text-wrap:balance;max-width:16ch} .og-head em{font-style:normal;color:var(--color-primary)} .og-sub{font-size:20px;line-height:1.5;color:var(--color-text-body);margin:0;max-width:30ch} .og-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto} .og-chip{display:flex;align-items:center;gap:7px;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:8px 15px;font-size:14px;font-weight:500;color:var(--color-text-heading);white-space:nowrap} .og-chip i{width:6px;height:6px;border-radius:50%;background:var(--color-primary);flex:0 0 auto} /* right rail: a real card mid-reveal, cropped — shows the product, not a logo */ .og-r{position:relative;overflow:hidden;border-left:1px solid var(--color-border);background:var(--color-surface-raised)} .og-peek{position:absolute;top:56px;left:24px;width:470px;background:var(--color-surface-card);border:1px solid var(--color-border-strong);border-radius:16px;box-shadow:var(--shadow-xl);padding:26px 28px} .og-peek-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} .og-peek-crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)} .og-peek-crumb b{color:var(--color-text-body)} .og-peek-pill{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--color-primary);background:var(--color-primary-subtle);border-radius:var(--radius-full);padding:4px 11px} .og-peek-ask{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);text-align:center;margin-bottom:12px} .og-peek-q{font-family:var(--font-sans);font-size:27px;font-weight:600;line-height:1.2;letter-spacing:-0.02em;color:var(--color-text-heading);text-align:center;margin:0 0 24px} .og-peek-flow{display:flex;flex-direction:column;gap:8px} .og-peek-node{border-radius:10px;border:1px solid;padding:11px 13px} .og-peek-node-h{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:4px} .og-peek-node-b{font-size:13px;line-height:1.4;color:var(--color-text-body)} .og-n-in{background:var(--reps-input-surface);border-color:var(--reps-input-border)}.og-n-in .og-peek-node-h{color:var(--reps-input-text)} .og-n-tt{background:var(--reps-tool-surface);border-color:var(--reps-tool-border)}.og-n-tt .og-peek-node-h{color:var(--reps-tool-text)} .og-n-out{background:var(--reps-output-surface);border-color:var(--reps-output-border)}.og-n-out .og-peek-node-h{color:var(--reps-output-text)} .og-peek-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px} .og-peek-btn{min-height:38px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid;font-size:13px;font-weight:600} .og-g-missed{background:var(--reps-missed-surface);border-color:var(--reps-missed-border);color:var(--reps-missed-text)} .og-g-almost{background:var(--reps-almost-surface);border-color:var(--reps-almost-border);color:var(--reps-almost-text)} .og-g-got{background:var(--reps-got-surface);border-color:var(--reps-got-border);color:var(--reps-got-text)} /* ── notes ──────────────────────────────────────────────────────────── */ .sc-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-3);margin-top:var(--space-5)} .sc-note{background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-4)} .sc-note strong{display:block;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--color-text-heading);margin-bottom:5px} .sc-note span{font-size:var(--fs-body-sm);line-height:1.55;color:var(--color-text-body)} .sc-note code{font-family:var(--font-mono);font-size:11.5px;color:var(--color-primary)}