/* ============================================================= The United States EMS Compact — core design system Federal-aligned (USWDS-family) visual language. Navy + EMS star-of-life red. Built for accessibility: rem-based scalable type, high-contrast mode, reduced motion, keyboard focus, semantic landmarks. ============================================================= */ /* ---- Design tokens ---- */ :root { /* Federal navy family (USWDS-aligned) */ --navy-900: #11243e; --navy-800: #1a4480; /* primary brand navy */ --navy-700: #205493; --navy-600: #2e6ca4; --navy-100: #e8eef3; --navy-050: #f0f4f8; --tint: #e7edf3; /* soft slate for section backgrounds; visible divider against white */ /* EMS star-of-life red accent */ --red-700: #9b1c2e; --red-600: #c8102e; /* primary accent */ --red-100: #fbe8eb; /* EMS Compact status-map palette. federal navy family + one red accent. Three tiers + gray. Tonal separation keeps them distinct yet on-brand. */ --map-compact: #1a4480; /* Participating (brand navy, strongest) */ --map-impl: #4f7cb5; /* Enacted, implementing (medium blue) */ --map-delayed: #aac4e3; /* Enacted, effective date pending (light blue; map fill hatches navy over this) */ --map-consider: #9aa6b3; /* Legislation under consideration (neutral blue-gray) */ --map-none: #dfe3e7; /* Not yet (light gray) */ /* Neutrals */ --ink: #1b1b1b; --ink-soft: #3d4551; --gray-500: #565c65; --gray-300: #a9aeb1; --gray-100: #dfe1e2; --gray-050: #f6f8fa; --paper: #ffffff; /* Functional */ --link: var(--navy-700); --link-hover: var(--navy-900); --focus-ring: #ffbf47; /* high-vis federal focus gold */ --ok: #1a7f37; --warn: #b45309; /* Type scale (rem, so it honors user/browser font size) */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-display: 'Fraunces', Georgia, serif; --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); --step-2: clamp(1.5rem, 1.35rem + 0.7vw, 1.85rem); --step-3: clamp(1.9rem, 1.65rem + 1.1vw, 2.5rem); --step-4: clamp(2.3rem, 1.9rem + 1.8vw, 3.2rem); /* Layout */ --measure: 42rem; /* readable line length */ --wrap: 78rem; /* max content width */ --gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); --radius: 6px; --shadow: 0 2px 4px rgba(17,36,62,.04), 0 8px 24px rgba(17,36,62,.05); --shadow-lg: 0 6px 14px rgba(17,36,62,.08), 0 16px 40px rgba(17,36,62,.10); --speed: 180ms; } /* ---- High-contrast mode (toggled via data attribute on ) ---- */ html[data-contrast="high"] { --navy-800: #00204a; --navy-700: #00204a; --red-600: #b00018; --ink: #000000; --ink-soft: #000000; --gray-500: #1b1b1b; --gray-100: #767676; --gray-050: #ffffff; --paper: #ffffff; --link: #00204a; --link-hover:#000000; } html[data-contrast="high"] a { text-decoration: underline; } html[data-contrast="high"] .card, html[data-contrast="high"] .track { border-width: 2px !important; } /* High contrast: drop the hero background image for a solid, maximally-legible field */ html[data-contrast="high"] .hero { background: #00204a; } /* Reduced motion / data saver users still get the gradient; image is decorative only */ @media print { .hero { background: #fff !important; color: #000 !important; } } /* ---- Reset & base ---- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; /* respects user setting; never hard-pixel the root */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Text-size control (A / A+ / A++): scale the root so every rem-based size grows. */ html[data-textsize="large"] { font-size: 112.5%; } html[data-textsize="xlarge"] { font-size: 125%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; color: var(--ink); background: var(--paper); text-rendering: optimizeLegibility; } /* Global image safety net: any image stays within its container and keeps its aspect ratio, so a raw without a sizing class can't overflow on mobile. Per-class rules (.prose img, .hero__wordmark, .cert img, thumbnails, etc.) have higher specificity and continue to govern those images. */ img { max-width: 100%; height: auto; } /* ---- Skip link (keyboard/screen-reader) ---- */ .skip-link { position: absolute; left: 0; top: -100%; background: var(--navy-900); color: #fff; padding: .75rem 1.25rem; z-index: 1000; border-radius: 0 0 var(--radius) 0; font-weight: 600; } .skip-link:focus { top: 0; } /* ---- Focus visibility ---- */ :focus-visible { outline: 4px solid var(--focus-ring); outline-offset: 2px; } /* ---- Typography ---- */ h1, h2, h3, h4 { font-family: var(--font-sans); line-height: 1.2; color: var(--navy-900); font-weight: 700; } h1 { font-size: var(--step-4); margin: 0 0 .5em; letter-spacing: -.01em; } h2 { font-size: var(--step-3); margin: 2rem 0 .6em; } h3 { font-size: var(--step-2); margin: 1.6rem 0 .5em; } /* Editorial serif for CONTENT headings only (page heroes + prose/section h2s). UI headings (footer, widgets, cards, data) intentionally stay Public Sans. */ .hero h1, .prose h2, .state-block > h2, .section > .wrap > h2, .section > .wrap > .stack > h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.02em; } .hero h1 { font-weight: 600; } h4 { font-size: var(--step-1); margin: 1.3rem 0 .4em; } p, ul, ol { margin: 0 0 1rem; } a { color: var(--link); text-underline-offset: 2px; } a:hover { color: var(--link-hover); } .prose { max-width: var(--measure); margin-inline: auto; } .prose > * + * { margin-top: 1rem; } /* ---- Layout helpers ---- */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); } .stack > * + * { margin-top: var(--gap); } .section { padding-block: clamp(2rem, 1.4rem + 3vw, 4rem); } .section--tint { background: var(--tint); } .section--navy { background: var(--navy-800); color: #fff; } .section--navy h2, .section--navy h3 { color: #fff; } .section--navy a { color: #cfe1f2; } /* ---- Government banner ---- */ .gov-banner { background: var(--gray-050); font-size: var(--step--1); border-bottom: 1px solid var(--gray-100); } .gov-banner__inner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-block: .35rem; } .gov-banner__flag { width: 1rem; height: auto; } .gov-banner__toggle { background: none; border: 0; color: var(--link); cursor: pointer; font-size: inherit; text-decoration: underline; padding: 0; } .gov-banner__details { display: none; gap: var(--gap); padding-block: .75rem 1rem; } .gov-banner__details[hidden] { display: none; } .gov-banner__details.is-open { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .gov-banner__details p { margin: 0; color: var(--ink-soft); } /* ---- Utility bar (contrast / text size) ---- */ .util { background: var(--navy-900); color: rgba(255,255,255,.85); font-size: var(--step--1); border-bottom: 1px solid rgba(255,255,255,.08); } .util__inner { display: flex; justify-content: flex-end; gap: .75rem; align-items: center; padding-block: .35rem; } .util > .wrap > span, .util__inner > span { letter-spacing: .02em; } .util button { background: none; border: 1px solid rgba(255,255,255,.28); color: #fff; cursor: pointer; padding: .15rem .55rem; font-size: inherit; line-height: 1.4; transition: background .15s, border-color .15s; } /* segmented text-size control: A | A+ | A++ joined */ .util button[data-textsize] { border-radius: 0; margin-left: -1px; } .util button[data-textsize]:first-of-type { border-radius: 4px 0 0 4px; margin-left: 0; } .util button[data-textsize]:last-of-type { border-radius: 0 4px 4px 0; } .util #contrast-toggle { border-radius: 4px; margin-left: .25rem; } .util__seg { display: inline-flex; } .util button:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); } .util button[aria-pressed="true"] { background: #fff; color: var(--navy-900); border-color: #fff; font-weight: 700; position: relative; z-index: 1; } /* Larger tap targets for the utility-bar and banner controls on touch / small screens; the desktop pointer view keeps the compact size. */ @media (hover: none), (max-width: 48rem) { .util button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .gov-banner__toggle { display: inline-block; padding: .5rem 0; } } /* ---- Masthead ---- */ .masthead { border-bottom: 4px solid var(--red-600); background: var(--paper); } .masthead__inner { display: flex; align-items: center; gap: 1rem; padding-block: 1rem; } .masthead__home { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; border-radius: var(--radius); } .masthead__home:hover .masthead__name { color: var(--navy-700); } .masthead__home:focus-visible { outline: 4px solid var(--focus-ring); outline-offset: 3px; } .masthead__seal { width: 56px; height: 56px; flex: none; } .masthead__titles { line-height: 1.15; } .masthead__name { font-size: var(--step-1); font-weight: 700; color: var(--navy-900); margin: 0; } .masthead__sub { font-size: var(--step--1); color: var(--gray-500); margin: 0; } /* ---- Primary nav ---- */ .nav { background: var(--navy-800); position: relative; } .nav__inner { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; } .nav__top { color: #fff; text-decoration: none; padding: .85rem 1.1rem; display: flex; align-items: center; gap: .35rem; font-weight: 600; font-size: var(--step--1); letter-spacing: .01em; cursor: pointer; background: none; border: 0; } .nav__top:hover, .nav__top[aria-current="true"], .nav__top[aria-current="page"] { background: var(--navy-900); color: #fff; } .nav__top:hover, .nav__top:focus, .nav__top:focus-visible, .nav__top[aria-expanded="true"] { color: #fff; } .nav__top[aria-current="true"], .nav__top[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--red-600); } .nav__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform var(--speed); } .nav__top[aria-expanded="true"] .nav__caret { transform: rotate(180deg); } /* Dropdown panel */ .nav__panel { position: absolute; top: 100%; left: 0; min-width: 15rem; background: #fff; border: 1px solid var(--gray-100); border-top: 3px solid var(--red-600); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14); list-style: none; margin: 0; padding: .4rem 0; z-index: 50; display: none; } .nav__item--has-panel.is-open .nav__panel { display: block; } .nav__panel li { margin: 0; } .nav__panel a { display: block; color: var(--navy-900); text-decoration: none; padding: .55rem 1.1rem; font-size: var(--step--1); font-weight: 500; } .nav__panel a:hover, .nav__panel a:focus-visible { background: var(--navy-050); color: var(--navy-800); } .nav__panel a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--red-600); font-weight: 700; } .nav__group { padding: .7rem 1.1rem .3rem; font-size: calc(var(--step--1) * .85); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--navy-800); border-top: 2px solid var(--red-600); margin-top: .4rem; } .nav__panel li:first-child.nav__group { border-top: 0; margin-top: 0; padding-top: .5rem; } /* Verify PTP Status call-to-action button in the primary nav (UPDATE48) */ .nav__item--cta { margin-left: auto; display: flex; align-items: center; } .nav__verify { display: inline-flex; align-items: center; gap: .4rem; margin: .35rem .6rem .35rem 0; padding: .55rem 1.15rem; background: var(--red-600); color: #fff; text-decoration: none; font-weight: 700; font-size: var(--step--1); letter-spacing: .01em; border: 2px solid var(--red-600); border-radius: 999px; white-space: nowrap; transition: background var(--speed), border-color var(--speed); } .nav__verify::before { content: "\2713"; font-weight: 700; } /* check mark */ .nav__verify:hover, .nav__verify:focus-visible { background: var(--red-700); border-color: var(--red-700); color: #fff; } .nav__verify[aria-current="page"] { background: var(--red-700); border-color: #fff; } .section__group { font-size: var(--step-1); color: var(--navy-900); margin: 1.5rem 0 .25rem; padding-bottom: .35rem; border-bottom: 2px solid var(--gray-100); } /* Embedded third-party form (e.g. Google Form) */ .form-embed { margin: 1.5rem 0; border: 1px solid var(--gray-100); border-radius: var(--radius); overflow: hidden; background: var(--paper); } .form-embed iframe { display: block; width: 100%; border: 0; min-height: 60vh; } /* ---- Public notices: native MailChimp signup form ---- */ .pn-form { display: grid; gap: 1rem; max-width: 34rem; margin: 1.25rem 0 0; } .pn-form__req { font-size: var(--step--1); color: var(--gray-500); margin: 0; } .pn-req { color: var(--red-600); font-weight: 700; } .pn-field { display: grid; gap: .25rem; } .pn-field > label { font-weight: 700; font-size: var(--step--1); color: var(--navy-900); } .pn-field input[type="email"], .pn-field input[type="text"] { padding: .7rem .85rem; font-size: var(--step-0); border: 2px solid var(--gray-300); border-radius: var(--radius); width: 100%; background: var(--paper); color: var(--ink); } .pn-field input:focus-visible { border-color: var(--navy-700); outline: 2px solid var(--navy-700); outline-offset: 1px; } .pn-groups { border: 0; margin: 0; padding: 0; min-width: 0; } .pn-groups legend { font-weight: 700; font-size: var(--step--1); color: var(--navy-900); padding: 0; margin-bottom: .35rem; } .pn-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .pn-check { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--step-0); } .pn-check input { margin-top: .25rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; } .pn-check label { font-weight: 400; } .pn-submit .btn { cursor: pointer; } /* Anti-bot honeypot: hidden from people, present for bots. Not display:none, so a bot's autofill still sees it; off-screen and out of the tab order. */ .pn-hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; } /* ---- Public notices: native archive list (from MailChimp RSS) ---- */ .pn-archive__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--gray-100); } .pn-archive__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--gray-100); } .pn-archive__link { font-weight: 600; } .pn-archive__date { font-size: var(--step--1); color: var(--gray-500); margin-left: auto; white-space: nowrap; } .pn-archive__all { margin: 1rem 0 0; } .pn-archive__empty { color: var(--ink-soft); margin: 1rem 0 .5rem; } /* Responsive video embed (16:9) */ .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.25rem 0; border-radius: var(--radius); overflow: hidden; background: #000; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Content images within prose */ .prose img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 1.5rem 0; } .prose figure { margin: 1.75rem 0; } .prose figure img { margin: 0 0 .5rem; } .prose figcaption { font-size: var(--step--1); color: var(--gray-500); font-style: italic; } .prose table { display: block; overflow-x: auto; max-width: 100%; } /* Legal documents (legislation / administrative rules / bylaws) render in .leg-doc, not .prose; give any table the same horizontal-scroll treatment so a wide table in a future edition cannot overflow on small screens. */ .leg-doc table { display: block; overflow-x: auto; max-width: 100%; } /* A floated/feature image option for article leads */ .prose img.img--lead { width: 100%; max-height: 22rem; object-fit: cover; } /* News article lead image: constrained, professional thumbnail + click-to-enlarge */ .news-lead { margin: 0 auto 2rem; text-align: center; max-width: var(--measure); } .news-lead__btn { display: inline-block; padding: 0; border: 1px solid var(--navy-100); background: #fff; border-radius: var(--radius); cursor: zoom-in; box-shadow: 0 1px 3px rgba(17,36,62,.08); overflow: hidden; max-width: 100%; transition: box-shadow .15s, border-color .15s; } .news-lead__btn:hover, .news-lead__btn:focus-visible { box-shadow: 0 4px 12px rgba(17,36,62,.16); border-color: var(--navy-600); outline: none; } .news-lead__btn:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; } .news-lead__btn img { display: block; max-height: 20rem; max-width: 100%; width: auto; height: auto; object-fit: contain; margin: 0; border-radius: 0; } .news-lead figcaption { margin-top: .6rem; font-size: var(--step--1); color: var(--gray-500); font-style: italic; } /* Official brand logos on light content areas */ .logo--brand { display: block; width: 100%; max-width: 26rem; height: auto; margin: .5rem 0 1.5rem; } .logo--system { display: block; width: 100%; max-width: 22rem; height: auto; margin: .5rem auto 1.75rem; } .prose .logo--brand { margin: 0 0 1.75rem; } .prose .logo--system { margin: 0 auto 1.75rem; } /* Light band under a dark hero, used to show a color logo that needs a light bg */ .logo-band { background: var(--tint); padding-block: 1.75rem; } .logo-band .logo--brand { margin: 0; } /* Trailing "All news" link, kept within the centered reading column */ .news-foot { max-width: var(--measure); margin: 2rem auto 0; } /* Imported press releases sometimes carry an inline-styled "Download PDF" link. Neutralize the off-palette inline styling and render it as a native, left-aligned button that matches the site. */ .prose a[style*="background-color"] { display: inline-block; padding: .6rem 1.25rem; margin: .25rem 0 1rem; background: var(--navy-800) !important; color: #fff !important; text-decoration: none; font-family: var(--font-sans); font-weight: 600; border-radius: var(--radius); border: 0; } .prose a[style*="background-color"]:hover, .prose a[style*="background-color"]:focus-visible { background: var(--navy-700) !important; outline: none; } /* Imported bodies sometimes center their own block; keep the PDF-button paragraph left-aligned to match the reading column. */ .prose p[style*="text-align:center"]:has(a[style*="background-color"]), .prose p[style*="text-align: center"]:has(a[style*="background-color"]) { text-align: left; } /* Lightbox overlay */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(17,36,62,.92); padding: 2rem; cursor: zoom-out; } .lightbox.is-open { display: flex; } .lightbox img { max-width: 95vw; max-height: 90vh; width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 8px 40px rgba(0,0,0,.5); } .lightbox__close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: 0; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; padding: .25rem .5rem; } .lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .lightbox img { animation: lb-in .18s ease-out; } @keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } } @media print { .lightbox { display: none !important; } .news-lead__btn { box-shadow: none; cursor: default; } } /* News index: featured story + thumbnail card grid */ /* The news index uses .prose--wide (set in the template) so the card grid can span the full content column and show 3-4 across instead of being squeezed to 2 by the 42rem reading measure. */ .prose--wide { max-width: none; } .news-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.75rem; align-items: stretch; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); overflow: hidden; margin-bottom: 2rem; max-height: 24rem; box-shadow: 0 1px 3px rgba(17,36,62,.06); transition: box-shadow .15s, transform .15s; } .news-feature:hover, .news-feature:focus-visible { box-shadow: 0 6px 20px rgba(17,36,62,.14); outline: none; } .news-feature:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; } .news-feature__body { padding: 1.75rem 1.75rem 1.75rem 0; align-self: center; overflow: hidden; } .news-feature__title { margin: .35rem 0 .6rem; font-size: var(--step-2); line-height: 1.15; color: var(--navy-800); } .news-feature__summary { margin: 0 0 1rem; color: var(--gray-700, #3d4551); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem; } .news-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--navy-100); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 3px rgba(17,36,62,.06); transition: box-shadow .15s, transform .15s; } .news-card:hover, .news-card:focus-visible { box-shadow: 0 6px 18px rgba(17,36,62,.14); transform: translateY(-2px); outline: none; } .news-card:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; } .news-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; } .news-card__title { margin: .3rem 0 .5rem; font-size: var(--step-0); line-height: 1.25; color: var(--navy-800); } .news-card__summary { margin: 0; font-size: var(--step--1); color: var(--gray-700, #3d4551); } .news-card__date { margin: 0; font-size: var(--step--1); color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .news-card__more { color: var(--link); font-weight: 600; font-size: var(--step--1); } /* Thumbnails: uniform aspect ratio so the grid stays even */ .news-card__thumb, .news-feature .news-card__thumb { background: var(--tint); overflow: hidden; } .news-grid .news-card__thumb { aspect-ratio: 16 / 9; } .news-feature .news-card__thumb { min-height: 100%; } .news-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .prose .news-card__thumb img, .prose .news-card__thumb--placeholder img { margin: 0; border-radius: 0; height: 100%; } .prose .news-card__thumb--placeholder img { height: 56%; } .news-card__thumb--placeholder { display: flex; align-items: center; justify-content: center; background: var(--navy-050); border-bottom: 1px solid var(--navy-100); } .news-card__thumb--placeholder img { width: auto; height: 56%; max-height: 7rem; object-fit: contain; opacity: .82; } @media (max-width: 38rem) { .news-feature { grid-template-columns: 1fr; max-height: none; } /* stacked card must not clip its title */ .news-feature .news-card__thumb { aspect-ratio: 16 / 9; min-height: 0; } .news-feature__body { padding: 1.25rem; } } .nav__toggle { display: none; } /* ---- Scroll reveal. only active when JS adds .js-reveal to . Without JS (or with reduced motion) .reveal elements are simply visible. */ .js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } } .hero { background: linear-gradient(180deg, rgba(26,68,128,.92), rgba(17,36,62,.95)), url("/img/home-bg.png") repeat top left / 575px auto, var(--navy-900); color: #fff; } .hero__grid { display: grid; grid-template-columns: 1.2fr .9fr; gap: clamp(1.5rem, 1rem + 3vw, 3.25rem); align-items: start; padding-block: clamp(1.75rem, 1.25rem + 2.5vw, 3rem); } .hero__text { max-width: 34rem; } .eyebrow { display: inline-block; font-size: var(--step--1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-100); border-left: 3px solid var(--red-600); padding-left: .6rem; margin-bottom: 1rem; } .hero__wordmark { display: block; width: clamp(13rem, 11rem + 9vw, 18rem); height: auto; background: #fff; padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,.18); } .eyebrow a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .eyebrow a:hover { color: var(--red-100); } .eyebrow--dark { color: var(--red-600); } .hero h1 { color: #fff; font-size: clamp(2.1rem, 1.7rem + 1.8vw, 3rem); line-height: 1.06; letter-spacing: -.015em; margin: 0 0 .85rem; } .hero h1 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: #f0c651; } .hero__lede { font-size: var(--step-0); color: #dce6f1; max-width: 33rem; line-height: 1.5; } .hero__lede a, .hero__clarifier a { color: #f0c651; text-decoration-color: rgba(240,198,81,.55); text-underline-offset: 3px; } .hero__lede a:hover, .hero__clarifier a:hover { color: #ffd97a; text-decoration-color: #ffd97a; } .hero__clarifier { font-size: var(--step--1); color: #fff; max-width: none; margin: 1rem 0 0; padding: .75rem 1rem; line-height: 1.45; border-left: 3px solid #f0c651; background: rgba(240,198,81,.10); border-radius: 0 var(--radius) var(--radius) 0; } .hero__actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .65rem; } /* At-a-glance stat card */ .hero__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); padding: 1.5rem 1.6rem; backdrop-filter: blur(2px); } .hero__card-title { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: #aac4e0; margin: 0 0 1.1rem; font-weight: 700; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; } .stat__num { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); font-weight: 600; line-height: 1; color: #fff; } .stat__lbl { display: block; font-size: var(--step--1); color: #c3d4e6; margin-top: .3rem; } .hero__card-note { font-size: calc(var(--step--1) * .92); color: #8fb0d0; margin: 1.2rem 0 0; } @media (max-width: 52rem) { .hero__grid { grid-template-columns: 1fr; } .hero__aside { order: 2; } } /* ---- Buttons ---- */ .btn { display: inline-block; background: var(--red-600); color: #fff; padding: .7rem 1.4rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; border: 2px solid var(--red-600); } .btn:hover { background: var(--red-700); border-color: var(--red-700); color: #fff; } .btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--navy-800); } .btn--ghost:hover { background: var(--navy-050); color: var(--navy-900); border-color: var(--navy-900); } /* White ghost button on dark backgrounds (hero, dark sections) */ .hero .btn--ghost, .section--dark .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); } .hero .btn--ghost:hover, .section--dark .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.9); } /* ---- Audience tracks ---- */ .tracks { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } /* 5-card layout: 3 across, with the trailing 2 centered, instead of a ragged orphan row */ .tracks--five { grid-template-columns: repeat(6, 1fr); } .tracks--five > .track { grid-column: span 2; } .tracks--five > .track:nth-child(4) { grid-column: 2 / span 2; } .tracks--five > .track:nth-child(5) { grid-column: 4 / span 2; } @media (max-width: 60rem) { .tracks--five { grid-template-columns: repeat(2, 1fr); } .tracks--five > .track, .tracks--five > .track:nth-child(4), .tracks--five > .track:nth-child(5) { grid-column: auto; } } @media (max-width: 34rem) { .tracks--five { grid-template-columns: 1fr; } } .next-step { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem 1rem; margin-top: var(--gap); padding: 1.1rem 1.4rem; background: var(--navy-050); border: 1px solid rgba(17,36,62,.1); border-left: 4px solid var(--navy-800); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: background .25s ease, transform .25s ease; } .next-step:hover { background: rgba(17,36,62,.07); transform: translateX(2px); color: var(--ink); } .next-step__label { font-weight: 700; color: var(--navy-800); } .next-step__text { color: var(--ink-soft); flex: 1 1 16rem; } .next-step__arrow { color: var(--navy-800); font-weight: 700; font-size: 1.2em; } .skip-ahead { font-size: var(--step--1); color: var(--ink-soft); font-style: italic; margin: 0 0 1.5rem; } .skip-ahead a { color: var(--navy-800); font-style: normal; font-weight: 600; } .track { background: var(--paper); border: 1px solid rgba(17,36,62,.06); border-top: 4px solid var(--navy-800); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); display: block; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1); } .track:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(17,36,62,.08); color: var(--ink); } .track h3 { margin-top: 0; color: var(--navy-800); } .track__title { display: block; font-family: var(--font-sans); font-weight: 700; line-height: 1.2; font-size: var(--step-2); color: var(--navy-800); margin: 0 0 .5rem; } .track p { color: var(--ink-soft); margin: 0; } .track--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .track--media .track__media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--navy-050); } .track--media .track__body { padding: 1.25rem 1.5rem 1.5rem; } .track--media .track__title { margin-top: 0; } /* ---- Cards / lists ---- */ .card { background: var(--paper); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow); } .card h3 { margin-top: 0; } .meta { font-size: var(--step--1); color: var(--gray-500); margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .04em; } /* ---- Tasks strip ("What would you like to do?") ---- */ .tasks { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .task { display: flex; gap: .75rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1rem 1.2rem; text-decoration: none; color: var(--ink); } .task:hover { border-color: var(--navy-700); color: var(--ink); } .task__icon { color: var(--red-600); flex: none; font-size: 1.4rem; line-height: 1; } /* ---- Footer ---- */ .footer { background: var(--navy-900); color: #cfd8e3; font-size: var(--step--1); } .footer__cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding-block: 2.5rem; } .footer h2 { font-size: var(--step-0); color: #fff; margin: 0 0 .6rem; } .footer h2 a { color: #fff; text-decoration: none; } .footer h2 a:hover { text-decoration: underline; } .footer__about { border-top: 1px solid rgba(255,255,255,.15); padding-block: 1.5rem; display: flex; gap: var(--gap); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .footer__about-text { flex: 1 1 28rem; } .footer__about p { max-width: 60ch; margin: 0 0 1rem; } .footer__wordmark { flex: 0 0 auto; width: clamp(11rem, 9rem + 6vw, 16rem); height: auto; opacity: .92; margin-top: .25rem; } .footer__utility { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; } .footer__utility a { color: #aebfd2; } .footer__utility a:hover { color: #fff; } .footer a { color: #cfd8e3; } .footer a:hover { color: #fff; } .footer__bar { border-top: 1px solid rgba(255,255,255,.15); padding-block: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } /* ---- Tables (document/meeting listings) ---- */ .table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: var(--step--1); } th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--gray-100); } th { background: var(--navy-050); color: var(--navy-900); font-weight: 700; } tr:hover td { background: var(--navy-050); } /* ---- Responsive nav ---- */ @media (max-width: 48rem) { .nav__toggle { display: flex; align-items: center; gap: .6rem; width: 100%; background: var(--navy-900); color: #fff; border: 0; padding: .85rem 1.1rem; font-weight: 600; text-align: left; cursor: pointer; font-size: var(--step-0); } .nav__toggle-bars { position: relative; display: inline-block; width: 1.25rem; height: 1rem; flex: 0 0 auto; } .nav__toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--speed) ease, opacity var(--speed) ease, top var(--speed) ease; } .nav__toggle-bars span:nth-child(1) { top: 0; } .nav__toggle-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); } .nav__toggle-bars span:nth-child(3) { top: 100%; transform: translateY(-100%); } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); } .nav__inner { display: none; flex-direction: column; } .nav__inner.is-open { display: flex; } .nav__item { width: 100%; } /* Verify CTA: full-width red bar within the stacked mobile menu */ .nav__item--cta { margin-left: 0; } .nav__verify { margin: .5rem; justify-content: center; border-radius: var(--radius); padding: .8rem 1.1rem; font-size: var(--step-0); } .nav__top { border-top: 1px solid rgba(255,255,255,.12); justify-content: space-between; } /* On mobile the panel is an inline accordion, not an absolute dropdown */ .nav__panel { position: static; min-width: 0; background: var(--navy-900); border: 0; border-radius: 0; box-shadow: none; padding: 0; } .nav__panel a { color: #cdddf0; padding: .8rem 1.1rem .8rem 2rem; border-top: 1px solid rgba(255,255,255,.08); } .nav__panel a:hover, .nav__panel a:focus-visible { background: rgba(255,255,255,.06); color: #fff; } } /* ---- Print ---- */ @media print { .util, .gov-banner, .nav, .footer, .skip-link { display: none; } body { color: #000; } a { color: #000; text-decoration: underline; } } /* ============================================================= Document / position-paper pages ============================================================= */ .doc-status { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .doc-status__badge { display: inline-block; font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .3rem .75rem; border-radius: 999px; } .doc-status--adopted .doc-status__badge, .doc-status--active .doc-status__badge, .doc-status--final-adopted .doc-status__badge { background: #e3f0e4; color: #0c5132; border: 1px solid #1a7f37; } .doc-status--public-comment .doc-status__badge, .doc-status--draft .doc-status__badge { background: #fef3c7; color: #854d0e; border: 1px solid #b45309; } .doc-status--superseded .doc-status__badge, .doc-status--archived .doc-status__badge { background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--gray-300); } .doc-status__note { font-size: var(--step--1); color: var(--warn); font-weight: 600; } .doc-summary { background: var(--navy-050); border-left: 4px solid var(--navy-700); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem; } .doc-summary p { margin: 0; font-size: var(--step-1); } .doc-toc { background: var(--paper); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1rem 1.25rem; } .doc-toc ol { margin: 0; padding-left: 1.25rem; } .doc-toc li { margin: .25rem 0; } .doc-section { scroll-margin-top: 1.5rem; } .doc-anchor { color: var(--gray-300); text-decoration: none; margin-right: .4rem; font-weight: 400; opacity: 0; transition: opacity var(--speed); } .doc-section:hover .doc-anchor, .doc-anchor:focus { opacity: 1; color: var(--red-600); } .doc-section:target { background: #fffbea; outline: 2px solid var(--focus-ring); outline-offset: .5rem; border-radius: var(--radius); } .doc-faq h3 { font-size: var(--step-1); } .doc-versions { border-top: 1px solid var(--gray-100); padding-top: 1.5rem; } /* ============================================================= Privilege-to-Practice verification block ============================================================= */ .ptp { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); } .ptp__card { background: var(--paper); border: 1px solid var(--gray-100); border-top: 4px solid var(--red-600); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.75rem; display: grid; gap: 1.25rem 1.75rem; grid-template-columns: 1.3fr 1fr; align-items: start; } .ptp__text { grid-column: 1; } .ptp__widget { grid-column: 2; } .ptp__text h2 { margin: 0; } .ptp__text p.prose { margin: .5rem 0 0; } /* Results span the full card width, below the text+form row */ .ptp__results { grid-column: 1 / -1; } .ptp__results:empty { display: none; } .ptp__templates { display: none; } @media (max-width: 44rem) { .ptp__card { grid-template-columns: 1fr; } .ptp__text, .ptp__widget { grid-column: 1; } } .ptp__form { display: grid; gap: .6rem; } .ptp__field label { font-weight: 700; font-size: var(--step--1); color: var(--navy-900); display: block; margin-bottom: .25rem; } .ptp__form input.ptp__query { padding: .7rem .85rem; font-size: var(--step-0); border: 2px solid var(--gray-300); border-radius: var(--radius); width: 100%; } .ptp__form input.ptp__query:focus-visible { border-color: var(--navy-700); outline: 2px solid var(--navy-700); outline-offset: 1px; } .ptp__terms { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--step--1); margin: .1rem 0; } .ptp__terms input { margin-top: .2rem; } .ptp__form .btn { width: 100%; text-align: center; cursor: pointer; } .ptp__hint { font-size: var(--step--1); margin: .15rem 0 0; } .ptp__widget.is-loading .ptp__search { opacity: .6; pointer-events: none; } .ptp__widget.is-loading .ptp__search::after { content: " checking..."; } .ptp__results { grid-column: 1 / -1; margin-top: 0; } .ptp__results.is-shown { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-100); } .ptp__no-results p strong { color: var(--navy-900); } .ptp__no-results ul { margin: .6rem 0; padding-left: 1.2rem; } .ptp__no-results li { margin: .35rem 0; } .ptp__recaptcha-note { font-size: calc(var(--step--1) * .9); color: var(--gray-500); margin-top: .8rem; } @media (max-width: 44rem) { .ptp__card { grid-template-columns: 1fr; } } /* ---- Lookup results (markup comes from the backend; we style its classes) ---- */ .lookup-widget__search-results { display: grid; gap: 1.25rem; } /* Provider summary: EMS ID + the all-important PTP status, as a prominent banner. The whole block is tinted by status: green when a Privilege to Practice is active, red when it is not, so the answer reads at a glance (matches the PDF). */ .lookup-widget__provider { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; background: var(--navy-050); border: 1px solid var(--navy-100); border-left: 5px solid var(--navy-800); border-radius: var(--radius); padding: 1rem 1.25rem; } /* Active PTP -> green banner */ .lookup-widget__search-results--has-ptp .lookup-widget__provider { background: #ecf6ee; border-color: #b7dcc0; border-left-color: var(--ok); } .lookup-widget__search-results--has-ptp .lookup-widget__provider-emsid { color: #14532b; } /* No PTP -> red banner */ .lookup-widget__search-results:not(.lookup-widget__search-results--has-ptp) .lookup-widget__provider { background: #fdecee; border-color: #f3c2c8; border-left-color: var(--red-600); } .lookup-widget__provider > div { display: flex; align-items: center; gap: .5rem; font-size: var(--step-0); } .lookup-widget__provider-emsid { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: .02em; color: var(--navy-900); } /* "Yes" privilege badge (green, with check). The --has-ptp modifier confirms active. */ .lookup-widget__provider-has-ptp { display: inline-flex; align-items: center; gap: .4rem; background: #1e7a46; color: #fff; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .04em; } .lookup-widget__provider-has-ptp svg path { fill: #fff; } /* If a result is returned WITHOUT the has-ptp modifier, tone the badge neutral */ .lookup-widget__search-results:not(.lookup-widget__search-results--has-ptp) .lookup-widget__provider-has-ptp { background: var(--gray-300); color: var(--navy-900); } .lookup-widget__search-results:not(.lookup-widget__search-results--has-ptp) .lookup-widget__provider-has-ptp svg path { fill: var(--navy-900); } /* License / certification blocks. State Licenses becomes a full-width grid of per-state cards; National Certification sits below it. */ .lookup-widget__search-results > div:nth-child(2) { display: grid; gap: 1rem; grid-template-columns: 1fr; } .lookup-widget__licenses { background: var(--paper); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); } .lookup-widget__licenses-title { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); font-weight: 700; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--gray-100); } /* Per-state card grid (rebuilt client-side from the returned licenses) */ .lookup-widget__license-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .lookup-widget__licenses--grid .lookup-widget__license { display: block; border: 1px solid var(--gray-100); border-top: 3px solid var(--ok); border-radius: var(--radius); padding: .8rem .95rem; background: var(--gray-050); min-width: 0; overflow-wrap: anywhere; } .lookup-widget__license-head { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--navy-900); margin: 0 0 .55rem; padding-bottom: .4rem; border-bottom: 1px solid var(--gray-200); } /* When a licensee-name follows the head, the separator (border + spacing) moves DOWN to the name, so head + name read as one header block. */ .lookup-widget__license-head:has(+ .lookup-widget__license-name) { margin: 0; padding-bottom: 0; border-bottom: 0; } .lookup-widget__license-name { font-size: calc(var(--step--1) * .95); color: var(--ink-soft); font-weight: 600; margin: .1rem 0 .55rem; padding-bottom: .4rem; border-bottom: 1px solid var(--gray-200); overflow-wrap: anywhere; } .lookup-widget__license-rows { display: grid; gap: .3rem; } .lookup-widget__license-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: .25rem .6rem; font-size: calc(var(--step--1) * .95); align-items: baseline; min-width: 0; } .lookup-widget__license-row .lookup-widget__label { color: var(--gray-500); } .lookup-widget__license-row > span:last-child { color: var(--navy-900); font-weight: 600; overflow-wrap: anywhere; min-width: 0; } .lookup-widget__license-status { text-transform: capitalize; } /* National Certification: NREMT seal beside the section title. The seal is attributive (the data comes from the National Registry of EMTs); kept at a modest size so it reads as a source mark, not a co-brand. */ .lookup-widget__natcert-head { display: flex; align-items: center; gap: .8rem; margin: .2rem 0 .6rem; } .lookup-widget__natcert-seal { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: #fff; } @media (max-width: 26rem) { .lookup-widget__license-row { grid-template-columns: 1fr; gap: 0; } } /* National Certification block keeps the original label/value layout. Scoped to the cert block so it never touches the State Licenses card grid. */ .lookup-widget__licenses:not(.lookup-widget__licenses--grid) > div > div { display: grid; grid-template-columns: 11rem 1fr; gap: .3rem .6rem; padding: .18rem 0; font-size: calc(var(--step--1) * .95); } .lookup-widget__label { color: var(--gray-500); } .lookup-widget__license-number, .lookup-widget__license-level, .lookup-widget__license-expiration { color: var(--navy-900); font-weight: 600; } /* Disclaimer below results */ .lookup-widget__disclaimer { grid-column: 1 / -1; font-size: calc(var(--step--1) * .95); color: var(--gray-500); border-top: 1px solid var(--gray-100); padding-top: 1rem; } .lookup-widget__disclaimer p { margin: .4rem 0; } /* No-results message (our template) */ .ptp__no-results { font-size: var(--step--1); } .ptp__no-results h2 { font-size: var(--step-1); margin: 1.2rem 0 .4rem; } /* Privilege-valid-in breakdown (computed client-side from states.tsv) */ .ptp__valid { grid-column: 1 / -1; display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; margin-top: .25rem; } @media (max-width: 38rem) { .ptp__valid { grid-template-columns: 1fr; } } .ptp__valid-group h4 { margin: 0 0 .3rem; font-size: var(--step-0); color: var(--navy-900); } .ptp__valid-note { font-size: calc(var(--step--1) * .95); color: var(--gray-500); margin: 0 0 .6rem; } .ptp__states { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .25rem .75rem; } .ptp__states li { font-size: var(--step--1); color: var(--navy-900); padding: .15rem 0; border-bottom: 1px solid var(--gray-100); } .ptp__states-impl { color: var(--gray-500); font-size: calc(var(--step--1) * .85); } /* Awareness statement: how the PTP actually applies (home vs remote) */ .ptp-awareness { grid-column: 1 / -1; background: var(--navy-050); border: 1px solid var(--navy-100); border-left: 4px solid var(--navy-700); border-radius: var(--radius); padding: .85rem 1.1rem; margin: .25rem 0; } .ptp-awareness p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); } .ptp-awareness p + p { margin-top: .6rem; } .ptp-awareness__coc strong { color: var(--ink); } /* PTP validity results map (home states vs remote states where PTP is honored) */ .ptp-map { grid-column: 1 / -1; margin: .5rem 0 .25rem; } .ptp-map__title { margin: 0 0 .5rem; font-size: var(--step-0); color: var(--navy-900); } .ptp-map__svg { display: block; width: 100%; max-width: 40rem; height: auto; margin: 0 auto; } /* Thin black outline gives each state visible definition against the page background. Kept very thin (.5px) and slightly transparent so it adds definition without competing with the colored fills. High-contrast mode below overrides this with a stronger black. */ .ptp-map__state { stroke: rgba(0, 0, 0, .55); stroke-width: .5; stroke-linejoin: round; } .ptp-map__state--home { fill: var(--ok); } /* licensed home states: green */ .ptp-map__state--remote { fill: var(--map-compact); } /* PTP honored: navy blue */ .ptp-map__state--other { fill: var(--map-none); } /* not in force: neutral grey */ /* Grayscale / print safe: home states also get a diagonal hatch overlay so the two in-force categories stay distinguishable without relying on color. */ @media print, (forced-colors: active) { .ptp-map__state--home { fill: url(#ptpHomeHatch), var(--ok); } } .ptp-map__legend { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; justify-content: center; font-size: var(--step--1); color: var(--ink-soft); } .ptp-map__legend li { display: inline-flex; align-items: center; gap: .45rem; } .ptp-map__sw { width: .9rem; height: .9rem; border-radius: 2px; flex: none; border: 1px solid rgba(0,0,0,.12); } .ptp-map__sw--home { background: var(--ok); } .ptp-map__sw--remote { background: var(--map-compact); } .ptp-map__sw--other { background: var(--map-none); } html[data-contrast="high"] .ptp-map__state { stroke: #000; stroke-width: 1.2; } /* Download / actions bar */ .ptp__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .5rem; margin: .75rem 0 1.25rem; } .ptp__download { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: var(--navy-800); border: 2px solid var(--navy-800); } .ptp__download:hover { background: var(--navy-800); color: #fff; } .ptp__download::before { content: "\2193"; font-weight: 700; } /* ============================================================= Participating-states map ============================================================= */ .map-legend { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; font-size: var(--step--1); } .map-legend span { display: inline-flex; align-items: center; gap: .5rem; } /* Grouped legend: the two "in force" categories read as one takeaway, separate from the "not yet in force" categories. */ .map-legend--grouped { gap: 1rem 2.5rem; align-items: start; } .map-legend__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; } .map-legend__title { flex-basis: 100%; display: block; gap: 0; font-size: calc(var(--step--1) * .82); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--navy-800); margin-bottom: .15rem; padding-left: .65rem; position: relative; } .map-legend__title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 1em; border-radius: 2px; background: var(--gold, #f0c651); } /* At-a-glance count chip, overlaid on the empty top-left (Pacific) of the map. */ .usmap-stats { position: absolute; top: .25rem; left: .25rem; z-index: 5; margin: 0; background: rgba(255,255,255,.9); border: 1px solid var(--gray-100); border-left: 3px solid var(--gold, #f0c651); border-radius: var(--radius); padding: .4rem .7rem; font-size: var(--step--1); color: var(--ink-soft); box-shadow: var(--shadow); pointer-events: none; line-height: 1.2; } .usmap-stats__n { font-family: var(--font-display); font-weight: 600; color: var(--navy-900); font-size: var(--step-0); } .usmap-stats__sep { color: var(--gray-300); margin: 0 .15rem; } @media (max-width: 32rem) { .usmap-stats { font-size: calc(var(--step--1) * .9); padding: .3rem .5rem; } } .sw { width: 1rem; height: 1rem; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.2); } .sw--participating { background: var(--map-compact); } .sw--implementing { background: var(--map-impl); } .sw--enacted_delayed { background: repeating-linear-gradient(45deg, var(--map-delayed), var(--map-delayed) 4.5px, var(--map-compact) 4.5px, var(--map-compact) 6px); } .sw--considering { background: radial-gradient(circle at center, #5f6b78 28%, transparent 30%) 0 0 / 6px 6px, #c4ccd4; } .sw--none { background: var(--map-none); } /* Real geographic SVG choropleth */ .usmap { width: 100%; max-width: 56rem; margin-inline: auto; } .usmap__svg { width: 100%; height: auto; display: block; } .usmap__state path { stroke: rgba(0, 0, 0, .55); stroke-width: .5; stroke-linejoin: round; transition: filter var(--speed); outline: none; cursor: pointer; } .usmap__state--participating path { fill: var(--map-compact); } .usmap__state--implementing path { fill: var(--map-impl); } .usmap__state--enacted_delayed path { fill: url(#mapDelayedHatch); } .usmap__state--considering path { fill: url(#mapConsiderDots); } .usmap__state--none path { fill: var(--map-none); } /* Hover/focus affordance: lift the state and ring it in brand gold so the active state clearly reads as interactive (was a faint brightness shift). */ .usmap__state:hover path, .usmap__state:focus-visible path { filter: brightness(1.06); stroke: var(--gold, #f0c651); stroke-width: 2.4; } .usmap__state:focus-visible path { stroke-width: 3; } html[data-contrast="high"] .usmap__state path { stroke: #000; stroke-width: 1.2; } /* Inline 2-letter state labels (non-interactive, never block the path). */ .usmap__label { font-family: var(--font-sans); font-weight: 700; font-size: 13px; text-anchor: middle; dominant-baseline: central; pointer-events: none; paint-order: stroke; } .usmap__label--dark { fill: #fff; stroke: rgba(17,36,62,.35); stroke-width: .6px; } .usmap__label--light { fill: var(--navy-900); stroke: rgba(255,255,255,.55); stroke-width: .9px; } /* Callout column (small eastern states): leader line + clickable label. */ .usmap__leader { stroke: var(--gray-400, #9aa6b3); stroke-width: 1; pointer-events: none; } .usmap__cl-label { font-family: var(--font-sans); font-weight: 700; font-size: 13px; fill: var(--navy-900); dominant-baseline: central; } .usmap__cl-sw { stroke: rgba(0,0,0,.2); stroke-width: .5; } .usmap__cl-sw--participating { fill: var(--map-compact); } .usmap__cl-sw--implementing { fill: var(--map-impl); } .usmap__cl-sw--enacted_delayed { fill: url(#mapDelayedHatch); } .usmap__cl-sw--considering { fill: url(#mapConsiderDots); } .usmap__cl-sw--none { fill: var(--map-none); } .usmap__cl { cursor: pointer; } .usmap__cl:hover .usmap__cl-label, .usmap__cl:focus-visible .usmap__cl-label { fill: var(--red-600); text-decoration: underline; } .usmap__cl:hover .usmap__cl-sw { stroke: var(--gold, #f0c651); stroke-width: 1.6; } .states-table-wrap summary { cursor: pointer; font-weight: 600; color: var(--link); padding: .5rem 0; } .states-table-wrap summary:hover { color: var(--link-hover); } /* Collapsible RFP template box on the NEMSCD page */ .rfp-template { border: 1px solid var(--gray-100); border-radius: var(--radius); margin: 1rem 0 1.5rem; background: var(--paper); } .rfp-template > summary { cursor: pointer; font-weight: 600; color: var(--navy-800); padding: .9rem 1.1rem; list-style: none; display: flex; align-items: center; gap: .6rem; } .rfp-template > summary::-webkit-details-marker { display: none; } .rfp-template > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 3px; background: var(--navy-800); color: #fff; font-weight: 700; line-height: 1; flex: 0 0 auto; } .rfp-template[open] > summary::before { content: "\2212"; } .rfp-template > summary:hover { color: var(--navy-900); } .rfp-template[open] > summary { border-bottom: 1px solid var(--gray-100); } .rfp-template > :not(summary) { padding-inline: 1.1rem; } .rfp-template > :nth-child(2) { padding-top: 1rem; } .rfp-template > :last-child { padding-bottom: 1rem; } /* ---- Per-state detail (Participating States page). The map deep-links to #XX anchors that live here. ---- */ .states-detail__heading { margin: 1.5rem 0 .15rem; } .states-detail__blurb { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 .75rem; max-width: 60ch; } .states-detail__grid { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .states-detail__item { background: var(--paper); border: 1px solid var(--gray-100); border-left: 4px solid var(--gray-100); border-radius: var(--radius); scroll-margin-top: 6rem; transition: transform .18s ease, box-shadow .18s ease; } .states-detail__item:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .states-detail__link { display: flex; align-items: baseline; gap: .55rem; padding: .6rem .8rem; text-decoration: none; color: inherit; border-radius: inherit; } .states-detail__link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .states-detail__item:hover .states-detail__name { color: var(--red-600); } .states-detail__go { margin-left: auto; align-self: center; color: var(--red-600); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; } .states-detail__item:hover .states-detail__go, .states-detail__link:focus-visible .states-detail__go { opacity: 1; transform: translateX(0); } .states-detail__item .sw { flex: 0 0 auto; position: relative; top: .15rem; } .states-detail__item--participating { border-left-color: var(--map-compact); } .states-detail__item--implementing { border-left-color: var(--map-impl); } .states-detail__item--enacted_delayed { border-left-color: var(--map-delayed); } .states-detail__item--considering { border-left-color: var(--map-consider); } .states-detail__item--none { border-left-color: var(--map-none); } .states-detail__name { font-weight: 600; color: var(--navy-900); } .states-detail__year { color: var(--gray-500); font-size: var(--step--1); } .states-detail__item:target { outline: 3px solid var(--focus-ring); outline-offset: 2px; box-shadow: var(--shadow); } /* ---- Public meetings notice block ---- */ .meetings { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .meetings__col { background: var(--paper); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow); } .meetings__heading { font-size: var(--step-0); text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin: 0 0 .75rem; } .meetings__list { list-style: none; margin: 0; padding: 0; } .meetings__item { display: flex; flex-direction: column; padding: .6rem 0; border-bottom: 1px solid var(--gray-100); } .meetings__item:last-child { border-bottom: 0; } .meetings__item--upcoming { border-left: 4px solid var(--red-600); padding-left: .85rem; margin-left: -.85rem; } .meetings__date { font-weight: 700; color: var(--navy-900); } .meetings__body { color: var(--ink-soft); font-size: var(--step--1); } .meetings__note { color: var(--gray-500); } /* Screen-reader-only utility */ .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; } /* ---- Commissioners: per-state card + roster grid ---- */ .commissioner-card { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--gray-100); border-left: 4px solid var(--navy-700); border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.75rem; } .commissioner-card--lead { margin-bottom: 2rem; } /* Pending appointment: visually softer card so it reads as a placeholder rather than a finished bio. Same dimensions as a lead card so the page layout doesn't shift when a real commissioner is appointed. */ .commissioner-card--pending { margin-bottom: 2rem; background: var(--gray-50, #f7f8fa); border: 1px dashed var(--gray-300, #d6dade); border-radius: .5rem; padding: 1.1rem 1.25rem; } .commissioner-card--pending .commissioner-card__name { color: var(--ink-soft); font-style: italic; font-weight: 600; } .commissioner-card--pending .commissioner-card__title { color: var(--ink-soft); font-style: normal; max-width: 60ch; } .commissioner-grid__person--pending { color: var(--ink-soft); font-style: italic; } /* per-state two-column layout */ .state-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; } .state-main { min-width: 0; } .state-block { padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--gray-100); } .state-block:last-child { border-bottom: 0; margin-bottom: 0; } .state-block > h2 { margin: 0 0 .6rem; font-size: var(--step-2); color: var(--navy-900); } .state-block .prose > :first-child { margin-top: 0; } .state-block .prose ul { margin: .4rem 0; } .state-side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 1rem; } @media (max-width: 52rem){ .state-layout { grid-template-columns: 1fr; gap: 1.5rem; } .state-side { position: static; } } /* contained, framed, clickable certificate */ .cert { margin: 1.1rem 0 0; } .cert a { display: inline-block; border: 1px solid var(--gray-300); border-radius: var(--radius); padding: .5rem; background: var(--paper); box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; } .cert a:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .cert img { display: block; width: 100%; max-width: 320px; height: auto; border-radius: 2px; } .cert figcaption { margin-top: .5rem; font-size: var(--step--1); color: var(--gray-500); } /* resource cards in the sidebar */ .resource-card { background: var(--paper); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); } .resource-card--accent { background: var(--navy-050); border-color: var(--navy-100); } .resource-card__title { margin: 0 0 .6rem; font-size: var(--step-0); color: var(--navy-900); border-bottom: 2px solid var(--red-600); padding-bottom: .4rem; } .resource-card__links ul { list-style: none; margin: 0; padding: 0; } .resource-card__links li { padding: .35rem 0; border-bottom: 1px solid var(--gray-050); line-height: 1.4; } .resource-card__links li:last-child { border-bottom: 0; } .resource-card__links a { text-decoration: none; font-weight: 600; } .resource-card__links a:hover { text-decoration: underline; } .state-back { margin-top: 2rem; } .retired-grid--inline { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } /* Headshots follow the sitewide standard crop: 300x354 (0.85 aspect, head and shoulders). Render at that same ratio so standard photos are never cropped; off-standard uploads center-crop via object-fit until reshot. */ .commissioner-card__photo { width: 170px; height: 200px; object-fit: cover; border-radius: var(--radius); flex: none; background: var(--gray-050); } .commissioner-card__name { font-size: var(--step-1); font-weight: 700; color: var(--navy-900); margin: 0; } .commissioner-card__title { color: var(--ink-soft); margin: .15rem 0 .6rem; } .commissioner-card__contact { font-style: normal; font-size: var(--step--1); color: var(--gray-500); line-height: 1.5; } @media (max-width: 32rem){ .commissioner-card { flex-direction: column; } .commissioner-card__photo { width: 128px; height: 151px; } } .commissioner-card--withcert .commissioner-card__body { flex: 1 1 auto; min-width: 0; } /* Certificate sits as a defined right-hand panel with a divider, not a thumbnail floating at the far edge with a dead gap before it. The body fills the space up to the divider (no auto margin). */ .commissioner-card__cert { margin: 0; flex: 0 0 auto; width: clamp(150px, 15vw, 200px); text-align: center; border-left: 1px solid var(--gray-100); padding-left: 1.4rem; align-self: stretch; display: flex; flex-direction: column; } .commissioner-card__cert img { width: 100%; height: auto; border: 1px solid var(--gray-100); border-radius: 6px; box-shadow: var(--shadow); display: block; } .commissioner-card__cert figcaption { font-size: var(--step--2); color: var(--gray-500); margin-top: .45rem; line-height: 1.45; } .commissioner-card__photo[data-lightbox], .commissioner-card__cert img[data-lightbox] { cursor: zoom-in; transition: transform .2s ease, box-shadow .2s ease; } .commissioner-card__photo[data-lightbox]:hover, .commissioner-card__cert img[data-lightbox]:hover { transform: scale(1.02); } .commissioner-card__photo[data-lightbox]:focus-visible, .commissioner-card__cert img[data-lightbox]:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 2px; } @media (max-width: 60rem){ .commissioner-card__cert { margin: 1rem 0 0; width: clamp(150px, 30vw, 200px); border-left: 0; padding-left: 0; border-top: 1px solid var(--gray-100); padding-top: 1rem; align-self: flex-start; } .commissioner-card--withcert { flex-wrap: wrap; } } .email-btn { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem; padding: .5rem .9rem; background: var(--navy-700); color: #fff; border: 0; border-radius: var(--radius); font-size: var(--step--1); font-weight: 600; cursor: pointer; transition: background .2s ease; } .email-btn:hover, .email-btn:focus-visible { background: var(--navy-900); outline: none; } .email-btn:focus-visible { box-shadow: 0 0 0 3px rgba(17,36,62,.3); } .email-btn__icon { font-size: 1.05em; } .email-btn__fallback { display: inline-block; margin-top: .7rem; font-size: var(--step--1); } /* Lightbox overlay */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; background: rgba(8,20,38,.92); padding: clamp(1rem, 4vw, 3rem); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff; } .lightbox__caption { color: #fff; font-size: var(--step--1); text-align: center; max-width: 60ch; } .lightbox__close { position: absolute; top: 1rem; right: 1.25rem; background: transparent; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; padding: .25rem .6rem; border-radius: 6px; } .lightbox__close:hover, .lightbox__close:focus-visible { background: rgba(255,255,255,.15); outline: none; } .commissioner-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .commissioner-grid__item a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.1rem .9rem; box-shadow: var(--shadow); height: 100%; transition: box-shadow .15s, transform .15s; } .commissioner-grid__item a:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .commissioner-grid__item img { width: 88px; height: 88px; object-fit: cover; border-radius: 50%; background: var(--gray-050); } .commissioner-grid__noimg { width: 88px; height: 88px; border-radius: 50%; background: var(--navy-050); color: var(--navy-700); display: grid; place-items: center; font-weight: 700; font-size: var(--step-1); } .commissioner-grid__state { font-weight: 700; color: var(--navy-900); } .commissioner-grid__person { font-size: var(--step--1); color: var(--gray-500); } .commissioner-grid__item a:focus-visible { outline: 4px solid var(--focus-ring); outline-offset: 2px; } /* ---- Retired commissioners roster ---- */ .retired-grid { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .retired-grid__item { display: flex; gap: .9rem; align-items: flex-start; background: var(--paper); border: 1px solid var(--gray-100); border-radius: var(--radius); padding: .9rem 1rem; } .retired-grid__item img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); flex: none; background: var(--gray-050); } .retired-grid__name { font-weight: 700; color: var(--navy-900); margin: 0; } .retired-grid__meta { font-size: var(--step--1); color: var(--gray-500); margin: .1rem 0 0; } /* A retiree's Certificate of Appointment stays with their record: small labeled thumbnail, click (or Enter) to enlarge via the shared lightbox. */ .retired-grid__certs { display: flex; gap: .9rem; flex-wrap: wrap; margin: .55rem 0 0; } .retired-grid__item .retired-grid__cert { margin: 0; } .retired-grid__item .retired-grid__cert img { width: 140px; height: auto; border: 1px solid var(--gray-100); border-radius: 4px; box-shadow: var(--shadow); display: block; background: var(--paper); cursor: zoom-in; transition: transform .2s ease; } .retired-grid__item .retired-grid__cert img:hover { transform: scale(1.03); } .retired-grid__item .retired-grid__cert img:focus-visible { outline: 3px solid var(--navy-700); outline-offset: 2px; } .retired-grid__cert figcaption { font-size: var(--step--1); color: var(--gray-500); margin-top: .3rem; } .retired-grid__all { margin: .25rem 0 0; font-size: var(--step--1); } .retired-grid__all a { font-weight: 600; text-decoration: none; } .retired-grid__all a:hover { text-decoration: underline; } amber clarification). Reusable across content pages. ---- */ .callout { border: 1px solid var(--gray-100); border-left: 4px solid var(--navy-700); background: var(--navy-050); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1.5rem 0; } .callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; } .callout__title { font-weight: 700; color: var(--navy-900); margin: 0 0 .4rem; font-size: var(--step-0); } .callout p { font-size: var(--step--1); color: var(--ink-soft); } .callout--critical { border-left-color: var(--red-600); background: var(--red-100); } .callout--critical .callout__title { color: var(--red-700); } .callout--confirm { border-left-color: var(--ok); background: #ecf6ee; } .callout--confirm .callout__title { color: var(--ok); } .callout--note { border-left-color: var(--warn); background: #fdf3e3; } .callout--note .callout__title { color: var(--warn); } /* ---- Check list (benefits, completed-checklist). Green ticks via ::before. ---- */ .checks { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; } .checks li { position: relative; padding: .65rem .85rem .65rem 2.4rem; background: var(--gray-050); border: 1px solid var(--gray-100); border-radius: var(--radius); font-size: var(--step--1); color: var(--ink-soft); } .checks li::before { content: ""; position: absolute; left: .85rem; top: .9rem; width: .85rem; height: .45rem; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); } .checks li strong { color: var(--navy-900); } html[data-contrast="high"] .checks li::before { border-color: #000; } /* ---- "Does / does not" two-column comparison ---- */ .does-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; } .does-col h3 { margin: 0 0 .5rem; font-size: var(--step-1); } .does-col--yes h3 { color: var(--ok); } .does-col--no h3 { color: var(--red-700); } @media (max-width: 44rem){ .does-grid { grid-template-columns: 1fr; } } /* red "x" list, mirrors .checks */ .x-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; } .x-list li { position: relative; padding: .65rem .85rem .65rem 2.4rem; background: var(--gray-050); border: 1px solid var(--gray-100); border-radius: var(--radius); font-size: var(--step--1); color: var(--ink-soft); } .x-list li::before, .x-list li::after { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: .85rem; height: 0; border-top: 2.5px solid var(--red-600); } .x-list li::before { transform: rotate(45deg); } .x-list li::after { transform: rotate(-45deg); } html[data-contrast="high"] .x-list li::before, html[data-contrast="high"] .x-list li::after { border-color: #000; } /* ---- About the Commission: seal + text ---- */ .about-commission { display: flex; gap: 1.75rem; align-items: flex-start; } .about-commission__seal { flex: none; margin: 0; text-align: center; } .about-commission__seal img { width: 150px; height: 150px; object-fit: contain; } .about-commission__seal figcaption { margin-top: .4rem; font-size: var(--step--1); } .about-commission__text { min-width: 0; } .about-commission__text > :first-child { margin-top: 0; } @media (max-width: 40rem){ .about-commission { flex-direction: column; align-items: center; text-align: center; } } /* seal page figure */ .seal-figure { float: right; margin: 0 0 1rem 1.5rem; text-align: center; max-width: 240px; } .seal-figure img { width: 220px; height: 220px; object-fit: contain; } .seal-figure figcaption { margin-top: .5rem; font-size: var(--step--1); color: var(--gray-500); } @media (max-width: 36rem){ .seal-figure { float: none; margin: 0 auto 1rem; } } /* ---- Eligibility disclosure inside the PTP card ---- */ .ptp__eligibility { margin-top: 1rem; border-top: 1px solid var(--gray-100); padding-top: .8rem; } .ptp__eligibility summary { cursor: pointer; font-weight: 700; color: var(--navy-800); list-style: none; position: relative; padding-right: 1.6rem; } .ptp__eligibility summary::-webkit-details-marker { display: none; } .ptp__eligibility summary::after { content: "+"; position: absolute; right: .2rem; top: -.1rem; font-size: 1.3rem; font-weight: 400; color: var(--navy-600); } .ptp__eligibility[open] summary::after { content: "\2212"; } .ptp__eligibility summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .ptp__eligibility-body { margin-top: .6rem; } .ptp__eligibility-body .checks { margin: .5rem 0; } .ptp__eligibility-body .checks li { font-size: var(--step--1); } /* "Don't know your EMS ID?" finder disclosure (UPDATE58) */ .ptp__find { margin-top: .5rem; } .ptp__find > summary { cursor: pointer; font-weight: 700; color: var(--navy-800); list-style: none; position: relative; padding-right: 1.6rem; font-size: var(--step--1); } .ptp__find > summary::-webkit-details-marker { display: none; } .ptp__find > summary::after { content: "+"; position: absolute; right: .2rem; top: -.15rem; font-size: 1.25rem; font-weight: 400; color: var(--navy-600); } .ptp__find[open] > summary::after { content: "\2212"; } .ptp__find > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .ptp__find-body { margin-top: .5rem; font-size: var(--step--1); color: var(--ink-soft); } .ptp__find-body ol { margin: .4rem 0; padding-left: 1.2rem; } .ptp__find-body li { margin: .35rem 0; } .ptp__find-body p { margin: .4rem 0; } /* ---- FAQ accordion (details/summary, no JS) ---- */ .faq { display: grid; gap: .6rem; margin: 1rem 0; } .faq__item { border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; } .faq__item summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; color: var(--navy-900); list-style: none; position: relative; padding-right: 2.6rem; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-weight: 400; font-size: 1.4rem; color: var(--navy-600); line-height: 1; } .faq__item[open] summary::after { content: "\2212"; } .faq__item summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; } .faq__a { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); } .faq__a p { margin: 0; } /* Committee accordions (/the-commission/committees/) */ .cmte-list { margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.75rem; } .cmte { border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 6rem; } .cmte > summary { cursor: pointer; padding: 1rem 1.2rem; color: var(--navy-900); list-style: none; position: relative; padding-right: 2.6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; } .cmte > summary::-webkit-details-marker { display: none; } .cmte > summary::after { content: "+"; position: absolute; right: 1.1rem; top: 1rem; font-weight: 400; font-size: 1.4rem; color: var(--navy-600); line-height: 1; } .cmte[open] > summary::after { content: "\2212"; } .cmte > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; } .cmte__name { font-weight: 700; font-size: var(--step-0); } .cmte__kind { font-size: var(--step--1); color: var(--ink-soft); font-weight: 400; } .cmte__body { padding: 0 1.2rem 1.2rem; color: var(--ink-soft); border-top: 1px solid var(--gray-100); } .cmte__body > p:first-child { margin-top: 1rem; } .cmte__body h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy-700); margin: 1.2rem 0 0.4rem; } .cmte__body ul { margin: 0.2rem 0; padding-left: 1.1rem; } .cmte__body li { margin: 0.15rem 0; } .cmte__role { color: var(--ink-soft); margin-left: 0.4rem; } .cmte__archive { margin: 0.6rem 0; } .cmte__archive summary { cursor: pointer; font-size: var(--step--1); font-weight: 600; color: var(--link); padding: 0.3rem 0; } .cmte__archive summary:hover { color: var(--link-hover); } .cmte__charter { margin-top: 0.8rem; } .cmte__meetings { margin-top: 1rem; font-weight: 600; } /* ---- Numbered steps (how-it-works). ---- */ .steps { list-style: none; counter-reset: step; margin: 1.25rem 0; padding: 0; display: grid; gap: .85rem; } .steps li { position: relative; counter-increment: step; padding: 1rem 1.1rem 1rem 3.4rem; background: var(--paper); border: 1px solid var(--gray-100); border-left: 4px solid var(--navy-700); border-radius: var(--radius); box-shadow: var(--shadow); } .steps li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.7rem; height: 1.7rem; background: var(--navy-800); color: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--step--1); } .steps li > :first-child { margin-top: 0; } .steps li strong { color: var(--navy-900); display: block; margin-bottom: .15rem; } .steps p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; } /* ---- Position paper pages (UPDATE42) ---- Renders the Commission's own published HTML layout for each adopted paper. Text is verbatim as adopted; this styles the Commission's structure (tier table, scenario boxes, action tags, callouts) onto site tokens. */ /* Adopted-PDF embed kept above the styled body */ .paper-embed { margin: 1.5rem 0 2rem; max-width: var(--wrap); } .paper-embed object { width: 100%; height: 80vh; min-height: 480px; border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--gray-050); } /* Shared body wrapper for both styled (pp-wrapper) and plain (article__text) papers */ .pp-wrapper, .pp-wrapper .article__text, .paper-body .article__text { font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; color: var(--ink); max-width: var(--wrap); margin: 0 auto; } .pp-wrapper p, .pp-wrapper li, .pp-wrapper td, .paper-body p, .paper-body li, .paper-body td { font-family: var(--font-sans); line-height: 1.6; color: var(--ink); } .pp-wrapper h1, .paper-body h1 { font-family: var(--font-display); font-size: var(--step-3); color: var(--navy-900); margin: 0 0 .25rem; } .pp-wrapper h2, .paper-body h2 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; color: var(--navy-800); border-bottom: 2px solid var(--navy-800); padding-bottom: 6px; margin-top: 2.25rem; margin-bottom: 1rem; } .pp-wrapper h3, .paper-body h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; color: var(--navy-800); margin-top: 1.6rem; margin-bottom: .6rem; } .pp-wrapper .pp-subtitle { font-weight: 700; color: var(--ink); margin-top: 1.25rem; margin-bottom: .5rem; } .pp-wrapper ul, .pp-wrapper ol, .paper-body ul, .paper-body ol { margin: .4rem 0 .9rem; padding-left: 1.75rem; } .pp-wrapper li, .paper-body li { margin-bottom: .4rem; } .pp-wrapper .pp-definition-note { font-style: italic; color: var(--ink-soft); font-size: var(--step--1); margin-bottom: 1.25rem; border-left: 3px solid var(--navy-800); padding-left: .9rem; } /* Download button */ .pp-wrapper .pp-download-btn, .paper-body .pp-download-btn { margin: 0 0 1.5rem; } .pp-wrapper .pp-download-btn a, .paper-body .pp-download-btn a { display: inline-block; padding: .7rem 1.6rem; background: var(--navy-800); color: #fff !important; text-decoration: none; font-weight: 700; border-radius: var(--radius); transition: background var(--speed) ease; } .pp-wrapper .pp-download-btn a:hover, .paper-body .pp-download-btn a:hover { background: var(--navy-700); } /* Tier table */ .pp-wrapper .pp-tier-table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; border: 1px solid var(--gray-100); box-shadow: var(--shadow); } .pp-wrapper .pp-tier-table th { background: var(--navy-800); color: #fff; font-weight: 700; padding: .65rem .75rem; border: 1px solid var(--navy-800); text-align: left; } .pp-wrapper .pp-tier-table td { border: 1px solid var(--gray-100); padding: .8rem .9rem; vertical-align: top; } .pp-wrapper .pp-tier-table tr:nth-child(even) td { background: var(--tint); } .pp-wrapper .pp-tier-table .pp-tier-num { text-align: center; font-weight: 700; width: 56px; font-size: var(--step-2); } .pp-wrapper .pp-tier-label { font-weight: 700; font-size: var(--step-0); display: block; margin-bottom: .5rem; } /* Scenario boxes */ .pp-wrapper .pp-scenario-box { background: var(--tint); border: 1px solid var(--navy-100); border-left: 4px solid var(--navy-800); padding: 1rem 1.1rem; margin: .9rem 0 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; } .pp-wrapper .pp-scenario-box p { margin: .4rem 0; } .pp-wrapper .pp-scenario-title { font-weight: 700; color: var(--navy-800); margin-bottom: .5rem; } .pp-wrapper .pp-decision-approve { color: var(--ok); font-weight: 700; } .pp-wrapper .pp-decision-deny { color: var(--red-700); font-weight: 700; } /* Exception / warning box */ .pp-wrapper .pp-exception-box { background: #fff8e6; border: 1px solid #e6d18a; border-left: 4px solid var(--warn); padding: .75rem 1rem; margin: .75rem 0 1rem; border-radius: 0 var(--radius) var(--radius) 0; } /* FAQ */ .pp-wrapper .pp-faq-question { font-weight: 700; color: var(--navy-800); margin-top: 1.1rem; margin-bottom: .25rem; } .pp-wrapper .pp-faq-answer { margin-bottom: .75rem; } /* Action tags */ .pp-wrapper .pp-action-tag { display: inline-block; font-weight: 700; padding: 2px 8px; border-radius: 3px; font-size: var(--step--1); margin-right: 6px; } .pp-wrapper .pp-action-deny { background: var(--red-100); color: var(--red-700); border: 1px solid #f5c6c6; } .pp-wrapper .pp-action-review { background: #fff3e0; color: #b35c00; border: 1px solid #ffe0b2; } .pp-wrapper .pp-action-approve { background: #e8f5e9; color: var(--ok); border: 1px solid #c8e6c9; } .pp-wrapper .pp-action-neutral { background: var(--navy-100); color: var(--navy-800); border: 1px solid var(--navy-100); } /* Callout */ .pp-wrapper .pp-callout { background: var(--navy-100); border: 1px solid var(--navy-100); padding: .9rem 1.1rem; margin: .9rem 0; border-radius: var(--radius); } .pp-wrapper hr.pp-divider { border: none; border-top: 1px solid var(--gray-100); margin: 1.75rem 0; } @media (max-width: 40rem) { .pp-wrapper .pp-tier-table, .pp-wrapper .pp-tier-table tbody, .pp-wrapper .pp-tier-table tr, .pp-wrapper .pp-tier-table td { display: block; width: 100%; } .pp-wrapper .pp-tier-table thead { display: none; } .pp-wrapper .pp-tier-table .pp-tier-num { text-align: left; width: auto; padding-bottom: 0; } } /* Collapsible adopted-PDF embed on position-paper pages (UPDATE42) */ .paper-embed-toggle { margin: 1.25rem 0 1.75rem; } .paper-embed-toggle > summary { cursor: pointer; font-weight: 600; color: var(--link); padding: .5rem 0; } .paper-embed-toggle > summary:hover { color: var(--link-hover); } .paper-embed-toggle[open] > summary { margin-bottom: .5rem; } /* Position-paper footnotes & references (UPDATE42) */ .pp-wrapper .pp-footnotes p { margin: .5rem 0; } .pp-wrapper .pp-refs { list-style: none; padding-left: 0; } .pp-wrapper .pp-refs li { padding-left: 1.5rem; text-indent: -1.5rem; margin-bottom: .5rem; word-break: break-word; } /* ---- On-this-page TOC + two-column doc layout (UPDATE43) ---- */ .doc-layout { width: 100%; } .doc-layout__main { min-width: 0; } /* allow content to shrink, prevents overflow */ /* Two columns on wide screens when a TOC is present */ @media (min-width: 60rem) { .doc-layout--with-toc { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; } .doc-layout--with-toc .doc-layout__main { grid-column: 1; grid-row: 1; } .doc-layout--with-toc .doc-layout__aside { grid-column: 2; grid-row: 1; } .doc-layout__aside { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain; } } .toc { font-family: var(--font-sans); font-size: var(--step--1); border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--gray-050); padding: .25rem .9rem .6rem; } .toc__details { margin: 0; } .toc__title { cursor: pointer; font-weight: 700; color: var(--navy-800); padding: .5rem 0; list-style: none; letter-spacing: .02em; text-transform: uppercase; font-size: var(--step--1); } .toc__title::-webkit-details-marker { display: none; } .toc__title::after { content: " \25BE"; color: var(--gray-300); } .toc__details[open] .toc__title::after { content: " \25B4"; } /* Related-pages variant: same box styling, static (non-collapsible) title (UPDATE52) */ .toc__title--static { margin: 0; padding: .5rem 0; cursor: default; } .toc__title--static::after { content: none; } .toc--related { margin-top: 1rem; } .doc-layout__aside > .toc + .toc--related { margin-top: 1rem; } .toc__list, .toc__sublist { list-style: none; margin: 0; padding: 0; } .toc__item { margin: 0; } .toc__sublist { margin: .1rem 0 .35rem; } .toc__link { display: block; padding: .3rem .6rem; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; line-height: 1.35; border-radius: 0 var(--radius) var(--radius) 0; } .toc__link:hover { color: var(--link); background: var(--navy-100); } .toc__link--sub { padding-left: 1.4rem; font-size: calc(var(--step--1) * 0.96); color: var(--gray-500); } .toc__link.is-active { border-left-color: var(--red-600); color: var(--navy-900); background: var(--navy-100); font-weight: 600; } /* On narrow screens the TOC sits above content as a collapsed dropdown */ @media (max-width: 59.99rem) { .doc-layout__aside { margin-bottom: 1.5rem; } .toc { background: var(--gray-050); } .toc__details:not([open]) { } /* default collapsed via JS below */ } /* Smooth in-page jumps + offset so headings aren't hidden under sticky chrome */ html { scroll-behavior: smooth; } .paper-body :where(h2, h3), .prose :where(h2, h3) { scroll-margin-top: 1.25rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- Glossary definition list (terminology page) (UPDATE50) ---- */ .prose .glossary { margin: 1.25rem 0; } .prose .glossary dt { font-weight: 700; color: var(--navy-800); font-size: var(--step-0); margin-top: 1.1rem; padding-top: .25rem; scroll-margin-top: 1.25rem; /* so #anchor jumps aren't hidden */ } .prose .glossary dt:first-child { margin-top: 0; } .prose .glossary dd { margin: .2rem 0 0 0; color: var(--ink); } /* ---- Podcasts & Videos: editorial layout (UPDATE53) ---- */ /* Featured / start-here flagship */ .media-featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: center; } .media-featured__video { min-width: 0; } .media-featured__video .video-embed { margin: 0; box-shadow: var(--shadow-lg); } .media-kicker { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .12em; font-size: var(--step--1); font-weight: 700; color: var(--red-600); margin: 0 0 .5rem; } .media-kicker__dot { color: var(--gray-300); } .media-featured__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: 0 0 .75rem; line-height: 1.15; } .media-featured__desc { color: var(--ink-soft); margin: 0 0 1.25rem; } @media (max-width: 52rem) { .media-featured { grid-template-columns: 1fr; } } /* Section titles with a short rule accent */ .media-section-title { font-size: var(--step-1); position: relative; padding-bottom: .5rem; margin-bottom: 1.25rem; } .media-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 3px; background: var(--red-600); border-radius: 2px; } .media-section-lead { color: var(--ink-soft); max-width: var(--measure); margin: -.5rem 0 1.5rem; } /* Video card grid */ .media-grid { display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .media-card { background: var(--paper); border: 1px solid var(--gray-100); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1); display: flex; flex-direction: column; } .media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .media-card .video-embed { margin: 0; border-radius: 0; } .media-card__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .3rem; } .media-card__title { font-size: var(--step-0); margin: 0; line-height: 1.25; color: var(--navy-900); } .media-card__host { font-family: var(--font-sans); font-size: var(--step--1); color: var(--gray-500); margin: 0; } .media-card__desc { color: var(--ink-soft); font-size: var(--step--1); margin: .25rem 0 0; } /* Audio podcast list */ .podcast-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .podcast-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; background: var(--paper); border: 1px solid var(--gray-100); border-left: 4px solid var(--navy-800); border-radius: var(--radius); padding: 1.1rem 1.4rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-left-color .25s; } .podcast-card:hover { transform: translateX(3px); box-shadow: var(--shadow-lg); border-left-color: var(--red-600); color: var(--ink); } .podcast-card__icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--navy-050); color: var(--navy-800); display: grid; place-items: center; flex: none; transition: background .25s, color .25s; } .podcast-card:hover .podcast-card__icon { background: var(--red-600); color: #fff; } .podcast-card__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .podcast-card__source { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--step--1) * .9); font-weight: 700; color: var(--gray-500); } .podcast-card__title { font-weight: 700; color: var(--navy-900); line-height: 1.25; } .podcast-card__desc { color: var(--ink-soft); font-size: var(--step--1); } .podcast-card__listen { font-family: var(--font-sans); font-weight: 700; font-size: var(--step--1); color: var(--red-600); white-space: nowrap; flex: none; } @media (max-width: 38rem) { .podcast-card { grid-template-columns: auto 1fr; } .podcast-card__listen { grid-column: 2; } } /* Channel CTA banner */ .media-channel { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; } .media-channel__title { margin: 0 0 .35rem; font-size: var(--step-1); } .media-channel__desc { color: var(--ink-soft); margin: 0; max-width: 46rem; } .media-channel__action { margin: 0; flex: none; } /* ---- Interactive US map: hover/tap info card + collapsed table (UPDATE56) ---- */ .usmap--interactive { position: relative; } .usmap__hint { text-align: center; color: var(--gray-500); font-size: var(--step--1); margin: .5rem 0 0; } .usmap-card { position: absolute; z-index: 30; width: 16rem; max-width: 80vw; background: var(--paper); border: 1px solid var(--gray-100); border-top: 3px solid var(--red-600); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .85rem 1rem; pointer-events: none; font-family: var(--font-sans); } .usmap-card__name { font-weight: 800; color: var(--navy-900); margin: 0 0 .4rem; font-size: var(--step-0); } .usmap-card__row { display: flex; align-items: center; gap: .4rem; margin: .15rem 0; font-size: var(--step--1); color: var(--ink-soft); } .usmap-card__k { font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; font-size: calc(var(--step--1) * .85); } .usmap-card__note { margin: .3rem 0 0; font-size: var(--step--1); color: var(--gray-500); font-style: italic; } .usmap-card__commish { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--gray-100); font-size: var(--step--1); color: var(--ink-soft); } .usmap-card__photo { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--gray-100); } .usmap-card .sw { width: .85rem; height: .85rem; border-radius: 2px; display: inline-block; flex: none; } /* Collapsed states-table toggle */ .states-table-toggle { border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--paper); } .states-table-toggle > summary { cursor: pointer; font-weight: 700; color: var(--navy-800); padding: .85rem 1.1rem; list-style: none; position: relative; padding-right: 2.4rem; } .states-table-toggle > summary::-webkit-details-marker { display: none; } .states-table-toggle > summary::after { content: "\25BE"; position: absolute; right: 1.1rem; color: var(--gray-300); transition: transform var(--speed); } .states-table-toggle[open] > summary::after { transform: rotate(180deg); } .states-table-toggle[open] > summary { border-bottom: 1px solid var(--gray-100); } .states-table-toggle .table-wrap { padding: .5rem 1.1rem 1rem; } /* ---- Leadership bio cards (governance page) (UPDATE59) ---- */ .bio { display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; align-items: start; margin: 1.5rem 0 2rem; } .bio__photo { width: 160px; height: 160px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--gray-100); box-shadow: var(--shadow); background: var(--navy-050); } .bio__body { min-width: 0; } .bio__name { margin: 0 0 .15rem; font-size: var(--step-1); color: var(--navy-900); } .bio__role { margin: 0 0 .6rem; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: calc(var(--step--1) * .9); color: var(--red-600); } .bio__body p { margin: 0 0 .7rem; } @media (max-width: 40rem) { .bio { grid-template-columns: 1fr; gap: .9rem; } .bio__photo { width: 120px; height: 120px; } } /* ---- Site search (UPDATE62) ---- */ /* Header search box */ .nav__item--search { display: flex; align-items: center; margin-left: auto; } .nav__item--search + .nav__item--cta { margin-left: .6rem; } .nav__search { display: flex; align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; } .nav__search input { background: transparent; border: 0; color: #fff; padding: .4rem .8rem; font-size: var(--step--1); width: 9rem; min-width: 0; } .nav__search input::placeholder { color: rgba(255,255,255,.7); } .nav__search input:focus { outline: none; } .nav__search button { background: transparent; border: 0; color: #fff; padding: .35rem .6rem .35rem .2rem; cursor: pointer; display: grid; place-items: center; } .nav__search:focus-within { background: rgba(255,255,255,.2); border-color: var(--focus-ring); } /* Keep the search input at 16px on touch devices and on the stacked mobile menu so iOS Safari doesn't zoom on focus. Desktop pointer + wide viewport keeps the compact --step--1 size. */ @media (hover: none), (max-width: 48rem) { .nav__search input { font-size: 1rem; } } @media (max-width: 62rem) { .nav__item--search { margin-left: 0; width: 100%; padding: .5rem 0; } .nav__search { width: 100%; border-radius: var(--radius); } .nav__search input { width: 100%; } } /* Search results page */ .search-page__form { display: flex; gap: .6rem; max-width: 38rem; } .search-page__input { flex: 1; padding: .7rem 1rem; font-size: var(--step-0); border: 2px solid var(--gray-100); border-radius: var(--radius); } .search-page__input:focus { outline: none; border-color: var(--navy-700); } .search-page__btn { background: var(--red-600); color: #fff; border: 0; border-radius: var(--radius); padding: 0 1.4rem; font-weight: 700; cursor: pointer; } .search-page__status { color: var(--gray-500); font-size: var(--step--1); margin: .25rem 0; } /* Best-answer card */ .search-best { display: block; background: var(--navy-050); border: 1px solid var(--navy-100); border-left: 4px solid var(--red-600); border-radius: var(--radius); padding: 1.1rem 1.3rem; text-decoration: none; color: var(--ink); margin: .5rem 0 1.5rem; transition: box-shadow var(--speed), transform var(--speed); } .search-best:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); color: var(--ink); } .search-best__tag { display: inline-block; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .08em; font-size: calc(var(--step--1) * .85); font-weight: 800; color: var(--red-600); margin-bottom: .3rem; } .search-best__title { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--navy-900); font-weight: 700; } .search-best__answer { display: block; color: var(--ink-soft); margin: .3rem 0 .5rem; } .search-best__go { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: var(--step--1); color: var(--navy-700); } /* Full-text results */ .search-results { display: grid; gap: 1.25rem; } .search-result__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--navy-800); text-decoration: none; font-weight: 700; } .search-result__title:hover { text-decoration: underline; } .search-result__url { color: var(--ok); font-size: var(--step--1); margin: .1rem 0; word-break: break-word; } .search-result__snippet { color: var(--ink-soft); margin: .25rem 0 0; } .search-result mark, .search-best mark { background: #fff3cd; color: inherit; padding: 0 .1em; border-radius: 2px; } /* ============================================================= Law & Governing Documents (Model Legislation, Rules, Bylaws, Policies) UPDATE64. Verbatim legal text: structure carries the meaning, so the styling stays restrained and prioritizes readability + scannability. ============================================================= */ .hero--legal { background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); } /* Action buttons (Word / Print) */ .leg-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.25rem 0 0; } .leg-actions .btn { cursor: pointer; font-size: var(--step--1); } /* Official-text callout: red left rule to signal "verbatim, do not edit" */ .callout--official { border-left-color: var(--red-600); background: #fdf3f4; } /* Title block (MODEL LEGISLATION / RECOGNITION OF ... ("REPLICA")) */ .leg-titleblock { text-align: center; margin: 2rem 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--navy-100); } .leg-titleblock__kicker { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .18em; font-size: var(--step--1); font-weight: 700; color: var(--red-600); margin: 0 0 .5rem; } .leg-titleblock__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; color: var(--navy-900); font-weight: 600; margin: 0; max-width: 38rem; margin-inline: auto; } /* "Notes for states" disclosure (front matter, not part of enacted text) */ .leg-notes { margin: 0 0 2rem; border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--gray-050); } .leg-notes__summary { cursor: pointer; padding: .85rem 1.1rem; font-family: var(--font-sans); font-weight: 700; color: var(--navy-800); font-size: var(--step--1); list-style: none; } .leg-notes__summary::-webkit-details-marker { display: none; } .leg-notes__summary::after { content: " \25BE"; color: var(--gray-300); } .leg-notes[open] .leg-notes__summary::after { content: " \25B4"; } .leg-notes__body { padding: 0 1.2rem 1rem; } .leg-notes__body p { margin: .75rem 0; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; } .leg-notes__src { font-style: italic; color: var(--gray-500); border-top: 1px solid var(--gray-100); padding-top: .75rem; } /* The document body */ .leg-doc { font-family: var(--font-serif); color: var(--ink); max-width: var(--measure); } .leg-doc p { margin: .8rem 0; line-height: 1.7; } /* Section heads: number eyebrow + title, with hover anchor */ .leg-section { margin: 0 0 2.25rem; scroll-margin-top: 1.5rem; } .leg-section__head { font-family: var(--font-display); margin: 2.5rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--navy-100); position: relative; } .leg-section:first-child .leg-section__head { margin-top: 0; } .leg-section__num { display: block; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .12em; font-size: var(--step--1); font-weight: 700; color: var(--red-600); } .leg-section__title { display: block; font-size: var(--step-2); line-height: 1.2; color: var(--navy-900); font-weight: 600; } .leg-section__anchor { position: absolute; left: -1.4rem; bottom: .55rem; color: var(--gray-300); text-decoration: none; opacity: 0; transition: opacity .15s; font-weight: 400; } .leg-section__head:hover .leg-section__anchor, .leg-section__anchor:focus { opacity: 1; color: var(--navy-700); } /* Nested ordered lists. The source carries its own marker labels (A., 1., a.), so we suppress native counters and render the source's marker verbatim. */ .leg-list { list-style: none; margin: .9rem 0; padding: 0; } .leg-item { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .4rem; margin: .65rem 0; align-items: baseline; } .leg-item__mark { font-family: var(--font-sans); font-weight: 700; color: var(--navy-700); text-align: left; font-size: .95em; } .leg-item__body { min-width: 0; } .leg-item__body > .leg-list:first-child { margin-top: .5rem; } .leg-list--alpha > .leg-item > .leg-item__mark { color: var(--navy-800); } .leg-list--num > .leg-item { margin-left: 0; } .leg-list--lower > .leg-item { margin-left: .5rem; } .leg-list--lower > .leg-item > .leg-item__mark { color: var(--gray-500); } /* Deep-link anchors at every subsection level (Section 3.A, 4.B.1, etc.) */ .leg-item { scroll-margin-top: 1.5rem; } .leg-item__body { position: relative; } .leg-item__anchor { position: absolute; left: -1.15rem; top: .05rem; color: var(--gray-300); text-decoration: none; opacity: 0; transition: opacity .15s; font-weight: 400; font-family: var(--font-sans); } .leg-item:hover > .leg-item__body > .leg-item__anchor, .leg-item__anchor:focus { opacity: 1; color: var(--navy-700); } /* Briefly highlight a provision when it is the link target */ .leg-item:target { background: #fff8e1; box-shadow: -.5rem 0 0 #fff8e1, .5rem 0 0 #fff8e1; border-radius: 2px; } .leg-section:target .leg-section__head { background: #fff8e1; } .leg-foot { max-width: var(--measure); margin-top: 2.5rem; } .leg-foot hr { border: none; border-top: 1px solid var(--gray-100); margin: 0 0 1rem; } /* Section navigator (left/right TOC) tuned for many short entries */ .leg-toc { font-family: var(--font-sans); font-size: var(--step--1); border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--gray-050); padding: .25rem .9rem .6rem; } .leg-toc__list { list-style: none; margin: .25rem 0 0; padding: 0; } .leg-toc__item { margin: 0; } .leg-toc__link { display: grid; grid-template-columns: 1.6rem 1fr; gap: .35rem; align-items: baseline; padding: .3rem 0; color: var(--link); text-decoration: none; line-height: 1.3; border-top: 1px solid var(--gray-100); } .leg-toc__item:first-child .leg-toc__link { border-top: none; } .leg-toc__link:hover { color: var(--link-hover); } .leg-toc__num { font-weight: 700; color: var(--red-600); font-variant-numeric: tabular-nums; } .leg-toc__text { color: var(--ink-soft); text-transform: lowercase; font-variant: small-caps; letter-spacing: .01em; } .leg-toc__link:hover .leg-toc__text { color: var(--navy-800); } @media (max-width: 60rem) { .leg-item { grid-template-columns: 1.9rem 1fr; } .leg-section__anchor { display: none; } } /* Print: drop chrome, render the legal text cleanly for Save-as-PDF */ @media print { .hero--legal, .leg-actions, .leg-toc, .toc--related, .doc-layout__aside, .callout--official, .leg-foot, .leg-item__anchor, .leg-section__anchor { display: none !important; } .doc-layout--with-toc { display: block !important; } .leg-titleblock { display: block; } .leg-doc, .leg-doc p, .leg-item__body { color: #000; } .leg-section__title, .leg-titleblock__title { color: #000; } .leg-section__num, .leg-titleblock__kicker, .leg-toc__num { color: #000; } .leg-section { page-break-inside: auto; } .leg-section__head { page-break-after: avoid; } .leg-notes { page-break-inside: avoid; } } /* ============================================================= Administrative Rules: versioned editions + level-N subsections UPDATE65. Verbatim rules body keeps the source's level-N indentation classes. ============================================================= */ /* Source indentation levels (carried verbatim from the rules body) */ .leg-doc--rules .level-2 { margin-left: 1.6rem; } .leg-doc--rules .level-3 { margin-left: 3.2rem; } .leg-doc--rules .level-4 { margin-left: 4.8rem; } .leg-doc--rules p { margin: .55rem 0; line-height: 1.65; } .leg-doc--rules .level-2, .leg-doc--rules .level-3, .leg-doc--rules .level-4 { line-height: 1.6; } /* Rule-number paragraphs (4.0, 4.7, 11.32 ...) get a little top room + anchor */ .leg-rule { margin-top: 1.1rem !important; scroll-margin-top: 1.5rem; position: relative; } .leg-rule__anchor { position: absolute; left: -1.15rem; top: .15rem; color: var(--gray-300); text-decoration: none; opacity: 0; transition: opacity .15s; font-family: var(--font-sans); } .leg-rule:hover > .leg-rule__anchor, .leg-rule__anchor:focus { opacity: 1; color: var(--navy-700); } .leg-rule:target { background: #fff8e1; box-shadow: -.5rem 0 0 #fff8e1, .5rem 0 0 #fff8e1; border-radius: 2px; } @media (max-width: 60rem) { .leg-rule__anchor { display: none; } } /* Edition / version header */ .leg-edition { border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--gray-050); padding: 1rem 1.25rem; margin: 0 0 1.5rem; } .leg-edition__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem 1.5rem; margin: 0; font-family: var(--font-sans); } .leg-edition__meta > div { margin: 0; } .leg-edition__meta dt { font-size: var(--step--2); text-transform: uppercase; letter-spacing: .08em; color: var(--gray-500); font-weight: 700; margin: 0; } .leg-edition__meta dd { margin: .1rem 0 0; color: var(--ink); font-size: var(--step--1); } .leg-edition__authority { grid-column: 1 / -1; } .leg-edition__authority dd { color: var(--ink-soft); } /* Editions archive disclosure */ .leg-editions { margin-top: 1rem; border-top: 1px solid var(--gray-100); padding-top: .75rem; } .leg-editions__summary { cursor: pointer; font-family: var(--font-sans); font-weight: 700; color: var(--navy-800); font-size: var(--step--1); list-style: none; } .leg-editions__summary::-webkit-details-marker { display: none; } .leg-editions__summary::after { content: " \25BE"; color: var(--gray-300); } .leg-editions[open] .leg-editions__summary::after { content: " \25B4"; } .leg-editions__list { list-style: none; margin: .75rem 0 0; padding: 0; } .leg-editions__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: .4rem 0; border-top: 1px solid var(--gray-100); font-family: var(--font-sans); font-size: var(--step--1); } .leg-editions__item:first-child { border-top: none; } .leg-editions__item.is-active { font-weight: 700; } .leg-editions__item a { color: var(--link); } .leg-editions__status { color: var(--gray-500); font-size: var(--step--2); } .leg-editions__here { color: var(--red-600); font-size: var(--step--2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .leg-editions__note { margin: .75rem 0 0; font-size: var(--step--2); color: var(--gray-500); font-style: italic; } /* Banners */ .leg-archive-banner, .leg-proposed-banner { border-radius: var(--radius); padding: .9rem 1.2rem; margin: 0 0 1.5rem; font-size: var(--step--1); line-height: 1.5; } .leg-archive-banner { background: #fef6e7; border: 1px solid #f0c651; color: #6b4e00; } .leg-archive-banner a { color: var(--navy-800); font-weight: 600; } .leg-proposed-banner { background: #eef4fb; border: 1px solid var(--navy-600); color: var(--navy-900); } .leg-proposed-banner a { color: var(--navy-800); font-weight: 600; } /* Print: drop edition chrome */ @media print { .leg-edition__meta { display: block; } .leg-editions, .leg-archive-banner, .leg-proposed-banner, .leg-rule__anchor { display: none !important; } .leg-doc--rules .level-2, .leg-doc--rules .level-3, .leg-doc--rules .level-4 { color: #000; } } /* ============================================================= Back-to-top button (UPDATE68). Appears after scrolling; site-wide. ============================================================= */ .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; width: 3rem; height: 3rem; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: var(--navy-800); color: #fff; cursor: pointer; box-shadow: 0 .25rem .75rem rgba(0,0,0,.25); opacity: 0; transform: translateY(.5rem); transition: opacity .2s ease, transform .2s ease, background-color .15s ease; font-family: var(--font-sans); } .back-to-top.is-visible { opacity: 1; transform: translateY(0); } .back-to-top:hover { background: var(--navy-900, #0b2356); } .back-to-top:focus-visible { outline: 3px solid var(--red-600); outline-offset: 2px; } .back-to-top__label { font-size: .55rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1; } .back-to-top svg { display: block; } @media (min-width: 48rem) { .back-to-top { right: 1.75rem; bottom: 1.75rem; } } @media print { .back-to-top { display: none !important; } } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .15s ease; transform: none; } .back-to-top.is-visible { transform: none; } } /* ============================================================= Bylaws: Article/Section structure (UPDATE69). Reuses the versioned-doc chrome. ============================================================= */ .leg-doc--bylaws p { margin: .55rem 0; line-height: 1.65; } .leg-doc--bylaws .level-2 { margin-left: 1.6rem; } /* Article heading (h2) - styled like the AR section head */ .leg-article__head { display: block; margin: 1.75rem 0 .75rem; padding-bottom: .35rem; border-bottom: 2px solid var(--navy-100, #d6e0f0); position: relative; } .leg-article__num { display: block; font-family: var(--font-sans); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--red-600); font-weight: 700; } .leg-article__title { display: block; font-family: var(--font-display, var(--font-serif)); font-size: var(--step-2); color: var(--navy-900, var(--navy-800)); line-height: 1.2; } .leg-article__head:first-child { margin-top: 0; } /* Section heading (h3) within an article */ .leg-byl-section { margin: 1.2rem 0 .4rem; font-family: var(--font-sans); font-size: var(--step-0); font-weight: 700; color: var(--navy-800); scroll-margin-top: 1.5rem; position: relative; } .leg-byl-section .leg-rule__anchor { left: -1.15rem; top: .1rem; } .leg-byl-section:target { background: #fff8e1; box-shadow: -.5rem 0 0 #fff8e1, .5rem 0 0 #fff8e1; border-radius: 2px; } /* TOC: nested article -> section list */ .leg-toc__sublist { list-style: none; margin: .25rem 0 .5rem; padding: 0 0 0 1.5rem; } .leg-toc__subitem { margin: .15rem 0; } .leg-toc__sublink { font-family: var(--font-sans); font-size: var(--step--2); color: var(--ink-soft, var(--gray-600)); text-decoration: none; line-height: 1.35; display: block; } .leg-toc__sublink:hover { color: var(--link); text-decoration: underline; } @media print { .leg-article__head { break-after: avoid; } .leg-byl-section { break-after: avoid; } } /* ---- Meetings index (landing) ---------------------------------------- */ .mtg-sec-h { font-size: var(--step-2); color: var(--navy-900); margin: 0 0 .4rem; } .mtg-sec-sub { color: var(--ink-soft); margin: 0 0 1.25rem; max-width: var(--measure); } /* Public notices signup section (anchored from "subscribe" links elsewhere) */ #public-notices, #public-notices-signup { scroll-margin-top: 1.5rem; } /* Collapsible accordion for the notices list and the sign-up form */ .pn-accordion { border: 1px solid var(--gray-100); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; margin: 0; } .pn-accordion > summary { cursor: pointer; padding: 1rem 1.2rem; color: var(--navy-900); list-style: none; position: relative; padding-right: 2.6rem; font-weight: 700; font-size: var(--step-0); } .pn-accordion > summary::-webkit-details-marker { display: none; } .pn-accordion > summary::after { content: "+"; position: absolute; right: 1.1rem; top: 1rem; font-weight: 400; font-size: 1.4rem; color: var(--navy-600); line-height: 1; } .pn-accordion[open] > summary::after { content: "\2212"; } .pn-accordion > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; } .pn-accordion__body { padding: 0 1.2rem 1.2rem; border-top: 1px solid var(--gray-100); } .pn-accordion__body > *:first-child { margin-top: 1rem; } .mtg-up { list-style: none; margin: 0 0 1.25rem; padding: 0; } .mtg-up__row { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--navy-100); } .mtg-up__date { font-weight: 700; color: var(--navy-900); min-width: 11rem; } .mtg-up__body { color: var(--ink-soft); } /* chips (type tags) */ .mtg-chip { display: inline-block; font-size: calc(var(--step--1)*.85); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .45rem; border-radius: 3px; background: var(--navy-100); color: var(--navy-800); vertical-align: middle; } .mtg-chip--full-commission { background: var(--navy-800); color: #fff; } .mtg-chip--executive-committee { background: var(--navy-600); color: #fff; } .mtg-chip--stakeholder-advisory { background: var(--red-600); color: #fff; } .mtg-chip--bylaws-rules { background: #4a5a70; color: #fff; } .mtg-chip--budget-finance { background: var(--ok); color: #fff; } .mtg-chip--other-committee { background: var(--gray-500); color: #fff; } /* controls row */ .mtg-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .mtg-filters { display: flex; flex-wrap: wrap; gap: .4rem; } .mtg-filter, .mtg-view { font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer; padding: .35rem .8rem; border: 1px solid var(--gray-300); background: var(--paper); color: var(--navy-800); border-radius: 999px; } .mtg-filter.is-active, .mtg-filter:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } .mtg-views { display: inline-flex; border: 1px solid var(--gray-300); border-radius: var(--radius); overflow: hidden; } .mtg-view { border: 0; border-radius: 0; padding: .4rem 1rem; } .mtg-view.is-active { background: var(--navy-800); color: #fff; } /* list view */ .mtg-year { font-size: var(--step-1); color: var(--navy-900); margin: 1.5rem 0 .5rem; padding-bottom: .3rem; border-bottom: 2px solid var(--red-600); } .mtg-year-rows { display: flex; flex-direction: column; } .mtg-row { display: grid; grid-template-columns: 11rem 1fr auto; gap: .5rem 1rem; align-items: center; padding: .7rem .5rem; border-bottom: 1px solid var(--navy-100); text-decoration: none; color: var(--navy-900); } .mtg-row:hover { background: var(--navy-050); } .mtg-row__date { font-weight: 600; color: var(--ink-soft); font-size: var(--step--1); } .mtg-row__main { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; } .mtg-row__title { font-weight: 600; } .mtg-row__tags { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; } .mtg-tag { font-size: calc(var(--step--1)*.82); color: var(--gray-500); border: 1px solid var(--gray-100); border-radius: 3px; padding: .05rem .4rem; white-space: nowrap; } .mtg-row.is-hidden, .mtg-year.is-hidden, .mtg-year-rows.is-hidden { display: none; } /* calendar view */ .mtg-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; } .mtg-cal__title { font-size: var(--step-1); font-weight: 700; color: var(--navy-900); margin: 0; } .mtg-cal__nav { display: flex; gap: .4rem; } .mtg-cal__nav button { font: inherit; cursor: pointer; border: 1px solid var(--gray-300); background: var(--paper); border-radius: var(--radius); padding: .3rem .7rem; font-weight: 700; color: var(--navy-800); } .mtg-cal__nav button:hover { background: var(--navy-050); } .mtg-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--gray-100); border: 1px solid var(--gray-100); border-radius: var(--radius); overflow: hidden; } .mtg-cal__dow { background: var(--navy-800); color: #fff; font-size: calc(var(--step--1)*.85); font-weight: 700; text-align: center; padding: .35rem 0; text-transform: uppercase; letter-spacing: .04em; } .mtg-cal__cell { background: var(--paper); min-height: 5.2rem; padding: .3rem; font-size: var(--step--1); } .mtg-cal__cell--empty { background: var(--gray-050); } .mtg-cal__daynum { color: var(--gray-500); font-weight: 600; font-size: calc(var(--step--1)*.9); } .mtg-cal__cell--today .mtg-cal__daynum { background: var(--red-600); color: #fff; border-radius: 50%; padding: 0 .35rem; } .mtg-cal__event { display: block; margin-top: .2rem; padding: .15rem .35rem; border-radius: 3px; color: #fff; font-weight: 600; text-decoration: none; line-height: 1.25; font-size: calc(var(--step--1)*.85); } .mtg-cal__event:hover { filter: brightness(1.1); } .mtg-cal__event.is-hidden { display: none; } @media (max-width: 46rem) { .mtg-row { grid-template-columns: 1fr; gap: .25rem; } .mtg-row__tags { justify-content: flex-start; } .mtg-up__date { min-width: 0; } .mtg-cal__cell { min-height: 3.5rem; } .mtg-cal__event { font-size: 0; padding: .25rem; } /* dots on small screens */ } /* ============================================================ History timeline (.tl) - rendered by timeline_html() Vertical timeline: navy spine, year markers, milestone cards color-coded by kind, state-cohort chips, leadership notes. Uses existing design tokens; no new colors introduced. ============================================================ */ .tl { position: relative; margin: 2rem 0 1rem; padding-left: 0; } .tl__row { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; padding-bottom: 2rem; } /* the spine */ .tl__row::before { content: ""; position: absolute; left: 5.5rem; top: .55rem; bottom: -.5rem; width: 2px; background: var(--navy-100); transform: translateX(-1px); } .tl__row:last-child::before { bottom: 50%; } /* year marker */ .tl__year { position: relative; text-align: right; padding-right: 1.1rem; } .tl__year span { font-family: var(--font-sans); font-weight: 800; font-size: var(--step-1); color: var(--navy-800); letter-spacing: -.01em; line-height: 1; } .tl__year::after { content: ""; position: absolute; right: -.62rem; top: .3rem; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--red-600); box-shadow: 0 0 0 4px var(--paper); z-index: 2; } .tl__body { padding-top: .1rem; display: flex; flex-direction: column; gap: .8rem; } /* milestone cards */ .tl__card { background: var(--paper); border: 1px solid var(--gray-100); border-left: 4px solid var(--navy-800); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow); } .tl__card--founding { border-left-color: var(--red-600); } .tl__card--legislation{ border-left-color: var(--navy-700); } .tl__card--operations { border-left-color: var(--navy-600); } .tl__card--leadership { border-left-color: var(--gray-300); } .tl__card--milestone { border-left-color: var(--red-700); } .tl__title { font-size: var(--step-1); margin: 0 0 .35rem; color: var(--navy-900); line-height: 1.2; } .tl__text { margin: 0; font-size: var(--step-0); line-height: 1.55; color: var(--gray-500); } .tl__more { margin: .55rem 0 0; } .tl__more a { font-size: var(--step--1); font-weight: 700; color: var(--navy-800); text-decoration: none; } .tl__more a:hover { text-decoration: underline; } /* state cohort */ .tl__states { background: var(--navy-050); border-radius: var(--radius); padding: .8rem 1rem; } .tl__states-head { margin: 0 0 .55rem; font-size: var(--step--1); font-weight: 700; color: var(--navy-900); text-transform: uppercase; letter-spacing: .04em; } .tl__count { float: right; font-weight: 800; color: var(--red-600); letter-spacing: 0; text-transform: none; } .tl__chips { display: flex; flex-wrap: wrap; gap: .4rem; } .tl__chip { display: inline-block; } .tl__chip a { display: inline-block; background: var(--paper); border: 1px solid var(--navy-100); color: var(--navy-800); font-size: var(--step--1); font-weight: 600; padding: .25rem .6rem; border-radius: 999px; text-decoration: none; line-height: 1.3; } .tl__chip a:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); } /* leadership */ .tl__lead { border-left: 3px solid var(--gray-100); padding: .15rem 0 .15rem .9rem; } .tl__lead-head { margin: 0 0 .3rem; font-size: var(--step--1); font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; } .tl__lead-list { margin: 0; padding-left: 1.1rem; } .tl__lead-list li { font-size: var(--step--1); color: var(--gray-500); line-height: 1.5; } /* entrance animation (respects reduced motion) */ @media (prefers-reduced-motion: no-preference) { .tl__row { opacity: 0; transform: translateY(12px); animation: tlIn .5s ease forwards; } .tl__row:nth-child(1){animation-delay:.02s}.tl__row:nth-child(2){animation-delay:.08s} .tl__row:nth-child(3){animation-delay:.14s}.tl__row:nth-child(4){animation-delay:.20s} .tl__row:nth-child(5){animation-delay:.26s}.tl__row:nth-child(6){animation-delay:.32s} .tl__row:nth-child(7){animation-delay:.38s}.tl__row:nth-child(8){animation-delay:.44s} .tl__row:nth-child(n+9){animation-delay:.50s} @keyframes tlIn { to { opacity: 1; transform: none; } } } @media (max-width: 640px) { .tl__row { grid-template-columns: 3.4rem 1fr; gap: .9rem; } .tl__row::before { left: 3.4rem; } .tl__year span { font-size: var(--step-0); } .tl__year::after { right: -.55rem; width: 11px; height: 11px; border-width: 2px; } .tl__count { float: none; display: block; margin-top: .2rem; } } /* enacted but not yet in force (conditional / delayed activation) */ .tl__states--pending { background: var(--gray-050); border: 1px dashed var(--gray-300); } .tl__count--pending { color: var(--gray-500); font-weight: 700; } .tl__chip--pending a { background: transparent; border-style: dashed; border-color: var(--gray-300); color: var(--gray-500); } .tl__chip--pending a:hover { background: var(--gray-500); color: #fff; border-color: var(--gray-500); } /* ---- Privilege to Practice page: hero photo + requirement cards ---- */ .hero__grid--ptp { align-items: center; } .hero__logo-card { background: #fff; border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); box-shadow: 0 10px 30px rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; } .hero__logo-card img { width: 100%; height: auto; } .hero__grid--solo { grid-template-columns: 1fr; } .hero__grid--solo .hero__lede, .hero__grid--solo .hero__clarifier { max-width: 60ch; } .hero__photo { margin: 0; } .hero__photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); } .hero__credit { margin-top: .4rem; font-size: 0.66rem; line-height: 1.35; letter-spacing: .01em; color: rgba(255,255,255,.45); } .hero__credit a { color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: 1px; } .hero__credit a:hover { color: rgba(255,255,255,.9); } @media (max-width: 52rem) { .hero__grid--ptp .hero__aside { order: 2; } } .section--requirements { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); } .requirements__title { margin-top: 0; } .requirements__intro { max-width: var(--measure); color: var(--ink-soft); margin-bottom: 1.5rem; } .req-cards { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .req-card { position: relative; background: var(--paper); border: 1px solid rgba(17,36,62,.08); border-top: 4px solid var(--navy-800); border-radius: var(--radius); padding: 1.4rem 1.5rem 1.2rem; box-shadow: var(--shadow); } .req-card__num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: .7rem; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #fff; background: var(--navy-800); border-radius: 50%; } .req-card__text { margin: 0 0 .8rem; color: var(--ink); line-height: 1.45; } .req-card__cite { font-size: var(--step--1); font-weight: 600; letter-spacing: .02em; text-decoration: none; color: var(--navy-700); } .req-card__cite::before { content: "\00A7\00A0"; } .req-card__cite:hover { color: var(--red-600); text-decoration: underline; } .requirements__law { max-width: var(--measure); color: var(--ink-soft); font-size: var(--step--1); margin: 0; } .requirements__then { max-width: var(--measure); margin: 0 0 1.25rem; padding-left: .9rem; border-left: 3px solid var(--navy-800); color: var(--ink); font-weight: 500; } /* ---- News article: prev/next navigation + nearby strip ---- */ .news-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem 1rem; align-items: center; max-width: var(--measure); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 2px solid var(--navy-100); } .news-nav__prev { text-align: left; } .news-nav__next { text-align: right; } .news-nav__all { text-align: center; white-space: nowrap; font-size: var(--step--1); font-weight: 600; } .news-nav__all a { color: var(--navy-700); } .news-nav__prev a, .news-nav__next a { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; padding: .75rem .9rem; border-radius: var(--radius); border: 1px solid var(--navy-100); background: var(--navy-050); transition: background var(--speed), border-color var(--speed); } .news-nav__prev a:hover, .news-nav__next a:hover { background: var(--navy-100); border-color: var(--navy-600); } .news-nav__dir { font-size: var(--step--1); font-weight: 700; color: var(--navy-700); text-transform: uppercase; letter-spacing: .05em; } .news-nav__title { font-size: var(--step--1); color: var(--ink); line-height: 1.3; font-weight: 600; } .news-nav__date { font-size: calc(var(--step--1) * .88); color: var(--gray-500); } /* Nearby articles strip */ .news-nearby { max-width: var(--measure); margin: 2rem auto 0; } .news-nearby__heading { font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-500); margin: 0 0 .75rem; } .news-nearby__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; } .news-nearby__item a { display: grid; grid-template-columns: 4rem 1fr; grid-template-rows: auto auto; column-gap: .75rem; align-items: center; padding: .55rem .75rem; border-radius: var(--radius); text-decoration: none; border: 1px solid var(--gray-100); transition: background var(--speed), border-color var(--speed); } .news-nearby__item a:hover { background: var(--navy-050); border-color: var(--navy-100); } .news-nearby__item img { grid-row: 1 / 3; width: 4rem; height: 2.75rem; object-fit: cover; border-radius: calc(var(--radius) - 1px); display: block; margin: 0; } .news-nearby__meta { font-size: calc(var(--step--1) * .85); color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; line-height: 1; align-self: end; } .news-nearby__title { font-size: var(--step--1); color: var(--navy-800); font-weight: 600; line-height: 1.3; align-self: start; } /* No thumbnail: span both columns */ .news-nearby__item a:not(:has(img)) { grid-template-columns: 1fr; } @media (max-width: 48rem) { .news-nav { grid-template-columns: 1fr 1fr; grid-template-areas: "prev next" "all all"; } .news-nav__prev { grid-area: prev; } .news-nav__next { grid-area: next; } .news-nav__all { grid-area: all; padding-top: .5rem; } } /* ---- News article: share buttons ---- */ .news-share { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; max-width: var(--measure); margin: 2rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--gray-100); } .news-share__label { font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-500); margin-right: .25rem; } .news-share__btn { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem .4rem .7rem; border-radius: 999px; font-size: var(--step--1); font-weight: 600; text-decoration: none; color: #fff; transition: opacity var(--speed), transform var(--speed); line-height: 1; } .news-share__btn:hover { opacity: .88; transform: translateY(-1px); color: #fff; } .news-share__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .news-share__btn svg { width: 1em; height: 1em; fill: #fff; flex-shrink: 0; } .news-share__btn--facebook { background: #1877F2; } .news-share__btn--linkedin { background: #0A66C2; } .news-share__btn--x { background: #000; } @media (prefers-color-scheme: dark) { .news-share__btn--x { background: #111; border: 1px solid #333; } } /* Certificate button in PTP results bar */ .ptp__cert-btn { cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; } .ptp__cert-btn::before { content: "\1F4DC"; } .ptp__cert-btn:disabled { opacity: .6; cursor: wait; } /* ========================================================================= HOMEPAGE POLISH PROPOSAL (design/homepage-polish branch) Self-contained, additive layer. Restrained, government-appropriate refinement of the existing system: section kickers, a more present hero data card, clearer "destination" affordance on cards, and gold carried below the fold. Remove this block to revert. ========================================================================= */ /* --- Section kicker: small editorial label above major headings. Adds scannable structure (like a federal report) and breaks the rhythm of stacked white sections. Gold rule on white, navy on tint. --- */ .kicker { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-sans); font-size: calc(var(--step--1) * .92); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-700); margin: 0 0 .55rem; } .kicker::before { content: ""; width: 1.6rem; height: 3px; border-radius: 2px; background: var(--gold, #f0c651); } .section--tint .kicker { color: var(--navy-800); } .section--navy .kicker { color: #f0c651; } .section--navy .kicker::before { background: rgba(240,198,81,.5); } /* tighten the heading that follows a kicker so they read as one unit */ .kicker + h2 { margin-top: 0; } /* --- Hero data card: give "The Compact at a Glance" real presence. Currently a near-invisible 6%-white ghost panel on navy. --- */ .hero__card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.20); border-top: 3px solid var(--gold, #f0c651); box-shadow: 0 10px 30px rgba(0,0,0,.22); } .hero__card-title { color: #cfe1f2; } /* faint hairlines between the four stats so the grid reads as a data table */ .hero__card .stat { padding-bottom: .15rem; } .hero__card .stat__num { letter-spacing: -.01em; } /* --- Cards as destinations: a chevron that advances on hover. Applies to the get-started / commission "tracks" and document "tasks". --- */ .tracks .track { position: relative; } .tracks .track > h3 { padding-right: 1.5rem; } .tracks .track > h3::after { content: "\2192"; /* → */ position: absolute; right: 0; color: var(--red-600); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s ease; } .tracks .track:hover > h3::after, .tracks .track:focus-visible > h3::after { opacity: 1; transform: translateX(0); } .tracks .track:focus-visible { outline: 3px solid var(--gold, #f0c651); outline-offset: 2px; } /* Document "tasks" chips: warm the hover and nudge the marker. */ .task { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .task:hover { border-color: var(--navy-700); box-shadow: var(--shadow); transform: translateY(-2px); } .task__icon { transition: transform .2s ease; } .task:hover .task__icon { transform: translateX(2px); } /* --- A touch more vertical breathing room between major sections, and a hairline gold divider where a tinted section meets white. --- */ .section--tint { border-block: 1px solid rgba(240,198,81,.35); } /* ------------------------------------------------------------------------- HEADER + FOOTER REFINEMENT Carry the brand gold across the page chrome so the header and footer feel part of the same system as the body. The page is "bookended" in gold: a hairline under the nav, a top rule on the footer. ------------------------------------------------------------------------- */ /* Masthead seal: subtle ring so it reads as an emblem, not a floating PNG. */ .masthead__seal { border-radius: 50%; box-shadow: 0 0 0 1px rgba(26,68,128,.12), 0 1px 3px rgba(17,36,62,.18); } /* --- Footer --- */ .footer { border-top: 3px solid var(--gold, #f0c651); background: linear-gradient(180deg, #11243e 0%, #0e1f37 100%); } /* Column headings: gold underline marker, like a directory index. */ .footer__cols h2 { position: relative; padding-bottom: .55rem; margin-bottom: .9rem; letter-spacing: .01em; } .footer__cols h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1.75rem; height: 3px; border-radius: 2px; background: var(--gold, #f0c651); } /* Link lists: tidy hover with a gold underline accent. */ .footer__cols li a { text-decoration: none; transition: color .15s ease; } .footer__cols li a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold, #f0c651); text-underline-offset: 3px; } /* Contact block: phone + email read as links; gold on hover. */ .footer__contact a { color: #cfd8e3; text-underline-offset: 2px; } .footer__contact a:hover { color: #f0c651; } /* Utility row: gentle separation and gold hover. */ .footer__utility { padding-top: .25rem; } .footer__utility a:hover { color: #f0c651; } /* Bottom bar: a hair more presence. */ .footer__bar { color: #aebfd2; } .footer__bar a:hover { color: #f0c651; } /* ------------------------------------------------------------------------- INTERIOR CONTENT PAGE POLISH Carries the homepage language (kickers, gold accents, cards-as-objects) to interior pages that use the doc-layout / requirement-card patterns. Applies wherever these components appear, so the polish is consistent across content pages rather than one-off. ------------------------------------------------------------------------- */ /* Section kicker sitting above an in-template section title. */ .kicker + .requirements__title { margin-top: 0; } /* Requirement cards: lift on hover and a gold ring on the step badge, so the numbered steps read as objects (echoing the homepage stat card + tracks). */ .req-card { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1); } .req-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .req-card__num { box-shadow: 0 0 0 3px rgba(240,198,81,.35); } /* Content headings get the same short gold underline marker as the footer directory headings, tying the editorial system together. Opt-in via .doc-content so it reaches informational pages but never the verbatim legal / position-paper / administrative-rule documents. */ .doc-content .prose > h2 { position: relative; padding-bottom: .4rem; } .doc-content .prose > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2rem; height: 3px; border-radius: 2px; background: var(--gold, #f0c651); } /* Related-pages sidebar: a gold tick on the heading to match. */ .toc--related .toc__title--static { position: relative; padding-left: .85rem; } .toc--related .toc__title--static::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 1.1em; border-radius: 2px; background: var(--gold, #f0c651); } /* Section landing-page group headings ("Organization", "Law & Governing Documents", ...): a gold leading segment over the divider so the group rule echoes the kicker / footer-heading gold motif. */ .section__group { position: relative; } .section__group::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 2.5rem; height: 2px; background: var(--gold, #f0c651); } /* Per-state status pages: same short gold underline marker on section headings (informational pages, never verbatim). */ .state-block > h2 { position: relative; padding-bottom: .4rem; } .state-block > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2rem; height: 3px; border-radius: 2px; background: var(--gold, #f0c651); } /* Intro prose that sits directly inside a full-width section wrap (e.g. the participating-states intro, homepage section intros) was centered via the global `.prose { margin-inline:auto }`, so it floated in the middle while the headings, legends, maps, and card grids in the same section were left-aligned. Anchor that prose to the left edge (keeping the 42rem reading width) so body copy lines up with everything else. Does not affect doc-layout article pages, where .prose is nested in .doc-layout__main rather than a direct wrap child. */ .section > .wrap > .prose, .section > .wrap > p.prose { margin-inline-start: 0; } /* News article footer "More news" label: promote the existing gray uppercase label to a gold-dash kicker so it matches the kicker system. */ .news-nearby__heading { display: inline-flex; align-items: center; gap: .55rem; color: var(--navy-700); } .news-nearby__heading::before { content: ""; width: 1.6rem; height: 3px; border-radius: 2px; background: var(--gold, #f0c651); } /* ============================================================================ News article (press release) pages ---------------------------------------------------------------------------- The article body used to sit as a direct `.section > .wrap > .prose` child, which the left-anchoring rule above catches, so the copy hugged the left edge while the centered lead image and footer link sat in the middle. The body now lives inside `.news-article`, one centered reading column of about 70 characters that the lead image, body, share row, and footer link share. Imported press-release bodies carry inline styles (a centered PDF button, a right-floated 220px portrait figure, an "About" boilerplate at 0.85em, and a centered "###" end marker). The rules below normalize those without touching the content; `!important` is used only where an inline style must be overridden on small screens. */ .news-article { --measure-news: 46rem; max-width: var(--measure-news); margin-inline: auto; } /* Header band */ .hero--news .news-article__header { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(1.75rem, 1.2rem + 2.2vw, 3rem); } .hero--news .news-article__kicker { color: var(--gold, #f0c651); margin-bottom: .8rem; } .hero--news .news-article__kicker::before { background: rgba(240,198,81,.55); } .hero--news .news-article__title { max-width: 24ch; margin-bottom: .9rem; } .news-article__meta { margin: 0; font-size: var(--step--1); font-weight: 600; color: #cfe1f2; text-transform: uppercase; letter-spacing: .08em; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .news-article__meta-sep { width: .3rem; height: .3rem; border-radius: 50%; background: rgba(207,225,242,.6); } .news-article__dek { font-family: var(--font-serif); font-weight: 400; font-size: var(--step-1); line-height: 1.45; color: #dce6f1; max-width: 40rem; margin: 1.15rem 0 0; } /* Lead image shares the article column */ .news-article .news-lead { max-width: none; margin: 0 0 2.25rem; } .news-article .news-lead figcaption { max-width: 36rem; margin-inline: auto; font-style: normal; line-height: 1.4; } /* Body copy: slightly larger, looser reading rhythm */ .news-article__body { font-size: 1.0625rem; line-height: 1.7; color: var(--ink); } .news-article__body > * + * { margin-top: 1.2rem; } .news-article__body::after { content: ""; display: block; clear: both; } .news-article__body h2, .news-article__body h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.01em; color: var(--navy-800); line-height: 1.2; margin-top: 2.4rem; } .news-article__body h2 { font-size: var(--step-2); } .news-article__body h3 { font-size: calc(var(--step-2) * .92); } .news-article__body h2 strong, .news-article__body h3 strong { font-weight: inherit; } .news-article__body h2 + p, .news-article__body h3 + p { margin-top: .7rem; } .news-article__body a:not([style]) { text-decoration-thickness: 1px; } /* Download-PDF call to action (inline-styled link in imported bodies). The paragraph keeps its inline centering so the button sits under the centered lead image; only the spacing is normalized. */ .news-article__body p:has(> a[style*="background-color"]) { margin: 0 0 1.75rem !important; } .news-article__body a[style*="background-color"] { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.3rem .7rem 1.1rem; margin: 0; font-size: var(--step--1); letter-spacing: .01em; box-shadow: 0 1px 2px rgba(17,36,62,.18); } .news-article__body a[style*="background-color"]::before { content: ""; width: 1.15em; height: 1.15em; flex: none; background: #fff; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .news-article__body a[style*="background-color"]:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 3px; } /* Floated portrait figure (inline: float:right; max-width:220px) */ .news-article__body figure[style*="float"] { width: min(220px, 40%); margin-top: .35rem; } .news-article__body figure[style*="float"] img { margin: 0; border-radius: var(--radius); box-shadow: 0 1px 3px rgba(17,36,62,.14); border: 1px solid var(--navy-100); } .news-article__body figure figcaption { font-style: normal; color: var(--gray-500); line-height: 1.35; margin-top: .55rem; } /* Headings should not tuck under a still-open float */ .news-article__body h2, .news-article__body h3 { clear: left; } /* "###" end-of-release marker: a plain centered paragraph with no children */ .news-article__body > p[style*="center"]:not(:has(*)) { clear: both; margin-top: 2.5rem; color: var(--gray-300); font-size: var(--step--1); letter-spacing: .5em; text-indent: .5em; } /* "About" boilerplate paragraphs (inline font-size:0.85em): secondary, muted, with a rule above the first one */ .news-article__body > p[style*="0.85em"] { color: var(--ink-soft); line-height: 1.55; clear: both; } .news-article__body > p:not([style*="0.85em"]) + p[style*="0.85em"] { border-top: 1px solid var(--gray-100); padding-top: 1.5rem; margin-top: 1.5rem; } .news-article__body > p[style*="0.85em"] > strong:first-child { display: block; margin-bottom: .3rem; font-family: var(--font-sans); font-size: .95em; font-weight: 700; color: var(--navy-800); text-transform: uppercase; letter-spacing: .06em; } .news-article__body > p[style*="0.85em"] > strong:first-child + br { display: none; } /* Footer pieces line up with the column */ .news-article .news-foot { max-width: none; margin: 2.5rem 0 0; } .news-article .news-share { margin-top: 1.5rem; } @media (max-width: 40rem) { .news-article__body figure[style*="float"] { float: none !important; width: min(220px, 100%); margin: .5rem auto 1.5rem !important; } .news-article__body { font-size: var(--step-0); } .news-article__body a[style*="background-color"] { width: 100%; justify-content: center; } .hero--news .news-article__title { max-width: none; } } /* External-link marker (standards review, Sept 2026). Content links that leave emscompact.gov get a small arrow so non-government destinations are labeled (Trust criterion). The @supports block adds screen-reader alt text where the content alt syntax is available. */ .prose a[href^="http"]:not([href*="emscompact.gov"])::after { content: " \2197"; font-size: .78em; vertical-align: .12em; opacity: .75; } @supports (content: "x" / "y") { .prose a[href^="http"]:not([href*="emscompact.gov"])::after { content: " \2197" / " (external link)"; } } /* Spanish pilot (Sept 2026): language toggle bar + draft-translation banner */ .lang-bar { background: var(--tint); border-bottom: 1px solid rgba(0,0,0,.06); font-size: .9rem; } .lang-bar .wrap { padding-block: .45rem; } .lang-bar a { font-weight: 600; text-decoration: none; } .lang-bar a:hover, .lang-bar a:focus-visible { text-decoration: underline; }