/* North Star Manage IT brand tokens — see Brand Guidelines v1.0 (Aug 2026) */ :root { --ns-orange: #f15702; --ns-orange-dark: #cf4900; --ns-charcoal: #222222; --ns-grey: #6b6b6b; --ns-grey-light: #e4e4e4; --ns-white: #ffffff; --ns-bg: #f7f7f7; --ns-radius: 10px; --ns-font-heading: 'Montserrat', 'Poppins', system-ui, sans-serif; --ns-font-body: 'Inter', 'Open Sans', system-ui, sans-serif; /* ---- Semantic tokens ---- Components below read only these, so light/dark is just two blocks of token overrides rather than touching every rule. */ --ns-page-bg: var(--ns-bg); --ns-surface: var(--ns-white); --ns-text: var(--ns-charcoal); --ns-text-muted: var(--ns-grey); --ns-border: var(--ns-grey-light); --ns-input-bg: var(--ns-white); --ns-shadow-sm: rgba(34, 34, 34, 0.06); --ns-shadow-lg: rgba(34, 34, 34, 0.08); --ns-btn-dark-bg: var(--ns-charcoal); --ns-btn-dark-bg-hover: #000000; --ns-choice-selected-bg: var(--ns-charcoal); --ns-danger-fg: #c62828; --ns-danger-border: #c62828; --ns-badge-great-bg: #eafaf0; --ns-badge-great-fg: #1e5c34; --ns-badge-okay-bg: #fff4ea; --ns-badge-okay-fg: #8a4a10; --ns-badge-bad-bg: #fdecec; --ns-badge-bad-fg: #8a1f1f; --ns-badge-neutral-bg: var(--ns-grey-light); --ns-badge-neutral-fg: var(--ns-text-muted); --ns-badge-owner-bg: #222222; --ns-badge-owner-fg: #ffffff; --ns-alert-error-bg: #fdecec; --ns-alert-error-fg: #8a1f1f; --ns-alert-error-bd: #f3c6c6; --ns-alert-success-bg: #eafaf0; --ns-alert-success-fg: #1e5c34; --ns-alert-success-bd: #bfe8cd; --ns-alert-info-bg: #fff4ea; --ns-alert-info-fg: #8a4a10; --ns-alert-info-bd: #f6d9b8; color-scheme: light; } /* ---- Dark theme ---- The brand accent (orange) stays the same in both themes; surfaces and text invert. `data-theme` is set on by an inline script that runs before first paint (see adminShell.js / surveyPage.js), so there's no flash of the wrong theme. That script always resolves to an explicit "light" or "dark" — the media-query block just covers the rare case where JS didn't run. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ns-page-bg: #17171a; --ns-surface: #202024; --ns-text: #f0f0f0; --ns-text-muted: #a3a3ab; --ns-border: #34343a; --ns-input-bg: #26262b; --ns-shadow-sm: rgba(0, 0, 0, 0.35); --ns-shadow-lg: rgba(0, 0, 0, 0.55); --ns-btn-dark-bg: #3a3a40; --ns-btn-dark-bg-hover: #4a4a52; --ns-choice-selected-bg: var(--ns-orange); --ns-danger-fg: #ff6b6b; --ns-danger-border: #ff6b6b; --ns-badge-great-bg: rgba(46, 160, 90, 0.18); --ns-badge-great-fg: #7fe3a0; --ns-badge-okay-bg: rgba(241, 87, 2, 0.18); --ns-badge-okay-fg: #ffb27a; --ns-badge-bad-bg: rgba(198, 40, 40, 0.22); --ns-badge-bad-fg: #ff8f8f; --ns-badge-neutral-bg: #34343a; --ns-badge-neutral-fg: #c7c7cf; --ns-badge-owner-bg: #f0f0f0; --ns-badge-owner-fg: #17171a; --ns-alert-error-bg: rgba(198, 40, 40, 0.18); --ns-alert-error-fg: #ff9c9c; --ns-alert-error-bd: rgba(198, 40, 40, 0.4); --ns-alert-success-bg: rgba(46, 160, 90, 0.16); --ns-alert-success-fg: #86e6a8; --ns-alert-success-bd: rgba(46, 160, 90, 0.4); --ns-alert-info-bg: rgba(241, 87, 2, 0.14); --ns-alert-info-fg: #ffb27a; --ns-alert-info-bd: rgba(241, 87, 2, 0.4); color-scheme: dark; } } :root[data-theme="dark"] { --ns-page-bg: #17171a; --ns-surface: #202024; --ns-text: #f0f0f0; --ns-text-muted: #a3a3ab; --ns-border: #34343a; --ns-input-bg: #26262b; --ns-shadow-sm: rgba(0, 0, 0, 0.35); --ns-shadow-lg: rgba(0, 0, 0, 0.55); --ns-btn-dark-bg: #3a3a40; --ns-btn-dark-bg-hover: #4a4a52; --ns-choice-selected-bg: var(--ns-orange); --ns-danger-fg: #ff6b6b; --ns-danger-border: #ff6b6b; --ns-badge-great-bg: rgba(46, 160, 90, 0.18); --ns-badge-great-fg: #7fe3a0; --ns-badge-okay-bg: rgba(241, 87, 2, 0.18); --ns-badge-okay-fg: #ffb27a; --ns-badge-bad-bg: rgba(198, 40, 40, 0.22); --ns-badge-bad-fg: #ff8f8f; --ns-badge-neutral-bg: #34343a; --ns-badge-neutral-fg: #c7c7cf; --ns-badge-owner-bg: #f0f0f0; --ns-badge-owner-fg: #17171a; --ns-alert-error-bg: rgba(198, 40, 40, 0.18); --ns-alert-error-fg: #ff9c9c; --ns-alert-error-bd: rgba(198, 40, 40, 0.4); --ns-alert-success-bg: rgba(46, 160, 90, 0.16); --ns-alert-success-fg: #86e6a8; --ns-alert-success-bd: rgba(46, 160, 90, 0.4); --ns-alert-info-bg: rgba(241, 87, 2, 0.14); --ns-alert-info-fg: #ffb27a; --ns-alert-info-bd: rgba(241, 87, 2, 0.4); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--ns-font-body); color: var(--ns-text); background: var(--ns-page-bg); } h1, h2, h3, h4 { font-family: var(--ns-font-heading); font-weight: 800; letter-spacing: 0.01em; color: var(--ns-text); margin: 0 0 8px; } h1 { font-size: 26px; } h2 { font-size: 19px; } h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-text-muted); } p { line-height: 1.5; } a { color: var(--ns-orange); } a:hover { text-decoration: underline; } .ns-body { min-height: 100vh; } .ns-version-tag { position: fixed; right: 10px; bottom: 8px; font-size: 11px; color: var(--ns-text-muted); opacity: 0.6; letter-spacing: 0.02em; pointer-events: none; z-index: 5; } .ns-center { display: flex; align-items: center; justify-content: center; padding: 32px 16px; } .ns-card { width: 100%; max-width: 440px; background: var(--ns-surface); border-radius: var(--ns-radius); box-shadow: 0 2px 24px var(--ns-shadow-lg); padding: 32px 28px; text-align: center; } .ns-card-wide { max-width: 560px; } .ns-logo { width: 220px; max-width: 80%; margin: 0 auto 20px; display: block; } /* The logo artwork has dark elements that read poorly straight on a dark page background — give it a small white card of its own in dark mode rather than shipping a second brand asset. */ [data-theme="dark"] .ns-logo, [data-theme="dark"] .ns-topbar-brand img { background: #ffffff; border-radius: 8px; padding: 8px 12px; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .ns-logo, :root:not([data-theme]) .ns-topbar-brand img { background: #ffffff; border-radius: 8px; padding: 8px 12px; } } .ns-question { text-align: left; margin-bottom: 22px; } .ns-choice-group { display: flex; flex-wrap: wrap; gap: 8px; } .ns-choice { flex: 1 1 auto; min-width: 100px; padding: 12px 14px; border: 1.5px solid var(--ns-border); border-radius: 8px; background: var(--ns-input-bg); color: var(--ns-text); font-family: var(--ns-font-heading); font-weight: 700; font-size: 14px; cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; } .ns-choice:hover { border-color: var(--ns-orange); } .ns-choice.selected { background: var(--ns-choice-selected-bg); border-color: var(--ns-choice-selected-bg); color: #fff; } .ns-charcount { text-align: right; font-size: 11.5px; color: var(--ns-text-muted); margin-top: -10px; margin-bottom: 4px; } .ns-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-bottom: 10px; } .ns-sub { color: var(--ns-text-muted); margin-bottom: 20px; } .ns-tagline { font-style: italic; color: var(--ns-text-muted); margin-top: 20px; } .ns-textarea { width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid var(--ns-border); border-radius: 8px; background: var(--ns-input-bg); color: var(--ns-text); font-family: var(--ns-font-body); font-size: 14px; resize: vertical; margin-bottom: 16px; } .ns-textarea:focus { outline: 2px solid var(--ns-orange); border-color: var(--ns-orange); } .ns-btn { display: inline-block; width: 100%; background: var(--ns-btn-dark-bg); color: var(--ns-white); border: none; border-radius: 8px; padding: 13px 18px; font-family: var(--ns-font-heading); font-weight: 700; font-size: 15px; cursor: pointer; transition: background 0.15s ease; } .ns-btn:hover { background: var(--ns-btn-dark-bg-hover); } .ns-btn:disabled { opacity: 0.6; cursor: default; } .ns-btn-primary { background: var(--ns-orange); } .ns-btn-primary:hover { background: var(--ns-orange-dark); } .ns-btn-outline { background: transparent; color: var(--ns-text); border: 1.5px solid var(--ns-text); } .ns-btn-outline:hover { background: var(--ns-text); color: var(--ns-surface); } .ns-btn-sm { width: auto; padding: 8px 14px; font-size: 13px; } .ns-btn-danger { background: var(--ns-surface); color: var(--ns-danger-fg); border: 1.5px solid var(--ns-danger-border); } .ns-btn-danger:hover { background: var(--ns-danger-border); color: #fff; } .ns-theme-toggle { width: auto; display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--ns-text-muted); border: 1.5px solid var(--ns-border); border-radius: 999px; padding: 7px 12px; font-family: var(--ns-font-body); font-weight: 600; font-size: 12.5px; cursor: pointer; } .ns-theme-toggle:hover { border-color: var(--ns-text); color: var(--ns-text); } .ns-theme-toggle svg { width: 14px; height: 14px; flex: none; } .ns-alert { border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px; text-align: left; } .ns-alert-error { background: var(--ns-alert-error-bg); color: var(--ns-alert-error-fg); border: 1px solid var(--ns-alert-error-bd); } .ns-alert-success { background: var(--ns-alert-success-bg); color: var(--ns-alert-success-fg); border: 1px solid var(--ns-alert-success-bd); } .ns-alert-info { background: var(--ns-alert-info-bg); color: var(--ns-alert-info-fg); border: 1px solid var(--ns-alert-info-bd); } .ns-form { text-align: left; } .ns-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ns-text); } .ns-input, .ns-select { width: 100%; padding: 10px 12px; border: 1px solid var(--ns-border); border-radius: 8px; background: var(--ns-input-bg); color: var(--ns-text); font-family: var(--ns-font-body); font-size: 14px; margin-bottom: 14px; } .ns-input:focus, .ns-select:focus { outline: 2px solid var(--ns-orange); border-color: var(--ns-orange); } .ns-help { font-size: 12.5px; color: var(--ns-text-muted); margin: -8px 0 14px; } .ns-link-row { display: flex; gap: 8px; align-items: center; background: var(--ns-page-bg); border: 1px solid var(--ns-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; } .ns-link-row code { flex: 1; overflow-x: auto; white-space: nowrap; font-size: 12.5px; color: var(--ns-text); } /* ---------- Admin shell ---------- */ .ns-admin-shell { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; } .ns-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .ns-topbar-brand { display: flex; align-items: center; gap: 12px; } .ns-topbar-brand img { height: 40px; } .ns-topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .ns-topbar-user { font-size: 13.5px; color: var(--ns-text-muted); text-align: right; } .ns-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--ns-border); margin-bottom: 24px; } .ns-tab { background: none; border: none; padding: 10px 16px; font-family: var(--ns-font-heading); font-weight: 700; font-size: 14px; color: var(--ns-text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; } .ns-tab.active { color: var(--ns-text); border-bottom-color: var(--ns-orange); } .ns-subtabs { display: flex; gap: 6px; margin-bottom: 16px; } .ns-subtab { background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 999px; padding: 6px 14px; font-family: var(--ns-font-heading); font-weight: 700; font-size: 12.5px; color: var(--ns-text-muted); cursor: pointer; } .ns-subtab.active { color: #fff; background: var(--ns-orange); border-color: var(--ns-orange); } .ns-panel { background: var(--ns-surface); border-radius: var(--ns-radius); box-shadow: 0 2px 16px var(--ns-shadow-sm); padding: 24px; margin-bottom: 20px; } .ns-changelog-entry { padding: 14px 0; border-top: 1px solid var(--ns-border); } .ns-changelog-entry:first-child { padding-top: 0; border-top: none; } .ns-changelog-list { margin: 0; padding-left: 20px; color: var(--ns-text); } .ns-changelog-list li { margin-bottom: 4px; font-size: 13.5px; line-height: 1.45; } .ns-changelog-list li:last-child { margin-bottom: 0; } .ns-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 24px; } .ns-stat { background: var(--ns-surface); border-radius: var(--ns-radius); box-shadow: 0 2px 16px var(--ns-shadow-sm); padding: 18px; text-align: center; } .ns-stat .n { font-family: var(--ns-font-heading); font-size: 30px; font-weight: 800; } .ns-stat .l { font-size: 12.5px; color: var(--ns-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; } .ns-bar-row { margin-bottom: 14px; } .ns-bar-label { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; } .ns-bar-track { background: var(--ns-page-bg); border-radius: 6px; height: 14px; overflow: hidden; } .ns-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s ease; } /* ---------- Survey detail: full-page charts & graphs ---------- */ .ns-detail-top { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 16px; margin-bottom: 20px; align-items: stretch; } @media (max-width: 760px) { .ns-detail-top { grid-template-columns: 1fr; } } .ns-detail-stats { display: flex; flex-direction: column; gap: 14px; } .ns-detail-stats .ns-stat { flex: 1; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; } .ns-trend-panel { margin-bottom: 0; } .ns-trend-chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; } .ns-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; } .ns-trend-bar { width: 100%; max-width: 22px; background: var(--ns-orange); border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.3s ease; } .ns-trend-col.is-zero .ns-trend-bar { background: var(--ns-border); } .ns-trend-label { font-size: 10px; color: var(--ns-text-muted); margin-top: 6px; white-space: nowrap; } .ns-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 20px; } .ns-qchart-card { background: var(--ns-surface); border-radius: var(--ns-radius); box-shadow: 0 2px 16px var(--ns-shadow-sm); padding: 20px; } .ns-qchart-title { font-weight: 700; margin-bottom: 14px; font-size: 14.5px; } .ns-qchart-body { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .ns-donut-wrap { position: relative; width: 108px; height: 108px; flex: none; } .ns-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ns-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .ns-donut-center .n { font-family: var(--ns-font-heading); font-weight: 800; font-size: 19px; line-height: 1; } .ns-donut-center .l { font-size: 9.5px; color: var(--ns-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; } .ns-legend { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 7px; } .ns-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .ns-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; } .ns-legend-label { flex: 1; } .ns-legend-value { color: var(--ns-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ns-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ns-table th, .ns-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--ns-border); } .ns-table th { color: var(--ns-text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .ns-table-wrap { overflow-x: auto; } .ns-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .ns-badge-great { background: var(--ns-badge-great-bg); color: var(--ns-badge-great-fg); } .ns-badge-okay { background: var(--ns-badge-okay-bg); color: var(--ns-badge-okay-fg); } .ns-badge-needs_work { background: var(--ns-badge-bad-bg); color: var(--ns-badge-bad-fg); } .ns-badge-active { background: var(--ns-badge-great-bg); color: var(--ns-badge-great-fg); } .ns-badge-invited { background: var(--ns-badge-okay-bg); color: var(--ns-badge-okay-fg); } .ns-badge-disabled { background: var(--ns-badge-neutral-bg); color: var(--ns-badge-neutral-fg); } .ns-badge-owner { background: var(--ns-badge-owner-bg); color: var(--ns-badge-owner-fg); } .ns-badge-admin { background: var(--ns-badge-neutral-bg); color: var(--ns-text); } .ns-badge-draft { background: var(--ns-badge-neutral-bg); color: var(--ns-text-muted); } .ns-badge-closed { background: var(--ns-badge-bad-bg); color: var(--ns-badge-bad-fg); } .ns-badge-inactive { background: var(--ns-badge-neutral-bg); color: var(--ns-text-muted); } /* Custom multiple-choice options (ids o1, o2, ... up to the 12-option cap) get a neutral pill so they read as badges consistently with the rating answers, without needing a color per custom option. */ .ns-badge-o1, .ns-badge-o2, .ns-badge-o3, .ns-badge-o4, .ns-badge-o5, .ns-badge-o6, .ns-badge-o7, .ns-badge-o8, .ns-badge-o9, .ns-badge-o10, .ns-badge-o11, .ns-badge-o12 { background: var(--ns-badge-neutral-bg); color: var(--ns-badge-neutral-fg); } .ns-survey-card { background: var(--ns-surface); border-radius: var(--ns-radius); box-shadow: 0 2px 16px var(--ns-shadow-sm); padding: 18px 20px; margin-bottom: 14px; } .ns-qbuilder-row { border: 1px solid var(--ns-border); border-radius: 8px; padding: 14px; margin-bottom: 12px; position: relative; } .ns-qbuilder-row .ns-qtype-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ns-text-muted); margin-bottom: 8px; } .ns-qbuilder-remove { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--ns-text-muted); font-size: 18px; line-height: 1; cursor: pointer; width: auto; padding: 2px 6px; } .ns-qbuilder-remove:hover { color: var(--ns-danger-fg); } .ns-add-question-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .ns-row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .ns-muted { color: var(--ns-text-muted); } .ns-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ns-section-gap { margin-top: 28px; } .ns-copy-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--ns-btn-dark-bg); color: var(--ns-white); padding: 10px 18px; border-radius: 8px; font-size: 13.5px; z-index: 50; } @media (max-width: 600px) { .ns-card { padding: 24px 18px; } .ns-panel { padding: 16px; } }