/* ============================================================ Vesper Atlas - Brand & Layout Styles ============================================================ Theme model (locked 2026-05-20 in the divergence pass from LMD v2.12.35): - Dark is the default. :root carries the Vesper dark-first palette. prefers-color-scheme: dark hits the same tokens. - [data-theme="light"] on swaps the tokens to a light palette lifted from the existing vesper-site (a11y-verified, consistent with the Vesper Style Guide). - User-menu toggle persists data-theme to localStorage. JS wiring lives in lm-chrome.js (the public window.LMTheme surface). - Legacy LM token names (--lm-ink, --content-bg, etc.) are kept as aliases mapped to their Vesper semantic equivalents, so the 5,000+ lines of component CSS underneath continues to compile while we replace surfaces one at a time. New Atlas components should consume the Vesper-native names directly (--text, --bg, --violet, --lavender, --amber, etc.). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;500;600&family=Lora:ital,wght@0,400;0,700;1,400&display=swap'); /* ============================================================ ARTIFACT FUTURISM retheme (2026-06-14). AF is now the single, default theme: warm paper, ink, purple leading with ochre + teal support. The dark-first palette is retired. Token NAMES are preserved so the ~11k lines of component CSS keep compiling; only the VALUES change. Crisp ink borders / removal of shadows-blur-gradients are enforced in the AF override layer (atlas-af.css), loaded last. Pre-AF snapshot: builds/archives/vesper-atlas-v0.22.3-pre-AF-reskin. ============================================================ */ :root { /* ---- AF canonical names (used by the override layer) ---- */ --paper: #F4F2EC; --paper-raised: #FBFAF6; --putty: #E7E3D6; --rule: #D8D2C2; --ink: #1B1A17; --muted: #5F5B51; --accent: #784A9D; --accent-deep: #5C3879; --ochre: #D9A93C; --ochre-deep: #7A6210; --accent3: #2E8B7F; --accent3-deep: #1F5A52; --highlight: #F7E5A3; --font-sans: 'Outfit', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --font-serif: 'Lora', Georgia, serif; --ease-mech: cubic-bezier(0.2, 0, 0, 1); /* ---- Atlas-native tokens, retargeted to AF ---- */ --bg: #F4F2EC; /* paper */ --bg2: #ECE7D9; /* tinted strip (putty-ish) */ --bg3: #FBFAF6; /* card / surface fill (paper-raised) */ --bg-elevated: #FBFAF6; /* modal / popover / dropdown */ --violet: #784A9D; /* the accent (purple leads) */ --violet-hover: #5C3879; --violet-mid: #8A6BB0; --lavender: #5C3879; /* used as text in places -> AAA deep purple */ --lavender-bright: #784A9D; /* decorative dots / accents */ --lavender-soft: rgba(120, 74, 157, 0.12); --amber: #D9A93C; /* ochre */ --amber-deep: #7A6210; /* ochre text */ --teal: #2E8B7F; --coral: #B5546E; --indigo: #5A4F8A; --status-green: #2E7D52; --status-amber: #B07A1E; --status-red: #9E3B3B; --text: #1B1A17; /* ink */ --text2: #5F5B51; /* muted */ --text3: #7A756A; /* lighter muted */ --border: #D8D2C2; /* hairline rule (crisp ink borders added in override layer) */ --border2: #E2DDCF; --border-strong: #1B1A17; /* ink, for drawn edges */ --border-hair: #E4DFD1; /* ---- Legacy LM aliases, retargeted to AF ---- */ --lm-teal: #2E8B7F; --lm-teal-2: #2E8B7F; --lm-teal-dark: #1F5A52; --lm-teal-deep: #1F5A52; --lm-orange: #B5546E; /* coral */ --lm-ink: #1B1A17; /* primary text */ --lm-mute: #5F5B51; /* secondary text */ --lm-quiet: #7A756A; /* tertiary text */ --lm-purple: #784A9D; --lm-purple-hover: #5C3879; --poppins: 'Outfit', system-ui, sans-serif; /* name kept; now Outfit */ --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --sidebar-w: 264px; --content-bg: #F4F2EC; /* paper */ --sidebar-bg: #FBFAF6; /* paper-raised */ --card-bg: #FBFAF6; /* paper-raised */ --radius: 10px; --radius-lg: 14px; color-scheme: light; } /* AF is the single theme. The legacy [data-theme="light"] toggle is kept as a harmless no-op (same AF values) so the chrome theme switch doesn't produce a half-themed state; the toggle UI is slated for removal. */ [data-theme="light"] { --bg: #F4F2EC; --bg2: #ECE7D9; --bg3: #FBFAF6; --bg-elevated: #FBFAF6; --text: #1B1A17; --text2: #5F5B51; --text3: #7A756A; --border: #D8D2C2; --border2: #E2DDCF; --border-strong: #1B1A17; --border-hair: #E4DFD1; --lavender-soft: rgba(120, 74, 157, 0.12); --lm-ink: #1B1A17; --lm-mute: #5F5B51; --lm-quiet: #7A756A; --content-bg: #F4F2EC; --sidebar-bg: #FBFAF6; --card-bg: #FBFAF6; color-scheme: light; } /* prefers-color-scheme respect: when the OS prefers dark and the user hasn't explicitly chosen light, we're already on dark by default - no override needed. The [data-theme="light"] selector is set by JS at page load based on localStorage; if nothing's stored it reads prefers-color-scheme and chooses. See lm-chrome.js LMTheme block. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--poppins); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; } /* ============================================================ LANDING PAGE ============================================================ */ .lp-shell { min-height: 100vh; display: flex; flex-direction: column; } /* v2.7.16: .lp-bar / .lp-brand / .lp-bar-spacer / .lp-bar-user CSS removed. The landing top bar is now the unified .lm-chrome from lm-chrome.css. */ /* v2.7.20: per-shell --lm-hero-max-width override removed. All non-fullwidth surfaces now share the global --lm-constrained-width from lm-chrome.css (default 880px). Hero + content both read from it so they always align. */ /* Landing content */ .lp-content { /* v2.7.23: max-width now includes the 32px horizontal padding on each side via calc(--lm-constrained-width + 64px). With border-box, the box outer is 1164px and the content area inside is exactly 1100px - matching .lm-hero-inner (max-width 1100). Project cards now align horizontally with the hero h1 and the chrome breadcrumb above. */ flex: 1; max-width: calc(var(--lm-constrained-width, 1100px) + 64px); margin: 0 auto; padding: 48px 32px; width: 100%; } .lp-heading { margin-bottom: 40px; } .lp-heading h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--lm-ink); margin-bottom: 6px; } .lp-heading p { font-size: 14px; color: var(--lm-quiet); } .lp-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .lp-section-label { font-family: var(--poppins); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-quiet); } /* Project cards */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; } .project-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: box-shadow 0.15s, transform 0.15s; cursor: pointer; } .project-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-1px); } .pc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pc-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--lm-ink); line-height: 1.3; } .pc-type-badge { flex-shrink: 0; background: rgba(0,168,170,0.1); color: var(--lm-teal-dark); border-radius: 6px; padding: 3px 9px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } .pc-progress { display: flex; flex-direction: column; gap: 8px; } .pc-progress-bar-track { height: 4px; background: rgba(0,0,0,0.06); border-radius: 99px; overflow: hidden; } .pc-progress-bar-fill { height: 100%; border-radius: 99px; background: var(--lm-teal); } .pc-progress-label { display: flex; justify-content: space-between; align-items: center; } .pc-step-label { font-size: 12px; color: var(--lm-mute); } .pc-step-label strong { color: var(--lm-ink); font-weight: 500; } .pc-pct { font-family: var(--mono); font-size: 11px; color: var(--lm-quiet); } .pc-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); } .pc-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; } .pc-status.active { color: var(--lm-teal-dark); } .pc-status.active::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lm-teal); flex-shrink: 0; } .pc-date { font-size: 12px; color: var(--lm-quiet); } /* ============================================================ PROJECT LAYOUT (sidebar + main) ============================================================ */ .project-shell { display: flex; min-height: 100vh; } /* Sidebar */ .project-sidebar { width: var(--sidebar-w); background: var(--sidebar-bg); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .ps-brand { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } .ps-brand a { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } /* v2.7.9: real Library Market wordmark SVG in the legacy project shell. v2.7.13: inverted to solid white for the dark sidebar background. */ .ps-brand-logo { display: block; height: 17px; width: auto; filter: brightness(0) invert(1); } .ps-brand .tl { color: var(--lm-teal); font-weight: 700; font-size: 14px; } .ps-brand .or { color: var(--lm-orange); font-weight: 700; font-size: 14px; } .ps-brand .lbl { color: rgba(255,255,255,0.35); font-family: var(--poppins); font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; } .ps-back { display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,0.35); font-size: 12px; transition: color 0.15s; margin-bottom: 10px; } .ps-back:hover { color: rgba(255,255,255,0.7); } .ps-back svg { width: 12px; height: 12px; } .ps-project-name { color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 600; line-height: 1.35; } .ps-project-type { display: inline-block; margin-top: 5px; background: rgba(0,168,170,0.15); color: var(--lm-teal-2); border-radius: 5px; padding: 2px 7px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; } /* Step list */ .ps-steps { flex: 1; padding: 12px 0; overflow-y: auto; } .ps-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 20px; border-left: 2px solid transparent; transition: background 0.12s, border-color 0.12s; cursor: default; position: relative; } .ps-step.clickable { cursor: pointer; } .ps-step.clickable:hover { background: rgba(255,255,255,0.04); } .ps-step.current { background: rgba(0,168,170,0.08); border-left-color: var(--lm-teal); } .ps-step-num { font-family: var(--mono); font-size: 11px; font-weight: 600; min-width: 20px; text-align: right; margin-top: 2px; flex-shrink: 0; } .ps-step.status-active .ps-step-num { color: var(--lm-teal); } .ps-step.status-gdocs .ps-step-num { color: rgba(255,255,255,0.2); } .ps-step.status-coming-soon .ps-step-num { color: rgba(255,255,255,0.25); } .ps-step.status-figma .ps-step-num { color: rgba(255,255,255,0.2); } .ps-step.status-external .ps-step-num { color: rgba(255,255,255,0.15); } .ps-step-info { flex: 1; min-width: 0; } .ps-step-name { font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ps-step.status-active .ps-step-name { color: rgba(255,255,255,0.95); } .ps-step.status-gdocs .ps-step-name { color: rgba(255,255,255,0.45); } .ps-step.status-coming-soon .ps-step-name { color: rgba(255,255,255,0.45); } .ps-step.status-figma .ps-step-name { color: rgba(255,255,255,0.4); } .ps-step.status-external .ps-step-name { color: rgba(255,255,255,0.3); } .ps-step-badge { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; border-radius: 4px; padding: 1px 6px; font-family: var(--poppins); font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .badge-active { background: rgba(0,168,170,0.18); color: var(--lm-teal-2); } .badge-gdocs { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); } .badge-coming-soon { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.25); } .badge-figma { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); } .badge-external { background: transparent; color: rgba(255,255,255,0.18); } .ps-sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; } .ps-user { display: flex; align-items: center; gap: 8px; } .ps-user .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--lm-purple); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; } .ps-user-name { font-size: 12px; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Main content area */ .project-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pm-header { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .pm-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--lm-ink); } .pm-subtitle { font-size: 13px; color: var(--lm-quiet); margin-top: 3px; } .pm-header-actions { display: flex; gap: 10px; flex-shrink: 0; } .pm-content { flex: 1; padding: 40px; } /* ============================================================ STEP CARDS (project dashboard) ============================================================ */ /* v2.10.3 cleanup: the earlier .step-grid rule that lived here was a duplicate of the canonical declaration at line ~1080 below (300px vs 330px min column). The later rule won by cascade order anyway; this one was dead. Removed in v2.10.3 dead-code pass. */ .step-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: box-shadow 0.15s; } .step-card.status-active { border-color: rgba(0,168,170,0.3); box-shadow: 0 0 0 1px rgba(0,168,170,0.15); } .step-card.status-active:hover { box-shadow: 0 4px 20px rgba(0,168,170,0.12), 0 0 0 1px rgba(0,168,170,0.2); } .step-card.status-active { cursor: pointer; } .sc-num-row { display: flex; align-items: center; justify-content: space-between; } .sc-num { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } .step-card.status-active .sc-num { color: var(--lm-teal); } .step-card.status-gdocs .sc-num { color: var(--lm-quiet); } .step-card.status-coming-soon .sc-num { color: var(--lm-quiet); } .step-card.status-figma .sc-num { color: var(--lm-quiet); } .step-card.status-external .sc-num { color: rgba(0,0,0,0.2); } .sc-badge { border-radius: 5px; padding: 2px 7px; font-family: var(--poppins); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .sc-badge.badge-active { background: rgba(0,168,170,0.1); color: var(--lm-teal-dark); } .sc-badge.badge-gdocs { background: rgba(0,0,0,0.05); color: var(--lm-quiet); } .sc-badge.badge-coming-soon { background: rgba(0,0,0,0.04); color: var(--lm-quiet); } .sc-badge.badge-figma { background: rgba(70,50,135,0.08); color: var(--lm-purple); } .sc-badge.badge-external { background: transparent; color: rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.1); } .sc-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; } .step-card.status-active .sc-name { color: var(--lm-ink); } .step-card.status-gdocs .sc-name { color: var(--lm-mute); } .step-card.status-coming-soon .sc-name { color: var(--lm-mute); } .step-card.status-figma .sc-name { color: var(--lm-mute); } .step-card.status-external .sc-name { color: rgba(0,0,0,0.3); } .sc-desc { font-size: 12px; line-height: 1.5; color: var(--lm-quiet); } .step-card.status-external .sc-desc { color: rgba(0,0,0,0.25); } .sc-action { margin-top: auto; padding-top: 4px; } .sc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 7px; font-size: 12px; font-weight: 500; border: none; transition: background 0.15s, color 0.15s; } .sc-btn.btn-active { background: var(--lm-teal); color: #fff; } .sc-btn.btn-active:hover { background: var(--lm-teal-dark); } .sc-btn.btn-gdocs { background: rgba(0,0,0,0.05); color: var(--lm-mute); } .sc-btn.btn-gdocs:hover { background: rgba(0,0,0,0.09); } .sc-btn.btn-disabled { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.25); cursor: not-allowed; } /* Work-log balance line on step cards (Retainer project type). Shows remaining hours against the purchased balance. v2.7.25 simplified the line to " hours remaining" and dropped the monospace/teal treatment. */ .sc-balance { font-size: 11.5px; line-height: 1.5; color: var(--lm-quiet); padding-top: 4px; } .sc-balance-num { color: var(--lm-ink); font-weight: 600; } .sc-balance-empty { font-style: italic; color: rgba(0,0,0,0.3); } /* ============================================================ STUB PAGES ============================================================ */ .stub-shell { flex: 1; display: flex; align-items: center; justify-content: center; padding: 80px 40px; } .stub-content { text-align: center; max-width: 480px; } .stub-icon { width: 64px; height: 64px; border-radius: 16px; background: rgba(0,168,170,0.08); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .stub-icon svg { width: 28px; height: 28px; color: var(--lm-teal); } .stub-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--lm-ink); margin-bottom: 10px; } .stub-desc { font-size: 14px; line-height: 1.6; color: var(--lm-quiet); margin-bottom: 28px; } .stub-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,168,170,0.08); color: var(--lm-teal-dark); border-radius: 99px; padding: 6px 14px; font-size: 12px; font-weight: 500; } /* ============================================================ SHARED UTILITIES ============================================================ v2.5.5: button system consolidated. - .btn-primary: filled purple, white text, BOLD (700), Poppins. - .btn-secondary: outline-purple on light bg, BOLD (700), Poppins. - .btn-ghost: transparent w/ gray outline, used for Cancel / tertiary. Topbar variants live in the .lm-topbar block at the bottom of this file (sit on dark sidebar-bg, so .btn-secondary uses white border instead of purple to stay readable). ============================================================ */ .btn-primary, .btn-share, .btn-new-project { display: inline-flex; align-items: center; gap: 6px; background: var(--lm-purple); color: #fff; border: 1.5px solid var(--lm-purple); border-radius: 7px; padding: 7.5px 16.5px; font-size: 13px; font-weight: 700; font-family: var(--poppins); letter-spacing: 0.005em; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn-primary:hover, .btn-share:hover, .btn-new-project:hover { background: var(--lm-purple-hover); border-color: var(--lm-purple-hover); } .btn-primary:disabled { background: var(--lm-quiet); border-color: var(--lm-quiet); cursor: not-allowed; } .btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--lm-purple); border: 1.5px solid var(--lm-purple); border-radius: 7px; padding: 7.5px 16.5px; font-size: 13px; font-weight: 700; font-family: var(--poppins); letter-spacing: 0.005em; cursor: pointer; text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-secondary:hover { background: var(--lm-purple); color: #fff; } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--lm-mute); border: 1.5px solid var(--border); border-radius: 7px; padding: 7.5px 16.5px; font-size: 13px; font-weight: 600; font-family: var(--poppins); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .btn-ghost:hover { border-color: rgba(0,0,0,0.2); color: var(--lm-ink); background: rgba(0,0,0,0.02); } /* ============================================================ NETLIFY IDENTITY AUTH OVERLAY ============================================================ */ .auth-overlay { position: fixed; inset: 0; background: var(--sidebar-bg); display: flex; align-items: center; justify-content: center; z-index: 9999; flex-direction: column; gap: 24px; } .auth-card { background: #1e1e1c; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 40px; width: 100%; max-width: 380px; text-align: center; } .auth-brand { margin-bottom: 28px; } .auth-brand .tl { color: var(--lm-teal); font-weight: 700; font-size: 20px; } .auth-brand .or { color: var(--lm-orange); font-weight: 700; font-size: 20px; } .auth-brand .lbl { display: block; margin-top: 6px; color: rgba(255,255,255,0.3); font-family: var(--poppins); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .auth-heading { color: rgba(255,255,255,0.9); font-size: 17px; font-weight: 600; margin-bottom: 8px; } .auth-sub { color: rgba(255,255,255,0.35); font-size: 13px; line-height: 1.5; margin-bottom: 28px; } .btn-signin { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--lm-purple); color: #fff; border: none; border-radius: 9px; padding: 13px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn-signin:hover { background: var(--lm-purple-hover); } .auth-note { color: rgba(255,255,255,0.2); font-size: 11px; margin-top: 16px; } .auth-version { color: rgba(255,255,255,0.18); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.05em; margin-top: 8px; } /* ============================================================ v2.1.0 - PROJECT DASHBOARD ============================================================ */ /* Status color tokens. Tweak these post-deploy to dial in the look. */ :root { --status-not-applicable-fg: #8a857c; --status-not-applicable-bg: rgba(0,0,0,0.04); --status-not-started-fg: #5a574e; --status-not-started-bg: rgba(0,0,0,0.06); --status-active-fg: #ffffff; --status-active-bg: var(--lm-orange); --status-pending-fg: #6a4a00; --status-pending-bg: #ffe7a3; /* v2.10.9: revisions-requested - client has sent feedback, waiting on LM to respond. Warm coral matches the "needs attention" semantic while staying distinct from pending-feedback's amber tone. */ --status-revisions-fg: #ffffff; --status-revisions-bg: var(--lm-coral, #ef5223); --status-approved-fg: #ffffff; --status-approved-bg: var(--lm-teal); /* v2.5.6: 'complete' is a terminal status alongside 'approved' but carries a different semantic - work that's done and finalized, not work that went through a client approval cycle (launches, training, external phases). Slate/charcoal reads as "finished and at rest". */ --status-complete-fg: #ffffff; --status-complete-bg: #4f5663; } /* ---- Dashboard shell ---- */ .dashboard-shell { /* v2.7.20: per-shell --lm-hero-max-width override removed; .dash-main below uses --lm-constrained-width directly. Hero + content auto-align. */ min-height: 100vh; display: flex; flex-direction: column; background: var(--content-bg); } /* v2.7.16: legacy dashboard topbar + project header CSS removed. The dashboard top bar is the unified .lm-chrome from lm-chrome.css. The project header now uses the .lm-hero pattern, written by renderHeader() in dashboard.js. Removed classes: .dash-topbar, .dash-topbar-inner, .dash-brand, .dash-signout .dash-topbar-actions, .dash-topbar-readonly .dash-project-header, .dash-project-info, .dash-project-logo, .dash-project-logo-placeholder, .dash-project-name, .dash-project-meta .dash-type-chips, .dash-type-chip*, .dash-project-edit-gear The #dash-project-header section element remains as a JS mount point for renderHeader(); no styling needed on it since the .lm-hero children handle their own layout. */ /* v2.5.7: accordion header now hosts the real type badge inline with the title. Same .pc-type-badge base used by landing + admin, with a small modifier so the proportions read inside the larger heading. */ .dash-type-title-badge { font-family: var(--poppins); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; } /* Main */ .dash-main { /* v2.7.23: max-width includes 32px h padding on each side so the content area aligns with the hero and chrome breadcrumb. */ max-width: calc(var(--lm-constrained-width, 1100px) + 64px); margin: 0 auto; width: 100%; padding: 16px 32px 64px; } .dash-loading { text-align: center; padding: 64px 20px; color: var(--lm-quiet); font-size: 14px; } .dash-error { color: var(--lm-orange); } /* Type sections */ .dash-type-section { margin-top: 36px; } .dash-type-section:first-child { margin-top: 12px; } /* v2.5.5: product sections collapse into accordions. Default state is collapsed; clicking the header toggles. Clicking a type chip in the project header also opens the matching section. */ .dash-type-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 6px; border-bottom: 1px solid var(--border); margin-bottom: 20px; cursor: pointer; user-select: none; background: transparent; border-radius: 6px 6px 0 0; transition: background 0.12s; } .dash-type-header:hover { background: rgba(0,0,0,0.025); } .dash-type-header:focus-visible { outline: 2px solid var(--lm-purple); outline-offset: 2px; } .dash-type-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .dash-type-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--lm-mute); transition: transform 0.18s ease; transform: rotate(90deg); } .dash-type-section.collapsed .dash-type-chevron { transform: rotate(0deg); } .dash-type-section.collapsed .dash-type-header { margin-bottom: 0; } .dash-type-section.collapsed .step-grid, .dash-type-section.collapsed .step-rows, .dash-type-section.collapsed .dash-jira-body, .dash-type-section.collapsed .dash-lc-body { display: none; } .dash-type-title { font-family: var(--poppins); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--lm-ink); } .dash-type-abbr { color: var(--lm-quiet); font-weight: 500; font-size: 14px; margin-left: 4px; } .dash-type-progress { font-family: var(--poppins); font-size: 11px; font-weight: 600; color: var(--lm-quiet); letter-spacing: 0.04em; text-transform: uppercase; } /* v2.5.6: Jira Tickets coming-soon section. Staff-only; renders below the product accordions. v2.7.25: Jira is now an accordion sharing the .dash-type-section shell (chevron, header hover, click-to-toggle). The badge moves into the accordion header alongside the title; the table preview + foot live inside a .dash-jira-body wrapper that hides when collapsed. */ .dash-jira-section { /* margin-top inherited from .dash-type-section */ } .dash-jira-section .dash-type-title { /* Slightly muted compared to active type sections - reinforces the "coming soon" state without changing the accordion structure. */ color: var(--lm-mute); } .dash-jira-badge { font-family: var(--poppins); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #b26a00; background: rgba(255,167,38,0.14); padding: 3px 9px; border-radius: 999px; } .dash-jira-table-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; opacity: 0.55; pointer-events: none; user-select: none; } .dash-jira-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--lm-mute); } .dash-jira-table thead th { text-align: left; font-family: var(--poppins); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lm-quiet); padding: 10px 14px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.02); } .dash-jira-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); } .dash-jira-table tbody tr:last-child td { border-bottom: none; } .dash-jira-table .jira-cell-ticket { font-family: var(--mono); color: var(--lm-quiet); } .dash-jira-foot { margin-top: 10px; font-size: 12px; color: var(--lm-quiet); font-style: italic; } /* v2.12.23: Learning Center coming-soon section. Sits above the Jira Tickets section, staff-only. Mirrors the jira-section accordion shell but the preview body is a four-up grid of content category cards instead of a placeholder table. Body is rendered partially greyed + transparent so it reads as "not real yet" - the .dash-lc-body opacity knocks back everything inside while keeping the section header at full strength so the "Coming soon" badge still pops. */ .dash-lc-section .dash-type-title { display: inline-flex; align-items: center; gap: 10px; /* v2.12.26: muted to match Jira Tickets ("coming soon" treatment). */ color: var(--lm-mute); } .dash-lc-body { padding: 18px 24px 20px; opacity: 0.55; filter: saturate(0.7); } .dash-lc-intro { margin: 0 0 14px; font-size: 13px; color: var(--lm-mute); line-height: 1.5; } .dash-lc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .dash-lc-card { background: var(--paper, #f6f5f0); border: 1px solid var(--hair, rgba(0,0,0,0.10)); border-radius: 8px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 6px; } .dash-lc-card-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(70,50,135,0.10); color: #463287; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .dash-lc-card-icon svg { width: 16px; height: 16px; } .dash-lc-card-title { font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; color: var(--lm-ink); letter-spacing: -0.005em; } .dash-lc-card-desc { font-size: 12px; color: var(--lm-mute); line-height: 1.45; } /* Step grid v2.7.28: minmax min raised 260px -> 330px to force 3 columns at the 1100px constrained content width (was 4 columns at 260px). Math: - 4 cols at 1100px inner needs min <= (1100 - 3*14) / 4 = 264.5px, so 260px allowed it - 3 cols at 1100px inner needs min <= (1100 - 2*14) / 3 = 357.3px, so 330px is comfortable - 4 cols at 330px would need >= 4*330 + 3*14 = 1362px, mathematically impossible inside 1100px Cards drop to 2 columns naturally below ~700px inner width, then to 1 at the 720px media query below. Behavior change is cards-view only; .step-rows is unaffected. */ .step-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; } .step-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; position: relative; transition: border-color 0.15s, box-shadow 0.15s; } .step-card:hover { border-color: rgba(0,0,0,0.14); } .step-card.status-not-applicable { opacity: 0.6; background: var(--status-not-applicable-bg); } .step-card.status-not-applicable .sc-name, .step-card.status-not-applicable .sc-desc { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(0,0,0,0.3); } .sc-num-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .sc-num { font-family: var(--poppins); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--lm-quiet); text-transform: uppercase; } .sc-badge { font-family: var(--poppins); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; } .badge-not-applicable { color: var(--status-not-applicable-fg); background: var(--status-not-applicable-bg); } .badge-not-started { color: var(--status-not-started-fg); background: var(--status-not-started-bg); } .badge-active { color: var(--status-active-fg); background: var(--status-active-bg); } .badge-pending-feedback { color: var(--status-pending-fg); background: var(--status-pending-bg); } .badge-revisions-requested { color: var(--status-revisions-fg); background: var(--status-revisions-bg); } .badge-approved { color: var(--status-approved-fg); background: var(--status-approved-bg); } .badge-complete { color: var(--status-complete-fg); background: var(--status-complete-bg); } .sc-gear { margin-left: auto; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px; color: var(--lm-quiet); display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s, border-color 0.15s; } .sc-gear:hover { color: var(--lm-ink); background: rgba(0,0,0,0.04); border-color: var(--border); } /* v2.9.4: invisible placeholder used by renderStepRow and renderStepCard to reserve the gear column when a step's gear is suppressed (sitemap / design-proofs / work-log - programmatic steps where the tool drives the state). Keeps the status badge and right-edge alignment consistent across rows / cards that do and don't have a gear. Width matches the gear button's effective rendered width (14px svg + 4px*2 padding + 1px*2 border + a hair for the flex box). */ .sc-gear-placeholder { width: 26px; height: 26px; flex-shrink: 0; } .step-card.readonly .sc-gear { display: none; } /* v2.7.0: disabled step card - Staff view when enabled === false on the step template or its backing tool. Visible but non-interactive. */ .step-card.is-disabled-for-viewer { opacity: 0.42; cursor: not-allowed; } .step-card.is-disabled-for-viewer .sc-action, .step-card.is-disabled-for-viewer .sc-gear { pointer-events: none; } .step-card.is-disabled-for-viewer:hover { border-color: var(--border); box-shadow: none; } .sc-action-disabled { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lm-mute); padding: 7px 14px; border-radius: 6px; background: rgba(0,0,0,0.04); border: none; cursor: not-allowed; font-family: 'JetBrains Mono', ui-monospace, monospace; } .sc-name { font-size: 15px; font-weight: 600; color: var(--lm-ink); letter-spacing: -0.01em; line-height: 1.25; } .sc-desc { font-size: 12.5px; color: var(--lm-mute); line-height: 1.45; flex: 1; } .sc-action { margin-top: 6px; display: block; } .sc-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--poppins); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 7px; transition: background 0.15s, color 0.15s; } .sc-btn.btn-primary { background: var(--lm-purple); color: #fff; } .sc-btn.btn-primary:hover { background: var(--lm-purple-hover); } .sc-btn.btn-disabled { background: rgba(0,0,0,0.04); color: var(--lm-quiet); cursor: not-allowed; } /* ============================================================ v2.7.26 - Horizontal row layout for the step list Alternative to .step-grid / .step-card, chosen via the per-user toggle in the avatar dropdown (localStorage key: lm_dashboard_layout, default 'rows'). Each row is one step laid out left-to-right: [ title + balance-pill | description ] [ status pill ] [ action ] [ gear ] Status / asset / readonly / is-disabled-for-viewer modifier classes mirror .step-card so the shared .sc-badge / .sc-gear / .sc-action / .sc-action-disabled rules continue to apply. ============================================================ */ .step-rows { display: flex; flex-direction: column; gap: 8px; } .dash-step-row { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: center; gap: 14px; transition: border-color 0.15s, box-shadow 0.15s; } .dash-step-row:hover { border-color: rgba(0,0,0,0.14); } .dash-step-row.status-not-applicable { opacity: 0.6; background: var(--status-not-applicable-bg); } .dash-step-row.status-not-applicable .dsr-name, .dash-step-row.status-not-applicable .dsr-desc { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(0,0,0,0.3); } .dash-step-row.is-disabled-for-viewer { opacity: 0.42; cursor: not-allowed; } .dash-step-row.is-disabled-for-viewer .sc-action, .dash-step-row.is-disabled-for-viewer .sc-gear { pointer-events: none; } .dash-step-row.is-disabled-for-viewer:hover { border-color: var(--border); box-shadow: none; } .dash-step-row.readonly .sc-gear { display: none; } .dsr-content { flex: 1; min-width: 0; } .dsr-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; flex-wrap: wrap; } .dsr-name { font-size: 15px; font-weight: 600; color: var(--lm-ink); letter-spacing: -0.01em; line-height: 1.25; } .dash-step-row.status-gdocs .dsr-name, .dash-step-row.status-coming-soon .dsr-name, .dash-step-row.status-figma .dsr-name { color: var(--lm-mute); } .dash-step-row.status-external .dsr-name { color: rgba(0,0,0,0.3); } .dsr-desc { font-size: 12.5px; color: var(--lm-mute); line-height: 1.45; margin: 0; } .dash-step-row.status-external .dsr-desc { color: rgba(0,0,0,0.25); } /* Balance pill inside the title row. Reuses the .sc-balance markup from renderActionButton; these descendant rules reshape it from the card-context block into an inline grey pill that sits next to the title. Works for both work-log balance ("12 hours remaining") and design-proofs chips ("3 of 5 proofs approved"). */ .dash-step-row .sc-balance { display: inline-flex; align-items: center; background: rgba(0,0,0,0.04); color: var(--lm-ink); font-size: 12px; padding: 2px 10px; border-radius: 999px; line-height: 1.5; flex-shrink: 0; } .dash-step-row .sc-balance-num { color: var(--lm-ink); font-weight: 600; margin-right: 3px; } .dash-step-row .sc-balance-empty { color: var(--lm-quiet); font-style: italic; background: rgba(0,0,0,0.03); } /* v2.11.0 Phase C: role-aware "needs revisions / needs feedback" chip that sits beside the .sc-balance pill on design-proofs dashboard rows. Staff variant counts proofs at revisions-requested; client variant counts pending-feedback. Uses the amber warn tokens from v2.10.14 D-015 to stay consistent with the platform warn-banner system. Markup: emitted by renderActionButton in dashboard.js. */ .dash-step-row .sc-revisions-chip { display: inline-flex; align-items: center; background: var(--lmc-amber-pale); color: var(--lmc-amber-dark); border: 1px solid var(--lmc-amber-border); font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; line-height: 1.5; flex-shrink: 0; } .sc-revisions-chip-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lmc-amber-dark); margin-right: 6px; flex-shrink: 0; } /* Status pill column. Fixed width keeps the action button at a consistent x across rows; right-alignment within the slot means short pills don't look stranded. Sized to fit the longest expected label. */ .dsr-status { width: 130px; flex-shrink: 0; text-align: right; } /* Action slot: fixed width so the status pill sits at the same column whether or not there is a tool button on this row. The slot is always rendered (even when empty) so the layout never shifts. */ .dsr-action-slot { width: 100px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; } /* Reset card-context margin-top on .sc-action inside the slot. */ .dsr-action-slot .sc-action { margin-top: 0; display: inline-block; } /* Gear: lives at the far right of the row directly as a flex child (no sc-num-row wrapper). Reset the card-context margin-left: auto. */ .dash-step-row .sc-gear { margin-left: 0; flex-shrink: 0; } /* ---- Modals ---- */ /* Ensure [hidden] always wins over any display property set by a class. Without this, display:flex on .modal-backdrop overrides the browser's built-in [hidden]{display:none} and modals appear on page load. */ [hidden] { display: none !important; } .modal-backdrop { position: fixed; inset: 0; background: rgba(10,10,10,0.55); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-card { background: #fff; border-radius: 14px; padding: 28px 28px 22px; width: 100%; max-width: 480px; position: relative; box-shadow: 0 12px 40px rgba(0,0,0,0.18); /* v2.12.27 bug fix: cap the modal height to the viewport so dense content (Add Product with many products + step seed picker + checkbox list) can't push the action buttons below the fold. The .modal-backdrop has 20px padding, so 40px total subtracted from 100vh leaves a comfortable gap above + below. The card is a flex column; the scrollable middle is anything inside a .modal-card-body wrapper (added selectively where needed). */ max-height: calc(100vh - 40px); display: flex; flex-direction: column; } /* When a modal has many form rows, wrap the middle section in .modal-card-body so the title + action row stay pinned at top and bottom while the body scrolls. Negative margins keep the scrollbar flush with the card edges instead of indenting. */ .modal-card-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin: 0 -28px; padding: 0 28px; } /* Modal action rows that should stay visible at the bottom of a scrolling card. Apply to the existing .modal-actions wrapper. */ .modal-card .modal-actions { flex-shrink: 0; margin-top: auto; } .modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: none; color: var(--lm-quiet); padding: 4px; display: flex; border-radius: 6px; transition: color 0.15s, background 0.15s; } .modal-close:hover { color: var(--lm-ink); background: rgba(0,0,0,0.04); } .modal-title { font-family: var(--poppins); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--lm-ink); margin: 0; } .modal-step-name { font-size: 13px; color: var(--lm-mute); margin-top: 4px; margin-bottom: 18px; } .modal-field { margin-bottom: 16px; } .modal-label { display: block; font-family: var(--poppins); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lm-quiet); margin-bottom: 8px; } .modal-status-options { display: flex; flex-wrap: wrap; gap: 6px; } .status-option { font-family: var(--poppins); font-size: 12px; font-weight: 500; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--lm-mute); transition: border-color 0.15s, background 0.15s, color 0.15s; } .status-option:hover { border-color: rgba(0,0,0,0.14); color: var(--lm-ink); } .status-option.selected { border-color: var(--lm-purple); background: var(--lm-purple); color: #fff; } .modal-url-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 7px; font-family: var(--mono); font-size: 12.5px; color: var(--lm-ink); background: #fff; transition: border-color 0.15s; } .modal-url-input:focus { outline: none; border-color: var(--lm-purple); } .modal-help { font-size: 11.5px; color: var(--lm-quiet); margin-top: 6px; } .modal-actions { margin-top: 22px; display: flex; justify-content: flex-end; gap: 8px; } .modal-error { margin-top: 14px; padding: 10px 12px; background: rgba(240, 82, 35, 0.08); border-left: 3px solid var(--lm-orange); color: var(--lm-orange); font-size: 12.5px; border-radius: 4px; } /* Responsive */ @media (max-width: 720px) { .dash-main { padding-left: 20px; padding-right: 20px; } .step-grid { grid-template-columns: 1fr; } } /* v2.1.0 - Landing page additions */ .pc-type-badges { display: flex; gap: 4px; } /* v2.6.5: Poppins + larger size for landing-page project-card badges, per Steven. Other places that use .pc-type-badge (dashboard project header, admin Projects list, admin Project Types row) keep the default mono styling - this override scopes to .pc-type-badges (plural container) so only the landing-page case picks up the new look. */ .pc-type-badges .pc-type-badge { font-family: var(--poppins); font-size: 12px; font-weight: 600; padding: 4px 11px; background: var(--lm-ink); color: #fff; border-radius: 999px; letter-spacing: 0.02em; } .lp-signout { margin-left: 16px; color: rgba(255,255,255,0.4); font-size: 12px; padding: 5px 10px; border-radius: 6px; transition: color 0.15s, background 0.15s; } .lp-signout:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.04); } .lp-loading { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: var(--lm-quiet); font-size: 13px; } .lp-error { color: var(--lm-orange); } /* ============================================================ v2.2.0 - ADMIN INTERFACE ============================================================ */ .admin-shell { /* v2.7.20: per-shell --lm-hero-max-width override removed; .admin-main below uses --lm-constrained-width directly. Hero + content auto-align. */ min-height: 100vh; display: flex; flex-direction: column; background: var(--content-bg); } /* v2.7.16: admin header + tabs were dark-on-sidebar-bg before the chrome refactor. The hero handles the page heading now (h1 + lede). The tabs live inside .lm-hero-secondary, so we only style .admin-tabs / .admin-tab here as a light, tab-row component. .admin-header and .admin-tabs-bar are gone from markup. */ .admin-tabs { display: flex; gap: 4px; height: 100%; align-items: stretch; } .admin-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 0 14px; font-family: var(--poppins); font-size: 13px; font-weight: 500; color: var(--lm-mute); cursor: pointer; transition: color 0.12s, border-color 0.12s; } .admin-tab:hover { color: var(--lm-ink); } .admin-tab.active { color: var(--lm-ink); border-bottom-color: var(--lm-teal); font-weight: 600; } /* Main content */ .admin-main { /* v2.7.23: max-width includes 32px h padding on each side so the content area aligns with the hero and chrome breadcrumb. */ max-width: calc(var(--lm-constrained-width, 1100px) + 64px); margin: 0 auto; width: 100%; padding: 28px 32px 64px; } .admin-panel-actions { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .admin-panel-title { font-size: 17px; font-weight: 600; color: var(--lm-ink); margin: 0; } /* Form card */ .admin-form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; } .admin-form-title { font-size: 14px; font-weight: 600; color: var(--lm-ink); margin: 0 0 16px; } .admin-form-row { margin-bottom: 14px; } /* v2.5.2: color picker + hex text + clear button laid out inline */ .admin-color-row { display: flex; align-items: center; gap: 10px; } .admin-color-picker { width: 44px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: transparent; cursor: pointer; flex-shrink: 0; } .admin-color-hex { width: 130px !important; flex-shrink: 0; } .admin-label { display: block; font-size: 12px; font-weight: 500; color: var(--lm-quiet); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .admin-label-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--lm-quiet); opacity: 0.8; } .admin-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-family: var(--poppins); font-size: 13px; color: var(--lm-ink); background: #fff; transition: border-color 0.15s; } .admin-input:focus { outline: none; border-color: var(--lm-purple); } .admin-mono { font-family: var(--mono); } .admin-select { appearance: none; cursor: pointer; } /* v2.6.5: two-input row for compound fields like Client Contact (display name + email). Stacks on narrow viewports. v2.8.1: Client Contact migrated to the multi-row Client Team editor below; this rule stays in case other admin forms reuse the pattern. */ .admin-input-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 560px) { .admin-input-pair { grid-template-columns: 1fr; } } /* v2.10.0 WIP B: Client Team editor - stacked two-row layout. Used in three places: admin new-project form, admin edit-project modal, dashboard edit-project modal. Markup generated by JS. Two row types coexist in the same list: - .ct-row-new : unsaved contact being typed in. Row 1 = name + email + remove. Row 2 = "Send invite on save" checkbox. No card chrome. - .ct-card : saved contact (has a real server-side inviteId). Row 1 = name + locked email + remove. Row 2 = status pill + action buttons. Card chrome. */ .admin-client-team-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } /* Unsaved (new) contact row - flat, no card */ .ct-row-new { display: grid; grid-template-columns: 1fr 1fr auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 6px; align-items: center; } .ct-row-new .ct-r-name { grid-column: 1; grid-row: 1; } .ct-row-new .ct-r-email { grid-column: 2; grid-row: 1; } .ct-row-new .ct-r-remove { grid-column: 3; grid-row: 1; align-self: center; } .ct-row-new .ct-r-check { grid-column: 1 / 3; grid-row: 2; } /* Saved contact card */ .ct-card { background: #f9f8f6; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 8px; align-items: center; } .ct-card .ct-r-name { grid-column: 1; grid-row: 1; } .ct-card .ct-r-email { grid-column: 2; grid-row: 1; } .ct-card .ct-r-remove { grid-column: 3; grid-row: 1; align-self: center; } .ct-card .ct-r-meta { grid-column: 1 / 3; grid-row: 2; display: flex; align-items: center; gap: 8px; } /* Locked email (once an invite has been sent the address is immutable) */ .admin-input.ct-locked { background: #f5f4f1; color: var(--lm-mute); cursor: default; border-color: rgba(0, 0, 0, 0.07); } /* Remove button - compact square */ .ct-remove-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; padding: 0; color: var(--lm-quiet); border-color: var(--border); background: transparent; } .ct-remove-btn:hover { color: #B91C1C; border-color: rgba(185, 28, 28, 0.35); background: rgba(185, 28, 28, 0.04); } /* "Send invite on save" checkbox label */ .ct-invite-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--lm-mute); cursor: pointer; user-select: none; padding: 2px 0; } .ct-invite-check input[type="checkbox"] { width: 14px; height: 14px; border-radius: 3px; accent-color: var(--lm-purple); cursor: pointer; flex: 0 0 auto; margin: 0; } .ct-invite-check:has(input:checked) { color: var(--lm-purple); font-weight: 500; } /* Status pills */ .ct-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 10px 3px 8px; border-radius: 999px; line-height: 1.4; white-space: nowrap; } .ct-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .ct-status-not-invited { background: rgba(138, 133, 124, 0.14); color: var(--lm-mute); } .ct-status-invited { background: rgba(240, 82, 35, 0.13); color: var(--lm-orange); } .ct-status-accepted { background: rgba( 0, 168, 170, 0.16); color: var(--lm-teal-dark); } .ct-status-revoked { background: rgba(185, 28, 28, 0.10); color: #B91C1C; } .ct-status-expired { background: rgba(138, 133, 124, 0.14); color: var(--lm-quiet); text-decoration: line-through; text-decoration-color: rgba(138, 133, 124, 0.55); } /* Action buttons in the meta row - inherit admin-btn-sm sizing */ .ct-action-revoke { color: #B91C1C; border-color: rgba(185, 28, 28, 0.22); } .ct-action-revoke:hover { background: rgba(185, 28, 28, 0.05); border-color: rgba(185, 28, 28, 0.4); } /* "+ Add contact" button sits below the list */ .admin-client-team-add { margin-top: 2px; } .admin-type-checks { display: flex; flex-wrap: wrap; gap: 10px; } .admin-check-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lm-ink); cursor: pointer; } .admin-check-label input { cursor: pointer; } /* v2.7.8: project-type pills used in the New Project form, the admin Edit Project modal, and the in-page Edit Project modal on the project dashboard. Multi-select - each pill toggles independently. The active state fills the pill with the type's brand color; the off state is an outlined chip that hints the color on hover. The pill's --type-pill-color custom property is set inline per pill so admin-defined custom type colors work without any CSS-per-type. */ .type-pill { --type-pill-color: #A0A0A0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: white; border: 1.5px solid #d8d3c8; border-radius: 999px; font-family: var(--poppins); font-size: 13px; font-weight: 500; color: var(--lm-mute); cursor: pointer; user-select: none; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease; } .type-pill:hover { border-color: var(--type-pill-color); color: var(--lm-ink); } .type-pill:focus-visible { outline: 2px solid var(--lm-purple); outline-offset: 2px; } .type-pill.is-on { background: var(--type-pill-color); border-color: var(--type-pill-color); color: white; } .type-pill.is-on:hover { opacity: 0.92; } .type-pill-abbr { font-family: var(--monospace, ui-monospace, monospace); font-size: 10.5px; font-weight: 600; opacity: 0.7; letter-spacing: 0.04em; } .type-pill.is-on .type-pill-abbr { opacity: 0.9; } .admin-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .admin-form-error { margin-top: 10px; padding: 8px 10px; background: rgba(240,82,35,0.08); border-left: 3px solid var(--lm-orange); color: var(--lm-orange); font-size: 12.5px; border-radius: 4px; } /* List rows */ .admin-list { display: flex; flex-direction: column; gap: 6px; } .admin-group-header { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lm-quiet); padding: 14px 4px 4px; margin-top: 4px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .admin-group-header:first-child { padding-top: 0; margin-top: 0; } .admin-row { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; align-items: center; gap: 12px; transition: border-color 0.15s; } .admin-row:hover { border-color: rgba(0,0,0,0.14); } .admin-row-order { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--lm-quiet); min-width: 28px; text-align: center; } /* v2.5.6: step-row drag handle + drop indicators. Whole row is draggable, the grip is just the visual affordance. Drop indicators are 2px borders on the top/bottom edges of the hover target; we use box-shadow inset so we don't shift layout. */ .admin-step-row { cursor: grab; } .admin-step-row:active, .admin-step-row.dragging { cursor: grabbing; } .admin-step-row.dragging { opacity: 0.5; } .admin-step-row .admin-row-order { display: flex; align-items: center; gap: 6px; min-width: 42px; } .admin-drag-grip { color: rgba(0,0,0,0.22); flex-shrink: 0; transition: color 0.15s; } .admin-step-row:hover .admin-drag-grip { color: var(--lm-mute); } .admin-row-order-num { min-width: 14px; text-align: right; } .admin-step-row.drag-over-before { box-shadow: inset 0 2px 0 0 var(--lm-purple); } .admin-step-row.drag-over-after { box-shadow: inset 0 -2px 0 0 var(--lm-purple); } /* v2.12.13: Products tab drag handle. Mirrors the step-row pattern above; the drag affordance is a separate cell on the left so the abbreviation pill (which used to be the order cell) can stay visually prominent and not feel like the drag target. */ .admin-type-row { cursor: grab; } .admin-type-row:active, .admin-type-row.dragging { cursor: grabbing; } .admin-type-row.dragging { opacity: 0.5; } .admin-row-drag { display: flex; align-items: center; justify-content: center; width: 18px; margin-right: -4px; } .admin-type-row .admin-drag-grip { color: rgba(0,0,0,0.22); } .admin-type-row:hover .admin-drag-grip { color: var(--lm-mute); } .admin-type-row.drag-over-before { box-shadow: inset 0 2px 0 0 var(--lm-purple); } .admin-type-row.drag-over-after { box-shadow: inset 0 -2px 0 0 var(--lm-purple); } /* v2.5.6: small hint line inside modals, sits below the form rows and above the action buttons. Used in the step modal to explain that new steps auto-append and reorder via drag. */ .admin-form-hint { font-size: 12px; color: var(--lm-quiet); margin-top: 4px; margin-bottom: 0; font-style: italic; } /* Admin Project Types row: the abbr badge uses the same .pc-type-badge class as everywhere else (v2.5.2), with this modifier for extra width so the row reads consistently across rows of varying abbr length. */ .admin-type-pill { min-width: 40px; text-align: center; } /* Legacy .admin-type-abbr (pre-v2.5.2): no longer applied by any markup, but kept here so any stale templates still render reasonably. */ .admin-type-abbr { min-width: 36px; background: rgba(0,0,0,0.06); color: var(--lm-mute); border-radius: 999px; padding: 3px 0; text-align: center; font-size: 11px; } .admin-row-main { flex: 1; min-width: 0; } .admin-row-title { font-size: 14px; font-weight: 600; color: var(--lm-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .admin-row-meta { font-size: 12px; color: var(--lm-mute); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* v2.6.5: client-contact email link in the row-meta line. Inherits the muted meta color rather than the page link color so it doesn't shout. */ .admin-row-meta .admin-client-contact a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,0.18); text-underline-offset: 2px; } .admin-row-meta .admin-client-contact a:hover { color: var(--lm-ink); } .admin-row-badges { display: flex; gap: 4px; flex-shrink: 0; } .admin-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .admin-project-row .admin-row-main { flex: 1; } .admin-btn-sm { padding: 5px 10px !important; font-size: 12px !important; } .admin-btn-danger { color: var(--lm-orange) !important; } .admin-btn-danger:hover { border-color: var(--lm-orange) !important; } .admin-btn-danger:disabled { opacity: 0.35; cursor: not-allowed; } /* v2.7.7: Owner-only Delete Project section at the bottom of the Edit Project modal. Filled danger button with a confirmation step that requires typing the slug. */ .admin-danger-zone { margin-top: 28px; padding: 16px 18px; border: 1px solid #f4cabb; background: #fff6f1; border-radius: 8px; } .admin-danger-zone-title { margin: 0 0 4px 0; font-family: var(--poppins); font-size: 12px; font-weight: 600; color: var(--lm-orange); text-transform: uppercase; letter-spacing: 0.06em; } .admin-danger-zone-desc { margin: 0 0 12px 0; font-size: 13px; color: var(--lm-mute); } .admin-danger-zone-confirm-text { margin: 0 0 8px 0; font-size: 13px; color: var(--lm-mute); } .admin-danger-zone-confirm-text code { background: rgba(240, 82, 35, 0.10); color: var(--lm-orange); padding: 1px 6px; border-radius: 4px; font-family: var(--monospace, monospace); font-size: 12px; font-weight: 600; } .admin-danger-zone-confirm-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; } .admin-danger-zone-input { flex: 1; min-width: 200px; font-family: var(--monospace, monospace); } .admin-danger-zone-error { margin: 8px 0 0 0; font-size: 12px; color: var(--lm-orange); } .btn-danger { background: var(--lm-orange); color: white; border: 1px solid var(--lm-orange); padding: 8px 16px; border-radius: 6px; font-family: var(--poppins); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.12s ease, opacity 0.12s ease; } .btn-danger:hover:not(:disabled) { background: #d8431a; border-color: #d8431a; } .btn-danger:disabled { opacity: 0.4; cursor: not-allowed; } .admin-asset-badge { font-family: var(--poppins); font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,0.06); color: var(--lm-mute); text-transform: uppercase; letter-spacing: 0.04em; } .admin-asset-badge.asset-gdocs { background: rgba(66,133,244,0.12); color: #1a73e8; } .admin-asset-badge.asset-figma { background: rgba(162,89,255,0.12); color: #7b2fff; } .admin-asset-badge.asset-internal-tool { background: rgba(0,168,170,0.12); color: var(--lm-teal-dark); } .admin-asset-badge.asset-work-log { background: rgba(194,24,91,0.10); color: #b1144f; } .admin-asset-badge.asset-coming-soon { background: rgba(255,167,38,0.12); color: #b26a00; } /* Filter row */ .admin-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .admin-type-filter { display: flex; gap: 6px; flex-wrap: wrap; } .admin-filter-btn { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-family: var(--poppins); font-size: 12px; font-weight: 500; color: var(--lm-mute); transition: border-color 0.15s, background 0.15s, color 0.15s; } .admin-filter-btn:hover { color: var(--lm-ink); border-color: rgba(0,0,0,0.2); } .admin-filter-btn.active { background: var(--lm-ink); color: #fff; border-color: var(--lm-ink); } .admin-empty { text-align: center; padding: 40px 20px; color: var(--lm-quiet); font-size: 13px; } .admin-empty .lm-empty-hootie { margin: 0 auto 14px; } .admin-empty p { margin: 0; } /* v2.12.14: new-project dashboard empty state. Celebrate Hootie centered above a milestone message + an "Add Product" CTA. Sized to fit the dashboard main column with breathing room. */ .dash-empty-products { text-align: center; padding: 48px 24px; color: var(--lm-mute); } .dash-empty-products .lm-empty-hootie { margin: 0 auto 14px; } .dash-empty-products h3 { margin: 0 0 6px; font-size: 18px; color: var(--lm-ink); font-weight: 600; } .dash-empty-products p { margin: 0; font-size: 14px; color: var(--lm-mute); } /* v2.12.14: Add Product modal empty (admin Products tab is empty). Wraps the existing copy in a centered block with Hootie above. */ .add-product-empty { text-align: center; padding: 24px 16px; color: var(--lm-mute); font-size: 13px; } .add-product-empty .lm-empty-hootie { margin: 0 auto 10px; } .add-product-empty p { margin: 0; } .admin-error { color: var(--lm-orange); } .admin-loading { text-align: center; padding: 32px 20px; color: var(--lm-quiet); font-size: 13px; } /* v2.5.6: Archived badge + dimmed archived rows / cards. Used on admin Projects list and the landing page project cards. The badge sits inline with the project name (small slate pill). The row/card itself gets reduced opacity so the active list reads first. */ .admin-archived-badge { display: inline-block; font-family: var(--poppins); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; background: #6e6e69; padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 6px; } .admin-project-row.is-archived { opacity: 0.62; } .admin-project-row.is-archived:hover { opacity: 1; } .project-card-wrap.is-archived .project-card { opacity: 0.62; } .project-card-wrap.is-archived:hover .project-card { opacity: 1; } .pc-status.archived { color: var(--lm-quiet); } .pc-status.archived::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6e6e69; flex-shrink: 0; } /* Responsive */ @media (max-width: 720px) { .admin-main { padding-left: 20px; padding-right: 20px; } .admin-panel-actions { flex-direction: column; align-items: flex-start; gap: 10px; } } /* v2.2.0 - Logo upload fields + wide modal */ .modal-card-wide { max-width: 680px; } .admin-logo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 4px; } @media (max-width: 600px) { .admin-logo-row { grid-template-columns: 1fr; } } .admin-logo-field { margin-bottom: 0; } .admin-logo-preview { margin-top: 8px; /* v2.2.17: switched from var(--sidebar-bg) to a light backdrop. Dark client logos (e.g. CVRL's dark-teal lockup) were nearly invisible against the previous dark preview. Most client logos are designed for light marketing surfaces, so light is the safer default; the border preserves the visual frame the dark backdrop used to give. */ background: #f0f0f0; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; height: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .admin-logo-preview img { max-width: 100%; max-height: 64px; object-fit: contain; padding: 4px 12px; } .admin-logo-empty { font-size: 11px; /* v2.2.17: was rgba(255,255,255,0.2) for the prior dark preview; darken so it's legible on the light backdrop. */ color: rgba(0,0,0,0.32); font-family: var(--poppins); } /* v2.7.16: image-slash fallback block removed. The new .lm-hero never renders a placeholder element - when p.logoUrl is missing we simply omit the . */ /* v2.2.1 - Project card gear + admin button */ .project-grid { gap: 14px; } .project-card-wrap { position: relative; display: block; } .pc-admin-gear { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--lm-quiet); text-decoration: none; transition: color 0.15s, background 0.15s, border-color 0.15s; z-index: 1; } .pc-admin-gear svg { width: 20px; height: 20px; } .pc-admin-gear:hover { color: var(--lm-ink); background: rgba(0,0,0,0.05); border-color: var(--border); } /* v2.2.2 - Logo file upload UI */ .admin-logo-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .admin-logo-status { font-size: 11.5px; font-family: var(--poppins); color: var(--lm-quiet); margin-left: 2px; } .admin-logo-status.logo-status-ok { color: var(--lm-teal-dark); } .admin-logo-status.logo-status-error { color: var(--lm-orange); } .admin-logo-status.logo-status-loading { color: var(--lm-quiet); font-style: italic; } /* ============================================================ v2.5.2 - Type badge colors are now data-driven via the project type's `color` field (set in admin -> Project Types). Render sites apply inline `style="background: ...; color: ...;"` via the `badgeStyle()` helper, so no per-type CSS overrides live here anymore. The .pc-type-badge / .dash-type-chip-abbr / .admin-type-pill classes provide shape/spacing/typography only. ============================================================ */ /* Light link for dark topbars (admin "All Projects") */ .topbar-link { color: rgba(255,255,255,0.55); font-size: 13px; font-family: var(--poppins); padding: 6px 10px; border-radius: 6px; transition: color 0.15s, background 0.15s; } .topbar-link:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.04); } /* Step types info card */ .admin-info-card { background: rgba(0,0,0,0.03); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; } .admin-info-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lm-quiet); margin: 0 0 12px; } .admin-info-grid { display: flex; flex-direction: column; gap: 8px; } .admin-info-item { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--lm-mute); line-height: 1.4; } .admin-info-item .admin-asset-badge { flex-shrink: 0; } /* Project card - badges on own row, gear gets clear top-right */ .project-card .pc-header { padding-right: 56px; /* space for the larger gear (v2.2.13) */ } .project-card .pc-type-badges { margin-top: 6px; margin-bottom: 10px; } /* ============================================================ v2.7.16 - Legacy chrome CSS removed The following blocks are gone (now live in lm-chrome.css): - .dash-project-edit-gear (was v2.2.13) - .lm-topbar, .lm-topbar-inner, .lm-brand, .lm-brand-logo - .lm-topbar-spacer, .lm-topbar-actions, .lm-topbar-link - .lm-topbar .btn-secondary - .lm-user-menu, .lm-user-avatar, .lm-user-popover, .lm-user-popover-name - .lm-user-popover-link - .lm-preview-section, .lm-preview-section-label, .lm-preview-section-pills - .lm-preview-pill The new chrome is a slim white sticky bar with a light shadow. The avatar, popover, and Preview-as pills are unchanged in behavior; only their styling moved to the new module. ============================================================ */ /* ============================================================ v2.2.14 - Users tab ============================================================ */ .admin-panel-help { font-size: 13px; color: var(--lm-mute); margin: -8px 0 18px 0; line-height: 1.5; max-width: 720px; } /* ========================================================== v2.7.0: Role badges + audit log UI ========================================================== */ /* Role badges in Users list */ .admin-row-role { display: flex; align-items: center; margin-right: 12px; flex-shrink: 0; } .admin-role-badge { display: inline-block; font-family: var(--poppins); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .admin-role-badge.role-owner { background: rgba(70,50,135,0.12); color: #463287; } .admin-role-badge.role-admin { background: rgba(0,168,170,0.12); color: #007a7b; } .admin-role-badge.role-staff { background: rgba(0,0,0,0.06); color: var(--lm-mute); } /* v2.12.13: text-only buttons for "Make owner" / "Remove owner" actions on the Users tab. Inline next to the role toggle/badge so the row stays compact. Different states for grant vs revoke so the visual weight matches the action. */ .btn-link { background: transparent; border: 0; padding: 0 2px; margin-left: 4px; font-family: inherit; font-size: 11px; font-weight: 500; color: var(--lm-mute); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color 0.12s; } .btn-link:hover { color: var(--lm-ink); } .btn-link:focus { outline: 2px solid var(--lmc-teal); outline-offset: 2px; border-radius: 3px; } .admin-owner-grant { color: #463287; } .admin-owner-grant:hover { color: #2e1f5f; } .admin-owner-revoke { color: #b53939; } .admin-owner-revoke:hover { color: #8a2b2b; } /* v2.10.3 cleanup: .admin-role-select was the legacy in both the Users list (inline) and the User modal. Track + thumb is the standard sliding-switch pattern; the label to the right shows the current state for redundancy. Click anywhere on the button to flip. Off (Staff) = grey track, thumb left. On (Admin) = teal track, thumb right. */ .admin-role-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; transition: background 0.15s, border-color 0.15s, opacity 0.15s; } .admin-role-toggle:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); } .admin-role-toggle:focus-visible { outline: 2px solid rgba(70,50,135,0.4); outline-offset: 2px; } .admin-role-toggle:disabled { opacity: 0.55; cursor: wait; } .admin-role-toggle-track { position: relative; width: 34px; height: 18px; background: rgba(0,0,0,0.18); border-radius: 999px; transition: background 0.18s ease; flex-shrink: 0; } .admin-role-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,0.18); transition: left 0.18s ease, background 0.18s ease; } .admin-role-toggle-text { font-family: var(--poppins); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lm-mute); min-width: 38px; transition: color 0.15s; } .admin-role-toggle.is-on .admin-role-toggle-track { background: var(--lm-teal-dark); } .admin-role-toggle.is-on .admin-role-toggle-thumb { left: 18px; } .admin-role-toggle.is-on .admin-role-toggle-text { color: var(--lm-teal-dark); } /* Modal variant: a little extra breathing room and a left-aligned start so it lines up cleanly with the other modal fields. */ .admin-role-toggle-modal { padding: 6px 14px 6px 6px; } /* Enabled checkbox hint in step modal */ .admin-form-hint-sm { font-size: 11.5px; margin-top: 3px; color: var(--lm-mute); } /* v2.7.2: per-row enabled toggle pill in Step Templates. Click to flip; visual state shows current value. Sits inline with Edit/Delete in .admin-row-actions. */ .admin-toggle-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 8px; font-family: var(--poppins); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--lm-mute); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, opacity 0.15s; white-space: nowrap; } .admin-toggle-pill:hover { border-color: rgba(0,0,0,0.25); } .admin-toggle-pill:disabled { opacity: 0.55; cursor: wait; } .admin-toggle-pill .admin-toggle-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--lm-quiet); flex-shrink: 0; } .admin-toggle-pill.is-on { background: rgba(0,168,170,0.08); border-color: rgba(0,168,170,0.30); color: var(--lm-teal-dark); } .admin-toggle-pill.is-on .admin-toggle-dot { background: var(--lm-teal-dark); } .admin-toggle-pill.is-on:hover { background: rgba(0,168,170,0.14); border-color: rgba(0,168,170,0.45); } .admin-toggle-pill.is-off { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: var(--lm-mute); } .admin-toggle-pill.is-off .admin-toggle-dot { background: var(--lm-mute); } .admin-toggle-pill.is-off:hover { background: rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.22); } /* v2.7.2: bulk action bar above the steps list. Sits beneath the filter row, only visible when there are steps to act on. Each button is shown only when its action would be a no-op. */ .admin-bulk-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: rgba(70,50,135,0.04); border: 1px solid rgba(70,50,135,0.12); border-radius: 8px; flex-wrap: wrap; } .admin-bulk-label { font-family: var(--poppins); font-size: 12px; font-weight: 600; color: var(--lm-ink); letter-spacing: 0.01em; margin-right: 4px; } .admin-bulk-btn { font-weight: 600; } .admin-bulk-btn.admin-bulk-btn-hide:hover { color: var(--lm-orange); border-color: rgba(232,82,33,0.45); } /* Audit log rows */ .admin-audit-row { cursor: default; } .admin-audit-type { display: inline-block; font-family: var(--poppins); font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-left: 6px; } .admin-audit-type-config { background: rgba(70,50,135,0.10); color: #463287; } .admin-audit-type-project { background: rgba(0,168,170,0.10); color: #007a7b; } /* ─────────────────────────────────────────── */ /* v2.7.14: MOBILE BLOCK OVERLAY */ /* ─────────────────────────────────────────── */ /* v2.7.16: mobile block markup styling moved to lm-chrome.css to establish a single source of truth. The mobile-block div in base.njk and in each tool's index.html uses the same selectors there now. */ /* v2.12.14: the platform-wide .lm-hootie peek (v2.7.22 -> v2.7.27) was retired alongside this build. Hootie now appears contextually on empty states, greetings, success toasts, and error surfaces. The .lm-empty-hootie helper lives in lm-chrome.css so every tool (which only imports lm-chrome.css) has access to it. */ /* ─────────────────────────────────────────── */ /* v2.9.0: ADD PRODUCT MODAL */ /* ─────────────────────────────────────────── */ /* Single-select radio cards launched from the dashboard hero's "Add product" primary button. Each card surfaces the product badge, name, a brief 3-step preview, and the starter step count. Already- added products render in a disabled state with a check icon. The modal reuses .modal-backdrop / .modal-card / .modal-card-wide structure so spacing and dismiss behavior match the existing dashboard modals. */ .add-product-card-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .add-product-card { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; } .add-product-card:hover:not(.is-disabled) { border-color: rgba(70,50,135,0.35); background: rgba(70,50,135,0.025); } .add-product-card:focus-visible { outline: none; border-color: var(--lm-purple); box-shadow: 0 0 0 3px rgba(70,50,135,0.18); } .add-product-card.is-selected { border-color: var(--lm-purple); background: rgba(70,50,135,0.05); box-shadow: 0 0 0 1px var(--lm-purple) inset; } .add-product-card.is-disabled { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.06); cursor: not-allowed; opacity: 0.78; } .add-product-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--lm-quiet); background: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.12s ease; } .add-product-card:hover:not(.is-disabled) .add-product-radio { border-color: var(--lm-purple); } .add-product-radio.is-on { border-color: var(--lm-purple); } .add-product-radio-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lm-purple); } .add-product-radio.is-disabled { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.04); } .add-product-badge { /* .pc-type-badge sets background + color from badgeStyle inline; we just normalize sizing here so cards line up regardless of abbr length. */ flex-shrink: 0; min-width: 38px; text-align: center; padding: 5px 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; } .add-product-body { min-width: 0; } .add-product-name { font-family: var(--poppins); font-size: 14px; font-weight: 600; color: var(--lm-ink); margin-bottom: 2px; } .add-product-desc { font-size: 12.5px; color: var(--lm-mute); line-height: 1.45; } .add-product-step-count { flex-shrink: 0; font-family: var(--poppins); font-size: 11.5px; font-weight: 500; color: var(--lm-quiet); white-space: nowrap; padding: 5px 9px; background: rgba(0,0,0,0.04); border-radius: 999px; } .add-product-card.is-selected .add-product-step-count { color: var(--lm-purple); background: rgba(70,50,135,0.10); } .add-product-already { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-family: var(--poppins); font-size: 11.5px; font-weight: 500; color: #2a8a4f; white-space: nowrap; padding: 5px 9px; background: rgba(42,138,79,0.10); border-radius: 999px; } .add-product-empty { font-size: 13px; color: var(--lm-mute); text-align: center; padding: 24px 12px; background: rgba(0,0,0,0.025); border-radius: 8px; margin: 0; } .add-product-context { font-size: 12.5px; color: var(--lm-quiet); margin: 4px 0 0 0; padding: 10px 12px; background: rgba(0,0,0,0.025); border-radius: 7px; transition: background 0.12s ease, color 0.12s ease; } .add-product-context.is-active { color: var(--lm-ink); background: rgba(70,50,135,0.06); } /* v2.12.0: seed-mode picker shown once a product is selected. Two radio options ("Use default steps" / "Custom (no steps)") stack vertically inside a subtle bordered container so the choice reads as part of the modal flow rather than a separate sub-form. */ .add-product-mode-picker { margin: 12px 0 0 0; padding: 14px 16px; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; background: #fafafa; } .add-product-mode-label { font-size: 13px; font-weight: 600; color: var(--lm-ink); margin: 0 0 10px 0; } .add-product-mode-option { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; } .add-product-mode-option + .add-product-mode-option { border-top: 1px solid rgba(0,0,0,0.05); margin-top: 4px; padding-top: 12px; } .add-product-mode-option input[type="radio"] { margin-top: 3px; flex-shrink: 0; } .add-product-mode-option-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; } .add-product-mode-option-text strong { color: var(--lm-ink); font-weight: 600; } .add-product-mode-option-desc { font-size: 12px; color: var(--lm-quiet); } /* v2.12.0: starter-step deselection list. Shown only when seed mode is "default" and a product is selected. Scrollable on long step lists so the modal doesn't grow unbounded; checkboxes default to checked and uncheck-as-you-go removes the step from the seeded subset. */ .add-product-step-picker { margin: 8px 0 0 0; padding: 14px 16px; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; background: #fafafa; } .add-product-step-picker-label { font-size: 13px; font-weight: 600; color: var(--lm-ink); margin: 0 0 10px 0; } .add-product-step-checkboxes { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; padding-right: 4px; } .add-product-step-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1.4; } .add-product-step-row:hover { background: rgba(0,0,0,0.03); } .add-product-step-row input[type="checkbox"] { flex-shrink: 0; } .add-product-step-name { color: var(--lm-ink); flex: 1 1 auto; } .add-product-step-asset { font-size: 11px; color: var(--lm-quiet); background: rgba(0,0,0,0.05); padding: 1px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } .add-product-step-empty { font-size: 12.5px; color: var(--lm-mute); font-style: italic; margin: 4px 0; padding: 6px 4px; } /* v2.12.0: Create Project seed-mode picker on the admin Projects tab. Visual parallel to .add-product-mode-picker on the dashboard's Add Product modal, but sized to fit the inline admin form-row layout. */ .admin-seed-mode-picker { display: flex; flex-direction: column; gap: 0; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; background: #fafafa; } .admin-seed-mode-option { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; } .admin-seed-mode-option + .admin-seed-mode-option { border-top: 1px solid rgba(0,0,0,0.05); margin-top: 4px; padding-top: 12px; } .admin-seed-mode-option input[type="radio"] { margin-top: 3px; flex-shrink: 0; } .admin-seed-mode-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.4; } .admin-seed-mode-text strong { color: var(--lm-ink); font-weight: 600; } .admin-seed-mode-desc { font-size: 12px; color: var(--lm-quiet); } @media (max-width: 560px) { .add-product-card { grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; row-gap: 6px; } .add-product-step-count, .add-product-already { grid-column: 2 / -1; justify-self: start; } } /* ============================================================ v2.9.1 WIP 3: PER-PRODUCT DETAIL (Manage steps) PAGE ============================================================ Two blocks: (1) Dashboard accordion header gains a "Manage steps" link on the right, grouped with the existing approval-count text inside a new .dash-type-header-right flex group. (2) The detail page itself - .pd-shell hosts a constrained single-column layout with eyebrow + h1 + lede + meta row + banner + .pd-row list (with expand-in-place body) + footer bar. Class names are .pd-* namespaced to the shell so they can't collide with other surfaces. ============================================================ */ /* ---- (1) Dashboard accordion header: right-side group ---- */ .dash-type-header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .dash-type-manage-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--poppins); font-size: 12px; font-weight: 600; color: var(--lm-purple); background: transparent; border: 1px solid rgba(70, 50, 135, 0.25); border-radius: 6px; padding: 5px 10px; text-decoration: none; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .dash-type-manage-btn:hover { background: rgba(70, 50, 135, 0.06); border-color: rgba(70, 50, 135, 0.45); color: var(--lm-purple-hover); } .dash-type-manage-btn:focus-visible { outline: 2px solid var(--lm-purple); outline-offset: 2px; } .dash-type-manage-icon { width: 12px; height: 12px; flex-shrink: 0; } /* ---- (2) .pd-shell: per-product detail page ---- */ .pd-shell { max-width: 920px; margin: 0 auto; padding: 28px 32px 56px; font-family: var(--poppins); } .pd-main { display: block; } .pd-loading { padding: 48px 0; text-align: center; color: var(--lm-quiet); font-size: 14px; } .pd-loading.pd-error { color: var(--lm-orange); } .pd-header { margin-bottom: 22px; } .pd-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lm-quiet); margin-bottom: 6px; } .pd-h1 { font-family: var(--poppins); font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--lm-ink); margin: 0; } .pd-lede { font-size: 14px; color: var(--lm-mute); line-height: 1.5; margin: 6px 0 0; max-width: 620px; } .pd-meta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .pd-meta-item { font-size: 12px; color: var(--lm-quiet); } .pd-meta-item strong { color: var(--lm-ink); font-weight: 600; } .pd-banner { margin-top: 18px; background: rgba(70, 50, 135, 0.05); border: 1px solid rgba(70, 50, 135, 0.15); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--lm-mute); line-height: 1.55; } .pd-banner strong { color: var(--lm-ink); font-weight: 600; } .pd-section { margin-top: 28px; } .pd-empty { padding: 32px 16px; text-align: center; color: var(--lm-quiet); font-size: 13px; background: #fff; border: 1px dashed var(--border); border-radius: 10px; } /* ---- Step rows ---- */ .pd-row { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .pd-row:hover { border-color: rgba(70, 50, 135, 0.25); } .pd-row.is-expanded { border-color: var(--lm-purple); box-shadow: 0 0 0 1px rgba(70, 50, 135, 0.15); } .pd-row.is-disabled .pd-name-block, .pd-row.is-disabled .pd-num { opacity: 0.55; } .pd-row-line { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; user-select: none; } .pd-row-line:focus-visible { outline: 2px solid var(--lm-purple); outline-offset: 2px; border-radius: 10px; } .pd-drag { color: var(--lm-quiet); display: flex; user-select: none; /* WIP 3: visual handle only; cursor stays default until WIP 4 wires drag-reorder. */ } .pd-drag svg { width: 14px; height: 18px; } .pd-num { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--lm-quiet); width: 22px; flex-shrink: 0; } .pd-name-block { flex: 1; min-width: 0; } .pd-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--lm-ink); } .pd-desc-preview { font-size: 12px; color: var(--lm-quiet); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pd-asset-pill { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 5px; background: rgba(0, 168, 170, 0.10); color: var(--lm-teal-dark); white-space: nowrap; flex-shrink: 0; } .pd-asset-pill.asset-gdocs { background: rgba(70, 50, 135, 0.08); color: var(--lm-purple); } .pd-asset-pill.asset-figma { background: rgba(240, 82, 35, 0.08); color: var(--lm-orange); } .pd-asset-pill.asset-internal { background: rgba(0, 168, 170, 0.10); color: var(--lm-teal-dark); } .pd-asset-pill.asset-external { background: rgba(0, 0, 0, 0.05); color: var(--lm-quiet); } .pd-asset-pill.asset-coming-soon { background: rgba(240, 82, 35, 0.08); color: var(--lm-orange); } /* v2.9.3: external-asset is the canonical replacement for gdocs/figma */ .pd-asset-pill.asset-external-asset { background: rgba(70, 50, 135, 0.08); color: var(--lm-purple); } .pd-toggle { display: inline-flex; align-items: center; flex-shrink: 0; } .pd-toggle-track { width: 32px; height: 18px; background: rgba(0, 0, 0, 0.15); border-radius: 9px; position: relative; transition: background 0.15s ease; } .pd-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .pd-toggle.on .pd-toggle-track { background: var(--lm-teal); } .pd-toggle.on .pd-toggle-track::after { transform: translateX(14px); } .pd-chevron { width: 12px; height: 12px; color: var(--lm-quiet); flex-shrink: 0; transition: transform 0.15s ease; } .pd-row.is-expanded .pd-chevron { transform: rotate(90deg); } /* ---- Row body (expanded state) ---- */ .pd-row-body { padding: 4px 18px 16px 54px; display: flex; flex-direction: column; gap: 12px; border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 0; } .pd-field { display: block; } .pd-field-label { display: block; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lm-quiet); margin-bottom: 4px; } /* v2.9.3: inline field validation error */ .pd-input--error { border-color: #d93025 !important; box-shadow: 0 0 0 2px rgba(217, 48, 37, 0.15) !important; } .pd-field-error { font-size: 11.5px; color: #d93025; margin: 4px 0 0 0; line-height: 1.4; } .pd-input, .pd-select, .pd-textarea { width: 100%; font-family: var(--poppins); font-size: 13px; color: var(--lm-ink); border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 7px 10px; } .pd-input:focus, .pd-select:focus, .pd-textarea:focus { outline: none; border-color: var(--lm-purple); box-shadow: 0 0 0 2px rgba(70, 50, 135, 0.15); } .pd-input:disabled, .pd-select:disabled, .pd-textarea:disabled { background: #fafaf8; color: var(--lm-mute); cursor: not-allowed; } .pd-textarea { min-height: 56px; resize: vertical; } .pd-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pd-row-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 4px; } .pd-enabled-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--lm-mute); } .pd-delete-btn { font-family: var(--poppins); font-size: 12px; color: #b21f1f; background: transparent; border: 1px solid rgba(178, 31, 31, 0.25); padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .pd-delete-btn:hover:not(:disabled) { background: rgba(178, 31, 31, 0.06); border-color: rgba(178, 31, 31, 0.45); } .pd-delete-btn:disabled { opacity: 0.45; cursor: not-allowed; } /* ---- Add step + footer bar ---- */ .pd-add-btn { width: 100%; font-family: var(--poppins); font-size: 13.5px; font-weight: 500; color: var(--lm-purple); background: rgba(70, 50, 135, 0.04); border: 1px dashed rgba(70, 50, 135, 0.35); padding: 14px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; transition: background 0.12s ease, border-color 0.12s ease; } .pd-add-btn:hover:not(:disabled) { background: rgba(70, 50, 135, 0.08); border-color: rgba(70, 50, 135, 0.55); } .pd-add-btn:disabled { opacity: 0.55; cursor: not-allowed; } .pd-add-btn svg { width: 14px; height: 14px; } .pd-footer-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--border); gap: 12px; flex-wrap: wrap; } .pd-footer-counts { font-size: 12.5px; color: var(--lm-quiet); } .pd-footer-actions { display: flex; gap: 10px; } /* ---- Responsive: stack the row-grid + footer on narrow widths ---- */ @media (max-width: 640px) { .pd-shell { padding: 22px 16px 48px; } .pd-row-grid { grid-template-columns: 1fr; } .pd-footer-bar { flex-direction: column; align-items: stretch; } .pd-footer-actions { justify-content: flex-end; } .pd-row-line { gap: 10px; padding: 12px 14px; } .pd-desc-preview { display: none; } } /* ============================================================ v2.9.1 WIP 4: per-product detail page CRUD additions ============================================================ Drag-reorder visual states, delete-confirm modal, dirty indicator chip, and footer status/error flash styles. Layered on top of the WIP 3 .pd-* surface. ============================================================ */ /* ---- Drag-reorder visual states ---- */ .pd-row[draggable="true"] .pd-drag { cursor: grab; } .pd-row.pd-dragging { opacity: 0.5; cursor: grabbing; } .pd-row.pd-drag-over { border-color: var(--lm-purple); box-shadow: inset 0 2px 0 var(--lm-purple); } /* Toggle button reset (it's now a real