/* ============================================================ secure.css Overrides for the secure (authenticated) area only. The secure and public areas share base.master and desktop.css. Every rule here is scoped under body.secure, so the public site is never affected. base.master adds the "secure" class to when the page uses secure.master (see basepublic.BodyClass). Design intent: the secure area is a data-heavy extranet, so it is tuned for function over flourish. A three-level depth hierarchy (canvas -> section panel -> white card) gives data clear containers; structure is made visible (section-header accent, real row separators); spacing is tighter and text a touch heavier for legibility. No gradient, no starfield (the starfield is also skipped in stars.js when body.secure is present). Palette canvas #e3e7ed (light neutral, gives cards something to sit on) section panel #eef2f6 (lighter raised grouping) card #ffffff border #d6dce4 (soft) / #c6cfdb (stronger, e.g. table heads) row hover #eaf0f6 text (navy) #0B2545 accent (orange)#F15A34 ============================================================ */ /* --- Canvas: replace the public gradient + white text. font-weight 400 (vs the public 300) keeps dense data legible. --- */ body.secure { background: #e3e7ed; background-color: #e3e7ed; color: #0B2545; font-weight: 400; } /* The public CSS is content-box; with the padding + borders these panels now carry, a width:100% child would overflow its container. Switch the secure panel/card primitives to border-box so padding and border are counted inside the width and everything stays within its boundaries. */ body.secure .semiTransparentBlueBackground, body.secure .semiTransparentWhiteBackground, body.secure .infoPanel, body.secure .filtersPanel, body.secure .siteInnerLimit { box-sizing: border-box; } /* Belt-and-braces: the starfield isn't generated on secure pages, but hide it if it ever is. */ body.secure .starry-sky { display: none; } /* --- Links --- */ body.secure a { color: #0B2545; } body.secure a:hover { color: #F15A34; } /* --- Secure navigation + breadcrumb --- */ body.secure .staticMenuItemStyle, body.secure .staticMenuItemStyle a, body.secure .dynamicMenuStyle, body.secure .nodeStyle, body.secure .nodeStyle a, body.secure .currentNodeStyle { color: #0B2545; } /* Nav and breadcrumb links hover the same as every other link: brand orange. Needed because the navy colour rule above otherwise ties with (and beats) body.secure a:hover, leaving nav links navy on hover. */ body.secure .staticMenuItemStyle a:hover, body.secure .nodeStyle a:hover { color: #F15A34; } /* Dotted submenu separator was white-on-dark */ body.secure .subMenuContainer { border-top-color: rgba(11, 37, 69, 0.3); } /* --- Section headings --- The shared .fontUnderline draws a *white* text-underline (invisible here) and reserves 25px below. Replace with a full-width divider and a short brand-orange accent so sections read clearly without clutter. */ body.secure .fontUnderline { text-decoration: none; border-bottom: 1px solid #d6dce4; padding-bottom: 8px; margin-bottom: 14px; font-weight: 500; position: relative; } /* short orange accent under the heading text */ body.secure .fontUnderline::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 2px; background-color: #F15A34; } /* --- Section panels (grouping containers) --- Were a barely-there navy tint; make them a defined light panel and let their inner content use the full width for density. --- */ body.secure .semiTransparentBlueBackground { background-color: #eef2f6; border: 1px solid #d6dce4; border-radius: 8px; } body.secure .semiTransparentBlueBackground .siteInnerLimit { width: 100%; margin: 0; padding: 20px 24px; } /* --- White content cards --- Solid white with a soft border + shadow so they lift off the canvas. */ body.secure .semiTransparentWhiteBackground { background-color: #ffffff; border: 1px solid #d6dce4; border-radius: 6px; box-shadow: 0 1px 2px rgba(11, 37, 69, 0.05); } /* Replace the asymmetric 25px corner flourish with a uniform radius. */ body.secure .infoPanel { border-radius: 6px; } /* An informational note sitting inside a section panel gets a left accent so it reads as guidance rather than another data card. */ body.secure .semiTransparentBlueBackground .infoPanel.semiTransparentWhiteBackground { border-left: 3px solid #F15A34; box-shadow: none; } /* Filter panels on data pages read as the same light grouping. */ body.secure .filtersPanel { background-color: #eef2f6; border: 1px solid #d6dce4; border-radius: 8px; } /* --- Entity / item lists: visible separators, denser rows, hover --- */ body.secure .itemList li { border-bottom-color: #e2e6ec; padding: 8px 12px; } body.secure .itemList li:hover { background-color: #eaf0f6; } /* --- Data grids --- Defined header band, soft row rules, hover highlight for scanning. */ body.secure .gridView { color: #0B2545; } body.secure .gridView th { background-color: #eef2f6; border-bottom: 2px solid #c6cfdb; color: #0B2545; } body.secure .gridView td { border-bottom-color: #e2e6ec; } /* highlight the hovered data row (header uses , so it is unaffected) */ body.secure .gridView tr:hover td { background-color: #eaf0f6; } body.secure .gridView tr:last-child td { border-bottom: none; } /* --- "Computer"/terminal text was near-white --- */ body.secure .computerTitle, body.secure .blinking-cursor { color: #0B2545; } /* --- People items (used on a couple of secure pages) --- */ body.secure .peopleItemText { color: #0B2545; } /* --- Footer stays a dark navy block: keep its text white --- */ body.secure .footerInner, body.secure .footerInner a { color: #ffffff; }