/* ===================================================================== EngageSAE Console theme — BASE --------------------------------------------------------------------- Re-skins the Bootstrap classes the application already emits, so pages inherit the theme without any markup change. This is the layer that reaches ~460 pages, and therefore the riskiest one — it is kept in its own file so it can be reviewed, gated and reverted independently. SCOPING ------- Every rule is prefixed `.engage-console` — the class the masters put on . Removing that one class disables the theme site-wide, which is the kill switch. Keep to ONE class of nesting past the prefix so a page can still override a rule with `body.engage-console ...`; anything deeper belongs in a page-scoped block in components.css. Bootstrap note: this app loads Bootstrap 3 *and* (via plugins.css) the Bootstrap 4 based admin template, so `.panel*` (BS3) and `.card*` (BS4) both occur. Rules below cover both vocabularies together so a shared user control renders the same under either master. ===================================================================== */ /* ============================ TYPOGRAPHY ============================ */ .engage-console { /* Poppins arrives via a Google Fonts @import inside style.css and has no fallback there; if that request fails every page renders in the browser default serif. Give it a real stack. No !important — the point of the theme is to stop fighting the cascade. */ font-family: var(--v3-font); color: var(--v3-ink); } /* style.css (the BS4 template) sets `h1..h6 { font-family: Poppins }` with no fallback. An element rule beats inheritance from the body whatever the specificity, so headings ignored the stack above and dropped to the browser default serif whenever the Google Fonts request failed. */ .engage-console h1, .engage-console h2, .engage-console h3, .engage-console h4, .engage-console h5, .engage-console h6 { font-family: var(--v3-font); } .engage-console h1, .engage-console h2, .engage-console h3, .engage-console h4 { color: var(--v3-navy); font-weight: 800; } .engage-console h2 { font-size: 22px; } .engage-console strong { font-weight: 700; } .engage-console small { color: var(--v3-muted); font-size: 12px; } .engage-console .text-success { color: var(--v3-success); font-weight: 600; } .engage-console .text-primary { color: var(--v3-blue); } /* ========================= CARDS (BS4) + PANELS (BS3) ========================= `.card-body` is defined NOWHERE in the Engage3 stylesheet chain, so the ~400 pages built as
currently render with no padding at all. Defining it here is the single highest leverage rule in the theme — and it is additive, not an override. */ .engage-console .card, .engage-console .panel { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-radius); box-shadow: var(--v3-shadow-card); margin-bottom: 20px; /* NOTE: deliberately NO `overflow: hidden`. The prototype clipped the panel so the heading's corners would round, but that also clips every absolutely-positioned child — Bootstrap dropdowns, jQuery UI autocomplete, the DateTimePicker popup and selectize menus, all of which are used heavily inside panels. Corners are rounded on the heading itself instead (below). */ } .engage-console .card-body, .engage-console .panel-body { padding: 20px 22px; } /* Shared heading chrome. Backgrounds are set per-type below. */ .engage-console .card-header, .engage-console .panel-heading, .engage-console .panel-heading.white { font-weight: 700; font-size: 15px; padding: 15px 18px; border-top-left-radius: var(--v3-radius-inner); border-top-right-radius: var(--v3-radius-inner); } /* Bare `.panel-heading` keeps the light treatment. In practice every panel now carries `.panel-primary`, which overrides this below, but a heading outside one still needs a sane default. */ .engage-console .panel-heading, .engage-console .panel-heading.white { background: linear-gradient(130deg, #ffffff 0%, #eef3f9 100%); color: var(--v3-navy); border-bottom: 1px solid var(--v3-line); } /* `.card-header` uses the .v3-banner gradient, matching `.panel-primary > .panel-heading` so cards and panels read alike. `.bg-white` is honoured as a deliberate opt-out — three headers pair it with `.no-border` to sit flush against the card body, and painting those blue would defeat the point. Excluding via :not() also keeps the white-text rules below off them, so they never go white-on-white. */ .engage-console .card-header:not(.bg-white) { background: linear-gradient(130deg, var(--v3-navy) 0%, var(--v3-blue) 60%, var(--v3-blue-2) 100%); color: #fff; border-bottom: none; } /* Text nested inside a dark heading has to come with it. Bootstrap gives `.panel-title` `color: inherit`, but the theme's `.engage-console h1-h4 { color: var(--v3-navy) }` is (0,1,1) and beats it — so an

rendered navy on the blue gradient and was unreadable (ImpersonateUser.aspx). Rather than enumerate every element that might appear, make descendants inherit the heading's white. `.btn`, `.badge` and `.label` are excluded because they carry their own foreground, and form controls because an would end up white-on-white. Applies to all three dark heading surfaces in this section. */ .engage-console .card-header:not(.bg-white) *:not(.btn):not(.badge):not(.label):not(input):not(select):not(textarea):not(.form-control), .engage-console .panel-primary > .panel-heading:not(.bg-white) *:not(.btn):not(.badge):not(.label):not(input):not(select):not(textarea):not(.form-control), .engage-console .panel-heading.bg-primary *:not(.btn):not(.badge):not(.label):not(input):not(select):not(textarea):not(.form-control) { color: #fff; } /* panels.css paints `.panel-title { background: silver; height: 16px }`, which drew a grey bar across the heading and clipped the text. ImpersonateUser.ascx carries a local !important hack to undo it; with this in the theme that page-level workaround is redundant. */ /* `.bg-white` opts a heading out of the brand fill — same convention as `.card-header`. Declared explicitly rather than leaning on Bootstrap's `.bg-white { background-color: #fff !important }`, because that sets a background-COLOR and a gradient background-IMAGE would still paint over it. Used by SP/SponsorDisplayTile.ascx, whose heading holds a sponsor's promotional graphic and must sit on white. */ .engage-console .panel-heading.bg-white { background: #fff; color: var(--v3-ink); border-bottom: 1px solid var(--v3-line); } .engage-console .panel-heading .panel-title, .engage-console .card-header .panel-title { background: none; height: auto; } /* A panel heading explicitly painted `.bg-primary` keeps that intent; BS4 declares `.bg-primary` !important so the colour wins on its own, and we only fix the foreground. `.card-header` is no longer listed here — it now takes the gradient above like every other card. */ .engage-console .panel-heading.bg-primary { background-image: none; color: #fff; border-bottom: none; } /* BS3 `.panel-primary` header. Painted with the same gradient as `.v3-banner` in components.css so the two read as one family — keep them in step if either changes. The `background` shorthand is deliberate: it clears the `background-color` BS3 sets, which a bare `background-image` would leave showing through. */ .engage-console .panel-primary > .panel-heading:not(.bg-white) { background: linear-gradient(130deg, var(--v3-navy) 0%, var(--v3-blue) 60%, var(--v3-blue-2) 100%); color: #fff; border-bottom: none; } /* ============================== BUTTONS ============================== Bootstrap 3 has no .btn-secondary / .btn-light / .btn-outline-*, and the BS4 template does not define them either — so today 261 uses of `btn-secondary` across the app render as bare, unstyled buttons. These are new definitions, not overrides. */ .engage-console .btn { border-radius: var(--v3-radius-sm); font-weight: 600; font-size: 13.5px; padding: 9px 16px; box-shadow: none; } .engage-console .btn-primary { background-color: var(--v3-blue); border: 1px solid var(--v3-blue); color: #fff; } .engage-console .btn-primary:hover, .engage-console .btn-primary:focus { background-color: var(--v3-navy); border-color: var(--v3-navy); color: #fff; } /* Neutral / outline buttons — previously unstyled. */ .engage-console .btn-default, .engage-console .btn-light { background-color: #fff; border: 1px solid var(--v3-line); color: var(--v3-ink); } .engage-console .btn-secondary { background-color: rgba(227, 227, 226, .8); border: 1px solid var(--v3-line); color: var(--v3-ink); } .engage-console .btn-secondary:hover, .engage-console .btn-secondary:focus, .engage-console .btn-default:hover, .engage-console .btn-light:hover { background-color: #f2f7fd; border-color: #bcd2ee; color: var(--v3-navy); } .engage-console .btn-outline-primary, .engage-console .btn-outline-secondary { background-color: transparent; border: 1px solid var(--v3-blue); color: var(--v3-blue); } .engage-console .btn-outline-primary:hover, .engage-console .btn-outline-secondary:hover { background-color: var(--v3-blue); color: #fff; } .engage-console .btn-danger { background-color: #b2413b; border: 1px solid #f0c9c9; color: #fff; } .engage-console .btn-danger:hover { background-color: #fdf1f1; border-color: #e3a9a9; color: #8f302b; } .engage-console .btn-info { background-color: #fff; border: 1px solid #cdeee6; color: var(--v3-ink); } .engage-console .btn-info:hover { border-color: #9fdcca; } .engage-console .btn-lg { font-size: 15px; padding: 12px 20px; border-radius: 12px; } .engage-console .btn-sm { font-size: 12.5px; padding: 6px 12px; border-radius: 9px; } .engage-console .btn-block { display: block; width: 100%; } /* A button that leads with a `.badge` — SponsorDisplayTile's "Connect with Sponsor" carries the sponsor's goal as a pill. The control used Bootstrap's `.pull-left`, whose `float: left !important` pulled the badge out of flow so it collided with the label. That float is gone from the control; this lays the pair out as a centred row instead. Scoped to an opt-in class rather than every `.btn` — switching 261 buttons to inline-flex to fix one is not a trade worth making. */ .engage-console .btn-badge { display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .engage-console .btn-badge .badge { float: none; /* belt and braces, in case .pull-left returns */ margin: 0; flex: 0 0 auto; background: #fff; color: var(--v3-blue); font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px; text-shadow: none; } /* Round the OUTSIDE of a button group to the theme radius. Bootstrap squares every corner where two buttons meet, which is right — this is a segmented control and the joins should stay flush — but it left the four outer corners at the plain button radius, so the group read as squarer than the panels and breadcrumbs around it. Only the outer corners are touched, so this never fights Bootstrap's inner-join rules. It must stay ABOVE the mobile block below: there the group wraps and every button gets its full radius back, and that rule matches at the same specificity, so it has to come later to win. */ .engage-console .btn-group > .btn:first-child, .engage-console .btn-group > .btn-group:first-child > .btn:first-child { border-top-left-radius: var(--v3-radius); border-bottom-left-radius: var(--v3-radius); } .engage-console .btn-group > .btn:last-child, .engage-console .btn-group > .btn-group:last-child > .btn:last-child { border-top-right-radius: var(--v3-radius); border-bottom-right-radius: var(--v3-radius); } /* ---------- Mobile: every button renders at .btn-lg size ---------- Below the Bootstrap `sm` breakpoint every button — whatever size class it carries — takes the .btn-lg metrics, for thumb-sized touch targets. 767.98px is the shared boundary: it is BS3's `xs` ceiling and BS4's `md` floor, so it lines up on both masters. Listing .btn-xs/.btn-sm/.btn-lg explicitly is required. They match at the same (0,2,0) specificity as `.engage-console .btn`, so a bare `.btn` rule here would lose the tie to the size classes above. This block sits after them, so on an equal-specificity tie it wins. .btn-xs and .btn-sm are still worth covering even though no Engage markup uses them any more: bootstrap-select, footable, x-editable, daterangepicker and clockpicker all emit `btn-sm` at runtime. */ @media (max-width: 767.98px) { .engage-console .btn, .engage-console .btn-xs, .engage-console .btn-sm, .engage-console .btn-lg { font-size: 15px; padding: 12px 20px; border-radius: 12px; } /* Keep an input-group's button aligned with its field. BS3 lays the group out as a table and BS4 as a flex row, so both stretch the field to the taller button — but the text inside would still sit a point smaller than the button's. Match them up. */ .engage-console .input-group .form-control { font-size: 15px; } /* A .btn-group of full-size buttons overflows a phone viewport — the Inbox toolbar (Inbox / Sent Items / My Preferences) is ~360px at this size, wider than a 375px screen. Let the group wrap. Once it wraps, the joined-corner styling has to go too, or the detached buttons keep their squared-off inner edges. Bootstrap squares them at (0,5,0) via stacked :not()s, so the restore has to repeat that shape behind `.engage-console` to reach (0,6,0). */ .engage-console .btn-group, .engage-console .btn-group-vertical { display: inline-flex; flex-wrap: wrap; gap: 4px; } .engage-console .btn-group > .btn, .engage-console .btn-group > .btn-group > .btn { float: none; } /* Restore the radius Bootstrap strips to join the buttons together. Each selector below mirrors a real Bootstrap rule with `.engage-console` prepended — that added class is what wins the cascade. Matching the shapes exactly is deliberate: BS squares these at up to (0,6,0), so a simpler `.btn-group > .btn` rule silently loses and the corners stay square. Verified against the CSSOM of a rendered page rather than assumed. */ .engage-console .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .engage-console .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .engage-console .btn-group > .btn:last-child:not(:first-child), .engage-console .btn-group > .dropdown-toggle:not(:first-child), .engage-console .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .engage-console .btn-group > .btn-group:first-child > .btn:last-child, .engage-console .btn-group > .btn-group:first-child > .dropdown-toggle, .engage-console .btn-group > .btn-group:last-child > .btn:first-child, .engage-console .btn-group-vertical > .btn:not(:first-child):not(:last-child), .engage-console .btn-group-vertical > .btn:first-child:not(:last-child), .engage-console .btn-group-vertical > .btn:last-child:not(:first-child), .engage-console .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .engage-console .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .engage-console .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle, .engage-console .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { border-radius: 12px; } /* Undo the -1px border collapse; with a gap it just misaligns. */ .engage-console .btn-group > .btn + .btn, .engage-console .btn-group > .btn + .btn-group, .engage-console .btn-group > .btn-group + .btn { margin-left: 0; } } /* =============================== FORMS =============================== */ .engage-console .form-group { margin-bottom: 16px; } .engage-console .form-control, .engage-console select.form-control, .engage-console textarea.form-control { border: 1px solid var(--v3-line); border-radius: var(--v3-radius-sm); min-height: 42px; max-width: 100%; font-size: 14px; color: var(--v3-ink); box-shadow: none; background-color: #fff; padding: 8px 12px; } .engage-console .form-control:focus { border-color: #9dc3ef; box-shadow: var(--v3-focus-ring); } .engage-console .help-block { font-size: 13px; line-height: 1.55; color: var(--v3-muted); } /* Labels: normal case at body size. NOT-GLOBALISED counterpart below — the prototype's compact uppercase label is intentionally NOT applied site-wide. ASP.NET emits a