/* ========================================================================= WorkPulse — front-end stylesheet ClickUp-inspired light theme. Tokens come from design-preview.html so the live UI matches that spec exactly. All component classes are namespaced under `.workpulse-app` so they cannot collide with the host theme. A tiny "legacy compatibility" block at the bottom maps the older `.workpulse-*` classes onto the new tokens so any template that hasn't been migrated yet still looks consistent. ========================================================================= */ /* ---------- Tokens ---------- */ .workpulse-app, .workpulse-app * { box-sizing: border-box; } .workpulse-app { --wp-purple-50: #F4F1FE; --wp-purple-100: #E8E2FD; --wp-purple-200: #D5CAFB; --wp-purple-300: #B7A5F7; --wp-purple-500: #7B68EE; --wp-purple-600: #6C57D8; --wp-purple-700: #5A47B8; --wp-pink-500: #FF5C8A; --wp-bg: #F7F8FA; --wp-card: #FFFFFF; --wp-border: #E5E7EB; --wp-border-soft: #EEF0F4; --wp-border-strong:#D1D5DB; --wp-text: #1F2937; --wp-text-strong: #0F172A; --wp-text-muted: #6B7280; --wp-text-subtle: #9CA3AF; --wp-success: #10B981; --wp-warning: #F59E0B; --wp-danger: #EF4444; --wp-info: #3B82F6; --wp-success-soft: #DCFCE7; --wp-warning-soft: #FEF3C7; --wp-danger-soft: #FEE2E2; --wp-info-soft: #DBEAFE; --wp-purple-soft: #EDE9FE; --wp-radius-sm: 6px; --wp-radius: 10px; --wp-radius-lg: 14px; --wp-radius-pill: 999px; --wp-shadow-xs: 0 1px 2px rgba(16,24,40,.04); --wp-shadow-sm: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); --wp-shadow-md: 0 6px 16px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05); --wp-shadow-lg: 0 12px 28px rgba(16,24,40,.12); --wp-sidebar-w: 248px; --wp-sidebar-w-cl: 64px; --wp-topbar-h: 56px; --wp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: var(--wp-font); font-size: 14px; line-height: 1.5; color: var(--wp-text); background: var(--wp-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Theme can interfere with our typography — pin headings inside the app. */ .workpulse-app h1, .workpulse-app h2, .workpulse-app h3, .workpulse-app h4, .workpulse-app h5 { font-family: var(--wp-font); color: var(--wp-text-strong); margin: 0; font-weight: 600; letter-spacing: -0.01em; } .workpulse-app h1 { font-size: 22px; } .workpulse-app h2 { font-size: 18px; } .workpulse-app h3 { font-size: 15px; } .workpulse-app h4 { font-size: 13px; } .workpulse-app p { margin: 0; } .workpulse-app a { color: var(--wp-purple-600); text-decoration: none; } .workpulse-app a:hover { color: var(--wp-purple-700); } .workpulse-app button { font-family: inherit; } .workpulse-app .muted { color: var(--wp-text-muted); } .workpulse-app .tiny { font-size: 12px; } /* ---------- App shell ---------- */ .workpulse-app { display: grid; grid-template-columns: var(--wp-sidebar-w) 1fr; min-height: 100vh; } /* ---------- Full-viewport overlay mode ---------- On any page that hosts a WorkPulse shortcode the WorkPulse_Assets class attaches `workpulse-fullscreen` to . Below that class we lift the app shell out of the theme's content column and pin it to the viewport, covering the theme's header / page title / sidebars / footer. The WP admin bar (z-index 99999) sits above us at z-index 99990 — admins can still navigate the rest of the site through it. */ body.workpulse-fullscreen { margin: 0 !important; padding: 0 !important; overflow: hidden; /* hide a few common theme chrome containers behind our overlay just in case they paint above z-index:99990 (rare but happens with some sticky-header themes). */ } body.workpulse-fullscreen .workpulse-app { position: fixed; inset: 0; z-index: 99990; background: var(--wp-bg); min-height: 0; height: 100%; } body.workpulse-fullscreen.admin-bar .workpulse-app { top: 32px; } @media screen and (max-width: 782px) { body.workpulse-fullscreen.admin-bar .workpulse-app { top: 46px; } } /* ---------- Sidebar ---------- */ .workpulse-app .sidebar { background: #FFFFFF; border-right: 1px solid var(--wp-border); display: flex; flex-direction: column; padding: 0; position: sticky; top: 0; height: 100vh; min-height: 0; overflow: hidden; } .workpulse-app .sidebar__scroll { flex: 1; min-height: 0; overflow-y: auto; } /* In fullscreen overlay mode the sidebar fills its grid column (which is the height of the fixed app shell) — `100vh` is wrong because the app may be offset by the admin bar. */ body.workpulse-fullscreen .workpulse-app .sidebar { position: static; height: 100%; } .sidebar__workspace { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--wp-border-soft); } .sidebar__logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--wp-purple-500), var(--wp-pink-500)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .sidebar__workspace-meta { line-height: 1.2; min-width: 0; } .sidebar__workspace-name { font-weight: 600; color: var(--wp-text-strong); font-size: 14px; } .sidebar__workspace-plan { font-size: 11px; color: var(--wp-text-muted); } .sidebar__chev { margin-left: auto; color: var(--wp-text-subtle); display: inline-flex; } .sidebar__search { margin: 12px 12px 8px; position: relative; } .sidebar__search input { width: 100%; padding: 7px 10px 7px 30px; border-radius: var(--wp-radius); border: 1px solid var(--wp-border); background: #FAFAFB; font-size: 13px; color: var(--wp-text); transition: all .15s ease; height: auto; box-shadow: none; } .sidebar__search input::placeholder { color: var(--wp-text-subtle); } .sidebar__search input:focus { outline: none; border-color: var(--wp-purple-300); background: #fff; box-shadow: 0 0 0 3px var(--wp-purple-50); } .sidebar__search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--wp-text-subtle); } .sidebar__section { padding: 8px 8px 4px; } .sidebar__section-title { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp-text-subtle); padding: 8px 8px 4px; font-weight: 600; } .sidebar__nav { list-style: none; padding: 0; margin: 0; } .sidebar__nav li { margin: 1px 0; padding: 0; } .sidebar__nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--wp-radius-sm); color: var(--wp-text); font-size: 13.5px; font-weight: 500; transition: background .12s ease, color .12s ease; text-decoration: none; } .sidebar__nav a:hover { background: #F3F4F6; color: var(--wp-text-strong); } .sidebar__nav a.active { background: var(--wp-purple-soft); color: var(--wp-purple-700); font-weight: 600; } .sidebar__nav .badge { margin-left: auto; background: var(--wp-border); color: var(--wp-text-muted); border-radius: var(--wp-radius-pill); padding: 1px 7px; font-size: 10.5px; font-weight: 600; } .sidebar__nav a.active .badge { background: rgba(123,104,238,.15); color: var(--wp-purple-700); } .sidebar__nav .icon { width: 18px; height: 18px; display: grid; place-items: center; color: var(--wp-text-muted); flex-shrink: 0; } .sidebar__nav a.active .icon { color: var(--wp-purple-600); } .sidebar__footer { flex-shrink: 0; margin-top: 0; padding: 10px 12px 14px; border-top: 1px solid var(--wp-border-soft); display: flex; align-items: center; gap: 10px; background: #fff; } .workpulse-app .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--wp-purple-500); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } .sidebar__footer .meta { line-height: 1.2; min-width: 0; flex: 1; } .sidebar__footer .name { font-weight: 600; color: var(--wp-text-strong); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__footer .role { font-size: 11px; color: var(--wp-text-muted); } /* ---------- Topbar ---------- */ .workpulse-app .main { min-width: 0; min-height: 0; } /* In fullscreen overlay mode the main column is the scrolling container — the topbar stays pinned and the page content scrolls underneath. */ body.workpulse-fullscreen .workpulse-app .main { height: 100%; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0); } .topbar { position: sticky; top: 0; z-index: 10; height: var(--wp-topbar-h); background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid var(--wp-border); display: flex; align-items: center; gap: 14px; padding: 0 24px; } .crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; } .crumbs a { color: var(--wp-text-muted); } .crumbs .sep { color: var(--wp-text-subtle); } .crumbs .now { color: var(--wp-text-strong); font-weight: 600; } .topbar__spacer { flex: 1; } .topbar__search { position: relative; width: 320px; max-width: 38vw; } .topbar__search input { width: 100%; padding: 7px 10px 7px 32px; border: 1px solid var(--wp-border); border-radius: var(--wp-radius); background: #F9FAFB; font-size: 13px; height: auto; box-shadow: none; } .topbar__search input:focus { outline: none; border-color: var(--wp-purple-300); background: #fff; box-shadow: 0 0 0 3px var(--wp-purple-50); } .topbar__search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--wp-text-subtle); } .icon-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; display: grid; place-items: center; color: var(--wp-text-muted); cursor: pointer; padding: 0; } .icon-btn:hover { background: #F3F4F6; color: var(--wp-text-strong); } /* ---------- Page wrapper ---------- */ .workpulse-app .page { padding: 24px; padding-bottom: 48px; } .page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .page__title h1 { font-size: 22px; } .page__title p { color: var(--wp-text-muted); margin-top: 4px; font-size: 13px; } .page__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .section-label { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--wp-purple-soft); color: var(--wp-purple-700); border-radius: var(--wp-radius-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } /* ---------- Buttons ---------- Themes overwhelmingly style raw and