/* =========================================================================== BEACON — operations console Dark "watch room". Ember (warm orange) is the brand mark; device status uses a separate green/amber/red/grey scale. The signature is the signal-fire tile. =========================================================================== */ :root { --ink: #0e1218; /* page */ --panel: #161c26; /* raised surface */ --panel-2: #1c232f; /* inputs / nested */ --line: #28303d; /* hairlines */ --text: #e7ecf3; --muted: #8b97a8; --ember: #ff7a18; /* brand */ --ember-soft: #ffb259; --ok: #2fb87a; --warning: #f5a524; --critical: #e5484d; --critical-text: #f06066; /* brighter than --critical - passes AA as body text on --panel, unlike --critical itself */ --offline: #6b7280; --type-barix: #ff7a18; --type-peplink: #4c8bf5; --type-pdu: #b26bf0; --radius: 12px; --shadow: 0 6px 24px rgba(0,0,0,.35); } /* Light theme — toggled via , set per-account from the account menu (top right). Brand/status hues are deepened slightly so they keep enough contrast against white/light panels. */ :root[data-theme="light"] { --ink: #eef1f6; --panel: #ffffff; --panel-2: #f3f5f9; --line: #dbe1ea; --text: #1a2230; --muted: #5c6779; --ember: #e8630a; --ember-soft: #c2530a; --ok: #1f9d63; --warning: #b3790a; --critical: #d1373c; --critical-text: #d1373c; /* light theme's own critical already passes AA as text - no separate value needed */ --offline: #6b7280; --type-barix: #e8630a; --type-peplink: #2f6fe0; --type-pdu: #9048c9; --shadow: 0 6px 20px rgba(20,30,50,.10); } :root[data-theme="light"] body { background: radial-gradient(1200px 600px at 70% -10%, #ffffff 0%, var(--ink) 55%); } :root[data-theme="light"] .login-error { color: #a3232a; } :root[data-theme="light"] .onsite-badge { color: #147a4c; } :root[data-theme="light"] .log-badge--in { color: #147a4c; } * { box-sizing: border-box; } /* Visible keyboard focus everywhere, not just form inputs - buttons, nav links, cards, etc. all fall back to the browser default otherwise, which can be hard to see against these dark panels. Uses :focus-visible so it only shows for keyboard/programmatic focus, not every mouse click. */ :focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px; } a { color: var(--ember-soft); } a:visited { color: var(--ember-soft); } body { margin: 0; background: radial-gradient(1200px 600px at 70% -10%, #182231 0%, var(--ink) 55%); color: var(--text); font-family: "Space Grotesk", system-ui, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .mono { font-family: "JetBrains Mono", ui-monospace, monospace; } .muted { color: var(--muted); } /* ---- top bar ---- */ .topbar { display: flex; align-items: center; gap: 28px; padding: 16px 28px; border-bottom: 1px solid var(--line); background: rgba(14,18,24,.7); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .brand-logo { background: #fff; border-radius: 8px; padding: 5px 8px; display: inline-flex; align-items: center; } .brand-logo img { display: block; height: 22px; } .brand-sep { width: 1px; height: 22px; background: var(--line); } .brand-ember { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ember-soft), var(--ember) 70%); box-shadow: 0 0 10px 1px rgba(255,122,24,.7), 0 0 22px 4px rgba(255,122,24,.35); align-self: center; } .brand-name { font-weight: 700; font-size: 20px; letter-spacing: .04em; } .brand-tag { color: var(--muted); font-size: 13px; } .nav { display: flex; align-items: center; gap: 6px; margin-left: auto; } .nav-link { color: var(--muted); text-decoration: none; padding: 7px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; } .nav-link:hover { color: var(--text); background: var(--panel); } .nav-link.is-active { color: var(--text); background: var(--panel); box-shadow: inset 0 -2px 0 var(--ember); } .wrap { max-width: 1160px; margin: 0 auto; padding: 28px; } /* ---- flash ---- */ .flash { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ember); padding: 12px 16px; border-radius: 8px; margin-bottom: 22px; } /* ---- summary strip ---- */ .summary { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 26px; } .summary-stats { display: flex; flex-wrap: wrap; gap: 10px; } .stat { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; color: var(--muted); } .stat b { color: var(--text); font-size: 16px; } .stat::before { content: ""; width: 9px; height: 9px; border-radius: 50%; } .stat--ok::before { background: var(--ok); } .stat--warning::before { background: var(--warning); } .stat--critical::before { background: var(--critical); } .stat--offline::before { background: var(--offline); } .stat--unmonitored::before { background: var(--muted); } .stat--type-barix::before { background: var(--type-barix); } .stat--type-peplink::before { background: var(--type-peplink); } .stat--type-pdu::before { background: var(--type-pdu); } /* clickable filter chips on the dashboard */ a.stat { text-decoration: none; cursor: pointer; transition: opacity .15s, border-color .15s; } a.stat:hover { border-color: var(--muted); } a.stat.is-off { opacity: .38; } a.stat.is-off b { color: var(--muted); } .filter-reset { color: var(--ember-soft); text-decoration: none; } .filter-reset:hover { text-decoration: underline; } /* device web-page link on tiles */ .ip-link { color: var(--ember-soft); text-decoration: none; } .ip-link:hover { text-decoration: underline; } .summary-meta { font-size: 13px; color: var(--muted); } /* ---- site sections ---- */ .site { margin-bottom: 30px; } .site-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .site-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .site-head .site-title { margin: 0; padding: 0; border: none; } .site-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; } .site-exclusion-trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 0; font: 600 13px "Space Grotesk", sans-serif; color: var(--critical-text); } .site-exclusion-trigger svg { width: 14px; height: 14px; flex: none; } .site-exclusion-trigger:hover { text-decoration: underline; } .exclusions-banner { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; } .exclusions-banner-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.35); border-radius: 8px; padding: 9px 12px; font: 500 13px "Space Grotesk", sans-serif; color: var(--critical-text); cursor: pointer; } .exclusions-banner-item svg { width: 15px; height: 15px; flex: none; } .exclusions-banner-item:hover { background: rgba(229,72,77,.14); } .exclusions-banner-item strong { font-weight: 700; } /* ---- per-site device list (all device types, one line each) ---- */ .device-list { display: flex; flex-direction: column; } .device-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 4px; border-bottom: 1px solid var(--line); } .device-row:last-child { border-bottom: none; } .device-main { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 160px; } .device-name { font-weight: 600; font-size: 14.5px; } .device-type-tag { font-family: "Space Grotesk", sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: 2px 6px; border-radius: 5px; } .device-type-tag--barix { color: var(--type-barix); } .device-type-tag--peplink { color: var(--type-peplink); } .device-type-tag--pdu { color: var(--type-pdu); } .device-meta { flex: 1 1 260px; font-size: 13px; min-width: 0; } .device-row-error { color: var(--critical-text); } .device-row-error-line { flex-basis: 100%; font-size: 13px; color: var(--critical-text); padding-left: 23px; /* aligns under device-main, past the ember dot */ } .device-row-actions { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; } .service-status-form { flex-basis: 100%; display: flex; gap: 8px; margin-top: 8px; padding-left: 23px; } .service-status-form select, .service-status-form input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; color: var(--text); padding: 6px 9px; font: inherit; font-size: 12.5px; } .service-status-form select { flex: 0 0 110px; } .service-status-form input { flex: 1; min-width: 0; } /* the ember: lit and calm when OK, pulsing when something's wrong, dark when off */ .ember { width: 11px; height: 11px; border-radius: 50%; background: var(--offline); flex: none; } .ember--ok { background: var(--ok); box-shadow: 0 0 8px 1px rgba(47,184,122,.65); } .ember--warning { background: var(--warning); box-shadow: 0 0 8px 1px rgba(245,165,36,.65); animation: pulse 1.8s ease-in-out infinite; } .ember--critical { background: var(--critical); box-shadow: 0 0 9px 1px rgba(229,72,77,.7); animation: pulse 1.1s ease-in-out infinite; } .ember--offline { background: var(--offline); } .ember--unknown { background: var(--critical); box-shadow: 0 0 9px 1px rgba(229,72,77,.7); } .ember--unmonitored { background: var(--muted); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } .flag { font-family: "Space Grotesk", sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: rgba(245,165,36,.15); color: var(--warning); padding: 2px 6px; border-radius: 5px; vertical-align: middle; } .flag--muted { background: var(--panel-2); color: var(--muted); } .exclusion-row { padding: 10px 0; border-bottom: 1px solid var(--line); } .exclusion-row:last-of-type { border-bottom: none; } .exclusion-row--past { opacity: .5; } .exclusion-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .exclusion-reason { font-weight: 600; } .exclusion-dates { font-size: 13px; } .exclusion-notes { margin: 4px 0 0; font-size: 13px; color: var(--muted); } .exclusion-row form { display: inline; margin-left: 8px; } .task-row { padding: 12px 0; border-bottom: 1px solid var(--line); } .task-row:last-child { border-bottom: none; } .task-row--done { opacity: .6; } .task-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .task-title { font-weight: 600; } .task-notes { margin: 4px 0 0; font-size: 13px; color: var(--muted); white-space: pre-wrap; } .task-done-note { margin: 6px 0 0; font-size: 12.5px; } .task-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; } .task-actions form { margin: 0; } .tile-note { margin: 0 0 10px; font-size: 12px; color: var(--muted); } .tile-reboot-form { display: contents; } .tile-note--error { align-self: center; font-size: 11px; color: var(--critical-text); } .tile-btn { flex: 1; cursor: pointer; text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: 500 12.5px "Space Grotesk", sans-serif; transition: border-color .15s, background .15s; } .tile-btn:hover { border-color: var(--ember); background: var(--panel); } .tile-btn:active { transform: translateY(1px); } .tile-btn:disabled { opacity: .45; cursor: not-allowed; } .tile-btn:disabled:hover { border-color: var(--line); background: var(--panel-2); } .tile-btn--slim { flex: none; padding: 5px 12px; font-size: 11.5px; } /* Navigational (open-a-webpage) buttons, as opposed to Reboot's default solid style - visually quieter so the one action that actually changes device state doesn't blend in with three that just open a link. */ .tile-btn--ghost { background: transparent; border-color: transparent; color: var(--ember-soft); } .tile-btn--ghost:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); } /* ---- admin pages ---- */ .page-head { margin-bottom: 22px; } .page-head h1 { margin: 0 0 4px; font-size: 24px; } .cols { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .panel h2 { margin: 0 0 16px; font-size: 16px; } /* ---- forms ---- */ .form { display: flex; flex-direction: column; gap: 13px; } .form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); } .form-row { display: flex; gap: 13px; } .form-row label { flex: 1; min-width: 0; } .form-row label.narrow { flex: 0 0 104px; } .form input, .form select, .form textarea { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 9px 11px; font: inherit; font-size: 14px; width: 100%; min-width: 0; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255,122,24,.18); } .form .check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); } .form .check input { width: auto; } .form-actions { display: flex; gap: 10px; margin-top: 4px; } .btn { display: inline-flex; align-items: center; justify-content: center; background: var(--ember); color: #1a1205; border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 8px; text-decoration: none; } .btn:hover { background: var(--ember-soft); } .btn--ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); } .btn--ghost:hover { color: var(--text); background: var(--panel-2); } /* ---- tables ---- */ .table { width: 100%; border-collapse: collapse; } .table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); } .table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .row-actions { display: flex; align-items: center; gap: 14px; justify-content: flex-end; } .row-actions a { color: var(--ember-soft); text-decoration: none; font-size: 13px; } .row-actions form { margin: 0; } .link-danger { background: none; border: none; color: var(--critical-text); cursor: pointer; font: inherit; font-size: 13px; padding: 0; } .link-danger:hover { text-decoration: underline; } .link-action { background: none; border: none; color: var(--ember-soft); cursor: pointer; font: inherit; font-size: 13px; padding: 0; } .link-action:hover { text-decoration: underline; } .table--nested { background: var(--panel-2); border-radius: 8px; } .table--nested td { border-bottom: 1px solid var(--line); font-size: 13px; padding: 7px 10px; } .table--nested tr:last-child td { border-bottom: none; } /* ---- empty state ---- */ .empty { text-align: center; padding: 60px 20px; } .empty h2 { margin: 0 0 8px; } .empty p { color: var(--muted); max-width: 420px; margin: 0 auto 18px; } /* ---- map view ---- */ .map { height: calc(100vh - 230px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; background: var(--panel); } .map--small { height: 320px; min-height: 0; margin-top: 10px; } .map-legend { display: inline-flex; align-items: center; gap: 7px; margin-left: 16px; } .map-legend .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; } .dot--green { background: var(--ok); box-shadow: 0 0 8px 1px rgba(47,184,122,.6); } .dot--red { background: var(--critical); box-shadow: 0 0 8px 1px rgba(229,72,77,.6); } .dot--yellow { background: var(--warning); box-shadow: 0 0 8px 1px rgba(245,165,36,.6); } .dot--grey { background: var(--offline); } /* sites-list enabled/disabled icon */ .status-cell { width: 28px; text-align: center; } .status-icon--on { color: var(--ok); font-size: 13px; } .status-icon--off { color: var(--warning); font-size: 11px; letter-spacing: -1px; } .map-unplaced { margin-top: 14px; font-size: 13px; } .map-pop { font-family: "Space Grotesk", sans-serif; font-size: 13px; line-height: 1.5; } .map-pop a { color: var(--ember-soft); } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel-2); color: var(--text); } .leaflet-container { font: inherit; } /* ---- streams view ---- */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 18px; } .filters .check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); cursor: pointer; } .url-cell { max-width: 520px; } .url-cell a { color: var(--ember-soft); text-decoration: none; font-family: "JetBrains Mono", monospace; font-size: 13px; word-break: break-all; } .url-cell a:hover { text-decoration: underline; } .s-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; } .s-dot--ok { background: var(--ok); } .s-dot--warning { background: var(--warning); } .s-dot--critical { background: var(--critical); } .s-dot--offline { background: var(--offline); } .s-dot--unknown { background: var(--critical); } /* ---- SLA view ---- */ .section-title { font-size: 16px; margin: 30px 0 12px; } .chip { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 13px; } .chip--on { color: var(--text); border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); } .sla-cards { display: flex; flex-direction: column; gap: 16px; } .sla-card { display: flex; align-items: center; gap: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .sla-card-info { flex: 0 0 220px; } .sla-card-chart { flex: 1; min-width: 0; } .sla-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .sla-card-head h2 { margin: 0; font-size: 16px; } .sla-figures { display: flex; align-items: baseline; gap: 12px; } .sla-big { font-size: 30px; font-weight: 700; font-family: "JetBrains Mono", monospace; color: var(--text); } .sla-big.is-met { color: var(--ok); } .sla-big.is-missed { color: var(--critical-text); } .sla-target { color: var(--muted); font-size: 13px; } .sla-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 6px; } .sla-badge--met { background: rgba(47,184,122,.15); color: var(--ok); } .sla-badge--missed { background: rgba(229,72,77,.15); color: var(--critical-text); } .sla-badge--none { background: var(--panel-2); color: var(--muted); } .sla-chart { width: 100%; height: 130px; display: block; } .sla-chart .bar-ok { fill: var(--ok); } .sla-chart .bar-bad { fill: var(--critical); } .sla-target-line { stroke: var(--ember); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; } .sla-nochart { padding: 24px 0; font-size: 13px; } .table .num { text-align: right; } .pill { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 5px; } .pill--met { background: rgba(47,184,122,.15); color: var(--ok); } .pill--missed { background: rgba(229,72,77,.15); color: var(--critical-text); } .pill--none { background: var(--panel-2); color: var(--muted); } /* ---- settings: sub-nav, manage cards ---- */ .subnav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .subnav-link { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 13px; border-radius: 8px; } .subnav-link:hover { color: var(--text); background: var(--panel); } .subnav-link.is-active { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); } .field-hint { display: block; font-size: 12px; margin-top: 2px; } .manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .manage-grid--hub { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .panel--narrow { max-width: 460px; } .manage-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 22px 16px; text-decoration: none; color: var(--text); transition: border-color .15s, color .15s; } .manage-card:hover { border-color: var(--ember); color: var(--ember-soft); } .manage-card svg { width: 30px; height: 30px; color: var(--ember-soft); } .manage-card:hover svg { color: var(--ember); } .manage-card-title { font-weight: 600; font-size: 14px; color: var(--text); } .manage-card:hover .manage-card-title { color: var(--text); } /* ---- contractor site-role assignment ---- */ .site-roles { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; margin: 2px 0; } .site-roles legend { padding: 0 6px; font-size: 13px; color: var(--muted); } .site-role-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; } .site-role-name { font-size: 14px; } .site-role-row select { width: 130px; flex: none; min-width: 0; } /* ---- login + auth ---- */ .login-body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(900px 600px at 50% -10%, rgba(255,122,24,.08), transparent), var(--bg); } .login-card { width: 360px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 30px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .login-brand { display: flex; align-items: center; gap: 10px; } .login-brand .brand-name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .5px; } .login-tag { margin: 4px 0 20px; font-size: 13px; } .login-error { background: rgba(229,72,77,.12); border: 1px solid rgba(229,72,77,.4); color: #ffb3b5; padding: 9px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; } .login-tabs { display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 18px; } .login-tab { flex: 1; background: none; border: 0; color: var(--muted); cursor: pointer; font: 500 14px "Space Grotesk", sans-serif; padding: 8px; border-radius: 7px; } .login-tab.is-active { background: var(--ember); color: #1a1208; font-weight: 600; } .login-form .btn.login-submit { width: 100%; justify-content: center; margin-top: 4px; } .login-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 18px 0 14px; } .login-or span { white-space: nowrap; } .login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .login-ms { width: 100%; justify-content: center; } .login-sso { text-align: center; } /* current user menu: click the pill to open theme / change password / sign out */ .nav-account { position: relative; margin-left: 10px; font-size: 13px; line-height: 1; } .nav-user { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--text); white-space: nowrap; font: inherit; cursor: pointer; } .nav-user:hover { border-color: var(--muted); } .nav-user-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px 1px rgba(47,184,122,.6); } .nav-caret { width: 13px; height: 13px; opacity: .6; margin-left: 1px; } .account-dropdown[hidden] { display: none; } .account-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 4px; } .account-dropdown-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 2px 6px 4px; } .theme-toggle { display: flex; gap: 6px; margin-bottom: 6px; } .theme-toggle form { flex: 1; margin: 0; } .theme-opt { width: 100%; padding: 6px 0; font: 500 13px "Space Grotesk", sans-serif; cursor: pointer; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; } .theme-opt.is-active { color: var(--text); border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); } .account-dropdown-item { display: block; padding: 7px 6px; border-radius: 7px; color: var(--text); text-decoration: none; font-size: 13.5px; } .account-dropdown-item:hover { background: var(--panel-2); } .account-dropdown-item--danger:hover { color: var(--critical-text); } /* contractor login fieldset */ .login-fields { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; margin: 2px 0; } .login-fields legend { padding: 0 6px; font-size: 13px; color: var(--muted); } /* site owner fieldset */ .owner-fields { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; margin: 2px 0; } .owner-fields legend { padding: 0 6px; font-size: 13px; color: var(--muted); } /* Rhema logo on the login card */ .login-logo { background: #fff; border-radius: 10px; padding: 12px 16px; display: inline-flex; margin-bottom: 18px; } .login-logo img { display: block; height: 34px; } /* Microsoft logo on the SSO button */ .login-ms { display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .ms-logo { width: 16px; height: 16px; display: block; } /* modal (contact tech) */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(4,7,11,.66); backdrop-filter: blur(2px); } .modal-card { position: relative; width: 420px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.5); overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); } .modal-head h2 { margin: 0; font-size: 16px; } .modal-x { background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; } .modal-x:hover { color: var(--text); } .modal-body { padding: 8px 18px 18px; } .contact-row { padding: 12px 0; border-bottom: 1px solid var(--line); } .contact-row:last-child { border-bottom: 0; } .contact-role { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; } .contact-row--primary .contact-role { color: var(--ember-soft); } .contact-name { font-weight: 600; font-size: 15px; } .contact-meta { font-size: 13px; color: var(--muted); margin-top: 2px; } .contact-meta a { color: var(--ember-soft); text-decoration: none; } .contact-meta a:hover { text-decoration: underline; } .contact-notes { margin-top: 6px; padding: 8px 10px; font-size: 13px; line-height: 1.4; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); } /* page-head with a right-aligned action */ .page-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .crumb { margin: 0 0 4px; font-size: 13px; } .crumb a { color: var(--ember-soft); text-decoration: none; } .crumb a:hover { text-decoration: underline; } /* grouped fieldsets on the contractor form */ .panel--form { max-width: 680px; } .form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px 14px; margin: 0 0 16px; } .form fieldset legend { padding: 0 6px; font-size: 13px; color: var(--muted); } /* delivery label button in the contact modal */ .contact-label-btn { margin-top: 8px; padding: 5px 10px; font-size: 12px; } .contact-links { display: flex; gap: 8px; flex-wrap: wrap; } .contact-links .contact-label-btn { margin-top: 0; } /* ---- delivery label (print) ---- */ .label-body { margin: 0; background: var(--bg); min-height: 100vh; padding: 24px; } .label-toolbar { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; } .label-sheet { width: 105mm; min-height: 148mm; margin: 0 auto; box-sizing: border-box; background: #fff; color: #111; border-radius: 6px; padding: 16mm 14mm; display: flex; flex-direction: column; gap: 10mm; box-shadow: 0 16px 50px rgba(0,0,0,.4); } .label-head { display: flex; align-items: center; justify-content: space-between; } .label-logo img { height: 30px; display: block; } .label-ref { font-family: "JetBrains Mono", monospace; font-size: 12px; color: #555; } .label-tag { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; color: #888; margin-bottom: 4px; } .label-from { font-size: 13px; color: #333; line-height: 1.5; } .label-from span, .label-to span { display: block; } .label-to { border-top: 2px solid #111; border-bottom: 2px solid #111; padding: 8mm 0; } .label-to-name { font-size: 24px; line-height: 1.2; } .label-to-co { font-size: 16px; } .label-to-line { font-size: 18px; line-height: 1.5; } .label-warn { color: #b00; font-size: 13px; } .label-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 12px; color: #666; } @media print { .label-body { background: #fff; padding: 0; } .label-toolbar { display: none; } .label-sheet { box-shadow: none; border-radius: 0; margin: 0; width: auto; min-height: auto; } @page { size: A6; margin: 8mm; } } /* ---- site detail / log ---- */ .cols--wide-left { grid-template-columns: 1.7fr 1fr; } .onsite-badge { display: inline-flex; align-items: center; gap: 8px; align-self: center; background: rgba(47,184,122,.12); border: 1px solid rgba(47,184,122,.4); color: #8ee3bb; border-radius: 999px; padding: 6px 14px; font-size: 13px; white-space: nowrap; } .onsite-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 7px 1px rgba(47,184,122,.7); } .checkin-form { margin: 0; } .checkin-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .checkin-row .field-hint { display: block; } .access-notes { white-space: pre-wrap; font-size: 14px; line-height: 1.6; margin: 0; } .access-links { font-size: 14px; margin: 0 0 12px; } .site-device { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14px; } .site-device + .site-device { border-top: 1px solid var(--line); } .site-device-name { flex: 1; } .log { list-style: none; margin: 0; padding: 0; } .log-item { padding: 14px 0; border-top: 1px solid var(--line); } .log-item:first-child { border-top: 0; padding-top: 0; } .log-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .log-who { font-weight: 600; } .log-body { margin: 6px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; } .log-badge { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .log-badge--in { color: #8ee3bb; border-color: rgba(47,184,122,.5); } .log-badge--out { color: var(--muted); } .log-badge--work { color: var(--ember-soft); border-color: rgba(255,122,24,.45); } .log-badge--ok { color: var(--ok); border-color: rgba(47,184,122,.5); } .log-badge--warning { color: var(--warning); border-color: rgba(245,165,36,.5); } .log-badge--critical { color: var(--critical-text); border-color: rgba(229,72,77,.5); } .log-badge--offline { color: var(--muted); } .log-badge--note { color: var(--muted); } .log-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .log-thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; } .log-file { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ember-soft); text-decoration: none; background: var(--panel-2); } .log-file:hover { border-color: var(--ember); } /* ---- responsive ---- */ @media (max-width: 820px) { .cols { grid-template-columns: 1fr; } .cols--wide-left { grid-template-columns: 1fr; } .topbar { gap: 14px; padding: 14px 18px; flex-wrap: wrap; } .brand-tag { display: none; } .wrap { padding: 18px; } } @media (prefers-reduced-motion: reduce) { .ember--warning, .ember--critical { animation: none; } }