/* ================================================================ MHACBO — mhacbo.org rebuild PALETTE: MHACBO Rebrand (Claude Design handoff, adopted 2026-07-19) — teal-700 #0d5c52 + gold-600 #d9a520 on cool ground #f4f9f9 (light, matches Caspio embeds) · gold #e9c463 on deep teal (dark). EVERY color runs through --mh-* tokens; the --cas-* aliases at the bottom feed script-embedded Caspio DataPages the same palette. No component hardcodes a hex. Dark mode: follows the visitor's OS (prefers-color-scheme) until they use the header toggle, which stamps data-mode="dark|light" AND cas-dark-theme on (the latter for Caspio-side CSS). ================================================================ */ :root { /* metrics & type (palette-independent) */ --mh-font-display: 'Source Serif 4', 'Palatino Linotype', Georgia, serif; --mh-font-body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --mh-font-data: 'DM Mono', Consolas, 'Courier New', monospace; --mh-size-0: .78rem; --mh-size-1: .9rem; --mh-size-2: 1rem; --mh-size-3: 1.18rem; --mh-size-4: 1.5rem; --mh-size-5: clamp(1.9rem, 4vw, 2.7rem); --mh-r-sm: 7px; --mh-r: 12px; --mh-r-pill: 999px; --mh-max: 1680px; } /* ---------------- LIGHT (default): teal on off-white ---------------- */ :root { --mh-primary: #0d5c52; --mh-primary-2: #14695e; --mh-primary-deep: #0a3d36; --mh-deepest: #08322c; --mh-gold: #d9a520; --mh-gold-hover: #c1901a; --mh-gold-text: #b8860b; --mh-gold-dark: #8a5a00; --mh-gold-soft: #f6efdc; --mh-cta-text: #231a05; --mh-ground: #f4f9f9; --mh-surface: #ffffff; --mh-tint: #eef4f2; --mh-ink: #22332e; --mh-mute: #5c6b64; --mh-faint: #8a958f; --mh-line: #e4e1d8; --mh-on-primary: #ffffff; --mh-hero-ink: #d6e4e0; --mh-ok: #0d5c52; --mh-ok-soft: #eef4f2; --mh-warn: #8a5a00; --mh-warn-soft: #f6efdc; --mh-bad: #a33a32; --mh-bad-soft: #f7e5e2; --mh-info: #22687f; --mh-info-soft: #e4eef2; --mh-hero: linear-gradient(120deg, #0a3d36, #0d5c52); --mh-shadow: 0 1px 3px rgba(0, 0, 0, .06); --mh-shadow-float: 0 12px 32px rgba(10, 61, 54, .12); --mh-shadow-hover: 0 6px 20px rgba(10, 61, 54, .10); } /* ---------------- DARK: gold on green-slate ---------------- Two triggers, identical tokens: 1. OS preference, unless the visitor chose light explicitly 2. the explicit toggle choice */ @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --mh-primary: #e9c463; --mh-primary-2: #d9a520; --mh-primary-deep: #b8860b; --mh-deepest: #08322c; --mh-gold: #e9c463; --mh-gold-hover: #d9a520; --mh-gold-text: #e9c463; --mh-gold-dark: #f6efdc; --mh-gold-soft: rgba(233, 196, 99, .13); --mh-cta-text: #231a05; --mh-ground: #08322c; --mh-surface: #0a3d36; --mh-tint: #14695e; --mh-ink: #d6e4e0; --mh-mute: #a9c9c2; --mh-faint: #6ea99d; --mh-line: #14695e; --mh-on-primary: #231a05; --mh-hero-ink: #f6efdc; --mh-ok: #6ea99d; --mh-ok-soft: rgba(110,169,157,.16); --mh-warn: #e9c463; --mh-warn-soft: rgba(233,196,99,.14); --mh-bad: #e08a80; --mh-bad-soft: rgba(224,138,128,.15); --mh-info: #8fb8c9; --mh-info-soft: rgba(143,184,201,.14); --mh-hero: linear-gradient(120deg, #08322c, #0a3d36); --mh-shadow: 0 1px 3px rgba(0,0,0,.4); --mh-shadow-float: 0 12px 32px rgba(0,0,0,.4); --mh-shadow-hover: 0 6px 20px rgba(0,0,0,.35); } } :root[data-mode="dark"] { --mh-primary: #e9c463; --mh-primary-2: #d9a520; --mh-primary-deep: #b8860b; --mh-deepest: #08322c; --mh-gold: #e9c463; --mh-gold-hover: #d9a520; --mh-gold-text: #e9c463; --mh-gold-dark: #f6efdc; --mh-gold-soft: rgba(233, 196, 99, .13); --mh-cta-text: #231a05; --mh-ground: #08322c; --mh-surface: #0a3d36; --mh-tint: #14695e; --mh-ink: #d6e4e0; --mh-mute: #a9c9c2; --mh-faint: #6ea99d; --mh-line: #14695e; --mh-on-primary: #231a05; --mh-hero-ink: #f6efdc; --mh-ok: #6ea99d; --mh-ok-soft: rgba(110,169,157,.16); --mh-warn: #e9c463; --mh-warn-soft: rgba(233,196,99,.14); --mh-bad: #e08a80; --mh-bad-soft: rgba(224,138,128,.15); --mh-info: #8fb8c9; --mh-info-soft: rgba(143,184,201,.14); --mh-hero: linear-gradient(120deg, #08322c, #0a3d36); --mh-shadow: 0 1px 3px rgba(0,0,0,.4); --mh-shadow-float: 0 12px 32px rgba(0,0,0,.4); --mh-shadow-hover: 0 6px 20px rgba(0,0,0,.35); } /* helper: things that only show in one mode */ :root[data-mode="dark"] .light-only { display: none !important; } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .light-only { display: none !important; } } /* ================= BASE ================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: clamp(16px, 15.2px + .12vw, 18px); } body { margin: 0; font-family: var(--mh-font-body); font-size: var(--mh-size-2); background: var(--mh-ground); color: var(--mh-ink); line-height: 1.6; } img { max-width: 100%; height: auto; } a { color: var(--mh-primary); } a:hover { color: var(--mh-gold-hover); } .wrap { max-width: 100%; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 4.5rem); } .wrap.narrow { max-width: 860px; } h1, h2, h3, h4 { font-family: var(--mh-font-display); color: var(--mh-ink); line-height: 1.25; text-wrap: balance; margin: 0; } h1 { font-size: var(--mh-size-5); font-weight: 600; } h2 { font-size: var(--mh-size-4); font-weight: 600; } h3 { font-size: var(--mh-size-3); font-weight: 600; } h4 { font-size: var(--mh-size-2); font-weight: 700; } /* ================= HEADER (Civic: topbar + logo row + section rail) ================= */ .topbar { background: var(--mh-primary-deep); color: var(--mh-hero-ink); font-size: var(--mh-size-0); padding: .38rem 0; } :root[data-mode="dark"] .topbar { background: #00000033; } .topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .topbar a { color: inherit; font-weight: 600; text-decoration: none; } header.site { background: var(--mh-surface); border-bottom: 1px solid var(--mh-line); position: sticky; top: 0; z-index: 50; } header.site .row { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--mh-ink); } .brand img { height: 50px; width: 50px; flex: none; } .brand .name { display: flex; flex-direction: column; justify-content: center; border-left: 2px solid var(--mh-gold); padding-left: .8rem; } .brand b { font-family: var(--mh-font-body); font-weight: 800; font-size: 1.28rem; line-height: 1.05; letter-spacing: .05em; color: var(--mh-primary-deep); } :root[data-mode="dark"] .brand b { color: #fff; } .brand small { color: var(--mh-mute); font-size: .585rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; line-height: 1.5; max-width: 250px; margin-top: .2rem; } nav.main { margin-left: auto; display: flex; gap: .1rem; flex-wrap: wrap; align-items: center; } nav.main a { text-decoration: none; color: #31443e; font-weight: 600; font-size: .84rem; padding: .45rem .55rem .35rem; border-bottom: 2px solid transparent; } :root[data-mode="dark"] nav.main a { color: var(--mh-ink); } nav.main a:hover { color: var(--mh-primary); } nav.main a.on { color: var(--mh-primary); border-bottom-color: var(--mh-gold); } @media (max-width: 1100px) { nav.main { margin-left: 0; flex-basis: 100%; padding-bottom: .35rem; } } .navrail { background: var(--mh-primary-deep); } :root[data-mode="dark"] .navrail { background: #062622; } .navrail .wrap { display: flex; gap: .1rem; overflow-x: auto; } .navrail a { color: #d6e4e0; text-decoration: none; font-size: .84rem; font-weight: 600; padding: .55rem .95rem; white-space: nowrap; } .navrail a:hover { background: rgba(255,255,255,.09); color: #fff; } .navrail a.on { background: var(--mh-gold); color: var(--mh-cta-text); } .navrail a.finder { color: var(--mh-gold); font-weight: 700; } .navrail a.finder.on, .navrail a.finder:hover { background: var(--mh-gold); color: var(--mh-cta-text); } /* theme toggle — lives in the topbar */ .mode-toggle { font: inherit; cursor: pointer; border: 1px solid rgba(255,255,255,.35); background: transparent; color: inherit; border-radius: var(--mh-r-pill); padding: .05rem .6rem; font-size: .78rem; display: inline-flex; align-items: center; gap: .3rem; } .mode-toggle:hover { border-color: #fff; } .mode-toggle:focus-visible { outline: 2px solid var(--mh-gold); outline-offset: 2px; } /* ================= BUTTONS ================= */ .btn { display: inline-block; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; border-radius: var(--mh-r-sm); padding: .55rem 1.1rem; border: 2px solid transparent; } .btn.gold { background: var(--mh-gold); color: var(--mh-cta-text); border-radius: 6px; } :root[data-mode="dark"] .btn.gold { color: var(--mh-on-primary); } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .btn.gold { color: var(--mh-on-primary); } } .btn.gold:hover { background: var(--mh-gold-hover); } .btn.ghost { background: transparent; color: var(--mh-hero-ink); border-color: currentColor; } .btn.ghost:hover { background: rgba(255,255,255,.12); } .btn.primary { background: var(--mh-primary); color: var(--mh-on-primary); } .btn.primary:hover { background: var(--mh-primary-2); } /* ================= PHOTO HERO (Alaska treatment: full-bleed photo under a teal veil) ================= */ :root { --mh-hero-gold: #e9c463; } /* gold on the hero photo — same in both modes (hero ground is always dark) */ .hero-photo { position: relative; color: #fff; background: #0a2e2b; isolation: isolate; } .hero-photo .bg { position: absolute; inset: 0; z-index: -2; background: url(../assets/hero-oregon.jpg) center 62% / cover no-repeat; } .hero-photo .veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8,50,44,.94) 0%, rgba(10,61,54,.86) 45%, rgba(13,92,82,.55) 100%); /* 10a veil */ } .hero-photo .inner { display: grid; gap: 2.4rem; grid-template-columns: 1.35fr 1fr; align-items: center; padding: 4.2rem 0 4rem; } .hero-photo h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); } .hero-photo h1 .accent-i { font-style: italic; color: var(--mh-hero-gold); } .hero-photo p.lede { font-size: var(--mh-size-3); max-width: 33rem; margin: .9rem 0 1.6rem; color: #d7e8e5; } .hero-photo .cta { display: flex; gap: .7rem; flex-wrap: wrap; } .hero-photo .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--mh-size-0); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mh-hero-gold); border: 1px solid rgba(244,201,93,.55); border-radius: var(--mh-r-pill); padding: .24rem .85rem; margin-bottom: 1.1rem; background: rgba(0,0,0,.18); } .statline { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.9rem; align-items: baseline; } .statline .s { display: flex; gap: .45rem; align-items: baseline; border-left: 2px solid rgba(244,201,93,.5); padding-left: .8rem; } .statline .s:first-child { border-left: 0; padding-left: 0; } .statline b { font-family: var(--mh-font-display); font-size: 1.4rem; color: #e9c463; font-variant-numeric: tabular-nums; } .statline span { font-size: var(--mh-size-0); text-transform: uppercase; letter-spacing: .06em; color: #b9d4d0; } /* the floating action panel on the hero — 10a: a light surface card */ .panel-card { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 16px; padding: 1.6rem 1.7rem; box-shadow: 0 16px 40px rgba(0,0,0,.3); color: var(--mh-ink); } .panel-card h3 { color: var(--mh-primary-deep); font-size: 1.2rem; margin-bottom: .2rem; } :root[data-mode="dark"] .panel-card h3 { color: var(--mh-ink); } .panel-card .sub { color: var(--mh-mute); font-size: var(--mh-size-1); margin: 0 0 1rem; } .panel-card label { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mh-faint); margin: .8rem 0 .3rem; } .panel-card input, .panel-card select { width: 100%; font: inherit; color: var(--mh-ink); background: var(--mh-surface); border: 1.5px solid var(--mh-line); border-radius: 8px; padding: .6rem .8rem; } .panel-card input::placeholder { color: var(--mh-faint); } .panel-card input:focus, .panel-card select:focus { outline: 2px solid var(--mh-primary); outline-offset: 1px; } .panel-card .btn { width: 100%; text-align: center; margin-top: 1.05rem; } .panel-card .fine { font-size: .74rem; color: var(--mh-faint); margin: .8rem 0 0; } .panel-card .fine a { font-weight: 600; } /* dark quick-action strip under the hero (deliberate contrast band, both modes) */ .quickstrip { background: #10201e; border-top: 3px solid var(--mh-hero-gold); color: #cfe3e1; } .quickstrip .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .quickstrip a.q { display: block; padding: 1.4rem 1.3rem 1.2rem; text-decoration: none; color: inherit; border-left: 1px solid rgba(255,255,255,.07); } .quickstrip a.q:first-child { border-left: 0; } .quickstrip a.q:hover { background: rgba(255,255,255,.05); } .quickstrip .q-ico { font-size: 1.25rem; display: block; margin-bottom: .5rem; } .quickstrip h4 { color: #fff; font-family: var(--mh-font-display); font-size: 1.02rem; margin-bottom: .25rem; } .quickstrip p { margin: 0; font-size: .84rem; color: #9fbdb9; } .quickstrip .q-arrow { display: inline-block; margin-top: .55rem; color: var(--mh-hero-gold); font-weight: 700; } /* ================= GRADIENT HERO (legacy band, still used by some layouts) ================= */ .hero { background: var(--mh-hero); color: var(--mh-hero-ink); } .hero .inner { padding: 3.4rem 0 3.8rem; display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr; align-items: center; } .hero h1 { color: #fff; } :root[data-mode="dark"] .hero h1 { color: var(--mh-ink); } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .hero h1 { color: var(--mh-ink); } } .hero .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--mh-size-0); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mh-hero-ink); border: 1px solid currentColor; border-radius: var(--mh-r-pill); padding: .22rem .8rem; margin-bottom: 1rem; opacity: .9; } .hero p.lede { font-size: var(--mh-size-3); max-width: 34rem; margin: .8rem 0 1.5rem; opacity: .92; } .hero .cta { display: flex; gap: .7rem; flex-wrap: wrap; } .stats { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; } .stat { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: var(--mh-r); padding: .85rem 1rem; } .stat b { display: block; font-size: 1.6rem; font-family: var(--mh-font-display); color: var(--mh-gold); font-variant-numeric: tabular-nums; } .stat span { font-size: var(--mh-size-0); text-transform: uppercase; letter-spacing: .08em; opacity: .8; } /* ================= SECTIONS, CARDS, CHIPS ================= */ .sec { padding: 2.4rem 0 0; } .sec-tag { display: inline-block; font-size: var(--mh-size-0); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mh-gold); margin-bottom: .4rem; } .sec-sub { color: var(--mh-mute); max-width: 44rem; margin: .45rem 0 1.4rem; } .section-title { font-size: var(--mh-size-4); margin: 0 0 1.1rem; } .section-title::after { content: ""; display: block; width: 54px; height: 4px; background: var(--mh-gold); border-radius: 2px; margin-top: .5rem; } .grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 1.2rem; } .card { background: var(--mh-surface); border: 1px solid var(--mh-line); border-top: 3px solid var(--mh-primary); border-radius: var(--mh-r-sm); padding: 1.2rem 1.3rem; box-shadow: var(--mh-shadow); display: flex; flex-direction: column; gap: .4rem; } .card .well { display: none; } /* design pass 7/19: cards are typographic — the teal keyline + serif title carry them; icons stay in the quickstrip/pathway where they earn their space */ .card p { margin: 0; color: var(--mh-mute); font-size: var(--mh-size-1); flex: 1; } .card .go { font-weight: 700; text-decoration: none; font-size: var(--mh-size-1); } .chip { display: inline-block; border-radius: var(--mh-r-pill); font-size: var(--mh-size-0); font-weight: 700; padding: .14rem .65rem; } .chip.ok { background: var(--mh-ok-soft); color: var(--mh-ok); } .chip.warn { background: var(--mh-warn-soft); color: var(--mh-warn); } .chip.info { background: var(--mh-info-soft); color: var(--mh-info); } .chip.bad { background: var(--mh-bad-soft); color: var(--mh-bad); } .chip.gold { background: var(--mh-gold-soft); color: var(--mh-gold); } /* section-header family (from the Caspio flex exemplars, tokenized) */ .hdr-band { background: linear-gradient(4deg, var(--mh-primary-deep), var(--mh-primary)); color: var(--mh-hero-ink); font-family: var(--mh-font-display); font-weight: 700; font-size: var(--mh-size-3); text-align: center; padding: .7rem 1.1rem; border-radius: var(--mh-r-sm); box-shadow: var(--mh-shadow); margin: 0 0 1.1rem; } :root[data-mode="dark"] .hdr-band { color: var(--mh-on-primary); } .hdr-band.outline { background: var(--mh-surface); color: var(--mh-primary); border: 2px solid var(--mh-line); box-shadow: none; } /* credential ladder */ .ladder { display: grid; gap: .55rem; margin-top: 1.1rem; } .rung { display: flex; align-items: center; gap: .9rem; background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: var(--mh-r-sm); padding: .7rem 1rem; } .rung .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mh-primary-2); flex: none; } .rung.reg .dot { background: var(--mh-gold); } .rung b { font-family: var(--mh-font-display); min-width: 5.4rem; } .rung span { color: var(--mh-mute); font-size: var(--mh-size-1); flex: 1; } .rung .chip { flex: none; } /* notices */ .notice { border-left: 5px solid var(--mh-gold); background: var(--mh-gold-soft); border-radius: 0 var(--mh-r-sm) var(--mh-r-sm) 0; padding: .9rem 1.15rem; margin: 1.2rem 0 0; font-size: var(--mh-size-1); } .notice.teal { border-color: var(--mh-primary-2); background: var(--mh-tint); } /* ================= CONTENT PAGES (rendered legacy content) ================= */ .page-head { background: var(--mh-hero); color: var(--mh-hero-ink); padding: 2.3rem 0 2.1rem; } .page-head .eyebrow-sm { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mh-hero-gold); margin-bottom: .45rem; } .page-head h1 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); } :root[data-mode="dark"] .page-head h1 { color: var(--mh-ink); } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .page-head h1 { color: var(--mh-ink); } } .crumbs { font-size: .8rem; color: var(--mh-hero-ink); opacity: .75; margin-bottom: .55rem; } .crumbs a { color: inherit; } /* redesigned-page building blocks (exemplar layouts) */ .steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: .7rem; margin: 1.2rem 0; } .steps li { counter-increment: step; display: flex; gap: .95rem; background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: var(--mh-r-sm); padding: .85rem 1rem; } .steps li::before { content: counter(step); flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mh-primary); color: var(--mh-on-primary); font-weight: 700; font-family: var(--mh-font-data); display: flex; align-items: center; justify-content: center; margin-top: .1rem; } .req-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 1.3rem 0; } .req-grid .card b.big { font-family: var(--mh-font-display); font-size: 1.9rem; font-weight: 600; color: var(--mh-primary); display: block; line-height: 1.1; } .cta-panel { background: var(--mh-hero); color: var(--mh-hero-ink); border-radius: var(--mh-r); padding: 1.6rem 1.7rem; margin: 2rem 0 0; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; } .cta-panel h3, .content .cta-panel h3 { color: #fff; } :root[data-mode="dark"] .cta-panel h3, :root[data-mode="dark"] .content .cta-panel h3 { color: var(--mh-ink); } .cta-panel p { margin: .2rem 0 0; opacity: .9; font-size: var(--mh-size-1); } .content { padding-top: 1.6rem; padding-bottom: 1.6rem; } .content > p { max-width: 78ch; } /* full-width container, readable prose measure */ .content h1, .content h2, .content h3 { color: var(--mh-primary); } .content h2 { font-size: 1.35rem; margin-top: 2rem; } .content h3 { font-size: 1.1rem; margin-top: 1.4rem; } .content table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: var(--mh-size-1); display: block; overflow-x: auto; } .content th { background: var(--mh-primary); color: var(--mh-on-primary); padding: .55rem .75rem; text-align: left; } .content td { border: 1px solid var(--mh-line); padding: .55rem .75rem; } .content tr:hover td { background: var(--mh-tint); } .content ul, .content ol { padding-left: 1.4rem; } .content li { margin: .3rem 0; } .content hr { border: 0; border-top: 1px solid var(--mh-line); margin: 2rem 0; } /* caspio embed slots (placeholder mode) */ .embed-slot { border: 2px dashed var(--mh-primary-2); border-radius: var(--mh-r); background: var(--mh-tint); padding: 1.6rem; margin: 1.4rem 0; text-align: center; color: var(--mh-mute); } .embed-slot .tag { display: inline-block; background: var(--mh-primary); color: var(--mh-on-primary); border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; padding: .2rem .6rem; margin-bottom: .5rem; } .embed-slot code { font-size: .8rem; } /* action button rows (registry/education/jobs section chrome) */ .btn-row { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.1rem 0 1.4rem; } /* important info pops: bolded phrases in content read as highlights */ .content strong { color: var(--mh-primary); } :root[data-mode="dark"] .content strong { color: var(--mh-primary); } /* LIVE caspio embeds — breathing room + a token surface while the DataPage loads */ .embed-frame { margin: 1.4rem 0; min-height: 120px; } .embed-frame.wide { width: 100%; overflow-x: auto; } .embed-frame .cxkg { display: none; } /* Caspio's "click here to load" fallback line */ /* Certemy enrollment buttons — any [data-certemy] element gets the gold CTA look (replaces the old inline-styled green buttons; legacy data-certemylink is converted at build) */ button[data-certemy], a[data-certemy] { display: inline-block; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; background: var(--mh-gold); color: var(--mh-cta-text); border: 0; border-radius: 8px; padding: .7rem 1.4rem; font-size: 1.02rem; margin: .5rem 0; } :root[data-mode="dark"] button[data-certemy], :root[data-mode="dark"] a[data-certemy] { color: var(--mh-on-primary); } button[data-certemy]:hover, a[data-certemy]:hover { background: var(--mh-gold-hover); } /* ============ credential-page variants (A: expandable steps · B: glance rail · C: tabs) ============ */ .steps details { flex: 1; } .steps summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: .6rem; } .steps summary::after { content: "+"; font-family: var(--mh-font-data); font-size: 1.1rem; color: var(--mh-gold); flex: none; } .steps details[open] summary::after { content: "–"; } .steps details .more { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--mh-line); color: var(--mh-mute); font-size: .9rem; } .railwrap { display: grid; gap: 1.6rem; grid-template-columns: minmax(0,1.6fr) minmax(280px,1fr); align-items: start; } .glance { position: sticky; top: 84px; background: var(--mh-surface); border: 1px solid var(--mh-line); border-top: 4px solid var(--mh-gold); border-radius: var(--mh-r); padding: 1.1rem 1.3rem; box-shadow: var(--mh-shadow); } .glance h4 { margin: 0 0 .5rem; text-transform: uppercase; font-size: .72rem; letter-spacing: .09em; color: var(--mh-gold); font-family: var(--mh-font-body); } .g-row { display: flex; justify-content: space-between; gap: 1rem; padding: .38rem 0; border-bottom: 1px solid var(--mh-line); font-size: .93rem; } .g-row b { font-family: var(--mh-font-data); text-align: right; } .glance .btn, .glance button[data-certemy] { width: 100%; text-align: center; margin-top: .9rem; } @media (max-width: 860px) { .railwrap { grid-template-columns: 1fr; } .glance { position: static; } } .tabbar { display: flex; gap: .25rem; border-bottom: 2px solid var(--mh-line); margin: 1rem 0 1.2rem; flex-wrap: wrap; } .tabbar button { font: inherit; font-weight: 700; font-size: .95rem; background: none; border: 0; cursor: pointer; color: var(--mh-mute); padding: .55rem 1rem; border-bottom: 3px solid transparent; margin-bottom: -2px; } .tabbar button.on { color: var(--mh-primary); border-bottom-color: var(--mh-gold); } .tabpanel[hidden] { display: none; } /* immersive Certemy page — full-bleed, no iframe chrome */ .certemy-full { width: 100%; background: var(--mh-ground); } .certemy-full iframe { display: block; width: 100%; border: 0; background: transparent; height: calc(100vh - 175px); min-height: 860px; } /* the shared Certemy modal */ .cmodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; } .cmodal[hidden] { display: none; } .cmodal-back { position: absolute; inset: 0; background: rgba(10, 30, 28, .62); } .cmodal-card { position: relative; background: var(--mh-surface); color: var(--mh-ink); border-radius: var(--mh-r); box-shadow: 0 24px 60px rgba(0,0,0,.4); max-width: 520px; width: 100%; padding: 1.6rem 1.8rem; border-top: 5px solid var(--mh-gold); } .cmodal-card h3 { font-size: 1.2rem; margin-bottom: .8rem; color: var(--mh-primary); } .cmodal-card ol { padding-left: 1.3rem; margin: 0 0 1.2rem; } .cmodal-card li { margin: .5rem 0; } .cmodal-actions { display: flex; gap: .7rem; justify-content: flex-end; flex-wrap: wrap; } .btn.quiet { background: transparent; color: var(--mh-mute); border: 2px solid var(--mh-line); } .btn.quiet:hover { border-color: var(--mh-mute); color: var(--mh-ink); } /* ================= FOOTER ================= */ footer.site { background: var(--mh-primary-deep); color: #8fa8a2; margin-top: 3rem; font-size: var(--mh-size-1); } :root[data-mode="dark"] footer.site { background: #00000038; } footer.site .cols { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 2.2rem 0 1.4rem; } footer.site h4 { color: #fff; font-family: var(--mh-font-body); font-size: var(--mh-size-1); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .5rem; } :root[data-mode="dark"] footer.site h4 { color: var(--mh-ink); } footer.site a { color: inherit; opacity: .85; text-decoration: none; display: block; padding: .16rem 0; } footer.site a:hover { opacity: 1; text-decoration: underline; } .legal { border-top: 1px solid rgba(255,255,255,.16); text-align: center; padding: .9rem 0; font-size: var(--mh-size-0); opacity: .75; } /* ================= MOBILE (design pass 7/19) ================= */ @media (max-width: 800px) { .hero .inner, .hero-photo .inner { grid-template-columns: 1fr; } nav.main { margin-left: 0; } } @media (max-width: 640px) { .wrap { padding: 0 1rem; } .topbar .wrap { justify-content: center; text-align: center; font-size: .72rem; } .topbar .wrap > span:first-child { display: none; } /* org name lives in the brand on phones */ .brand img { height: 44px; width: 44px; } .brand b { font-size: 1.15rem; } .brand small { display: none; } nav.main a { font-size: .84rem; padding: .38rem .5rem; } .hero-photo .inner { padding: 2.6rem 0 2.8rem; gap: 1.6rem; } .hero-photo h1 { font-size: 1.75rem; } .hero-photo p.lede { font-size: 1.02rem; } .statline { gap: .9rem; } .statline .s { border-left: 0; padding-left: 0; } .panel-card { padding: 1.1rem 1.15rem; } .page-head { padding: 1.6rem 0 1.5rem; } .page-head h1 { font-size: 1.45rem; } .quickstrip a.q { padding: 1rem 1.1rem .9rem; border-left: 0; border-top: 1px solid rgba(255,255,255,.07); } .sec { padding: 1.8rem 0 0; } .pathway .link { display: none; } .pathway { gap: .8rem; } .cta-panel { padding: 1.2rem 1.3rem; } .cta-panel .btn, .cta-panel button[data-certemy] { width: 100%; text-align: center; } .btn-row .btn { flex: 1 1 auto; text-align: center; } .rung { flex-wrap: wrap; } .rung span:not(.dot):not(.chip) { flex-basis: 100%; order: 3; } .content table { font-size: .82rem; } .certemy-full iframe { height: calc(100vh - 120px); min-height: 640px; } footer.site .cols { gap: 1.1rem; padding: 1.6rem 0 1rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ================================================================ SNIPPET HERITAGE — Van's django CMS snippet components (2026-07-18 harvest, data/snippets/), modified onto the token system. Source originals: css_styling (header taxonomy, list columns, buttons), career_pathway (icon-node pathway), cadc-i-requirements (icon trio -> became .req-grid). Purpose colors now ride the palette. ================================================================ */ /* purpose headers — certification / renewal / registration */ .h-cert, .h-renew, .h-reg { font-family: var(--mh-font-display); font-size: 1.45rem; font-weight: 700; color: var(--mh-ink); text-align: center; padding-bottom: .5rem; margin: 1.6rem 0 1.2rem; border-bottom: 3px solid var(--mh-primary); } .h-cert::before { content: "🎓 "; font-size: 1.15rem; vertical-align: middle; } .h-renew { border-bottom-color: var(--mh-ok); } .h-renew::before { content: "🔄 "; font-size: 1.15rem; vertical-align: middle; } .h-reg { border-bottom-color: var(--mh-info); } .h-reg::before { content: "📝 "; font-size: 1.15rem; vertical-align: middle; } /* caps accent header (was .caps-accent-header) */ .h-caps { font-family: var(--mh-font-display); font-size: 1.8rem; font-weight: 700; color: var(--mh-ink); text-align: center; text-transform: uppercase; letter-spacing: .12em; margin: 1.6rem 0 1.2rem; } .h-caps::after { content: ""; display: block; width: 64px; height: 3px; background: var(--mh-gold); margin: .5rem auto 0; border-radius: 2px; } /* overline header (was .overline-header) */ .h-overline { text-align: center; position: relative; padding-top: .6rem; margin: 1.6rem 0 1.2rem; font-size: 1.35rem; } .h-overline::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 4px; background: var(--mh-gold); border-radius: 2px; } /* highlight-bar header (was .highlight-bar-header — the #4f8e8a bar, now gold) */ .h-bar { font-size: 1.15rem; font-weight: 700; padding-left: .95rem; position: relative; margin: 1.5rem 0 .8rem; font-family: var(--mh-font-body); } .h-bar::before { content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 5px; border-radius: 3px; background: var(--mh-gold); } /* ribbon header (was .ribbon-header) */ .h-ribbon { font-family: var(--mh-font-display); font-size: 1.3rem; font-weight: 700; color: var(--mh-on-primary); background: var(--mh-primary); padding: .5rem 1.2rem; text-align: center; position: relative; width: fit-content; margin: 1.6rem auto 1.2rem; z-index: 0; } .h-ribbon::before, .h-ribbon::after { content: ""; position: absolute; top: 50%; width: 20px; height: 20px; background: var(--mh-primary-deep); transform: translateY(-50%) rotate(45deg); z-index: -1; } .h-ribbon::before { left: -10px; } .h-ribbon::after { right: -10px; } /* multi-column list (was .list-container — cleaned: token surfaces, no bg hack) */ .list-cols { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: var(--mh-r-sm); padding: 1.2rem 1.4rem; box-shadow: var(--mh-shadow); margin: 1.2rem 0; } .list-cols ul { columns: 2; column-gap: 2.6rem; column-rule: 1px solid var(--mh-line); margin: 0; padding-left: 1.2rem; } .list-cols li { break-inside: avoid; margin: .35rem 0; } @media (max-width: 640px) { .list-cols ul { columns: 1; } } /* credential pathway (was career_pathway: icon nodes + connecting line) */ .pathway { display: flex; align-items: flex-start; gap: 0; justify-content: center; flex-wrap: wrap; margin: 1.6rem 0; } .pathway .node { display: flex; flex-direction: column; align-items: center; text-align: center; width: 108px; } .pathway .dot { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mh-tint); border: 2px solid var(--mh-primary); color: var(--mh-primary); font-size: 1.35rem; transition: transform .15s; } .pathway .node:hover .dot { transform: scale(1.1); background: var(--mh-primary); color: var(--mh-on-primary); } .pathway .node b { font-family: var(--mh-font-data); font-size: .82rem; margin-top: .45rem; } .pathway .node small { color: var(--mh-mute); font-size: .68rem; line-height: 1.3; } .pathway .link { flex: 1; max-width: 70px; height: 2px; background: var(--mh-line); margin-top: 29px; min-width: 24px; } /* ================================================================ CASPIO ALIAS LAYER — script-embedded DataPages live in THIS document, so these aliases hand them the site palette. Same names as the SSR flex theme; dark mode follows automatically because every alias points at an --mh-* token. ================================================================ */ :root { --cas-global-color-primary: var(--mh-primary); --cas-global-color-primary-light: var(--mh-primary-2); --cas-global-color-primary-dark: var(--mh-primary-deep); --cas-global-color-background: var(--mh-ground); --cas-global-color-background-base: var(--mh-surface); --cas-global-color-background-variant: var(--mh-tint); --cas-global-color-text: var(--mh-ink); --cas-global-color-text-inverse: var(--mh-on-primary); --cas-global-color-text-disabled: var(--mh-mute); --cas-global-color-border: var(--mh-line); --cas-global-color-line: var(--mh-line); --cas-global-color-link: var(--mh-primary); --cas-global-color-success: var(--mh-ok); --cas-global-color-warning: var(--mh-warn); --cas-global-color-danger: var(--mh-bad); --cas-global-color-info: var(--mh-info); --cas-global-border-radius: var(--mh-r-sm); --cas-common-button-primary-background: var(--mh-primary); --cas-common-button-primary-text-color: var(--mh-on-primary); --cas-common-button-primary-background-hover: var(--mh-primary-2); --cas-common-input-background: var(--mh-surface); --cas-common-input-text-color: var(--mh-ink); --cas-common-input-border-color: var(--mh-line); --cas-common-input-focus-border-color: var(--mh-primary); --cas-datapart-table-header-background: var(--mh-primary); --cas-datapart-table-header-text-color: var(--mh-on-primary); --cas-datapart-table-cell-background: var(--mh-surface); --cas-datapart-table-cell-text-color: var(--mh-ink); --cas-datapart-table-border-color: var(--mh-line); --cas-datapart-table-row-hover-background: var(--mh-tint); } /* Starter skin for CLASSIC DataPage markup (cb* classes) — tune against live embeds during the embed pass. */ .cbFormSection, .cbSearchSpa, .cbResultSetPanel { font-family: var(--mh-font-body); color: var(--mh-ink); } .cbResultSetTable { border: 1px solid var(--mh-line) !important; } .cbResultSetLabel, .cbResultSetHeaderCell, .cbResultSetTable th { background: var(--mh-primary) !important; color: var(--mh-on-primary) !important; } .cbResultSetData, .cbResultSetTableCell, .cbResultSetTable td { background: var(--mh-surface) !important; color: var(--mh-ink) !important; border-color: var(--mh-line) !important; } .cbResultSetOddRow { background: var(--mh-ground) !important; } .cbSearchButton, .cbSubmitButton, .cbUpdateButton { background: var(--mh-primary) !important; color: var(--mh-on-primary) !important; border: 0 !important; border-radius: var(--mh-r-sm) !important; font-family: var(--mh-font-body) !important; padding: .5rem 1rem !important; cursor: pointer; } .cbSearchButton:hover, .cbSubmitButton:hover { background: var(--mh-primary-2) !important; } .cbFormTextField, .cbFormSelect, .cbFormTextArea { background: var(--mh-surface) !important; color: var(--mh-ink) !important; border: 1px solid var(--mh-line) !important; border-radius: var(--mh-r-sm) !important; } /* ================================================================ VAN'S NAV-WRAP COMPONENTS (jobs + education) — harvested from the live site 2026-07-19, included near-verbatim (his design, approved look). Light-surface styled; used on /en/jobs/ and /en/education/. ================================================================ */ .mhacbo-jobs-nav-wrap, .mhacbo-jobs-nav-wrap *, .mhacbo-jobs-modal, .mhacbo-jobs-modal *, .mhacbo-edu-nav-wrap, .mhacbo-edu-nav-wrap * { box-sizing: border-box; } .mhacbo-jobs-nav-wrap, .mhacbo-edu-nav-wrap { width: 100%; margin: 0 auto 28px; } .mhacbo-jobs-nav, .mhacbo-edu-nav { width: 100%; margin: 10px auto 0; padding: 14px; display: grid; gap: 12px; background: #f7faf9; border: 1px solid #e2ece9; border-radius: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.05); } .mhacbo-jobs-nav { grid-template-columns: repeat(4, minmax(0,1fr)); } .mhacbo-edu-nav { grid-template-columns: repeat(6, minmax(0,1fr)); } .mhacbo-jobs-nav-link, .mhacbo-edu-nav-link { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 74px; padding: 13px 15px; border-radius: 15px; border: 1px solid #dbe5e2; background: rgba(255,255,255,.9); color: #18423d; text-decoration: none; overflow: hidden; transition: transform .22s, box-shadow .22s, background .22s, border-color .22s, color .22s; } .mhacbo-jobs-nav-link::before, .mhacbo-edu-nav-link::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: #0d5c52; opacity: .95; } .mhacbo-jobs-nav-link:hover, .mhacbo-jobs-nav-link:focus, .mhacbo-edu-nav-link:hover, .mhacbo-edu-nav-link:focus { background: #0d5c52; border-color: #0d5c52; color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11,103,96,.18); outline: none; } .mhacbo-jobs-nav-kicker, .mhacbo-edu-nav-kicker { display: block; margin-bottom: 4px; font-size: .68rem; font-weight: 850; letter-spacing: .075em; line-height: 1.2; text-transform: uppercase; color: #0d5c52; } .mhacbo-jobs-nav-link:hover .mhacbo-jobs-nav-kicker, .mhacbo-edu-nav-link:hover .mhacbo-edu-nav-kicker, .mhacbo-jobs-nav-link:focus .mhacbo-jobs-nav-kicker, .mhacbo-edu-nav-link:focus .mhacbo-edu-nav-kicker { color: rgba(255,255,255,.82); } /* color:inherit defends against .content strong's sitewide teal — on the teal hover/current-page fills the label must follow the link's own color */ .mhacbo-jobs-nav-link strong, .mhacbo-edu-nav-link strong { display: block; font-size: 1rem; line-height: 1.15; font-weight: 850; color: inherit; } .mhacbo-jobs-nav-link--post, .mhacbo-edu-nav-link--submit { background: rgba(11,103,96,.08); border-color: rgba(11,103,96,.28); } .mhacbo-jobs-nav-link--post::before, .mhacbo-edu-nav-link--submit::before { background: #14695e; } .mhacbo-jobs-nav-link--post .mhacbo-jobs-nav-kicker, .mhacbo-edu-nav-link--submit .mhacbo-edu-nav-kicker { color: #14695e; } .mhacbo-edu-nav-link--registry::before { background: #5f259f; } .mhacbo-edu-nav-link--registry .mhacbo-edu-nav-kicker { color: #5f259f; } .mhacbo-edu-nav-link--registry:hover, .mhacbo-edu-nav-link--registry:focus { background: #5f259f; border-color: #5f259f; } .mhacbo-jobs-nav-link--account, .mhacbo-edu-nav-link--account { background: rgba(15,118,110,.07); border-color: rgba(15,118,110,.24); } .mhacbo-jobs-nav-link--account::before, .mhacbo-edu-nav-link--account::before { background: #0f766e; } .mhacbo-jobs-nav-link--account .mhacbo-jobs-nav-kicker, .mhacbo-edu-nav-link--account .mhacbo-edu-nav-kicker { color: #0f766e; } .mhacbo-jobs-nav-link--account:hover, .mhacbo-edu-nav-link--account:hover { background: #0f766e; border-color: #0f766e; color: #fff; } .mhacbo-jobs-nav-link--login, .mhacbo-edu-nav-link--login { background: rgba(52,58,64,.06); border-color: rgba(52,58,64,.25); } .mhacbo-jobs-nav-link--login::before, .mhacbo-edu-nav-link--login::before { background: #343a40; } .mhacbo-jobs-nav-link--login .mhacbo-jobs-nav-kicker, .mhacbo-edu-nav-link--login .mhacbo-edu-nav-kicker { color: #343a40; } .mhacbo-jobs-nav-link--login:hover, .mhacbo-edu-nav-link--login:hover { background: #343a40; border-color: #343a40; color: #fff; } .mhacbo-jobs-nav-link.current-page, .mhacbo-edu-nav-link.current-page { background: linear-gradient(135deg, #0d5c52, #14695e) !important; border-color: #0d5c52 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(11,103,96,.18); transform: none; } .mhacbo-jobs-nav-link.current-page::before, .mhacbo-edu-nav-link.current-page::before { background: rgba(255,255,255,.55); } .mhacbo-jobs-nav-link.current-page .mhacbo-jobs-nav-kicker, .mhacbo-edu-nav-link.current-page .mhacbo-edu-nav-kicker { color: rgba(255,255,255,.82) !important; } .mhacbo-jobs-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; } .mhacbo-jobs-modal.is-open { display: flex; } .mhacbo-jobs-modal-backdrop { position: absolute; inset: 0; background: rgba(12,25,24,.58); backdrop-filter: blur(3px); } .mhacbo-jobs-modal-card { position: relative; width: min(100%,560px); padding: 28px; border-radius: 20px; background: #fff; color: #18423d; border: 1px solid #dbe5e2; box-shadow: 0 24px 70px rgba(0,0,0,.28); z-index: 1; } .mhacbo-jobs-modal-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: #f2f6f5; color: #18423d; font-size: 1.6rem; line-height: 1; cursor: pointer; } .mhacbo-jobs-modal-badge { display: inline-flex; margin-bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(11,103,96,.1); color: #0d5c52; font-size: .74rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; } .mhacbo-jobs-modal-card h2 { margin: 0 0 12px; color: #18423d; font-size: 1.55rem; line-height: 1.15; } .mhacbo-jobs-modal-card p { margin: 0 0 12px; color: #355b56; } .mhacbo-jobs-modal-note { margin: 18px 0 0; padding: 14px 16px; border-left: 5px solid #14695e; border-radius: 12px; background: #f0fbfa; color: #18423d; } .mhacbo-jobs-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .mhacbo-jobs-modal-primary, .mhacbo-jobs-modal-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px; border-radius: 12px; font-weight: 850; text-decoration: none; cursor: pointer; } .mhacbo-jobs-modal-primary { border: 1px solid #0d5c52; background: #0d5c52; color: #fff; } .mhacbo-jobs-modal-primary:hover { background: #14695e; border-color: #14695e; } .mhacbo-jobs-modal-secondary { border: 1px solid #dbe5e2; background: #fff; color: #18423d; } body.mhacbo-jobs-modal-open { overflow: hidden; } /* dark-mode pass: same layout, surfaces/borders/labels re-tokened; the teal hover + current-page fills already read fine on dark */ :root[data-mode="dark"] .mhacbo-jobs-nav, :root[data-mode="dark"] .mhacbo-edu-nav { background: var(--mh-surface); border-color: var(--mh-line); box-shadow: none; } :root[data-mode="dark"] .mhacbo-jobs-nav-link, :root[data-mode="dark"] .mhacbo-edu-nav-link { background: rgba(255,255,255,.05); border-color: var(--mh-line); color: var(--mh-ink); } :root[data-mode="dark"] .mhacbo-jobs-nav-kicker, :root[data-mode="dark"] .mhacbo-edu-nav-kicker { color: var(--mh-faint); } :root[data-mode="dark"] .mhacbo-edu-nav-link--registry .mhacbo-edu-nav-kicker { color: #b18ae8; } :root[data-mode="dark"] .mhacbo-jobs-nav-link--account .mhacbo-jobs-nav-kicker, :root[data-mode="dark"] .mhacbo-edu-nav-link--account .mhacbo-edu-nav-kicker { color: #5cc8bd; } :root[data-mode="dark"] .mhacbo-jobs-nav-link--login .mhacbo-jobs-nav-kicker, :root[data-mode="dark"] .mhacbo-edu-nav-link--login .mhacbo-edu-nav-kicker { color: var(--mh-mute); } :root[data-mode="dark"] .mhacbo-jobs-nav-link:hover, :root[data-mode="dark"] .mhacbo-jobs-nav-link:focus, :root[data-mode="dark"] .mhacbo-edu-nav-link:hover, :root[data-mode="dark"] .mhacbo-edu-nav-link:focus { background: var(--mh-panel-teal); border-color: var(--mh-panel-teal); color: #fff; } :root[data-mode="dark"] .mhacbo-jobs-nav-link:hover strong, :root[data-mode="dark"] .mhacbo-edu-nav-link:hover strong, :root[data-mode="dark"] .mhacbo-jobs-nav-link:focus strong, :root[data-mode="dark"] .mhacbo-edu-nav-link:focus strong, :root[data-mode="dark"] .mhacbo-jobs-nav-link.current-page strong, :root[data-mode="dark"] .mhacbo-edu-nav-link.current-page strong { color: #fff; } :root[data-mode="dark"] .mhacbo-jobs-nav-link:hover .mhacbo-jobs-nav-kicker, :root[data-mode="dark"] .mhacbo-edu-nav-link:hover .mhacbo-edu-nav-kicker { color: rgba(255,255,255,.82); } :root[data-mode="dark"] .mhacbo-jobs-modal-card { background: var(--mh-surface); color: var(--mh-ink); border-color: var(--mh-line); } :root[data-mode="dark"] .mhacbo-jobs-modal-card h2, :root[data-mode="dark"] .mhacbo-jobs-modal-card p { color: var(--mh-ink); } :root[data-mode="dark"] .mhacbo-jobs-modal-note { background: rgba(255,255,255,.06); color: var(--mh-ink); } :root[data-mode="dark"] .mhacbo-jobs-modal-close { background: rgba(255,255,255,.1); color: var(--mh-ink); } :root[data-mode="dark"] .mhacbo-jobs-modal-secondary { background: transparent; color: var(--mh-ink); border-color: var(--mh-line); } @media (max-width: 1180px) { .mhacbo-jobs-nav { grid-template-columns: repeat(3,minmax(0,1fr)); } .mhacbo-edu-nav { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width: 820px) { .mhacbo-jobs-nav, .mhacbo-edu-nav { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media (max-width: 640px) { .mhacbo-jobs-nav, .mhacbo-edu-nav { display: flex; overflow-x: auto; gap: 10px; padding: 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .mhacbo-jobs-nav-link, .mhacbo-edu-nav-link { flex: 0 0 215px; min-height: 68px; scroll-snap-align: start; } } /* generic in-page switcher for sibling form pages (extensions etc.) — the tokenized, dark-safe replacement for the legacy "toggle menu" strips */ .pagenav { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 1.8rem; } .pagenav a { display: flex; flex-direction: column; gap: 2px; padding: 13px 18px; border: 1.5px solid var(--mh-line); border-radius: 12px; background: var(--mh-surface); text-decoration: none; } .pagenav a b { color: var(--mh-ink); font-size: .96rem; } .pagenav a small { color: var(--mh-mute); font-size: .78rem; font-weight: 600; } .pagenav a:hover { border-color: var(--mh-primary); } .pagenav a.on { background: var(--mh-panel-teal); border-color: var(--mh-panel-teal); } .pagenav a.on b { color: #fff; } .pagenav a.on small { color: rgba(255,255,255,.75); } /* report/media links read as download buttons */ .content a[href*="/media/"] { display: inline-block; background: var(--mh-primary); color: var(--mh-on-primary); font-weight: 700; text-decoration: none; padding: .45rem 1rem; border-radius: var(--mh-r-sm); margin: .25rem 0; } .content a[href*="/media/"]::before { content: "⬇ "; } .content a[href*="/media/"]:hover { background: var(--mh-primary-2); color: var(--mh-on-primary); } /* FAQ accordion items */ .faq-item { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: var(--mh-r-sm); padding: .8rem 1.1rem; margin: .5rem 0; } .faq-item summary { cursor: pointer; font-weight: 700; font-family: var(--mh-font-display); font-size: 1.05rem; color: var(--mh-primary); list-style: none; display: flex; justify-content: space-between; gap: .6rem; align-items: center; } .faq-item summary::after { content: "+"; font-family: var(--mh-font-data); color: var(--mh-gold); font-size: 1.2rem; } .faq-item[open] summary::after { content: "–"; } .faq-item[open] summary { margin-bottom: .5rem; } /* ================================================================ STAFF PORTAL SHELL — internal tool pages (/en/admin/*, /en/portal/*) Replaces the old fixed dark sidebar with a grouped, sticky rail. ================================================================ */ .portal-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-top: 1.4rem; padding-bottom: 2rem; } .staff-rail { position: sticky; top: 78px; background: var(--mh-primary-deep); border-radius: var(--mh-r); padding: 1rem .8rem 1.2rem; color: var(--mh-hero-ink); max-height: calc(100vh - 95px); overflow-y: auto; } :root[data-mode="dark"] .staff-rail { background: #101c1a; } .staff-badge { font-size: .64rem; font-weight: 800; letter-spacing: .14em; color: var(--mh-hero-gold); border: 1px solid rgba(244,201,93,.4); border-radius: 6px; text-align: center; padding: .3rem .4rem; margin-bottom: .8rem; } .staff-rail .grp { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin: .9rem .5rem .25rem; } .staff-rail a { display: flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; font-size: .9rem; font-weight: 600; padding: .42rem .55rem; border-radius: 8px; opacity: .92; } .staff-rail a .ico { width: 1.25em; text-align: center; flex: none; } .staff-rail a:hover { background: rgba(255,255,255,.1); opacity: 1; } .staff-rail a.on { background: var(--mh-hero-gold); color: #10201c; opacity: 1; } .staff-title { font-size: 1.6rem; margin-bottom: .9rem; } .staff-tiles { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 1.4rem; } .stile { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; text-decoration: none; background: var(--mh-surface); border: 1px solid var(--mh-line); border-left: 4px solid var(--mh-primary); border-radius: var(--mh-r-sm); padding: .7rem .85rem; color: var(--mh-ink); font-size: .86rem; } .stile:hover { border-left-color: var(--mh-gold); background: var(--mh-tint); color: var(--mh-ink); } .stile span { font-size: 1.05rem; } .stile b { font-size: .88rem; } @media (max-width: 900px) { .portal-layout { grid-template-columns: 1fr; } .staff-rail { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: .15rem; align-items: center; } .staff-rail .grp { flex-basis: 100%; margin: .5rem .3rem .1rem; } .staff-rail a { font-size: .82rem; padding: .35rem .5rem; } .staff-badge { flex-basis: 100%; } } /* ================= CREDENTIAL FINDER (design 3b) ================= */ .finder-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; margin-top: .6rem; } .fstack { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; } .fcard { display: block; border: 1px solid var(--mh-line); border-radius: 14px; padding: 26px 30px; background: var(--mh-surface); text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s; } .fcard:hover { border-color: var(--mh-primary); box-shadow: var(--mh-shadow-hover); color: inherit; } .ftitle { font-family: var(--mh-font-display); font-weight: 600; font-size: 1.4rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .ftitle { color: var(--mh-ink); } .ftitle.sm { font-size: 1.18rem; } .fsub { font-size: .84rem; color: var(--mh-mute); margin: 8px 0 18px; } .fladder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .78rem; font-weight: 700; margin-top: 12px; } .lchip { background: var(--mh-tint); color: var(--mh-primary); padding: 6px 12px; border-radius: 99px; } .lchip.gold { background: #e9c463; color: #231a05; } .lchip.outline { background: var(--mh-surface); border: 1.5px solid var(--mh-primary); color: var(--mh-primary); } .lchip.solid { background: var(--mh-primary); color: var(--mh-on-primary); } .larrow { color: #cfc9b6; } .ldot { color: #cfc9b6; margin: 0 4px; } .lnote { font-weight: 500; color: var(--mh-faint); font-size: .75rem; } .fgo { margin-top: 16px; font-size: .84rem; font-weight: 700; color: var(--mh-primary); } .pattern-band { margin: 28px 0 12px; background: var(--mh-ground); border: 1px solid var(--mh-line); border-radius: 14px; padding: 26px 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } :root[data-mode="dark"] .pattern-band { background: var(--mh-surface); } .pb-title { flex: none; font-family: var(--mh-font-display); font-weight: 600; font-size: 1.25rem; color: var(--mh-primary-deep); max-width: 230px; } :root[data-mode="dark"] .pb-title { color: var(--mh-ink); } .pb-steps { display: flex; align-items: center; gap: 14px; font-size: .82rem; flex-wrap: wrap; } .pb-arrow { color: var(--mh-gold-text); font-weight: 800; } .pb-note { font-size: .78rem; color: var(--mh-faint); width: 100%; } @media (max-width: 860px) { .finder-grid { grid-template-columns: 1fr; } } /* ================================================================ REBRAND PHASE 2 (Claude Design handoff, approved templates) 3a+1c credential hybrid · 2a track · 2b people · 2c process · 2d forms ================================================================ */ :root { --mh-panel-teal: #0d5c52; } /* brand teal that stays teal in dark mode (panels, avatars) */ /* --- taller page-head hero with lede / stats / overlap variants --- */ .page-head.tall { padding: 3rem 0 3.2rem; } .page-head .lede { color: var(--mh-hero-ink); max-width: 42rem; line-height: 1.6; margin: .7rem 0 0; font-size: var(--mh-size-2); } .page-head h1 em { font-style: normal; color: var(--mh-hero-gold); } .page-head .duo { display: flex; justify-content: space-between; align-items: flex-end; gap: 2.2rem; flex-wrap: wrap; } .hero-stats { display: flex; gap: 12px; flex-wrap: wrap; flex: none; } .hero-stats .stat { min-width: 128px; max-width: 175px; } .page-head.overlap { padding-bottom: 4.8rem; } .pull-up { margin-top: -3.2rem; position: relative; z-index: 2; } /* --- 3a+1c: floating question banner + yes/no router --- */ .qbanner { position: relative; z-index: 3; margin-bottom: -46px; background: var(--mh-surface); border-radius: 14px; box-shadow: var(--mh-shadow-float); padding: 22px 30px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .qbanner .qmark { width: 44px; height: 44px; border-radius: 50%; background: var(--mh-gold-soft); color: var(--mh-gold-text); display: flex; align-items: center; justify-content: center; font: 600 1.3rem var(--mh-font-display); flex: none; } .qbanner .qbody { flex: 1; min-width: 240px; } .qbanner .qtitle { font-family: var(--mh-font-display); font-weight: 600; font-size: 1.12rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .qbanner .qtitle { color: var(--mh-ink); } .qbanner .qsub { font-size: .82rem; color: var(--mh-mute); margin-top: 3px; } .qbanner .qsub strong { color: var(--mh-warn); } .route-btns { display: flex; gap: 12px; flex: none; flex-wrap: wrap; } .route-btns button { cursor: pointer; font: 700 .88rem var(--mh-font-body); padding: 11px 28px; border-radius: var(--mh-r-pill); border: 2px solid var(--mh-primary); transition: background .15s; } .route-btns .yes { background: var(--mh-primary); color: var(--mh-on-primary); } .route-btns .yes:hover { background: var(--mh-primary-2); border-color: var(--mh-primary-2); } .route-btns .no { background: transparent; color: var(--mh-primary); } .route-btns .no:hover { background: var(--mh-tint); } .route-picked { display: none; align-items: center; gap: 10px; font-size: .84rem; flex-wrap: wrap; } .route-picked .chip { background: var(--mh-tint); color: var(--mh-primary); font-weight: 700; padding: 6px 14px; border-radius: var(--mh-r-pill); } .route-picked .reset { cursor: pointer; background: none; border: 0; padding: 0; font: 600 .82rem var(--mh-font-body); color: var(--mh-warn); text-decoration: underline; } .qbanner.answered .route-btns { display: none; } .qbanner.answered .route-picked { display: flex; } /* --- 3a: the split fork (degree / non-degree) --- */ .fork { display: grid; grid-template-columns: 1fr 1fr; position: relative; } .fork .orb { position: absolute; left: 50%; top: 118px; transform: translateX(-50%); z-index: 2; width: 50px; height: 50px; border-radius: 50%; background: var(--mh-gold); color: var(--mh-cta-text); font: 700 .82rem var(--mh-font-body); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); } .fk { padding: 92px clamp(1.1rem, 4vw, 4.5rem) 48px; display: flex; flex-direction: column; gap: 18px; } .fk .num { font: 600 clamp(3.2rem, 6vw, 5rem)/1 var(--mh-font-display); } .fk .fk-name { font: 600 clamp(1.5rem, 2.6vw, 2rem) var(--mh-font-display); } .fk .fk-who { font-size: .9rem; font-weight: 700; margin-top: 6px; } .fk .fk-reqs { display: flex; flex-direction: column; gap: 11px; font-size: .9rem; padding-top: 18px; } .fk .fk-reqs > div { display: flex; gap: 12px; } .fk .fk-reqs .tick { font-weight: 800; flex: none; } .fk .fk-cta { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 10px; } .fk .fk-cta button, .fk .fk-cta a { display: block; width: 100%; text-align: center; font: 700 .92rem var(--mh-font-body); padding: 15px 18px; border-radius: var(--mh-r-pill); border: 0; cursor: pointer; text-decoration: none; transition: background .15s; } .fk .fk-note { text-align: center; font-size: .74rem; } .fk.deg { background: var(--mh-ground); } .fk.deg .num { color: #dcd4bd; } :root[data-mode="dark"] .fk.deg .num { color: var(--mh-tint); } .fk.deg .fk-name { color: var(--mh-primary-deep); } :root[data-mode="dark"] .fk.deg .fk-name { color: var(--mh-ink); } .fk.deg .fk-who { color: var(--mh-gold-text); } .fk.deg .fk-reqs { color: var(--mh-ink); border-top: 1px solid var(--mh-line); } .fk.deg .fk-reqs .tick { color: var(--mh-gold-text); } .fk.deg .fk-cta button { background: var(--mh-panel-teal); color: #fff; } .fk.deg .fk-cta button:hover { background: #0a3d36; } .fk.deg .fk-note { color: var(--mh-faint); } .fk.non { background: var(--mh-panel-teal); border-left: 1px solid rgba(255,255,255,.14); } .fk.non .num { color: rgba(255,255,255,.16); } .fk.non .fk-name { color: #fff; } .fk.non .fk-who { color: #e9c463; } .fk.non .fk-reqs { color: #d6e4e0; border-top: 1px solid rgba(255,255,255,.16); } .fk.non .fk-reqs .tick { color: #e9c463; } .fk.non .fk-reqs a { color: #e9c463; font-weight: 600; } .fk.non .fk-cta button { background: #e9c463; color: #231a05; } .fk.non .fk-cta button:hover { background: #d9a520; } .fk.non .fk-note { color: #a9c9c2; } /* router outcome: only the chosen path remains, centered full-width */ .fork.route-yes .fk.non, .fork.route-no .fk.deg, .fork.route-yes .orb, .fork.route-no .orb { display: none; } .fork.route-yes, .fork.route-no { grid-template-columns: 1fr; } .fork.route-yes .fk, .fork.route-no .fk { border-left: 0; } .fork.route-yes .fk .fk-cta, .fork.route-no .fk .fk-cta { max-width: 560px; width: 100%; margin-left: auto; margin-right: auto; } /* --- 3a: "what happens next" road (timeline band) --- */ .roadband { background: var(--mh-ground); border-top: 1px solid var(--mh-line); padding: 44px 0 54px; } :root[data-mode="dark"] .roadband { background: var(--mh-surface); } .roadband .kicker { font: 600 .72rem var(--mh-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mh-gold-text); margin-bottom: 8px; } .roadband h2 { font-size: 1.55rem; margin-bottom: 28px; color: var(--mh-primary-deep); } :root[data-mode="dark"] .roadband h2 { color: var(--mh-ink); } .road { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; } .road::before { content: ""; position: absolute; top: 19px; left: 12%; right: 12%; height: 2px; background: var(--mh-line); } .rstep { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; } .rstep .rdot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--mh-surface); border: 2px solid var(--mh-primary); color: var(--mh-primary); } .rstep.now .rdot { background: var(--mh-primary); color: var(--mh-on-primary); } .rstep.goal .rdot { border-color: var(--mh-gold); color: var(--mh-gold-text); } .rstep b { font-size: .88rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .rstep b { color: var(--mh-ink); } .rstep small { font-size: .76rem; color: var(--mh-mute); max-width: 230px; line-height: 1.5; } /* --- 2a: on-hero ladder panels with rung circles --- */ .ladder-panels { margin-top: 2.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .lpanel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 26px 30px; } .lpanel .lhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .lpanel .lhead b { font: 600 1.35rem var(--mh-font-display); color: #fff; } .lpanel .lhead span { font-size: .74rem; color: #a9c9c2; } .rungs { display: flex; align-items: center; margin-top: 24px; } .rungs.short { max-width: 420px; margin-left: auto; margin-right: auto; } .lrung { flex: 1; text-align: center; } /* "lrung" not "rung" — .rung is the credential-page ladder ROW component */ .lrung .rc { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 .82rem var(--mh-font-body); } .lrung.fill .rc { background: #e9c463; color: #231a05; } .lrung.ring .rc { border: 2px solid #e9c463; color: #e9c463; } .lrung.dim .rc { border: 2px solid rgba(255,255,255,.4); color: #cfe0dc; } .lrung b { display: block; font-size: .8rem; margin-top: 10px; color: #fff; } .lrung small { font-size: .68rem; color: #a9c9c2; } .rbar { flex: 1; height: 2px; background: rgba(255,255,255,.25); margin-top: -34px; min-width: 20px; } /* --- 2a: step cards with mono kicker --- */ .kgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin-top: 1.2rem; } .kcard { border: 1px solid var(--mh-line); border-radius: 12px; padding: 24px 26px; background: var(--mh-surface); display: flex; flex-direction: column; } .kcard.entry { border-top: 4px solid var(--mh-gold); } .kcard.alt { background: var(--mh-ground); } :root[data-mode="dark"] .kcard.alt { background: var(--mh-tint); } .kcard .kick { font: 600 .66rem var(--mh-font-data); letter-spacing: .1em; color: var(--mh-faint); text-transform: uppercase; } .kcard h3 { font-size: 1.28rem; margin: 10px 0 8px; color: var(--mh-primary-deep); } :root[data-mode="dark"] .kcard h3 { color: var(--mh-ink); } .kcard p { font-size: .86rem; color: var(--mh-mute); margin: 0; flex: 1; } .kcard .go { margin-top: 16px; font-size: .86rem; font-weight: 700; text-decoration: none; } /* --- 2b: people directory (board & staff) --- */ .sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2.4rem 0 1.1rem; } .sechead h2 { font-size: 1.7rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .sechead h2 { color: var(--mh-ink); } .sechead span { font-size: .8rem; color: var(--mh-faint); } .people { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .person { border: 1px solid var(--mh-line); background: var(--mh-surface); border-radius: 12px; padding: 22px 24px; } .person.staff { background: var(--mh-ground); } :root[data-mode="dark"] .person.staff { background: var(--mh-tint); } .person .prow { display: flex; align-items: center; gap: 14px; } .person .pava { width: 52px; height: 52px; border-radius: 50%; background: var(--mh-panel-teal); color: #f6efdc; display: flex; align-items: center; justify-content: center; font: 600 1.02rem var(--mh-font-display); flex: none; } .person.staff .pava { background: #31443e; } :root[data-mode="dark"] .person.staff .pava { background: var(--mh-panel-teal); } .person .pname { font-weight: 700; font-size: .95rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .person .pname { color: var(--mh-ink); } .person .pcred { font-size: .72rem; color: var(--mh-faint); margin-top: 2px; } .person .prole { margin: 13px 0 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .person .pfrom { font-size: .74rem; color: var(--mh-faint); } .person .pbio { font-size: .82rem; color: var(--mh-mute); line-height: 1.55; margin: 0; } .rolechip { background: var(--mh-gold-soft); color: var(--mh-gold-dark); font-size: .64rem; font-weight: 700; padding: 4px 10px; border-radius: var(--mh-r-pill); letter-spacing: .06em; text-transform: uppercase; flex: none; } .rolechip.plain { background: var(--mh-tint); color: var(--mh-primary); } /* --- 2c: numbered process steps + code-of-conduct excerpt --- */ .plist { display: flex; flex-direction: column; gap: 16px; margin-top: 1.2rem; } .pstep { display: flex; gap: 20px; background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 12px; padding: 22px 26px; } .pstep .pnum { width: 36px; height: 36px; border-radius: 50%; background: var(--mh-primary); color: var(--mh-on-primary); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .pstep.gold .pnum { background: var(--mh-gold); color: var(--mh-cta-text); } .pstep b { display: block; font-size: .95rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .pstep b { color: var(--mh-ink); } .pstep p { margin: 6px 0 0; font-size: .88rem; color: var(--mh-mute); line-height: 1.6; } .codeq { margin-top: 1rem; background: var(--mh-ground); border-left: 4px solid var(--mh-gold); border-radius: 0 12px 12px 0; padding: 22px 28px; } :root[data-mode="dark"] .codeq { background: var(--mh-surface); } .codeq .ctag { font: 600 .7rem var(--mh-font-data); color: var(--mh-gold-dark); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; } .codeq .cq { display: flex; gap: 10px; font-size: .88rem; color: var(--mh-ink); line-height: 1.6; margin-bottom: 10px; } .codeq .cq .dash { color: var(--mh-gold-text); font-weight: 800; flex: none; } .codeq .cnote { font-size: .78rem; color: var(--mh-faint); margin-top: 6px; } /* --- 2d: category cards over the hero + the clean form index --- */ .catgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .catcard { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 14px; box-shadow: var(--mh-shadow-float); padding: 22px 24px; } .catcard h3 { font-size: 1.22rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .catcard h3 { color: var(--mh-ink); } .catcard .csub { font-size: .8rem; color: var(--mh-mute); margin: 6px 0 14px; } .catcard .clinks { display: flex; flex-direction: column; gap: 8px; font-size: .84rem; font-weight: 700; } .catcard .clinks a { text-decoration: none; } .formdex { border: 1px solid var(--mh-line); border-radius: 12px; overflow: hidden; background: var(--mh-surface); max-width: 920px; } .frow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 14px 20px; border-bottom: 1px solid var(--mh-line); text-decoration: none; color: inherit; } .frow:last-child { border-bottom: 0; } .frow:hover { background: var(--mh-tint); color: inherit; } .frow .ftag { font: 600 .62rem var(--mh-font-data); background: var(--mh-tint); color: var(--mh-primary); padding: 3px 8px; border-radius: 4px; letter-spacing: .05em; flex: none; } .frow:hover .ftag { background: var(--mh-surface); } .frow .fname { font-size: .88rem; font-weight: 600; color: var(--mh-ink); flex: 1; } .frow .fopen { font-size: .8rem; font-weight: 700; color: var(--mh-primary); flex: none; } .notecard { max-width: 920px; margin-top: 16px; background: var(--mh-ground); border-radius: 12px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; } :root[data-mode="dark"] .notecard { background: var(--mh-surface); } .notecard p { margin: 0; font-size: .88rem; color: var(--mh-mute); } .notecard p b { color: var(--mh-primary-deep); } :root[data-mode="dark"] .notecard p b { color: var(--mh-ink); } /* --- phase-2 responsive --- */ @media (max-width: 940px) { .fork { grid-template-columns: 1fr; } .fork .orb { display: none; } .fk { padding-top: 70px; } .fk:first-of-type { padding-top: 92px; } .ladder-panels { grid-template-columns: 1fr; } .road { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .road::before { display: none; } } @media (max-width: 560px) { .road { grid-template-columns: 1fr; } .qbanner { margin-bottom: 0; } .fork { margin-top: 12px !important; } } /* ================================================================ REBRAND PHASE 3 (Claude Design update 2 — turns 8/9/10) 9a nav dropdowns · 10a homepage · 8a start here · 8b wizard · 9b payments · 9c employers · 9d credential template ================================================================ */ /* --- 9a: navrail divider --- */ .navrail .rail-div { width: 1px; height: 20px; background: rgba(255,255,255,.18); margin: 0 .5rem; flex: none; align-self: center; } /* --- 9a: dropdowns. Click/keyboard via .open (base.html JS); hover-open on hover-capable devices. The mega panel anchors to header.site (sticky = positioned ancestor) so it spans the full header width. --- */ .ndrop-btn { font: 600 .84rem var(--mh-font-body); color: #31443e; background: none; border: 0; cursor: pointer; padding: .45rem .55rem .35rem; border-bottom: 2px solid transparent; } :root[data-mode="dark"] .ndrop-btn { color: var(--mh-ink); } .ndrop-btn:hover { color: var(--mh-primary); } .ndrop-btn .caret { font-size: .7em; opacity: .7; } /* visibility+delay (not display) so the pointer can cross the small gap between the trigger and the panel without the menu snapping shut — the ~.22s close grace covers the diagonal travel (update-3 known issue 1). Click-to-lock (.open) stays for touch/keyboard. */ .ndrop > .dropmenu, .ndrop > .megamenu { display: block; visibility: hidden; opacity: 0; transition: opacity .13s ease .22s, visibility 0s linear .35s; } .ndrop.open > .dropmenu, .ndrop.open > .megamenu { visibility: visible; opacity: 1; transition: opacity .13s ease, visibility 0s; } @media (hover: hover) { .ndrop:hover > .dropmenu, .ndrop:hover > .megamenu { visibility: visible; opacity: 1; transition: opacity .13s ease, visibility 0s; } } .ndrop { position: relative; } .dropmenu { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 210px; background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 0 0 12px 12px; box-shadow: 0 18px 44px rgba(10,61,54,.16); padding: .5rem 0; } .dropmenu a { display: block; padding: .5rem 1.1rem; text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--mh-ink); border-bottom: 0 !important; } .dropmenu a:hover { background: var(--mh-tint); color: var(--mh-primary); } .megamenu { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; } header.site .ndrop { position: static; } /* mega anchors to the sticky header */ header.site .ndrop .dropmenu { position: absolute; } /* except the small About menu */ header.site .ndrop:has(.dropmenu) { position: relative; } .mm-inner { max-width: 1080px; margin: 0 0 0 auto; background: var(--mh-surface); border: 1px solid var(--mh-line); border-top: none; border-radius: 0 0 16px 16px; box-shadow: 0 18px 44px rgba(10,61,54,.16); padding: 26px 32px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 30px; } .mm-kicker { font: 600 .66rem var(--mh-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mh-gold-text); margin-bottom: 10px; } .mm-kicker.mm-gap { margin-top: 18px; } .mm-col { display: flex; flex-direction: column; align-items: flex-start; } .mm-col a { display: block; padding: 4px 0; text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--mh-ink); border-bottom: 0 !important; } .mm-col a:hover { color: var(--mh-primary); } .mm-col .mm-hot { color: var(--mh-primary); } .mm-col .mm-all { margin-top: 10px; color: var(--mh-primary); font-size: .8rem; } .mm-promo { background: var(--mh-ground); border-radius: 12px; padding: 18px 20px; align-self: start; } :root[data-mode="dark"] .mm-promo { background: var(--mh-tint); } .mm-promo b { font-size: .88rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .mm-promo b { color: var(--mh-ink); } .mm-promo p { font-size: .78rem; color: var(--mh-mute); line-height: 1.6; margin: 8px 0 12px; } @media (max-width: 900px) { .megamenu, .dropmenu { position: static !important; box-shadow: none; } /* static positioning would reserve space while visibility-hidden — go back to display toggling (click-only) on small screens */ .ndrop > .dropmenu, .ndrop > .megamenu { display: none; transition: none; } .ndrop.open > .dropmenu, .ndrop.open > .megamenu { display: block; visibility: visible; opacity: 1; } .mm-inner { grid-template-columns: 1fr; gap: 18px; border-radius: 12px; border-top: 1px solid var(--mh-line); } .mm-promo { display: none; } } /* --- 10a: triage doors on the photo hero --- */ .doors { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin-top: .4rem; } .door { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 15px 24px; color: #fff; font-weight: 700; font-size: .94rem; transition: background .15s; } .door:hover { background: rgba(255,255,255,.16); color: #fff; } .door .arr { font-size: 1.1rem; color: var(--mh-hero-gold); font-weight: 800; flex: none; } .door.gold { background: #d9a520; border: 0; padding: 18px 24px; } .door.gold:hover { background: #c1901a; } .door.gold b { display: block; font-weight: 800; font-size: 1rem; color: #231a05; } .door.gold small { display: block; font-weight: 600; font-size: .78rem; color: #5c4408; margin-top: 2px; } .door.gold .arr { color: #231a05; font-size: 1.25rem; } /* --- 10a: paired slim notices --- */ .notice-duo { display: flex; gap: 14px; margin: 1.4rem 0; flex-wrap: wrap; } .notice-duo .notice { flex: 1 1 340px; margin: 0; } /* --- 10a/8a: family cards --- */ .famgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1.2rem; } .famcard { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--mh-line); border-radius: 14px; padding: 22px 24px; background: var(--mh-surface); text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s; } .famcard:hover { border-color: var(--mh-primary); box-shadow: var(--mh-shadow-hover); color: inherit; } .famcard h3 { font-size: 1.18rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .famcard h3 { color: var(--mh-ink); } .famcard p { font-size: .82rem; color: var(--mh-mute); line-height: 1.55; margin: 0; flex: 1; } .famcard .fc-ladder { font-size: .76rem; color: var(--mh-faint); } .famcard .fc-ladder strong { color: var(--mh-primary-deep); } :root[data-mode="dark"] .famcard .fc-ladder strong { color: var(--mh-ink); } .startbadge { display: inline-flex; align-self: flex-start; background: var(--mh-gold-soft); color: var(--mh-gold-dark); font-size: .7rem; font-weight: 700; padding: 5px 12px; border-radius: var(--mh-r-pill); } /* --- 10a: quick-action pill row --- */ .pillrow { display: flex; gap: 14px; flex-wrap: wrap; margin: 1.8rem 0 .6rem; } .pillrow a { border: 1.5px solid var(--mh-line); border-radius: var(--mh-r-pill); padding: 10px 20px; font-size: .84rem; font-weight: 700; color: #31443e; text-decoration: none; transition: border-color .15s, color .15s; } :root[data-mode="dark"] .pillrow a { color: var(--mh-ink); } .pillrow a:hover { border-color: var(--mh-primary); color: var(--mh-primary); } /* --- 8a: situation triage cards --- */ .triage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .tcard { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 16px; box-shadow: 0 10px 28px rgba(10,61,54,.12); padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; } .tcard.feat { border-top: 5px solid var(--mh-gold); } .tcard .tkick { font: 600 .68rem var(--mh-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mh-faint); } .tcard.feat .tkick { color: var(--mh-gold-text); } .tcard .tq { font: 600 1.45rem/1.25 var(--mh-font-display); color: var(--mh-primary-deep); } :root[data-mode="dark"] .tcard .tq { color: var(--mh-ink); } .tcard p { font-size: .88rem; color: var(--mh-mute); line-height: 1.6; margin: 0; flex: 1; } .tcard .btn { display: block; text-align: center; margin-top: auto; } /* --- 8b: guided wizard --- */ .wiz { max-width: 660px; margin: 0 auto; padding: 2.6rem 0 3.4rem; } /* 11a: entry-mode pill toggle (exploring vs employer-sent) */ .wpills { display: flex; gap: 8px; background: var(--mh-line); border-radius: var(--mh-r-pill); padding: 5px; margin-bottom: 28px; } :root[data-mode="dark"] .wpills { background: var(--mh-tint); } .wpill { flex: 1; text-align: center; font: 700 .82rem var(--mh-font-body); padding: .6rem .5rem; border-radius: var(--mh-r-pill); border: 0; cursor: pointer; background: transparent; color: var(--mh-mute); } .wpill.on { background: var(--mh-panel-teal); color: #fff; } .wiz-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .wiz-prog .wseg { flex: 1; height: 5px; border-radius: var(--mh-r-pill); background: var(--mh-line); } .wiz-prog .wseg.on { background: var(--mh-primary); } .wiz-prog span { font-size: .74rem; font-weight: 700; color: var(--mh-faint); flex: none; } .wq { font: 600 1.65rem/1.2 var(--mh-font-display); color: var(--mh-primary-deep); margin-bottom: 8px; } :root[data-mode="dark"] .wq { color: var(--mh-ink); } .wsub { font-size: .88rem; color: var(--mh-mute); margin-bottom: 22px; } .wopts { display: flex; flex-direction: column; gap: 12px; } .wopt { cursor: pointer; text-align: left; font: inherit; background: var(--mh-surface); border: 1.5px solid var(--mh-line); border-radius: 12px; padding: 20px 24px; transition: border-color .15s, box-shadow .15s; } .wopt:hover { border-color: var(--mh-primary); box-shadow: 0 4px 14px rgba(10,61,54,.08); } .wopt b { display: block; font-size: 1rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .wopt b { color: var(--mh-ink); } .wopt small { display: block; font-size: .8rem; color: var(--mh-mute); margin-top: 4px; } .wback { cursor: pointer; background: none; border: 0; padding: 0; margin-top: 18px; font: 600 .82rem var(--mh-font-body); color: var(--mh-warn); text-decoration: underline; } .wresult { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px rgba(10,61,54,.08); } .wr-head { background: var(--mh-panel-teal); color: #fff; padding: 24px 30px; } .wr-head .wr-kick { font: 600 .66rem var(--mh-font-body); letter-spacing: .16em; text-transform: uppercase; color: #e9c463; } .wr-head .wr-name { font: 600 1.9rem var(--mh-font-display); margin-top: 6px; } .wr-head .wr-long { font-size: .84rem; color: #cfe0dc; margin-top: 4px; } .wr-body { padding: 24px 30px; display: flex; flex-direction: column; gap: 14px; } .wr-body .wr-why { font-size: .92rem; color: var(--mh-ink); line-height: 1.6; } .wr-body .wr-ladder { font-size: .82rem; color: var(--mh-faint); } .wr-body .wr-ladder strong { color: var(--mh-primary-deep); } :root[data-mode="dark"] .wr-body .wr-ladder strong { color: var(--mh-ink); } .wr-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; } /* --- 9b: payments layout --- */ .paygrid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; margin-top: 1.6rem; } .payframe { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 14px; overflow: hidden; } .pf-head { background: var(--mh-ground); border-bottom: 1px solid var(--mh-line); padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } :root[data-mode="dark"] .pf-head { background: var(--mh-tint); } .pf-head b { font-size: .88rem; color: var(--mh-primary-deep); } :root[data-mode="dark"] .pf-head b { color: var(--mh-ink); } .pf-head span { font-size: .72rem; color: var(--mh-faint); } .payframe iframe { display: block; } .payrail { display: flex; flex-direction: column; gap: 16px; } .warncard { background: var(--mh-gold-soft); border-radius: 12px; padding: 20px 24px; } .warncard b { font-size: .88rem; color: var(--mh-gold-dark); } .warncard p { font-size: .82rem; color: var(--mh-mute); line-height: 1.65; margin: 8px 0 0; } .warncard p strong { color: var(--mh-primary-deep); } :root[data-mode="dark"] .warncard p strong { color: var(--mh-ink); } .feetable { display: flex; flex-direction: column; gap: 10px; font-size: .84rem; color: var(--mh-ink); margin-top: 12px; } .feetable > div { display: flex; justify-content: space-between; gap: 1rem; } @media (max-width: 900px) { .paygrid { grid-template-columns: 1fr; } } /* --- 9d: credential page template --- */ .credgrid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; margin-top: 1.8rem; } .cred-main { min-width: 0; display: flex; flex-direction: column; gap: 28px; } .cred-rail { display: flex; flex-direction: column; gap: 16px; } .applycard { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 14px; padding: 24px 26px; box-shadow: 0 8px 24px rgba(10,61,54,.08); position: sticky; top: 84px; } .applycard .ac-kick { font: 600 .66rem var(--mh-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mh-gold-text); } .applycard h3 { font-size: 1.2rem; margin: 8px 0 6px; color: var(--mh-primary-deep); } :root[data-mode="dark"] .applycard h3 { color: var(--mh-ink); } .applycard .ac-sub { font-size: .82rem; color: var(--mh-mute); line-height: 1.6; margin-bottom: 16px; } .applycard .btn { display: block; width: 100%; text-align: center; } .applycard .ac-note { text-align: center; font-size: .72rem; color: var(--mh-faint); margin-top: 8px; } .applycard .ac-links { border-top: 1px solid var(--mh-line); margin-top: 18px; padding-top: 16px; display: flex; flex-direction: column; gap: 9px; font-size: .84rem; font-weight: 600; } .applycard .ac-links a { text-decoration: none; } .chipcard { border: 1px solid var(--mh-line); border-radius: 14px; padding: 20px 24px; background: var(--mh-surface); } .chipcard b { display: block; font-size: .86rem; color: var(--mh-primary-deep); margin-bottom: 12px; } :root[data-mode="dark"] .chipcard b { color: var(--mh-ink); } .chipline { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; flex-wrap: wrap; } .chipline .arrowc { color: var(--mh-faint); } .chipcard small { display: block; font-size: .76rem; color: var(--mh-faint); margin-top: 10px; line-height: 1.6; } .cred-callout { background: var(--mh-gold-soft); border-left: 4px solid var(--mh-gold); border-radius: 0 12px 12px 0; padding: 22px 28px; } .cred-callout b { font-size: 1rem; color: var(--mh-gold-dark); } .cred-callout p { font-size: .88rem; color: var(--mh-mute); line-height: 1.6; margin: 8px 0 0; } .cred-callout p strong { color: var(--mh-primary-deep); } :root[data-mode="dark"] .cred-callout p strong { color: var(--mh-ink); } @media (max-width: 1000px) { .credgrid { grid-template-columns: 1fr; } .applycard { position: static; } } /* ================================================================ UPDATE 4 (turns 12-14): unified family hubs, at-a-glance tiles, context cards, gradient CTA band, related-links line ================================================================ */ /* ladder circles: calm lift + native title tooltips (on .rc) */ .lrung .rc { transition: transform .15s; cursor: default; } .lrung:hover .rc { transform: scale(1.1); } /* at-a-glance tiles (reusable: hubs, credential pages, reciprocity) */ .glance-kick { font: 600 .68rem var(--mh-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mh-gold-text); margin: 0 0 12px; } .glance { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 .6rem; } .glance .gt { flex: 1; min-width: 150px; border: 1px solid var(--mh-line); border-radius: 12px; padding: 16px 14px; text-align: center; background: var(--mh-surface); transition: transform .15s, box-shadow .15s; } .glance .gt:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,61,54,.1); } .glance .gt svg { margin-bottom: 8px; } .glance .gt b { display: block; font-size: .8rem; color: var(--mh-primary-deep); line-height: 1.35; } :root[data-mode="dark"] .glance .gt b { color: var(--mh-ink); } .glance .gt.gold { background: #f6efdc; border-color: #e7d9b0; } .glance .gt.gold b { color: #8a5a00; } :root[data-mode="dark"] .glance .gt.gold { background: rgba(233,196,99,.12); border-color: rgba(233,196,99,.35); } :root[data-mode="dark"] .glance .gt.gold b { color: var(--mh-gold); } /* restored-context card */ .ctxcard { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 14px; padding: 24px 28px; margin: 1.6rem 0 0; } .ctxcard h3 { font: 600 1.3rem var(--mh-font-display); color: var(--mh-primary-deep); margin: 0 0 6px; } :root[data-mode="dark"] .ctxcard h3 { color: var(--mh-ink); } .ctxcard > p { font-size: .88rem; color: var(--mh-mute); line-height: 1.65; margin: 0 0 14px; max-width: 80ch; } .ctxcard .cols3 { columns: 3; column-gap: 28px; font-size: .85rem; color: var(--mh-ink); line-height: 1.9; } .ctxcard .cols3 span { display: block; break-inside: avoid; } @media (max-width: 900px) { .ctxcard .cols3 { columns: 2; } } @media (max-width: 560px) { .ctxcard .cols3 { columns: 1; } } /* related links line (renewal/reciprocity/endorsements keep their own tabs) */ .alsofor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: .85rem; color: var(--mh-mute); } .alsofor .lbl { font-weight: 600; color: var(--mh-faint); } .alsofor a { font-weight: 600; color: var(--mh-primary); text-decoration: none; } .alsofor a:hover { color: var(--mh-gold-hover); } /* gradient CTA band with gold-outline actions */ .ctaband { background: linear-gradient(120deg, #0a3d36, #0d5c52); border-radius: 14px; padding: 24px 30px; margin: 1.8rem 0 0; display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; } .ctaband h3 { font: 600 1.3rem var(--mh-font-display); color: #fff; margin: 0; } .ctaband p { font-size: .85rem; color: #a9c9c2; margin: 5px 0 0; } .ctaband .btns { display: flex; gap: 12px; flex-wrap: wrap; } .btn.goldline { background: none; border: 1.5px solid var(--mh-hero-gold); color: var(--mh-hero-gold); font-weight: 700; border-radius: 8px; padding: .62rem 1.3rem; cursor: pointer; font-size: .9rem; text-decoration: none; display: inline-block; } .btn.goldline:hover { background: rgba(233,196,99,.12); color: var(--mh-hero-gold); } /* hero pill (e.g. Medicaid-reimbursable) */ .heropill { display: inline-flex; align-items: center; gap: 8px; background: rgba(233,196,99,.14); border: 1px solid rgba(233,196,99,.4); color: #e9c463; border-radius: 999px; padding: 6px 14px; font-size: .78rem; font-weight: 700; margin: 0 0 18px; } /* section head with the choose-your-level line */ .sechead .quiet { font-size: .85rem; color: var(--mh-faint); font-weight: 400; } /* --- 12a: long-page layout with sticky on-page nav + walled scenarios --- */ .pagegrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.8rem; align-items: start; } .onpage { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; } .onpage .op-kick { font: 600 .66rem var(--mh-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mh-faint); } .onpage nav { display: flex; flex-direction: column; } .onpage nav a { padding: 7px 10px; border-left: 2px solid var(--mh-line); font-size: .84rem; font-weight: 600; color: var(--mh-mute); text-decoration: none; } .onpage nav a:hover { color: var(--mh-primary); } .onpage nav a.on { border-left-color: var(--mh-gold); color: var(--mh-primary); } .onpage .mini { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 12px; padding: 14px 16px; } .onpage .mini b { display: block; font-size: .88rem; color: var(--mh-primary-deep); margin-bottom: 4px; } :root[data-mode="dark"] .onpage .mini b { color: var(--mh-ink); } .onpage .mini p { font-size: .76rem; color: var(--mh-mute); margin: 0 0 10px; line-height: 1.5; } .scen { background: var(--mh-surface); border: 1px solid var(--mh-line); border-radius: 14px; overflow: hidden; margin: 0 0 1.5rem; scroll-margin-top: 84px; } .scen .shead { display: flex; align-items: center; gap: 12px; padding: 13px 22px; color: #fff; } .scen .shead .snum { font: 600 .64rem var(--mh-font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .85; } .scen .shead b { font: 600 1.1rem var(--mh-font-display); } .scen.teal .shead { background: var(--mh-panel-teal); } .scen.deep .shead { background: #0a3d36; } .scen.red .shead { background: #8b1a1a; } .scen .sbody { padding: 20px 24px; } .scen .sbody p { max-width: 82ch; } .warnbox { background: #fdf2f2; border: 1px solid #e5b4b4; border-left: 4px solid #8b1a1a; border-radius: 10px; padding: 14px 18px; margin: 0 0 14px; } .warnbox b { color: #8b1a1a; } :root[data-mode="dark"] .warnbox { background: rgba(139,26,26,.18); border-color: rgba(229,180,180,.35); } :root[data-mode="dark"] .warnbox b { color: #f0a8a8; } @media (max-width: 900px) { .pagegrid { grid-template-columns: 1fr; } .onpage { position: static; } } /* short/solo ladders: don't stretch a 1-2 rung panel across the half-width grid cell (peers, prevention looked oversized) */ .lpanel:has(.rungs.short) { max-width: 430px; } .lpanel:has(.rungs.solo) { max-width: 320px; } .rungs.solo { justify-content: flex-start; } .rungs.solo .lrung { flex: 0 0 auto; min-width: 180px; }