/* ========================================================================== Defcon house style BL-39. Tokens carried over from the Defglobe platform's custom-global.css, where the hard decisions were already made and paid for: which grey still reads on a dark card, which tint pairs with which ink, why a navy that works as a button fill fails as text. Two rules hold this together: Every colour is a token. A screen that hard-codes #fff is a screen that breaks the moment the theme changes, and there are 107 distinct hard-coded colours in the views today. --navy is a FILL and --link is the same colour as TEXT. They were one token on the other platform and it broke dark mode, because a navy that reads as a button measures under 3:1 as text on a dark card. Theme resolution has three states, not two. An explicit choice stamps data-theme on ; the default stamps nothing and follows the operating system. Every token is declared on bare :root first, so nothing depends on a media query having matched. ========================================================================== */ /* A stand-in for Inter, with Inter's metrics. Inter is fetched from Google with display=swap, so the first paint uses whatever comes next in the stack and the real face is swapped in when it arrives. The two do not occupy the same space, so the swap moves everything: on the marketing page the headline visibly jumps on every reload. This is the local face the browser would have fallen back to anyway, scaled and with its ascent and descent overridden so that a line of it is exactly as tall and as wide as the same line of Inter. The swap still happens; there is just nothing left to see. The numbers are the standard Inter-against-Arial set. It sits before :root deliberately: a font-face declaration is not a cascade rule and needs to be known by the time the first text is laid out. */ @font-face { font-family: 'Inter Fallback'; src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans'); ascent-override: 90.20%; descent-override: 22.48%; line-gap-override: 0.00%; size-adjust: 107.40%; } :root { --ink: #002F52; --muted: #6B675E; --line: #E0DCD2; --line-soft: #EDEAE2; --navy: #002F52; --link: #002F52; --amber: #FAA61A; --value: #00AC6C; --sky: #00B7C6; --violet: #8989B3; --pending: #AEB9C4; --threat: #EF4060; /* The light theme's neutrals are warm, not cool. They started as a straight lift from the other platform, where every grey is biased toward blue: pure white cards on a blue-grey page. Side by side with the dark theme that read as glare rather than as light, so the whole set is shifted a few degrees toward yellow and the card comes off pure white. The navy and the amber are untouched, and so is the dark theme: only the paper changed, not the ink. */ --card: #FCFBF8; --soft: #F6F4EF; --bar: #F9F7F3; --hover: #F0EDE6; --rowhover: #F8F6F2; --page: #F1EFE9; --chip: #EEEBE3; --chip-ink: #63625c; /* Measured at 4.39:1 on the light card, just under the 4.5 a paragraph needs. It is only ever used on placeholders and disabled controls, which the guidelines exempt, but it costs nothing to clear the bar rather than sit under it. */ --placeholder: #656D77; --shadow: 0 1px 2px rgba(60, 50, 30, .05), 0 8px 24px rgba(60, 50, 30, .07); /* Status tints. Each pair is a background and the ink that sits on it, and they are only ever used together. Picking the ink separately is how a badge ends up dark on dark. */ --tint-green: #E8F5EE; --ink-green: #1F7A45; --tint-red: #FDE7EC; --ink-red: #C42A4A; --tint-amber: #FFF3DE; --ink-amber: #8A5300; --tint-teal: #E7F6F8; --ink-teal: #0A5F68; --tint-violet: rgba(137, 137, 179, .16); --ink-violet: #4E4E7C; /* The fill every solid control uses, and the ink that reads on it. Held as a pair on purpose: picking the ink separately is how a button ends up dark on dark. One place to point them somewhere else, if a customer's own colour is ever to drive the controls. */ --accent-fill: #002F52; --accent-ink: #ffffff; --dc-font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Text size, set by the reader and kept in their browser. 1 is the size everything was designed at; nothing here changes unless somebody moves the slider. The house styles are all written as a multiple of this, and the root font-size below carries it into Bootstrap and AdminLTE, whose sizes are in rem and therefore follow it for free. */ --dc-text: 1; --radius-panel: 16px; --radius-control: 9px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #E7EAF0; --muted: #A6AEBB; --line: #3A4059; --line-soft: #343A52; --navy: #4A78A8; --link: #8FB8E0; --accent-fill: #7FB2E0; --accent-ink: #0B1A2B; --amber: #F2C64D; --value: #4FCB80; --sky: #4FC3CE; --violet: #A3A3C9; --pending: #8B95AD; --threat: #FF808B; --card: #2B3049; --soft: #232840; --bar: #262B42; --hover: #343A52; --rowhover: #2F3550; --page: #1B2038; --chip: #343A52; --chip-ink: #C3CAD6; --placeholder: #98A2B0; --shadow: 0 1px 2px rgba(0, 0, 0, .24), 0 8px 24px rgba(0, 0, 0, .28); /* Translucent rather than opaque, so a badge still reads as a badge over any of the dark surfaces, and the inks lighten to match. */ --tint-green: rgba(79, 203, 128, .16); --ink-green: #7FD9A4; --tint-red: rgba(255, 128, 139, .16); --ink-red: #FF9AA3; --tint-amber: rgba(242, 198, 77, .16); --ink-amber: #F0C465; --tint-teal: rgba(79, 195, 206, .16); --ink-teal: #7FD6DF; --tint-violet: rgba(163, 163, 201, .18); --ink-violet: #C2C2E2; } } :root[data-theme="dark"] { --ink: #E7EAF0; --muted: #A6AEBB; --line: #3A4059; --line-soft: #343A52; --navy: #4A78A8; --link: #8FB8E0; --accent-fill: #7FB2E0; --accent-ink: #0B1A2B; --amber: #F2C64D; --value: #4FCB80; --sky: #4FC3CE; --violet: #A3A3C9; --pending: #8B95AD; --threat: #FF808B; --card: #2B3049; --soft: #232840; --bar: #262B42; --hover: #343A52; --rowhover: #2F3550; --page: #1B2038; --chip: #343A52; --chip-ink: #C3CAD6; --placeholder: #98A2B0; --shadow: 0 1px 2px rgba(0, 0, 0, .24), 0 8px 24px rgba(0, 0, 0, .28); --tint-green: rgba(79, 203, 128, .16); --ink-green: #7FD9A4; --tint-red: rgba(255, 128, 139, .16); --ink-red: #FF9AA3; --tint-amber: rgba(242, 198, 77, .16); --ink-amber: #F0C465; --tint-teal: rgba(79, 195, 206, .16); --ink-teal: #7FD6DF; --tint-violet: rgba(163, 163, 201, .18); --ink-violet: #C2C2E2; } /* ========================================================================== The AdminLTE shell, restyled rather than replaced. 151 of the 225 views are written against AdminLTE's classes. Replacing the shell would mean rewriting all of them before anything could be looked at. Restyling it means every screen picks up the house style and the dark theme on the same day, and the screens get their new composition one at a time. ========================================================================== */ body, body.sidebar-mini, .wrapper { background: var(--page) !important; color: var(--ink); font-family: var(--dc-font); font-size: calc(14px * var(--dc-text)); } .content-wrapper { background: var(--page) !important; color: var(--ink); } /* --- sidebar --- */ .main-sidebar, .main-sidebar.user-sidebar-color, aside.main-sidebar { background: var(--card) !important; border-right: 1px solid var(--line); box-shadow: none !important; } .main-sidebar .brand-link { background: var(--card) !important; border-bottom: 0 !important; padding: 15px 18px 14px; display: flex; align-items: center; /* Centred. The logo shared this row with the customer's colour mark until that setting was removed, and left alignment was only ever there to sit next to it. On its own it reads as hanging off the edge. */ justify-content: center; gap: 10px; font-weight: 800; font-size: calc(15px * var(--dc-text)); letter-spacing: -.015em; color: var(--ink) !important; } .main-sidebar .brand-link .brand-image { margin: 0 !important; max-height: 26px; opacity: 1; border-radius: 8px; } /* The mark that carried the customer's chosen colour beside the logo went with the colour setting itself on 2026-09-11. */ /* Logos on the dark theme. Which treatment a mark gets is decided once by logoDarkModeTreatment() in app/Helpers/Helper.php, which measures the image rather than guessing. Brightness multiplies the channels, so the hue is kept exactly and a navy wordmark becomes a lighter navy rather than a different colour. No plate: these files are transparent PNGs and a white box behind one is the thing you notice. */ :root[data-theme="dark"] .dc-logo-brighten { filter: brightness(var(--dc-logo-lift, 2.3)); } :root[data-theme="dark"] .dc-logo-invert { filter: brightness(0) invert(1); } /* The brand area has to be tall enough for a logo to be a logo. It was 30px, which is a favicon with a wordmark next to it. */ .main-sidebar .brand-link { min-height: 64px; } /* The sidebar has to grow with the text, or the active pill runs past its edge. AdminLTE fixes the sidebar at 250px and offsets the page by the same amount, both in pixels, so a reader who turns the text up gets longer labels inside a box that did not move. Both numbers are now multiples of --dc-text, which is the same variable the type scale uses, so the sidebar widens by exactly as much as its contents do. Only the expanded state is scaled. Collapsed, AdminLTE measures in rem, which already follows the root size and therefore already follows the slider. */ @media (min-width: 992px) { body.sidebar-mini:not(.sidebar-collapse):not(.layout-top-nav) .main-sidebar { width: calc(250px * var(--dc-text)); } /* The offset needs one class more than the width did. AdminLTE writes it as body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper, which counts as four classes; the first version of this rule had three, so the sidebar widened while the page stayed where it was and the two overlapped. */ body.sidebar-mini:not(.sidebar-collapse):not(.layout-top-nav):not(.sidebar-mini-md):not(.sidebar-mini-xs) .content-wrapper, body.sidebar-mini:not(.sidebar-collapse):not(.layout-top-nav):not(.sidebar-mini-md):not(.sidebar-mini-xs) .main-header, body.sidebar-mini:not(.sidebar-collapse):not(.layout-top-nav):not(.sidebar-mini-md):not(.sidebar-mini-xs) .main-footer { margin-left: calc(250px * var(--dc-text)); } } /* And a label that still will not fit wraps rather than pushing the pill out of the sidebar. */ .main-sidebar .nav-sidebar .nav-link { min-width: 0; } .main-sidebar .nav-sidebar .nav-link p { white-space: normal; overflow-wrap: anywhere; } .dc-navgroup { font-size: calc(10px * var(--dc-text)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 14px 18px 6px; } .main-sidebar .nav-sidebar .nav-link, .main-sidebar .nav-sidebar > .nav-item > .nav-link { display: flex; align-items: center; gap: 9px; margin: 1px 10px; padding: 7px 10px; border-radius: var(--radius-control); font-size: calc(13px * var(--dc-text)); font-weight: 500; color: var(--muted) !important; } .main-sidebar .nav-sidebar .nav-link p { margin: 0; font-size: calc(13px * var(--dc-text)); } .main-sidebar .nav-sidebar .nav-link i, .main-sidebar .nav-sidebar .nav-link svg { font-size: calc(14px * var(--dc-text)); width: 16px; flex: none; } .main-sidebar .nav-sidebar .nav-link:hover { background: var(--hover) !important; color: var(--ink) !important; } .main-sidebar .nav-sidebar .nav-link.active, .main-sidebar .nav-sidebar > .nav-item > .nav-link.active { background: var(--accent-fill) !important; color: var(--accent-ink) !important; font-weight: 600; box-shadow: none !important; } :root[data-theme="dark"] .main-sidebar .nav-sidebar .nav-link.active { color: #0d1426 !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .main-sidebar .nav-sidebar .nav-link.active { color: #0d1426 !important; } } /* Logout is the one item in this list you must not hit by accident, and it sat flush against the item above it. A rule and some air, so reaching for it is a decision. */ .dc-navsep { height: 1px; background: var(--line); margin: 14px 16px 0; list-style: none; } .main-sidebar .nav-sidebar .dc-navlogout { margin-top: 6px; } .main-sidebar .nav-sidebar .dc-navlogout .nav-link:hover { background: var(--tint-red) !important; color: var(--ink-red) !important; } /* Backlog and Security both count things waiting for Michael. They were told apart by colour, blue and red, which implied one was more urgent than the other; they are the same kind of number. One colour, and big enough to read from the other side of the sidebar. */ .dc-navcount { margin-left: auto; font-size: calc(12.5px * var(--dc-text)); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--amber); background: var(--tint-amber); border-radius: 999px; padding: 1px 9px; line-height: 1.5; } :root[data-theme="dark"] .dc-navcount { color: var(--ink-amber); } .nav-link.active .dc-navcount { background: rgba(255, 255, 255, .2); color: #fff; } .dc-count { margin-left: auto; font-size: calc(10.5px * var(--dc-text)); font-weight: 700; background: var(--chip); color: var(--chip-ink); border-radius: 999px; padding: 1px 7px; } .nav-link.active .dc-count { background: rgba(255, 255, 255, .22); color: #fff; } /* --- top bar --- */ .main-header.navbar, .main-header.navbar.user-sidebar-color { background: var(--card) !important; border-bottom: 1px solid var(--line) !important; box-shadow: none !important; min-height: 56px; } .main-header .nav-link, .main-header .navbar-nav .nav-link { color: var(--ink) !important; } /* --- inline code --- */ /* Bootstrap sets code to #e83e8c, a pink tuned for white paper. On the dark card it measures 3.39:1, and the places this platform uses it are small: the BL numbers on the backlog board and the file names in the notes beside them. It reads as a chip now, in the ordinary ink, which is above 10:1 in both themes. */ code, kbd, samp { background: var(--chip); color: var(--ink); border-radius: 5px; padding: 1px 6px; font-size: calc(12px * var(--dc-text)); overflow-wrap: anywhere; } pre { background: var(--soft); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; } pre code { background: transparent; padding: 0; } a code { color: var(--link); } /* --- the footer --- */ .main-footer { background: var(--card) !important; border-top: 1px solid var(--line) !important; color: var(--muted); font-size: calc(12.5px * var(--dc-text)); padding: 14px 20px; } .main-footer a { color: var(--link); } .main-footer strong { color: var(--ink); font-weight: 600; } /* --- cards and tables, which every other screen still uses --- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow); color: var(--ink); } .card-header { background: transparent; border-bottom: 1px solid var(--line-soft); padding: 14px 18px; } .card-header .card-title { font-size: calc(14px * var(--dc-text)); font-weight: 700; letter-spacing: -.005em; } .table { color: var(--ink); } .table thead th { font-size: calc(10.5px * var(--dc-text)); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--line-soft) !important; border-top: 0 !important; background: var(--bar); padding: 11px 18px; } .table td { padding: 12px 18px; border-top: 0; border-bottom: 1px solid var(--line-soft); font-size: calc(13.5px * var(--dc-text)); vertical-align: middle; } .table-hover tbody tr:hover { background: var(--rowhover); color: var(--ink); } .btn-primary { background: var(--navy); border-color: var(--navy); border-radius: var(--radius-control); font-weight: 600; font-size: calc(13px * var(--dc-text)); padding: 9px 16px; } .form-control { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); font-size: calc(13px * var(--dc-text)); } .form-control::placeholder { color: var(--placeholder); } /* ========================================================================== House components. Prefixed dc- so nothing collides with AdminLTE or with the 95 views that carry their own