/* Simple Modern Design Language — ITSM. ONE stylesheet shared in spirit by every product: calm and white-dominant, the system SF stack, hairline borders, gentle shadows, generous whitespace, and exactly ONE accent per product (ITSM blue). The token block below is identical in both product repositories apart from that accent ramp — if you change a value here, change it there. Light and dark are both first class: the palette follows the reader's system setting via prefers-color-scheme, and an explicit data-theme on wins in either direction. Every token is defined on bare :root first, so nothing depends on a media query having matched. */ *, *::before, *::after { box-sizing: border-box; } :root { color-scheme: light; /* surfaces */ --canvas: #ffffff; --sunken: #f6f7f9; --card: #ffffff; --side: #fbfbfd; --field: #ffffff; /* hairlines — the only borders this language draws */ --hair: rgba(16, 24, 40, 0.09); --hair-soft: rgba(16, 24, 40, 0.06); --ring: rgba(16, 24, 40, 0.06); /* ink */ --ink: #10131a; --ink-2: #3c4453; --muted: #6b7488; /* interaction */ --hover: rgba(16, 24, 40, 0.045); --selected: rgba(16, 24, 40, 0.07); --btn2: #f1f2f5; /* status — the same three hues in both products, used sparingly */ --good: #12805c; --good-soft: #e6f5ef; --bad: #b4271f; --bad-soft: #fdecea; --warn: #8a5a06; --warn-soft: #fdf3e3; /* THE ONE THING A PRODUCT CHANGES */ --accent: #0a63d6; --accent-ink: #0a55b8; --accent-soft: #e8f0fe; --accent-quiet: rgba(10, 99, 214, 0.10); --on-accent: #ffffff; --live: var(--accent-ink); --live-soft: var(--accent-soft); /* elevation, radii, type */ --shadow-card: 0 0 0 1px var(--hair-soft), 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -18px rgba(16, 24, 40, 0.22); --shadow-pop: 0 0 0 1px var(--hair-soft), 0 12px 32px -12px rgba(16, 24, 40, 0.24); --radius: 14px; --radius-sm: 9px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --canvas: #0c1016; --sunken: #0a0d13; --card: #141922; --side: #0f141c; --field: #111823; --hair: rgba(255, 255, 255, 0.10); --hair-soft: rgba(255, 255, 255, 0.07); --ring: rgba(255, 255, 255, 0.07); --ink: #edf0f6; --ink-2: #ccd4e2; --muted: #98a2b6; --hover: rgba(255, 255, 255, 0.055); --selected: rgba(255, 255, 255, 0.09); --btn2: #1c2331; --good: #4ad2a0; --good-soft: #10291f; --bad: #ff8f85; --bad-soft: #2e1614; --warn: #e8b45f; --warn-soft: #2b2010; /* The accent lifts for a dark canvas — the same hue, not a different one. Leaving --accent at its light value made every filled control muddy. */ --accent: #3d8bff; --accent-ink: #8fbaff; --accent-soft: #14243c; --accent-quiet: rgba(61, 139, 255, 0.16); --on-accent: #06101f; --shadow-card: 0 0 0 1px var(--hair-soft), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -18px rgba(0, 0, 0, 0.7); --shadow-pop: 0 0 0 1px var(--hair-soft), 0 16px 40px -14px rgba(0, 0, 0, 0.8); } } :root[data-theme="dark"] { color-scheme: dark; --canvas: #0c1016; --sunken: #0a0d13; --card: #141922; --side: #0f141c; --field: #111823; --hair: rgba(255, 255, 255, 0.10); --hair-soft: rgba(255, 255, 255, 0.07); --ring: rgba(255, 255, 255, 0.07); --ink: #edf0f6; --ink-2: #ccd4e2; --muted: #98a2b6; --hover: rgba(255, 255, 255, 0.055); --selected: rgba(255, 255, 255, 0.09); --btn2: #1c2331; --good: #4ad2a0; --good-soft: #10291f; --bad: #ff8f85; --bad-soft: #2e1614; --warn: #e8b45f; --warn-soft: #2b2010; /* The accent lifts for a dark canvas — the same hue, not a different one. Leaving --accent at its light value made every filled control muddy. */ --accent: #3d8bff; --accent-ink: #8fbaff; --accent-soft: #14243c; --accent-quiet: rgba(61, 139, 255, 0.16); --on-accent: #06101f; --shadow-card: 0 0 0 1px var(--hair-soft), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -18px rgba(0, 0, 0, 0.7); --shadow-pop: 0 0 0 1px var(--hair-soft), 0 16px 40px -14px rgba(0, 0, 0, 0.8); } html, body { max-width: 100%; overflow-x: hidden; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } h1, h2, h3, h4 { letter-spacing: -0.02em; font-weight: 640; margin: 0; } p { margin: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } code, .mono { font-family: var(--mono); font-size: 0.92em; } code { background: var(--selected); border-radius: 5px; padding: 1px 5px; } /* ------------------------------------------------------------------ shell */ .app { min-height: 100vh; display: grid; grid-template-rows: 52px 1fr; grid-template-columns: 236px minmax(0, 1fr); grid-template-areas: "corner top" "side canvas"; } .corner { grid-area: corner; background: var(--side); display: flex; align-items: center; padding: 0 10px 0 14px; border-bottom: 1px solid var(--hair-soft); border-right: 1px solid var(--hair-soft); } .brand { display: flex; align-items: center; gap: 9px; font-weight: 660; letter-spacing: -0.02em; color: var(--ink); padding: 5px 8px; border-radius: var(--radius-sm); } .brand:hover { background: var(--hover); } .mark { width: 24px; height: 24px; flex: none; color: var(--ink); } .top { grid-area: top; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 16px; border-bottom: 1px solid var(--hair-soft); min-width: 0; } /* product switcher — identical markup and behaviour across the estate */ .switcher { display: flex; gap: 2px; padding: 2px; background: var(--btn2); border-radius: 10px; } .switcher a { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; font-weight: 570; color: var(--muted); white-space: nowrap; } .switcher a:hover { color: var(--ink); } .switcher a[aria-current="page"] { background: var(--card); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10); } .pagectx { font-size: 12.5px; color: var(--muted); font-weight: 520; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pagectx b { color: var(--ink); font-weight: 620; } .top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--accent-quiet); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 680; letter-spacing: 0; } .side { grid-area: side; background: var(--side); padding: 12px 10px; display: flex; flex-direction: column; gap: 1px; border-right: 1px solid var(--hair-soft); } .side a { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--ink-2); font-size: 13.5px; font-weight: 530; } .side a:hover { background: var(--hover); color: var(--ink); } .side a[aria-current="page"] { background: var(--accent-quiet); color: var(--accent-ink); font-weight: 600; } .side .side-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 640; padding: 12px 10px 6px; } .canvas { grid-area: canvas; overflow-y: auto; min-width: 0; } .page { max-width: 1180px; margin: 0 auto; padding: 28px 32px 72px; } .pagehead { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px; } .pagehead h1 { font-size: 26px; line-height: 1.2; } .pagehead .sub { color: var(--muted); font-size: 13.5px; margin-top: 5px; max-width: 62ch; } .pagehead .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* ----------------------------------------------------------------- pieces */ .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 20px; } .card + .card { margin-top: 16px; } .card h2 { font-size: 15px; margin-bottom: 4px; } .card .card-sub { color: var(--muted); font-size: 13px; } .card-flush { padding: 0; overflow: hidden; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--sans); font-weight: 570; font-size: 13px; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--hover); } .btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); } .btn-primary:hover { background: var(--accent); filter: brightness(1.06); } .btn-quiet { background: transparent; border-color: transparent; color: var(--muted); } .btn-quiet:hover { background: var(--hover); color: var(--ink); } .btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 15px 16px; } .stat .n { font-size: 26px; font-weight: 640; letter-spacing: -0.03em; line-height: 1.15; } .stat .k { color: var(--muted); font-size: 12.5px; margin-top: 2px; } .stat.is-accent .n { color: var(--accent-ink); } /* filters */ .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .filters select, .filters input[type="search"], .filters input[type="text"] { height: 32px; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--sans); font-size: 13px; padding: 0 10px; min-width: 0; } .filters input[type="search"] { min-width: 190px; flex: 1 1 190px; max-width: 320px; } /* tables scroll inside themselves; the page never scrolls sideways */ .tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; } table.list th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 640; padding: 12px 16px; border-bottom: 1px solid var(--hair-soft); white-space: nowrap; } table.list td { padding: 13px 16px; border-bottom: 1px solid var(--hair-soft); vertical-align: middle; } table.list tr:last-child td { border-bottom: 0; } table.list tbody tr:hover { background: var(--hover); } table.list .ref { font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; } table.list .subject { font-weight: 550; color: var(--ink); } table.list .subject a:hover { color: var(--accent-ink); } table.list .num { text-align: right; font-variant-numeric: tabular-nums; } table.list .when { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } /* chips */ .chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; background: var(--selected); color: var(--ink-2); white-space: nowrap; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .chip-accent { background: var(--accent-quiet); color: var(--accent-ink); } .chip-quiet { background: transparent; color: var(--muted); border: 1px solid var(--hair); } /* Priority and state read by weight, not by a second hue: the accent marks what is urgent and everything else stays neutral. */ .chip-p1 { background: var(--accent); color: var(--on-accent); } .chip-p2 { background: var(--accent-quiet); color: var(--accent-ink); } .pill-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* forms */ .field { display: block; margin-bottom: 14px; } .field > .label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; } .field .help { font-size: 12px; color: var(--muted); margin-top: 5px; } input[type="text"], input[type="email"], input[type="date"], input[type="search"], input[type="file"], select, textarea { width: 100%; border: 1px solid var(--hair); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--sans); font-size: 13.5px; padding: 8px 11px; max-width: 100%; } textarea { min-height: 120px; resize: vertical; line-height: 1.55; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; } .form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .checkline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); } .checkline input { width: auto; } /* inline control forms on a detail page */ .control { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .control select { flex: 1 1 140px; height: 32px; padding: 0 10px; } /* two-column detail layout */ .split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .aside { display: flex; flex-direction: column; gap: 16px; } .aside .card h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 12px; } .kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 10px; font-size: 13px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; } /* thread */ .thread { display: flex; flex-direction: column; gap: 12px; } .note { border: 1px solid var(--hair-soft); border-radius: var(--radius); padding: 14px 16px; background: var(--card); } .note.internal { background: var(--sunken); border-style: dashed; } .note .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 7px; } .note .who b { font-weight: 600; } .note .who .when { color: var(--muted); margin-left: auto; } .note .body { white-space: pre-wrap; color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; } /* banners */ .banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 16px; border: 1px solid var(--hair); } .banner-ok { background: var(--accent-quiet); border-color: transparent; color: var(--accent-ink); } .banner-err { background: var(--sunken); color: var(--ink); border-color: var(--hair); font-weight: 520; } .banner-info { background: var(--sunken); color: var(--ink-2); } .empty { text-align: left; padding: 34px 20px; color: var(--muted); } .empty h2 { font-size: 15px; color: var(--ink); margin-bottom: 6px; } .empty p { max-width: 60ch; } /* article reader */ .reader { max-width: 68ch; } .reader h2 { font-size: 17px; margin: 26px 0 8px; } .reader h3 { font-size: 14.5px; margin: 20px 0 6px; } .reader p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.68; } .reader ul { margin: 0 0 14px; padding-left: 22px; } .reader li { margin: 0 0 8px; color: var(--ink-2); line-height: 1.68; } .reader > :first-child { margin-top: 0; } /* ------------------------------------------------- landing and standalone */ .plain { min-height: 100vh; display: flex; flex-direction: column; } .plain-top { display: flex; align-items: center; gap: 12px; padding: 18px 24px; flex-wrap: wrap; } .plain-top .switcher { margin-left: auto; } .landing { width: 100%; max-width: 660px; margin: 0 auto; padding: 72px 24px 96px; } .landing h1 { font-size: 40px; line-height: 1.08; font-weight: 680; letter-spacing: -0.03em; margin-bottom: 16px; } .landing .lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-bottom: 28px; } .ctas { display: flex; gap: 10px; flex-wrap: wrap; } .cta { display: inline-flex; align-items: center; height: 40px; padding: 0 19px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 13.5px; border: 1px solid transparent; } .cta.ghost { background: var(--card); color: var(--ink); border-color: var(--hair); } .hint { margin-top: 26px; color: var(--muted); font-size: 13px; } .orglist { display: flex; flex-direction: column; gap: 8px; margin: 26px 0 0; } .orglist a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-card); font-weight: 570; } .orglist a:hover { box-shadow: var(--shadow-pop); } .orglist a .go { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 500; } /* ------------------------------------------------------------ responsive */ /* 1280 and up gets the full three-zone shell above. */ @media (max-width: 1080px) { .split { grid-template-columns: minmax(0, 1fr); } .aside { flex-direction: row; flex-wrap: wrap; } .aside > .card { flex: 1 1 260px; } } /* 834 — tablet: the sidebar collapses to a label-less rail. */ @media (max-width: 900px) { .app { grid-template-columns: 60px minmax(0, 1fr); } .corner { padding: 0 8px; justify-content: center; } .brand span { display: none; } .side { padding: 12px 8px; align-items: center; } .side a { justify-content: center; width: 44px; padding: 0; } .side .side-title { display: none; } .page { padding: 22px 20px 64px; } .pagehead h1 { font-size: 23px; } } /* 390 — phone: the rail becomes a scrolling strip under the header. */ @media (max-width: 640px) { .app { grid-template-rows: 52px auto 1fr; grid-template-columns: minmax(0, 1fr); grid-template-areas: "corner" "side" "canvas"; } .corner { border-right: 0; justify-content: flex-start; padding: 0 14px; } .brand span { display: inline; } .side { flex-direction: row; gap: 4px; overflow-x: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--hair-soft); align-items: stretch; } .side a { width: auto; padding: 0 12px; white-space: nowrap; } .side .side-title { display: none; } .top { grid-area: corner; justify-self: end; border-bottom: 0; padding-right: 12px; background: transparent; } /* The phone header keeps only what a thumb needs: identity and the way out. */ .top .pagectx, .top .switcher, .top .top-right > a.btn { display: none; } .page { padding: 18px 14px 56px; } .pagehead { gap: 12px; } .pagehead h1 { font-size: 21px; } .pagehead .actions { margin-left: 0; width: 100%; } .landing { padding: 44px 18px 72px; } .landing h1 { font-size: 30px; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv { grid-template-columns: 84px minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }