/* ============================================================ QLine IT — shared dashboard branding Served at /static/qline-brand.css by server.js. Link this from any view and add the .qbrand header block, and the dashboard is branded. New dashboards inherit it for free. Deliberately does NOT touch the KPI / band / status colours. On these wall monitors red means flagged and amber means mismatched — repainting those in brand colours would destroy the meaning people read at a glance. ============================================================ */ :root { --q-teal: #058181; /* exact brand */ --q-orange: #F08100; /* exact brand */ --q-on-orange: #0b0b0b; /* white on orange is 2.68:1 and fails; this is 7.35:1 */ --q-on-teal: #ffffff; /* 4.7:1, matches the logo lockup */ --q-teal-bright: #0FA3A2; /* validated step for marks on a dark surface */ --q-link: #4fc9c8; } /* ---- brand bar ------------------------------------------------------- The page templates put 24px padding on , so the bar pulls itself back out to sit full-bleed. If a future view uses different padding, override --q-bleed on that page. */ .qbrand { --q-bleed: 24px; background: var(--q-teal); margin: calc(var(--q-bleed) * -1) calc(var(--q-bleed) * -1) 18px; padding: 11px var(--q-bleed); display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; } .qbrand img.qlogo { height: 38px; width: auto; display: block; flex: none; } .qbrand .qtitles { min-width: 0; } .qbrand .qtitle { color: var(--q-on-teal); font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .qbrand .qsub { color: rgba(255, 255, 255, 0.82); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qbrand .qspacer { flex: 1; } /* The status stamp keeps its own .sub class because the page JavaScript reassigns className ('sub' / 'sub err') on every refresh — styling it by that class means the script can keep doing exactly what it already does. */ .qbrand .qright, .qbrand #stamp.sub { color: rgba(255, 255, 255, 0.9); font-size: 12px; text-align: right; white-space: nowrap; margin-top: 0; } .qbrand .qright.err, .qbrand #stamp.sub.err { color: #ffd7d7; font-weight: 600; } .qbrand a { color: var(--q-on-teal); text-decoration: none; font-size: 13px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 6px 12px; } .qbrand a:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; } /* The strapline is the first thing to give way when space is tight — it's the least useful element in the bar. */ @media (max-width: 1100px) { .qbrand .qsub { display: none; } } @media (max-width: 820px) { .qbrand .qright { display: none; } } /* ---- brand accents on existing components ---------------------------- */ /* Selected tab on the billing view (was #2563eb). */ .tab.on { background: var(--q-teal) !important; border-color: var(--q-teal) !important; color: var(--q-on-teal) !important; } /* Body links, e.g. the daily-report list (was #38bdf8). */ a { color: var(--q-link); } /* Primary action — login. Dark ink on orange, never white. */ button.qprimary, #login button { background: var(--q-orange) !important; color: var(--q-on-orange) !important; font-weight: 700 !important; } #login button:hover { filter: brightness(1.08); } /* Focus ring, so keyboard users get a brand-coloured cue that still shows against the dark slate background. */ :focus-visible { outline: 2px solid var(--q-teal-bright); outline-offset: 2px; } /* ---- login page ------------------------------------------------------- No body padding there, so the logo sits above the card rather than in a full-bleed bar. */ .qlogin-logo { display: block; margin: 0 auto 18px; height: 54px; width: auto; border-radius: 8px; } /* ============================================================ LIGHT THEME ------------------------------------------------------------ The views were built dark (slate #0f172a). Rather than rewrite four files, this section overrides them from here — it loads after each page's inline