or ). */
#quick-access .quick-link > a,
#quick-access .quick-link > div {
position: absolute;
inset: 0;
}
/* If the wrapper IS in place (no external overlay target), the
element inside it -- where the click handler is bound -- must
fill it. */
#quick-access .quick-link > .b2upanel-body > div {
width: 100%;
height: 100%;
}
/* Box-form panels restate the tile's inner padding (an absolute
child ignores the parent's padding); legacy centred tiles keep
their padding-free layout. */
#quick-access.quick-access .quick-link > a,
#quick-access.quick-access .quick-link > div {
padding: 10px 12px;
}
#quick-access.quick-access .quick-link .nowrap {
white-space: normal;
}
#quick-access.quick-access .desktop .fa-3x {
font-size: 1.75em;
}
#quick-access.quick-access .quick-access-label {
position: absolute;
left: 12px;
right: 12px;
bottom: 10px;
margin: 0;
text-align: left;
font-size: 0.8rem;
line-height: 1.15;
}
}
/* ------------------------------------------------------------------
* Profile view (left dashboard panel) -- pull the membership card
* and the button stack up so they start at the card-body padding,
* level with the quick-links grid in the right panel. The card
* itself is untouched; only the space above it goes:
* - the print icon kept an in-flow line box (shifted down
* 1.25rem by style.css) above the card -- it becomes an overlay
* on the card's top-left corner instead;
* - the flip-card's 10pt top margin;
* - the button column's .pt-3 (!important utility).
* ------------------------------------------------------------------ */
#left-panel .profile .flip-card {
margin-top: 0;
}
#left-panel .profile .flip-card .print-card {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 3;
}
#left-panel .profile .card-body .col-md-5.pt-3 {
padding-top: 0 !important;
}
/* ------------------------------------------------------------------
* FAQ panel -- header keeps the standard navy/red section bar (its
* title returns to the uppercase display face); question rows get
* hairline dividers and a "+" that flips to a minus when expanded.
* ------------------------------------------------------------------ */
#faq-panel .profile-header .h4-like {
font-family: "Vanguard CF", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-size: 24px;
letter-spacing: 0.5px;
}
/*
* Tight rows: the template stacks .pt-4 on the text wrapper, .mt-3
* on every row and .mb-2 on every title (all !important utilities),
* and .h4-like keeps its 32px line-height at 17px type -- together
* ~40px of dead space per row. Row rhythm comes only from the row's
* own 12px padding against the hairline divider.
*/
#faq-panel .card-body {
padding: 8px 16px;
}
#faq-panel .card-body .mt-3 {
margin-top: 0 !important;
}
#faq-panel .card-body .h4-like {
border-bottom: 1px solid var(--nbs-divider-1);
padding: 12px 0;
margin-bottom: 0 !important;
line-height: 1.35;
}
/* Flex row so the "+" is vertically centred on the row instead of
riding the last wrapped text line. */
#faq-panel .card-body .h4-like a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
#faq-panel .card-body .h4-like a::after {
content: "+";
flex: 0 0 auto;
font-weight: 400;
font-size: 20px;
line-height: 1;
}
#faq-panel .card-body .h4-like a[aria-expanded="true"]::after {
content: "\2212";
}
/* Answer boxes are plain -- no navy card border inside the panel. */
#faq-panel .card-body .card {
border: 0;
}
/* ------------------------------------------------------------------
* Membership features (#memben-panel) -- navy/red section header
* bar, white feature cards (blue background art dropped; !important
* beats the inline background-image), and full-width label bars
* with a right arrow.
* ------------------------------------------------------------------ */
/*
* Align with the panels above: the section is inline-block +
* .receipt-three-blue 50px top margin, the .three-container insets
* everything 30px per side, and each column pads 40px 14px -- all
* of which made the header and cards narrower and pushed the whole
* section down. Full width, flush edges, tighter gap. The display
* change is guarded so the <=1024px `display:none` still hides the
* panel on mobile (media queries add no specificity).
*/
@media (min-width: 1025px) {
#memben-panel.desktop {
display: block;
}
}
#memben-panel {
margin: 24px 0 0;
}
#memben-panel .three-container {
padding: 0;
}
#memben-panel .three .column {
padding: 16px 0 0;
}
#memben-panel .three-title .title-container {
display: block;
width: 100%;
max-width: none;
background-color: var(--nbs-navy-900);
border-left: 8px solid var(--nbs-usal-red);
padding: 10px 20px;
text-align: left;
}
#memben-panel .three-title h2 {
color: var(--nbs-off-white);
font-family: "Vanguard CF", Helvetica, Arial, sans-serif;
font-size: 24px;
line-height: 32px;
letter-spacing: 0.5px;
margin: 0;
text-transform: uppercase;
text-align: left;
}
#memben-panel .three-title .divider {
display: none;
}
#memben-panel .column-container {
background-image: none !important;
background-color: #ffffff;
border: 1px solid var(--nbs-divider-1);
margin-top: 0;
height: 100%;
padding: 0;
}
/* position:static so the footer bar below anchors to the card
(.column-container is position:relative), not to this wrapper. */
#memben-panel .inner-container {
top: 0;
position: static;
}
/* Bottom padding reserves room for the absolutely positioned
footer bar. */
#memben-panel .column-content {
padding: 0 16px 70px;
}
#memben-panel .column-content h3 {
color: var(--nbs-navy-900);
}
#memben-panel .column-content p {
color: var(--nbs-navy-900);
}
/*
* Label bar as a card footer: flush to the card's bottom and side
* edges, clear (off-white) at rest with the navy label and arrow;
* the .on-blue hover above fills it navy. The ID out-specifies the
* (0,3,0) `.three-blue .three-container .btn` red restyle.
*/
#memben-panel .btn.on-blue {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: none;
margin: 0;
padding: 14px 16px;
background-color: var(--nbs-off-white);
border: 0;
border-top: 1px solid var(--nbs-divider-1);
color: var(--nbs-navy-900);
text-align: left;
}
#memben-panel .btn.on-blue::after {
content: "\2192";
}
/* The footer-bar rule above is ID-scoped, so its hover/active
states must be too -- the global class-level ones lose to it. */
#memben-panel .btn.on-blue:hover,
#memben-panel .btn.on-blue:focus {
background-color: var(--nbs-navy-900);
border-top-color: var(--nbs-navy-900);
color: #ffffff;
}
#memben-panel .btn.on-blue:active {
background-color: var(--nbs-gold-800);
border-top-color: var(--nbs-navy-900);
color: var(--nbs-navy-900);
}
/* ------------------------------------------------------------------
* Membership card -- excluded from the re-theme by request; restore
* the old-brand values the global swaps above would have touched.
* ------------------------------------------------------------------ */
.flip-card :is(h1, h2, h3, h4, h5, h6,
.h1-like, .h2-like, .h3-like, .h4-like, .h5-like, .h6-like) {
color: #00205B;
}
.flip-card .pill {
background-color: #00205B;
}
elements under
* headings across the HTML. divider-red.png is the only divider
* asset in the codebase, so hiding the element globally is safe.
*/
img.divider {
display: none;
}
/* ------------------------------------------------------------------
* Buttons -- white with thin border and navy label; hover = navy
* border + red line along the bottom; active = gold.
* Mirrors style.css lines 403-521; typography (Vanguard CF,
* uppercase) is unchanged there.
* ------------------------------------------------------------------ */
.btn,
button {
border: 1px solid var(--nbs-navy-400);
border-radius: 0;
background-color: #ffffff;
color: var(--nbs-navy-900);
text-decoration-color: #ffffff;
-webkit-text-decoration-color: #ffffff;
}
/* style.css forces white text on visited; restore navy at rest. */
.btn:visited,
button:visited {
color: var(--nbs-navy-900);
}
/* Hover/focus: navy fill, white label, red line along the bottom. */
.btn:hover,
.btn:focus,
button:hover,
button:focus {
background-color: var(--nbs-navy-900);
border-color: var(--nbs-navy-900);
color: #ffffff;
text-decoration-color: var(--nbs-navy-900);
-webkit-text-decoration-color: var(--nbs-navy-900);
box-shadow: inset 0 -3px 0 var(--nbs-usal-red);
}
.btn:active,
button:active {
background-color: var(--nbs-gold-800);
border-color: var(--nbs-navy-900);
color: var(--nbs-navy-900);
box-shadow: none;
}
.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
color: var(--nbs-navy-900);
background-color: var(--nbs-gold-800);
border-color: var(--nbs-navy-900);
box-shadow: none;
}
/* List/link bars (e.g. the MAGAZINE bar): navy fill on hover,
per the Mag Access component in the design. */
.btn.on-blue:hover,
.btn.on-blue:focus,
button.on-blue:hover,
button.on-blue:focus {
background-color: var(--nbs-navy-900);
border-color: var(--nbs-navy-900);
text-decoration-color: var(--nbs-navy-900);
-webkit-text-decoration-color: var(--nbs-navy-900);
color: #ffffff;
box-shadow: none;
}
/* Gold click; needed at (0,3,0) because the on-blue hover above
outranks the generic (0,2,0) .btn:active gold. */
.btn.on-blue:active,
button.on-blue:active {
background-color: var(--nbs-gold-800);
border-color: var(--nbs-navy-900);
color: var(--nbs-navy-900);
box-shadow: none;
}
.btn.on-red,
button.on-red {
color: var(--nbs-navy-900);
}
.btn.on-red:hover,
.btn.on-red:focus,
button.on-red:hover,
button.on-red:focus {
background-color: var(--nbs-navy-900);
border-color: var(--nbs-navy-900);
text-decoration-color: var(--nbs-navy-900);
-webkit-text-decoration-color: var(--nbs-navy-900);
color: #ffffff;
box-shadow: none;
}
/* ------------------------------------------------------------------
* Cards and section/card headers -- flat navy bar with the red
* vertical bar on the left edge and left-aligned white text.
* ------------------------------------------------------------------ */
.card {
border-color: var(--nbs-navy-900);
border-radius: 0;
}
.card-img-top {
border-radius: 0;
}
.card-header,
.profile-header {
background-color: var(--nbs-navy-900);
background-image: none;
color: var(--nbs-off-white);
border-left: 8px solid var(--nbs-usal-red);
border-radius: 0;
text-align: left;
}
/*
* Slim bar: the old art header was ~95px tall via stacked paddings
* (25px header padding + 5px .h4-like top + 48px pb-5) and relied on
* the wrapper's .mb-n60 to pull the card body 20px up over it. The
* flat bar drops all of that: modest padding, no title padding, and
* no body overlap. !important is needed where the originals (.pb-5,
* .mb-n40/.mb-n20, .mb-n60) are !important utilities.
*/
.profile-header {
padding: 10px 20px;
}
.profile-header .h4-like {
padding-top: 0;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.profile-header-large {
background-image: none;
margin-bottom: 0;
}
/* Wrappers use mb-n60/-n40/-n30/-n20 variants of the same overlap
idiom (e.g. the /admin/ search-history card uses mb-n40) -- all
are neutralised when they hold a header bar. */
.card-img-top.mb-n60:has(.profile-header),
.card-img-top.mb-n40:has(.profile-header),
.card-img-top.mb-n30:has(.profile-header),
.card-img-top.mb-n20:has(.profile-header) {
margin-bottom: 0 !important;
}
.card-header :is(h1, h2, h3, h4, h5, h6,
.h1-like, .h2-like, .h3-like, .h4-like, .h5-like, .h6-like),
.profile-header :is(h1, h2, h3, h4, h5, h6,
.h1-like, .h2-like, .h3-like, .h4-like, .h5-like, .h6-like) {
color: var(--nbs-off-white);
}
/* Header titles are left aligned; !important beats bootstrap's
.text-center on the same element. */
.profile-header .h4-like {
text-align: left !important;
}
/*
* Quick-access account logo (/account/quick_access). The .mt-n15 +
* .mb-3 offsets on #quick_access were tuned to hang the 64px logo
* off the top of the old ~95px art banner. Against the slim flat bar
* the same pull shoves the logo out the top of the bar, so both
* offsets are dropped and the logo is centred against the title.
* !important beats bootstrap's own .mt-n15/.mb-3 utilities.
*/
.profile-header .row:has(#quick_access) {
align-items: center;
}
.profile-header #quick_access {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* The 64px logo was sized for the old tall banner and would leave
this bar ~30px taller than every text-only header. Match it to the
.h4-like 32px line-height so the bar height is identical. */
.profile-header #quick_access .account_image {
width: 32px;
}
/* Shop product entries use .card-header as an image well
(min-height 350px in style.css) -- keep those neutral. */
.product-entry .card-header {
background-color: transparent;
color: inherit;
border-left: 0;
}
.profile-alert {
background-color: var(--nbs-usal-red);
}
/* ------------------------------------------------------------------
* Grey boxes (info panels) and pills
* ------------------------------------------------------------------ */
.grey-box {
background-color: var(--nbs-off-white);
}
.pill {
background-color: var(--nbs-navy-900);
}
/* ------------------------------------------------------------------
* Quick-link tiles (#quick-access) -- white square tiles, hairline
* border, icon top-left / label bottom-left. Hover: navy fill with
* a red line along the bottom. Active (click): gold.
* The tiles carry bootstrap `.border` / `.rounded` utilities, which
* are !important, so radius and border-color need !important too.
* ------------------------------------------------------------------ */
#quick-access .btn.btn-square-sm,
#quick-access .btn.btn-square-md,
#quick-access .btn.btn-square-lg {
background: #ffffff;
color: var(--nbs-navy-900);
}
/*
* Box-form tile styling applies to the ".quick-access" panels: the
* /account/ dashboard panel (no "single-row") and the compact row
* panels at the top of /admin/, /certs/ and lms attendees (with
* "single-row"). Bare #quick-access divs (event_select, user_ops,
* user_add, marketing, roster, pub) lack the class and keep their
* original form, picking up only the colour/hover re-theme.
*/
#quick-access.quick-access .btn.btn-square-sm,
#quick-access.quick-access .btn.btn-square-md,
#quick-access.quick-access .btn.btn-square-lg {
text-align: left;
padding: 10px 12px;
}
#quick-access .quick-link {
border-radius: 0 !important;
border-color: var(--nbs-divider-1) !important;
}
#quick-access a {
color: var(--nbs-navy-900);
}
#quick-access .btn.invert-color {
background: var(--nbs-navy-900);
}
#quick-access .btn.invert-color a .quick-access-label {
color: var(--nbs-navy-900);
}
#quick-access .btn.btn-square-sm:hover,
#quick-access .btn.btn-square-md:hover,
#quick-access .btn.btn-square-lg:hover {
background: var(--nbs-navy-900);
color: var(--nbs-off-white);
box-shadow: inset 0 -4px 0 var(--nbs-usal-red);
}
#quick-access .quick-link:hover {
border-color: var(--nbs-navy-900) !important;
}
#quick-access .quick-link:hover a {
color: var(--nbs-off-white);
}
#quick-access .btn.btn-square-sm:active,
#quick-access .btn.btn-square-md:active,
#quick-access .btn.btn-square-lg:active {
background: var(--nbs-gold-800);
color: var(--nbs-navy-900);
box-shadow: none;
}
#quick-access .quick-link:active a {
color: var(--nbs-navy-900);
}
/*
* Desktop-only tile internals: the icon/label stack becomes a full
* height column with the label pinned to the bottom-left. Scoped to
* min-width 1025px because style.css swaps to the .mobile spans at
* 1024px and below, and the mobile layout stays untouched.
*/
@media (min-width: 1025px) {
/* /account/ dashboard panel only: four fluid columns fill the
card width; tiles grow square with the column. */
#quick-access.quick-access:not(.single-row) .card-body {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
#quick-access.quick-access:not(.single-row) .btn-square-sm,
#quick-access.quick-access:not(.single-row) .btn-square-md,
#quick-access.quick-access:not(.single-row) .btn-square-lg {
width: auto !important;
height: auto !important;
min-height: 120px;
aspect-ratio: 1 / 1;
}
/* single-row panels (/admin/, /certs/, lms attendees): same box
tiles at a fixed compact 120px, all on one row (wrapping only
if the viewport cannot fit them). */
#quick-access.quick-access.single-row .card-body {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
#quick-access.quick-access.single-row .btn-square-sm,
#quick-access.quick-access.single-row .btn-square-md,
#quick-access.quick-access.single-row .btn-square-lg {
width: 120px !important;
height: 120px !important;
flex: 0 0 auto;
}
/* grid/flex gap replaces the old 3rem .mb-5-desktop row spacing
(!important mirrors the original utility). */
#quick-access.quick-access .mb-5-desktop {
margin-bottom: 0 !important;
}
/*
* Bottom-pinned labels: the depth between the tile and the label
* varies (plain anchors vs b2uPanel-initialised divs), which made
* flex/percentage chains land the label at different heights per
* tile. Absolute positioning against the tile is immune to the
* inner structure: the icon stays in normal flow at the top-left
* and every label sits at the same bottom-left spot.
*/
#quick-access .quick-link {
position: relative;
}
/* Full-tile click target -- ALL quick-link panels, including the
bare #quick-access ones (events, user ops, marketing, roster):
the link / b2uPanel element only wrapped the icon+label, so
clicks on the empty tile area showed the :active state (which
bubbles to the tile) without actually navigating. Safe here
because every desktop tile has a fixed or aspect-ratio height;
kept out of mobile, where tile height comes from content flow
and an absolute child would collapse it. */
/* The clickable element cannot be matched by class: b2uPanel
REMOVES the "b2upanel" class from its element on init
(b2u.panel.js:558), and when data-overlay targets another
panel the b2upanel-body wrapper wraps that destination, not
the tile. So the runtime tile is `.quick-link > div#...` with
no stable class -- match any direct child (the templates only
ever have the one or