/* ========================================================================== EQUITYMARKER — INSTITUTIONAL DESIGN SYSTEM Derived from the RSK brand system (navy / orange / Inter), adapted for a dense equity-administration application. LOAD ORDER: this file must load AFTER Bootstrap and Font Awesome. It is injected into by the navigation user controls (see Navigation_*.ascx.cs -> RegisterSharedAssets). SECTIONS 1. Tokens 2. Base & typography 3. Editorial primitives (eyebrow, rule, lead, pull-quote) 4. Layout (container, section, grids) 5. Buttons 6. Bootstrap re-skin (forms, tables, cards, badges, modals, tabs...) 7. Application components (kpi, panel, data table, glyph, empty state) 8. Marketing components (hero, flat panel, timeline, pipeline) 9. Legacy compatibility layer <-- keeps not-yet-migrated pages coherent 10. Busy / double-click state 11. Utilities 12. Responsive 13. Motion & print ========================================================================== */ /* ========================================================================== 1. TOKENS ========================================================================== */ :root { /* Structure — RSK institutional navy. Carries the weight of the design: hero grounds, sidebar, panel top-borders, headings. */ --em-navy: #002855; --em-navy-deep: #001733; --em-navy-mid: #013A76; /* Accent — taken from the EquityMarker logo. The mark is an azure gradient #1058F8 -> #1090F8 (centre ~#1070F8) beside a #404040 charcoal wordmark. The raw logo azure is NOT used directly: against white it gives white-on-blue 4.47:1, just under the 4.5 needed for the bold 13px uppercase button labels, so the accent is stepped one notch darker to #0D66E8 (5.14:1 in both directions). The accent needs TWO steps because it is used on opposite grounds: --em-accent on white/gray -> 5.14:1 --em-accent-on-dark on navy -> 5.92:1 The single-step version failed badly on navy (logo azure on --em-navy is only 3.27:1), which is why hero eyebrows and the sidebar active state use the lighter step. */ --em-accent: #0D66E8; --em-accent-hover: #0A4FB8; --em-accent-on-dark: #5CA8FF; --em-accent-soft: #EAF2FE; --em-logo-charcoal: #404040; /* Neutrals */ --em-white: #FFFFFF; --em-canvas: #F5F7FA; --em-gray-soft: #F5F7FA; --em-gray-100: #F9FAFB; --em-gray-200: #F3F4F6; --em-gray-border: #E5E7EB; --em-gray-border-strong: #D1D5DB; --em-text-dark: #111827; --em-text-muted: #5B6472; /* 4.95:1 even on a 10% tint; #6B7280 fell to 4.00 */ --em-text-on-navy: #A0AABF; --em-list-on-navy: #D1D5DB; /* Semantic — muted, institutional, never candy-bright */ --em-success: #15803D; --em-success-soft: #ECFDF3; --em-warning: #B45309; --em-warning-soft: #FFFBEB; --em-danger: #B91C1C; --em-danger-soft: #FEF2F2; --em-info: #002855; --em-info-soft: #EEF3F9; /* Type */ --em-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --em-font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace; /* Geometry — institutional: near-square, hairline, restrained shadow */ --em-radius: 2px; --em-radius-lg: 4px; --em-hairline: 1px solid var(--em-gray-border); --em-shadow-sm: 0 1px 2px rgba(0, 23, 51, 0.04); --em-shadow: 0 4px 14px rgba(0, 23, 51, 0.06); --em-shadow-lg: 0 16px 40px rgba(0, 23, 51, 0.10); /* Chrome metrics */ --em-sidebar-w: 264px; --em-topbar-h: 64px; /* Bootstrap 5.3 theme bridge */ --bs-primary: #002855; --bs-primary-rgb: 0, 40, 85; --bs-link-color: #002855; --bs-link-color-rgb: 0, 40, 85; --bs-link-hover-color: #0D66E8; --bs-link-hover-color-rgb: 13, 102, 232; --bs-body-font-family: var(--em-font); --bs-body-color: #111827; --bs-body-color-rgb: 17, 24, 39; --bs-border-color: #E5E7EB; --bs-border-radius: 2px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 4px; --bs-border-radius-xl: 4px; --bs-focus-ring-color: rgba(13, 102, 232, 0.25); } /* ========================================================================== 2. BASE & TYPOGRAPHY ========================================================================== */ html { scroll-behavior: smooth; } body { font-family: var(--em-font) !important; color: var(--em-text-dark); background-color: var(--em-white); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.em-app { background-color: var(--em-canvas); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--em-font); color: var(--em-navy-deep); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } /* Financial figures must align in columns. */ .em-num, .em-table td.em-num, .em-table th.em-num, .em-kpi__value, .em-stat__value { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } a { color: var(--em-navy); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--em-accent); } hr { border-color: var(--em-gray-border); opacity: 1; } ::selection { background: var(--em-navy); color: #fff; } /* A bare defaults to 300x150 and can overflow its container in the window before Chart.js sizes it. */ canvas { max-width: 100%; } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--em-accent); outline-offset: 2px; } /* ========================================================================== 3. EDITORIAL PRIMITIVES ========================================================================== */ .em-eyebrow { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--em-accent); margin-bottom: 14px; } /* On a navy ground the accent must step lighter or it drops to ~3.3:1. */ .em-bg-navy .em-eyebrow, .em-bg-navy-deep .em-eyebrow, .em-hero .em-eyebrow, .em-on-navy .em-eyebrow { color: var(--em-accent-on-dark); } .em-eyebrow--navy { color: var(--em-navy); } .em-rule { width: 40px; height: 3px; background: var(--em-accent); border: 0; margin: 0 0 24px; opacity: 1; } .em-rule--center { margin-left: auto; margin-right: auto; } .em-h2 { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--em-navy-deep); margin-bottom: 20px; } .em-h3 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; color: var(--em-navy-deep); margin-bottom: 14px; } .em-lead { font-size: 1.2rem; line-height: 1.6; color: var(--em-navy); } .em-muted { color: var(--em-text-muted); } /* Orange left-border key statement */ .em-key-statement { border-left: 3px solid var(--em-accent); padding: 4px 0 4px 20px; margin: 28px 0; font-size: 1.1rem; font-weight: 600; color: var(--em-navy-deep); line-height: 1.5; } .em-pull-quote { font-size: 1.65rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; color: var(--em-navy-deep); max-width: 900px; margin: 0 auto; } /* Arrow list — RSK signature */ .em-list { list-style: none; padding: 0; margin: 0; } .em-list li { position: relative; padding-left: 24px; margin-bottom: 12px; color: var(--em-text-muted); } .em-list li::before { content: '\2192'; position: absolute; left: 0; top: 0; color: var(--em-accent); font-weight: 700; } .bg-navy .em-list li, .em-on-navy .em-list li { color: var(--em-list-on-navy); } /* ========================================================================== 4. LAYOUT ========================================================================== */ .em-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } .em-section { padding: 96px 0; } .em-section--tight { padding: 64px 0; } .em-bg-gray { background-color: var(--em-gray-soft); } .em-bg-navy { background-color: var(--em-navy); color: #fff; } .em-bg-navy-deep { background-color: var(--em-navy-deep); color: #fff; } .em-bg-navy h1, .em-bg-navy h2, .em-bg-navy h3, .em-bg-navy h4, .em-bg-navy h5, .em-bg-navy-deep h1, .em-bg-navy-deep h2, .em-bg-navy-deep h3, .em-bg-navy-deep h4, .em-bg-navy-deep h5 { color: #fff; } .em-bg-navy p, .em-bg-navy-deep p { color: var(--em-text-on-navy); } .em-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .em-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .em-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .em-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } /* ========================================================================== 5. BUTTONS Uppercase, letter-spaced, square. Orange = primary action. Navy = structure. ========================================================================== */ .em-btn, .btn.em-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 28px; font-family: var(--em-font); font-size: 0.85rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border: 2px solid transparent; border-radius: var(--em-radius); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; white-space: nowrap; } .em-btn-primary { background-color: var(--em-accent); border-color: var(--em-accent); color: #fff !important; } .em-btn-primary:hover, .em-btn-primary:focus { background-color: var(--em-accent-hover); border-color: var(--em-accent-hover); color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13, 102, 232, 0.28); } .em-btn-navy { background-color: var(--em-navy); border-color: var(--em-navy); color: #fff !important; } .em-btn-navy:hover, .em-btn-navy:focus { background-color: var(--em-navy-deep); border-color: var(--em-navy-deep); color: #fff !important; transform: translateY(-1px); } .em-btn-outline { background-color: transparent; border-color: var(--em-navy); color: var(--em-navy) !important; } .em-btn-outline:hover, .em-btn-outline:focus { background-color: var(--em-navy); color: #fff !important; } .em-btn-light { background-color: transparent; border-color: #fff; color: #fff !important; } .em-btn-light:hover, .em-btn-light:focus { background-color: #fff; color: var(--em-navy-deep) !important; } .em-btn-ghost { background: transparent; border-color: var(--em-gray-border); color: var(--em-text-muted) !important; } .em-btn-ghost:hover { border-color: var(--em-navy); color: var(--em-navy) !important; background: var(--em-gray-100); } .em-btn-sm { padding: 8px 16px; font-size: 0.72rem; letter-spacing: 0.05em; } .em-btn-lg { padding: 17px 38px; font-size: 0.95rem; } .em-btn-block { width: 100%; } .em-btn-group { display: flex; gap: 14px; flex-wrap: wrap; } /* --- Bootstrap button re-skin (covers every un-migrated asp:Button) --- */ .btn { font-family: var(--em-font); font-weight: 600; border-radius: var(--em-radius); letter-spacing: 0.01em; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .btn-primary { --bs-btn-bg: var(--em-accent); --bs-btn-border-color: var(--em-accent); --bs-btn-hover-bg: var(--em-accent-hover); --bs-btn-hover-border-color: var(--em-accent-hover); --bs-btn-active-bg: var(--em-accent-hover); --bs-btn-active-border-color: var(--em-accent-hover); --bs-btn-disabled-bg: var(--em-accent); --bs-btn-disabled-border-color: var(--em-accent); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; } .btn-secondary { --bs-btn-bg: var(--em-navy); --bs-btn-border-color: var(--em-navy); --bs-btn-hover-bg: var(--em-navy-deep); --bs-btn-hover-border-color: var(--em-navy-deep); --bs-btn-active-bg: var(--em-navy-deep); --bs-btn-active-border-color: var(--em-navy-deep); --bs-btn-disabled-bg: var(--em-navy); --bs-btn-disabled-border-color: var(--em-navy); } .btn-outline-primary { --bs-btn-color: var(--em-navy); --bs-btn-border-color: var(--em-navy); --bs-btn-hover-bg: var(--em-navy); --bs-btn-hover-border-color: var(--em-navy); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--em-navy); --bs-btn-active-border-color: var(--em-navy); } .btn-outline-secondary { --bs-btn-color: var(--em-text-muted); --bs-btn-border-color: var(--em-gray-border-strong); --bs-btn-hover-bg: var(--em-navy); --bs-btn-hover-border-color: var(--em-navy); --bs-btn-hover-color: #fff; } .btn-success { --bs-btn-bg: var(--em-success); --bs-btn-border-color: var(--em-success); --bs-btn-hover-bg: #126A33; --bs-btn-hover-border-color: #126A33; } .btn-danger { --bs-btn-bg: var(--em-danger); --bs-btn-border-color: var(--em-danger); --bs-btn-hover-bg: #9B1717; --bs-btn-hover-border-color: #9B1717; } .btn-link { --bs-btn-color: var(--em-navy); --bs-btn-hover-color: var(--em-accent); text-decoration: none; font-weight: 600; } .btn-check:focus + .btn, .btn:focus-visible { box-shadow: 0 0 0 3px rgba(13, 102, 232, 0.25); } /* ========================================================================== 6. BOOTSTRAP RE-SKIN ========================================================================== */ /* --- Forms --- */ .form-label, .em-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--em-text-muted); margin-bottom: 6px; } .form-control, .form-select, .input-group-text { font-family: var(--em-font); font-size: 0.925rem; color: var(--em-text-dark); background-color: #fff; border: 1px solid var(--em-gray-border-strong); border-radius: var(--em-radius); padding: 0.55rem 0.75rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .form-select:focus { border-color: var(--em-navy); box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.10); } .form-control::placeholder { color: #9CA3AF; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--em-gray-100); color: var(--em-text-muted); } .input-group-text { background-color: var(--em-gray-100); color: var(--em-text-muted); font-weight: 600; } /* ================================================================================================== THE DOUBLE CHECKBOX does NOT put that class on the . When a CheckBox has a CssClass, Text, or any attribute, ASP.NET wraps it: So Bootstrap draws its 1em bordered box on the WRAPPER, and the browser draws a native checkbox for the input inside it — two boxes, one control. It is in the markup on 16 checkboxes across four pages: the permission matrix (5), plan features (9), the export options (1) and the Investor Center configuration (1). Fixed here rather than in the markup on purpose: the alternative is CssClass -> InputAttributes in code-behind on every instance, and several are inside Repeaters where that means new ItemDataBound handlers on the permission matrix — a screen with a history of subtle breakage. One rule reaches every instance and cannot alter postback behaviour. Controls NOT inside a Repeater set InputAttributes["class"] from Page_Load instead and never produce the wrapper at all: see the signup channel radios and the two directory switches. The wrapper is stripped back to an inert inline box; the real inside it is then styled with the same shape and brand colour Bootstrap would have given it. THE .form-switch SELECTOR IS WHY THE RESET IS LISTED TWICE BELOW. Bootstrap's `.form-switch .form-check-input` is (0,2,0) and it happily matches a — it outranks a bare `span.form-check-input` at (0,1,1) and would put the switch's 2em pill and background-image back on the wrapper. The second selector raises this to (0,2,1) so the reset wins wherever the wrapper appears. (The :checked and :focus rules further down need no such treatment: those pseudo-classes never match a span.) ================================================================================================== */ span.form-check-input, .form-switch span.form-check-input { /* Undo everything Bootstrap's .form-check-input applied to the wrapper. */ display: inline; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; vertical-align: baseline; -webkit-appearance: none; appearance: none; print-color-adjust: unset; } /* accent-color styles the native control's checked fill and is honoured by every browser this application supports, which avoids reimplementing Bootstrap's SVG tick. */ span.form-check-input > input[type="checkbox"], span.form-check-input > input[type="radio"] { width: 1em; height: 1em; margin: 0; vertical-align: -0.125em; accent-color: var(--em-navy); cursor: pointer; } span.form-check-input > input[type="checkbox"]:focus-visible, span.form-check-input > input[type="radio"]:focus-visible { outline: 2px solid var(--em-navy); outline-offset: 1px; } /* A .form-check gives its input a negative left margin to hang in the gutter; with the wrapper neutralised that margin has to move to the inner input or the box overlaps its label. */ .form-check span.form-check-input { float: left; margin-left: -1.5em; } /* ================================================================================================== SCREENSHOT LIGHTBOX Product screenshots on the marketing pages render a few hundred pixels wide, which is too small to read the interface they are selling. Wrapping one in .em-shot makes it clickable; the handler in equitymarker.js opens it full size. THE WRAPPER ALREADY EXISTED. Every platform page already framed its screenshots in .em-shot (see "Product screenshot figure" further down, which owns the border, background and shadow). This block adds only the INTERACTION, so no markup changed and all 42 existing screenshots became clickable at once. Keep the two blocks separate but do not redefine the figure's own properties here. tabindex and role are applied by equitymarker.js, not written into the markup. The lightbox needs that script to exist at all, so a focusable wrapper with no script behind it would be a keyboard trap leading nowhere — better that the affordance appears only when it works. ================================================================================================== */ .em-shot { position: relative; cursor: zoom-in; } .em-shot:focus-visible { outline: 3px solid var(--em-accent); outline-offset: 3px; } /* A small magnifier badge, so the image reads as interactive before it is hovered. Pointer-events none: it must never intercept the click the wrapper is listening for. */ .em-shot::after { content: "\f00e"; /* Font Awesome magnifying-glass-plus */ font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0, 40, 85, 0.82); color: #fff; font-size: 0.9rem; opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; } .em-shot:hover::after, .em-shot:focus-visible::after { opacity: 1; transform: translateY(0); } /* Stops the page behind the overlay scrolling. */ .em-lightbox-lock { overflow: hidden; } /* VISIBILITY DOES NOT DEPEND ON THE ANIMATION. The overlay is opaque as soon as [hidden] comes off; the fade is an ANIMATION, whose end state is simply this rule, so an environment that skips or never advances it still shows a usable dialog. The first attempt transitioned opacity from 0 to 1 on a class the script added. That fails badly in any context that is not compositing — a background tab, some embedded webviews — because the transition never advances and you are left with a fully transparent element covering the viewport and swallowing every click. Invisible and modal is the worst possible combination; there is no affordance to escape something you cannot see. */ .em-lightbox { position: fixed; inset: 0; z-index: 2000; /* above the sticky nav */ display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(0, 23, 51, 0.88); opacity: 1; animation: em-lightbox-in 0.18s ease; } /* [hidden] needs the !important: the display:flex above is more specific than the UA default and would otherwise keep a "hidden" overlay visible. */ .em-lightbox[hidden] { display: none !important; } @keyframes em-lightbox-in { from { opacity: 0; } to { opacity: 1; } } .em-lightbox__frame { max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } .em-lightbox__img { /* Caps on BOTH axes: a tall screenshot must not run off the viewport, and a wide one must not overflow it. object-fit keeps the aspect ratio while both apply. */ max-width: 100%; max-height: calc(100vh - 128px); width: auto; height: auto; object-fit: contain; border-radius: var(--em-radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); background: #fff; } .em-lightbox__caption { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 0.86rem; text-align: center; } .em-lightbox__close { position: absolute; top: 16px; right: 20px; width: 44px; /* 44px: the minimum comfortable touch target */ height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .em-lightbox__close:hover { background: rgba(255, 255, 255, 0.26); } .em-lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 767.98px) { .em-lightbox { padding: 12px; } .em-lightbox__img { max-height: calc(100vh - 96px); } } /* Someone who asked for less motion still gets the overlay, just without the fade. Safe precisely because the overlay's visible state is its normal state, not the animation's end state. */ @media (prefers-reduced-motion: reduce) { .em-lightbox { animation: none; } .em-shot::after { transition: none; } } /* ================================================================================================== SMS CONSENT BLOCK The 10DLC disclosure panel. Shared by the signup form and both profile screens, because the disclosure text itself is shared (Security\TwoFactor.SmsConsentFinePrint) and a consent screen that looks like an afterthought on one page and a considered notice on another is the kind of difference an auditor notices. Page-local copies of these rules were the reason the profile version rendered unstyled. ================================================================================================== */ .sms-consent { border: 1px solid var(--em-gray-border); border-left: 3px solid var(--em-accent); background: var(--em-gray-soft); padding: 14px 16px; } .sms-consent .form-check-label { font-size: 0.88rem; line-height: 1.5; color: var(--em-navy-deep); } .sms-consent__heading { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--em-text-muted); } .sms-consent__fine { font-size: 0.78rem; line-height: 1.55; color: var(--em-text-muted); margin-top: 9px; } .form-check-input { border-color: var(--em-gray-border-strong); border-radius: var(--em-radius); } .form-check-input:checked { background-color: var(--em-navy); border-color: var(--em-navy); } .form-check-input:focus { border-color: var(--em-navy); box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.10); } .form-switch .form-check-input:checked { background-color: var(--em-accent); border-color: var(--em-accent); } .form-text { font-size: 0.8rem; color: var(--em-text-muted); } /* Chrome paints autofilled inputs with its own pale-blue wash; repaint it so a restored login form still matches the palette. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset !important; -webkit-text-fill-color: var(--em-text-dark) !important; caret-color: var(--em-text-dark); transition: background-color 5000s ease-in-out 0s; } /* ASP.NET validators */ .field-validation-error, span[id*="rfv"], span[id*="Validator"], .em-validation { color: var(--em-danger); font-size: 0.8rem; font-weight: 600; display: inline-block; margin-top: 4px; } /* --- Tables --- */ .table { --bs-table-color: var(--em-text-dark); --bs-table-border-color: var(--em-gray-border); --bs-table-hover-bg: var(--em-gray-100); font-size: 0.9rem; margin-bottom: 0; } .table > thead > tr > th, .table thead th { background-color: var(--em-gray-soft); color: var(--em-navy); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.7rem 1rem; border-bottom: 1px solid var(--em-gray-border); white-space: nowrap; vertical-align: middle; } .table > tbody > tr > td, .table tbody td { padding: 0.75rem 1rem; vertical-align: middle; color: var(--em-text-dark); border-bottom: 1px solid var(--em-gray-200); } .table > tbody > tr:last-child > td { border-bottom: 0; } .table-hover > tbody > tr:hover > * { background-color: var(--em-gray-100); } /* ASP.NET GridView / DataList emit plain tables — cover them too */ table.em-table, .em-panel table { width: 100%; border-collapse: collapse; } /* --- Cards --- */ .card { background: #fff; border: 1px solid var(--em-gray-border); border-radius: var(--em-radius-lg); box-shadow: none; } .card-header { background-color: var(--em-gray-soft); border-bottom: 1px solid var(--em-gray-border); font-weight: 700; color: var(--em-navy); font-size: 0.95rem; } .card-footer { background-color: var(--em-gray-100); border-top: 1px solid var(--em-gray-border); } /* --- Badges --- */ .badge { font-family: var(--em-font); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: var(--em-radius); padding: 0.35em 0.6em; } /* --- Bootstrap colour utilities --------------------------------------------- Re-point these through Bootstrap's *-rgb custom properties, NOT with flat `background-color: ... !important` overrides. Bootstrap composes these utilities as rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) so a flat !important override silently destroys the whole opacity system: `.bg-primary.bg-opacity-10`, which should be a 10% tint behind dark text, collapses to a SOLID block and the text on it becomes unreadable. That is exactly what happened to the "Granting To:" panel on the option-grant page and to 25 other tinted panels across the app. Setting the -rgb variables gives solid fills AND correct tints, and fixes .border-* and .text-* opacity variants at the same time. */ :root { --bs-primary-rgb: 0, 40, 85; /* navy #002855 */ --bs-secondary-rgb: 91, 100, 114; /* muted #5B6472 */ --bs-success-rgb: 21, 128, 61; /* success #15803D */ --bs-danger-rgb: 185, 28, 28; /* danger #B91C1C */ --bs-warning-rgb: 180, 83, 9; /* warning #B45309 */ --bs-info-rgb: 1, 58, 118; /* navy-mid #013A76 */ --bs-light-rgb: 245, 247, 250; /* gray-soft #F5F7FA */ --bs-dark-rgb: 0, 23, 51; /* navy-deep #001733 */ } /* .text-dark / .text-black are plain colour utilities with no rgb composition in Bootstrap 5.3, so they do need an explicit re-point. */ .text-dark { color: var(--em-navy-deep) !important; } .text-black { color: var(--em-navy-deep) !important; } .text-white-50 { color: var(--em-text-on-navy) !important; } .text-muted { color: var(--em-text-muted) !important; } /* --- Dropdowns --- */ .dropdown-menu { border: 1px solid var(--em-gray-border); border-radius: var(--em-radius-lg); box-shadow: var(--em-shadow); padding: 6px; font-size: 0.9rem; } .dropdown-item { border-radius: var(--em-radius); padding: 0.5rem 0.75rem; color: var(--em-text-dark); font-weight: 500; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--em-gray-soft); color: var(--em-navy); } .dropdown-item.active, .dropdown-item:active { background-color: var(--em-navy); color: #fff; } .dropdown-divider { border-top-color: var(--em-gray-border); } /* --- Modals --- */ .modal-content { border: 0; border-top: 4px solid var(--em-navy); border-radius: var(--em-radius-lg); box-shadow: var(--em-shadow-lg); } .modal-header { background-color: var(--em-gray-soft); border-bottom: 1px solid var(--em-gray-border); padding: 1rem 1.5rem; } .modal-title { font-size: 1.05rem; font-weight: 700; color: var(--em-navy-deep); letter-spacing: -0.01em; } .modal-body { padding: 1.5rem; } .modal-footer { background-color: var(--em-gray-100); border-top: 1px solid var(--em-gray-border); padding: 0.9rem 1.5rem; } /* --- Tabs / pills --- */ .nav-tabs { border-bottom: 1px solid var(--em-gray-border); gap: 4px; } .nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--em-text-muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.7rem 1.1rem; } .nav-tabs .nav-link:hover { color: var(--em-navy); border-bottom-color: var(--em-gray-border-strong); background: transparent; } .nav-tabs .nav-link.active { color: var(--em-navy); background: transparent; border-bottom-color: var(--em-accent); } .nav-pills .nav-link { border-radius: var(--em-radius); color: var(--em-text-muted); font-weight: 600; } .nav-pills .nav-link.active { background-color: var(--em-navy); color: #fff; } /* --- Alerts --- */ .alert { border-radius: var(--em-radius); border: 1px solid var(--em-gray-border); border-left-width: 3px; font-size: 0.9rem; padding: 0.85rem 1.1rem; } .alert-success { background: var(--em-success-soft); border-left-color: var(--em-success); color: #14532D; } .alert-danger { background: var(--em-danger-soft); border-left-color: var(--em-danger); color: #7F1D1D; } .alert-warning { background: var(--em-warning-soft); border-left-color: var(--em-warning); color: #78350F; } .alert-info { background: var(--em-info-soft); border-left-color: var(--em-navy); color: var(--em-navy-deep); } .alert-primary { background: var(--em-info-soft); border-left-color: var(--em-navy); color: var(--em-navy-deep); } /* --- Progress --- */ .progress { height: 6px; border-radius: 0; background-color: var(--em-gray-200); } .progress-bar { background-color: var(--em-navy); border-radius: 0; } .progress-bar.bg-orange, .progress-bar.em-progress-accent { background-color: var(--em-accent); } /* --- Pagination --- */ .page-link { color: var(--em-navy); border-color: var(--em-gray-border); border-radius: 0 !important; font-size: 0.85rem; font-weight: 600; } .page-link:hover { background-color: var(--em-gray-soft); color: var(--em-accent); } .page-item.active .page-link { background-color: var(--em-navy); border-color: var(--em-navy); color: #fff; } /* --- Accordion --- */ .accordion-item { border-color: var(--em-gray-border); border-radius: 0; } .accordion-button { font-weight: 600; color: var(--em-navy-deep); background: #fff; border-radius: 0 !important; } .accordion-button:not(.collapsed) { background-color: var(--em-gray-soft); color: var(--em-navy); box-shadow: none; } .accordion-button:focus { box-shadow: none; border-color: var(--em-gray-border); } /* --- Tooltips / popovers --- */ .tooltip-inner { background-color: var(--em-navy-deep); border-radius: var(--em-radius); font-size: 0.78rem; padding: 0.45rem 0.65rem; } .popover { border-color: var(--em-gray-border); border-radius: var(--em-radius-lg); box-shadow: var(--em-shadow); } /* --- List group --- */ .list-group-item { border-color: var(--em-gray-border); padding: 0.85rem 1.1rem; font-size: 0.9rem; } .list-group-item.active { background-color: var(--em-navy); border-color: var(--em-navy); } /* ========================================================================== 7. APPLICATION COMPONENTS ========================================================================== */ /* --- App shell --- */ .em-shell { margin-left: var(--em-sidebar-w); padding: 32px; min-height: 100vh; } /* --- Page header --- */ .em-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--em-gray-border); } .em-page-head__title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.025em; color: var(--em-navy-deep); margin: 0 0 4px; } .em-page-head__sub { font-size: 0.925rem; color: var(--em-text-muted); margin: 0; } .em-page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* Breadcrumb */ .em-crumbs { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--em-text-muted); margin-bottom: 10px; } .em-crumbs a { color: var(--em-text-muted); } .em-crumbs a:hover { color: var(--em-accent); } .em-crumbs span + span::before { content: '/'; margin: 0 8px; color: var(--em-gray-border-strong); } /* --- Panel: the workhorse surface --- */ .em-panel { background: #fff; border: 1px solid var(--em-gray-border); border-top: 3px solid var(--em-navy); border-radius: var(--em-radius-lg); margin-bottom: 24px; } .em-panel--plain { border-top-color: var(--em-gray-border); } .em-panel--accent { border-top-color: var(--em-accent); } .em-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--em-gray-border); } .em-panel__title { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--em-navy); margin: 0; } .em-panel__title i { color: var(--em-accent); font-size: 0.9rem; } .em-panel__body { padding: 20px; } .em-panel__body--flush { padding: 0; } .em-panel__foot { padding: 14px 20px; border-top: 1px solid var(--em-gray-border); background: var(--em-gray-100); } /* --- KPI tile --- */ .em-kpi { display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid var(--em-gray-border); border-top: 3px solid var(--em-navy); border-radius: var(--em-radius-lg); padding: 20px; height: 100%; transition: border-top-color 0.2s ease, box-shadow 0.2s ease; } .em-kpi:hover { border-top-color: var(--em-accent); box-shadow: var(--em-shadow-sm); } .em-kpi__glyph { flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--em-gray-border); border-radius: var(--em-radius); color: var(--em-navy); font-size: 1rem; background: var(--em-gray-soft); } .em-kpi__body { min-width: 0; } .em-kpi__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--em-text-muted); margin: 0 0 6px; line-height: 1.3; } .em-kpi__value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--em-navy-deep); margin: 0; line-height: 1.1; } .em-kpi__meta { font-size: 0.78rem; color: var(--em-text-muted); margin: 4px 0 0; } /* --- Institutional glyph tile (square, hairline, stroke-forward) --- */ .em-glyph { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--em-gray-border-strong); border-radius: var(--em-radius); color: var(--em-navy); font-size: 1.15rem; background: #fff; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .em-glyph--accent { color: var(--em-accent); border-color: var(--em-accent); background: var(--em-accent-soft); } .em-glyph--navy { background: var(--em-navy); border-color: var(--em-navy); color: #fff; } .em-glyph--sm { width: 34px; height: 34px; font-size: 0.85rem; } .em-glyph--lg { width: 60px; height: 60px; font-size: 1.5rem; } a:hover > .em-glyph, .em-flat-panel:hover .em-glyph { border-color: var(--em-accent); color: var(--em-accent); } /* --- Data table wrapper (horizontal scroll on small screens) --- */ .em-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .em-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .em-table thead th { background: var(--em-gray-soft); color: var(--em-navy); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--em-gray-border); white-space: nowrap; } .em-table tbody td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--em-gray-200); vertical-align: middle; } .em-table tbody tr:last-child td { border-bottom: 0; } .em-table tbody tr:hover td { background: var(--em-gray-100); } .em-table .em-num, .em-table .text-end { text-align: right; } /* --- Status pill --- */ .em-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; padding: 4px 9px; border-radius: var(--em-radius); border: 1px solid transparent; white-space: nowrap; } .em-status--ok { background: var(--em-success-soft); color: var(--em-success); border-color: #BBF7D0; } .em-status--pending { background: var(--em-warning-soft); color: var(--em-warning); border-color: #FDE68A; } .em-status--danger { background: var(--em-danger-soft); color: var(--em-danger); border-color: #FECACA; } .em-status--neutral { background: var(--em-gray-soft); color: var(--em-text-muted); border-color: var(--em-gray-border); } .em-status--navy { background: var(--em-info-soft); color: var(--em-navy); border-color: #C7D6E6; } /* --- Empty state --- */ .em-empty { text-align: center; padding: 56px 24px; color: var(--em-text-muted); } .em-empty__glyph { font-size: 1.6rem; color: var(--em-gray-border-strong); margin-bottom: 14px; } .em-empty__title { font-size: 1rem; font-weight: 700; color: var(--em-navy); margin-bottom: 6px; } .em-empty__text { font-size: 0.9rem; max-width: 420px; margin: 0 auto 20px; } /* --- Definition rows (label / value pairs) --- */ .em-defs { margin: 0; } .em-def { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--em-gray-200); } .em-def:last-child { border-bottom: 0; } .em-def__k { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--em-text-muted); } .em-def__v { font-size: 0.9rem; font-weight: 600; color: var(--em-navy-deep); text-align: right; font-variant-numeric: tabular-nums; } /* --- Auth card (login / signup / invitation) --- */ .em-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--em-gray-soft); } /* Auth page with site chrome. .em-auth assumes it owns the viewport; these pages carry the site navigation and footer, so the FORM is the flex column and the card sits in the middle cell that takes up the slack. Every auth and invitation page previously repeated this as a page-level