html {
font-size: 16px;
}
.main-bg {
/* background-image: url('../assets/images/image-lessnoiseclip.jpg');
background-image: url('../assets/images/image (1).jpg');*/
/* background-image: url('../assets/images/imagecut60short.png');
background-size:cover;*/
}
@media (min-width: 768px) {
html {
font-size: 17px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.form-check-input {
/* Increase size for better visibility */
width: 1.3em;
height: 1.3em;
/* Add a bold border */
border: 2px solid #007bff; /* Bootstrap primary color */
/* Smooth transition for checked state */
transition: all 0.2s ease-in-out;
}
.input-validation-error{
border-color:red;
border-width:2px;
}
.form-check-input:checked {
/* Bright background when checked */
background-color: #007bff;
/* White checkmark for contrast */
border-color: #007bff;
}
.form-check-input:focus {
/* Subtle glow on focus */
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.form-check-input:hover {
/* Slight scale effect on hover */
transform: scale(1.1);
cursor: pointer;
}
.form-check-input {
margin-right:10px;
margin-top: 0!important;
margin-bottom: 0.25rem;
}
.form-check-label {
float: left;
}
.accordion-header{
text-align:left;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.col-form-label{
text-align:left;
font-weight:bold;
}
.required-label::after {
content: " *";
color: #dc3545; /* Bootstrap's danger color for red */
margin-left: 4px;
}
html, body {
height: 100%;
margin: 0;
/* Defensive clip — prevents the page from horizontally scrolling no matter
what child overflows. Without this, any tablet-range element that ends
up wider than the viewport (long brand, fixed-width navbar items,
grid content) pushes the body wider and the hamburger toggler ends up
offscreen-right. */
overflow-x: hidden;
}
body {
display: flex;
flex-direction: column;
background-color: #f4f7fc;
font-family: 'Poppins', sans-serif;
color: #2d3748;
min-height: 100vh;
}
.navbar {
background: linear-gradient(90deg, #1e3a8a, #3b82f6);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
transition: background 0.3s ease;
}
.navbar-brand {
font-weight: 700;
font-size: 1.5rem;
color: #ffffff !important;
transition: transform 0.3s ease;
white-space: nowrap;
}
.navbar-brand:hover {
transform: scale(1.05);
color: #e0f2fe !important;
}
/* Header brand logo (trust pass) — replaces the old text wordmark. The SSBCI
artwork is dark navy on transparent, so it sits on a white "plate" (padded
white rounded background) to stay legible against the dark blue header. The
navbar grows with the logo height (no fixed navbar height to override). */
.navbar-brand .hdr-logo {
height: 64px;
width: auto;
display: block;
background: #ffffff;
padding: 2px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
@media (max-width: 575.98px) {
.navbar-brand .hdr-logo {
height: 48px;
padding: 2px;
}
}
.navbar-nav .nav-item {
margin: 0 0.5rem; /* Space between nav items */
}
.centered-nav {
justify-content: center !important; /* Override default navbar-nav behavior */
}
.nav-link {
color: #ffffff !important;
font-weight: 500!important;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background 0.3s ease, color 0.3s ease;
white-space: nowrap;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.1);
color: #e0f2fe !important;
}
.nav-pills>.nav-item>.nav-link:hover {
background: #0d6efd;
}
.nav-pills .nav-link {
background-color: #549ccb;
margin-top: 10px;
}
/* Tab-style nav (e.g., Upcoming Events partial) needs dark text on light backgrounds —
override the global .nav-link white !important above. */
.nav-tabs .nav-link {
color: #495057 !important;
background: transparent !important;
}
.nav-tabs .nav-link:hover {
color: #0a58ca !important;
background: transparent !important;
}
.nav-tabs .nav-link.active {
color: #0d6efd !important;
font-weight: 600 !important;
background: #ffffff !important;
}
.navbar-toggler {
border: none;
color: #ffffff;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.dropdown-menu {
background: #ffffff;
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.dropdown-item {
color: #2d3748;
transition: background 0.3s ease, color 0.3s ease;
}
.dropdown-item:hover {
background: #3b82f6;
color: #ffffff;
}
.main-content {
flex: 1 0 auto;
padding: 2rem 0;
}
.hero-section {
background: transparent;
text-align: center;
padding: 1rem 0;
margin-bottom: 1rem;
}
.hero-section h1 {
font-size: 2rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 0.5rem;
}
.hero-section p {
font-size: 1.1rem;
color: #4b5563;
}
.required-label::after {
content: "*";
color: #ef4444;
margin-left: 4px;
}
.section-header {
border-bottom: 2px solid #e5e7eb;
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
font-size: 1.25rem;
font-weight: 600;
color: #1e3a8a;
}
.btn {
padding: 0.75rem 1.5rem;
}
.btn-primary {
background: #3b82f6;
border-radius: 8px;
font-weight: 600;
transition: background 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover {
background: #1e40af;
transform: scale(1.05);
}
.btn-secondary {
background: #6b7280;
border: none;
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-weight: 600;
transition: background 0.3s ease, transform 0.2s ease;
}
.btn-secondary:hover {
background: #4b5563;
transform: scale(1.05);
}
/* .bottom-form-save-btn removed — it added margin-right: 150px to leave
space for a Back button next to Save. Back buttons were removed during
punch list #11, so the offset only ever throws off centering now. The
class itself is no longer referenced from any view. */
.footer {
flex-shrink: 0;
background: linear-gradient(90deg, #1E3985 0%, #24396E 45%, #2C374C 100%);
color: #e5e7eb;
padding: 2rem 0 0;
font-size: 0.9rem;
}
.footer img {
max-height: 60px; /* Adjust based on your logo size */
margin: 0 auto;
display: block;
}
.footer .footer-madeby img {
max-height: 48px;
display: inline-block;
margin: 0;
vertical-align: middle;
}
.footer .footer-madeby span {
vertical-align: middle;
}
.footer a {
color: #93c5fd;
text-decoration: none;
transition: color 0.3s ease;
}
.footer a:hover {
color: #ffffff;
}
/* ---- Footer trust layout (redesign) ----
Three columns above md (copyright/made-by | endorsement | terms), centered
single column below. The funding statement is a full-width strip at the
bottom with a hairline top border. */
.footer .footer-grid {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 26px;
padding: 0 1rem;
}
.footer .footer-copy {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.88);
}
.footer .footer-madeby {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
}
/* Endorsement row: federal seal + divider + state logo. Explicit heights
override the generic `.footer img { max-height:60px; margin:0 auto }` rule. */
.footer .footer-endorse {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
}
.footer .footer-seal {
height: 82px;
max-height: 82px;
width: auto;
margin: 0;
display: block;
}
.footer .footer-dceo {
height: 64px;
max-height: 64px;
width: auto;
margin: 0;
display: block;
}
.footer .footer-divider {
width: 1px;
height: 70px;
background: rgba(255, 255, 255, 0.22);
}
.footer .footer-opbadge {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 9px;
padding: 8px 12px;
max-width: 350px;
margin-top: 16px;
}
.footer .footer-opbadge svg {
flex: 0 0 auto;
}
.footer .footer-opbadge span {
font-size: 0.72rem;
line-height: 1.4;
color: rgba(255, 255, 255, 0.9);
}
.footer .footer-col-right {
text-align: right;
}
.footer .footer-fundline {
margin: 0;
margin-top: 18px;
padding: 18px 1rem 22px;
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 0.72rem;
line-height: 1.55;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer .footer-fundline span {
max-width: 760px;
display: inline-block;
}
@media (max-width: 767.98px) {
.footer .footer-grid {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
gap: 22px;
}
.footer .footer-col-right {
text-align: center;
}
.footer .footer-madeby,
.footer .footer-opbadge,
.footer .footer-endorse {
justify-content: center;
}
}
.form-control, .form-select {
border-radius: 8px;
border: 1px solid #d1d5db;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus, .form-select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.validation-summary-errors {
background: #fee2e2;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1.5rem;
color: #b91c1c;
}
.form-container {
background: #ffffff99;
padding: 2.5rem;
border-radius: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
/* transition: transform 0.3s ease;
*/}
/* SF#3 — keep the Terms of Service + Privacy Notice body text left-aligned.
(The section h2 title is centered separately via markup classes.) */
.tos-body,
.privacy-notice,
.privacy-notice p,
.privacy-notice h3 {
text-align: left;
}
/* ---------------------------------------------------------------------------
SF#6 — "aligned rows" multi-select (TomSelect, .ts-aligned wrapper added by
js/aligned-multiselect.js). Selected items stack as full-width rows with a
parent-type badge + label + per-row remove button; dropdown options match.
--------------------------------------------------------------------------- */
.ts-aligned .ts-control {
display: flex;
flex-direction: column;
align-items: stretch;
gap: .4rem;
padding: .5rem;
/* Drop the theme's dropdown caret entirely — with stacked full-width rows it
collided with the rows and added no value (the rows + search input already
signal the control is interactive). */
background-image: none !important;
}
.ts-aligned .ts-control::after {
display: none !important;
}
/* Each selected item is its own full-width row. */
.ts-aligned .ts-control > .item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: .45rem .6rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
white-space: normal; /* allow long labels to wrap */
}
/* The search input sits below the rows, full width. */
.ts-aligned .ts-control > input {
width: 100% !important;
min-width: 0;
margin: 0;
padding: .25rem .35rem;
}
.ts-aligned .ams-row {
display: flex;
align-items: center;
gap: .55rem;
flex: 1 1 auto;
min-width: 0;
}
/* Badge color/shape comes from the shared .cat-chip-* classes (same as the
event-listing chips); keep only layout here and zero out .cat-chip's margins
so it sits flush in the flex row. */
.ts-aligned .ams-badge {
flex: 0 0 auto;
margin: 0;
white-space: nowrap;
}
.ts-aligned .ams-label {
flex: 1 1 auto;
min-width: 0;
color: #1f2937;
}
/* Per-row remove button (remove_button plugin) pushed to the right edge. */
.ts-aligned .ts-control > .item .remove {
flex: 0 0 auto;
margin-left: .6rem;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 0 .5rem;
color: #6b7280;
text-decoration: none;
}
.ts-aligned .ts-control > .item .remove:hover {
background: #f3f4f6;
color: #b91c1c;
}
/* Dropdown options rendered as the same badge + label rows. */
.ts-aligned .ts-dropdown .option {
padding: .5rem .6rem;
}
.ts-aligned .ts-dropdown .option .ams-row {
gap: .55rem;
}
/* ---------------------------------------------------------------------------
DTMF dial pad (OBC) — in-call keypad for navigating phone menus + dialing
extensions. Large keys for the older-skewing partner audience.
--------------------------------------------------------------------------- */
.ccb-dialpad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
margin: .5rem auto 0; /* center the pad in the modal body */
max-width: 320px;
}
.ccb-dialpad .ccb-key {
font-size: 1.4rem;
font-weight: 600;
padding: .55rem 0;
line-height: 1.1;
}
/* Dimmed look while the call isn't Connected (buttons are also disabled). */
.ccb-dialpad-disabled {
opacity: .55;
}
.ccb-dtmf-readout {
min-height: 1.25rem;
font-weight: 600;
letter-spacing: .04em;
font-variant-numeric: tabular-nums;
color: #1f2937;
text-align: center;
}
/*.form-container {
background: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 2rem;
}*/
.required-label::after {
content: "*";
color: #dc3545;
margin-left: 4px;
}
.form-label {
font-weight: 600;
}
.form-control, .form-select {
border-radius: 6px;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
}
.btn-secondary:hover {
background-color: #5a6268;
border-color: #5a6268;
}
.validation-summary-errors {
background-color: #f8d7da;
padding: 1rem;
border-radius: 6px;
margin-bottom: 1rem;
}
.text-danger {
font-size: 0.875rem;
}
.section-header {
border-bottom: 1px solid #dee2e6;
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
font-size: 1.25rem;
font-weight: 600;
}
.section-header {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: bold;
}
.required-label::after {
content: " *";
color: red;
}
/* M8.6 — "* = required" legend used at top of forms with required fields. */
.form-legend {
font-size: 0.875rem;
font-style: italic;
color: #6c757d;
margin-bottom: 1rem;
text-align: left;
padding-left: 1rem;
}
/* M8.7 §3.4 — WCAG 2.5.5 click-target minimum (44x44px). Text buttons
already exceed via padding; this enforces icon-only / .btn-sm buttons. */
.btn {
min-height: 44px;
}
.btn-sm {
min-height: 44px;
min-width: 44px;
}
/* M8.7 §3.7 — Connect-with-Partners category cards. Selected and
already-referred share one visual: green tint + green border + check.
Disambiguation is via tooltip + cursor on already-referred cards. */
.category-bucket {
border: 2px solid transparent;
transition: all .2s;
user-select: none;
}
.category-bucket.selectable {
cursor: pointer;
}
.category-bucket.already-referred {
cursor: not-allowed;
}
.category-bucket.selected,
.category-bucket.already-referred {
background-color: #d4edda;
border-color: #28a745;
}
.category-bucket .bi-check-circle-fill {
opacity: 0;
transition: opacity .2s;
}
.category-bucket.selected .bi-check-circle-fill,
.category-bucket.already-referred .bi-check-circle-fill {
opacity: 1;
}
.form-legend .legend-ast {
color: red;
font-weight: bold;
font-style: normal;
}
/* Punch list #5 — Accept / Decline buttons for referral status transitions.
Two variants:
- .btn-soft-accept / .btn-soft-decline : low-visual-weight outlined buttons
used in row Actions on the partner referral list. Tints reuse the site's
existing soft palette (matches the category-bucket and validation summary
backgrounds in this same stylesheet) so they don't feel imported.
- .btn-accept / .btn-decline : solid variants used on ViewReferral where
the action is focused and visual prominence is appropriate. */
/* Wave 6 #1 — borders bumped from 1px to 2px and darkened to match the
Option D outlined-button treatment, so light-filled buttons read with
the same border weight as the outlined-with-tint buttons elsewhere. */
.btn-soft-accept {
background-color: #d4edda;
color: #155724;
border: 2px solid #146c43;
}
.btn-soft-accept:hover,
.btn-soft-accept:focus {
background-color: #c3e6cb;
color: #0e3d18;
border-color: #146c43;
}
.btn-soft-decline {
background-color: #fde2e2;
color: #842029;
border: 2px solid #b02a37;
}
.btn-soft-decline:hover,
.btn-soft-decline:focus {
background-color: #f8d0d0;
color: #5c161c;
border-color: #b02a37;
}
.btn-accept {
background-color: #1e8449;
color: #ffffff;
border: none;
}
.btn-accept:hover,
.btn-accept:focus {
background-color: #176437;
color: #ffffff;
}
.btn-decline {
background-color: #b14040;
color: #ffffff;
border: none;
}
.btn-decline:hover,
.btn-decline:focus {
background-color: #8b3030;
color: #ffffff;
}
/* Ensure date picker icons are visible */
.datetimepicker-input {
position: relative;
cursor: pointer; /* Indicate the input is clickable */
}
/* Punch list #6 — Tempus Dominus picker styling.
Inputs wired via [data-tempus-init] sit inside Bootstrap .input-group with a
calendar-icon toggle on the right. The whole input is readonly + clickable
so users can't type a malformed value; allowInputToggle opens the popup on
any click. Visual goals: distinguish the input from the page background
(border + shadow on focus) and give the popup a card-style elevation. */
.input-group[data-tempus-init] {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
border-radius: 8px;
}
.input-group[data-tempus-init] > .form-control[readonly] {
background-color: #ffffff;
cursor: pointer;
}
.input-group[data-tempus-init] > .input-group-text {
background-color: #f1f5f9;
border-color: #d1d5db;
color: #1e3a8a;
cursor: pointer;
}
.input-group[data-tempus-init]:focus-within {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
/* Tempus Dominus popup — site-palette overrides. The library ships with a
neutral default; these rules pull the popup into the site's blue palette
and give it a card-like float over the form background. */
.tempus-dominus-widget {
border: 1px solid #d1d5db;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(30, 58, 138, 0.18);
background-color: #ffffff;
font-family: 'Poppins', sans-serif;
}
/* Pin the picker popup directly under its input. We can't beat Popper by
setting inline styles in JS — Popper writes `element.style.top = ...`
every time `updatePopup()` runs, which clears any !important flag we set
on the same inline property. CSS !important rules DO beat inline styles
without !important, so we lock position/transform via a class and pass
the actual coordinates through CSS custom properties (Popper has no
reason to touch --tempus-pin-*). The JS in tempus-init.js adds this
class on the show event and updates the variables on resize.
Note: NO `inset: auto !important` here. `inset` is a longhand shorthand;
declared after `top`/`left`, it would win the equal-specificity tiebreak
and reset both back to auto. The explicit `top/right/bottom/left` block
below already covers what inset would have cleared.
Position is `fixed` (viewport-relative) with viewport coordinates
(rect.bottom / rect.left, no scroll offset). The earlier `absolute` +
document-coords approach was meant to scroll natively with the page, but
in practice the popup detached from its input on scroll. `fixed` + an
explicit scroll/resize re-pin in tempus-init.js tracks the field reliably
regardless of which ancestor the widget is parented to. */
.tempus-dominus-widget.tempus-pinned {
position: fixed !important;
top: var(--tempus-pin-top, 0) !important;
left: var(--tempus-pin-left, 0) !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
}
.tempus-dominus-widget .picker-switch {
color: #1e3a8a;
font-weight: 600;
}
.tempus-dominus-widget .calendar-header,
.tempus-dominus-widget .dow {
color: #4b5563;
}
.tempus-dominus-widget .day,
.tempus-dominus-widget .hour,
.tempus-dominus-widget .minute,
.tempus-dominus-widget .second {
border-radius: 6px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.tempus-dominus-widget .day:hover,
.tempus-dominus-widget .hour:hover,
.tempus-dominus-widget .minute:hover,
.tempus-dominus-widget .second:hover {
background-color: #e0f2fe;
color: #1e3a8a;
}
.tempus-dominus-widget .day.today {
border: 1px solid #3b82f6;
color: #1e3a8a;
font-weight: 600;
}
.tempus-dominus-widget .day.active,
.tempus-dominus-widget .hour.active,
.tempus-dominus-widget .minute.active,
.tempus-dominus-widget .second.active {
background-color: #3b82f6;
color: #ffffff;
}
.tempus-dominus-widget .day.active:hover,
.tempus-dominus-widget .hour.active:hover,
.tempus-dominus-widget .minute.active:hover,
.tempus-dominus-widget .second.active:hover {
background-color: #1e40af;
color: #ffffff;
}
.tempus-dominus-widget .day.old,
.tempus-dominus-widget .day.new {
color: #cbd5e1;
}
.tempus-dominus-widget .day.disabled,
.tempus-dominus-widget .hour.disabled,
.tempus-dominus-widget .minute.disabled {
color: #cbd5e1;
cursor: not-allowed;
}
.tempus-dominus-widget .previous,
.tempus-dominus-widget .next {
color: #1e3a8a;
}
.tempus-dominus-widget .toolbar a {
color: #3b82f6;
}
.tempus-dominus-widget .toolbar a:hover {
color: #1e40af;
}
/* Event category chips (punch list #7). Replaces the prior bg-info badge that
was hard to read at small sizes. Each top-level Service Type gets its own
muted palette so hosts can scan categories at a glance; subtopic chips on
the View page inherit the parent's color. Unknown / future top-level types
fall back to .cat-chip-default. Pale fills + dark text keep WCAG AA contrast
in the standard rendering. */
.cat-chip {
display: inline-block;
padding: 0.25em 0.6em;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.2;
border: 1px solid transparent;
white-space: nowrap;
}
.cat-chip-legal {
background-color: #f3e8ff;
color: #6b21a8;
border-color: #d8b4fe;
}
.cat-chip-accounting {
background-color: #dcfce7;
color: #166534;
border-color: #86efac;
}
.cat-chip-financing {
background-color: #fef3c7;
color: #92400e;
border-color: #fcd34d;
}
.cat-chip-other {
background-color: #f1f5f9;
color: #475569;
border-color: #cbd5e1;
}
.cat-chip-default {
background-color: #e0f2fe;
color: #075985;
border-color: #7dd3fc;
}
/* SpinOff modal "View" button — explicit flex centering so the label text
sits in the middle of the 44px-min btn-sm WCAG target box. Without this,
inline-block centering can read slightly off when the surrounding label
wraps to two lines. */
.modal-view-link.btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Optional: Style readonly input to avoid confusion */
.datetimepicker-input[readonly] {
background-color: #f8f9fa; /* Light gray to indicate readonly */
}
/* ---------------------------------------------------------------------------
Dashboard layout (M8.9 — client style D, partner style A).
Goals:
- Tiles render in a responsive 2-column grid on >= md breakpoints so the
dashboard doesn't read as a long stack of full-width tables (which was
the user's main complaint vs. the regular list pages).
- Quick Actions tiles on the client dashboard restore the original large
icon + description + button shape (`.quick-action-tile`) and sit in a
hero band directly under the welcome greeting.
- Stat cards on the partner dashboard surface the three at-a-glance
counts (pending / open / upcoming) before any list data.
- Upcoming Events tab panes get an inner max-height so the tile can
house many events without pushing the rest of the dashboard offscreen.
--------------------------------------------------------------------------- */
.dashboard-hero h1 {
color: #1e3a8a;
font-weight: 700;
}
/* Responsive 2-column tile grid. Stacks on mobile, side-by-side from md up
so tablet portrait gets a denser layout than phone. */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.dashboard-grid.dashboard-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.dashboard-grid > .dashboard-tile {
/* override the default mb-4 inside the grid — the gap already spaces them */
margin-bottom: 0 !important;
}
/* Tile shared shell — quieter shadow + light border so they don't all feel
like Bootstrap's default heavy cards. */
.dashboard-tile {
border: 1px solid #e5e7eb;
border-radius: 12px;
}
.dashboard-tile .card-body { padding: 1.25rem; }
/* Dashboard tile titles (Pending Referrals, Open Referrals, Upcoming Events).
Larger and more distinctive than Bootstrap's default h5 — matches the
`section-header` font weight + color we use elsewhere on the site, but
WITHOUT the underline border (the card already has a border, so the
underline would fight it visually). Punch list #15. */
.dashboard-tile-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e3a8a;
margin-bottom: 1rem;
}
/* Upcoming Events scrollable panes. The card's tabs stay fixed; only the
list content scrolls so the user can browse without the tile ballooning. */
.upcoming-pane {
max-height: 340px;
overflow-y: auto;
}
/* ------- Stat cards (partner dashboard) ------- */
.dashboard-stats {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
@media (min-width: 576px) {
.dashboard-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.stat-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
border-left: 4px solid var(--stat-accent, #1e3a8a);
/* Stat cards are wrappers — strip default link styling so the
interior text doesn't render in browser-blue underline. */
text-decoration: none;
color: inherit;
transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(30, 58, 138, 0.08);
color: inherit;
text-decoration: none;
}
.stat-card .stat-icon {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: var(--stat-icon-bg, #eff6ff);
color: var(--stat-accent, #1e3a8a);
font-size: 1.4rem;
}
.stat-card .stat-number {
font-size: 1.75rem;
font-weight: 700;
color: #1e3a8a;
line-height: 1;
}
.stat-card .stat-label {
font-size: .85rem;
color: #6b7280;
margin-top: .15rem;
}
/* Stat accent variants — used inline via the style="" attribute on .stat-card. */
.stat-pending { --stat-accent: #d97706; --stat-icon-bg: #fef3c7; }
.stat-open { --stat-accent: #15803d; --stat-icon-bg: #dcfce7; }
.stat-upcoming { --stat-accent: #1d4ed8; --stat-icon-bg: #dbeafe; }
/* ------- Quick action hero tiles (client dashboard) ------- */
.quick-actions {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
@media (min-width: 576px) {
.quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.quick-action-tile {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 1.75rem 1.5rem;
text-align: center;
transition: transform .2s ease, box-shadow .2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
/* Tile is an — whole card clickable. Strip default link styling. */
text-decoration: none;
color: inherit;
display: block;
}
.quick-action-tile:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(30, 58, 138, 0.12);
text-decoration: none;
color: inherit;
}
.quick-action-tile .qa-icon {
font-size: 2.5rem;
color: #1d4ed8;
margin-bottom: .5rem;
}
.quick-action-tile h3 {
font-size: 1.25rem;
font-weight: 700;
color: #1e3a8a;
margin-bottom: .5rem;
}
.quick-action-tile p {
color: #6b7280;
margin-bottom: 1rem;
}
/* Partner Pending dashboard tile reuses .btn-soft-accept / .btn-soft-decline
defined further up (punch list #5) — no new variants needed. */
/* ---------------------------------------------------------------------------
M8.14 — mobile responsiveness pass.
--------------------------------------------------------------------------- */
/* Card-row layout used by _UpcomingEventsList below md. One vertical card
per event; tap anywhere on the card to open. Drops the table's column
density in favor of legible single-column rows that fit at 375px. */
.event-card-list { display: flex; flex-direction: column; gap: 0.75rem; }
.event-card {
display: block;
padding: 0.85rem 1rem;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
color: inherit;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.event-card:hover,
.event-card:focus {
border-color: #93c5fd;
box-shadow: 0 4px 10px rgba(30, 58, 138, 0.10);
color: inherit;
text-decoration: none;
}
.event-card .event-card-title {
font-size: 1rem;
font-weight: 700;
color: #0b1d4d;
margin-bottom: 0.2rem;
line-height: 1.3;
}
.event-card .event-card-meta {
font-size: 0.825rem;
color: #64748b;
line-height: 1.4;
}
.event-card .event-card-chips {
margin-top: 0.5rem;
}
/* Whole-row clickable tables (M8.14). Rows with [data-href] become single
click targets. JS in site.js handles the actual navigation; CSS here
provides the affordance cues — pointer cursor + hover background so the
user can see what's clickable, regardless of viewport width. */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background-color: rgba(30, 58, 138, 0.04); }
tr[data-href]:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: -2px;
}
/* Below sm, the icon-only Accept/Decline buttons on referral lists get a
tighter padding so two of them fit inside the Action column without
pushing a horizontal scrollbar onto the surrounding card. Bootstrap's
.btn-sm padding is .25rem .5rem — for an icon-only target that's wider
than it needs to be. Trim to .25rem .4rem. M8.14. */
@media (max-width: 575.98px) {
.btn-soft-accept.btn-sm,
.btn-soft-decline.btn-sm {
padding: 0.25rem 0.4rem;
}
.btn-soft-accept.btn-sm .bi,
.btn-soft-decline.btn-sm .bi {
font-size: 0.95rem;
vertical-align: -1px;
}
}
/* Activity Log scroll cap (M8.14). Holds ~6 rows visible at the default
row height of the table-sm rows used inside the partial; the rest
scrolls inside the card so the surrounding page can't extend
indefinitely with a long history. Applied at every viewport width. */
.activity-log-scroll {
max-height: 380px;
overflow-y: auto;
}
/* Wave 6 #3 — dashboard tile internal scroll cap. Wraps a table inside a
dashboard-tile so the tile keeps a compact, predictable height even
with hundreds of rows; the rest scroll inside the wrapper. Same
pattern as .upcoming-pane and .activity-log-scroll. Currently used
on partner-dashboard Pending Referrals + Open Referrals tiles. Apply
to any new long-list tile by adding this class to its .table-responsive. */
.dashboard-tile-scroll {
max-height: 340px;
overflow-y: auto;
}
/* Wave 6 #1 — outlined-button restyle (the "Option D" treatment chosen
from the /Event/MyEvents?preview=buttons preview). Filled buttons
(btn-primary, btn-secondary, etc.) are NOT touched — only outlined.
The change:
- Resting state gets a light color fill so the button has visible
body instead of reading as text-only
- 2px darker border replaces Bootstrap's 1px default
- Hover darkens the background fill; text COLOR stays put
(Bootstrap's default flips text to white on hover, which the
supervisor found hard to read during the transition)
Three color buckets in the codebase: primary (blue, ~28 uses, View /
Edit / general actions), secondary (red per supervisor — used on
Cancel / Close / Back dismissals, ~37 uses), success (green, ~4 uses,
"Visit" external resource links on Self Service).
Specificity is single-class so it loses to Bootstrap defaults at the
spec level — but site.css loads AFTER Bootstrap, so source order
wins the tie. Don't move site.css before bootstrap.css. */
/* btn-outline-primary — blue (View / Edit / general non-dismiss actions) */
.btn-outline-primary {
border-width: 2px;
border-color: #1e3a8a;
color: #1e3a8a;
background-color: rgba(13, 110, 253, .1);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
background-color: rgba(13, 110, 253, .25);
color: #1e3a8a;
border-color: #1e3a8a;
box-shadow: none;
}
/* btn-outline-secondary — gray (low-emphasis non-dismissal buttons:
View all / Edit / Back / Close / Resend / Download / etc.).
Cancel-text buttons specifically use btn-danger instead (solid red
filled, applied per-button in the views) since "Cancel" warrants the
stronger destructive signal — the rest of the gray buttons are
neutral navigation / dismissal verbs that don't need red urgency. */
.btn-outline-secondary {
border-width: 2px;
border-color: #495057;
color: #495057;
background-color: rgba(108, 117, 125, .12);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible,
.btn-outline-secondary:active,
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary {
background-color: rgba(108, 117, 125, .25);
color: #495057;
border-color: #495057;
box-shadow: none;
}
/* btn-outline-success — green ("Visit" external resource links on Self Service) */
.btn-outline-success {
border-width: 2px;
border-color: #146c43;
color: #146c43;
background-color: rgba(25, 135, 84, .1);
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:focus-visible,
.btn-outline-success:active,
.btn-check:checked + .btn-outline-success,
.btn-check:active + .btn-outline-success {
background-color: rgba(25, 135, 84, .25);
color: #146c43;
border-color: #146c43;
box-shadow: none;
}
/* Language toggle (EN | ES) — pill-style segmented control in the header.
The whole control is a rounded translucent "track"; each segment is a
borderless button. The active language renders as a solid white pill with
dark text; the inactive segment is light text on the track. Two child