/* ============================================================ Postnimble · canonical stylesheet Source of truth: design_handoff_postnimble_refresh_v2/ Drop in at: postnimble/web/static/css/postnimble.css This is a TOKEN LAYER + COMPONENT LAYER. Do not override colors with ad-hoc hex; reference var(--pn-*) everywhere. ============================================================ */ /* ---------- 0. Tokens ---------- */ :root { /* Type stacks */ /* UI/body font: Manrope, matching Ken's V2 prototype home page (2026-06-05). Serif (Instrument Serif) and mono (JetBrains Mono) already matched the prototype. Manrope is loaded via the Google Fonts link in base.html. */ --pn-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --pn-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --pn-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; /* Chrome surfaces + borders. V2 Identity Phase 3 follow-up: --pn-navy is sourced from tokens.css now (#F1F5F9 light / #1A253E dark), not redefined here. Fixed 2026-06-05: --pn-panel / --pn-panel-2 / --pn-surface / --pn-rule / --pn-rule-soft used to be UNCONDITIONAL V1 dark literals (#161B2E etc.), so on paper layouts (dashboard, login, marketing — data-theme="light") the nav, sidebar rail, and cards rendered dark while their text used the light-mode dark ink → dark-on-dark, unreadable. They are now theme-aware: LIGHT values here in the default (light) :root; the V1 DARK chrome values move to the [data-theme="dark"]:root block immediately after this :root, so the app shell (runs, review, clients — data-theme="dark") is unchanged. --pn-navy-deep stays a literal — it's used as on-accent (cyan button) text, fine in both themes. */ --pn-navy-deep: #0A0D18; --pn-panel: #F8FAFC; --pn-panel-2: #EEF2F6; --pn-surface: #FFFFFF; --pn-rule: #E2E8F0; --pn-rule-soft: #EEF2F6; /* Light "paper" surfaces. V2 Identity Phase 3 follow-up: - --pn-paper sourced from tokens.css (#FFFFFF light / #0F172A dark). - --pn-paper-2 → var(--pn-navy) (#F1F5F9 light / #1A253E dark per tokens.css). NOT redefined in any [data-theme="dark"]:root block, so the marketing beta pill stays on cool light gray regardless of theme inheritance context. v2.css spec for the beta pill is --pn-navy #F1F5F9 — this aliasing makes that match exact. - --pn-paper-line → var(--ink-200) (V2 default border, #E2E8F0). */ --pn-paper-2: var(--pn-navy); --pn-paper-line: var(--ink-200); /* Ink. V2 Identity Phase 3: re-pointed to tokens.css V2 ink scale. Values flip per data-theme on : light mode → --ink-900 #1E293B, --ink-700 #3B475C, --ink-500 #64748B dark mode → --ink-900 #F1F5F9, --ink-700 #CBD5E1, --ink-500 #94A3B8 App shell pages render with data-theme="dark"; paper layouts (marketing, dashboard, login, dashboard_picker) lock to light. */ --pn-ink: var(--ink-900); --pn-ink-soft: var(--ink-700); --pn-ink-faint: var(--ink-500); --pn-ink-dark: var(--ink-900); --pn-ink-dark-soft: var(--ink-700); /* Accent */ /* V2 Identity Phase 3: violet aliases now resolve to the V2 cyan ramp in tokens.css and flip per data-theme. light mode → --pn-cyan-deep #0C87C1, --pn-cyan #29A9E1, --pn-cyan-aa #086A99 dark mode → --pn-cyan-deep #29A9E1 (bright primary on dark), --pn-cyan / --pn-cyan-aa #5BC4EE Per the V2 dark palette: bright cyan #29A9E1 is AA-normal on the dark paper #0F172A (5.4:1) — confirmed safe for app-shell consumers. */ --pn-violet: var(--pn-cyan); --pn-violet-soft: var(--pn-cyan-aa); --pn-violet-deep: var(--pn-cyan-deep); --pn-violet-glow: color-mix(in srgb, var(--pn-cyan) 22%, transparent); --pn-violet-tint: color-mix(in srgb, var(--pn-cyan) 14%, transparent); --pn-violet-line: color-mix(in srgb, var(--pn-cyan) 35%, transparent); /* Functional. Success retired in Phase 3 — surfaces consume the V2 names (--pn-success-green / --pn-success-wash) from tokens.css. */ --pn-warning: #F5B041; --pn-danger: #F06A6A; --pn-info: #6FA0FF; --pn-warning-soft: rgba(245, 176, 65, 0.14); --pn-danger-soft: rgba(240, 106, 106, 0.14); --pn-info-soft: rgba(111, 160, 255, 0.14); --pn-warning-line: rgba(245, 176, 65, 0.32); --pn-danger-line: rgba(240, 106, 106, 0.35); --pn-info-line: rgba(111, 160, 255, 0.35); /* Channel colors (for calendar pills, social pack, scheduler) */ --pn-ch-fb: #4267B2; /* Facebook */ --pn-ch-ig: #E1306C; /* Instagram */ --pn-ch-li: #0A66C2; /* LinkedIn */ --pn-ch-th: #1F1F1F; /* Threads */ --pn-ch-yt: #FF0000; /* YouTube */ --pn-ch-bl: #7C5CFA; /* Blog */ /* Spacing */ --pn-s-1: 4px; --pn-s-2: 8px; --pn-s-3: 12px; --pn-s-4: 16px; --pn-s-5: 20px; --pn-s-6: 24px; --pn-s-7: 32px; --pn-s-8: 40px; /* Type scale (SPEC_TEXT_SIZE_SCALE_2026-05-07) — body + form + table-header. Mid-size headings + marketing-hero sizes intentionally stay literal. */ --pn-text-xs: 10.5px; --pn-text-sm: 12px; --pn-text-md: 13.5px; --pn-text-base: 14px; /* Radius */ --pn-r-sm: 6px; --pn-r-md: 8px; --pn-r-lg: 10px; --pn-r-xl: 12px; --pn-r-pill: 999px; /* Shadow */ --pn-shadow-card: 0 30px 80px rgba(0, 0, 0, 0.35); --pn-shadow-paper: 0 30px 80px rgba(36, 18, 72, 0.12); --pn-shadow-violet: 0 8px 24px var(--pn-violet-glow); } /* Dark app-shell chrome (data-theme="dark" — runs, review, clients, and any other pn-app page). Restores the V1 dark surface/border literals so those pages are visually unchanged by the 2026-06-05 paper-readability fix above. This block loads after tokens.css, so for --pn-panel it also wins over tokens.css's #131D33 dark value — keeping the app shell on its established #161B2E panel. */ [data-theme="dark"]:root { --pn-panel: #161B2E; --pn-panel-2: #1F2541; --pn-surface: #252B47; --pn-rule: #2A3052; --pn-rule-soft: #1F2541; } /* ---------- 1. Reset + base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--pn-font); font-size: var(--pn-text-base); line-height: 1.55; color: var(--pn-ink); background: var(--pn-navy); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Body classes — choose surface per page */ body.pn-paper { background: var(--pn-paper); color: var(--pn-ink-dark); } body.pn-app { background: var(--pn-navy); color: var(--pn-ink); } a { color: var(--pn-violet); text-decoration: none; } a:hover { color: var(--pn-violet-soft); } hr { border: 0; border-top: 1px solid var(--pn-rule); margin: var(--pn-s-6) 0; } button { font: inherit; } /* ---------- 2. Typography ---------- */ .pn-eyebrow { font-family: var(--pn-font); font-size: var(--pn-text-sm); font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--pn-violet-soft); line-height: 1.3; } body.pn-paper .pn-eyebrow { color: var(--pn-ink-dark-soft); } .pn-display { font-family: var(--pn-serif); font-weight: 400; font-size: 56px; line-height: 1.05; letter-spacing: -1px; color: inherit; margin: 0; } .pn-display--xl { font-size: 76px; letter-spacing: -1.6px; line-height: 1.0; } .pn-display--lg { font-size: 56px; } .pn-display--md { font-size: 36px; line-height: 1.1; letter-spacing: -0.5px; } .pn-display--sm { font-size: 28px; line-height: 1.15; letter-spacing: -0.4px; } .pn-display em, .pn-display .pn-italic { font-style: italic; color: var(--pn-violet); font-weight: 400; } .pn-h1 { font-family: var(--pn-serif); font-size: 36px; font-weight: 400; line-height: 1.1; letter-spacing: -0.5px; margin: 0; } .pn-h2 { font-family: var(--pn-font); font-size: 22px; font-weight: 600; line-height: 1.27; margin: 0; } .pn-h3 { font-family: var(--pn-font); font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; } .pn-body { font-family: var(--pn-font); font-size: var(--pn-text-base); line-height: 1.6; color: var(--pn-ink-soft); } body.pn-paper .pn-body { color: var(--pn-ink-dark-soft); } .pn-body--lg { font-size: 16px; } .pn-body--sm { font-size: var(--pn-text-sm); } .pn-mono { font-family: var(--pn-mono); font-size: var(--pn-text-xs); letter-spacing: 0.4px; color: var(--pn-ink-faint); } .pn-mono--upper { text-transform: uppercase; letter-spacing: 1.4px; font-size: var(--pn-text-xs); font-weight: 500; } .pn-num { font-family: var(--pn-serif); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.5px; } .pn-num--lg { font-size: 48px; } .pn-num--sm { font-size: 22px; } /* ---------- 3. Layout primitives ---------- */ .pn-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--pn-s-6); } .pn-container--wide { max-width: 1440px; } .pn-stack > * + * { margin-top: var(--pn-s-3); } .pn-stack--lg > * + * { margin-top: var(--pn-s-6); } .pn-row { display: flex; gap: var(--pn-s-3); align-items: center; } .pn-row--between { justify-content: space-between; } .pn-grid { display: grid; gap: var(--pn-s-4); } /* ---------- 4. App shell (top nav) ---------- */ .pn-shell { display: flex; flex-direction: column; min-height: 100vh; background: var(--pn-navy); color: var(--pn-ink); } .pn-nav { display: flex; align-items: center; height: 64px; padding: 0 28px; background: var(--pn-panel); border-bottom: 1px solid var(--pn-rule); position: sticky; top: 0; z-index: 50; } .pn-nav__client { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; min-width: 280px; border: 1px solid var(--pn-rule); border-radius: var(--pn-r-lg); background: var(--pn-surface); cursor: pointer; flex-shrink: 0; } .pn-nav__client:hover { border-color: var(--pn-violet-line); } .pn-nav__client-logo { width: 28px; height: 28px; border-radius: var(--pn-r-sm); display: flex; align-items: center; justify-content: center; background: var(--pn-violet-deep); color: #fff; font-family: var(--pn-serif); font-weight: 700; font-size: var(--pn-text-md); flex-shrink: 0; } .pn-nav__client-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; } .pn-nav__client-name { font-size: var(--pn-text-md); font-weight: 600; color: var(--pn-ink); white-space: nowrap; } .pn-nav__client-cat { font-size: var(--pn-text-xs); color: var(--pn-ink-faint); font-family: var(--pn-mono); white-space: nowrap; } .pn-nav__client-badge { margin-left: 4px; padding: 1px 7px; border-radius: var(--pn-r-pill); background: var(--pn-violet); color: var(--pn-navy-deep); font-size: var(--pn-text-xs); font-weight: 700; flex-shrink: 0; } .pn-nav__client-caret { color: var(--pn-ink-faint); font-size: 10px; margin-left: 4px; flex-shrink: 0; } .pn-nav__items { display: flex; margin-left: 32px; gap: 4px; } .pn-nav__item { position: relative; padding: 20px 14px; font-size: var(--pn-text-md); font-weight: 500; color: var(--pn-ink-soft); cursor: pointer; text-decoration: none; } .pn-nav__item:hover { color: var(--pn-ink); } .pn-nav__item.is-active { color: var(--pn-ink); font-weight: 600; } .pn-nav__item.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--pn-violet); border-radius: 2px; } .pn-nav__right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .pn-nav__search { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--pn-r-md); background: var(--pn-surface); border: 1px solid var(--pn-rule); font-size: var(--pn-text-sm); color: var(--pn-ink-soft); cursor: pointer; } .pn-nav__search kbd { font-family: var(--pn-mono); font-size: var(--pn-text-xs); color: var(--pn-ink-soft); background: transparent; border: 0; padding: 0; } .pn-nav__date { display: flex; align-items: center; gap: 8px; color: var(--pn-ink-soft); font-size: var(--pn-text-sm); font-family: var(--pn-mono); } .pn-shell__body { flex: 1; padding: 0; overflow: hidden; } /* ---------- 5. Logo mark ---------- */ .pn-logo { width: 28px; height: 28px; border-radius: 28%; background: linear-gradient(135deg, var(--pn-violet) 0%, var(--pn-violet-deep) 100%); position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .pn-logo--glow { box-shadow: 0 0 20px var(--pn-violet-glow); } .pn-logo svg { display: block; } /* ---------- 6. Avatar ---------- */ .pn-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pn-violet-tint); color: var(--pn-violet-soft); border: 1px solid var(--pn-violet-line); font-family: var(--pn-font); font-size: var(--pn-text-xs); font-weight: 600; flex-shrink: 0; } .pn-avatar--md { width: 32px; height: 32px; font-size: var(--pn-text-sm); } .pn-avatar--lg { width: 40px; height: 40px; font-size: var(--pn-text-base); } /* ---------- 7. Buttons ---------- */ .pn-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pn-font); font-size: var(--pn-text-md); font-weight: 600; padding: 10px 18px; border-radius: var(--pn-r-md); border: 1px solid var(--pn-rule); background: var(--pn-panel-2); color: var(--pn-ink); cursor: pointer; white-space: nowrap; letter-spacing: 0.1px; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; text-decoration: none; } .pn-btn:hover { background: var(--pn-surface); } .pn-btn:focus-visible { outline: 2px solid var(--pn-violet); outline-offset: 2px; } /* Primary action = dark ink-900 fill (V2 marketing .pn-btn--dark pattern). Cyan is accent only — never a button fill. Tokens flip per theme: light → #1E293B bg / white text; dark → #F1F5F9 bg / near-black text (the marketing Final-CTA white-button treatment). Hover dips into the AA cyan for both modes. */ .pn-btn--primary { background: var(--ink-900); color: var(--bg); border-color: var(--ink-900); font-weight: 700; } .pn-btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--bg); } .pn-btn--ghost { background: transparent; border-color: transparent; color: var(--pn-ink-soft); } .pn-btn--ghost:hover { color: var(--pn-ink); background: var(--pn-panel-2); } .pn-btn--danger { background: transparent; color: var(--pn-danger); border-color: var(--pn-danger-line); } .pn-btn--danger:hover { background: var(--pn-danger-soft); } .pn-btn--sm { font-size: var(--pn-text-sm); padding: 7px 13px; } /* Paper-surface variants (used on marketing + mobile review) */ body.pn-paper .pn-btn, .pn-on-paper .pn-btn { background: #fff; color: var(--pn-ink-dark); border-color: var(--pn-paper-line); } body.pn-paper .pn-btn:hover, .pn-on-paper .pn-btn:hover { background: var(--pn-paper-2); } /* Paper-page primaries inherit the global ink-900 fill — per the canonical direction (2026-06-09): primary buttons are dark --ink-900 everywhere, cyan is accent only (links, focus, hover dip, active states). The earlier cyan-filled variant (2026-06-05) is superseded. */ /* ---------- 8. Pills ---------- */ .pn-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pn-font); font-size: var(--pn-text-xs); font-weight: 600; line-height: 1.4; padding: 3px 9px; border-radius: var(--pn-r-pill); letter-spacing: 0.3px; background: rgba(255,255,255,0.06); color: var(--pn-ink-soft); border: 1px solid var(--pn-rule); white-space: nowrap; } .pn-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pn-pill--violet { background: var(--pn-violet-tint); color: var(--pn-violet-soft); border-color: var(--pn-violet-line); } .pn-pill--success { background: var(--pn-success-wash); color: var(--pn-success-green); border-color: color-mix(in srgb, var(--pn-success-green) 32%, transparent); } .pn-pill--warning { background: var(--pn-warning-soft); color: var(--pn-warning); border-color: var(--pn-warning-line); } .pn-pill--danger { background: var(--pn-danger-soft); color: var(--pn-danger); border-color: var(--pn-danger-line); } .pn-pill--info { background: var(--pn-info-soft); color: var(--pn-info); border-color: var(--pn-info-line); } .pn-pill--paper { background: var(--pn-paper-2); color: var(--pn-ink-dark); border-color: var(--pn-paper-line); } /* ---------- 9. Cards / panels ---------- */ .pn-card { background: var(--pn-panel); border: 1px solid var(--pn-rule); border-radius: var(--pn-r-lg); padding: var(--pn-s-5); } .pn-card--raised { background: var(--pn-panel-2); } .pn-card--violet { background: var(--pn-violet-tint); border-color: var(--pn-violet-line); } .pn-card--paper { background: #fff; color: var(--pn-ink-dark); border-color: var(--pn-paper-line); } .pn-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pn-s-4); gap: var(--pn-s-3); } /* ---------- 10. Form fields ---------- */ /* Label→field separation 8px; field→next group comes from .pn-form-grid row gap (22px); helper sits 6px under its field. */ .pn-field { display: flex; flex-direction: column; gap: 8px; } .pn-label { font-family: var(--pn-font); font-size: var(--pn-text-xs); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pn-ink-faint); } /* Inline hint inside a label ("— who are we writing for?"). Previously unstyled (inherited the label's uppercase tracking). ink-500 is AA in both modes (#64748B 4.8:1 on white / #94A3B8 5.4:1 on dark paper). */ .pn-label__hint { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-500); } /* Helper line under a field. Previously had no definition at all. */ .pn-help { font-size: 12.5px; line-height: 1.5; color: var(--ink-500); margin-top: 6px; } .pn-help code { font-family: var(--pn-mono); font-size: 11.5px; color: var(--pn-ink); } .pn-input, .pn-textarea, .pn-select { width: 100%; font-family: var(--pn-font); font-size: var(--pn-text-base); line-height: 1.5; padding: 10px 14px; background: var(--pn-surface); border: 1px solid var(--pn-rule); border-radius: var(--pn-r-md); color: var(--pn-ink); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; } .pn-textarea { min-height: 96px; resize: vertical; } .pn-input::placeholder, .pn-textarea::placeholder { color: var(--pn-ink-faint); } .pn-input:focus, .pn-textarea:focus, .pn-select:focus { border-color: var(--pn-violet); box-shadow: 0 0 0 3px var(--pn-violet-tint); } body.pn-paper .pn-input, body.pn-paper .pn-textarea, body.pn-paper .pn-select { background: #fff; color: var(--pn-ink-dark); border-color: var(--pn-paper-line); } body.pn-paper .pn-input::placeholder { color: var(--pn-ink-dark-soft); } /* ---------- 11. Tables ---------- */ .pn-table { width: 100%; border-collapse: collapse; } .pn-table thead th { text-align: left; font-family: var(--pn-mono); font-size: var(--pn-text-xs); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--pn-ink-faint); padding: 12px 16px; background: var(--pn-panel-2); border-bottom: 1px solid var(--pn-rule); } .pn-table tbody td { padding: 13px 16px; font-size: var(--pn-text-md); color: var(--pn-ink); border-bottom: 1px solid var(--pn-rule-soft); vertical-align: middle; } .pn-table tbody tr:hover td { background: rgba(255,255,255,0.02); } .pn-table tbody tr:last-child td { border-bottom: 0; } .pn-table--paper thead th { background: var(--pn-paper-2); color: var(--pn-ink-dark-soft); border-color: var(--pn-paper-line); } .pn-table--paper tbody td { color: var(--pn-ink-dark); border-color: var(--pn-paper-line); } /* ---------- 12. Tab strip ---------- */ .pn-tabs { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--pn-rule); flex-wrap: nowrap; white-space: nowrap; } .pn-tab { padding: 12px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: var(--pn-text-md); font-weight: 500; color: var(--pn-ink-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; } .pn-tab__count { font-family: var(--pn-mono); font-size: var(--pn-text-xs); color: var(--pn-ink-faint); } .pn-tab.is-active { color: var(--pn-ink); font-weight: 600; border-bottom-color: var(--pn-violet); } .pn-tab.is-active .pn-tab__count { color: var(--pn-violet); } .pn-tabs--paper { border-bottom-color: var(--pn-paper-line); } .pn-tabs--paper .pn-tab { color: var(--pn-ink-dark-soft); } .pn-tabs--paper .pn-tab.is-active { color: var(--pn-ink-dark); } /* ---------- 13. Calendar ---------- */ .pn-cal { background: var(--pn-panel); border: 1px solid var(--pn-rule); border-radius: var(--pn-r-lg); overflow: hidden; } body.pn-paper .pn-cal { background: #fff; border-color: var(--pn-paper-line); } .pn-cal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--pn-rule-soft); } body.pn-paper .pn-cal__head { border-color: var(--pn-paper-line); } .pn-cal__title { font-family: var(--pn-serif); font-size: 26px; font-weight: 400; letter-spacing: -0.4px; } .pn-cal__nav { display: flex; align-items: center; gap: 8px; } .pn-cal__legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pn-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--pn-mono); font-size: var(--pn-text-xs); letter-spacing: 1.4px; text-transform: uppercase; color: var(--pn-ink-faint); padding: 8px 0; border-bottom: 1px solid var(--pn-rule-soft); } body.pn-paper .pn-cal__weekdays { border-color: var(--pn-paper-line); color: var(--pn-ink-dark-soft); } .pn-cal__weekday { padding: 0 14px; } .pn-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); } .pn-cal__cell { min-height: 110px; padding: 8px 10px; border-right: 1px solid var(--pn-rule-soft); border-bottom: 1px solid var(--pn-rule-soft); display: flex; flex-direction: column; gap: 4px; background: transparent; } body.pn-paper .pn-cal__cell { border-color: var(--pn-paper-line); } .pn-cal__cell:nth-child(7n) { border-right: 0; } .pn-cal__cell--out { background: rgba(255,255,255,0.015); } body.pn-paper .pn-cal__cell--out { background: var(--pn-paper-2); } .pn-cal__cell-num { font-family: var(--pn-mono); font-size: var(--pn-text-xs); color: var(--pn-ink-soft); letter-spacing: 0.4px; margin-bottom: 4px; } body.pn-paper .pn-cal__cell-num { color: var(--pn-ink-dark-soft); } .pn-cal__cell--today .pn-cal__cell-num { display: inline-flex; align-items: center; justify-content: center; background: var(--pn-violet); color: var(--pn-navy-deep); border-radius: var(--pn-r-pill); width: 22px; height: 22px; font-weight: 700; } /* Event pill — uses inline --c CSS var per channel */ .pn-cal__evt { --c: var(--pn-violet); display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; font-size: var(--pn-text-xs); line-height: 1.3; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 4px; color: var(--pn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } body.pn-paper .pn-cal__evt { color: var(--pn-ink-dark); background: color-mix(in srgb, var(--c) 12%, #fff); } .pn-cal__evt-ch { font-family: var(--pn-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--c); flex-shrink: 0; } .pn-cal__evt--fb { --c: var(--pn-ch-fb); } .pn-cal__evt--ig { --c: var(--pn-ch-ig); } .pn-cal__evt--li { --c: var(--pn-ch-li); } .pn-cal__evt--th { --c: var(--pn-ch-th); } .pn-cal__evt--yt { --c: var(--pn-ch-yt); } .pn-cal__evt--bl { --c: var(--pn-ch-bl); } .pn-cal__more { font-family: var(--pn-mono); font-size: var(--pn-text-xs); color: var(--pn-ink-faint); letter-spacing: 0.4px; padding: 2px 6px; cursor: pointer; } /* Channel legend pill */ .pn-ch-legend { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pn-mono); font-size: var(--pn-text-xs); color: var(--pn-ink-soft); text-transform: uppercase; letter-spacing: 0.6px; } body.pn-paper .pn-ch-legend { color: var(--pn-ink-dark-soft); } .pn-ch-legend__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--pn-violet)); } /* ---------- 14. KPI / stat card ---------- */ .pn-kpi { background: var(--pn-panel); border: 1px solid var(--pn-rule); border-radius: var(--pn-r-lg); padding: 16px 18px; } .pn-kpi__label { font-family: var(--pn-mono); font-size: var(--pn-text-xs); letter-spacing: 1px; text-transform: uppercase; color: var(--pn-ink-faint); } .pn-kpi__num { font-family: var(--pn-serif); font-size: 38px; line-height: 1; letter-spacing: -0.5px; margin-top: 6px; color: var(--pn-ink); display: flex; align-items: baseline; gap: 8px; } .pn-kpi__num small { font-size: 18px; color: var(--pn-ink-faint); font-family: var(--pn-serif); } .pn-kpi__delta { font-family: var(--pn-mono); font-size: var(--pn-text-xs); margin-top: 6px; } .pn-kpi__delta--up { color: var(--pn-success-green); } .pn-kpi__delta--down { color: var(--pn-danger); } .pn-kpi__bar { margin-top: 10px; height: 4px; background: var(--pn-surface); border-radius: 2px; overflow: hidden; } .pn-kpi__bar > i { display: block; height: 100%; background: var(--pn-violet); } /* ---------- 15. Phase ribbon (run lifecycle) ---------- */ .pn-ribbon { display: flex; align-items: center; gap: 0; padding: 8px 0; } .pn-ribbon__step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; } .pn-ribbon__step + .pn-ribbon__step::before { content: ""; position: absolute; left: -50%; right: 50%; top: 14px; height: 2px; background: var(--pn-rule); z-index: 0; } .pn-ribbon__step.is-done + .pn-ribbon__step::before, .pn-ribbon__step.is-active + .pn-ribbon__step::before { background: var(--pn-violet); } .pn-ribbon__dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pn-surface); border: 2px solid var(--pn-rule); font-family: var(--pn-mono); font-size: 10px; color: var(--pn-ink-faint); position: relative; z-index: 1; } .pn-ribbon__step.is-done .pn-ribbon__dot { background: var(--pn-success-green); border-color: var(--pn-success-green); color: var(--pn-navy-deep); } .pn-ribbon__step.is-active .pn-ribbon__dot { background: var(--pn-violet); border-color: var(--pn-violet); color: var(--pn-navy-deep); box-shadow: 0 0 0 6px var(--pn-violet-glow); } .pn-ribbon__label { margin-top: 8px; font-family: var(--pn-mono); font-size: var(--pn-text-xs); letter-spacing: 0.8px; text-transform: uppercase; color: var(--pn-ink-faint); } .pn-ribbon__step.is-active .pn-ribbon__label, .pn-ribbon__step.is-done .pn-ribbon__label { color: var(--pn-ink); } /* ---------- 16. Marketing surface utilities ---------- */ .pn-paper-surface { background: var(--pn-paper); color: var(--pn-ink-dark); } .pn-paper-surface a { color: var(--pn-violet-deep); } .pn-hero-inset { background: var(--pn-navy); border-radius: var(--pn-r-xl); padding: 24px; box-shadow: 0 30px 80px var(--pn-violet-glow); color: var(--pn-ink); } /* ---------- 17. Browser chrome (marketing demo only) ---------- */ .pn-chrome { border-radius: var(--pn-r-xl); overflow: hidden; border: 1px solid var(--pn-rule); background: var(--pn-panel); box-shadow: var(--pn-shadow-card); } .pn-chrome--paper { border-color: var(--pn-paper-line); background: #fff; box-shadow: var(--pn-shadow-paper); } .pn-chrome__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--pn-rule); } .pn-chrome--paper .pn-chrome__bar { border-color: var(--pn-paper-line); } .pn-chrome__dot { width: 11px; height: 11px; border-radius: 50%; } .pn-chrome__dot--r { background: #FF5F57; } .pn-chrome__dot--y { background: #FEBC2E; } .pn-chrome__dot--g { background: #28C840; } .pn-chrome__url { margin-left: 14px; padding: 3px 10px; background: var(--pn-surface); border: 1px solid var(--pn-rule); border-radius: var(--pn-r-sm); font-family: var(--pn-mono); font-size: var(--pn-text-xs); color: var(--pn-ink-soft); flex: 1; max-width: 440px; } .pn-chrome--paper .pn-chrome__url { background: #fff; border-color: var(--pn-paper-line); color: var(--pn-ink-dark-soft); } /* ---------- 18. Misc utilities ---------- */ .pn-rule { background: var(--pn-rule); height: 1px; width: 100%; } .pn-rule--paper { background: var(--pn-paper-line); } .pn-faint { color: var(--pn-ink-faint); } .pn-soft { color: var(--pn-ink-soft); } .pn-violet-text { color: var(--pn-violet); } .pn-italic-violet { font-style: italic; color: var(--pn-violet); font-family: var(--pn-serif); } .pn-italic-violet-deep { font-style: italic; color: var(--pn-violet-deep); font-family: var(--pn-serif); } .pn-glow-bg { position: relative; isolation: isolate; } .pn-glow-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 700px at 100% 0%, var(--pn-violet-glow), transparent 65%), radial-gradient(600px 600px at 0% 100%, rgba(124,92,250,0.16), transparent 60%); pointer-events: none; z-index: -1; } /* ---------- 19. Slide-out / drawer ---------- */ .pn-drawer-scrim { position: fixed; inset: 0; background: rgba(10,13,24,0.55); backdrop-filter: blur(2px); z-index: 90; } .pn-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 640px; max-width: 100vw; background: var(--pn-panel); border-left: 1px solid var(--pn-rule); box-shadow: -30px 0 80px rgba(0,0,0,0.5); z-index: 91; display: flex; flex-direction: column; } .pn-drawer__head { padding: 24px 28px 20px; border-bottom: 1px solid var(--pn-rule); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .pn-drawer__body { flex: 1; overflow-y: auto; padding: 24px 28px; } .pn-drawer__foot { padding: 16px 28px; border-top: 1px solid var(--pn-rule); display: flex; justify-content: flex-end; align-items: center; gap: 10px; background: var(--pn-panel-2); } /* ---------- 20. Density toggle ---------- */ .pn-density { display: inline-flex; border: 1px solid var(--pn-rule); border-radius: var(--pn-r-md); overflow: hidden; background: var(--pn-surface); } .pn-density button { padding: 6px 12px; background: transparent; border: 0; color: var(--pn-ink-soft); font-size: var(--pn-text-sm); font-weight: 500; cursor: pointer; } .pn-density button.is-active { background: var(--pn-panel-2); color: var(--pn-ink); } /* compact density adjustments */ .pn-density-compact .pn-cal__cell { min-height: 80px; } .pn-density-compact .pn-table tbody td { padding: 9px 16px; } .pn-density-compact .pn-card { padding: 14px 16px; } /* ---------- 21. Print ---------- */ @media print { body { background: #fff; color: #000; } .pn-nav, .pn-drawer-scrim, .pn-drawer { display: none !important; } } /* ---------- 22. User menu (top-nav avatar dropdown) — brief §5.1 ---------- */ .pn-user-menu { position: relative; } .pn-user-menu__trigger { background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: var(--pn-r-pill); display: inline-flex; align-items: center; } .pn-user-menu__trigger:focus-visible { outline: 2px solid var(--pn-violet); outline-offset: 2px; } .pn-user-menu__panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--pn-panel); border: 1px solid var(--pn-rule); border-radius: var(--pn-r-lg); box-shadow: 0 12px 36px rgba(0,0,0,0.45); z-index: 60; padding: 6px; display: flex; flex-direction: column; gap: 2px; } .pn-user-menu__panel[hidden] { display: none; } .pn-user-menu__head { padding: 12px 12px 10px; border-bottom: 1px solid var(--pn-rule-soft); margin-bottom: 4px; } .pn-user-menu__email { font-family: var(--pn-mono); font-size: var(--pn-text-sm); color: var(--pn-ink); word-break: break-all; line-height: 1.35; } .pn-user-menu__item { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 9px 12px; font-family: var(--pn-font); font-size: var(--pn-text-md); color: var(--pn-ink-soft); text-decoration: none; border-radius: var(--pn-r-md); cursor: pointer; font: inherit; } .pn-user-menu__item:hover { background: var(--pn-panel-2); color: var(--pn-ink); } .pn-user-menu__item:focus-visible { outline: 2px solid var(--pn-violet); outline-offset: -2px; } .pn-user-menu__item--danger { color: var(--pn-danger); font-weight: 600; } .pn-user-menu__item--danger:hover { background: var(--pn-danger-soft); color: var(--pn-danger); } .pn-user-menu__signout { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--pn-rule-soft); } /* ---------- 23. Client edit — sectioned cards + anchor nav (brief §6) ---------- */ .ce-panel { scroll-margin-top: 80px; /* clear sticky top nav when anchor-jumping */ margin-bottom: 28px; /* generous whitespace between sections */ } .ce-panel:last-of-type { margin-bottom: 60px; } .ce-panel > .pn-card, .ce-panel > .card, .ce-panel { padding: 28px 32px; } .ce-panel h2, .ce-panel h3 { font-family: var(--pn-serif); font-weight: 400; letter-spacing: -0.3px; color: var(--pn-ink); margin-bottom: 14px; } .ce-panel h2 { font-size: 26px; } .ce-panel h3 { font-size: 18px; } .ce-panel .pn-card, .ce-panel .card { margin-bottom: 16px; padding: 22px 24px; } .ce-panel form { margin-top: 8px; } /* ---------- 24. Static brand block (top-left, replaces pn-nav__client) ---------- */ .pn-nav__brand { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; text-decoration: none; border-radius: var(--pn-r-lg); flex-shrink: 0; color: var(--pn-ink); } .pn-nav__brand:hover { background: var(--pn-panel-2); } .pn-nav__brand-wordmark { font-family: var(--pn-serif); font-size: 22px; font-weight: 400; letter-spacing: -0.4px; color: var(--pn-ink); line-height: 1; } /* ---------- 25. Persistent left sidebar (accounts list) ---------- */ .pn-shell-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 64px); align-items: stretch; } .pn-shell-grid__main { min-width: 0; } .pn-sidebar { border-right: 1px solid var(--pn-rule); background: var(--pn-panel); padding: 22px 14px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; } .pn-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; border-bottom: 1px solid var(--pn-rule-soft); } .pn-sidebar__add { font-family: var(--pn-mono); font-size: var(--pn-text-xs); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: var(--pn-violet); text-decoration: none; padding: 4px 10px; border-radius: var(--pn-r-sm); border: 1px solid var(--pn-rule); transition: background 120ms ease, border-color 120ms ease; } .pn-sidebar__add:hover { background: var(--pn-violet-tint); border-color: var(--pn-violet-line); color: var(--pn-violet-soft); } .pn-sidebar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .pn-sidebar__row { --c: var(--pn-violet); display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: transparent; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: var(--pn-r-md); cursor: pointer; text-align: left; font-family: var(--pn-font); color: var(--pn-ink); transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .pn-sidebar__row:hover { background: var(--pn-panel-2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); } .pn-sidebar__row:focus-visible { outline: 2px solid var(--pn-violet); outline-offset: 2px; } .pn-sidebar__row.is-current { background: color-mix(in srgb, var(--c) 14%, var(--pn-panel-2)); border-color: color-mix(in srgb, var(--c) 32%, transparent); border-left: 3px solid var(--c); cursor: default; transform: none; } .pn-sidebar__row.is-current:hover { transform: none; box-shadow: none; } .pn-sidebar__row-logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--pn-r-md); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--c); color: #fff; font-family: var(--pn-serif); font-weight: 700; font-size: 16px; letter-spacing: -0.3px; } .pn-sidebar__row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.2; } .pn-sidebar__row-name { font-family: var(--pn-font); font-size: var(--pn-text-md); font-weight: 500; color: var(--pn-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.05px; } .pn-sidebar__row.is-current .pn-sidebar__row-name { font-weight: 600; } .pn-sidebar__row-cat { font-size: 9.5px; color: var(--pn-ink-faint); letter-spacing: 1.2px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-sidebar__row-dot { width: 8px; height: 8px; border-radius: var(--pn-r-pill); background: var(--pn-violet); box-shadow: 0 0 0 3px var(--pn-violet-glow); flex-shrink: 0; } /* Mobile toggle (hamburger) */ .pn-sidebar__toggle { display: none; /* shown only at <=768px via @media below */ flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: fixed; bottom: 20px; left: 20px; z-index: 60; width: 48px; height: 48px; border-radius: var(--pn-r-pill); background: var(--pn-violet); border: 0; cursor: pointer; box-shadow: 0 12px 32px rgba(0,0,0,0.35); } .pn-sidebar__toggle-bar { display: block; width: 18px; height: 2px; background: var(--pn-navy-deep); border-radius: 2px; } @media (max-width: 768px) { .pn-shell-grid { grid-template-columns: 1fr; } .pn-sidebar { position: fixed; top: 64px; left: 0; bottom: 0; width: 280px; max-width: 86vw; transform: translateX(-100%); transition: transform 200ms ease; z-index: 50; box-shadow: 0 0 60px rgba(0,0,0,0.5); } .pn-sidebar.is-open { transform: translateX(0); } .pn-sidebar__toggle { display: flex; } } /* ---------- 26. User menu — section divider for the avatar dropdown ---------- */ .pn-user-menu__divider { height: 1px; background: var(--pn-rule-soft); margin: 4px 0; } .pn-user-menu__section-label { font-family: var(--pn-mono); font-size: var(--pn-text-xs); letter-spacing: 1.2px; text-transform: uppercase; color: var(--pn-ink-faint); padding: 8px 12px 4px; } /* ---------- 27. Trending card grid (used by inline dashboard Trending tab) ---------- */ .pn-trending-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .pn-trend-card { background: var(--pn-panel); border: 1px solid var(--pn-rule); border-radius: var(--pn-r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; transition: border-color 120ms; } .pn-trend-card:hover { border-color: var(--pn-violet-line); } .pn-trend-card__topic { font-family: var(--pn-serif); font-size: 18px; line-height: 1.3; color: var(--pn-ink); font-weight: 400; } .pn-trend-card__actions { display: flex; gap: 6px; align-items: center; margin-top: auto; } .pn-trend-feedback { background: transparent; border: 1px solid var(--pn-rule); border-radius: var(--pn-r-md); padding: 6px 10px; cursor: pointer; color: var(--pn-ink-faint); font-size: var(--pn-text-base); line-height: 1; } .pn-trend-feedback:hover { color: var(--pn-ink); } .pn-trend-feedback--down:hover { color: var(--pn-danger); border-color: var(--pn-danger-line); } /* ============================================================ Path B token migration (SPEC_BETA_AUTH_TOKEN_MIGRATION_2026-05-07). Ports `.beta-*` widget rules + the auth-shell family from legacy /static/postnimble.css to this canonical sheet, with every legacy variable replaced by its --pn-* equivalent so the dock inspector can annotate + edit these surfaces in place. ============================================================ */ /* ---------- Beta feedback widget ---------- */ .beta-fab { position: fixed; bottom: var(--pn-s-6); right: var(--pn-s-6); z-index: 900; display: flex; align-items: center; gap: 7px; background: var(--pn-violet-deep); color: #fff; border: none; border-radius: var(--pn-r-pill); padding: 10px 16px 10px 12px; font-size: var(--pn-text-md); font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35); transition: transform 0.15s, box-shadow 0.15s; } .beta-fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45); } .beta-fab-label { letter-spacing: 0.01em; } .beta-overlay { display: none; position: fixed; inset: 0; background: rgba(12, 10, 26, 0.5); z-index: 1000; } .beta-overlay.open { display: block; } .beta-panel { display: none; flex-direction: column; position: fixed; bottom: 80px; right: var(--pn-s-6); width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 100px); background: var(--pn-paper); color: var(--pn-ink-dark); border: 1px solid var(--pn-paper-line); border-radius: var(--pn-r-xl); box-shadow: 0 8px 40px rgba(12, 10, 26, 0.25); z-index: 1001; overflow: hidden; } .beta-panel.open { display: flex; } .beta-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--pn-violet-deep); color: #fff; font-weight: 700; font-size: var(--pn-text-base); flex-shrink: 0; } .beta-close { background: none; border: none; color: color-mix(in srgb, var(--pn-paper) 85%, transparent); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 2px; } .beta-close:hover { color: #fff; } .beta-panel-body { padding: 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; background: var(--pn-paper); color: var(--pn-ink-dark); } .beta-meta { background: var(--pn-paper-2); border: 1px solid var(--pn-paper-line); border-radius: var(--pn-r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .beta-meta-row { display: flex; gap: 8px; font-size: var(--pn-text-sm); } .beta-meta-label { color: var(--pn-ink-dark-soft); min-width: 60px; flex-shrink: 0; } .beta-meta-value { color: var(--pn-ink-dark); font-weight: 500; word-break: break-all; } .beta-field-label { font-size: var(--pn-text-sm); font-weight: 600; color: var(--pn-ink-dark); margin-bottom: -4px; } .beta-hint { font-weight: 400; color: var(--pn-ink-dark-soft); } .beta-input { width: 100%; padding: 7px 10px; border: 1px solid var(--pn-paper-line); border-radius: var(--pn-r-sm); font-size: var(--pn-text-md); font-family: inherit; box-sizing: border-box; background: #fff; color: var(--pn-ink-dark); } .beta-input:focus { outline: none; border-color: var(--pn-violet-deep); } .beta-textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--pn-paper-line); border-radius: var(--pn-r-sm); font-size: var(--pn-text-md); font-family: inherit; resize: vertical; box-sizing: border-box; min-height: 90px; background: #fff; color: var(--pn-ink-dark); } .beta-textarea:focus { outline: none; border-color: var(--pn-violet-deep); } .beta-radio-group { display: flex; gap: 14px; } .beta-radio { display: flex; align-items: center; gap: 5px; font-size: var(--pn-text-md); cursor: pointer; color: var(--pn-ink-dark); } .beta-error { background: var(--pn-danger-soft); color: var(--pn-danger); border-radius: 5px; padding: 7px 10px; font-size: var(--pn-text-sm); } .beta-success { background: var(--pn-success-wash); color: var(--pn-success-green); border-radius: 5px; padding: 7px 10px; font-size: var(--pn-text-sm); font-weight: 500; } .beta-panel-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--pn-paper-line); flex-shrink: 0; background: var(--pn-paper); } /* Admin feedback table badges (kept literal — these are status colors, not in the redesign token set) */ .badge-red { background: #FEE2E2; color: #991B1B; } .badge-blue { background: #DBEAFE; color: #1E40AF; } @media (max-width: 600px) { .beta-panel { right: 8px; bottom: 72px; width: calc(100vw - 16px); } .beta-fab { right: 12px; bottom: 16px; } } /* ---------- AI Assistant panel (mirrors beta-panel, bottom-left) ---------- Per beta feedback #224 (2026-05-12, Ken): Ask AI should open as a small window in the lower-left corner, similar in size to the page feedback widget. Geometry mirrors .beta-panel; positioned under the .ai-fab. */ .ai-panel { display: none; flex-direction: column; position: fixed; bottom: 140px; left: var(--pn-s-6); right: auto; width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 160px); background: var(--pn-paper); color: var(--pn-ink-dark); border: 1px solid var(--pn-paper-line); border-radius: var(--pn-r-xl); box-shadow: 0 8px 40px rgba(12, 10, 26, 0.25); z-index: 1001; overflow: hidden; } .ai-panel.open { display: flex; } .ai-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--pn-violet-deep); color: #fff; font-weight: 700; font-size: var(--pn-text-base); flex-shrink: 0; } .ai-panel-header-left { display: flex; align-items: center; gap: 8px; } .ai-model-badge { font-family: var(--pn-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--pn-r-pill); background: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.9); } .ai-close { background: none; border: none; color: color-mix(in srgb, var(--pn-paper) 85%, transparent); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 2px; } .ai-close:hover { color: #fff; } .ai-messages { padding: 14px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; background: var(--pn-paper); } .ai-msg { display: flex; } .ai-msg.user { justify-content: flex-end; } .ai-msg.asst { justify-content: flex-start; } .ai-bubble { max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: var(--pn-text-md); line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; } .ai-msg.user .ai-bubble { background: var(--pn-violet-deep); color: #fff; border-bottom-right-radius: 4px; } .ai-msg.asst .ai-bubble { background: var(--pn-paper-2); color: var(--pn-ink-dark); border: 1px solid var(--pn-paper-line); border-bottom-left-radius: 4px; } .ai-typing { display: inline-flex; gap: 4px; padding: 9px 12px; background: var(--pn-paper-2); border: 1px solid var(--pn-paper-line); border-radius: 14px; border-bottom-left-radius: 4px; } .ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--pn-ink-dark-soft); animation: ai-typing-bounce 1.2s infinite ease-in-out; } .ai-typing span:nth-child(2) { animation-delay: 0.15s; } .ai-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes ai-typing-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } } .ai-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--pn-paper-line); background: var(--pn-paper); flex-shrink: 0; } .ai-input { flex: 1; resize: none; border: 1px solid var(--pn-paper-line); border-radius: var(--pn-r-sm); padding: 8px 10px; font-family: inherit; font-size: var(--pn-text-md); line-height: 1.4; background: #fff; color: var(--pn-ink-dark); max-height: 120px; box-sizing: border-box; } .ai-input:focus { outline: none; border-color: var(--pn-violet-deep); } .ai-send { background: var(--pn-violet-deep); color: #fff; border: none; border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .ai-send:hover:not(:disabled) { background: var(--pn-violet); } .ai-send:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 600px) { .ai-panel { left: 8px; bottom: 128px; width: calc(100vw - 16px); } .ai-fab { left: 12px; bottom: 72px; } } /* ---------- Auth shell (forgot/reset/terms/waitlist) ---------- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--pn-s-8) var(--pn-s-4); background: var(--pn-paper); position: relative; font-family: var(--pn-font); color: var(--pn-ink-dark); } .auth-shell::before { content: ""; position: fixed; inset: -10% 0 auto 0; height: 60vh; background: radial-gradient(ellipse at 50% 0%, rgba(196, 181, 253, 0.20) 0%, rgba(196, 181, 253, 0) 60%); pointer-events: none; z-index: 0; } .auth-shell__inner { width: 100%; max-width: 420px; position: relative; z-index: 1; } .auth-shell__brand { text-align: center; margin-bottom: var(--pn-s-6); } .auth-shell__brand-mark { width: 56px; height: auto; display: block; margin: 0 auto var(--pn-s-3); } .auth-shell__wordmark { font-family: var(--pn-font); font-size: 22px; font-weight: 700; color: var(--pn-ink-dark); letter-spacing: -0.02em; } .auth-shell__sub { font-family: var(--pn-font); font-size: var(--pn-text-sm); color: var(--pn-ink-faint); letter-spacing: 0.04em; text-transform: uppercase; margin-top: var(--pn-s-1); } .auth-shell__card { background: var(--pn-paper); border: 1px solid var(--pn-paper-line); border-radius: var(--pn-r-xl); box-shadow: 0 4px 12px rgba(12, 10, 26, 0.08); padding: var(--pn-s-7) var(--pn-s-6); } .auth-shell__title { font-family: var(--pn-font); font-size: 18px; font-weight: 600; color: var(--pn-ink-dark); margin-bottom: var(--pn-s-2); } .auth-shell__intro { font-family: var(--pn-font); font-size: var(--pn-text-md); color: var(--pn-ink-dark-soft); line-height: 1.5; margin-bottom: var(--pn-s-5); } .auth-shell__row { margin-bottom: var(--pn-s-4); } .auth-shell__row > label { display: block; font-family: var(--pn-font); font-size: var(--pn-text-sm); font-weight: 600; color: var(--pn-ink-dark-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--pn-s-1); } .auth-shell__row > input[type="text"], .auth-shell__row > input[type="email"], .auth-shell__row > input[type="password"] { width: 100%; padding: 10px 12px; border: 1px solid var(--pn-paper-line); border-radius: var(--pn-r-md); font-family: var(--pn-font); font-size: var(--pn-text-base); color: var(--pn-ink-dark); background: #fff; box-sizing: border-box; } .auth-shell__row > input:focus { outline: none; border-color: var(--pn-violet-deep); box-shadow: 0 0 0 3px var(--pn-violet-tint); } .auth-shell__submit { width: 100%; margin-top: var(--pn-s-3); padding: 12px; font-size: 15px; font-weight: 600; justify-content: center; } .auth-shell__remember { display: flex; align-items: center; justify-content: space-between; margin: var(--pn-s-3) 0 var(--pn-s-2); font-size: var(--pn-text-md); color: var(--pn-ink-dark-soft); } .auth-shell__footer { text-align: center; margin-top: var(--pn-s-4); font-size: var(--pn-text-md); color: var(--pn-ink-dark-soft); } .auth-shell__footer a { color: var(--pn-violet-deep); text-decoration: none; font-weight: 500; } .auth-shell__footer a:hover { text-decoration: underline; } .auth-shell__back { display: inline-flex; align-items: center; gap: var(--pn-s-1); margin-top: var(--pn-s-4); font-size: var(--pn-text-md); color: var(--pn-ink-dark-soft); text-decoration: none; } .auth-shell__back:hover { color: var(--pn-ink-dark); } /* Password strength meter */ .auth-shell__strength { height: 4px; border-radius: var(--pn-r-pill); background: var(--pn-paper-line); overflow: hidden; margin-top: var(--pn-s-1); } .auth-shell__strength-bar { height: 100%; width: 0%; background: var(--pn-danger); transition: width 150ms ease, background-color 150ms ease; } .auth-shell__strength-label { display: block; margin-top: var(--pn-s-1); font-size: var(--pn-text-sm); color: var(--pn-ink-faint); } .is-strength-weak .auth-shell__strength-bar { width: 33%; background: var(--pn-danger); } .is-strength-medium .auth-shell__strength-bar { width: 66%; background: var(--pn-warning); } .is-strength-strong .auth-shell__strength-bar { width: 100%; background: var(--pn-success-green); } .is-strength-weak .auth-shell__strength-label { color: var(--pn-danger); } .is-strength-medium .auth-shell__strength-label { color: var(--pn-warning); } .is-strength-strong .auth-shell__strength-label { color: var(--pn-success-green); } /* Auth-shell flash messages — slimmer than the in-app .flash */ .auth-shell .flash { border-radius: var(--pn-r-md); padding: var(--pn-s-3) var(--pn-s-4); font-size: var(--pn-text-md); margin-bottom: var(--pn-s-4); border: 1px solid transparent; } .auth-shell .flash.error { background: var(--pn-danger-soft); color: var(--pn-danger); border-color: var(--pn-danger-line); } .auth-shell .flash.info { background: var(--pn-info-soft); color: var(--pn-info); border-color: var(--pn-info-line); } .auth-shell .flash.success { background: var(--pn-success-wash); color: var(--pn-success-green); border-color: color-mix(in srgb, var(--pn-success-green) 32%, transparent); } .auth-shell .flash.warning { background: var(--pn-warning-soft); color: var(--pn-warning); border-color: var(--pn-warning-line); } /* Auth shell — wide variant (terms, platform disclaimer) */ .auth-shell--wide .auth-shell__inner { max-width: 680px; } .auth-shell--wide { align-items: flex-start; padding-top: 48px; } /* Scrollable body inside an auth card (terms + platform disclaimer) */ .auth-shell__scroll-body { max-height: 400px; overflow-y: auto; border: 1px solid var(--pn-paper-line); border-radius: var(--pn-r-md); padding: var(--pn-s-4); font-size: var(--pn-text-md); line-height: 1.65; color: var(--pn-ink-dark); background: var(--pn-paper); margin-bottom: var(--pn-s-5); } .auth-shell__scroll-body h3 { font-size: var(--pn-text-md); font-weight: 600; margin: var(--pn-s-4) 0 var(--pn-s-2); } .auth-shell__scroll-body h3:first-child { margin-top: 0; } .auth-shell__scroll-body p, .auth-shell__scroll-body li { margin-bottom: var(--pn-s-2); } .auth-shell__scroll-body ul { padding-left: var(--pn-s-5); } /* Glyph illustration on waitlist_thanks */ .auth-shell__glyph { width: 96px; height: 96px; display: block; margin: 0 auto var(--pn-s-4); color: var(--pn-violet-deep); } /* Top-level flash messages (outside .auth-shell) */ .flash { padding: 11px 16px; border-radius: var(--pn-r-md); margin-bottom: 16px; font-size: var(--pn-text-base); border: 1px solid transparent; } .flash.success { background: var(--pn-success-wash); border-color: color-mix(in srgb, var(--pn-success-green) 32%, transparent); color: var(--pn-success-green); } .flash.error { background: var(--pn-danger-soft); border-color: var(--pn-danger-line); color: var(--pn-danger); } .flash.info { background: var(--pn-info-soft); border-color: var(--pn-info-line); color: var(--pn-info); } /* Buttons used by auth-shell forms (.btn / .btn-primary minimal) */ .auth-shell .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--pn-r-sm); font-size: var(--pn-text-base); font-weight: 500; cursor: pointer; border: none; text-decoration: none; font-family: var(--pn-font); transition: opacity 0.15s, background 0.15s, transform 0.1s; } .auth-shell .btn:hover { opacity: 0.88; } .auth-shell .btn-primary { background: var(--pn-violet-deep); color: #fff; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.30); } .auth-shell .btn-primary:hover { opacity: 1; background: var(--pn-violet); transform: translateY(-1px); } /* ============================================================ Below: account-page (4e) and article-review (4f) class families ported from design_handoff_postnimble_refresh_v2/static/css/postnimble.css per beta feedback bundle 2026-05-14. Logo lockup / --pn-teal intentionally NOT ported (live nav stays on existing wordmark). ============================================================ */ /* ---------- 4e. Account (workspace) page patterns ---------- The Account page is workspace-scoped, NOT brand-scoped. It uses a simpler page-head and several patterns that do not appear on brand-scoped pages: .pn-page-head--simple eyebrow + H1 left | actions right (no brand-tabs) .pn-plan-banner hero plan card with usage meters .pn-meters / .pn-meter 3-up usage row inside the banner .pn-grid-2 two equal columns for side-by-side sections .pn-brand-row one row in the brands roster .pn-member-row one row in the team list .pn-role role pill (Owner / Editor / Viewer) .pn-dl definition list for billing / profile data .pn-section--danger red-tinted danger zone variant .pn-btn--danger ghost-style danger action button */ .pn-page-head--simple { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 32px 0 22px; border-bottom: 1px solid var(--pn-rule-soft); margin-bottom: 28px; } .pn-page-head--simple .pn-page-head__title { display: flex; flex-direction: column; gap: 6px; } .pn-plan-banner { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 24px 28px; background: linear-gradient(135deg, color-mix(in oklab, var(--pn-violet) 18%, var(--pn-panel)) 0%, var(--pn-panel) 60%); border: 1px solid var(--pn-rule); border-radius: var(--pn-r-lg); margin-bottom: 22px; } .pn-plan-banner__copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .pn-plan-banner__eyebrow { font-family: var(--pn-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pn-violet-soft); } .pn-plan-banner__name { font-family: var(--pn-serif); font-size: 30px; line-height: 1; color: var(--pn-ink); letter-spacing: -0.4px; } .pn-plan-banner__name em { font-style: italic; color: var(--pn-violet); } .pn-plan-banner__sub { font-size: 13px; color: var(--pn-ink-soft); line-height: 1.5; } .pn-plan-banner__cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; } .pn-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 18px 0 0; margin-top: 16px; grid-column: 1 / -1; border-top: 1px solid color-mix(in oklab, var(--pn-rule) 70%, transparent); } .pn-meter { padding: 0 22px; border-right: 1px solid color-mix(in oklab, var(--pn-rule) 70%, transparent); } .pn-meter:first-child { padding-left: 0; } .pn-meter:last-child { border-right: none; padding-right: 0; } .pn-meter__label { font-family: var(--pn-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pn-ink-faint); margin-bottom: 6px; } .pn-meter__value { font-family: var(--pn-serif); font-size: 26px; line-height: 1; color: var(--pn-ink); margin-bottom: 8px; } .pn-meter__value small { font-size: 14px; color: var(--pn-ink-faint); margin-left: 4px; } .pn-meter__bar { height: 4px; background: var(--pn-surface); border-radius: 2px; overflow: hidden; } .pn-meter__bar-fill { height: 100%; background: var(--pn-violet); border-radius: 2px; } .pn-meter__hint { font-size: 11.5px; color: var(--pn-ink-faint); margin-top: 6px; } .pn-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .pn-brand-row { display: grid; grid-template-columns: 36px 1fr auto auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--pn-rule-soft); } .pn-brand-row:last-child { border-bottom: none; } .pn-brand-row__logo { width: 36px; height: 36px; border-radius: var(--pn-r-sm); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--pn-serif); font-weight: 700; font-size: 15px; } .pn-brand-row__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pn-brand-row__title { font-size: 14px; color: var(--pn-ink); font-weight: 600; } .pn-brand-row__meta { font-family: var(--pn-mono); font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--pn-ink-faint); } .pn-brand-row__stat { font-size: 12.5px; color: var(--pn-ink-soft); text-align: right; min-width: 80px; } .pn-brand-row__stat strong { display: block; font-family: var(--pn-serif); font-size: 18px; font-weight: 400; color: var(--pn-ink); line-height: 1; } .pn-brand-row__add { display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px dashed var(--pn-rule); margin-top: 4px; color: var(--pn-violet-soft); text-decoration: none; } .pn-brand-row__add:hover { color: var(--pn-violet); } .pn-brand-row__add-logo { width: 36px; height: 36px; border-radius: var(--pn-r-sm); border: 1px dashed var(--pn-rule); display: flex; align-items: center; justify-content: center; font-size: 18px; } .pn-member-row { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--pn-rule-soft); } .pn-member-row:last-child { border-bottom: none; } .pn-member-row__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pn-surface); border: 1px solid var(--pn-rule); color: var(--pn-ink); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .pn-member-row__name { font-size: 13.5px; color: var(--pn-ink); font-weight: 500; } .pn-member-row__email { font-family: var(--pn-mono); font-size: 11px; color: var(--pn-ink-faint); } .pn-role { font-family: var(--pn-mono); font-size: 10.5px; letter-spacing: 0.6px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--pn-rule); color: var(--pn-ink-soft); } .pn-role--owner { color: var(--pn-violet-soft); border-color: color-mix(in oklab, var(--pn-violet) 40%, transparent); } .pn-dl { display: grid; grid-template-columns: 140px 1fr; gap: 14px 18px; margin: 0; } .pn-dl dt { font-family: var(--pn-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pn-ink-faint); align-self: center; } .pn-dl dd { font-size: 13.5px; color: var(--pn-ink); margin: 0; align-self: center; } .pn-dl dd small { display: block; font-size: 11.5px; color: var(--pn-ink-faint); margin-top: 2px; } /* ---------- Settings sub-nav (left rail) — SETTINGS_SUBNAV_SPEC.md ---------- Reusable in-page section navigation for dense settings/admin screens (8+ sections). Vertical sticky rail ≥768px; horizontal scrollable pill row below. All colors are semantic tokens, so light/dark both work. */ .pn-subnav-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 18px; } .pn-subnav { position: sticky; top: 88px; /* 64px app nav + 24px breathing room */ display: flex; flex-direction: column; gap: 4px; align-self: start; } .pn-subnav__item { display: flex; align-items: center; min-height: 40px; padding: 10px 14px; border-radius: 8px; font-family: var(--pn-font); font-size: 15px; line-height: 1.3; letter-spacing: -0.005em; font-weight: 500; color: var(--ink-700); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .pn-subnav__item:hover { color: var(--ink-900); background: var(--bg-warm); } .pn-subnav__item:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; } .pn-subnav__item.is-active { color: var(--ink-900); font-weight: 600; background: var(--brand-tint); box-shadow: inset 3px 0 0 var(--brand-light); } @media (max-width: 1024px) { .pn-subnav-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; } } @media (max-width: 768px) { /* Collapse to a horizontal scrollable pill row above the content — never 8 stacked full-width rows. */ .pn-subnav-layout { display: block; } .pn-subnav { position: sticky; top: 64px; z-index: 30; flex-direction: row; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px 0; margin-bottom: 18px; background: var(--bg); } .pn-subnav__item { white-space: nowrap; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent; } .pn-subnav__item.is-active { box-shadow: none; border-color: var(--brand-light); } } /* ---------- Settings form rhythm + autofill banner ---------- .pn-form-grid / .pn-autofill / .pn-section(__title/__intro) shipped in the settings partials with no CSS at all — fields rendered in default block flow (labels flush on inputs, helper text colliding with the next group). Spacing scale: label→field 8px (.pn-field gap), field→next group 22px (grid row gap), helper 6px below its field. */ .pn-settings .pn-section { background: var(--pn-panel); border: 1px solid var(--pn-rule); border-radius: var(--pn-r-lg); padding: 26px 28px 30px; } .pn-section__title { font-family: var(--pn-serif); font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--pn-ink); margin: 0 0 6px; } .pn-section__intro { font-size: 13.5px; line-height: 1.55; color: var(--ink-500); margin: 0 0 22px; max-width: 640px; } .pn-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin-top: 24px; } .pn-form-grid .pn-field--full { grid-column: 1 / -1; } @media (max-width: 880px) { .pn-form-grid { grid-template-columns: 1fr; } } .pn-autofill { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 18px; padding: 16px 18px; background: var(--brand-tint); border: 1px solid var(--brand-soft); border-radius: 10px; margin: 4px 0 26px; } .pn-autofill__copy { display: grid; gap: 4px; flex: 1; min-width: 260px; } .pn-autofill__title { font-size: 14px; font-weight: 600; color: var(--pn-ink); } .pn-autofill__sub { font-size: 12.5px; line-height: 1.5; color: var(--ink-500); } .pn-autofill__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pn-autofill__row .pn-input { width: 240px; } .pn-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; } .pn-section__head .pn-section__title { margin: 0 0 4px; } .pn-section__head .pn-section__intro { margin: 0; max-width: 540px; } .pn-section--danger { border-color: color-mix(in oklab, #c84a3e 35%, var(--pn-rule)); } .pn-section--danger .pn-section__title { color: #e07568; } .pn-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--pn-rule-soft); } .pn-danger-row:last-child { border-bottom: none; } .pn-danger-row__copy { display: flex; flex-direction: column; gap: 2px; } .pn-danger-row__title { font-size: 13.5px; color: var(--pn-ink); font-weight: 600; } .pn-danger-row__sub { font-size: 12px; color: var(--pn-ink-faint); } /* ---------- 4f. Article Review page patterns ---------- Used by /runs//review. Two-column layout: article editor (left) + QA Issues panel (right). Article editor is a dark monospace surface — default