/* Pulse — all styles namespaced .pl-* so the Lumen kit JS can theme the page without its CSS colliding. Theme-aware via prefers-color-scheme + a [data-theme] hook the kit may stamp on . */ :root { --pl-bg: #f6f7fb; --pl-surface: #ffffff; --pl-surface-2: #f0f2f8; --pl-ink: #1a1c25; --pl-muted: #6b7280; --pl-line: #e4e7ef; --pl-accent: #e8a13a; /* Ankur Lighting warm gold */ --pl-shadow: 0 1px 2px rgba(16,20,40,.05), 0 8px 24px rgba(16,20,40,.06); --pl-radius: 16px; --pl-up: #16a34a; --pl-down: #dc2626; } @media (prefers-color-scheme: dark) { :root { --pl-bg: #0e1016; --pl-surface: #171a23; --pl-surface-2: #1f232f; --pl-ink: #e9ecf5; --pl-muted: #9aa3b5; --pl-line: #262b38; --pl-shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35); } } :root[data-theme="dark"] { --pl-bg: #0e1016; --pl-surface: #171a23; --pl-surface-2: #1f232f; --pl-ink: #e9ecf5; --pl-muted: #9aa3b5; --pl-line: #262b38; } :root[data-theme="light"] { --pl-bg: #f6f7fb; --pl-surface: #ffffff; --pl-surface-2: #f0f2f8; --pl-ink: #1a1c25; --pl-muted: #6b7280; --pl-line: #e4e7ef; } * { box-sizing: border-box; } /* The `hidden` attribute must always win — otherwise class rules that set a `display` (.pl-gate=grid, .pl-drawer-overlay=flex) override it and elements meant to be hidden (the login gate, the drawer) stay stuck on screen. */ [hidden] { display: none !important; } body { margin: 0; background: var(--pl-bg); color: var(--pl-ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } .pl-muted { color: var(--pl-muted); } /* Topbar */ .pl-topbar { display: flex; align-items: center; gap: 24px; padding: 14px 24px; background: var(--pl-surface); border-bottom: 1px solid var(--pl-line); position: sticky; top: 0; z-index: 10; } .pl-brand { display: flex; align-items: center; gap: 12px; } .pl-brand-dot { color: var(--pl-accent); font-size: 22px; } .pl-brand-dot.big { font-size: 40px; } .pl-brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.02em; } .pl-brand-sub { font-size: 12px; color: var(--pl-muted); } .pl-tabs { display: flex; gap: 4px; margin-left: auto; } .pl-tab { border: 0; background: transparent; color: var(--pl-muted); font: inherit; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 10px; cursor: pointer; } .pl-tab:hover { background: var(--pl-surface-2); color: var(--pl-ink); } .pl-tab.is-active { background: var(--pl-surface-2); color: var(--pl-ink); } .pl-who { margin-left: 8px; font-size: 13px; color: var(--pl-muted); white-space: nowrap; } /* Layout */ .pl-main { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; } .pl-section-head { margin: 34px 0 16px; } .pl-section-head h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; } .pl-section-head p { margin: 0; font-size: 13px; } /* Hero — company Delight Score */ .pl-hero { border-radius: 22px; padding: 40px; color: #fff; position: relative; overflow: hidden; background: linear-gradient(135deg, #2a2140 0%, #4a2f6e 55%, #7a4b9e 100%); box-shadow: var(--pl-shadow); } .pl-hero-skeleton { opacity: .8; } .pl-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .pl-hero-label { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; opacity: .8; } .pl-hero-score { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 4px; } .pl-hero-num { font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -.04em; } .pl-hero-band { font-size: 22px; font-weight: 700; } .pl-hero-emoji { font-size: 34px; } .pl-hero-meta { display: flex; gap: 22px; margin-top: 18px; flex-wrap: wrap; font-size: 13px; opacity: .92; } .pl-hero-await { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 6px; opacity: .95; } .pl-hero-subtext { font-size: 14px; opacity: .75; max-width: 460px; } .pl-hero-axes { display: flex; gap: 12px; } .pl-axis-chip { background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 14px; min-width: 116px; } .pl-axis-chip .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; } .pl-axis-chip .v { font-size: 22px; font-weight: 700; } /* Department grid */ .pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .pl-card { background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: var(--pl-radius); padding: 20px; box-shadow: var(--pl-shadow); } .pl-dept-card { cursor: default; transition: transform .12s ease, box-shadow .12s ease; } .pl-dept-card:hover { transform: translateY(-2px); } .pl-dept-top { display: flex; justify-content: space-between; align-items: center; } .pl-dept-name { font-weight: 700; font-size: 15px; } .pl-dept-emoji { font-size: 20px; } .pl-dept-score { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; } .pl-dept-band { font-size: 13px; font-weight: 600; } .pl-dept-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12px; color: var(--pl-muted); } .pl-dept-empty { display: flex; flex-direction: column; justify-content: space-between; min-height: 118px; } .pl-dept-empty .pl-dept-name { font-weight: 700; font-size: 15px; } .pl-dept-await { font-size: 13px; color: var(--pl-muted); } .pl-trend { font-weight: 700; } .pl-trend.up { color: var(--pl-up); } .pl-trend.down { color: var(--pl-down); } .pl-trend.flat { color: var(--pl-muted); } .pl-bar { height: 6px; border-radius: 999px; background: var(--pl-surface-2); overflow: hidden; margin-top: 12px; } .pl-bar > i { display: block; height: 100%; border-radius: 999px; } /* My feedback */ .pl-mine { max-width: 480px; } .pl-mine .pl-card { text-align: center; } .pl-mine-num { font-size: 72px; font-weight: 800; letter-spacing: -.04em; } /* Admin */ .pl-admin-card { max-width: 560px; } .pl-kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--pl-line); font-size: 14px; } .pl-kv:last-child { border-bottom: 0; } .pl-btn { display: inline-block; border: 0; background: var(--pl-accent); color: #241a05; font: inherit; font-weight: 700; padding: 10px 18px; border-radius: 10px; cursor: pointer; text-decoration: none; } .pl-btn:hover { filter: brightness(1.05); } .pl-btn.secondary { background: var(--pl-surface-2); color: var(--pl-ink); } .pl-btn[disabled] { opacity: .5; cursor: default; } /* Admin sub-tabs + tables */ .pl-subtabs { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 1px solid var(--pl-line); } .pl-subtab { border: 0; background: transparent; color: var(--pl-muted); font: inherit; font-weight: 600; font-size: 14px; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .pl-subtab:hover { color: var(--pl-ink); } .pl-subtab.is-active { color: var(--pl-ink); border-bottom-color: var(--pl-accent); } .pl-table { width: 100%; border-collapse: collapse; font-size: 13px; } .pl-table th { text-align: left; color: var(--pl-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--pl-line); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .pl-table td { padding: 9px 10px; border-bottom: 1px solid var(--pl-line); vertical-align: top; } .pl-input { flex: 1; padding: 9px 12px; border: 1px solid var(--pl-line); border-radius: 10px; background: var(--pl-surface); color: var(--pl-ink); font: inherit; } .pl-link { border: 0; background: transparent; color: #dc2626; font: inherit; cursor: pointer; padding: 0; } .pl-keybox { background: var(--pl-surface-2); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px; word-break: break-all; } .pl-keybox code { font-size: 13px; } .pl-pill { display: inline-block; background: var(--pl-surface-2); border-radius: 999px; padding: 3px 10px; font-size: 12px; margin-right: 4px; } .pl-qlist { margin: 10px 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.5; } .pl-qlist li { margin-bottom: 8px; } .pl-status { font-weight: 600; text-transform: capitalize; } .pl-status-responded { color: var(--pl-up); } .pl-status-expired, .pl-status-suppressed { color: var(--pl-muted); } .pl-status-pending, .pl-status-dispatched { color: var(--pl-accent); } /* Footer */ .pl-footer { max-width: 1080px; margin: 0 auto; padding: 20px 24px 40px; display: flex; justify-content: space-between; font-size: 12px; color: var(--pl-muted); } /* Gate */ .pl-gate { position: fixed; inset: 0; display: grid; place-items: center; background: var(--pl-bg); } .pl-gate-card { text-align: center; } .pl-gate-card h1 { margin: 8px 0; letter-spacing: -.02em; } .pl-gate-card p { color: var(--pl-muted); margin-bottom: 16px; } /* Department drawer */ .pl-drawer-overlay { position: fixed; inset: 0; background: rgba(10,12,20,.5); display: flex; justify-content: flex-end; z-index: 50; animation: pl-fade .15s ease; } .pl-drawer { width: min(460px, 100%); background: var(--pl-bg); height: 100%; display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(0,0,0,.25); animation: pl-slide .2s ease; } .pl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--pl-line); } .pl-drawer-head h2 { margin: 0; font-size: 18px; } .pl-drawer-x { border: 0; background: transparent; color: var(--pl-muted); font-size: 26px; line-height: 1; cursor: pointer; } .pl-drawer-scroll { overflow-y: auto; padding: 20px 22px 40px; } .pl-drawer-hero { text-align: center; margin-bottom: 8px; } .pl-drawer-h { font-size: 14px; margin: 22px 0 8px; color: var(--pl-muted); text-transform: uppercase; letter-spacing: .06em; } .pl-axis-list { margin-top: 10px; } .pl-axis-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--pl-line); font-size: 14px; } .pl-axis-row > span:first-child { flex: 1; } .pl-axis-row > .pl-muted { font-size: 12px; } .pl-comment { padding: 12px 14px; background: var(--pl-surface); border: 1px solid var(--pl-line); border-radius: 12px; margin-bottom: 10px; font-size: 14px; } .pl-comment .pl-muted { font-size: 12px; margin-top: 6px; } @keyframes pl-slide { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } } .pl-view { animation: pl-fade .2s ease; } @keyframes pl-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .pl-hero { padding: 26px; } .pl-hero-num { font-size: 60px; } .pl-topbar { gap: 12px; padding: 12px 16px; } .pl-brand-sub { display: none; } }