/* WPAS Tech Portal — themed to match wpas-inc.com Palette pulled from www.wpas-inc.com's stylesheet: - teal/cyan brand #07829e - deep navy #00426c - coral accent #e29281 - neutral border #d0cece */ :root { /* Brand colors — stable across themes. */ --brand-teal: #07829e; --brand-teal-dark: #066a82; --brand-teal-soft: #e6f3f7; --brand-navy: #00426c; --brand-navy-deep: #002f4d; --brand-coral: #e29281; --brand-coral-soft: #fbece8; /* Light theme tokens (used when [data-theme="light"]). */ --bg: #f5f7f9; --surface: #ffffff; --text: #1c2532; --muted: #5b6b81; --border: #d8dee6; --border-soft: #e9edf2; --ok: #2f8f5a; --ok-bg: #eaf5ee; --ok-ring: rgba(47, 143, 90, 0.18); --fail: #c04141; --fail-bg: #faecec; --fail-ring: rgba(192, 65, 65, 0.18); --shadow: 0 1px 2px rgba(0, 66, 108, 0.05), 0 4px 14px rgba(0, 66, 108, 0.06); --shadow-lift: 0 2px 4px rgba(0, 66, 108, 0.06), 0 10px 28px rgba(0, 66, 108, 0.08); /* Heading + on-tint accent colors that flip per theme. */ --heading: var(--brand-navy); --accent-on-soft: var(--brand-teal-dark); --info-fg: var(--brand-navy); } /* Dark theme — applied via [data-theme="dark"] on . This is the default; the inline script in the page sets it before first paint. */ [data-theme="dark"] { --bg: #07172a; --surface: #0d2440; --text: #e6edf3; --muted: #8da3bf; --border: #1f3a5e; --border-soft: #16304f; --brand-teal-soft: rgba(7, 130, 158, 0.18); --ok: #4cb578; --ok-bg: rgba(76, 181, 120, 0.16); --ok-ring: rgba(76, 181, 120, 0.28); --fail: #e6716f; --fail-bg: rgba(230, 113, 111, 0.16); --fail-ring: rgba(230, 113, 111, 0.28); --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.45); --heading: #f1f6fb; --accent-on-soft: #6ec8da; --info-fg: #c8e7f0; color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; color: var(--text); background: var(--bg); line-height: 1.55; display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--brand-teal); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--brand-teal-dark); text-decoration: underline; } .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 28px; } /* -------- Header -------- */ .site-header { background: var(--brand-navy); border-bottom: 3px solid var(--brand-teal); color: #fff; } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; } .brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; } .brand:hover { text-decoration: none; } .brand-logo { height: 38px; width: auto; display: block; } .brand-text { font-weight: 600; font-size: 17px; letter-spacing: -.005em; color: #fff; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.25); line-height: 1; } .site-header nav { display: flex; gap: 8px; align-items: center; } /* Icon-pill nav. Each link collapses to a 36-px icon by default; the active link is always expanded (so the user always knows where they are), and hover or keyboard focus expands the others inline with a smooth max-width transition. The label is real text — readable by screen readers regardless of visual state — and aria-current="page" marks the active route. */ .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav__link { display: inline-flex; align-items: center; height: 36px; padding: 0 9px; border-radius: 9px; color: rgba(255, 255, 255, 0.72); text-decoration: none; white-space: nowrap; transition: background .18s ease, color .18s ease; } .site-nav__link:hover { background: rgba(255, 255, 255, 0.10); color: #fff; text-decoration: none; } .site-nav__link:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; } .site-nav__link[aria-current="page"] { background: rgba(255, 255, 255, 0.16); color: #fff; } .site-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .site-nav__icon svg { width: 18px; height: 18px; display: block; } .site-nav__label { font-size: 13px; font-weight: 500; letter-spacing: -.005em; max-width: 0; margin-left: 0; overflow: hidden; opacity: 0; /* The cubic-bezier matches the drawer animation elsewhere in the app so the nav reveal feels like part of the same family. */ transition: max-width .28s cubic-bezier(.32, .72, .2, 1), margin-left .28s cubic-bezier(.32, .72, .2, 1), opacity .18s ease; } .site-nav__link:hover .site-nav__label, .site-nav__link:focus-visible .site-nav__label, .site-nav__link[aria-current="page"] .site-nav__label { max-width: 160px; margin-left: 8px; opacity: 1; } /* On narrow viewports, collapse the active label too so the nav stays compact next to the brand and the identity chip. The user still has the URL and page title to orient. */ @media (max-width: 640px) { .site-nav { gap: 2px; } .site-nav__link { padding: 0 7px; } .site-nav__link[aria-current="page"] .site-nav__label { max-width: 0; margin-left: 0; opacity: 0; } /* Keep hover/focus reveal so a tap shows the label briefly. */ .site-nav__link:hover .site-nav__label, .site-nav__link:focus-visible .site-nav__label { max-width: 140px; margin-left: 6px; opacity: 1; } } /* Theme toggle button (sits in the header nav). */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.10); color: #fff; border-color: rgba(255, 255, 255, 0.32); } .theme-toggle:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; } .theme-icon { display: none; } [data-theme="dark"] .theme-icon--sun { display: block; } [data-theme="light"] .theme-icon--moon { display: block; } .nav-divider { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.18); margin: 0 4px; } .nav-identity { font-size: 13px; color: rgba(255, 255, 255, 0.78); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-logout { display: inline-flex; } .nav-logout-btn { /* reuses .theme-toggle styles for size/border */ } /* -------- Main -------- */ main.container { flex: 1; padding-top: 56px; padding-bottom: 72px; } .hero { margin-bottom: 44px; max-width: 760px; } .hero h1 { margin: 0 0 10px; font-size: 38px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; line-height: 1.15; } .lede { color: var(--muted); font-size: 18px; margin: 0; font-weight: 400; } /* -------- Home (hero, snapshot, feature cards, recent rail) -------- */ .home-hero { margin: 8px 0 22px; max-width: 760px; } .home-hero .eyebrow { margin: 0 0 10px; } .home-hero h1 { margin: 0 0 12px; font-size: 36px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; line-height: 1.18; } .home-hero .lede { margin: 0; } .home-snapshot { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; } .home-stat { position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 18px 14px; text-decoration: none; color: inherit; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .home-stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand-teal), var(--brand-coral)); opacity: .65; } .home-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--brand-teal) 28%, var(--border)); text-decoration: none; } .home-stat__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .home-stat__value { font-size: 32px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; } .home-stat__sub { font-size: 12.5px; color: var(--muted); } .home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 32px; } .feature-card { --accent: var(--brand-teal); position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px 22px 20px; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .feature-card__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } .feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); text-decoration: none; } .feature-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .feature-card__head h2 { margin: 0; font-size: 19px; font-weight: 700; color: var(--heading); letter-spacing: -.005em; } .feature-card__count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--accent) 80%, var(--text)); background: color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 999px; padding: 3px 10px; } .feature-card__lede { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; flex: 1; } .feature-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .01em; } .feature-card__chev { display: inline-block; transition: transform .18s ease; } .feature-card:hover .feature-card__chev { transform: translateX(4px); } /* Recent updates rail */ .home-recent { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 18px 14px; box-shadow: var(--shadow); } .home-recent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .home-recent__head .eyebrow { margin: 0; } .home-recent__more { font-size: 12.5px; font-weight: 700; color: var(--brand-teal); } .home-recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .home-recent__item { --status-color: var(--brand-teal); border-top: 1px solid var(--border-soft); } .home-recent__item:first-child { border-top: 0; } .home-recent__link { --status-color: inherit; display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: 14px; padding: 12px 4px; text-decoration: none; color: inherit; border-radius: 8px; transition: background .15s ease; } .home-recent__link:hover { background: color-mix(in srgb, var(--status-color) 7%, transparent); text-decoration: none; } .home-recent__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--status-color) 80%, var(--text)); background: color-mix(in srgb, var(--status-color) 14%, transparent); padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .home-recent__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-color); } .home-recent__title { font-weight: 600; font-size: 14.5px; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-recent__summary { display: none; } .home-recent__time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (min-width: 720px) { .home-recent__link { grid-template-columns: max-content 1fr 1fr max-content; } .home-recent__summary { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 640px) { .home-hero h1 { font-size: 26px; } .home-stat__value { font-size: 26px; } .feature-card { padding: 18px 18px 16px; } } /* -------- Links page -------- */ .links-page { display: flex; flex-direction: column; gap: 18px; } .eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-teal); } .links-head { margin-bottom: 4px; } .links-head .eyebrow { margin: 0 0 6px; } .links-head__row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .links-page h1 { margin: 0; font-size: 32px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; line-height: 1.15; max-width: 640px; } .links-head__count { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 999px; } .links-head .lede { margin: 8px 0 0; max-width: 760px; } .links-stats { margin: 4px 0 4px; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow); } .links-stats__bar { display: flex; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--border-soft) 60%, transparent); margin-bottom: 14px; } .links-stats__seg { width: var(--w, 0%); background: var(--cat-color, var(--brand-teal)); } .links-stats__seg + .links-stats__seg { border-left: 1px solid var(--surface); } .links-stats__legend { display: flex; flex-wrap: wrap; gap: 8px; } .links-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 8px; } .links-toolbar .search-input { flex: 1 1 320px; max-width: 480px; } .links-group { --cat-color: var(--brand-teal); scroll-margin-top: 80px; position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 18px 18px; overflow: hidden; } .links-group::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cat-color); } .links-group.is-empty { display: none; } .links-group.is-collapsed .links-grid, .links-group.is-collapsed .links-group__empty, .links-group.is-collapsed .links-group__desc { display: none; } .links-group__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin-bottom: 14px; } .links-group__toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; text-align: left; } .links-group__chev { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; color: var(--muted); transition: transform 0.2s ease; } .links-group.is-collapsed .links-group__chev { transform: rotate(-90deg); } .links-group__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cat-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat-color) 18%, transparent); } .links-group__head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--heading); letter-spacing: -.005em; } .links-group__desc { grid-column: 1 / -1; margin: 0; padding-left: 26px; font-size: 12.5px; color: var(--muted); line-height: 1.45; } .links-group__count { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--cat-color) 14%, transparent); color: color-mix(in srgb, var(--cat-color) 80%, var(--text)); padding: 2px 10px; border-radius: 999px; justify-self: end; } .links-group__empty { margin: 4px 0 0; padding-left: 26px; font-size: 12.5px; font-style: italic; color: var(--muted); } .link-tile.is-hidden { display: none !important; } .links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .link-tile { --cat-color: var(--brand-teal); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .link-tile::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--cat-color); opacity: 0; transition: opacity .15s ease; } .link-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--cat-color) 40%, var(--border)); text-decoration: none; } .link-tile:hover::before { opacity: 1; } .link-tile:focus-visible { outline: 2px solid color-mix(in srgb, var(--cat-color) 60%, transparent); outline-offset: 2px; } .link-tile__icon { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cat-color) 14%, transparent); border-radius: 10px; overflow: hidden; position: relative; } .link-tile__icon img { width: 24px; height: 24px; display: block; image-rendering: -webkit-optimize-contrast; } .link-tile__initials { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--cat-color) 80%, var(--text)); letter-spacing: .02em; } .link-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .link-tile__title { font-size: 15px; font-weight: 600; color: var(--heading); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .link-tile__description { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .link-tile__host { font-size: 11px; color: color-mix(in srgb, var(--cat-color) 65%, var(--muted)); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .link-tile__chevron { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); opacity: 0; transform: translate(-6px, 6px); transition: opacity .18s ease, transform .18s ease, color .18s ease; flex-shrink: 0; } .link-tile:hover .link-tile__chevron { opacity: 1; transform: translate(0, 0); color: var(--cat-color); } .links-empty { text-align: center; color: var(--muted); padding: 32px 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; } @media (max-width: 640px) { .links-page h1 { font-size: 24px; } .links-toolbar .search-input { width: 100%; max-width: none; } .links-group { padding: 14px 14px 16px; } .links-group__head h2 { font-size: 15px; } .link-tile { padding: 10px 12px; gap: 10px; } .link-tile__icon { width: 36px; height: 36px; } } /* -------- Magic-code login page (standalone) -------- */ .login-body { background: var(--bg); } .login-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; } .login-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border-soft); border-top: 4px solid var(--brand-teal); border-radius: 16px; padding: 36px 36px 32px; box-shadow: var(--shadow-lift); } .login-brand { text-align: center; margin-bottom: 22px; } .login-logo-wrap { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 16px; background: var(--brand-navy); margin-bottom: 12px; padding: 10px; } .login-logo { width: 100%; height: auto; display: block; } .login-logo--light { display: none; } [data-theme="light"] .login-logo--dark { display: none; } [data-theme="light"] .login-logo--light { display: block; } [data-theme="light"] .login-logo-wrap { background: var(--brand-navy); } .login-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-teal); } .login-card h1 { margin: 4px 0 8px; font-size: 26px; font-weight: 700; color: var(--heading); letter-spacing: -.01em; text-align: center; } .login-lede { margin: 0 0 22px; text-align: center; color: var(--muted); font-size: 15px; } .login-foot { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; } .login-actions { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--muted); } .login-actions__form { display: inline-flex; } .login-actions__sep { color: var(--border); } .login-code-input { text-align: center; letter-spacing: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 22px !important; font-weight: 600; } .btn--full { width: 100%; } /* -------- Home banner -------- */ .home-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; padding: 14px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-soft); border-left: 4px solid var(--brand-teal); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; animation: home-banner-in .35s ease both; } @keyframes home-banner-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .home-banner:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); text-decoration: none; } .home-banner__icon { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-teal-soft); color: var(--brand-teal); flex-shrink: 0; } .home-banner__level { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-teal); flex-shrink: 0; } .home-banner__title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--heading); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-banner__cta { font-size: 13px; font-weight: 600; color: var(--brand-teal); flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; } .home-banner__chevron { transition: transform .15s ease; display: inline-block; } .home-banner:hover .home-banner__chevron { transform: translateX(3px); } .home-banner--warning { border-left-color: #d99e21; } .home-banner--warning .home-banner__icon { background: rgba(217, 158, 33, 0.16); color: #b9810f; } [data-theme="dark"] .home-banner--warning .home-banner__icon { color: #f1c674; } .home-banner--warning .home-banner__level { color: #b9810f; } [data-theme="dark"] .home-banner--warning .home-banner__level { color: #f1c674; } .home-banner--critical { border-left-color: var(--fail); } .home-banner--critical .home-banner__icon { background: var(--fail-bg); color: var(--fail); } .home-banner--critical .home-banner__level, .home-banner--critical .home-banner__cta { color: var(--fail); } @media (max-width: 640px) { .home-banner { padding: 12px 14px; gap: 10px; flex-wrap: wrap; } .home-banner__title { white-space: normal; } .home-banner__cta { margin-left: auto; } } /* -------- Notification detail -------- */ .notification-detail { display: flex; flex-direction: column; gap: 16px; } .back-link { margin: 0; font-size: 14px; } .back-link a { color: var(--muted); } .back-link a:hover { color: var(--brand-teal); } .notification-detail-card { --status-color: var(--brand-teal); position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 28px 28px 24px; box-shadow: var(--shadow); overflow: hidden; } .notification-detail-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--status-color); } .notification-detail-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); } .notification-detail-card__head > div { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .notification-detail-title { margin: 0; font-size: 26px; font-weight: 700; color: var(--heading); letter-spacing: -.01em; line-height: 1.25; word-break: break-word; flex-basis: 100%; } .notification-detail-body { margin: 0 0 18px; color: var(--text); font-size: 16px; line-height: 1.6; white-space: pre-wrap; } .notification-detail-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 18px 0 0; padding-top: 18px; border-top: 1px dashed var(--border-soft); font-size: 13px; } .notification-detail-meta dt { color: var(--muted); font-weight: 500; } .notification-detail-meta dd { margin: 0; color: var(--text); } /* -------- Notifications page (public) -------- */ .notifications-page { display: flex; flex-direction: column; gap: 16px; } .notifications-head { margin-bottom: 4px; } .notifications-head .eyebrow { margin: 0 0 6px; } .notifications-head__row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .notifications-head h1 { margin: 0; font-size: 32px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; } .notifications-head__count { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 999px; } .notifications-head .lede { margin: 8px 0 0; max-width: 760px; } .notifications-stats { margin: 4px 0 0; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow); } .notifications-stats__bar { display: flex; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--border-soft) 60%, transparent); margin-bottom: 14px; } .notifications-stats__seg { width: var(--w, 0%); background: var(--status-color, var(--brand-teal)); } .notifications-stats__seg + .notifications-stats__seg { border-left: 1px solid var(--surface); } .notifications-stats__legend { display: flex; flex-wrap: wrap; gap: 8px; } .notifications-toolbar { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; } .notifications-toolbar .search-input { flex: 1 1 320px; max-width: 480px; } .notifications-summary { display: flex; gap: 8px; flex-wrap: wrap; } .notification-item.is-hidden { display: none !important; } .notifications-empty-message { margin: 8px 0 0; text-align: center; color: var(--muted); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--bg); color: var(--muted); border: 1px solid var(--border-soft); } .chip--info { background: var(--brand-teal-soft); color: var(--accent-on-soft); border-color: rgba(7,130,158,.22); } .chip--warning { background: rgba(217,158,33,0.16); color: #b9810f; border-color: rgba(217,158,33,0.30); } .chip--critical { background: var(--fail-bg); color: var(--fail); border-color: rgba(192,65,65,0.30); } [data-theme="dark"] .chip--warning { color: #f1c674; } .notification-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; position: relative; } .notification-timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 14px; width: 2px; background: linear-gradient(to bottom, var(--brand-teal-soft), transparent); border-radius: 2px; } .notification-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 18px; margin-bottom: 18px; animation: notif-in .35s ease both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes notif-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .notification-marker { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--brand-teal); border: 2px solid var(--brand-teal); box-shadow: 0 0 0 4px var(--bg); margin-left: -1px; z-index: 1; } .notification-item--warning .notification-marker { color: #d99e21; border-color: #d99e21; } .notification-item--critical .notification-marker { color: var(--fail); border-color: var(--fail); } .notification-card { display: block; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow); border-left: 3px solid var(--brand-teal); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .notification-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); border-color: rgba(7,130,158,0.25); text-decoration: none; } .notification-item--warning .notification-card { border-left-color: #d99e21; } .notification-item--critical .notification-card { border-left-color: var(--fail); } .notification-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .notification-level { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-teal); background: var(--brand-teal-soft); padding: 3px 9px; border-radius: 999px; } .notification-item--warning .notification-level { color: #b9810f; background: rgba(217,158,33,0.16); } .notification-item--critical .notification-level { color: var(--fail); background: var(--fail-bg); } [data-theme="dark"] .notification-item--warning .notification-level { color: #f1c674; } [data-theme="dark"] .notification-item--info .notification-level { color: var(--accent-on-soft); } .notification-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--heading); line-height: 1.3; flex: 1; min-width: 0; } .notification-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .notification-body { margin: 8px 0 0; color: var(--text); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; } .notification-card__foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-soft); font-size: 12px; color: var(--muted); } .notification-empty { background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; padding: 36px 24px; text-align: center; } .notification-empty.error { border-color: rgba(192,65,65,0.35); } .notification-empty h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--heading); } .notification-empty p { margin: 0; color: var(--muted); } /* -------- Admin / auth -------- */ .auth-page { display: flex; justify-content: center; padding: 24px 0 48px; } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 28px; box-shadow: var(--shadow-lift); } .auth-card h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; color: var(--heading); letter-spacing: -.01em; } .auth-card .muted { margin: 0 0 18px; } .admin-page { display: flex; flex-direction: column; gap: 28px; } .admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .admin-head h1 { margin: 4px 0 6px; font-size: 30px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; } .admin-head .lede { margin: 0; } .admin-head a { color: var(--brand-teal); } .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .stat { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; } .stat-value { font-size: 28px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } .stat-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); } .admin-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .admin-action { --accent: var(--brand-teal); position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); color: inherit; text-decoration: none; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .admin-action__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } .admin-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); text-decoration: none; } .admin-action h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--heading); } .admin-action p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; } .admin-action__cta { font-size: 13px; font-weight: 700; color: var(--accent); } .admin-action--disabled { opacity: 0.55; pointer-events: none; } .admin-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 18px; align-items: start; } .admin-panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; padding: 22px; box-shadow: var(--shadow); } .admin-panel__title { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } /* Forms */ .form { display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; } .field > span { font-size: 13px; color: var(--muted); font-weight: 600; } .field > span .required { color: var(--fail); font-style: normal; } .field input[type="text"], .field input[type="password"], .field input[type="email"], .field input[type="datetime-local"], .field select, .field textarea { width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-teal); box-shadow: 0 0 0 3px var(--brand-teal-soft); } .field textarea { resize: vertical; min-height: 90px; } .field--checkbox { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--text); } .field--checkbox input { width: auto; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--brand-teal); color: #fff; border-color: var(--brand-teal); } .btn--primary:hover { background: var(--brand-teal-dark); border-color: var(--brand-teal-dark); } .btn--ghost { background: transparent; color: var(--muted); border-color: var(--border); } .btn--ghost:hover { color: var(--text); border-color: var(--brand-teal); } .btn--danger { background: transparent; color: var(--fail); border-color: rgba(192,65,65,0.30); } .btn--danger:hover { background: var(--fail-bg); border-color: var(--fail); } .btn--sm { padding: 6px 12px; font-size: 13px; } .admin-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .admin-list__item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg); } .admin-list__main { flex: 1; min-width: 0; } .admin-list__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .admin-list__title { font-weight: 700; color: var(--heading); font-size: 15px; word-break: break-word; } .admin-list__body { margin: 4px 0 6px; color: var(--text); font-size: 14px; white-space: pre-wrap; } .admin-list__meta { margin: 0; font-size: 12px; color: var(--muted); } .admin-list__item--critical { border-left: 3px solid var(--fail); } .admin-list__item--warning { border-left: 3px solid #d99e21; } .admin-list__item--info { border-left: 3px solid var(--brand-teal); } .admin-list__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .admin-link-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: var(--brand-teal-soft); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .admin-link-icon img { width: 22px; height: 22px; display: block; } .admin-link-icon span { font-size: 13px; font-weight: 700; color: var(--accent-on-soft); } .profile-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; } .profile-list dt { color: var(--muted); font-weight: 500; } .profile-list dd { margin: 0; } .field-help { margin: -4px 0 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .link-button { background: transparent; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand-teal); cursor: pointer; text-decoration: underline; } .link-button:hover { color: var(--brand-teal-dark); } .form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } @media (max-width: 720px) { .admin-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .admin-head form { width: 100%; } .admin-list__actions { flex-direction: row; align-items: stretch; } } /* -------- Status page -------- */ .status-page { display: flex; flex-direction: column; gap: 18px; } .status-page .status-head { margin-bottom: 0; } .status-page .eyebrow { margin: 0 0 6px; } .status-page h1 { margin: 0 0 8px; font-size: 32px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; } .status-page .lede { margin: 0; max-width: 760px; } .status-overall { --tone: var(--ok); --tone-bg: var(--ok-bg); --tone-ring: var(--ok-ring); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border: 1px solid var(--border-soft); border-left: 4px solid var(--tone); border-radius: 14px; padding: 16px 22px; box-shadow: var(--shadow); } .status-overall--fail { --tone: var(--fail); --tone-bg: var(--fail-bg); --tone-ring: var(--fail-ring); } .status-overall--warn { --tone: #d99e21; --tone-bg: rgba(217,158,33,0.16); --tone-ring: rgba(217,158,33,0.28); } .status-overall__row { display: inline-flex; align-items: center; gap: 12px; } .status-overall__pulse { position: relative; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; } .status-overall__pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 4px var(--tone-ring); animation: statusPulse 1.8s ease-out infinite; } @keyframes statusPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 60%, transparent); } 70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--tone) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tone) 0%, transparent); } } .status-overall__label { font-size: 16px; font-weight: 700; color: var(--heading); letter-spacing: -.005em; } .status-overall__metrics { display: inline-flex; flex-wrap: wrap; gap: 14px; } .status-overall__metric { font-size: 13px; color: var(--muted); } .status-overall__metric strong { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--heading); margin-right: 4px; font-weight: 700; } .status-overall__metric--fail strong { color: var(--fail); } .status-overall__metric--warn strong { color: #b9810f; } [data-theme="dark"] .status-overall__metric--warn strong { color: #f1c674; } .muted { color: var(--muted); } .small { font-size: 13px; } .status-grid { margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; } .status-card { position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; overflow: hidden; } .status-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--muted); opacity: .35; } .status-card.ok { border-color: rgba(47, 143, 90, 0.28); } .status-card.ok::before { background: var(--ok); opacity: 1; } .status-card.fail { border-color: rgba(192, 65, 65, 0.30); } .status-card.fail::before { background: var(--fail); opacity: 1; } .status-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); } .status-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .status-card header h2 { flex: 1; margin: 0; font-size: 16px; font-weight: 700; color: var(--heading); } .status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(0,0,0,.04); } .status-card.ok .status-dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-ring); } .status-card.fail .status-dot { background: var(--fail); box-shadow: 0 0 0 4px var(--fail-ring); } .status-label { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; background: var(--bg); color: var(--muted); } .status-card.ok .status-label { background: var(--ok-bg); color: var(--ok); } .status-card.fail .status-label { background: var(--fail-bg); color: var(--fail); } .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; padding: 16px; background: var(--brand-teal-soft); border-radius: 10px; } .metric { display: flex; flex-direction: column; align-items: center; text-align: center; } .metric-value { font-size: 24px; font-weight: 700; color: var(--heading); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .metric-unit { font-size: 12px; font-weight: 500; color: var(--accent-on-soft); margin-left: 2px; } .metric-label { font-size: 11px; color: var(--accent-on-soft); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; font-weight: 600; } dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 14px; } dt { color: var(--muted); font-weight: 500; } dd { margin: 0; font-weight: 500; word-break: break-word; color: var(--text); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; } .message { background: var(--fail-bg); color: var(--fail); padding: 13px 15px; border-radius: 10px; font-size: 14px; margin: 0 0 14px; line-height: 1.5; border: 1px solid rgba(192, 65, 65, 0.18); } .message.info { background: var(--brand-teal-soft); color: var(--info-fg); border-color: rgba(7, 130, 158, 0.20); } [data-theme="dark"] .message.info { border-color: rgba(7, 130, 158, 0.35); } .message strong { color: inherit; } /* -------- Footer -------- */ .site-footer { border-top: 1px solid var(--border-soft); background: var(--surface); } .site-footer .container { min-height: 64px; padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; } .footer-logo { height: 28px; width: auto; } .footer-logo--light { display: block; } .footer-logo--dark { display: none; } [data-theme="dark"] .footer-logo--light { display: none; } [data-theme="dark"] .footer-logo--dark { display: block; } .footer-text { flex: 1; min-width: 0; } .footer-link { color: var(--brand-teal); font-weight: 600; } /* -------- Responsive -------- */ @media (max-width: 640px) { .container { padding: 0 20px; } .site-header .container { height: 64px; } .brand-logo { height: 32px; } .brand-text { display: none; } .hero h1 { font-size: 28px; } main.container { padding-top: 36px; padding-bottom: 48px; } .metrics { padding: 12px; gap: 4px; } .metric-value { font-size: 19px; } .site-footer .container { gap: 10px; } .footer-text { width: 100%; flex: 1 0 100%; } } /* ============================================================ Initiatives — public list (stats + filters + sectioned grid) ============================================================ */ .initiatives-page { padding-top: 8px; } .initiatives-head { margin-bottom: 18px; } .initiatives-head .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-teal); margin: 0 0 6px; font-weight: 600; } .initiatives-head__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .initiatives-head h1 { margin: 0; color: var(--heading); } .initiatives-head__view { margin-left: auto; } .initiatives-head__count { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 999px; } .initiatives-head .lede { color: var(--muted); margin: 8px 0 0; line-height: 1.55; max-width: 760px; } /* Stats strip: stacked-bar overview + legend chips that double as filters */ .initiatives-stats { margin: 18px 0 14px; padding: 16px 18px 14px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow); } .initiatives-progress { display: flex; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--border-soft) 60%, transparent); margin-bottom: 14px; } .initiatives-progress__seg { width: var(--w, 0%); background: var(--status-color, var(--brand-teal)); transition: width 0.4s ease, opacity 0.2s ease; position: relative; } .initiatives-progress__seg + .initiatives-progress__seg { border-left: 1px solid var(--surface); } .initiatives-progress__legend { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chip { --status-color: var(--brand-teal); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 9px; background: transparent; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 12px; color: var(--text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; font-family: inherit; } .filter-chip:hover { border-color: color-mix(in srgb, var(--status-color) 40%, var(--border)); } .filter-chip:active { transform: scale(0.97); } .filter-chip:focus-visible { outline: 2px solid color-mix(in srgb, var(--status-color) 50%, transparent); outline-offset: 2px; } .filter-chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 22%, transparent); } .filter-chip__name { font-weight: 600; } .filter-chip__count { background: color-mix(in srgb, var(--status-color) 16%, transparent); color: color-mix(in srgb, var(--status-color) 75%, var(--text)); padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; } .filter-chip.is-active, .filter-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--status-color) 18%, transparent); border-color: color-mix(in srgb, var(--status-color) 55%, var(--border)); color: color-mix(in srgb, var(--status-color) 80%, var(--text)); } .filter-chip.is-active .filter-chip__count { background: color-mix(in srgb, var(--status-color) 28%, transparent); } .filter-chip--clear { border-style: dashed; color: var(--muted); } .filter-chip--clear:hover { color: var(--text); } /* Toolbar: search + group-by */ .initiatives-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; } .search-input { position: relative; flex: 1 1 280px; max-width: 420px; display: inline-flex; align-items: center; } .search-input svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; } .search-input input { width: 100%; padding: 9px 14px 9px 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .search-input input::placeholder { color: var(--muted); } .search-input input:focus { outline: none; border-color: var(--brand-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-teal) 25%, transparent); } .search-input input::-webkit-search-cancel-button { cursor: pointer; } .group-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 3px; gap: 2px; } .group-toggle__btn { border: 0; background: transparent; padding: 6px 14px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 7px; transition: background 0.15s ease, color 0.15s ease; } .group-toggle__btn:hover { color: var(--text); } .group-toggle__btn.is-active { background: color-mix(in srgb, var(--brand-teal) 16%, transparent); color: var(--brand-teal); } [data-theme="dark"] .group-toggle__btn.is-active { color: #7fc8da; } .group-toggle__btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand-teal) 50%, transparent); outline-offset: 2px; } /* Sections: each status (or department) becomes a row with a fluid card grid */ .initiatives-sections { display: flex; flex-direction: column; gap: 18px; } .initiatives-section { --status-color: var(--brand-teal); position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 16px 16px; overflow: hidden; animation: initFadeIn 0.35s ease both; } .initiatives-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--status-color); } .initiatives-section.is-empty { display: none; } .initiatives-section.is-collapsed .initiatives-section__grid, .initiatives-section.is-collapsed .initiatives-section__empty, .initiatives-section.is-collapsed .initiatives-section__desc { display: none; } /* Stages with zero initiatives stay visible in the pipeline but recede so they don't compete visually with the active ones. */ .initiatives-section[data-original-count="0"] { background: transparent; box-shadow: none; border-style: dashed; opacity: 0.7; } .initiatives-section[data-original-count="0"]::before { opacity: 0.5; } .initiatives-section[data-original-count="0"] .initiatives-section__head { margin-bottom: 0; } .initiatives-section[data-original-count="0"] .initiatives-section__grid { display: none; } .initiatives-section[data-original-count="0"] .initiatives-section__toggle { cursor: default; } .initiatives-section[data-original-count="0"] .initiatives-section__chev { visibility: hidden; } .initiatives-section__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; margin: 0 0 14px; } .initiatives-section__toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; text-align: left; } .initiatives-section__chev { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--muted); transition: transform 0.2s ease; } .initiatives-section.is-collapsed .initiatives-section__chev { transform: rotate(-90deg); } .initiatives-section__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-color) 18%, transparent); } .initiatives-section__name { margin: 0; font-size: 15px; font-weight: 700; color: var(--heading); letter-spacing: 0.005em; } .initiatives-section__count { font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--status-color) 16%, transparent); color: color-mix(in srgb, var(--status-color) 80%, var(--text)); padding: 2px 10px; border-radius: 999px; justify-self: end; } .initiatives-section__desc { grid-column: 1 / -1; margin: 0; padding-left: 26px; font-size: 12.5px; color: var(--muted); line-height: 1.45; } .initiatives-section__empty { margin: 4px 0 0; padding-left: 26px; font-size: 12.5px; font-style: italic; color: var(--muted); } .initiatives-section__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } /* Compact card */ .init-card { --status-color: var(--brand-teal); position: relative; display: grid; grid-template-columns: 4px 1fr; gap: 12px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 0; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .init-card.is-hidden { display: none !important; } .init-card__bar { background: var(--status-color); opacity: 0.9; } .init-card__body { padding: 10px 12px 4px 0; min-width: 0; } .init-card__eyebrow { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--status-color) 65%, var(--muted)); margin-bottom: 3px; } .init-card__title { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--heading); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .init-card__summary { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .init-card__foot { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; padding: 6px 12px 10px 0; margin-top: auto; font-size: 10.5px; } .init-card__pill { display: inline-flex; align-items: center; background: color-mix(in srgb, var(--status-color) 16%, transparent); color: color-mix(in srgb, var(--status-color) 80%, var(--text)); padding: 2px 8px; border-radius: 999px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .init-card__time { margin-left: auto; color: var(--muted); white-space: nowrap; } .init-card:hover, .init-card:focus-visible { transform: translateY(-1px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--status-color) 45%, var(--border)); outline: none; } .initiatives-empty-message { margin: 24px 0 0; text-align: center; color: var(--muted); } .link-button { background: transparent; border: 0; color: var(--brand-teal); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; } @keyframes initFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .initiatives-toolbar { flex-direction: column; align-items: stretch; } .search-input { max-width: none; } .group-toggle { width: 100%; justify-content: center; } .group-toggle__btn { flex: 1; } } /* ----- Initiative detail page ----- */ .initiative-detail { --status-color: var(--brand-teal); padding-top: 8px; } .initiative-detail .back-link { margin: 0 0 12px; font-size: 13px; } .initiative-detail .back-link a { color: var(--muted); text-decoration: none; } .initiative-detail .back-link a:hover { color: var(--text); } .initiative-detail-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 28px 28px 24px; position: relative; overflow: hidden; } .initiative-detail-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--status-color); } .initiative-detail-card__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); } .initiative-detail-pill { --status-color: var(--brand-teal); align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: color-mix(in srgb, var(--status-color) 16%, transparent); color: color-mix(in srgb, var(--status-color) 80%, var(--text)); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .initiative-detail-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-color); } .initiative-detail-title { margin: 0; color: var(--heading); font-size: 26px; line-height: 1.25; } .initiative-detail-summary { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .initiative-detail-admin { margin: 4px 0 0; } .initiative-detail-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; } .initiative-detail-section { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; } .initiative-detail-main .initiative-detail-section:not(:first-of-type) { margin-top: 22px; } .initiative-notes { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 16px; font-size: 14.5px; line-height: 1.6; color: var(--text); } .initiative-notes--empty { color: var(--muted); font-style: italic; } .initiative-detail-side { border-left: 1px solid var(--border-soft); padding-left: 24px; } .initiative-history { list-style: none; margin: 0 0 18px; padding: 0; position: relative; } .initiative-history::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, color-mix(in srgb, var(--status-color) 60%, transparent), var(--border-soft)); } .initiative-history__item { position: relative; padding: 0 0 14px 22px; } .initiative-history__item:last-child { padding-bottom: 0; } .initiative-history__dot { position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in srgb, var(--status-color) 35%, transparent); } .initiative-history__summary { margin: 0 0 2px; font-size: 13.5px; color: var(--text); line-height: 1.45; } .initiative-history__meta { margin: 0; font-size: 11.5px; color: var(--muted); } .initiative-detail-meta { margin: 12px 0 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 12px; row-gap: 4px; font-size: 12.5px; } .initiative-detail-meta dt { color: var(--muted); font-weight: 600; } .initiative-detail-meta dd { margin: 0; color: var(--text); } @media (max-width: 720px) { .initiative-detail-card { padding: 22px 18px; } .initiative-detail-title { font-size: 22px; } .initiative-detail-grid { grid-template-columns: 1fr; gap: 22px; } .initiative-detail-side { border-left: 0; border-top: 1px solid var(--border-soft); padding-left: 0; padding-top: 18px; } } /* Admin list pill (still used by /admin/statuses) */ .admin-list__pill { --status-color: var(--brand-teal); align-self: stretch; width: 4px; background: var(--status-color); border-radius: 4px; margin-right: 4px; } /* ============================================================ Admin · Initiatives — toolbar, compact table, slide-out drawer ============================================================ */ .admin-page--initiatives .admin-grid { display: block; } .admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 14px; } .admin-toolbar .search-input { flex: 1 1 280px; max-width: 380px; } .select-input { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0 10px 0 12px; font-size: 13px; } .select-input__label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .select-input select { border: 0; background: transparent; padding: 9px 4px; font: inherit; color: var(--text); } .select-input select:focus { outline: none; } .admin-toolbar__count { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .admin-toolbar__cta { white-space: nowrap; } .admin-init-table-wrap { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); } .admin-init-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .admin-init-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--border-soft); } .admin-init-table tbody td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid var(--border-soft); } .admin-init-table tbody tr:last-child td { border-bottom: 0; } .admin-init-table tbody tr:hover td { background: color-mix(in srgb, var(--brand-teal) 5%, transparent); } .admin-init-row.is-hidden { display: none; } .admin-init-table__status-col { width: 170px; } .admin-init-table__updated { width: 100px; color: var(--muted); } .admin-init-table__actions { width: 130px; text-align: right; } .admin-init-table__icon-col { width: 56px; } .admin-init-table__category-col { width: 160px; } .admin-init-row__sub--meta { margin-top: 4px; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .admin-link-row__icon-cell { width: 56px; } .admin-link-row .admin-link-icon { width: 32px; height: 32px; border-radius: 8px; } .admin-link-row .admin-link-icon img { width: 18px; height: 18px; } .admin-init-row__pill { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--status-color) 14%, transparent); color: color-mix(in srgb, var(--status-color) 78%, var(--text)); padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 11.5px; letter-spacing: 0.02em; } .admin-init-row__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 22%, transparent); } .admin-init-row__title { font-weight: 600; color: var(--heading); text-decoration: none; display: inline-block; line-height: 1.35; } .admin-init-row__title:hover { text-decoration: underline; } .admin-init-row__sub { margin: 2px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; } .admin-init-row__updated time { font-variant-numeric: tabular-nums; } .admin-init-row__actions { display: flex; justify-content: flex-end; gap: 6px; } .admin-init-row__actions form { display: inline-block; } .admin-empty { margin: 16px 0 0; padding: 40px 24px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); } .admin-empty h2 { margin: 0 0 6px; color: var(--heading); } .admin-empty p { margin: 0; } .admin-empty--inline { margin: 0; padding: 28px 16px; border: 0; background: transparent; font-style: italic; } /* Slide-out drawer used for add/edit */ .admin-drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; } .admin-drawer.is-open { pointer-events: auto; } .admin-drawer__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(7, 23, 42, 0.45); opacity: 0; transition: opacity 0.25s ease; } .admin-drawer.is-open .admin-drawer__scrim { opacity: 1; } [data-theme="dark"] .admin-drawer__scrim { background: rgba(0, 0, 0, 0.6); } .admin-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: min(560px, 96vw); background: var(--surface); border-left: 1px solid var(--border-soft); box-shadow: -16px 0 60px rgba(0, 0, 0, 0.18); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.2, 1); display: flex; flex-direction: column; overflow-y: auto; } .admin-drawer.is-open .admin-drawer__panel { transform: translateX(0); } .admin-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 14px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: var(--surface); z-index: 1; } .admin-drawer__head .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-teal); font-weight: 600; margin: 0 0 2px; } .admin-drawer__head h2 { margin: 0; color: var(--heading); font-size: 20px; } .admin-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--muted); text-decoration: none; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } .admin-drawer__close:hover { background: var(--bg); color: var(--text); } .admin-drawer__form { padding: 18px 24px 28px; } @media (max-width: 720px) { .admin-toolbar { flex-direction: column; align-items: stretch; } .admin-toolbar .search-input, .admin-toolbar .select-input, .admin-toolbar__cta { width: 100%; max-width: none; } .admin-toolbar__count { margin-left: 0; text-align: center; } .admin-init-table thead { display: none; } .admin-init-table, .admin-init-table tbody, .admin-init-row, .admin-init-row td { display: block; width: 100%; } .admin-init-row { padding: 12px 14px 10px; border-bottom: 1px solid var(--border-soft); } .admin-init-row td { padding: 4px 0; border: 0; } .admin-init-row__title-cell { padding-bottom: 4px; } .admin-init-row__updated::before { content: "Updated "; color: var(--muted); } .admin-init-row__actions { justify-content: flex-start; padding-top: 6px; } } /* ============================================================ Admin · Messaging diagnostics ============================================================ */ .messaging-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .messaging-card { --tone: var(--ok); --tone-soft: var(--ok-bg); position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 20px 20px 22px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; gap: 12px; } .messaging-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tone); } .messaging-card.is-warn { --tone: #d99e21; --tone-soft: rgba(217,158,33,0.16); } .messaging-card.is-ok { --tone: var(--ok); --tone-soft: var(--ok-bg); } .messaging-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .messaging-card__pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--tone) 75%, var(--text)); background: var(--tone-soft); padding: 5px 12px; border-radius: 999px; letter-spacing: .01em; } .messaging-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); } .messaging-card__state { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .messaging-card.is-ok .messaging-card__state { color: var(--ok); } .messaging-card.is-warn .messaging-card__state { color: #b9810f; } [data-theme="dark"] .messaging-card.is-warn .messaging-card__state { color: #f1c674; } .messaging-card__meta { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; } /* ============================================================ Initiatives · Executive overview ============================================================ */ .overview-page { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; } .overview-head { margin-bottom: 4px; } .overview-head .eyebrow { margin: 0 0 8px; } .overview-head__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .overview-head h1 { margin: 0; font-size: 32px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; line-height: 1.18; } .overview-head .lede { margin: 10px 0 0; max-width: 760px; } /* Shared "Board · Executive" view toggle. */ .view-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 10px; padding: 3px; gap: 2px; } .view-toggle__btn { padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 7px; text-decoration: none; transition: background .15s ease, color .15s ease; cursor: pointer; border: 0; background: transparent; font-family: inherit; } .view-toggle__btn:hover { color: var(--text); text-decoration: none; } .view-toggle__btn.is-active { background: color-mix(in srgb, var(--brand-teal) 16%, transparent); color: var(--brand-teal); cursor: default; } [data-theme="dark"] .view-toggle__btn.is-active { color: #7fc8da; } /* ----- KPI band ----- */ .overview-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .overview-kpi { --tone: var(--brand-teal); --tone-soft: color-mix(in srgb, var(--tone) 14%, transparent); position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 16px 18px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .overview-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tone); opacity: .5; } .overview-kpi--primary { --tone: var(--brand-teal); } .overview-kpi--primary::before { opacity: 1; } .overview-kpi--good { --tone: var(--ok); } .overview-kpi--warn { --tone: #d99e21; } .overview-kpi--fail { --tone: var(--fail); } .overview-kpi--warn::before, .overview-kpi--fail::before { opacity: 1; } .overview-kpi__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .overview-kpi__value { font-size: 36px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--heading); } .overview-kpi--warn .overview-kpi__value { color: #b9810f; } [data-theme="dark"] .overview-kpi--warn .overview-kpi__value { color: #f1c674; } .overview-kpi--fail .overview-kpi__value { color: var(--fail); } .overview-kpi--good .overview-kpi__value { color: var(--ok); } .overview-kpi__sub { font-size: 12.5px; color: var(--muted); } /* ----- Pipeline funnel ----- */ .overview-funnel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 20px 16px; box-shadow: var(--shadow); } .overview-funnel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .overview-funnel__head h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .overview-funnel__total { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .overview-funnel__bar { display: flex; width: 100%; height: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--border-soft) 60%, transparent); margin-bottom: 14px; } .overview-funnel__seg { width: var(--w, 0%); background: var(--status-color, var(--brand-teal)); transition: width .4s ease; } .overview-funnel__seg + .overview-funnel__seg { border-left: 1px solid var(--surface); } .overview-funnel__legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 14px; } .overview-funnel__leg { display: grid; grid-template-columns: max-content 1fr max-content max-content; align-items: center; gap: 8px; font-size: 12.5px; } .overview-funnel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 20%, transparent); } .overview-funnel__name { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .overview-funnel__count { font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--status-color) 80%, var(--text)); } .overview-funnel__pct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; } /* ----- Department × stage matrix (the centerpiece) ----- */ .overview-matrix { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 18px 14px; box-shadow: var(--shadow); } .overview-matrix__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .overview-matrix__head h2 { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .overview-matrix__sub { margin: 0; font-size: 12.5px; color: var(--muted); } .overview-matrix__legend { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .overview-matrix__legend-scale { display: inline-flex; gap: 2px; } .overview-matrix__legend-cell { width: 14px; height: 14px; border-radius: 3px; background: var(--brand-teal); } .overview-matrix__scroller { overflow-x: auto; margin: 0 -2px; padding: 0 2px; } .overview-matrix__table { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; } .overview-matrix__corner { text-align: left; width: 200px; padding: 6px 10px 6px 4px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; position: relative; } .overview-matrix__corner-row { display: block; text-align: right; } .overview-matrix__corner-divider { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px; color: var(--border); font-weight: 300; } .overview-matrix__corner-col { display: block; text-align: left; } .overview-matrix__col-head { text-align: center; padding: 6px 6px 8px; font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--status-color) 78%, var(--text)); text-transform: uppercase; letter-spacing: .04em; vertical-align: bottom; min-width: 76px; } .overview-matrix__col-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 22%, transparent); margin-right: 6px; vertical-align: middle; } .overview-matrix__col-name { vertical-align: middle; white-space: nowrap; } .overview-matrix__col-total { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--status-color) 75%, var(--text)); font-variant-numeric: tabular-nums; letter-spacing: -.005em; text-transform: none; } .overview-matrix__row-total-head { text-align: center; padding: 6px 8px 8px; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; vertical-align: bottom; width: 60px; } .overview-matrix__row-head { text-align: left; padding: 8px 12px 8px 6px; vertical-align: middle; font-weight: 600; color: var(--heading); font-size: 13px; white-space: nowrap; } .overview-matrix__row-name { display: block; letter-spacing: -.005em; } .overview-matrix__row-bar { display: flex; width: 100%; height: 4px; margin-top: 4px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--border-soft) 60%, transparent); } .overview-matrix__row-bar-seg { width: var(--w, 0%); background: var(--status-color); opacity: .9; } .overview-matrix__row-bar-seg + .overview-matrix__row-bar-seg { border-left: 1px solid var(--surface); } .overview-matrix__cell { position: relative; height: 56px; min-width: 64px; text-align: center; vertical-align: middle; padding: 0; border-radius: 8px; transition: transform .15s ease, box-shadow .15s ease; } .overview-matrix__cell.is-empty { background: color-mix(in srgb, var(--border-soft) 35%, transparent); border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent); } .overview-matrix__cell:not(.is-empty) { background: color-mix(in srgb, var(--status-color) calc(var(--alpha) * 100%), transparent); } .overview-matrix__cell-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 8px; text-decoration: none; color: color-mix(in srgb, var(--status-color) 95%, var(--text)); font-weight: 700; font-variant-numeric: tabular-nums; outline-offset: 2px; transition: transform .15s ease, box-shadow .15s ease; } .overview-matrix__cell-count { font-size: 18px; letter-spacing: -.01em; text-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 60%, transparent); } [data-theme="dark"] .overview-matrix__cell-link { color: color-mix(in srgb, var(--status-color) 30%, #ffffff); } .overview-matrix__cell-link:hover { transform: scale(1.04); box-shadow: 0 4px 16px color-mix(in srgb, var(--status-color) 30%, transparent); text-decoration: none; } .overview-matrix__cell-empty { display: inline-block; color: var(--muted); font-size: 18px; line-height: 1; opacity: .55; } .overview-matrix__row-total { text-align: center; vertical-align: middle; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--heading); background: color-mix(in srgb, var(--brand-navy) 6%, transparent); border-radius: 8px; padding: 8px 6px; } [data-theme="dark"] .overview-matrix__row-total { background: color-mix(in srgb, #ffffff 5%, transparent); } /* Row hover: subtly raise and highlight column header. */ .overview-matrix__row:hover .overview-matrix__cell:not(.is-empty) { outline: 1px solid color-mix(in srgb, var(--status-color) 28%, transparent); } /* ----- Split rail: attention + activity ----- */ .overview-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .overview-attention, .overview-activity { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 18px 16px; box-shadow: var(--shadow); } .overview-attention__head, .overview-activity__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .overview-attention__head h2, .overview-activity__head h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .overview-attention__count, .overview-activity__count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; } .overview-attention__empty { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0; color: var(--muted); font-size: 13px; } .overview-attention__empty-mark { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ok-bg); color: var(--ok); } .overview-attention__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .overview-attention__item { border-top: 1px solid var(--border-soft); } .overview-attention__item:first-child { border-top: 0; } .overview-attention__link { --status-color: inherit; display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: 12px; padding: 10px 4px; text-decoration: none; color: inherit; border-radius: 8px; transition: background .15s ease, transform .15s ease; } .overview-attention__link:hover { background: color-mix(in srgb, var(--status-color) 7%, transparent); text-decoration: none; transform: translateX(2px); } .overview-attention__reason { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--status-color) 14%, transparent); color: color-mix(in srgb, var(--status-color) 85%, var(--text)); padding: 5px 10px; border-radius: 999px; white-space: nowrap; } .overview-attention__item--at-risk .overview-attention__reason { background: var(--fail-bg); color: var(--fail); } .overview-attention__item--stalled .overview-attention__reason { background: rgba(217, 158, 33, 0.16); color: #b9810f; } [data-theme="dark"] .overview-attention__item--stalled .overview-attention__reason { color: #f1c674; } .overview-attention__icon { display: inline-flex; } .overview-attention__body { min-width: 0; } .overview-attention__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .overview-attention__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .overview-attention__chev { color: var(--muted); font-weight: 600; transition: transform .15s ease; } .overview-attention__link:hover .overview-attention__chev { transform: translateX(3px); color: var(--text); } /* Activity feed */ .overview-activity__list { list-style: none; margin: 0; padding: 0 0 0 14px; position: relative; } .overview-activity__list::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 6px; width: 2px; background: linear-gradient(to bottom, color-mix(in srgb, var(--brand-teal) 30%, transparent), var(--border-soft)); border-radius: 2px; } .overview-activity__item { position: relative; padding: 0 0 12px 18px; } .overview-activity__item:last-child { padding-bottom: 0; } .overview-activity__dot { position: absolute; left: -2px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--status-color, var(--brand-teal)); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in srgb, var(--status-color, var(--brand-teal)) 35%, transparent); } .overview-activity__link { display: block; text-decoration: none; color: inherit; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; transition: background .15s ease; } .overview-activity__link:hover { background: color-mix(in srgb, var(--status-color, var(--brand-teal)) 6%, transparent); text-decoration: none; } .overview-activity__title { margin: 0 0 1px; font-size: 13px; font-weight: 600; color: var(--heading); letter-spacing: -.005em; } .overview-activity__summary { margin: 0 0 2px; font-size: 12.5px; color: var(--text); line-height: 1.4; } .overview-activity__meta { margin: 0; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } /* ----- Roll-up by department ----- */ .overview-rollup { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 18px 8px; box-shadow: var(--shadow); } .overview-rollup__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .overview-rollup__head h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .overview-rollup__sub { font-size: 12px; color: var(--muted); } .overview-rollup__group { scroll-margin-top: 80px; padding: 12px 0; border-top: 1px solid var(--border-soft); transition: background .25s ease; border-radius: 8px; } .overview-rollup__group:first-of-type { border-top: 0; } .overview-rollup__group.is-flashed { animation: overviewFlash 1.4s ease both; } @keyframes overviewFlash { 0% { background: color-mix(in srgb, var(--brand-teal) 16%, transparent); } 100% { background: transparent; } } .overview-rollup__group-head { display: grid; grid-template-columns: 1fr max-content max-content; align-items: center; gap: 12px; margin-bottom: 8px; padding: 0 4px; } .overview-rollup__group-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--heading); letter-spacing: -.005em; } .overview-rollup__group-count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; } .overview-rollup__group-bar { width: 200px; height: 6px; display: flex; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--border-soft) 60%, transparent); } .overview-rollup__group-bar-seg { width: var(--w, 0%); background: var(--status-color); } .overview-rollup__group-bar-seg + .overview-rollup__group-bar-seg { border-left: 1px solid var(--surface); } .overview-rollup__list { list-style: none; margin: 0; padding: 0; } .overview-rollup__row { --status-color: var(--brand-teal); border-top: 1px solid var(--border-soft); } .overview-rollup__row:first-child { border-top: 0; } .overview-rollup__link { display: grid; grid-template-columns: 130px 1.2fr 1fr max-content; align-items: center; gap: 14px; padding: 10px 6px; text-decoration: none; color: inherit; border-radius: 8px; transition: background .15s ease, transform .15s ease; } .overview-rollup__link:hover { background: color-mix(in srgb, var(--status-color) 7%, transparent); text-decoration: none; transform: translateX(2px); } .overview-rollup__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--status-color) 14%, transparent); color: color-mix(in srgb, var(--status-color) 80%, var(--text)); padding: 4px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .overview-rollup__pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-color); } .overview-rollup__title { font-size: 13.5px; font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; } .overview-rollup__summary { font-size: 12.5px; color: var(--muted); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .overview-rollup__summary--empty { opacity: .55; } .overview-rollup__time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 900px) { .overview-split { grid-template-columns: 1fr; } .overview-rollup__link { grid-template-columns: max-content 1fr max-content; } .overview-rollup__summary { display: none; } .overview-rollup__group-bar { width: 100px; } } @media (max-width: 640px) { .overview-head h1 { font-size: 24px; } .overview-kpi__value { font-size: 28px; } .overview-matrix { padding: 14px 14px 12px; } .overview-matrix__cell { height: 46px; min-width: 56px; } .overview-matrix__cell-count { font-size: 16px; } .overview-matrix__row-head { font-size: 12px; padding: 6px 8px 6px 4px; } .overview-matrix__col-head { font-size: 10px; min-width: 60px; } .overview-rollup__link { gap: 10px; padding: 10px 4px; } } /* ============================================================ Service tickets (Freshservice) ============================================================ */ .service-page { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; } .service-head { margin-bottom: 4px; } .service-head .eyebrow { margin: 0 0 8px; } .service-head__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .service-head h1 { margin: 0; font-size: 32px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; line-height: 1.18; } .service-head__count { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 999px; } .service-head__open { margin-left: auto; display: inline-flex; align-items: center; text-decoration: none; } .service-head .lede { margin: 10px 0 0; max-width: 760px; } .service-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } /* Reuses .overview-kpi styles defined in the executive overview block. */ .service-age { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 20px 16px; box-shadow: var(--shadow); } .service-age__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .service-age__head h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .service-age__total { font-size: 12px; color: var(--muted); } .service-age__bar { display: flex; width: 100%; height: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--border-soft) 60%, transparent); margin-bottom: 14px; } .service-age__seg { width: var(--w, 0%); background: var(--status-color, var(--brand-teal)); } .service-age__seg + .service-age__seg { border-left: 1px solid var(--surface); } .service-age__legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 14px; } .service-age__leg { display: grid; grid-template-columns: max-content 1fr max-content max-content; align-items: center; gap: 8px; font-size: 12.5px; } .service-age__leg.is-empty { opacity: .5; } .service-age__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-color) 20%, transparent); } .service-age__label { color: var(--text); font-weight: 600; white-space: nowrap; } .service-age__count { font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--status-color) 80%, var(--text)); } .service-age__pct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; } .service-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; } .service-load { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 18px 16px; box-shadow: var(--shadow); } .service-load__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .service-load__head h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .service-load__count { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; } .service-load__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .service-load__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) max-content; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--border-soft); } .service-load__row:first-child { border-top: 0; } .service-load__row.is-unassigned .service-load__name { color: var(--muted); font-style: italic; } .service-load__name { font-size: 13.5px; font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .service-load__bar { display: block; height: 6px; background: color-mix(in srgb, var(--border-soft) 60%, transparent); border-radius: 999px; overflow: hidden; } .service-load__bar-fill { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--brand-teal), color-mix(in srgb, var(--brand-teal) 60%, var(--brand-coral))); border-radius: 999px; transition: width .4s ease; } .service-load__metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; } .service-load__total { font-size: 16px; font-weight: 700; color: var(--heading); letter-spacing: -.005em; } .service-load__split { font-size: 11px; color: var(--muted); white-space: nowrap; } .service-load__stalled { color: var(--fail); font-weight: 600; } /* "+ N more agents" disclosure: compact two-column grid hidden by default. */ .service-load__more { margin-top: 10px; border-top: 1px solid var(--border-soft); padding-top: 10px; } .service-load__more-summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 12.5px; color: var(--muted); transition: background .15s ease, color .15s ease; } .service-load__more-summary::-webkit-details-marker { display: none; } .service-load__more-summary:hover { background: color-mix(in srgb, var(--brand-teal) 7%, transparent); color: var(--text); } .service-load__more-toggle { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease, color .15s ease; } .service-load__more[open] > .service-load__more-summary .service-load__more-toggle { transform: rotate(180deg); color: var(--brand-teal); } .service-load__more-label strong { color: var(--heading); font-weight: 700; margin-right: 4px; } .service-load__compact { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 0; } .service-load__compact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 60px) max-content max-content; align-items: center; gap: 8px; padding: 5px 4px; border-top: 1px solid var(--border-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; } /* No top border on the first row of each column (positions 1 and 2 in the 2-col grid). */ .service-load__compact-row:nth-child(-n+2) { border-top: 0; } .service-load__compact-row.is-unassigned .service-load__compact-name { color: var(--muted); font-style: italic; } .service-load__compact-name { font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .service-load__compact-bar { display: block; height: 4px; background: color-mix(in srgb, var(--border-soft) 60%, transparent); border-radius: 999px; overflow: hidden; } .service-load__compact-bar-fill { display: block; height: 100%; width: var(--w, 0%); background: var(--brand-teal); border-radius: 999px; opacity: .75; } .service-load__compact-total { font-weight: 700; color: var(--heading); font-size: 13px; min-width: 24px; text-align: right; } .service-load__compact-stalled { font-weight: 700; font-size: 11px; color: var(--fail); background: var(--fail-bg); border-radius: 999px; padding: 1px 7px; min-width: 24px; text-align: center; } .service-load__compact-stalled.is-zero { color: var(--muted); background: transparent; font-weight: 400; opacity: .35; } @media (max-width: 720px) { .service-load__compact { grid-template-columns: 1fr; } .service-load__compact-row:nth-child(-n+2) { border-top: 1px solid var(--border-soft); } .service-load__compact-row:first-child { border-top: 0; } } .service-oldest { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 14px; padding: 18px 18px 12px; box-shadow: var(--shadow); } .service-oldest__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .service-oldest__head h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .service-oldest__sub { font-size: 12px; color: var(--muted); } .service-oldest__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .service-oldest__row { border-top: 1px solid var(--border-soft); } .service-oldest__row:first-child { border-top: 0; } .service-oldest__link { display: grid; grid-template-columns: max-content 1fr max-content; align-items: center; gap: 14px; padding: 12px 6px; text-decoration: none; color: inherit; border-radius: 8px; transition: background .15s ease, transform .15s ease; } .service-oldest__link:hover { background: color-mix(in srgb, var(--brand-teal) 6%, transparent); text-decoration: none; transform: translateX(2px); } .service-oldest__row.is-stalled .service-oldest__link:hover { background: color-mix(in srgb, var(--fail) 8%, transparent); } .service-oldest__age { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; padding: 8px 0; border-radius: 10px; background: color-mix(in srgb, var(--brand-teal) 12%, transparent); color: color-mix(in srgb, var(--brand-teal) 80%, var(--text)); } .service-oldest__row.is-stalled .service-oldest__age { background: var(--fail-bg); color: var(--fail); } .service-oldest__age-num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.005em; line-height: 1; } .service-oldest__age-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; opacity: .8; } .service-oldest__body { min-width: 0; } .service-oldest__title { display: block; font-size: 14px; font-weight: 600; color: var(--heading); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .service-oldest__id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; color: var(--muted); margin-right: 6px; font-weight: 600; } .service-oldest__meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 11.5px; color: var(--muted); } .service-oldest__pill { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--brand-teal-soft); color: var(--accent-on-soft); } .service-oldest__pill--3 { background: rgba(217,158,33,0.16); color: #b9810f; } [data-theme="dark"] .service-oldest__pill--3 { color: #f1c674; } .service-oldest__pill--6, .service-oldest__pill--7 { background: color-mix(in srgb, #a45ba8 16%, transparent); color: #a45ba8; } [data-theme="dark"] .service-oldest__pill--6, [data-theme="dark"] .service-oldest__pill--7 { color: #cf91d2; } .service-oldest__priority { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border-soft); color: var(--muted); } .service-oldest__priority--3 { background: rgba(217,158,33,0.16); color: #b9810f; border-color: rgba(217,158,33,0.30); } [data-theme="dark"] .service-oldest__priority--3 { color: #f1c674; } .service-oldest__priority--4 { background: var(--fail-bg); color: var(--fail); border-color: rgba(192,65,65,0.30); } .service-oldest__assignee { font-weight: 600; color: var(--text); } .service-oldest__assignee--unassigned { font-style: italic; color: var(--muted); } .service-oldest__group { font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 8px; } .service-oldest__chev { color: var(--muted); font-size: 14px; transition: transform .15s ease; } .service-oldest__link:hover .service-oldest__chev { transform: translate(3px, -3px); color: var(--brand-teal); } .service-foot { margin: 0; text-align: right; } @media (max-width: 900px) { .service-split { grid-template-columns: 1fr; } } @media (max-width: 640px) { .service-head h1 { font-size: 24px; } .service-head__open { margin-left: 0; } .service-load__row { grid-template-columns: 1fr max-content; } .service-load__bar { grid-column: 1 / -1; } .service-oldest__link { gap: 10px; padding: 10px 4px; } .service-oldest__age { width: 48px; } } /* ============================================================ Admin-restricted — friendly 403 for non-admin visitors ============================================================ */ .admin-restricted { display: flex; justify-content: center; padding: 12px 0 48px; } .admin-restricted__card { position: relative; width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 18px; padding: 36px 36px 30px; box-shadow: var(--shadow-lift); overflow: hidden; } /* Subtle "lightsaber" gradient stripe at the top — teal blade fading into a coral blade. Carries a faint glow so it reads as a deliberate wink rather than a generic accent bar. */ .admin-restricted__saber { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, color-mix(in srgb, var(--brand-teal) 60%, white) 0%, var(--brand-teal) 35%, var(--brand-coral) 65%, color-mix(in srgb, var(--brand-coral) 60%, white) 100% ); box-shadow: 0 0 12px color-mix(in srgb, var(--brand-teal) 40%, transparent), 0 0 12px color-mix(in srgb, var(--brand-coral) 40%, transparent); } .admin-restricted .eyebrow { margin: 0 0 8px; } .admin-restricted h1 { margin: 0 0 14px; font-size: 28px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; line-height: 1.2; } .admin-restricted .lede { margin: 0; font-size: 15.5px; line-height: 1.6; } .admin-restricted__quote { position: relative; margin: 24px 0 4px; padding: 16px 20px 16px 56px; background: color-mix(in srgb, var(--brand-coral) 12%, transparent); border-left: 3px solid var(--brand-coral); border-radius: 12px; } .admin-restricted__quote-mark { position: absolute; top: 4px; left: 16px; font-size: 56px; font-family: Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--brand-coral) 55%, transparent); } .admin-restricted__quote-text { margin: 0 0 6px; font-size: 16.5px; font-style: italic; font-weight: 600; color: var(--heading); letter-spacing: -.005em; line-height: 1.4; } .admin-restricted__quote-attr { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; } .admin-restricted__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .admin-restricted__signout { display: inline-flex; } @media (max-width: 560px) { .admin-restricted__card { padding: 28px 22px 24px; } .admin-restricted h1 { font-size: 22px; } .admin-restricted__quote { padding: 14px 16px 14px 44px; } .admin-restricted__quote-mark { font-size: 44px; left: 12px; } }