/* ============================================================ pubplan-overview-modal-v1.0.0.css Add-PubPlan modal styles — companion to pubplan-overview-v1.0.11.js. Load AFTER title-admin-page-design CSS in Webflow . Design tokens (matching INBXIFY brand + Studio components CSS): Primary: #5b7fff electric blue Accent: #C4A35A gold (CTA + cancel link) Teal text: #1A3A3A primary text Body BG: #FAF9F5 matches T-A page Card BG: #FFFFFF Error: #c0392b Success: #10b981 Z-index: 10000/10001 — same standard as Studio drawer per v1.0.1 of ta-studio-components (matches Content Library modal). Class prefix: .ppm- (PubPlan Modal). Distinct from .pp- (PubPlan overview rendering) and .cmp- (Studio components). ============================================================ */ /* ─── +Add a PubPlan button (in the .cm-hdr) ────────────────── */ .pp-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: transparent; color: #5b7fff; border: 1.5px solid #5b7fff; border-radius: 999px; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.1s; text-decoration: none; line-height: 1; } .pp-add-btn:hover { background: #5b7fff; color: #ffffff; } .pp-add-btn:active { transform: translateY(1px); } .pp-add-btn:focus-visible { outline: 2px solid #5b7fff; outline-offset: 2px; } /* ─── Backdrop ──────────────────────────────────────────────── */ .ppm-backdrop { position: fixed; inset: 0; background: rgba(26, 58, 58, 0.45); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: ppmFadeIn 0.18s ease-out; } @keyframes ppmFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ─── Modal shell ───────────────────────────────────────────── */ .ppm-modal { position: relative; z-index: 10001; background: #ffffff; border-radius: 12px; box-shadow: 0 12px 48px rgba(26, 58, 58, 0.25); width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto; font-family: 'DM Sans', sans-serif; animation: ppmSlideUp 0.22s ease-out; } @keyframes ppmSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ─── Header ────────────────────────────────────────────────── */ .ppm-hdr { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 14px; border-bottom: 1px solid #e8e4d8; } .ppm-hdr h3 { margin: 0; font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 600; color: #1A3A3A; letter-spacing: -0.01em; } .ppm-close { background: transparent; border: none; font-size: 24px; line-height: 1; color: #8a8a7a; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.15s, color 0.15s; } .ppm-close:hover { background: #faf9f5; color: #1A3A3A; } /* ─── Body ──────────────────────────────────────────────────── */ .ppm-body { padding: 18px 24px 8px; display: flex; flex-direction: column; gap: 16px; } .ppm-field { display: flex; flex-direction: column; gap: 6px; } .ppm-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #5a6a5a; font-weight: 600; } .ppm-help { font-size: 11px; color: #8a8a7a; line-height: 1.4; } /* ─── Inputs ────────────────────────────────────────────────── */ .ppm-input { width: 100%; padding: 10px 12px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: #1A3A3A; background: #ffffff; border: 1.5px solid #e8e4d8; border-radius: 8px; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } .ppm-input:focus { outline: none; border-color: #5b7fff; box-shadow: 0 0 0 3px rgba(91, 127, 255, 0.12); } .ppm-input[type="date"] { font-family: 'DM Mono', monospace; font-size: 13px; /* Native date picker icon — keep default, browser-styled */ } /* ─── Issue row: prefix label + number input ────────────────── */ .ppm-issue-row { display: flex; align-items: stretch; gap: 0; border: 1.5px solid #e8e4d8; border-radius: 8px; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .ppm-issue-row:focus-within { border-color: #5b7fff; box-shadow: 0 0 0 3px rgba(91, 127, 255, 0.12); } .ppm-prefix { display: flex; align-items: center; padding: 0 14px; background: #faf9f5; border-right: 1px solid #e8e4d8; font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 600; color: #1A3A3A; white-space: nowrap; user-select: none; } /* Number input inside the issue row — strip its own border, inherit row border */ .ppm-number-input { flex: 1; border: none; border-radius: 0; background: transparent; font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 500; } .ppm-number-input:focus { outline: none; border: none; box-shadow: none; } /* Hide spinners on number input — cleaner look */ .ppm-number-input::-webkit-outer-spin-button, .ppm-number-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ppm-number-input { -moz-appearance: textfield; } .ppm-preview { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: #5b7fff; margin-top: 2px; padding-left: 2px; } /* ─── Error banner ──────────────────────────────────────────── */ .ppm-error { background: #fef2f0; border: 1px solid #f5b8ad; color: #c0392b; border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.45; } .ppm-error[hidden] { display: none !important; } /* ─── Actions ───────────────────────────────────────────────── */ .ppm-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px 20px; border-top: 1px solid #e8e4d8; margin-top: 8px; } .ppm-cancel-link { font-family: 'DM Sans', sans-serif; font-size: 13px; color: #C4A35A; text-decoration: underline; cursor: pointer; transition: color 0.15s; } .ppm-cancel-link:hover { color: #a78645; } .ppm-create-btn { padding: 10px 20px; background: #5b7fff; color: #ffffff; border: none; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; min-width: 110px; } .ppm-create-btn:hover:not(:disabled) { background: #4a6ce8; } .ppm-create-btn:active:not(:disabled) { transform: translateY(1px); } .ppm-create-btn:disabled { background: #b8c4ef; cursor: not-allowed; } .ppm-create-btn:focus-visible { outline: 2px solid #5b7fff; outline-offset: 2px; } /* ─── Success banner (post-create, pre-reload) ──────────────── */ .ppm-success-banner { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 10002; padding: 12px 24px; background: #1A3A3A; color: #ffffff; border-radius: 8px; box-shadow: 0 8px 24px rgba(26, 58, 58, 0.3); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; animation: ppmSlideDown 0.25s ease-out; } .ppm-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #10b981; color: #ffffff; border-radius: 50%; font-size: 14px; font-weight: 700; } @keyframes ppmSlideDown { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ─── Empty state (zero pubplans) ───────────────────────────── */ .pp-overview-empty { padding: 48px 24px; } .pp-empty-state { background: #faf9f5; border: 1px dashed #d4cfbf; border-radius: 12px; padding: 32px 24px; text-align: center; font-family: 'DM Sans', sans-serif; font-size: 14px; color: #5a6a5a; line-height: 1.5; } .pp-empty-state strong { color: #1A3A3A; font-weight: 600; } /* ─── Mobile tweaks ─────────────────────────────────────────── */ @media (max-width: 520px) { .ppm-modal { max-width: calc(100vw - 24px); } .ppm-hdr, .ppm-body, .ppm-actions { padding-left: 18px; padding-right: 18px; } }