/* ============================================================================= Nimbus control panel — design system. Operator console: FQDNs/container names in monospace as first-class identity, a teal "signal" accent (network/TLS), status signal-dots as the signature. Custom CSS with design tokens (no framework) per architecture-principles laravel/design-system.md. ============================================================================= */ :root { /* `light dark` means: follow the device unless an explicit choice overrides it below. It also makes native controls, scrollbars and form widgets follow the theme, which matters on a console that is mostly inputs and tables. */ color-scheme: light dark; /* Every token carries BOTH values on one line via light-dark(). There is no second dark-mode block to keep in sync — that duplication was how the dark palette drifted from the light one in the first place. Left value = light. */ /* Surfaces (cool off-white — deliberately not cream) */ --bg: light-dark(#eef1f4, #0e1418); --surface: light-dark(#ffffff, #151d23); --surface-2: light-dark(#f6f8fa, #1a242b); --ink: light-dark(#141a20, #e8eef2); --muted: light-dark(#5a6773, #93a1ac); --line: light-dark(#dde3e9, #263139); /* Signal accent — teal (network/TLS), not acid-green/terracotta */ --signal: light-dark(#0e7c86, #35b3bd); --signal-strong:light-dark(#0a5c64, #63cdd6); --signal-tint: light-dark(#e3f2f3, #10312f); /* Text ON a --signal fill. White works on the dark teal and fails on the light one (~2.2:1), so the pairing is a token rather than a literal in .btn. */ --on-signal: light-dark(#ffffff, #062a2e); /* Semantic status */ --up: light-dark(#1f9d57, #34c46f); --down: light-dark(#d64545, #ef6b6b); --warn: light-dark(#c17d12, #e0a44a); --starting: light-dark(#2f6fed, #5a8cf5); --idle: #8a94a0; /* Type */ --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --radius: 7px; --radius-sm: 5px; /* light-dark() takes colours, not shadow lists — so the geometry is shared and only the two colours switch. */ --shadow-near: light-dark(rgba(20,26,32,.06), rgba(0,0,0,.40)); --shadow-far: light-dark(rgba(20,26,32,.05), rgba(0,0,0,.35)); --shadow: 0 1px 2px var(--shadow-near), 0 5px 18px var(--shadow-far); --wire: linear-gradient(90deg, var(--signal), #4bb8bf 60%, transparent); } /* An explicit choice. The server writes data-theme onto from the cookie, so the palette is right in the first bytes the browser parses — no flash, and no dependence on JavaScript. "Follow the device" is the ABSENCE of the attribute, not a third value here. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } code, .mono, .domain, .cname { font-family: var(--font-mono); } /* A label/value list breaks its identifiers rather than pushing its card wide — at EVERY width, not only on a phone. `.card` is `overflow: hidden`, so on a desktop layout an over-long token is not a scrollbar, it is silently cut off: a stack's CodeCommit URL measured 921px against a 768px viewport with nothing on screen to say the rest existed. Breaking only happens when it must. Deliberately NOT applied to table cells. A `table.grid` answers the same problem by SCROLLING inside `.table-scroll`, and the two answers cannot both apply: `anywhere` drops the table's min-content width to almost nothing, so `width: 100%` then wins and every domain in the column is shredded into a five-line stack instead of the table being wide. Below 760px the table stops being a table (`.stack-sm`) and breaking is right again — see that block. */ .detail dd, .kv dd { overflow-wrap: anywhere; } a { color: var(--signal-strong); text-decoration: none; } a:hover { text-decoration: underline; } /* One keyboard-focus treatment for everything that takes focus. Declared once, here, so a new control cannot ship without a visible focus ring. */ a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--radius-sm); } /* The mark: a besom (resources/views/components/brand-mark.blade.php). Handle in currentColor, bristles in --signal, so it takes the colour of wherever it sits. */ .brand-mark { flex: none; display: block; } /* Visually hidden but available to a screen reader. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Theme switch -------------------------------------------------------- A segmented three-way control: follow the device / light / dark. The states are discs because that is already this design's vocabulary for state (.dot) — no icon set is introduced for one control. Sized to clear a 44px touch target including the wrapper's padding. */ .theme-switch { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); } .theme-switch-option { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: none; border: 0; border-radius: 999px; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; } .theme-switch-option:hover { color: var(--ink); background: var(--surface); } .theme-switch-option[aria-pressed="true"] { background: var(--surface); color: var(--signal-strong); box-shadow: 0 1px 2px var(--shadow-near); } .theme-switch-option:focus-visible { outline-offset: -2px; } .theme-disc { display: block; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor; } /* Half-filled — the device decides. */ .theme-disc-system { background: linear-gradient(90deg, currentColor 50%, transparent 50%); } .theme-disc-light { background: transparent; } .theme-disc-dark { background: currentColor; } /* ---- App shell ----------------------------------------------------------- */ .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } /* ---- The narrow-screen chrome -------------------------------------------- Above 760px none of this exists: the rail is the rail, and the topbar, the hamburger and the scrim are all display:none. Below it the rail becomes a drawer and these three carry it. Declared HERE, out of the media query, only so the "off" state is stated once rather than implied. */ .topbar, .rail-scrim, .rail-close { display: none; } /* The bars and the cross are drawn from box-shadow, not from an icon set — the same decision the theme control's discs made (design-language §6). The panel has one drawn icon, the mark, and a hamburger is not worth becoming the second. Both are 18px wide and share the toggle's currentColor. */ .nav-bars, .nav-cross { display: block; width: 18px; height: 2px; position: relative; } .nav-bars { background: currentColor; border-radius: 2px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } .nav-cross::before, .nav-cross::after { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .nav-cross::before { transform: rotate(45deg); } .nav-cross::after { transform: rotate(-45deg); } /* Both drawer controls are the same 44px target, which is the floor for a thumb — .btn's 34px is right for a mouse and wrong for this. */ .nav-toggle, .rail-close { align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; } .nav-toggle:hover, .rail-close:hover { background: var(--surface-2); } .rail { background: var(--surface); border-right: 1px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; gap: 6px; } .rail .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: .02em; font-size: 16px; padding: 6px 8px 16px; color: var(--ink); } .rail .brand:hover { text-decoration: none; } .rail nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; } .rail nav a:hover { background: var(--surface-2); text-decoration: none; } .rail nav a.active { background: var(--signal-tint); color: var(--signal-strong); } /* Three groups — what is hosted, who may reach it, how the platform is set up. Separated by air and a hairline rather than by headings: a heading per group would be three more words competing with eight links, and the grouping is the whole message. The rule is on the group ABOVE, so a group a role cannot see takes its separator with it and never leaves a stray line behind. */ .rail nav { display: flex; flex-direction: column; gap: 6px; } .rail nav .nav-group { display: flex; flex-direction: column; gap: 2px; } .rail nav .nav-group + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .rail .spacer { flex: 1; } .rail-theme { padding: 8px 8px 10px; } .rail .who { color: var(--muted); font-size: 13px; padding: 8px; border-top: 1px solid var(--line); } .rail .who-out { margin-top: 8px; } /* min-width:0 because a grid item refuses to shrink below its content's min-content width by default, and this column holds things with a wide one — a `wrap="off"` textarea holding a deploy log, a long unbreakable identifier. Without it those push the COLUMN wider than the viewport and the whole page scrolls sideways; with it they scroll inside themselves, which is where the scrolling belongs. */ .main { padding: 28px 32px; max-width: 1100px; min-width: 0; } /* ---- Page header --------------------------------------------------------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .page-head h1 { font-size: 22px; margin: 0; font-weight: 640; letter-spacing: -.01em; } .page-head .sub { color: var(--muted); font-size: 14px; margin-top: 2px; } .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--signal-strong); font-weight: 600; } /* ---- Cards / tables ------------------------------------------------------ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .card + .card { margin-top: 18px; } /* A card is followed either by another card, by actions that act on it, or by a footnote about it. All three get the same air, declared once. */ .card + .btn-row, .card + p.hint, .btn-row + p.hint { margin-top: 14px; } /* A single form reads better short than full-width. */ .card.narrow { max-width: 560px; } .card .card-h { padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; } .card .card-b { padding: 18px; } /* Sub-heading inside a card body, and the same treatment for the create form's settings group. Every page that needed one was inventing it locally. */ .card-b h3, .alert h3, .field-group-title { font-size: 14px; font-weight: 640; letter-spacing: -.005em; margin: 22px 0 10px; } .card-b > :first-child, .alert > :first-child { margin-top: 0; } .right { text-align: right; } .muted { color: var(--muted); } table.grid { width: 100%; border-collapse: collapse; } table.grid th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 12px 18px; border-bottom: 1px solid var(--line); } table.grid td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; } table.grid tr:last-child td { border-bottom: 0; } table.grid tr.row:hover td { background: var(--surface-2); } /* Two column roles, opted into per table — an OBJECT list (sites, routes) only. A data table is left alone: its cells are long paths and snapshot ids that have to be free to wrap. `col-grow` is the identity column — the domain, the address, the name — and it absorbs all the spare width. `col-state` is everything beside it: short, known-length tokens that must never be squeezed. Both are needed TOGETHER, and that is the part that is easy to get wrong: col-grow alone hands the identity column every spare pixel, which is exactly how a two-word heading ("Site type") and a hyphenated value ("web-base") end up broken across two lines in a column nothing was stopping from being wider. */ table.grid th.col-grow, table.grid td.col-grow { width: 100%; } table.grid th.col-state, table.grid td.col-state { white-space: nowrap; } .domain { font-size: 14.5px; font-weight: 550; } .cname { color: var(--muted); font-size: 12.5px; } /* ---- Status signal-dot (the signature) ----------------------------------- */ .signal { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 550; white-space: nowrap; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--idle); position: relative; flex: none; } .signal.up .dot { background: var(--up); } .signal.down .dot { background: var(--down); } .signal.starting .dot { background: var(--starting); } .signal.up { color: var(--up); } .signal.down { color: var(--down); } .signal.starting { color: var(--starting); } .signal.maintenance .dot { background: var(--warn); } .signal.maintenance { color: var(--warn); } /* gentle pulse only for healthy — motion reserved for the "all good" signal */ .signal.up .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--up); opacity: .5; animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .signal.up .dot::after { animation: none; } } /* ---- Publish state chip -------------------------------------------------- */ /* nowrap because a pill that wraps stops reading as one token — a narrow Owner column broke "0 Domains" across two lines inside the rounded edge. */ .chip { display: inline-block; white-space: nowrap; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); } .chip.public { background: var(--signal-tint); color: var(--signal-strong); border-color: transparent; } .chip.private { background: var(--surface-2); color: var(--muted); } .chip.zero { background: transparent; color: var(--muted); border-style: dashed; } /* Something the operator should see but cannot fix from here (DNS not resolving yet). */ .chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); } /* ---- Buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; font-weight: 560; font-size: 13.5px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: background .12s, border-color .12s; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn.primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); } .btn.primary:hover { background: var(--signal-strong); border-color: var(--signal-strong); } .btn.danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 40%, var(--line)); } .btn.danger:hover { background: color-mix(in srgb, var(--down) 12%, var(--surface)); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.block { width: 100%; justify-content: center; } .btn-row { display: flex; gap: 8px; flex-wrap: wrap; } /* A cell holding more than one action still reads as a row of buttons. */ table.grid td .btn-row { justify-content: flex-end; } /* ---- Action bar: site-level actions, held apart from the settings tabs ----- A bordered surface strip above the tabs so the destructive + state actions read as "things you do to the site", separate from "settings you edit". */ .action-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 20px; } .action-bar .action-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* The destructive group keeps the right edge even when the bar WRAPS. Without this it is `justify-content: space-between` that puts it there, and that only works while both groups share a line — the moment they do not (a narrow desktop window), Delete lands at the left margin under the safe verbs, which is the one place it should never be. */ .action-bar .action-group:last-child { margin-left: auto; } .action-bar form { margin: 0; } /* A NAMED cluster inside the bar: verbs that are alternative answers to one question (Restart / Recreate — keep the container or throw it away). The label is the whole point, so a cluster of one is never built: a name on a single verb is decoration, and the plain .action-group already covers it. The metrics are tight on purpose. The bar wraps (flex-wrap), and a roomier cluster pushed Delete onto a second line just above the 760px breakpoint — a group that costs the bar a whole row is not worth the row. */ .action-cluster { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); } .action-cluster > .cluster-label { text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; font-weight: 650; color: var(--muted); padding: 0 2px; white-space: nowrap; } /* The cluster sits on --surface-2, so its buttons come back up to --surface to keep the figure/ground relationship they have everywhere else in the bar. */ .action-cluster .btn { background: var(--surface); } .action-cluster .btn:hover { background: var(--bg); } /* ---- Tabs: underline strip. Active tab carries the brand wire gradient, tying the settings navigation to the mark in the rail and the auth card. */ /* The strip scrolls at EVERY width, not only below 760px. Six site tabs measure ~847px, so between 761px and ~850px — an iPad mini, which takes the desktop layout — the last tab hung off the right edge and took the whole PAGE sideways with it. Wrapping is not the alternative: it would break the underline that ties the strip together, which is why the narrow-screen rules chose scrolling in the first place. This is that same decision, applied unconditionally. */ .tabs { display: flex; gap: 2px; align-items: stretch; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs .tab { flex: none; position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; margin-bottom: -1px; color: var(--muted); font-weight: 560; font-size: 14px; border-bottom: 2px solid transparent; } .tabs .tab:hover { color: var(--ink); text-decoration: none; } .tabs .tab.active { color: var(--signal-strong); } .tabs .tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wire); } .tabs .tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--radius-sm); } /* Static "deployments on" dot — reuses the signal colour, no pulse in a tab. */ .tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: none; } /* ---- The move banner (site-type preview) ---------------------------------- "Moving from web-spa to laravel" is the whole reason that page exists, and it was a grey .sub under the title — the exact slot a reader has been trained to skim. So the two types are stated as identities (mono, §3), large, with the direction drawn between them instead of written. Not an .alert: nothing here is wrong, and the warning colours are spent on the dropped-settings block further down, which IS the bad news. */ .move { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 20px; } .move-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .move-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .move-value { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; } /* Drawn, not typed: an arrow glyph renders at a different weight in every font the stack falls back to, and this one has to line up with two rules of text. */ .move-arrow { flex: none; position: relative; width: 34px; height: 2px; background: var(--line); border-radius: 1px; } .move-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); border-top: 2px solid var(--line); border-right: 2px solid var(--line); } /* ---- Sub-tabs (services page, Phase 7 S0) --------------------------------- A SECOND level of navigation under the site tabs: Environment / Databases / Locking all belong to one page now, and a second row of the same .tab styling would read as a competing primary nav. So: pills, quieter than .tabs, on the same 2px rhythm. Phase 5 adds a Backup entry here — the row is built from an array, so that is one element and not a re-layout. */ .subtabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 20px; } .subtabs .subtab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; color: var(--muted); font-weight: 540; font-size: 13.5px; border: 1px solid transparent; } .subtabs .subtab:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .subtabs .subtab.active { color: var(--signal-strong); background: var(--surface-2); border-color: var(--line); } .subtabs .subtab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* ---- Page-level note ------------------------------------------------------ One sentence of orientation under a page head or a tab strip. Every tab was reaching for `p.hint` with its own margin; this is that, standardised. */ .page-note { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; max-width: 72ch; } /* ---- Forms --------------------------------------------------------------- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } /* A checkbox and its label are one line, not a label above a control. */ .check { display: flex; align-items: center; gap: 9px; font-weight: 500; } /* .field label wins on specificity, so the one-line variant restates both. */ .field label.check { margin-bottom: 0; font-size: 13.5px; font-weight: 500; } .field label.check + .hint { margin-top: 6px; } .field .hint { color: var(--muted); font-size: 12.5px; margin-top: 5px; } .input, select.input { width: 100%; padding: 9px 11px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } .input:focus, select.input:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); } .input.mono { font-family: var(--font-mono); } /* A value the panel derives and shows rather than asks for — the site folder on the create form. Quieter than an editable field so it does not invite typing, but NOT the disabled treatment: it still focuses, selects and copies, and a readonly field still posts. The cursor is the honest signal — text, because selecting is exactly what it is still for. */ .input[readonly] { background: var(--surface-2); color: var(--muted); border-style: dashed; } .input[readonly]:focus { border-style: solid; } .err { color: var(--down); font-size: 12.5px; margin-top: 5px; } /* One control that narrows the list below it — the sites list's owner filter. Its own card above the table, not a row inside it, because it acts on the whole list (same reason .action-bar sits above .tabs). Horizontal because it is a single question with a single answer: label, the control, the verb. `.input` is width:100% by default, which is right for a form column and wrong here, so the select is sized to its content and capped — a filter is not a form field, it is a toolbar. Wraps to rows under the single 760px breakpoint like everything else. */ .filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .filter-bar label { font-size: 13px; font-weight: 600; } .filter-bar select.input { width: auto; min-width: 220px; max-width: 100%; } /* A control that only exists because scripting might not. The `.js` class is written by an inline script in the head, so this never flashes: the button is gone in the first bytes the browser paints, not after a script has run. */ .js .no-js-only { display: none; } /* A choice between a handful of options where each one needs a line of copy saying when to pick it — a