/* Simple Modern Design Language — Simple Modern Datacenter. 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 (Simple Modern Datacenter violet). The token block below is identical in both product repositories apart from that accent ramp — if you change a value here, change it there. The accent ramp is the same one app/shell.py declares, character for character; a test compares the two, because the stylesheet is what the browser reads. 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; /* chrome surfaces — what the shared shell (smdl-shell.css) paints with */ --surface: #fbfbfd; --surface-2: #f1f2f5; --surface-3: #e9ebf0; --ink-3: #6b7488; /* 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: #923fcb; --accent-ink: #7c36ad; --accent-soft: #f0e1ff; --accent-quiet: rgba(146, 63, 203, 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; /* chrome surfaces — what the shared shell (smdl-shell.css) paints with */ --surface: #0f141c; --surface-2: #1c2331; --surface-3: #232b3a; --ink-3: #98a2b6; --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: #bc85f0; --accent-ink: #d7b6f6; --accent-soft: #2c1b3a; --accent-quiet: rgba(188, 133, 240, 0.16); --on-accent: #1a0c2b; --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; /* chrome surfaces — what the shared shell (smdl-shell.css) paints with */ --surface: #0f141c; --surface-2: #1c2331; --surface-3: #232b3a; --ink-3: #98a2b6; --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: #bc85f0; --accent-ink: #d7b6f6; --accent-soft: #2c1b3a; --accent-quiet: rgba(188, 133, 240, 0.16); --on-accent: #1a0c2b; --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 */ /* The shell grid, corner switcher, top bar, sidebar and canvas all come from smdl-shell.css — the SAME file CORE serves, so the family is one chrome by construction. This stylesheet keeps only what the shell does not carry: the profile popover, the signed-out header, and this product's page furniture. */ .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; } /* profile popover — mirrors CORE's, on this stylesheet's tokens */ .user-menu { position: relative; } .user-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; padding: 8px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop); z-index: 60; } .user-pop[hidden] { display: none; } .user-pop-id { display: flex; align-items: center; gap: 11px; padding: 10px 10px 14px; } .user-pop-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .user-pop-who b { font-size: 14px; } .user-pop-who small { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; } .user-pop-appearance { padding: 2px 10px 16px; } .user-pop-label { display: block; color: var(--ink-3); font-size: 11.5px; font-weight: 650; margin-bottom: 8px; } .theme-seg { display: flex; width: 100%; padding: 3px; gap: 3px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface-2); } .theme-seg button { flex: 1; min-height: 30px; padding: 0; border: 0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; color: var(--ink-2); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; } .theme-seg button:hover { color: var(--ink); } .theme-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-card); } .theme-seg button .ic { font-size: 14px; } .user-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; font-family: var(--sans); font-size: 13px; font-weight: 550; color: var(--ink-2); padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; } .user-pop-item .ic { font-size: 16px; opacity: 0.7; } .user-pop-item:hover { background: var(--surface-2); color: var(--ink); } .user-pop-item.danger-item:hover { color: var(--bad); background: var(--bad-soft); } .user-pop form { margin: 0; } /* the signed-out header (landing and error surfaces) */ .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); } .plain-actions { margin-left: auto; display: flex; gap: 8px; } /* the page inside the shell canvas */ .page { max-width: 1180px; margin: 0 auto; padding: 16px 4px 64px; } /* ----------------------------------------------------------------- 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: var(--ctl-h, 34px); padding: 0 13px; border: 1px solid var(--hair); border-radius: var(--ctl-radius, 9px); background: var(--card); color: var(--ink); font-family: var(--sans); font-weight: var(--ctl-fw, 620); font-size: var(--ctl-fs, 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: var(--ctl-h-sm, 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"] { width: auto; 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; } /* type-ahead — the suggestions under the search field, fed by the search route's own ?format=json branch. The field is a plain form control and the form submits without any of this; the list is an accelerator, never the way in. The wrapper takes the flex the input had, because it is now the flex item. */ .ta { position: relative; flex: 1 1 190px; max-width: 320px; } .ta input[type="search"] { width: 100%; max-width: none; flex: none; } .ta-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); max-height: 320px; overflow-y: auto; } .ta-pop[hidden] { display: none; } .ta-pop li { margin: 0; } .ta-pop a { display: flex; gap: 8px; align-items: baseline; padding: 7px 9px; border-radius: 7px; font-size: 13px; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ta-pop a:hover, .ta-pop a.is-active { background: var(--hover); } .ta-pop a small { color: var(--muted); font-size: 11.5px; margin-left: auto; flex: none; } /* 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: var(--chip-h, 22px); padding: 0 var(--chip-pad, 9px); border-radius: 999px; font-size: var(--chip-fs, 11.5px); font-weight: var(--chip-fw, 650); 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; } /* 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; } /* ------------------------------------------------- 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; } .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 shell rail is handled by smdl-shell.css. */ @media (max-width: 900px) { .page { padding: 14px 0 56px; } } /* 390 — phone. */ @media (max-width: 640px) { .page { padding: 10px 0 48px; } .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; } }