/* ============================================================
MBA Custom Page Components (mbc-components.css)
Single source of truth for the custom landing / store pages
(LEAD, Leadership Communication Coaching, DVW store pages, etc.)
HOW TO USE
1. Upload this file to DNN (e.g. /Portals/0/Documents/mbc-components.css).
2. Reference it once per custom page, at the top of the module:
... your sections ...
Everything is scoped to .mbc, so nothing here touches the rest
of the site. The only global line is the font @import below,
which loads fonts but restyles nothing.
ANCHOR: the LEAD page is the house frame. 1180px width, 48px
gutters (22px mobile), 50px icon tiles, everything squared
(border-radius 0). Section labels on white use the darker
#035188; the hero eyebrow on navy uses the lighter #60a5c2
(dark label on light, light label on dark).
INTENTIONALLY NOT INCLUDED: global resets (* / body / a /
::selection / html) and the ClearVantage events-feed overrides
(#eventdate ...). Those retarget shared or site-wide markup and
would change pages beyond your custom ones. Add those per-page
only where you want them.
PREFIX: "mbc" = Mass Bankers Components. If it ever collides with
a skin class, it is a single find-and-replace to rename.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@400;500;600;700&display=swap');
/* ---- Wrapper + design tokens (scoped, nothing global) ---- */
.mbc {
--mbc-navy: #10133f;
--mbc-blue: #035188;
--mbc-blue-light: #60a5c2;
--mbc-panel: #dbe8f1;
--mbc-tint: #f2f7fb;
--mbc-tint-2: #f7fafc;
--mbc-body: #10133f;
--mbc-desc: #444764;
--mbc-hero-sub: #c8d1dc;
--mbc-footer-text: #103a66;
--mbc-line: rgba(16, 19, 63, 0.12);
--mbc-font-body: "Work Sans", sans-serif;
--mbc-font-head: "PT Serif", serif;
--mbc-maxw: 1180px;
--mbc-gutter: 48px;
--mbc-radius: 14px;
font-family: var(--mbc-font-body);
color: var(--mbc-body);
max-width: var(--mbc-maxw);
margin: 0 auto;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.mbc, .mbc *, .mbc *::before, .mbc *::after { box-sizing: border-box; }
.mbc :where(h1, h2, h3, h4, p) { margin: 0; }
.mbc h1, .mbc h2, .mbc h3, .mbc h4 { font-family: var(--mbc-font-head); color: var(--mbc-navy); }
.mbc a { text-decoration: none; }
.mbc svg { display: block; }
/* ---- Buttons ---- */
.mbc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--mbc-font-body);
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.3px;
padding: 12px 24px;
border: none;
border-radius: 0;
background-color: var(--mbc-blue);
color: #fff;
cursor: pointer;
transition: all ease-in 200ms;
-webkit-transition: all ease-in 200ms;
}
.mbc-btn:hover { background-color: var(--mbc-blue-light); color: #fff; text-decoration: none; }
.mbc-btn svg { width: 15px; height: 15px; }
.mbc-btn-ghost {
background-color: transparent;
color: var(--mbc-blue);
border: 2px solid var(--mbc-blue);
padding: 10px 22px;
}
.mbc-btn-ghost:hover { background-color: var(--mbc-blue); color: #fff; }
/* full-width purchase button used inside cards */
.mbc-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
background: var(--mbc-blue);
color: #fff;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 13px 22px;
border-radius: 0;
transition: all ease-in 200ms;
-webkit-transition: all ease-in 200ms;
}
.mbc-cta:hover { background: var(--mbc-blue-light); color: #fff; }
.mbc-cta svg { width: 15px; height: 15px; }
/* ---- Hero banner (navy) ---- */
.mbc-hero { background: var(--mbc-navy); padding: 52px 48px; }
.mbc-eyebrow {
font-family: var(--mbc-font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--mbc-blue-light);
margin: 0 0 8px;
}
.mbc-htitle {
font-family: var(--mbc-font-head);
font-weight: 700;
font-size: 44px;
line-height: 1.2;
color: #fff;
margin: 0;
}
.mbc-rule { width: 64px; height: 4px; background: var(--mbc-blue-light); margin: 14px 0 20px; }
.mbc-hsub { font-size: 18px; line-height: 1.62; color: var(--mbc-hero-sub); margin: 0; max-width: 62ch; }
/* ---- Section shell + section head (chip + rule) ---- */
.mbc-section { max-width: var(--mbc-maxw); margin: 0 auto; padding: 44px 48px; }
.mbc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.mbc-chip {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mbc-blue);
white-space: nowrap;
}
.mbc-headline { flex: 1; height: 1px; background: var(--mbc-line); }
.mbc .mbc-title {
font-family: var(--mbc-font-head);
font-size: 40px;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--mbc-navy);
margin: 0 0 20px;
}
.mbc .mbc-p { font-size: 18px; line-height: 1.68; color: var(--mbc-body); margin: 0 0 18px; }
.mbc .mbc-p:last-child { margin-bottom: 0; }
/* ---- Cards (3-up grid + generic card + icon tile) ---- */
.mbc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mbc-cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mbc-card {
border: 1px solid var(--mbc-panel);
background: #fff;
padding: 34px 30px 32px;
transition: border-color ease-in 200ms;
-webkit-transition: border-color ease-in 200ms;
}
.mbc-card:hover { border-color: var(--mbc-blue-light); }
.mbc-card h3 { font-family: var(--mbc-font-head); font-size: 22px; margin: 0 0 10px; }
.mbc-card p { font-size: 15px; line-height: 1.62; color: var(--mbc-desc); margin: 0; }
.mbc-ico {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: var(--mbc-panel);
color: var(--mbc-blue);
border-radius: 0;
margin-bottom: 20px;
}
.mbc-ico svg { width: 26px; height: 26px; }
/* ---- Checklist (squared check tile + text, LEAD style) ---- */
.mbc-checks { display: grid; grid-template-columns: 1fr; gap: 14px; }
.mbc-check {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 16px;
line-height: 1.5;
color: var(--mbc-body);
}
.mbc-check-ic {
flex: 0 0 26px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: var(--mbc-panel);
color: var(--mbc-blue);
margin-top: 1px;
}
.mbc-check-ic svg { width: 15px; height: 15px; }
/* ---- Price display (store cards) ---- */
.mbc-price { display: flex; flex-direction: column; line-height: 1.12; }
.mbc-price b { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; color: var(--mbc-navy); }
.mbc-price span { font-size: 12px; font-weight: 700; color: var(--mbc-blue-light); margin-top: 2px; }
.mbc-price s { font-size: 13px; color: #9aa6b6; margin-top: 7px; }
/* ---- Dark panel (navy, e.g. enterprise / get-involved) ---- */
.mbc-panel-dark { background: var(--mbc-navy); color: #fff; padding: 28px 32px; }
.mbc-panel-dark h3, .mbc-panel-dark h4 { color: #fff; }
/* ---- Rounded variants (opt-in; the system is squared by default) ----
.mbc-round rounds any element's corners in select areas.
.mbc-panel is a light tinted, rounded container (the old DVW panel). */
.mbc-round { border-radius: var(--mbc-radius); }
.mbc-panel { background: var(--mbc-tint); border-radius: var(--mbc-radius); padding: 30px 32px; }
/* ---- Footer ---- */
.mbc-footer {
margin: 40px 48px 0;
padding-top: 34px;
border-top: 1px solid var(--mbc-line);
font-size: 14.5px;
line-height: 1.6;
color: var(--mbc-desc);
}
.mbc-footer strong { color: var(--mbc-navy); }
.mbc-footer a { color: var(--mbc-blue); font-weight: 700; text-decoration: none; }
.mbc-footer a:hover { text-decoration: underline; }
/* ---- DNN skin defense (scoped to .mbc only) ---- */
.mbc h1, .mbc h2, .mbc h3, .mbc h4 { line-height: 1.2 !important; }
.mbc p:not(.mbc-footer), .mbc h1, .mbc h2, .mbc h3, .mbc h4 { margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; }
.mbc ul { margin: 0 !important; }
.mbc li { margin-bottom: 0 !important; }
.mbc a:link, .mbc a:visited, .mbc a:active { color: inherit; }
.mbc .mbc-htitle { color: #fff !important; }
.mbc .mbc-eyebrow { color: var(--mbc-blue-light) !important; }
.mbc .mbc-hsub { color: var(--mbc-hero-sub) !important; }
.mbc .mbc-chip { color: var(--mbc-blue) !important; }
.mbc .mbc-btn:link, .mbc .mbc-btn:visited, .mbc .mbc-btn:hover, .mbc .mbc-btn:focus { color: #fff !important; }
.mbc .mbc-cta:link, .mbc .mbc-cta:visited, .mbc .mbc-cta:hover, .mbc .mbc-cta:focus { color: #fff !important; }
.mbc .mbc-btn-ghost:link, .mbc .mbc-btn-ghost:visited { color: var(--mbc-blue) !important; }
.mbc .mbc-btn-ghost:hover, .mbc .mbc-btn-ghost:focus { color: #fff !important; }
.mbc .mbc-footer a:link, .mbc .mbc-footer a:visited { color: var(--mbc-blue) !important; }
/* ---- Responsive ---- */
@media (max-width: 991px) {
.mbc-cards { grid-template-columns: 1fr; }
.mbc-cards-2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
.mbc-hero { padding: 34px 22px; }
.mbc-htitle { font-size: 30px; }
.mbc-hsub { font-size: 16px; }
.mbc-section { padding: 32px 22px; }
.mbc-title { font-size: 26px; }
.mbc-footer { margin: 32px 22px 0; }
.mbc-panel { padding: 22px 18px; }
}