/* ===================================================================== MBA Western PA — Homepage (2026 refresh) Implemented from the Claude Design handoff bundle "MBA Design System". Static recreation of the events-led homepage prototype (the prototype's medium was React/Babel; this is the production-appropriate static build). Tokens + scale come from the bundle's colors_and_type.css, verbatim. Section/pixel values match the prototype (1320 container, 120px section padding, 1024/640 breakpoints). ANNIVERSARY (140th) TOGGLE — single switch: The carries class "anniv-on". Anniversary pieces (hero 1886–2026 lockup, footer 140-seal, and the "since 1886" copy) are tagged .anniv / .no-anniv and shown/hidden by that one class. To turn the 140th content OFF pending client sign-off, remove "anniv-on" from the tag. That is the only edit required. (See .anniv rules at the bottom of this file.) ===================================================================== */ :root { /* ---- Brand (official primary palette) ---- */ --mba-orange: #FF6B00; --mba-orange-hover: #E06000; /* AA-safe hover fill for the dark-label primary button (5.04:1 with --text) */ --mba-orange-dark: #C25000; --mba-orange-darker: #A64500; --mba-blue: #3886C8; --mba-blue-deep: #2C6CA3; /* AA-safe brand blue for text on white (~5.5:1; plain #3886C8 is 3.88:1) */ --mba-blue-hover: #23537C; /* darker blue for the secondary-button hover fill; white label clears AA (~8:1) */ --black: #000000; /* ---- Grounds ---- */ --bg-dark: #0E1A2B; --bg-dark-2: #16263C; --bg: #FFFFFF; --bg-muted: #F2F3F5; --bg-muted-2: #E3E7EC; --bg-blue-tint: #F3F7FB; /* light blue tint used on the Join application band */ /* ---- Text ---- */ --text: #14161A; --text-muted: #5A626E; --text-slate: #41556B; /* muted slate-blue, dark-blue family, ~7.7:1 on white */ --text-on-dark: #FFFFFF; --text-on-dark-muted: #AEB7C4; /* ---- Lines ---- */ --border: #E4E7EB; --border-strong: #C7CDD5; /* ---- Special use only ---- */ --accent-green: #15824D; --accent-pink: #D45F7A; --accent-yellow: #FFC63B; /* ---- Type: Inter (Google Fonts), the locked web type ---- */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ---- Spacing scale (px) — 4,8,12,16,24,32,48,64,96,128 ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; /* ---- Shape ---- */ --radius-button: 8px; --radius-pill: 999px; --radius-card: 14px; /* ---- Elevation (use sparingly) ---- */ --shadow-soft: 0 8px 28px rgba(14, 26, 43, 0.10); /* ---- Layout ---- */ --container: 1320px; /* the homepage prototype uses a 1320 max width */ --gutter: 40px; } /* ===================================================================== Reset / base ===================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; scroll-behavior: smooth; } body { font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.65; } img { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, h4, p { margin: 0; } button { font: inherit; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } ::selection { background: rgba(56, 134, 200, .22); } :where(a, button, input):focus-visible { outline: 3px solid var(--mba-blue); outline-offset: 2px; border-radius: 6px; } .skip-link { position: absolute; left: 16px; top: -120px; z-index: 200; background: var(--text); color: #fff; padding: 10px 16px; border-radius: 6px; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ===================================================================== Type roles (from colors_and_type.css) ===================================================================== */ .mba-eyebrow { font-family: var(--font); font-size: .75rem; font-weight: 600; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin: 0; } .mba-eyebrow.on-dark { color: var(--text-on-dark-muted); } .mba-eyebrow .lc { text-transform: none; } /* keep a single connector word (e.g. "to") lowercase within an uppercase eyebrow */ .container { max-width: calc(var(--container) - 80px); margin: 0 auto; } /* Section base — generous vertical rhythm, 40px gutters */ .sec { padding: 120px 40px; } .sec--bg { background: var(--bg); } .sec--muted { background: var(--bg-muted); } .sec--dark { background: var(--bg-dark); color: var(--text-on-dark); } /* ===================================================================== Icons (inline SVG, Lucide-equivalent line set; inherit currentColor) ===================================================================== */ .ico { display: inline-flex; align-items: center; flex: none; } .ico[hidden] { display: none; } .ico svg { display: block; stroke: currentColor; fill: none; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; } /* ===================================================================== Buttons ===================================================================== */ .btn { font-family: var(--font); font-size: 1rem; font-weight: 600; line-height: 1; border-radius: var(--radius-button); padding: 14px 28px; border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .08s ease; } .btn:active { transform: scale(0.985); } /* Primary: bright brand orange with dark ink label = 6.34:1 (AA). Hover deepens the fill to its AA-safe limit (#E06000 = 5.04:1; #C25000/#A64500 would fail) on the same .2s ease as .btn--outline, plus a subtle scale-up (.08s, crisp) for presence. The click press (scale-down) is preserved; focus uses the shared ring. No box-shadow or glow anywhere. */ .btn--primary { background: var(--mba-orange); color: var(--text); } .btn--primary:hover { background: var(--mba-orange-hover); transform: scale(1.015); } .btn--primary:active { transform: scale(0.985); } /* Secondary: white with a blue outline + label (the AA-safe --mba-blue-deep, matching the document links), inverting to a darker --mba-blue-hover fill with a white label on hover (same .08s scale-up as primary, no shadow). For secondary actions (e.g. document downloads) so downloads read as blue and orange stays the one primary action. Keyboard focus uses the shared blue ring (see base reset). */ .btn--secondary { background: #fff; color: var(--mba-blue-deep); border: 1.6px solid var(--mba-blue-deep); } .btn--secondary:hover { background: var(--mba-blue-hover); border-color: var(--mba-blue-hover); color: #fff; transform: scale(1.015); } .btn--secondary:active { transform: scale(0.985); } .btn--outline { background: #fff; color: var(--mba-orange); border-color: var(--mba-orange); } .btn--outline:hover { background: var(--mba-orange); color: #fff; } .btn--ghost { background: transparent; color: var(--text); border-color: var(--text); } .btn--ghost:hover { border-color: var(--mba-blue); color: var(--mba-blue); } .btn--ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.5); } .btn--ghost.on-dark:hover { border-color: #fff; } /* ===================================================================== Text link with arrow ===================================================================== */ .tlink { display: inline-flex; align-items: center; gap: 7px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--text); transition: color .2s ease; } .tlink .arr { transition: transform .2s ease; } .tlink:hover { color: var(--mba-blue); } .tlink:hover .arr { transform: translateX(3px); } .tlink.on-dark { color: #fff; } .tlink.on-dark:hover { color: var(--text-on-dark-muted); } /* ===================================================================== Header ===================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); transition: transform .3s ease; will-change: transform; } /* Hide-on-scroll: slide the whole header (utility bar + main row) up out of view. Sticky stays put; transform avoids layout shift. Toggled by site.js. */ .site-header--hidden { transform: translateY(-100%); } /* utility row — deep blue-black band */ .util-row { background: var(--bg-dark); } .util-row__inner { display: flex; align-items: center; justify-content: flex-end; gap: 22px; padding: 9px 40px; font-size: 13px; color: #fff; max-width: var(--container); margin: 0 auto; } .util-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: rgba(255,255,255,.82); transition: color .2s ease; min-height: 24px; } .util-link:hover { color: var(--mba-blue); } .util-link .ext { font-size: 11px; opacity: .7; } /* main row */ .main-row { display: flex; align-items: center; gap: 36px; padding: 18px 40px; max-width: var(--container); margin: 0 auto; } /* Logo never compresses when the row runs short: the link is a non-shrinking flex item and the image holds its intrinsic ratio (fixed height, auto width). */ .main-row > a { flex: 0 0 auto; display: inline-flex; } .logo-main { height: 56px; width: auto; max-width: none; flex-shrink: 0; cursor: pointer; } .nav-desktop { display: flex; align-items: center; gap: 26px; margin-left: 8px; } .nav-item { position: relative; } .nav-item__link { position: relative; display: inline-flex; align-items: center; gap: 5px; font-size: 15.5px; font-weight: 500; color: var(--bg-dark); cursor: pointer; text-decoration: none; transition: color .2s ease; padding: 4px 0 8px; white-space: nowrap; } .nav-item__link .chev { opacity: .6; transition: transform .18s ease; } .nav-item__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--mba-orange); opacity: 0; transition: opacity .15s ease; } .nav-item:hover .nav-item__link { color: var(--mba-blue); } .nav-item:hover .nav-item__bar, .nav-item--active .nav-item__bar { opacity: 1; } .nav-item--active .nav-item__link { font-weight: 700; color: var(--bg-dark); } /* desktop dropdown (CSS hover/focus) */ .nav-drop { position: absolute; top: 100%; left: -12px; padding-top: 12px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; z-index: 60; } .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateY(0); } .nav-item:hover .nav-item__link .chev { transform: rotate(180deg); } .nav-drop__panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 10px; min-width: 238px; display: flex; flex-direction: column; gap: 2px; } .drop-link { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; color: var(--text); transition: background .15s ease, color .15s ease; } .drop-link:hover { color: var(--mba-blue); background: rgba(56,134,200,.10); } .drop-link .ext { font-size: 11px; margin-left: auto; padding-left: 14px; opacity: .6; } .nav-drop__note { font-size: 10px; letter-spacing: .08em; color: var(--text-muted); padding: 9px 12px 3px; margin-top: 4px; border-top: 1px solid var(--border); } .nav-divider { width: 1px; align-self: stretch; background: var(--border); margin: 6px 4px; } .search-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; padding: 4px 0 8px; transition: color .15s ease; cursor: pointer; white-space: nowrap; } .search-link:hover { color: var(--mba-blue); } /* Join button block holds its size; only nav spacing flexes when the row tightens. */ .header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .header-actions .btn { white-space: nowrap; } .burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; background: transparent; border: 1.5px solid var(--bg-dark); border-radius: var(--radius-button); color: var(--bg-dark); } /* mobile menu */ .mobile-menu { display: none; border-top: 1px solid var(--border); background: var(--bg); max-height: calc(100vh - 120px); overflow-y: auto; } .mobile-menu.open { display: block; } .mm-search { display: flex; align-items: center; gap: 12px; background: var(--bg-dark); padding: 18px 22px; text-decoration: none; color: #fff; } .mm-search .ico:first-child { color: var(--mba-blue); } .mm-search__label { font-size: 16px; font-weight: 600; } .mm-search .chev-r { margin-left: auto; color: var(--mba-blue); } .mm-group { padding: 18px 22px 6px; } .mm-group--services { padding: 10px 22px 24px; } .mm-group__label { color: var(--mba-blue-deep); margin-bottom: 8px; } .mm-nav { display: flex; flex-direction: column; } .mm-item { border-bottom: 1px solid var(--border); } .mm-item__row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 4px; background: transparent; border: 0; cursor: pointer; text-align: left; font-size: 17px; font-weight: 600; color: var(--bg-dark); font-family: var(--font); text-decoration: none; } .mm-item__row .chev { color: var(--mba-blue); transition: transform .2s ease; } .mm-item.open .mm-item__row .chev { transform: rotate(180deg); } /* Split row: the label links to the parent page, the chev button toggles .mm-sub. */ .mm-item__row--split { padding: 0; } .mm-item__link { flex: 1 1 auto; padding: 14px 4px; font-size: 17px; font-weight: 600; color: var(--bg-dark); font-family: var(--font); text-decoration: none; } .mm-item__link:hover { color: var(--mba-blue); } .mm-toggle { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 14px 8px; background: transparent; border: 0; cursor: pointer; color: var(--mba-blue); } .mm-sub { display: none; flex-direction: column; padding: 0 0 12px; } .mm-item.open .mm-sub { display: flex; } .mm-sublink { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 18px; font-size: 15px; text-decoration: none; cursor: pointer; border-radius: 8px; color: var(--text-slate); transition: color .15s ease, background .15s ease; } .mm-sublink:hover { color: var(--mba-blue); background: rgba(56,134,200,.10); } .mm-sublink .ext { font-size: 11px; margin-left: auto; color: var(--mba-blue); } .mm-ext { display: flex; align-items: center; gap: 10px; padding: 12px 4px; font-size: 15.5px; font-weight: 500; text-decoration: none; cursor: pointer; color: var(--text); transition: color .15s ease; } .mm-ext:hover { color: var(--mba-blue); } .mm-ext .ext { font-size: 12px; margin-left: auto; color: var(--mba-blue); } /* ===================================================================== HERO — dark, full-bleed photo + gradient, anniversary lockup ===================================================================== */ .hero { position: relative; min-height: 84vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--bg-dark); } .hero__bg { position: absolute; inset: -10% 0; will-change: transform; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,43,.66) 0%, rgba(14,26,43,.20) 34%, rgba(14,26,43,.34) 58%, rgba(14,26,43,.90) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 40px 72px; color: #fff; } .hero__col { max-width: 820px; } .hero__anniv { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; } .hero__anniv .mba-eyebrow { color: #fff; } .hero__anniv .rule { width: 28px; height: 1px; background: rgba(255,255,255,.4); } .hero__title { font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; margin: 0; text-wrap: balance; } .hero__lede { font-size: 1.3rem; line-height: 1.55; color: rgba(255,255,255,.88); margin: 24px 0 0; max-width: 46ch; } .hero__cta { display: flex; align-items: center; gap: 26px; margin-top: 36px; flex-wrap: wrap; } /* ===================================================================== EVENTS — featured card + feed list (split layout) ===================================================================== */ .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; } .sec-head__title { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 14px 0 10px; } .sec-head__lede { font-size: 1.1875rem; line-height: 1.5; color: var(--text-muted); margin: 0; max-width: 52ch; } .cat-tag { color: var(--mba-blue); letter-spacing: .1em; } .events-grid { display: grid; grid-template-columns: minmax(0,1.42fr) minmax(0,1fr); gap: 32px; align-items: stretch; } /* Featured event card */ .feat { position: relative; border-radius: var(--radius-card); overflow: hidden; min-height: 540px; height: 100%; display: flex; box-shadow: 0 12px 32px rgba(14,26,43,.12); transition: box-shadow .35s ease; } .feat:hover { box-shadow: 0 26px 56px rgba(14,26,43,.22); } .feat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .feat:hover .feat__img { transform: scale(1.04); } .feat__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,43,.10) 30%, rgba(14,26,43,.62) 66%, rgba(14,26,43,.92) 100%); } .feat__body { position: relative; margin-top: auto; padding: 40px 42px; color: #fff; width: 100%; } .feat__meta { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; } .feat__meta .rule { width: 22px; height: 1px; background: rgba(255,255,255,.45); } .feat__meta .mba-eyebrow.lead { color: #fff; } .feat__meta .mba-eyebrow.date { color: rgba(255,255,255,.82); } .feat__title { font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; max-width: 15ch; text-wrap: balance; } .feat__loc { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.85); font-size: 15.5px; margin-bottom: 6px; } .feat__line { font-size: 1.0625rem; line-height: 1.5; color: rgba(255,255,255,.85); margin: 8px 0 26px; max-width: 44ch; } .feat__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } /* Feed list (right column) */ .feed { display: flex; flex-direction: column; justify-content: center; } .feed-row { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 22px 4px; border-top: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; } .feed-row:first-child { border-top: none; } .feed-row__tagline { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; } .feed-row__soon { font-size: 12px; font-weight: 600; color: var(--text-muted); } .feed-row__title { font-size: 1.3rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; transition: color .2s ease; } .feed-row:hover .feed-row__title { color: var(--mba-blue); } .feed-row__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--text-muted); font-size: 14.5px; } .feed-row__meta span { display: inline-flex; align-items: center; gap: 7px; } .feed-row__reg { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--text); transition: color .2s ease; white-space: nowrap; } .feed-row:hover .feed-row__reg { color: var(--mba-blue); } .feed-row__reg .arr { transition: transform .2s ease; } .feed-row:hover .feed-row__reg .arr { transform: translateX(3px); } .feed__all { border-top: 1px solid var(--border); padding-top: 22px; margin-top: 2px; } /* ===================================================================== STATS — dark, "stack" layout (headline left, stat rows right) ===================================================================== */ .stats { background: var(--bg-dark); padding: 104px 40px; } .stats__stack { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 80px; align-items: center; } .stats__title { font-size: clamp(2rem, 3.2vw, 2.9rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 16px 0 0; max-width: 16ch; color: var(--text-on-dark); } .stat-row { display: grid; grid-template-columns: minmax(0,auto) 1fr; gap: 28px; align-items: center; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.16); } .stat-row:first-child { border-top: none; } .stat-row__num { font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--mba-blue); font-variant-numeric: tabular-nums; width: 4ch; } .stat-row__label { font-size: 16px; color: var(--text-on-dark-muted); line-height: 1.5; } /* ===================================================================== PROGRAMS — lead photo card + ranked mini-row list ===================================================================== */ .programs__head { max-width: 720px; margin-bottom: 52px; } .programs__title { font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 14px 0 12px; max-width: 18ch; } .programs__lede { font-size: 1.1875rem; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 52ch; } .programs__grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 48px; align-items: stretch; } .lead-prog { position: relative; border-radius: var(--radius-card); overflow: hidden; min-height: 420px; height: 100%; display: flex; cursor: pointer; box-shadow: 0 10px 28px rgba(14,26,43,.10); transition: box-shadow .35s ease; text-decoration: none; color: #fff; } .lead-prog:hover { box-shadow: 0 24px 52px rgba(14,26,43,.20); } .lead-prog__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .lead-prog:hover .lead-prog__img { transform: scale(1.04); } .lead-prog__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,26,43,.03) 0%, rgba(14,26,43,.32) 26%, rgba(14,26,43,.6) 42%, rgba(14,26,43,.82) 62%, rgba(14,26,43,.95) 100%); } .lead-prog__body { position: relative; margin-top: auto; padding: 36px 38px; } .lead-prog__body .mba-eyebrow { color: rgba(255,255,255,.82); } .lead-prog__title { font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 10px; max-width: 16ch; } .lead-prog__line { font-size: 1.0625rem; line-height: 1.5; color: rgba(255,255,255,.85); margin: 0 0 18px; max-width: 46ch; } .mini-list { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .mini-row { padding: 26px 0; border-top: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; display: block; } .mini-row__tagline { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .mini-row__dot { width: 9px; height: 9px; border-radius: 999px; } .mini-row__title { font-size: 1.35rem; font-weight: 600; line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--text); transition: color .2s ease; display: inline-flex; align-items: center; gap: 8px; } .mini-row:hover .mini-row__title { color: var(--mba-blue); } .mini-row__title .ext { font-size: 13px; color: var(--text-muted); } .mini-row__blurb { font-size: 15.5px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 44ch; } /* ===================================================================== FIND A CONTRACTOR — text + parallax photo ===================================================================== */ .find { background: var(--bg-muted); padding: 104px 40px; } .find__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 56px; align-items: center; } .find__title { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 16px 0 0; max-width: 18ch; } .find__lede { font-size: 1.1875rem; line-height: 1.6; color: var(--text-muted); margin: 20px 0 30px; max-width: 48ch; } .find__media { border-radius: var(--radius-card); overflow: hidden; height: 460px; } .find__media-inner { height: 120%; margin-top: -10%; will-change: transform; } .find__media img { width: 100%; height: 100%; object-fit: cover; } /* ===================================================================== JOIN BAND — dark, parallax skyline ===================================================================== */ .join { position: relative; overflow: hidden; background: var(--bg-dark); color: #fff; } .join__bg { position: absolute; inset: -12% 0; will-change: transform; } .join__bg img { width: 100%; height: 100%; object-fit: cover; } .join__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,26,43,.94) 0%, rgba(14,26,43,.85) 30%, rgba(14,26,43,.40) 52%, rgba(14,26,43,.16) 100%); } .join__inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; padding: 120px 40px; } .join__col { max-width: 720px; } .join__title { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; margin: 18px 0 0; max-width: 18ch; } .join__lede { font-size: 1.2rem; line-height: 1.6; color: rgba(255,255,255,.86); margin: 22px 0 34px; max-width: 48ch; } .join__cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } /* ===================================================================== FOOTER ===================================================================== */ .site-footer { background: var(--bg-dark); color: var(--text-on-dark); } .footer-grid { max-width: var(--container); margin: 0 auto; padding: 72px 40px 56px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } .footer__logo { height: 56px; width: auto; } .footer__tagline { color: var(--text-on-dark-muted); font-size: 14px; font-style: italic; line-height: 1.6; margin-top: 16px; max-width: 260px; } .footer__addr { color: var(--text-on-dark-muted); font-size: 13.5px; line-height: 1.6; margin-top: 16px; font-style: normal; } .footer__contact { color: var(--text-on-dark-muted); font-size: 13.5px; line-height: 1.6; margin-top: 12px; } .footer__contact a { color: inherit; text-decoration: none; } .footer__contact a:hover { color: var(--mba-blue); } .footer__social { display: flex; gap: 18px; margin-top: 24px; } .social-ico { display: inline-flex; color: rgba(255,255,255,.66); transition: color .2s ease; } .social-ico:hover { color: var(--mba-blue); } .social-ico svg { fill: currentColor; } /* Legal links live in the dark footer (white via .footer-link), not the white bar */ .footer__legal { display: flex; gap: 20px; margin-top: 22px; } .footer-col__label { color: var(--mba-blue); margin-bottom: 16px; } .footer-links { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; } .footer-link { color: #fff; font-size: 14.5px; text-decoration: none; cursor: pointer; opacity: .86; transition: opacity .2s ease, color .2s ease; display: inline-flex; align-items: center; gap: 6px; } .footer-link:hover { opacity: 1; color: var(--mba-blue); } .footer-link .ext { font-size: 11px; opacity: .6; } .footer__divider { height: 6px; background: var(--mba-blue); } .subfooter { background: #fff; } .subfooter__inner { max-width: var(--container); margin: 0 auto; padding: 20px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .subfooter__left { display: flex; align-items: center; gap: 20px; color: var(--text-muted); font-size: 13px; } .subfooter__left a { color: var(--text-muted); text-decoration: none; cursor: pointer; } .subfooter__left a:hover { color: var(--mba-blue); } .subfooter__logos { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; } .subfooter__logos img { display: block; width: auto; } .logo-agc { height: 34px; } .logo-cap { height: 26px; } .logo-seal { height: 48px; width: 48px; } /* ===================================================================== Animation (Reveal entrance + Ken-Burns); reduced-motion safe ===================================================================== */ @keyframes mbaIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes mbaKen { from { transform: scale(1.06); } to { transform: scale(1.18); } } .reveal { opacity: 1; animation: mbaIn .85s cubic-bezier(.22,.61,.36,1) both; } /* Scroll-triggered variant of the same entrance: site.js arms it (hidden) only when JS + motion are on, then adds .is-revealed as it enters the viewport. With no JS or under reduced motion it stays visible. */ .reveal-scroll.reveal-armed { opacity: 0; } .reveal-scroll.reveal-armed.is-revealed { opacity: 1; animation: mbaIn .85s cubic-bezier(.22,.61,.36,1) both; } .hero__bg img { animation: mbaKen 22s ease-out forwards; } @media (prefers-reduced-motion: reduce) { html, body { scroll-behavior: auto; } .reveal { animation: none !important; } .reveal-scroll.reveal-armed { opacity: 1 !important; } .reveal-scroll.is-revealed { animation: none !important; } .hero__bg img { animation: none !important; } [data-parallax] { transform: none !important; } /* Hide-on-scroll is disabled in JS for reduced motion; this is a belt-and-suspenders guarantee that the header stays put and visible. */ .site-header { transition: none !important; } .site-header--hidden { transform: none !important; } } /* ===================================================================== ANNIVERSARY (140th) — single toggle via body.anniv-on .anniv = shown only when anniversary is ON .no-anniv = shown only when anniversary is OFF Remove "anniv-on" from to switch all 140th content off. ===================================================================== */ .no-anniv { display: none; } body:not(.anniv-on) .anniv { display: none !important; } body.anniv-on .no-anniv { display: none !important; } body:not(.anniv-on) .no-anniv { display: inline; } /* ===================================================================== RESPONSIVE — breakpoints match the prototype (1024 / 640) ===================================================================== */ /* Below 1024px the horizontal nav collapses to the hamburger; the full row only shows at 1024px and up (matches the min-width rule below, no dead 1024px gap). */ @media (max-width: 1023.98px) { .util-row { display: none; } .nav-desktop { display: none; } .burger { display: inline-flex; } .sec { padding-left: 32px; padding-right: 32px; } .hero__inner { padding-left: 32px; padding-right: 32px; } .join__inner { padding-left: 32px; padding-right: 32px; } .stats, .find { padding-left: 32px; padding-right: 32px; } .stats__stack, .programs__grid, .find__grid { grid-template-columns: 1fr; gap: 44px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } /* Tighten desktop nav spacing in the 1024–1280px range so every item fits on one row without wrapping or overflow. Only the nav gaps and link padding flex here; the logo and Join button keep their size (set above). */ @media (min-width: 1024px) and (max-width: 1280px) { .main-row { gap: 22px; padding-left: 28px; padding-right: 28px; } .nav-desktop { gap: 16px; margin-left: 0; } .nav-item__link { font-size: 15px; } .nav-divider { margin-left: 2px; margin-right: 2px; } } @media (min-width: 1024px) { .mobile-menu { display: none !important; } /* Larger partner logos in the white bar (desktop only). All three scaled ~1.6x from base, keeping their 34/26/48 proportion and aspect ratios; nowrap holds them on one row, the 44px gap keeps clear space between each, align-items centers them. They stay right-aligned opposite the copyright via the inner's space-between. Row (AGC 108 + CAP ~210 + seal 77 + two 44px gaps = ~483px) clears the right-side budget even at a 1025px viewport. */ .subfooter__logos { flex-wrap: nowrap; gap: 44px; } .logo-agc { height: 54px; } .logo-cap { height: 42px; } .logo-seal { height: 77px; width: auto; } /* Featured event title holds on one line on desktop; the 15ch base cap and balance wrap are for narrower viewports only. */ .feat__title { max-width: none; white-space: nowrap; text-wrap: nowrap; } } @media (max-width: 640px) { .main-row { padding-left: 20px; padding-right: 20px; gap: 12px; } .logo-main { height: 42px; } .header-actions .btn { padding: 11px 16px; font-size: 14px; } .sec { padding-top: 64px; padding-bottom: 64px; padding-left: 22px; padding-right: 22px; } .stats, .find { padding-top: 64px; padding-bottom: 64px; padding-left: 22px; padding-right: 22px; } .hero { min-height: 72vh; align-items: center; } /* Center the hero copy block vertically on phones with balanced space above and below; symmetric padding also keeps it clear of the sticky header if the headline wraps tall. Tablet/desktop keep flex-end (set on .hero). */ .hero__inner { padding: 56px 22px; } .hero__cta { flex-direction: column; align-items: stretch; gap: 16px; } .hero__cta > .btn { width: 100%; justify-content: center; } .events-grid { grid-template-columns: 1fr; gap: 24px; } /* Stack event rows on phones: details (category, title, date, location) take the full width so the title breaks naturally, and Register drops to its own line below. Tablet/desktop keep the 1fr/auto side-by-side grid. */ .feed-row { grid-template-columns: 1fr; gap: 12px; align-items: start; } .stats__stack, .programs__grid, .find__grid { gap: 28px; } /* Find-a-member CTA: full width of its column on phones (desktop stays content-width). 44px+ tap target comes from the base .btn padding. */ .find .btn { width: 100%; justify-content: center; } .join__inner { padding: 72px 22px; } /* Vertical scrim on phones: dark pools full-width at the bottom and fades upward so the dusk skyline reads at the top, matching the hero's 180deg direction. Lower stops stay >=.85 so white copy and buttons clear WCAG AA. */ .join__scrim { background: linear-gradient(180deg, rgba(14,26,43,.28) 0%, rgba(14,26,43,.52) 32%, rgba(14,26,43,.85) 66%, rgba(14,26,43,.96) 100%); } .footer-grid { grid-template-columns: 1fr; gap: 40px; } /* Align the footer's left/right edges with the rest of the page on phones. The footer kept the 40px desktop gutter while the header logo (.main-row) drops to 20px here, so footer content sat inset further than everything above it. Match the header's 20px gutter (max-width is already --container, and desktop/tablet already share the header's 40px, so only mobile differs). */ .footer-grid { padding-left: 20px; padding-right: 20px; } .subfooter__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding-left: 20px; padding-right: 20px; } /* Logos: one row (nowrap), scaled to fill the width. flex-grow matches each logo's natural display width (AGC 2:1, CAP ~5:1, seal 1:1 -> 34:65:24) with flex-basis 0, so the three keep their 34/26/48 height proportion, hold their aspect ratios (height:auto), grow together as the viewport widens, and stay vertically centered (align-items:center from the base). The 16px gap keeps a clear space between each; min-width:0 lets them shrink to fit at 320px. */ .subfooter__logos { flex-wrap: nowrap; gap: 16px; width: 100%; } .subfooter__logos img { min-width: 0; height: auto; } .logo-agc { flex: 34 1 0; height: auto; } .logo-cap { flex: 65 1 0; height: auto; } .logo-seal { flex: 24 1 0; width: auto; height: auto; } .feat__body, .lead-prog__body { padding-left: 26px; padding-right: 26px; } /* Featured-event eyebrow: stack on phones so the label and date never overlap. Label on its own line, full date directly below, both flush left; each stays on one line (no "FEATURED"/"EVENT" or "OCT 23"/"2026" breaks). The dash only reads inline, so it is hidden here and kept on desktop. */ .feat__meta { flex-direction: column; align-items: flex-start; gap: 4px; } .feat__meta .rule { display: none; } .feat__meta .mba-eyebrow.lead, .feat__meta .mba-eyebrow.date { white-space: nowrap; } /* Copy reads over the photo: the body is already bottom-anchored (margin-top auto), so strengthen the bottom-up scrim like desktop but ramped darker, since the copy sits higher relative to the taller mobile card. The eyebrow (~26% down) lands on ~.64 ground (~5:1 with white); headline, location, description, and buttons below sit on progressively darker ground. */ .feat__scrim { background: linear-gradient(180deg, rgba(14,26,43,.32) 0%, rgba(14,26,43,.64) 26%, rgba(14,26,43,.84) 54%, rgba(14,26,43,.96) 100%); } /* Actions: Register (content-width orange) and Event details share one row when they fit (~390px+) and wrap to stack with Register on top at 320px. Both keep a 44px tap height; the text link gets a 44px floor here. */ .feat__actions { gap: 16px; } .feat__actions .tlink { min-height: 44px; } /* Location: top-align the pin with the first line when the address wraps, instead of centering it across both lines. */ .feat__loc { align-items: flex-start; } .feat__loc .ico { margin-top: 2px; } /* --- Mobile footer only: tap targets + rhythm. Order, colors, and the type family are unchanged. --- */ /* Social: a tight, left-aligned cluster. Each icon is a 44px-tall tap target, 36px wide (24px glyph + 6px padding each side); rows touch (no overlap) so the glyphs sit ~12px apart instead of spread across the row. The -6px pull lines the first glyph up with the gutter. A true 44x44 box would force ~20px glyph gaps or overlapping targets, so width is 36px (well above the WCAG 2.5.8 24px minimum) to keep the cluster tight as asked. */ .footer__social { gap: 0; margin-left: -6px; flex-wrap: nowrap; } .social-ico { height: 44px; padding: 0 6px; align-items: center; justify-content: center; } .social-ico svg { width: 24px; height: 24px; } /* Links: one step larger (14.5 -> 16px) for readability; the 44px tap height comes from padding plus a floor, not from line spacing between rows. */ .footer-links { gap: 0; } .footer-link { font-size: 16px; min-height: 44px; padding-top: 11px; padding-bottom: 11px; } /* Group hierarchy: the label hugs its own links (8px below it) while the 40px grid gap above each group (set on .footer-grid) separates the groups, so each label reads as belonging to the list beneath it. */ .footer-col__label { margin-bottom: 8px; } } /* ===================================================================== ABOUT PAGE (interior) — built on the shared tokens/components above. No new tokens, no new stylesheet. Eyebrows reuse .mba-eyebrow; the closing band reuses the .join band; count-up reuses [data-count] in site.js. Section padding/gutters come from .sec / .sec--muted / .sec--dark. These classes only add the About-specific layouts. ===================================================================== */ /* Page header: deep blue-black ground, type left, image right (asymmetric) */ .about-hero { background: var(--bg-dark); color: #fff; } .about-hero__grid { max-width: var(--container); margin: 0 auto; padding: 96px 40px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 56px; align-items: stretch; } /* Text-only dark hero (no image): one full-width column so the title and intro span the container instead of being squeezed into the left grid column. */ .about-hero__grid--solo { grid-template-columns: 1fr; } .about-hero__col { display: flex; flex-direction: column; justify-content: center; } .about-hero__title { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; margin: 20px 0 0; color: #fff; text-wrap: balance; } /* Optional answer-first dek paragraph under the dark-hero H1 (About, Safety). */ .about-hero__dek { font-size: 1.2rem; line-height: 1.6; color: var(--text-on-dark-muted); margin-top: 1.5rem; max-width: 52ch; text-wrap: pretty; } .about-hero__img { min-height: 380px; border-radius: var(--radius-card); overflow: hidden; } .about-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Two-column editorial stack (Our vision, Who we are) */ .about-stack { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 72px; align-items: stretch; } .about-stack--muted { gap: 64px; } .about-stack__title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; margin: 16px 0 0; max-width: 20ch; } .about-vision__col { display: grid; grid-template-rows: auto 1fr; height: 100%; } /* Editorial image panels (object-fit cover, card corners) */ .about-figure { position: relative; margin-top: 34px; border-radius: var(--radius-card); overflow: hidden; min-height: 220px; } .about-figure--tall { margin-top: 0; height: 100%; min-height: 460px; } .about-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Our vision: faded index number + label + blurb (editorial numbered list) */ .vision-row { display: grid; grid-template-columns: minmax(0,auto) 1fr; gap: 28px; align-items: start; padding: 26px 0; border-top: 1px solid var(--border); } .vision-row:first-child { border-top: none; } /* Oversized index number, top-aligned to the first line of its heading. Uses the same --mba-blue (#3886C8) as the stats-band numerals. At this display size (>=44px, weight 800) it is large text, so 3:1 applies and #3886C8 clears it (3.88:1 on white). No orange (reserved for primary actions). line-height:1 + the heading's tightened 1.2 line-height keep the two tops aligned. */ .vision-row__num { font-size: clamp(2.8rem, 4.5vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--mba-blue); font-variant-numeric: tabular-nums; width: 2.4ch; } .vision-row__label { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); } .vision-row__blurb { font-size: 1.0625rem; line-height: 1.6; color: var(--text-muted); margin: 8px 0 0; max-width: 46ch; } /* Who we are: narrative + AGC link (blue text on white uses the AA-safe deep blue) */ .about-narrative__title { font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.02em; margin: 16px 0 22px; max-width: 18ch; } .about-prose { max-width: 64ch; } .about-prose p { font-size: 1.0625rem; line-height: 1.7; color: var(--text); margin: 0; } .about-prose p + p { margin-top: 20px; } .about-link { color: var(--mba-blue-deep); text-decoration: none; font-weight: 600; } .about-link:hover { text-decoration: underline; } /* Key figures band: blue numerals on the dark ground (homepage stats treatment) */ .figures { max-width: var(--container); margin: 0 auto; } .figures__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 36px; } .figure { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.16); } .figure__num { font-size: clamp(2.6rem, 4vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--mba-blue); font-variant-numeric: tabular-nums; } .figure__label { font-size: 15.5px; color: var(--text-on-dark-muted); line-height: 1.45; margin-top: 14px; max-width: 22ch; } /* Closing band statement (reuses the .join band markup) */ .about-closing__text { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; color: #fff; margin: 0; max-width: 44ch; } .about-closing__cta { margin-top: 30px; } /* About responsive — mirrors the homepage breakpoints (1024 / 640) */ @media (max-width: 1024px) { .about-hero__grid { grid-template-columns: 1fr; gap: 28px; padding-left: 32px; padding-right: 32px; } .about-hero__img { min-height: 0; height: 300px; } .about-stack { grid-template-columns: 1fr; gap: 44px; } .about-figure { min-height: 0; height: 320px; } .about-figure--tall { min-height: 0; height: 360px; } .figures__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; } } @media (max-width: 640px) { .about-hero__grid { padding: 56px 22px; } .about-hero__img { height: 240px; } .about-stack { gap: 30px; } .about-figure { height: 260px; } .about-figure--tall { height: 280px; } .figures__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 22px; } } /* ===================================================================== JOIN MBA PAGE (interior, join.html) — built on the shared tokens and components above. Reuses .sec / .sec--bg / .sec--dark / .sec--muted, .container, .mba-eyebrow, .btn, .tlink. Adds only Join-specific section layout. The membership application FORM and its reusable form components are added in a later step; this covers the opening, the dark "includes" band (the footer's label-and-column treatment), the national affiliation row, and the application section's intro + form slot. ===================================================================== */ /* Opening — eyebrow/headline/lede/CTA left, warm event photo right (light, asymmetric: photo column slightly wider). */ .join-intro__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 56px; align-items: center; } .join-intro__title { font-size: clamp(2.4rem, 4.4vw, 3.7rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 18px 0 0; max-width: 16ch; text-wrap: balance; } .join-intro__lede { font-size: 1.2rem; line-height: 1.6; color: var(--text-muted); margin: 22px 0 0; max-width: 52ch; } .join-intro__cta { display: flex; align-items: center; gap: 26px; margin-top: 34px; flex-wrap: wrap; } /* Fixed landscape ratio wider than the 3:2 source, so object-fit: cover crops vertically; object-position pulls to the lower/foreground portion so the attendees read close instead of as a distant high-angle crowd. */ .join-intro__media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 9; } .join-intro__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 85%; } /* What membership includes — dark band; footer-style blue label + stacked list, four columns. No orange, no chrome (restraint). */ .includes__head { max-width: 720px; margin-bottom: 52px; } .includes__title { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--text-on-dark); margin: 14px 0 12px; } /* Keep the short "What membership includes" heading on one line on desktop; it is free to wrap on smaller screens. */ @media (min-width: 1024px) { .includes__title { white-space: nowrap; } } .includes__lede { font-size: 1.1875rem; line-height: 1.55; color: var(--text-on-dark-muted); margin: 0; max-width: 52ch; } .includes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 36px; } .includes__label { color: var(--mba-blue); margin-bottom: 16px; } /* footer-col label treatment */ .includes__list { display: flex; flex-direction: column; gap: 11px; } .includes__list li { color: #fff; opacity: .86; font-size: 15.5px; line-height: 1.45; } /* National affiliation — AGC logo beside subhead + sentence + link (white) */ .affil__grid { display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr); gap: 56px; align-items: center; } .affil__logo { display: flex; align-items: center; } .affil__logo img { height: 96px; width: auto; } .affil__title { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 14px; } .affil__text { font-size: 1.0625rem; line-height: 1.65; color: var(--text-muted); margin: 0 0 20px; max-width: 60ch; } /* Membership application — left rail + form on the cool tint (--bg-muted). The band runs the full length of the form through the submit button. The rail is narrower (5fr) than the form (7fr); both top-align. */ .apply__grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 64px; align-items: start; } .apply__rail { align-self: start; } .apply__title { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 14px 0 16px; } .apply__lede { font-size: 1.1875rem; line-height: 1.55; color: var(--text-muted); margin: 0 0 22px; max-width: 40ch; } .apply__note { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; max-width: 42ch; } .apply__note--contact { margin-top: 6px; margin-bottom: 0; } .apply__note a { color: var(--mba-blue-deep); text-decoration: none; font-weight: 600; } .apply__note a:hover { text-decoration: underline; } /* ===================================================================== FORM CONTROLS (reusable, site-wide) — first used by the Join membership application. Labels sit above fields; input text is 16px minimum (also blocks iOS zoom); controls use the 8px --radius-button; focus shows the site-wide --mba-blue ring (3px clears WCAG AA on mouse + keyboard). The error state pairs a heavier near-black border with the icon + message in the markup, so meaning never rides on color alone and no red is added to the palette. Built entirely on the shared tokens above. ===================================================================== */ /* Field groups + 6-col grid (fields sized to content via fc-* spans) */ .form-group { border: 0; margin: 0 0 34px; padding: 0; min-width: 0; } .form-group__label { color: var(--mba-blue); margin-bottom: 18px; padding: 0; } /* footer column-label blue */ .form-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 18px; } .form-field { display: flex; flex-direction: column; min-width: 0; } .fc-1 { grid-column: span 1; } .fc-2 { grid-column: span 2; } .fc-3 { grid-column: span 3; } .fc-4 { grid-column: span 4; } .fc-6 { grid-column: span 6; } /* Label (above the field) + required indicator (text, not color) */ .form-label { display: inline-flex; align-items: baseline; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 7px; } .form-req { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); } /* Text input, select, textarea */ .form-input, .form-select, .form-textarea { width: 100%; min-width: 0; font-family: var(--font); font-size: 16px; line-height: 1.4; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-button); padding: 12px 14px; transition: border-color .15s ease, box-shadow .15s ease; } .form-textarea { resize: vertical; min-height: 88px; } .form-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A626E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } /* Focus — visible on all focus (mouse + keyboard), the site-wide blue ring */ .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--mba-blue); box-shadow: 0 0 0 3px rgba(56,134,200,.32); } /* Helper text */ .form-help { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); margin: 7px 0 0; max-width: 52ch; } /* Error state — heavier near-black border + the markup's icon and message. Color is never the only cue (icon + text carry it). */ .form-field--error .form-input, .form-field--error .form-select, .form-field--error .form-textarea { border-color: var(--text); border-width: 2px; } .form-error { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; font-size: 0.875rem; line-height: 1.45; font-weight: 500; color: var(--text); } .form-error[hidden] { display: none; } .form-error__ico { flex: none; margin-top: 1px; color: var(--text); } .form-error__ico svg { stroke-width: 2; } /* reCAPTCHA placeholder (for-position-only; real widget added with GrowthZone) */ .form-recaptcha { display: flex; align-items: center; gap: 14px; max-width: 320px; margin: 6px 0 28px; padding: 16px 18px; background: #fff; border: 1px dashed var(--border-strong); border-radius: var(--radius-button); } .form-recaptcha__box { flex: none; width: 24px; height: 24px; border: 2px solid var(--border-strong); border-radius: 4px; } .form-recaptcha__label { font-size: 0.875rem; color: var(--text-muted); } .form-actions { margin-top: 8px; } /* Join responsive — mirrors html/join.html page-scoped rules at 1024 / 640. Targets the .mba-* classes the join-page block actually renders (the prior .join-intro__grid / .includes__grid / .affil__grid / .apply__grid rules referenced an older markup pass and matched nothing on this page). */ @media (max-width: 1024px) { .mba-sec { padding-left: 32px !important; padding-right: 32px !important; } .mba-open-grid { grid-template-columns: 1fr !important; gap: 36px !important; } .mba-open-img { min-height: 0 !important; height: 320px !important; } .mba-benefit-groups { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .mba-join-grid { grid-template-columns: 1fr !important; gap: 44px !important; } .mba-agc-row { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; } .mba-agc-row img { height: 84px !important; } } @media (max-width: 640px) { .mba-sec { padding-left: 22px !important; padding-right: 22px !important; } .mba-open-img { height: 230px !important; } .mba-benefit-groups { grid-template-columns: 1fr !important; gap: 32px !important; } .mba-form-row { grid-template-columns: 1fr !important; } /* Form collapses to a single column on phones so 16px inputs stay tappable. */ .join-form-wrap .forminator-col-6, .join-form-wrap .forminator-col-4, .join-form-wrap .forminator-col-8 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } } /* ===================================================================== STANDARD CONTENT — side-rail card (white). The reusable card ground for the Standard Content template's optional right rail (reference page: drug-free-program.html): white fill, a 1px --border hairline, and a restrained shadow so the white card separates cleanly from the white page. Pairs with the page-scoped base .std-card (radius + padding) and the navy .std-card__title eyebrow labels. ===================================================================== */ .std-card--white { background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(14,26,43,.05), 0 6px 16px rgba(14,26,43,.06); } /* ===================================================================== SECTION-LANDING (hub) — .ts-* (migrated from the static training-services page-scoped