` with `a` and `strong` * children. Every redesigned subpage applies the same typography + * link styling. Previously each per-page SCSS file (resources, * certification-training, community) carried its own copy of these * rules scoped by `page-id-N`, producing 28 lines of byte-identical * CSS per page × N pages. * * Canonicalize to one rule scoped to `body.dmec-redesign-active`. The * specificity is (0,0,2,1) which is BELOW the existing per-page * (0,0,3,1) rules; that's intentional during the migration so the * per-page files can be stripped one-by-one without flipping behavior * mid-roll-out. Once the per-page duplicates are removed, this rule * becomes the single source of truth. * * Figma: see Breadcrumbs spec on the page-tracker wiki for the * canonical Body 16/1.24 PT Sans treatment. * ================================================================= */ body.dmec-redesign-active #breadcrumbs, body.dmec-redesign-active #breadcrumbs a, body.dmec-redesign-active #breadcrumbs strong { font-family: var(--dmec-font-family-body) !important; font-size: 16px !important; line-height: 1.24 !important; } body.dmec-redesign-active #breadcrumbs { margin: 0; color: var(--dmec-neutral-warm-900); } body.dmec-redesign-active #breadcrumbs a { color: var(--dmec-primary-600) !important; text-decoration: none; transition: color 160ms ease; /* The foundation `a { font-weight: inherit }` rule would pull from the parent which has no explicit weight (browser default 400). Breadcrumbs are PT Sans Bold per Figma — declare explicitly so the (1,1,2) ID-bearing specificity here beats the foundation rule at (0,1,2). */ font-weight: 700; } body.dmec-redesign-active #breadcrumbs a:hover { /* BugZap #14: hover must match the canonical link-hover state (Primary/900), not the legacy magenta. */ color: var(--dmec-color-link-hover) !important; text-decoration: underline; /* Hold the bold weight on hover — the foundation BugZap-76 hover rule `a:hover { font-weight: inherit }` at (0,3,1) would otherwise pull from the parent at 400, shifting breadcrumb links from bold to normal on hover. Specificity here: (1,2,2) — beats the foundation rule. */ font-weight: 700; } body.dmec-redesign-active #breadcrumbs a:focus-visible { outline: 4px solid var(--dmec-focus-ring); outline-offset: 2px; border-radius: 2px; } body.dmec-redesign-active #breadcrumbs strong { font-weight: 700; color: var(--dmec-neutral-warm-900); } /* ================================================================= * Component: Breadcrumb + Share row (single-line treatment) * * Article pages (resources/work-magazine/* etc.) ship from Elementor as * two SIBLING full-bleed rows directly under the page-header band: * * .elementor-element-11033d61 breadcrumb row (h ≈ 38) * .elementor-element-60e48599 share-buttons row (h ≈ 64) * * Stacked vertically by default — breadcrumb on its own line, share * buttons on the next line. Per Figma the canonical treatment is a * SINGLE row with breadcrumbs left-aligned + share buttons right- * aligned, both vertically centered, 120 px L/R gutters, sitting 60 px * below the magenta hero pill. * * Implementation strategy (CSS-only — no DOM restructure): * 1. Stretch the breadcrumb row's inner to 64 px (matches share row * height) and `align-items: center` so the breadcrumb anchors to * vertical mid. * 2. Pull the share row UP by -64 px via `margin-top` so it overlaps * the breadcrumb row's vertical span. Subsequent siblings shift * up by 38 px (= old breadcrumb-row height that's now absorbed), * which is desired — visual gap to the next content block stays * consistent because the breadcrumb-row height is now donated to * the merged row. * 3. Justify the share row's inner to flex-end so icons sit right. * 4. Use the same 1200 px max-width centered layout as the rest of * the page content (= 120 px gutters at Figma's 1440 px frame). * 5. 60 px gap above by raising the breadcrumb row's margin-top from * its current 0 to 40 (current pill→bcRow gap is 20 px; +40 → 60). * 6. Share-button border narrowing handled in `_social-button.scss` * (already 1 px solid Neutral/warm/300). The "perceived 2 px" in * Matt's screenshot was the visual sum of two adjacent borders * across the inter-icon gap; merging icon borders via the same * `-1 px margin-left` trick used for `.share-button-container` * collapses adjacent borders to a single hairline. * ================================================================= */ /* (1)+(2)+(4)+(5) — row-level layout fix */ body.dmec-redesign-active .elementor-element.elementor-element-11033d61 { margin-block-start: 40px; /* (5) → +40 = 60 px from pill */ min-height: 64px; /* (1) → match share row */ } body.dmec-redesign-active .elementor-element.elementor-element-60e48599 { margin-block-start: -64px; /* (2) → overlap breadcrumb row */ position: relative; z-index: 2; pointer-events: none; /* let breadcrumb beneath stay clickable */ } /* Re-enable pointer events on the share buttons themselves (the row * itself is pass-through so the breadcrumb anchors below remain * clickable in their visual half of the row). */ body.dmec-redesign-active .elementor-element.elementor-element-60e48599 .elementor-widget-share-buttons { pointer-events: auto; } /* (1)+(3)+(4) — inner alignment + gutters */ body.dmec-redesign-active .elementor-element.elementor-element-11033d61 > .e-con-inner, body.dmec-redesign-active .elementor-element.elementor-element-60e48599 > .e-con-inner { align-items: center; min-height: 64px; max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; } /* (3) — anchor share buttons to the right. * * Elementor sets `--flex-direction: row-reverse` on this row's e-con-inner * (configured in the page's Elementor data). With `flex-direction: * row-reverse`, the "end" of the main axis is the LEFT — so a naive * `justify-content: flex-end` ends up at the left. Force `flex-direction: * row` to get a normal axis, then flex-end aligns the share widget to * the right. */ body.dmec-redesign-active .elementor-element.elementor-element-60e48599 > .e-con-inner { flex-direction: row; justify-content: flex-end; } /* (6) — strip the grid-item's redundant 1-px border. * * Elementor renders each share button inside a `.elementor-grid-item` * box which itself ships a `1px solid #c7c7c7` border (in addition to * the button's own `1px solid Neutral/warm/300` border from * `_social-button.scss`). Two stacked 1-px borders read visually as * 2 px of gray — the "double border" Matt observed. * * Zero out the grid-item border so only the button's canonical 1-px * border renders. Then collapse adjacent button borders so the * inter-icon dividing line is also a single 1-px hairline (same * negative-margin trick `.share-button-container` uses for the * Calendar of Events share row). */ body.dmec-redesign-active .elementor-widget-share-buttons .elementor-grid-item { border: 0 !important; } body.dmec-redesign-active .elementor-widget-share-buttons .elementor-grid-item + .elementor-grid-item { margin-left: -1px !important; } /* ================================================================= * Generic inner-page breadcrumb + share treatment * * The rules above target article-page-specific Elementor data-ids. * Many other inner pages (Membership children, Certification, etc.) * use the same pattern via semantic classes `.breadcrumb-container` * and `.share-button-container`. These rules provide the canonical * 1200 px max-width centered layout, single-row collapse, and * vertical centering for ANY page carrying those classes. * * The element-specific rules above still win on article pages thanks * to their higher specificity (element-ID selector), so there is no * conflict. * ================================================================= */ /* --- Breadcrumb row: 1200 px centered, consistent height ---------- */ body.dmec-redesign-active .breadcrumb-container { margin-block-start: 40px; min-height: 40px; } /* Specificity must beat `body.dmec-redesign-active .e-con.e-con-boxed > .e-con-inner` (0,3,1) which also sets max-width. Chaining `.e-con-boxed` gives us (0,3,1) and we win by source order (this file loads after the base rule). */ body.dmec-redesign-active .breadcrumb-container.e-con-boxed > .e-con-inner { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 40px; max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; } /* Figma breadcrumbs/section (817:21138): the merged row hugs its content — social buttons are 46px (12px padding + 20px icon + 1px borders), breadcrumbs 28px, both center-aligned, row top 104px below the band. 48px keeps the text within ±1px of the comp; the old 60-64px min-heights were adding ~15px of phantom air that read as the breadcrumbs sitting too low (round-2 QA). */ body.dmec-redesign-active .breadcrumb-container:has(+ .share-button-container) { min-height: 48px; } body.dmec-redesign-active .breadcrumb-container.e-con-boxed:has(+ .share-button-container) > .e-con-inner { min-height: 48px; } /* --- Breadcrumb-row child fixes ---------------------------------- */ /* Some pages (e.g. page-20946 AbsenceExemplar) nest a spacer widget and the breadcrumb widget inside the same `.breadcrumb-container`. The spacer gets `flex: 0 0 auto` at 1200 px from Elementor, stealing the full row and leaving the breadcrumb at 0 px (text renders vertically). Hide the spacer — it's decorative — and let the breadcrumb fill the row. */ body.dmec-redesign-active .breadcrumb-container .elementor-widget-spacer { display: none; } body.dmec-redesign-active .breadcrumb-container .elementor-widget-breadcrumbs { flex: 1 1 100%; width: 100%; min-width: 0; } /* Normal landing-page handoff: breadcrumb row to first content section. */ body.dmec-redesign-active .breadcrumb-container + .e-con:not(.share-button-container) { --padding-top: 32px; padding-top: 32px; } /* Merged-row handoff: when a share row follows the breadcrumb (single merged row), the content sits TWO siblings after the breadcrumb- container, so the rule above (which targets the breadcrumb's immediate sibling — here the share row) misses it. Give the content after the share row the same 32px breadcrumb→content gap. BugZap #67/#68. */ body.dmec-redesign-active .breadcrumb-container + .share-button-container + .e-con { --padding-top: 32px; padding-top: 32px; } /* --- Share-button row: pull up into breadcrumb row, right-align -- */ body.dmec-redesign-active .share-button-container { margin-block-start: -48px; position: relative; z-index: 2; pointer-events: none; } body.dmec-redesign-active .share-button-container.e-con-boxed > .e-con-inner { align-items: center; min-height: 48px; max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; flex-direction: row; justify-content: flex-end; } body.dmec-redesign-active .share-button-container .elementor-widget-shortcode, body.dmec-redesign-active .share-button-container .elementor-widget-share-buttons { pointer-events: auto; } /* ================================================================= * Component: Section intro H2 (canonical) * * The "Read the latest news…", "Explore by topic", "Find what fits" * style H2 lead-ins on subpages all ship from the same Elementor * heading widget template — Elementor data-id `f217016` — and are * meant to render with the canonical Headline 02 token (PT Sans Bold * 32, Primary/700). * * Each per-page file (resources, certification-training, community) * carried its own copy of this rule scoped by `page-id-N` even though * the rule body was byte-identical. Move it here so the data-id alone * is the discriminator — Elementor data-ids are unique to the * template instance and appear with the same value on every host page * that uses this template, so the page-id constraint was redundant. * ================================================================= */ /* SCSS optimization pass 1: class-only selectors. The class is stamped template-wide wherever element id `f217016` appears (TEMPLATE_CLASS_STAMPS), so clones inherit it. */ /* --- Section spacing ------------------------------------------------ */ body.dmec-redesign-active .page-section__h2-intro { padding: 40px 0; } /* Elementor injects varying inline padding on the inner container (pb 40–60 px depending on the page instance). Zero it out so only the section's 40 px padding applies. Gap between children pinned to Figma's 16 px (title → text gap per comment #364). */ body.dmec-redesign-active .page-section__h2-intro > .e-con-inner { padding: 0; gap: 16px; } /* --- Heading typography --------------------------------------------- */ body.dmec-redesign-active.dmec-redesign-active .page-section__h2-intro.page-section__h2-intro .elementor-heading-title { font-family: var(--dmec-font-family-body); font-size: var(--dmec-h02-size); line-height: var(--dmec-h02-lh); font-weight: 700; color: var(--dmec-color-heading); /* BugZap #30: this title style is ALL CAPS everywhere. */ text-transform: uppercase; } /* --- Body text — non-clickable text must be Neutral, not blue ------- */ body.dmec-redesign-active.dmec-redesign-active .page-section__h2-intro.page-section__h2-intro .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__h2-intro.page-section__h2-intro .elementor-widget-text-editor p { color: var(--dmec-color-text); } /* ================================================================= * Component: Subpage 3-card grid (canonical) * * The card grid ("explore by topic" etc.) used on /resources/, * /certification-and-training/, /community/, About DMEC, State * Policy, DMECommunities, and any page cloned from the same * template. * * SCSS optimization pass 1: selectors are CLASS-ONLY. The * `page-section__subpage-grid` class is stamped by the CLI migrate * command — explicitly per page (COMPONENT_CLASS_STAMPS) and * template-wide wherever element id `300e26d` appears * (TEMPLATE_CLASS_STAMPS) — so cloned pages inherit the styling with * no [data-id] coupling. Run `wp dmec migrate-canonical` before * shipping a build of this file. * * Card spec: Figma card/basic (174:5975) — 24px top/side padding, * 40px bottom, Headline 04 title in Primary/700, 32px/12% shadow. * Hover: Figma navy inversion (Primary/900 bg, white text). * * Shell/body/hover background rules are double-chained — Elementor * stores a stale #F0F0F0 per-element background on several pages' * cards at (0,4,0), which beat the single-chain rules (seen on * /about-dmec/ during the Figma re-verify). * ================================================================= */ /* --- Section spacing ------------------------------------------------ */ body.dmec-redesign-active .page-section__subpage-grid { margin-top: 40px; margin-bottom: 0; } /* --- Grid layout --------------------------------------------------- Two host structures exist in content: A) boxed section: the stamped element wraps an .e-con-inner and cards are the inner's children B) flat e-grid (e-con-full): the stamped element IS the grid and cards are its direct children (State Policy 8def9f4, DMECommunities/Partnership 478ec9e3) The stamp must sit on the element whose CHILDREN are the cards — never on an outer wrapper (stamping 12e145e flattened the real grid inside it; regression caught on /dmec-state-policy/). */ body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner, body.dmec-redesign-active .page-section__subpage-grid.e-con-full { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 40px; max-width: 1200px; padding-inline: 0; } /* Card shell — vertical flex column, square corners, shadow. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con { display: flex; flex-direction: column; min-width: 0; background: var(--dmec-white); border-radius: 0; /* position + overflow isolate each card's stretched-link overlay so hover zones never bleed across the grid (formerly a page-id-15890 rule — generic benefit). */ position: relative; overflow: hidden; /* Zero out Elementor's default container padding so card images go full-bleed edge-to-edge (BugZap #139). The text area (.subpage-grid-card-bottom) carries its own 24/24/40 padding. */ padding: 0; /* Figma card/basic default shadow: 32px blur at 12%. */ box-shadow: 0 0 32px 0 rgba(18, 44, 86, 0.12); transition: background-color 200ms ease, box-shadow 200ms ease; } /* Card body container. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom { display: flex; flex: 1 1 auto; flex-direction: column; gap: 16px; /* Figma card/basic (174:5975): 24px top/sides, 40px bottom. */ padding: 24px 24px 40px; background: var(--dmec-white); transition: background-color 200ms ease; } /* Card title — Figma card/basic: Headline 04 (20px) in Primary/700. Confirmed with Matt 2026-06-10 (full card spec, including the 700 title over the 600 link token). */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom h4, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom h4 a { margin: 0; font-family: var(--dmec-font-family-body); font-size: var(--dmec-h04-size); font-weight: 700; line-height: var(--dmec-h04-lh); color: var(--dmec-primary-700); text-decoration: none; text-wrap: pretty; } /* Card body copy — Body text/medium/regular (16px Neutral/warm/800). */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom .elementor-widget-text-editor p { margin: 0; font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--dmec-neutral-warm-800); } /* "More" link area — pinned to bottom, underlined navy with a CSS pseudo-arrow. */ body.dmec-redesign-active .page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child { display: inline-flex; align-items: center; gap: 0; margin-top: auto; } body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child h6 a { margin: 0; font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 700; line-height: 1.24; color: var(--dmec-color-link); text-decoration: underline; text-underline-offset: 0.15em; } body.dmec-redesign-active .page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child h6 a::after { content: " →"; } body.dmec-redesign-active .page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child .elementor-icon { display: none; } /* Card hover / focus — Figma navy colour inversion. Uses :has(:focus-visible) instead of :focus-within so the inversion fires only on keyboard navigation, NOT mouse clicks (BugZap #140). */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con:hover, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con:hover, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible), body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) { background: var(--dmec-primary-900, #17386f); box-shadow: 0 8px 24px 0 rgba(18, 44, 86, 0.32); } body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom { background: var(--dmec-primary-900, #17386f); } /* Title → white + underline on hover. */ /* Round-4 #131-family: underline only the anchor — decorating the H4 too paints a second line on hover. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom h4, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom h4, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom h4, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom h4 { color: #ffffff; text-decoration: none; } body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom h4 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom h4 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom h4 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom h4 a { color: #ffffff; text-decoration: underline; text-underline-offset: 0.15em; } /* Body text → near-white on hover. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom .elementor-widget-text-editor p, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom .elementor-widget-text-editor p, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom .elementor-widget-text-editor p, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom .elementor-widget-text-editor p { color: var(--dmec-neutral-warm-100, #fbf7f5); } /* "More" link → white on hover. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom > .e-con:last-child h6 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom > .e-con:last-child h6 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom > .e-con:last-child h6 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom > .e-con:last-child h6 a { color: #ffffff; } /* Card image (when host page includes one) — full-bleed 16:9 block. */ body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image, body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image .elementor-widget-container, body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image a { display: block; } body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image a:hover, body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image a:focus { color: inherit; text-decoration: none; } body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } /* --- Responsive: 2-col at tablet, 1-col at mobile ----------------- */ @media (max-width: 1100px) { body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner, body.dmec-redesign-active .page-section__subpage-grid.e-con-full { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1101px) { /* About DMEC: a lone 4th card centers under the row of three. */ body.dmec-redesign-active.page-id-107 .page-section__subpage-grid > .e-con-inner > .e-con:last-child:nth-child(3n+1) { grid-column: 2; } } @media (max-width: 767px) { body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner, body.dmec-redesign-active .page-section__subpage-grid.e-con-full { grid-template-columns: 1fr; } } /* ================================================================= * Component: Hero Banner — bare-pill variant (canonical) * * The transparent hero container that sits above the navy page-header * band, overlapping it with a negative top margin. Contains a magenta * Tertiary/700 pill with the page H1. * * Used on Resources, Community, and Membership. Cert & Training uses * the `page-header__*` class variant instead (stamped via CLI * migrate). * * Target class: `.page-section__hero-banner`, stamped onto the hero * section container (Elementor data-id `9b0e196`) by the CLI migrate * command's `run_hero_classes_fix()` step. * * Design tokens used: * --dmec-tertiary-700 pill background * --dmec-white H1 text color * --dmec-font-family-display H1 font (page override to body OK) * ================================================================= */ /* --- Container reset ---------------------------------------------- */ body.dmec-redesign-active .page-section__hero-banner { position: relative; overflow: visible; min-height: 0; padding: 0; background: transparent; } body.dmec-redesign-active .page-section__hero-banner::before { display: none; } /* Hide responsive-visibility wrappers that Elementor ships */ body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-desktop, body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-tablet { display: none; } /* --- Inner container (negative-margin overlap) -------------------- */ body.dmec-redesign-active .page-section__hero-banner > .e-con { position: relative; z-index: 1; width: 100%; max-width: 100%; margin: -80px 0 0; background: transparent; border-radius: 0; padding: 0; box-shadow: none; } /* --- Magenta pill ------------------------------------------------- */ body.dmec-redesign-active .page-section__hero-banner .page-section__hero-pill { width: min(500px, 100% - 48px); min-height: 88px; margin-inline: auto; background: var(--dmec-tertiary-700); border-radius: 3px; } /* --- H1 typography ------------------------------------------------ */ body.dmec-redesign-active .page-section__hero-banner.page-section__hero-banner h1 { margin: 0; font-family: var(--dmec-font-family-display); font-size: 40px; font-weight: 700; line-height: 1.2; color: var(--dmec-white); text-align: center; } /* --- Mobile responsive -------------------------------------------- */ @media (max-width: 767px) { body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-mobile { display: none; } body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-desktop, body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-tablet { display: block; } body.dmec-redesign-active .page-section__hero-banner > .e-con { margin-top: -72px; } body.dmec-redesign-active .page-section__hero-banner .page-section__hero-pill { width: min(320px, 100% - 32px); min-height: 76px; } body.dmec-redesign-active .page-section__hero-banner.page-section__hero-banner h1 { font-size: 32px; } } /* ================================================================= * Component: Page Header — navy band + magenta pill (canonical) * * Relocated from `05-pages/_calendar-find-job.scss` where these rules * were already class-based (`.page-header__*`) but living in the * wrong architectural layer. No page-id qualifiers — any page * carrying the `page-header__*` classes via CLI migrate gets the * full canonical chrome. * * Used on: Calendar of Events (2177), Find a Job (2367), * Certification & Training (531), Membership (478), State Policy * (15890), About DMEC, and any future page the orchestrator stamps. * * Structural patterns: * Calendar/Find-a-Job: pill outer-container is SIBLING of blue-section * Orchestrator pages: pill outer-container is NESTED inside blue-section * Both are handled via the `:has()` rules below. * ================================================================= */ /* --- Outer container ---------------------------------------------- */ body.dmec-redesign-active .page-header__outer-container { /* The sibling-pattern pill is position:absolute against this wrapper. Without an explicit containing block here, pages whose Elementor data leaves the wrapper static drop the pill to the next positioned ancestor — seen as the pill rendering fully below the band on /education-content/ (regression QA). */ position: relative; overflow: visible; min-height: 204px; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; padding: 0; } /* --- Navy band ---------------------------------------------------- Triple-chained class = (0,4,1) so the canonical navy beats the per-element background Elementor stores for migrated pages (several About subpages shipped with a stale #104B7D band — BugZap hero-mess reports #42/#45/#47/#56/#70/#71). */ body.dmec-redesign-active .page-header__blue-section.page-header__blue-section.page-header__blue-section { position: relative; z-index: 1; min-height: 160px; justify-content: flex-start; align-items: center; padding: 80px 60px; background-color: #1d4689; color: #ffffff; overflow: hidden; } /* Geometric SVG overlay — only on pages WITHOUT a hero photo. Pages with photos carry `.page-header__has-hero-image` on the section; they keep Elementor's stored background-image (the photo) and skip the SVG pattern. */ body.dmec-redesign-active .page-header__blue-section:not(.page-header__has-hero-image) { background-image: url("../img/resources-header-transparent.svg"); background-position: left -324px top -87px; background-repeat: no-repeat; background-size: 1176px 1176px; } body.dmec-redesign-active .page-header__blue-section.page-header__blue-section .elementor-heading-title { font-family: "PT Sans", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.32; letter-spacing: 0; text-transform: uppercase; color: #ffffff; white-space: nowrap; } body.dmec-redesign-active .page-header__blue-section :where(.e-con-inner, .elementor-element, .elementor-widget-container, p, span, li) { color: inherit; } /* --- Legacy image cleanup ----------------------------------------- Hide stale image widgets ONLY on pages WITHOUT a hero photo. Pages carrying `.page-header__has-hero-image` use an Image widget AS the hero photo — it must remain visible. */ body.dmec-redesign-active .page-header__blue-section:not(.page-header__has-hero-image) > .elementor-widget-image, body.dmec-redesign-active .page-header__blue-section:not(.page-header__has-hero-image) > .elementor-element:not([class*=page-header__purple-box-outer-container]):not(.page-header__purple-box-outer-container) > .elementor-widget-image { display: none; } /* Hero photo on pages WITH the modifier — make the image widget fill the blue-section as an absolute-positioned cover layer behind the pill and breadcrumbs. */ body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; } body.dmec-redesign-active .page-header__blue-section.page-header__blue-section.page-header__blue-section.page-header__has-hero-image { min-height: clamp(240px, 28vw, 360px); background-color: var(--dmec-primary-800); background-position: center center; background-size: cover; } body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image, body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image .elementor-widget-container, body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image picture { width: 100%; height: 100%; } body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* --- Pill outer container ----------------------------------------- */ body.dmec-redesign-active .page-header__purple-box-outer-container { position: absolute !important; top: auto !important; left: 0; right: 0; bottom: 0; --margin-top: 0px; margin-top: 0 !important; z-index: 2; align-items: center; justify-content: center; padding-inline: 60px; } body.dmec-redesign-active .page-header__purple-box-outer-container > .elementor-element { width: auto; max-width: 100%; } /* Width-collapse for the pill chain. Two structural patterns: * Calendar/Find-a-Job: outer-container > .elementor-element > .e-con-inner > pill * Orchestrator pages: outer-container > .e-con-inner > pill */ body.dmec-redesign-active .page-header__purple-box-outer-container > .elementor-element, body.dmec-redesign-active .page-header__purple-box-outer-container > .elementor-element > .e-con-inner, body.dmec-redesign-active .page-header__purple-box-outer-container > .e-con-inner { --width: auto; width: auto; max-width: 100%; justify-content: center; } /* --- Magenta pill ------------------------------------------------- */ body.dmec-redesign-active .page-header__purple-box { --width: auto; --display: inline-flex; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: fit-content !important; min-width: min(500px, 100% - 32px); max-width: calc(100% - 32px); min-height: 0; padding: 20px 80px; border-radius: 4px; background: #701471; text-align: center; } body.dmec-redesign-active .page-header__purple-box > .elementor-widget-heading { flex: 0 1 auto; width: max-content !important; max-width: 100%; margin: 0; text-align: center; } /* Specificity (0,4,1) via double-class chain — must beat Elementor's per-post global-typography rule at (0,4,0): .elementor-{pid} .elementor-element.elementor-element-{eid} .elementor-heading-title */ body.dmec-redesign-active .page-header__purple-box.page-header__purple-box .elementor-heading-title { display: block; font-family: "PT Sans", sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; color: #ffffff; text-transform: none; text-align: center; white-space: nowrap; } body.dmec-redesign-active .page-header__purple-box.page-header__pill-title-about .elementor-heading-title { font-size: 0; line-height: 1; } body.dmec-redesign-active .page-header__purple-box.page-header__pill-title-about .elementor-heading-title::after { content: "ABOUT DMEC"; display: inline-block; font-size: clamp(2.25rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; } /* BugZap #29/#38/#54: About subpages show the section name as the band eyebrow (matching the canonical hero eyebrow, e.g. "SURVEYS & BENCHMARKING") with the page's own title in the pill. The pill's `page-header__pill-title-about` class — which forced "ABOUT DMEC" into the pill and hid the real title — is removed by the migrate command (COMPONENT_CLASS_REMOVALS); this adds the "ABOUT DMEC" band eyebrow. Scoped to the three About subpages; the About landing (107) keeps "ABOUT DMEC" in its pill. */ /* Match the canonical About hero (who-we-are, page 1213): a 204px min-height band with the eyebrow at 82px from the band top and the pill straddling the bottom. The three subpages' bands shipped shorter (160px) with extra flow children that pinned a flow-positioned eyebrow to the very top, so the eyebrow is positioned ABSOLUTELY against the (position:relative) band to reproduce who-we-are's placement independent of sibling flow. */ body.dmec-redesign-active:is(.page-id-15890, .page-id-1212, .page-id-16991) .page-header__blue-section.page-header__blue-section.page-header__blue-section { min-height: 204px; } body.dmec-redesign-active:is(.page-id-15890, .page-id-1212, .page-id-16991) .page-header__blue-section::before { content: "ABOUT DMEC"; position: absolute; top: 82px; left: 0; right: 0; margin: 0 auto; font-family: "PT Sans", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; color: #ffffff; text-align: center; text-transform: uppercase; } body.dmec-redesign-active .page-header__purple-box .elementor-heading-title br { display: none; } body.dmec-redesign-active .page-header__purple-box .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 !important; margin: 0; text-align: center; } /* --- Nested-pill straddle (orchestrator pages) -------------------- REGRESSION GUARD: the base navy-band rule above runs at (0,4,1) (triple-chained to beat stale Elementor backgrounds). This exception must outrank it or `overflow: hidden` clips the straddling pill mid-band (seen on /certification-and-training/ and /about-dmec/ during round-2 QA). Triple chain + :has() = (0,5,1). */ body.dmec-redesign-active .page-header__blue-section.page-header__blue-section.page-header__blue-section:has(> .page-header__purple-box-outer-container) { overflow: visible; } body.dmec-redesign-active .page-header__blue-section > .page-header__purple-box-outer-container { bottom: -44px !important; } /* Sibling-pill pages use a wrapper around the blue band. Straddle the pill from that wrapper so Certification descendants, Calendar, and Find-a-Job follow the same canonical header geometry. */ body.dmec-redesign-active .page-header__outer-container > .page-header__purple-box-outer-container { bottom: -44px !important; } /* In the sibling pattern the pill is anchored to the WRAPPER, so the band must fill the wrapper's full 204px — otherwise the pill "centers" on an invisible edge 44px below the navy and renders fully detached (education-content regression, round-2 QA). The triple chain keeps parity with the base band rule's specificity. */ body.dmec-redesign-active .page-header__outer-container > .page-header__blue-section.page-header__blue-section.page-header__blue-section { min-height: 204px; } /* BugZap #34: the former About-scoped -64px/-54px pill offsets are gone. The -44px straddle equals half the pill's rendered height, so the pill is vertically centered on the band's bottom edge on every page — exactly the Figma alignment Matt called out on /media/. */ /* Breadcrumb push for nested pattern. BugZap #24/#67/#68: the visual gap between the magenta pill and the breadcrumb row is 60px everywhere. The pill overhangs the band by 44px (half its height), so the row's margin from the band edge is 44 + 60 = 104px. */ body.dmec-redesign-active .page-header__blue-section:has(> .page-header__purple-box-outer-container) ~ .breadcrumb-container { margin-top: 104px; } body.dmec-redesign-active .page-header__outer-container:has(> .page-header__purple-box-outer-container) + .breadcrumb-container { margin-top: 104px; } /* Keep Membership on the same measured hero-to-breadcrumb rhythm. */ body.dmec-redesign-active.page-id-478 .page-header__blue-section.page-header__has-hero-image:has(> .page-header__purple-box-outer-container) ~ .breadcrumb-container { margin-top: 104px; } /* BugZap #162/#70/#71/#159 (round-2): on the resource/thank-you hero pages the breadcrumb is an inline Elementor `breadcrumbs` widget in its own `.e-con` that follows the hero BLOCK (the `.e-con` wrapping the band) — it carries no `.breadcrumb-container` class and isn't a band sibling, so the rules above can't reach it and it tucks under the straddling pill. After the pill-nesting migrate (step 6b) the band's direct child is the pill-outer, so match the nested-hero block + the adjacent breadcrumb `.e-con`. Zero the hero block's 10px bottom padding so the row measures from the band edge, then push it the canonical 104px (44px pill overhang + 60px gap). */ body.dmec-redesign-active .e-con:has(> .page-header__blue-section > .page-header__purple-box-outer-container) { padding-bottom: 0; } body.dmec-redesign-active .e-con:has(> .page-header__blue-section > .page-header__purple-box-outer-container) + .e-con:has(.elementor-widget-breadcrumbs) { margin-top: 104px; } /* BugZap #159 (benchmarking-report, page 15662): this hero's title wraps to two lines, so the pill renders ~136px tall. The canonical -44px overhang centers an 88px (1-line) pill but leaves a tall pill sitting high (92/44) — Matt's "not vertically centered." Center it on the band edge with half-height overhang, then push the breadcrumb to keep the canonical 60px below the taller pill (68 overhang + 60 = 128). Scoped to this page because it is the only two-line hero pill. */ body.dmec-redesign-active.page-id-15662 .page-header__outer-container > .page-header__purple-box-outer-container { bottom: -68px !important; } body.dmec-redesign-active.page-id-15662 .page-header__outer-container:has(> .page-header__purple-box-outer-container) + .breadcrumb-container { margin-top: 128px; } /* BugZap #169 (benchmarking-whitepaper-download, page 15631): the pill title "2024 DMEC Absence Plan Design and Practices Benchmarking Report" is too long for the canonical single line (the global pill rule sets `white-space: nowrap` + heading `width: max-content`, so it overflowed the pill edges). Adopt the two-line treatment: allow the title to wrap, cap the pill width so it breaks onto two balanced lines, then apply the same -68px overhang + 128px breadcrumb offset as the #159 two-line hero so the taller pill stays vertically centered on the band edge. */ body.dmec-redesign-active.page-id-15631 .page-header__purple-box > .elementor-widget-heading { width: auto !important; max-width: 100%; } body.dmec-redesign-active.page-id-15631 .page-header__purple-box.page-header__purple-box .elementor-heading-title { white-space: normal; } body.dmec-redesign-active.page-id-15631 .page-header__purple-box { max-width: 900px !important; padding: 24px 56px; } /* This hero nests the pill straight under `.page-header__blue-section` (not the `.page-header__outer-container` variant #159 uses), so the half-height overhang targets the blue-section child. -68px centers the ~144px two-line pill on the band edge (76/68). The breadcrumb sits in normal flow and is unaffected by the pill's absolute shift, so a small top margin restores the canonical ~60px gap below the lowered pill. */ body.dmec-redesign-active.page-id-15631 .page-header__blue-section > .page-header__purple-box-outer-container { bottom: -68px !important; } body.dmec-redesign-active.page-id-15631 .elementor-widget-breadcrumbs { margin-top: 14px; } /* --- Responsive --------------------------------------------------- */ @media (max-width: 1024px) { body.dmec-redesign-active .page-header__blue-section { padding: 72px 32px; } body.dmec-redesign-active .page-header__purple-box { padding: 20px 48px; } } @media (max-width: 767px) { body.dmec-redesign-active .page-header__blue-section { padding: 64px 20px; } body.dmec-redesign-active .page-header__purple-box-outer-container { padding-inline: 20px; } body.dmec-redesign-active .page-header__purple-box { width: calc(100vw - 40px) !important; min-width: 0; max-width: calc(100vw - 40px) !important; padding: 16px 24px; } body.dmec-redesign-active .page-header__purple-box > .elementor-widget-heading { width: 100% !important; } body.dmec-redesign-active .page-header__purple-box.page-header__purple-box .elementor-heading-title { font-size: 32px; white-space: normal; text-align: center; text-wrap: balance; } } /* ================================================================= * Component: CTA 2-Column Blue Band (canonical) * * Two side-by-side navy panels (Primary/900 left, Primary/1000 right) * with heading, body text, divider, and a white-bordered button. * Used on Resources, Community, Certification & Training, Membership, * Calendar of Events, and Find a Job. * * Previously duplicated in every per-page SCSS file scoped by * `page-id-NNN [data-id="XXXX"]`. Now unified behind the semantic * class `.page-section__cta-2-col-blue`, stamped onto Elementor * containers by the CLI migrate command. * * Design tokens used: * --dmec-primary-700 button bg * --dmec-primary-800 button hover bg * --dmec-primary-900 left panel bg * --dmec-primary-1000 right panel bg * --dmec-white text + button border * --dmec-font-family-body all text * --dmec-h02-size / --dmec-h02-lh heading * --dmec-body-lg-size / --dmec-body-lg-lh body text * --dmec-color-focus-ring focus-visible outline * ================================================================= */ /* --- Section container — zero padding so panels control spacing --- */ body.dmec-redesign-active .page-section__cta-2-col-blue { --gap: 0px; gap: 0; padding: 0; } /* --- Panel layout ------------------------------------------------- */ body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element { flex: 1 1 0; gap: 32px; justify-content: flex-end; padding: 60px 120px; } body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element:first-child { background: var(--dmec-primary-900); } body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element:last-child { background: var(--dmec-primary-1000); } /* --- Divider ------------------------------------------------------ */ body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-divider { padding-block: 0; } body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-divider-separator { width: 120px; border-color: rgba(255, 255, 255, 0.4); } /* --- Heading typography ------------------------------------------- */ body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-heading-title { font-family: var(--dmec-font-family-body); font-size: var(--dmec-h02-size); font-weight: 700; line-height: var(--dmec-h02-lh); color: var(--dmec-white); } body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element:last-child .elementor-widget-heading { width: 540px; max-width: 100%; } body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element:last-child .elementor-heading-title { max-width: 540px; white-space: pre-line; } /* --- Body text ---------------------------------------------------- */ body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-widget-text-editor, body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-widget-text-editor p { font-family: var(--dmec-font-family-body); font-size: var(--dmec-body-lg-size); font-weight: 400; line-height: var(--dmec-body-lg-lh); color: var(--dmec-white); } /* --- Button ------------------------------------------------------- */ body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 16px 24px; border: 1px solid var(--dmec-white); border-radius: 4px; background: var(--dmec-primary-700); font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 700; line-height: 1.24; letter-spacing: 0.01em; box-shadow: none; } body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-button:hover { /* Canonical button hover unified on Primary/900 (BugZap round-2); the 1px white border keeps the button legible on the 900 panel. */ background: var(--dmec-primary-900); } body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-button:focus-visible { outline: 2px solid var(--dmec-color-focus-ring); outline-offset: 2px; } body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-button-content-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-button-text { font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 700; line-height: 1.24; letter-spacing: 0.01em; color: var(--dmec-white); } /* --- Responsive --------------------------------------------------- */ @media (max-width: 767px) { body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element { padding: 48px 24px; } } /* ================================================================= * Component: Content panel (white/gray inset section) * * BugZap round-2 (#39/#48/#55): inset content panels across the About * subtree shipped with assorted Elementor padding (50px, 60px). Per * the Figma component the panel padding is 40px on all sides. * * Applied via the `page-section__content-panel` class stamped by the * CLI migrate command (COMPONENT_CLASS_STAMPS). Triple-chained class * = (0,4,1) so it beats Elementor's per-element padding at (0,4,0) * without `!important`. * ================================================================= */ body.dmec-redesign-active .page-section__content-panel.page-section__content-panel.page-section__content-panel { --padding-top: 40px; --padding-right: 40px; --padding-bottom: 40px; --padding-left: 40px; padding: 40px; } /* The 40px spec is the VISIBLE inset (panel edge → text), so the inner wrapper and edge widgets must not stack their own spacing on top of the panel padding (measured +20px per side on Terms of Use). Covers BOTH the boxed inner wrapper (.e-con-inner) and a full-width direct child container (.e-con-full) — the latter shipped its own 40px Elementor padding on Sponsored Content and Benchmarking Dashboard Full, doubling the inset to 80px (BugZap #153/#157). The panel itself always supplies the 40px, so any direct-child padding is by definition double-counting. */ body.dmec-redesign-active .page-section__content-panel.page-section__content-panel > .e-con-inner, body.dmec-redesign-active .page-section__content-panel.page-section__content-panel > .e-con-full { padding: 0; } /* Elementor stores 20px vertical padding on each widget's container inside these panels — at the panel edges that stacked to a 60px visible inset. Internal rhythm comes from text margins and the container gap, so the widget-container padding contributes nothing but drift. */ body.dmec-redesign-active .page-section__content-panel.page-section__content-panel .elementor-widget > .elementor-widget-container { padding-top: 0; padding-bottom: 0; } /* Long-form copy cap (BugZap #61): readable measure is 720px max per the accessibility direction. Applied via stamp on sections whose body copy ran the full 1200px container. */ body.dmec-redesign-active .page-section__narrow-text.page-section__narrow-text .elementor-widget-text-editor, body.dmec-redesign-active .page-section__narrow-text.page-section__narrow-text .elementor-widget-text-editor .elementor-widget-container, body.dmec-redesign-active .elementor-widget-text-editor.page-section__narrow-text.page-section__narrow-text { max-width: 720px; margin-inline: auto; } /* Background override — force white on sections that shipped with Elementor's default #F0F0F0 / #F4F6FA gray. Triple-chained (0,4,1) to beat the per-element inline background at (0,4,0). Resources BugZap #142, #150. */ body.dmec-redesign-active .page-section__bg-white.page-section__bg-white.page-section__bg-white { --background-color: var( --dmec-white ); background-color: var(--dmec-white); } /* Neutral headings (BugZap #101): some sections' heading widgets carry a per-element Elementor color pointing at the global "Primary" swatch (#104B7D legacy blue), so non-link section/feature titles render blue and read as clickable. Per the design only actual links are blue; titles are Neutral. Stamp this class on the section to force its headings to the canonical heading color. Double class + .elementor-heading-title = (0,4,1), beating Elementor's per-element `.elementor-{pid} .elementor-element-{eid} .elementor-heading-title` color rule at (0,3,0). `!important` is the sanctioned external-layer counter: on Calendar of Events (#98) the blue comes from The Events Calendar plugin stylesheet with its own `!important`, which plain specificity can't beat. */ body.dmec-redesign-active .page-section__neutral-headings.page-section__neutral-headings .elementor-heading-title { color: var(--dmec-color-heading) !important; } /* Margin flush — suppress the 80px bottom-margin Elementor ships on boxed sections that should sit tight against the next band. Resources BugZap #141. */ body.dmec-redesign-active .dmec-no-margin-bottom.dmec-no-margin-bottom.dmec-no-margin-bottom { margin-bottom: 0; } /* Margin-top flush — zero out negative top-margin Elementor ships on sections that pull content up into the breadcrumb band. Resources BugZap #160. */ body.dmec-redesign-active .dmec-no-margin-top.dmec-no-margin-top.dmec-no-margin-top { margin-top: 0; } /* `page-section__panel-light` (BugZap #60) is a MARKER class with no rules of its own. The CLMS dark band hosts a floating light two-panel card (white + Neutral/cold gray, same as production); the issue-#134 band-wide white-text rule in `05-pages/_certification-training.scss` was painting the card's copy white-on-white. That rule now carves out `:not( .page-section__panel-light * )`, letting the panels' own Elementor colors (navy headings, dark body — matching production) show through. The class is stamped by the CLI migrate command. */ /* Full-width 2-col content block (BugZap #62): the cols-2 pattern shipped with a 700px max-width and 320px columns baked into the Elementor data. The canonical block fills its 1200px container with two equal columns. Chained classes give (0,4,1) over Elementor's per-element sizing. */ body.dmec-redesign-active .cols-2-container.cols-2-container.cols-2-container { --width: 100%; width: 100%; max-width: 100%; } body.dmec-redesign-active .cols-2-container.cols-2-container :where(.cols-2-text-column, .cols-2-image-column) { --width: 50%; flex: 1 1 0; min-width: 0; } /* ================================================================= * Component: Metrics band photo wash (round-4 #137, round-3 #119) * * The "Advancing Absence & Disability Management" stats band renders * a photo background (homepage-member.jpg) whose teal tint is baked * into the JPEG — there is no Elementor overlay layer, so a plain * background-color can never darken it (the opaque photo paints over * it). Designer: "green overlay should be darker." * * Treatment: a ::before wash in Secondary/Blue-Green 800 over the * photo, content lifted above it. Applied to both carriers of the * band: `.page-section__metrics` (subpages) and `.dmec-home-stats` * (homepage — supersedes the round-3 #119 background-color attempt). * * Wash strength is eyeballed at 45% pending designer confirmation of * the exact step. * ================================================================= */ body.dmec-redesign-active :is(.page-section__metrics, .elementor-element.dmec-home-stats) { position: relative; isolation: isolate; } body.dmec-redesign-active :is(.page-section__metrics, .elementor-element.dmec-home-stats)::before { content: ""; position: absolute; inset: 0; /* BugZap #177: darker green overlay over the stats photo. Solid fallback first for engines without color-mix; then the tinted wash. Bumped from 45% to 65% so the darker-green overlay reads clearly. */ background-color: rgba(10, 88, 83, 0.65); background-color: color-mix(in srgb, var(--dmec-secondary-bg-800) 65%, transparent); pointer-events: none; z-index: 0; } body.dmec-redesign-active :is(.page-section__metrics, .elementor-element.dmec-home-stats) > .e-con-inner, body.dmec-redesign-active :is(.page-section__metrics, .elementor-element.dmec-home-stats) > .e-con { position: relative; z-index: 1; } /* ================================================================= * Component: Accordion — Figma accordions/basic (334:4381) * * Rewritten round-3 (#83/#105, round-2 #49/#57): the library variant * is a borderless DIVIDER list, not the boxed-card treatment shipped * previously. * * Item no box — border-bottom 1px Neutral/cold/300, no radius * Head 16px padding, 16px gap, 24px leading icon, * Headline 05 bold (16/1.4) in Primary/600 * Hovered bg Primary/100, border-bottom Primary/500, * title Primary/900 (334:4391); expanded matches * Body 8px top / 20px bottom / 56px sides (indented under the * icon), Body medium (16/1.4) in Neutral/cold/800 * * The plus/minus circle GLYPHS are an Elementor widget icon setting * (content, not CSS) — flagged in the round-3 notes for a migrate * patch if pages ship chevrons. * * !important retained where the previous component needed it against * Elementor's widget-level borders/padding. * ================================================================= */ body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion, .elementor-toggle, .e-n-accordion) { display: flex; flex-direction: column; gap: 0; } body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-item, .elementor-toggle-item, .e-n-accordion-item) { overflow: hidden; background: transparent; border: 0 !important; border-bottom: 1px solid var(--dmec-neutral-cold-300) !important; border-radius: 0; box-shadow: none; } body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-title, .e-n-accordion-item-title) { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 16px !important; background: transparent; border: 0 !important; font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--dmec-color-link); text-decoration: none; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-title, .e-n-accordion-item-title) :is(.elementor-accordion-title, .elementor-toggle-title, .e-n-accordion-item-title-text) { padding: 0; color: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: none; } /* HOVER ONLY (Figma 334:4391): Primary/100 wash, Primary/500 divider, Primary/900 title. Per Figma the EXPANDED-default state is NOT washed — it stays white bg / Primary/600 title (334:4408). So this treatment is scoped to :hover / :focus-within and must NOT include the open/active state. */ body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-title, .e-n-accordion-item-title):hover, body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-title, .e-n-accordion-item-title):focus-within { background: var(--dmec-primary-100); color: var(--dmec-color-link-hover); } body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-item, .elementor-toggle-item, .e-n-accordion-item):has(:is(.elementor-tab-title, .e-n-accordion-item-title):hover) { border-bottom-color: var(--dmec-primary-500) !important; } /* Expanded title color (BugZap #57/#49/#83/#105). Elementor's nested- accordion default paints the OPEN title near-black (#1f2124) via `.e-n-accordion-item[open] > .e-n-accordion-item-title` (0,4,0). Per Figma 334:4408 the expanded title stays Primary/600 — the SAME as collapsed; only HOVER darkens to Primary/900. (Earlier this wrongly set link-hover/Primary-900 on the open state.) Override the dark default to Primary/600 at (0,4,1). The title-text `` inherits via `color: inherit` above. */ body.dmec-redesign-active :where(#main-container) .e-n-accordion-item[open] > .e-n-accordion-item-title, body.dmec-redesign-active :where(#main-container) .e-n-accordion-item-title[aria-expanded=true] { color: var(--dmec-color-link); } body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-title, .e-n-accordion-item-title):focus-visible { outline: 2px solid var(--dmec-color-focus-ring); outline-offset: 2px; } /* Leading 24px icon in the link color; follows the title state. */ body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-icon, .elementor-toggle-icon, .e-n-accordion-item-title-icon) { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; margin: 0; font-size: 24px; color: currentColor; } body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-icon i, .elementor-toggle-icon i, .e-n-accordion-item-title-icon i, .elementor-accordion-icon svg, .elementor-toggle-icon svg, .e-n-accordion-item-title-icon svg) { color: currentColor; fill: currentColor; width: 24px; height: 24px; } /* Center the +/- glyph inside the 24px circle. Elementor's nested accordion wraps the icon in e-closed/e-opened state spans that don't fill the circle, so the glyph rendered off-center (BugZap #164: "the + is misaligned in the circle"). Make the state wrappers and the glyph flex-center and fill the circle so the mark sits dead center. */ body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-icon, .elementor-toggle-icon, .e-n-accordion-item-title-icon) > span, body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-icon, .elementor-toggle-icon, .e-n-accordion-item-title-icon) i, body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-icon, .elementor-toggle-icon, .e-n-accordion-item-title-icon) svg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1; } /* Glyph = Figma "add/remove-circle-outline" (334:4387): a thin outline circle + plus/minus in the title colour. The pages shipped a SOLID FA plus/minus inside a 2px MAGENTA ring (Elementor per-element icon border, #701471) — the "old"/mixed look Matt flagged. Strip that ring + the FA glyph, then paint the Material circle-outline mark via `mask` so it is one `currentColor` glyph that follows the title state (Primary/600 normal, Primary/900 on hover) and is inherently centred — which also resolves #164's off-centre "+". */ body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-icon, .elementor-toggle-icon, .e-n-accordion-item-title-icon) { /* The CIRCLE is a real 2px CSS border in the title colour (crisp at 24px, unlike a masked thin-stroke circle which anti-aliases to near invisibility). Replaces the pages' 2px MAGENTA ring (#701471). The +/- inside is a thin masked glyph (lines only, no circle). */ box-sizing: border-box; border: 2px solid currentColor !important; border-radius: 50% !important; background: transparent !important; } /* Force the icon to inherit the TITLE colour, not Elementor's per-element `--n-accordion-icon-normal-color` (set to magenta #701471 on these pages at (0,3,0)). The extra `.e-n-accordion-item-title` ancestor lands this at (0,4,1) so it wins, and `inherit` then tracks the title across normal / hover. */ body.dmec-redesign-active :where(#main-container) .e-n-accordion-item-title-icon, body.dmec-redesign-active :where(#main-container) .e-n-accordion-item-title-icon i { /* `!important` is the sanctioned counter to Elementor's per-element icon colours (`--n-accordion-icon-normal/hover/active-color`, all set to magenta on these pages): they paint the icon in normal AND the [open] active state at specificities that plain rules lose to. `inherit` then tracks the title in every state. */ color: inherit !important; } body.dmec-redesign-active :where(#main-container) .e-n-accordion-item-title-icon i { font-size: 0; background-color: currentColor; -webkit-mask: var(--dmec-acc-icon) center/14px 14px no-repeat; mask: var(--dmec-acc-icon) center/14px 14px no-repeat; } body.dmec-redesign-active :where(#main-container) .e-n-accordion-item-title-icon i::before { content: none; } body.dmec-redesign-active :where(#main-container) .e-n-accordion-item-title-icon .e-closed i { --dmec-acc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); } body.dmec-redesign-active :where(#main-container) .e-n-accordion-item-title-icon .e-opened i { --dmec-acc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); } /* Body: 8px top, 20px bottom, 56px sides (indent under the icon). */ body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-content, .elementor-toggle-content, .e-n-accordion-item > .e-con.e-child) { padding: 8px 56px 20px !important; border: 0 !important; background: transparent; font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--dmec-neutral-cold-800); } body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-content, .elementor-toggle-content, .e-n-accordion-item > .e-con.e-child) :is(p, ul, ol) { margin-top: 0; } @media (max-width: 767px) { body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-content, .elementor-toggle-content, .e-n-accordion-item > .e-con.e-child) { padding: 8px 16px 20px !important; } } /* Round-3 #94: Elementor stores horizontal padding on the accordion WIDGET's container, pushing the whole list ~40px right of sibling headings (compliance agenda). The divider-list comp is flush with its column. */ body.dmec-redesign-active :where(#main-container) :is(.elementor-widget-n-accordion, .elementor-widget-accordion, .elementor-widget-toggle) > .elementor-widget-container { padding-left: 0; padding-right: 0; } /* ================================================================= * Component: Pagination * * Shared states for Elementor post pagination and Swiper bullets on * redesign-active pages. This covers default, hover/focus, current, * and disabled states without relying on per-widget color settings. * ================================================================= */ body.dmec-redesign-active :where(#main-container) :is(.elementor-pagination, .page-numbers) { font-family: var(--dmec-font-family-body); } body.dmec-redesign-active :where(#main-container) .elementor-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; } body.dmec-redesign-active :where(#main-container) .elementor-pagination .page-numbers, body.dmec-redesign-active :where(#main-container) .page-numbers:not(ul) { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--dmec-primary-600); border-radius: 4px; background: var(--dmec-white); color: var(--dmec-primary-700); font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } body.dmec-redesign-active :where(#main-container) .elementor-pagination a.page-numbers:hover, body.dmec-redesign-active :where(#main-container) a.page-numbers:hover { border-color: var(--dmec-primary-800); background: var(--dmec-primary-100); color: var(--dmec-primary-800); text-decoration: none; } /* Hold 700 weight on hover — both selectors above (0,4,2) and (0,3,2) tie or lose to the foundation a:hover{font-weight:inherit} rule at (0,4,2) in dmec-base.css (priority 50 > priority 30, so base wins ties). Bump to (0,5,2) by doubling .elementor-pagination and .page-numbers to hold PT Sans Bold per Figma. */ body.dmec-redesign-active :where(#main-container) .elementor-pagination.elementor-pagination a.page-numbers:hover, body.dmec-redesign-active.dmec-redesign-active :where(#main-container) a.page-numbers.page-numbers:hover { font-weight: 700; } body.dmec-redesign-active :where(#main-container) .elementor-pagination a.page-numbers:focus-visible, body.dmec-redesign-active :where(#main-container) a.page-numbers:focus-visible { outline: 2px solid var(--dmec-color-focus-ring); outline-offset: 2px; } body.dmec-redesign-active :where(#main-container) .elementor-pagination .page-numbers.current, body.dmec-redesign-active :where(#main-container) .page-numbers.current { border-color: var(--dmec-primary-700); background: var(--dmec-primary-700); color: var(--dmec-white); } body.dmec-redesign-active :where(#main-container) .elementor-pagination .page-numbers:is(.prev, .next):not(a), body.dmec-redesign-active :where(#main-container) .elementor-pagination .page-numbers[aria-disabled=true], body.dmec-redesign-active :where(#main-container) .page-numbers:is(.prev, .next):not(a), body.dmec-redesign-active :where(#main-container) .page-numbers[aria-disabled=true] { border-color: var(--dmec-neutral-warm-300); background: var(--dmec-neutral-warm-100); color: var(--dmec-neutral-warm-500); cursor: not-allowed; pointer-events: none; } body.dmec-redesign-active :where(#main-container) .elementor-pagination .page-numbers.dots, body.dmec-redesign-active :where(#main-container) .page-numbers.dots { border-color: transparent; background: transparent; color: var(--dmec-neutral-warm-700); } body.dmec-redesign-active :where(#main-container) .swiper-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; } body.dmec-redesign-active :where(#main-container) .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 !important; border: 1px solid var(--dmec-primary-600); background: transparent; opacity: 1; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; } body.dmec-redesign-active :where(#main-container) .swiper-pagination-bullet:hover { border-color: var(--dmec-primary-800); background: var(--dmec-primary-100); transform: scale(1.1); } body.dmec-redesign-active :where(#main-container) .swiper-pagination-bullet:focus-visible { outline: 2px solid var(--dmec-color-focus-ring); outline-offset: 2px; } body.dmec-redesign-active :where(#main-container) .swiper-pagination-bullet-active { border-color: var(--dmec-primary-700); background: var(--dmec-primary-700); } /* ================================================================= * Component: Shared interaction states * * Live-design-system hardening for redesign-active page content: * clickable text is blue, non-clickable copy stays neutral, links * darken + underline on hover/active, and card/button pressed states * use the darker primary token. * ================================================================= */ body.dmec-redesign-active :where(#main-container) :where(.elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li) { color: var(--dmec-neutral-warm-800); } body.dmec-redesign-active :where(#main-container) :where(.elementor-widget-text-editor a, .entry-content p a, .entry-content li a) { color: var(--dmec-color-link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: from-font; } body.dmec-redesign-active :where(#main-container) :where(.elementor-widget-text-editor a, .entry-content p a, .entry-content li a):hover { color: var(--dmec-color-link-hover); text-decoration: underline; } body.dmec-redesign-active :where(#main-container) :where(.elementor-widget-text-editor a, .entry-content p a, .entry-content li a):focus-visible { outline: 2px solid var(--dmec-color-focus-ring); outline-offset: 2px; } body.dmec-redesign-active :where(#main-container) :where(.elementor-widget-text-editor a, .entry-content p a, .entry-content li a):active { color: var(--dmec-primary-1000); text-decoration: underline; } /* Canonical button hover (BugZap #20/#22/#53/#65/#74): darken to Primary/900 with white text and NO underline — buttons must not inherit the content-link underline from the foundation a:hover rule. Source order after _foundation.scss resolves the tie. */ body.dmec-redesign-active.dmec-redesign-active :where(#main-container) :where(.elementor-button, button, input[type=submit]):hover:not(:where(.elementor-widget-video-playlist button, .e-n-accordion button)) { background-color: var(--dmec-primary-900); border-color: var(--dmec-primary-900); color: var(--dmec-white); text-decoration: none; } /* Linked headings (BugZap #33). Elementor ships `.elementor-widget-heading .elementor-heading-title a { color: inherit }` at (0,2,1), which beat the foundation link rule and left clickable staff/role names rendering as plain Neutral/900 headings (seen on /leadership-and-staff/). Clickable text takes the link tokens; components with their own title-link colors (subpage-grid cards at (0,5,2), dark bands) still outrank this. */ body.dmec-redesign-active :where(#main-container) .elementor-widget-heading .elementor-heading-title a { color: var(--dmec-color-link); } body.dmec-redesign-active :where(#main-container) .elementor-widget-heading .elementor-heading-title a:hover { color: var(--dmec-color-link-hover); text-decoration: underline; } /* Video-playlist item titles render inside bare elements that were inheriting a white button color and disappearing against the white list background (BugZap #59). Force inheritance from the playlist's own title colors. */ body.dmec-redesign-active :where(#main-container) .elementor-widget-video-playlist .e-tab-title button, body.dmec-redesign-active :where(#main-container) .elementor-widget-video-playlist .e-tab-title-text button { background: transparent; border: 0; padding: 0; font: inherit; color: inherit; text-align: inherit; } body.dmec-redesign-active :where(#main-container) :where(.elementor-button, button, input[type=submit]):active, body.dmec-redesign-active :where(#main-container) :where(.elementor-button, button, input[type=submit])[aria-pressed=true] { background-color: var(--dmec-primary-1000); border-color: var(--dmec-primary-1000); color: var(--dmec-white); } body.dmec-redesign-active :where(#main-container) :where(.dmec-card-event, .dmec-card-stretched, .quick-links-card, .subpage-grid > .e-con):active { transform: translateY(0); box-shadow: 0 4px 16px 0 rgba(18, 44, 86, 0.22); } body.dmec-redesign-active :where(#main-container) :where(.elementor-widget-icon svg, .elementor-widget-icon svg path, .elementor-icon svg, .elementor-icon svg path) { fill: currentColor; } /* Form input focus (round-3 #90): canonical focused state per the input/search/basic convention — Primary/500 border shift + the standard ring. Beats Elementor form widget borders at (0,2,1)+. */ body.dmec-redesign-active :where(#main-container) :where(input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], input[type=url], textarea, select):focus { border-color: var(--dmec-primary-500); outline: 2px solid var(--dmec-color-focus-ring); outline-offset: 1px; } /* Double-underline guard (round-3 #131): some migrated content links carry a border-bottom that stacks with the canonical underline on hover, reading as two lines. Text links underline via text-decoration only. */ body.dmec-redesign-active :where(#main-container) .elementor-widget-text-editor a, body.dmec-redesign-active :where(#main-container) .elementor-widget-text-editor a:hover { border-bottom: 0; box-shadow: none; } /* Posts-widget title links (round-4 #135): Elementor's classic posts skin pins `.elementor-post__title a` to its own color with no hover shift. Titles already inherit the link token; hover darkens to the canonical Primary/900 + underline, matching body links. */ body.dmec-redesign-active :where(#main-container) .elementor-posts .elementor-post__title a:hover, body.dmec-redesign-active :where(#main-container) .elementor-posts .elementor-post__title a:focus-visible { color: var(--dmec-color-link-hover); text-decoration: underline; } /* ================================================================= * Component: Feedback prompt * * Canonical green feedback strip/card. Some pages emit this through * Elementor classes and some through shortcode markup, so keep the * selectors semantic and additive. * ================================================================= */ body.dmec-redesign-active :where(#main-container) :where(.dmec-feedback, .page-section__feedback, .feedback-component, .elementor-element.feedback-component) { display: flex; align-items: center; gap: 8px; padding: 40px; background: var(--dmec-secondary-bg-800); color: var(--dmec-white); border-radius: 4px; } body.dmec-redesign-active :where(#main-container) :where(.dmec-feedback, .page-section__feedback, .feedback-component) :where(h2, h3, h4, h5, h6, p, span) { color: var(--dmec-white); } body.dmec-redesign-active :where(#main-container) :where(.dmec-feedback, .page-section__feedback, .feedback-component) :where(a, button) { color: var(--dmec-white); text-decoration: underline; text-underline-offset: 0.15em; } body.dmec-redesign-active :where(#main-container) :where(.dmec-feedback, .page-section__feedback, .feedback-component) :where(.elementor-icon, .elementor-widget-icon, svg) { flex: 0 0 auto; color: var(--dmec-white); fill: currentColor; } /* Attendee-feedback band split (round-4 #92, designer-specified): main band Secondary/Blue-Green/800, feedback card 700. Stamped by the migrate command on the Annual Conference instance (a9ffb16 + 3818bce @ 23342). Double-chained to clear the per-element Elementor backgrounds. */ body.dmec-redesign-active.dmec-redesign-active .page-section__feedback-band.page-section__feedback-band.page-section__feedback-band { background-color: var(--dmec-secondary-bg-800); } body.dmec-redesign-active.dmec-redesign-active .page-section__feedback-band .page-section__feedback-card.page-section__feedback-card { background-color: var(--dmec-secondary-bg-700); } /* ================================================================= * Component: WP core post-password form * * Sponsor Resource pages (and any other post_password-protected * content) render WordPress's default `` * below the canonical Hero Pill. WP core ships unstyled inputs/submit * that fall back to system fonts — by default the input was rendering * in DM Sans 16px and the submit in `-apple-system` 13px, neither of * which match the redesign typography. * * This file styles the form to match canonical input + button patterns * already used elsewhere on the site (PT Sans, primary-blue solid * button, 3px corner radius, sensible padding). It scopes everything * so it only fires on redesigned pages. * ================================================================= */ body.dmec-redesign-active .post-password-form { max-width: 720px; margin: 32px auto; padding-inline: 20px; } /* BugZap #58: when the password gate is showing, the page content is a single short section but Blocksy still applies its viewport-fill min-height to #main-container, leaving a ~200px dead band before the Partners section. Collapse the fill on gated views only. */ body.dmec-redesign-active #main-container:has(.post-password-form) { min-height: 0; } body.dmec-redesign-active .post-password-form p { font-family: "PT Sans", sans-serif; font-size: 18px; line-height: 1.5; color: #404040; } /* WordPress default markup wraps the form fields in a single ``: * * Password: * * * Make that paragraph a flex row so the label (with input inside) and * the submit button line up horizontally on the same baseline. */ body.dmec-redesign-active .post-password-form > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* The label contains "Password:" text + the input. Put them side-by-side * (label text → input), and let the whole label flex-grow so the * submit button stays on the right. */ body.dmec-redesign-active .post-password-form label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 240px; height: 48px; font-family: "PT Sans", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.5; color: #1d4689; } body.dmec-redesign-active .post-password-form input[name=post_password] { flex: 1 1 auto; min-width: 0; box-sizing: border-box; margin: 0; height: 48px; padding: 0 16px; font-family: "PT Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #1d4689; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 3px; box-shadow: none; transition: border-color 120ms ease, box-shadow 120ms ease; } body.dmec-redesign-active .post-password-form input[name=post_password]:focus { outline: 2px solid rgba(29, 70, 137, 0.32); outline-offset: 2px; border-color: #1d4689; } body.dmec-redesign-active .post-password-form input[type=submit] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; height: 48px; min-height: 48px; /* No vertical padding — `height: 48px` + flex-center handles * vertical alignment so the button sits flush at the same top * as the input. */ padding: 0 32px; font-family: "PT Sans", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; color: #ffffff; background: #1d4689; border: 0; border-radius: 3px; cursor: pointer; transition: background-color 120ms ease; } body.dmec-redesign-active .post-password-form input[type=submit]:hover { background: #163867; } body.dmec-redesign-active .post-password-form input[type=submit]:focus-visible { outline: 3px solid rgba(29, 70, 137, 0.4); outline-offset: 2px; } /* ================================================================= * Pages: Calendar of Events + Find a Job * * Shared patterns live in canonical components: * - Page header → 03-components/_section-page-header.scss * - CTA band → 03-components/_section-cta-2-col-blue.scss * * SCSS optimization pass 2: every rule here is CLASS-ONLY. The * classes are stamped by the CLI migrate command * (COMPONENT_CLASS_STAMPS), so cloned pages keep the styling: * - page-section__cta-2-col-blue--centered CTA variant (both pages) * - dmec-job-* family Find-a-Job card cluster * * Deleted as duplicates of canonical/token layers (Backstop-verify): * - Calendar share-row sizing (covered by _section-breadcrumb-share) * - Find-a-Job body copy + link colors (covered by foundation + * interaction-states tokens) * ================================================================= */ /* --- Calendar: "Upcoming Events" heading section (comp9) ---------- */ body.dmec-redesign-active .page-section__comp9 { padding: 28px 0 48px; } body.dmec-redesign-active .page-section__comp9 > .e-con-inner { max-width: 1200px; padding-inline: 0; } /* Single heading widget in the section — no element-id needed. */ body.dmec-redesign-active .page-section__comp9 .elementor-widget-heading .elementor-heading-title { color: #163867; font-size: 32px; font-weight: 700; line-height: 1.12; letter-spacing: 0; text-transform: uppercase; text-align: center; text-wrap: balance; max-width: 28ch; margin: 0 auto 10px; } /* --- CTA centered variant (Calendar + Find a Job) ------------------ */ body.dmec-redesign-active .page-section__cta-2-col-blue--centered { margin-top: 12px; } body.dmec-redesign-active .page-section__cta-2-col-blue--centered > .elementor-element { min-height: 0; justify-content: center; align-items: center; text-align: center; } body.dmec-redesign-active .page-section__cta-2-col-blue--centered .elementor-heading-title { text-transform: uppercase; text-wrap: balance; max-width: 15ch; margin-inline: auto; } body.dmec-redesign-active .page-section__cta-2-col-blue--centered .elementor-widget-text-editor, body.dmec-redesign-active .page-section__cta-2-col-blue--centered .elementor-widget-text-editor p { font-weight: 700; max-width: 26ch; margin: 0 auto; } body.dmec-redesign-active .page-section__cta-2-col-blue--centered > .elementor-element:last-child .elementor-button-text { text-transform: capitalize; } /* --- Find a Job: card cluster -------------------------------------- */ body.dmec-redesign-active .dmec-job-section > .e-con-inner { padding-top: 0; } body.dmec-redesign-active .dmec-job-card { background: #ffffff; border-radius: 8px; padding: 40px; } body.dmec-redesign-active .dmec-job-card__row { gap: 40px; align-items: stretch; border-radius: 8px; overflow: hidden; } body.dmec-redesign-active .dmec-job-card__title .elementor-heading-title { font-family: "PT Sans", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.32; color: #2b2b2b; } body.dmec-redesign-active .dmec-job-card__copy { max-width: 700px; } body.dmec-redesign-active .dmec-job-card__media-col { align-self: stretch; } body.dmec-redesign-active .dmec-job-card__media { height: 100%; } body.dmec-redesign-active .dmec-job-card__media img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; border-radius: 8px; } /* --- Responsive --------------------------------------------------- */ @media (max-width: 1024px) { body.dmec-redesign-active .page-section__comp9 { padding-inline: 24px; } body.dmec-redesign-active .page-section__cta-2-col-blue--centered > .elementor-element { padding: 48px 40px; } body.dmec-redesign-active .dmec-job-card { padding: 32px; } } @media (max-width: 767px) { body.dmec-redesign-active .page-section__comp9 .elementor-widget-heading .elementor-heading-title { font-size: 26px; } body.dmec-redesign-active .dmec-job-card__row { flex-direction: column; align-items: flex-start; } body.dmec-redesign-active .page-section__cta-2-col-blue--centered > .elementor-element { padding: 40px 24px; } body.dmec-redesign-active .dmec-job-card { padding: 24px; } } /* ================================================================= * Page: Resources section (page-id-527 + subpages) * * Core shared patterns extracted to canonical components: * - Hero banner → 03-components/_section-hero-banner.scss * - Card grid → 03-components/_section-subpage-grid.scss * - CTA band → 03-components/_section-cta-2-col-blue.scss * - Breadcrumb → 03-components/_section-breadcrumb-share.scss * - H2 intro → 03-components/_section-h2-intro.scss * - Latest news → 03-components/_section-latest-news.scss * * Resources BugZap round additions below — rules that address * subpage-specific spacing/layout bugs not covered by existing * canonical components. * ================================================================= */ /* --- FAQ Fridays Archive: tabs padding (BugZap #147) -------------- */ /* Elementor's n-tabs widget ships with 40px top/bottom padding on the tab heading row, creating excessive whitespace between the search bar and the first content. Reduce to a tighter 16px. */ body.dmec-redesign-active .page-section__tabs-tight .e-n-tabs-heading { padding-top: 16px; padding-bottom: 16px; } body.dmec-redesign-active .page-section__tabs-tight .e-n-tabs-content { padding-top: 16px; } /* --- Vendor Directory: whitespace trim (BugZap #155) -------------- */ /* The partner tile grid section ships with 60px bottom padding; trim to 40px for tighter visual rhythm. */ body.dmec-redesign-active .page-section__vendor-grid.page-section__vendor-grid.page-section__vendor-grid { --padding-bottom: 40px; padding-bottom: 40px; } /* --- Title max-width for two-line wrapping (BugZap #159) ---------- */ /* Benchmarking report download H1 should wrap to two lines per the Figma comp. Cap at 720px — matches the narrow-text spec and forces wrapping at standard viewport widths. The page-header pill (.page-header__purple-box) sets `white-space: nowrap`, which the heading inherits — that kept the long title on one line, overflowing the pill (BugZap #159 regression, and the overflow half of #162). Reset to `normal` here so max-width actually wraps the title; balance the line breaks for an even pill. The class is doubled (specificity 0,4,2) to out-rank the pill's own `white-space: nowrap` descendant rule (0,4,1) — a single class (0,3,2) lost the cascade and the title stayed on one line. */ body.dmec-redesign-active .page-section__title-narrow.page-section__title-narrow h1.elementor-heading-title { max-width: 720px; white-space: normal; text-wrap: balance; } /* --- Partner carousel hover (BugZap #143) -------------------------- */ /* Elementor loop-carousel tiles ship with no hover state. Add an elevated shadow matching the custom PHP .dmec-partner-tile hover. Hook the EXISTING `footer-sponsors-section` class, not a stamped `page-section__partner-carousel` class: the carousel section's element (93505ad) is not present in the page's own _elementor_data (it renders from a shared/global template), so a per-page class stamp can never reach it. `footer-sponsors-section` already ships on the section wherever the carousel appears, so the CSS travels with the content. (See _conferences-webinars.scss, which styles the same class.) */ body.dmec-redesign-active .footer-sponsors-section .swiper-slide .e-con { transition: box-shadow 200ms ease; } body.dmec-redesign-active .footer-sponsors-section .swiper-slide .e-con:hover { box-shadow: 0 4px 24px 0 rgba(18, 44, 86, 0.22); } /* ================================================================= * Page: Certification & Training (page-id-531) * * Shared patterns extracted to canonical components: * - Page header → 03-components/_section-page-header.scss * - Card grid → 03-components/_section-subpage-grid.scss * - CTA band → 03-components/_section-cta-2-col-blue.scss * - Latest news → 03-components/_section-latest-news.scss * * Remaining rules below are genuinely page-specific overrides. * ================================================================= */ /* Pricing fee cards (BugZap #73): the white card inside each fees-grid column kept its natural height while the column stretched to the tallest sibling, leaving a dead band of background below the short card. Stretch the card to fill its column so both cards bottom out together. Class-based — `fees-grid` ships in the Elementor data. */ body.dmec-redesign-active .e-con:has(> .fees-grid), body.dmec-redesign-active .fees-grid > .e-con, body.dmec-redesign-active .fees-grid > .e-con-inner > .e-con { height: 100%; } body.dmec-redesign-active.page-id-531 .page-section__ad-space { margin-top: 80px; margin-bottom: 80px; } body.dmec-redesign-active.page-id-531 .page-section__ad-space:has(~ .e-con .page-section__latest-news) { margin-bottom: 80px; } /* Carousel swiper + slide styling: deduplicated into 03-components/_section-latest-news.scss (pass 2). */ /* --- Certification child dark bands -------------------------------- * #134: legacy Elementor dark containers without canonical component * classes left body copy dark gray on navy/teal panels. * * SCSS optimization pass 1: the bands now carry * `page-section__band-dark` (template-wide stamp on the former * data-id list: 67903aae, 0a32bb5, 776b4c2, 128881b, 4289719, * 6025f1b), so the rule is class-only, page-agnostic, and survives * page cloning. * * BugZap #60: the floating LIGHT card inside the CLMS dark band is * stamped `page-section__panel-light` and carved out so it keeps its * production dark-text styling (white + gray panels). */ body.dmec-redesign-active.dmec-redesign-active .page-section__band-dark.page-section__band-dark :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li, .elementor-widget-text-editor span, .elementor-widget-text-editor b, .elementor-widget-text-editor strong, .elementor-widget-text-editor em):not(.page-section__panel-light *) { color: var(--dmec-white); } body.dmec-redesign-active.dmec-redesign-active .page-section__band-dark.page-section__band-dark .elementor-widget-text-editor a:not(.page-section__panel-light *), body.dmec-redesign-active.dmec-redesign-active .page-section__band-dark.page-section__band-dark .elementor-widget-text-editor a:hover:not(.page-section__panel-light *), body.dmec-redesign-active.dmec-redesign-active .page-section__band-dark.page-section__band-dark .elementor-widget-text-editor a:focus:not(.page-section__panel-light *), body.dmec-redesign-active.dmec-redesign-active .page-section__band-dark.page-section__band-dark .elementor-widget-text-editor a:active:not(.page-section__panel-light *) { color: var(--dmec-white); } /* ================================================================= * Page: Community * * Pass 2: class-only. The accent-grid look is the stamped variant * `page-section__subpage-grid--accent` (navy top border, no card * images, 80px bottom rhythm) so cloned pages keep it. The hidden ad * slot uses the stamped `dmec-hide` utility. Carousel styling moved * to 03-components/_section-latest-news.scss. * ================================================================= */ body.dmec-redesign-active .page-section__subpage-grid--accent > .e-con-inner > .e-con { border-top: 8px solid var(--dmec-primary-900); } body.dmec-redesign-active .page-section__subpage-grid--accent > .e-con-inner > .e-con > .elementor-widget-image { display: none; } body.dmec-redesign-active .page-section__subpage-grid--accent { margin-bottom: 80px; } /* ================================================================= * Page: Membership (+ shared ad-space component) * Figma feedback batch: Testing page comments #106–#315 * * Pass 2: class-only. Former page-id-478 [data-id] rules are keyed * to classes stamped by the CLI migrate command. The ad-space slot * (template element 42bb5eb) is stamped `page-section__ad-space` * template-wide; pages that hide it entirely carry `dmec-hide`. * * IMPORTANT: these rules assume `wp dmec redesign * clean-element-settings` has run — without it Elementor's stored * padding/margin custom properties at (0,3,0) compete. * ================================================================= */ /* --- Hero H1 uses the body face on Membership (Figma spec) --------- */ body.dmec-redesign-active .page-section__hero-banner--body-font h1 { font-family: var(--dmec-font-family-body); } /* --- Membership breadcrumb row (former 56083810) ------------------- */ body.dmec-redesign-active .dmec-membership-bc-row.dmec-membership-bc-row { --margin-top: 56px; --margin-bottom: 0px; --padding-top: 0px; --padding-right: 24px; --padding-bottom: 0px; --padding-left: 24px; margin-top: 56px; padding: 0 24px; } /* --- Ad space (template-wide class) -------------------------------- */ /* Default: 80px bottom margin provides the gap to the next section. When followed by Latest News (which brings its own 80px padding-top) the margin is zeroed; a fully empty slot before Latest News hides. */ body.dmec-redesign-active .page-section__ad-space { --margin-top: 0px; --margin-bottom: 80px; --min-height: 0px; --padding-top: 0px; --padding-bottom: 0px; margin-top: 0; margin-bottom: 80px; min-height: 0; padding: 0; } body.dmec-redesign-active .page-section__ad-space:has(~ .e-con .dmec-latest-news), body.dmec-redesign-active .page-section__ad-space:has(~ .e-con .page-section__latest-news) { margin-bottom: 0; } body.dmec-redesign-active .page-section__ad-space:not(:has(> .e-con-inner > *)):has(~ .e-con .dmec-latest-news), body.dmec-redesign-active .page-section__ad-space:not(:has(> .e-con-inner > *)):has(~ .e-con .page-section__latest-news), body.dmec-redesign-active .page-section__ad-space:has(> .e-con-inner > .e-con-full.e-child:only-child:not(:has(*))):has(~ .e-con .dmec-latest-news), body.dmec-redesign-active .page-section__ad-space:has(> .e-con-inner > .e-con-full.e-child:only-child:not(:has(*))):has(~ .e-con .page-section__latest-news) { display: none; } /* --- Membership CTA sits 80px below the preceding block ------------ */ body.dmec-redesign-active.page-id-478 .page-section__cta-2-col-blue { --margin-top: 80px; --margin-block-start: 80px; margin-top: 80px; } /* --- Latest News wrapper (former 2862fb54) ------------------------- */ body.dmec-redesign-active .dmec-news-wrapper.dmec-news-wrapper { --margin-top: 80px; --margin-block-start: 80px; --margin-bottom: 0px; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; margin: 80px 0 0 !important; /* grandfathered */ padding: 0; } body.dmec-redesign-active .dmec-news-wrapper .dmec-latest-news { margin-top: 0; } /* ================================================================= * Page: DMEC & State Policy Resource Hub * * Pass 2: class-only. Former page-id-15890 [data-id] rules are keyed * to classes stamped by the CLI migrate command: * dmec-card-pair / __card / __head equal-height navy-band cards * dmec-events-flush / -collapse Upcoming Events tightening * dmec-gap-top-40 / dmec-gap-bottom-80 / dmec-hide utilities * !important usage below is grandfathered from the original rules * (Elementor --height consumption can't be out-specified). * ================================================================= */ /* --- Equal-height card pair (Strategic Priorities / DMECommunities) */ body.dmec-redesign-active .dmec-card-pair, body.dmec-redesign-active .dmec-card-pair > .e-con-inner { align-items: stretch; } body.dmec-redesign-active .dmec-card-pair > .e-con-inner > .e-con { display: flex; flex-direction: column; } body.dmec-redesign-active .dmec-card-pair > .e-con { display: flex; flex-direction: column; height: 100%; } body.dmec-redesign-active .dmec-card-pair__card { flex: 1; } body.dmec-redesign-active .dmec-card-pair__card > .e-con-inner { flex: 1; display: flex; flex-direction: column; } body.dmec-redesign-active .dmec-card-pair__card > .e-con-inner > .e-con { flex: 1; } @media (min-width: 1025px) { body.dmec-redesign-active .dmec-card-pair__head { min-height: 152px; } } /* --- Upcoming Events tightening ----------------------------------- */ body.dmec-redesign-active .dmec-events-flush, body.dmec-redesign-active .dmec-events-flush > .e-con-inner { padding: 0 !important; gap: 0 !important; } body.dmec-redesign-active .dmec-events-collapse { --min-height: 0px !important; --height: auto !important; --container-widget-flex-grow: 0; min-height: 0 !important; height: auto !important; flex-grow: 0 !important; flex-basis: auto !important; padding: 0 !important; } body.dmec-redesign-active .dmec-events-collapse > .e-con-inner { min-height: 0 !important; padding-bottom: 0 !important; } /* ================================================================= * PR #177 verified broad Figma spacing fixes. * * These are intentionally page/data-id scoped to the verified failures * from the deep broad pass, avoiding broader Elementor rhythm changes. * ================================================================= */ /* BugZap #64: utility seam gap — stamped on blocks that must keep 80px of air before the next full-bleed band. */ body.dmec-redesign-active .dmec-gap-bottom-80.dmec-gap-bottom-80.dmec-gap-bottom-80 { --margin-bottom: 80px; --margin-block-end: 80px; margin-bottom: 80px; } /* Pass 2 utility set (stamped by the migrate command). */ body.dmec-redesign-active .dmec-gap-top-40.dmec-gap-top-40.dmec-gap-top-40 { --margin-top: 40px; --margin-block-start: 40px; margin-top: 40px; } body.dmec-redesign-active .dmec-gap-top-80.dmec-gap-top-80.dmec-gap-top-80 { --margin-top: 80px; --margin-block-start: 80px; margin-top: 80px; } /* Round-3 #84/#109: center stamped copy. */ body.dmec-redesign-active .dmec-text-center.dmec-text-center.dmec-text-center, body.dmec-redesign-active .dmec-text-center.dmec-text-center.dmec-text-center :is(h1, h2, h3, h4, p, .elementor-heading-title) { text-align: center; } /* Round-3 #112/#113: softened lede copy — Neutral/warm/700, one step lighter than the warm-800 body default. Flagged: if the designer wants lighter still, this is the single value to change. */ body.dmec-redesign-active .dmec-text-soft.dmec-text-soft.dmec-text-soft, body.dmec-redesign-active .dmec-text-soft.dmec-text-soft.dmec-text-soft :is(p, span, li) { color: var(--dmec-neutral-warm-700); } body.dmec-redesign-active .dmec-hide.dmec-hide { display: none !important; /* grandfathered — replaces per-page display:none !important rules */ min-height: 0; margin: 0; padding: 0; } /* BugZap #36: National Partners first tier band sits 80px below the intro copy (was a stray 107px Elementor margin). Class stamped by the CLI migrate command; chained for (0,4,1) over Elementor's per-element margin. */ body.dmec-redesign-active .page-section__partner-tiers.page-section__partner-tiers.page-section__partner-tiers { /* Spec is 80px between the visible TEXTS (intro copy -> tier heading), per Matt. The intro section carries ~40px of trailing inner spacing and the tier band ~40px of leading inner spacing, so the section margin contributes 0 — measured text-to-text on staging lands at exactly 80px. */ --margin-top: 0px; --margin-block-start: 0px; margin-top: 0; } /* #180: About top-level card grid needs the standard 80px rhythm before Latest News after the hidden ad slot. */ body.dmec-redesign-active.page-id-107 .page-section__subpage-grid { margin-bottom: 80px; } /* #144, #290, #291, #338: roster grids to partners/footer should be 80px. */ body.dmec-redesign-active:is(.page-id-1197, .page-id-1199, .page-id-321) [data-id="6f310bc"] { padding-bottom: 20px; } body.dmec-redesign-active.page-id-1199 [data-id="6f310bc"] { padding-bottom: 13px; } /* #290: EAB roster grid to partners should be 80px. */ body.dmec-redesign-active.page-id-321 [data-id="5b85f9b"] { margin-bottom: -40px; } /* #292/#293: partnership intro body copy to card grid should be 80px. */ body.dmec-redesign-active.page-id-1212 .page-section__subpage-grid { margin-top: 80px; margin-bottom: 80px; } body.dmec-redesign-active.page-id-1212 .page-section__subpage-grid > .e-con-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; align-items: stretch; } body.dmec-redesign-active.page-id-1212 .page-section__subpage-grid > .e-con-inner > .e-con { align-self: stretch; display: flex; flex-direction: column; min-width: 0; height: 100%; } @media (min-width: 1101px) { body.dmec-redesign-active.page-id-1212 .page-section__subpage-grid > .e-con-inner > .e-con > .subpage-grid-card-bottom { flex: 1 1 auto; } } @media (max-width: 1100px) { body.dmec-redesign-active.page-id-1212 .page-section__subpage-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { body.dmec-redesign-active.page-id-1212 .page-section__subpage-grid > .e-con-inner { grid-template-columns: 1fr; } } /* #292: collapse the empty spacer before Latest News. */ body.dmec-redesign-active.page-id-1212 [data-id="5b2922a"] { display: none; min-height: 0; } /* #322/#323: CLMS hero/top content copy width and CTA border. */ body.dmec-redesign-active.page-id-18844 [data-id="446ca75a"] :where(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-button) { max-width: 700px; margin-right: auto; margin-left: auto; } body.dmec-redesign-active.page-id-18844 [data-id="446ca75a"] .elementor-button { border: 1px solid var(--dmec-white); } body.dmec-redesign-active.page-id-18844 [data-id=a116703] { max-width: 700px; margin-right: auto; margin-left: auto; } /* #325: FMLA/ADA feedback block should render as the Figma teal testimonial component. */ body.dmec-redesign-active.page-id-12962 .page-section__feedback { background-color: var(--dmec-secondary-bg-800); color: var(--dmec-white); border-radius: 4px; } body.dmec-redesign-active.page-id-12962 .page-section__feedback :where(h3, p, span, b, .elementor-icon) { color: var(--dmec-white); } body.dmec-redesign-active.page-id-12962 .page-section__feedback > .e-con-inner { gap: 24px; } body.dmec-redesign-active.page-id-12962 [data-id="97eeb6e"], body.dmec-redesign-active.page-id-12962 [data-id=a90b440] { background-color: transparent; } body.dmec-redesign-active.page-id-12962 [data-id=a90b440] { display: block; max-width: 760px; } body.dmec-redesign-active.page-id-12962 [data-id=a90b440] > .e-con { padding: 0; border: 0; } body.dmec-redesign-active.page-id-12962 [data-id=a90b440] > .e-con:not(:first-child) { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.45); } /* #296-#299 / BugZap #43 #46 #50: the seam before Partners on the partnership subpages is VISUAL-EDGE math, not box math. The old negative margins (-60/-117/-125/-40) compensated for junk that is now removed at the source: widget-less ghost containers collapse in _foundation.scss, and `dmec-seam-flush` (stamped by the migrate command on the four tab sections) zeroes the transparent trailing padding. Partners' own 80px padding-top then IS the 80px visible gap from the tab panel's edge to the heading text. */ body.dmec-redesign-active .dmec-seam-flush.dmec-seam-flush.dmec-seam-flush { --padding-bottom: 0px; --margin-bottom: 0px; --margin-block-end: 0px; padding-bottom: 0; margin-bottom: 0; } body.dmec-redesign-active .dmec-seam-flush.dmec-seam-flush > .e-con-inner { padding-bottom: 0; } /* The transparent wrapper chain inside the section carries its own trailing space (10px paddings, a 40px Elementor margin on the tab wrapper). Zero pb/mb on the wrapper levels only — tab/panel components hold their visible padding on the e-n-tabs content, which sits deeper than these two wrapper levels. Inter-child rhythm is supplied by the container gap, not margins. */ body.dmec-redesign-active .dmec-seam-flush.dmec-seam-flush > .e-con-inner > .e-con, body.dmec-redesign-active .dmec-seam-flush.dmec-seam-flush > .e-con, body.dmec-redesign-active .dmec-seam-flush.dmec-seam-flush > .e-con-inner > .e-con > .e-con, body.dmec-redesign-active .dmec-seam-flush.dmec-seam-flush > .e-con > .e-con, body.dmec-redesign-active .dmec-seam-flush.dmec-seam-flush > .e-con-inner > .e-con > .e-con-inner { --padding-bottom: 0px; --margin-bottom: 0px; --margin-block-end: 0px; padding-bottom: 0; margin-bottom: 0; } /* #343: conferences top-page breadcrumb to intro heading should be 32px. */ body.dmec-redesign-active.page-id-523 .page-section__h2-intro { padding-top: 32px !important; } /* #336: resource detail intro to tabbed/card resources should be 80px, and #180 keeps the lower transition at the verified 21px value. */ body.dmec-redesign-active.page-id-2253 [data-id="0470b1d"] { margin-top: 154px; margin-bottom: 21px; } /* #339/#340: @Work lower content/listing section uses the standard gray background and 80px block-edge rhythm before the CTA band. */ body.dmec-redesign-active.page-id-774 [data-id="7be9c721"] { background: var(--dmec-neutral-cold-100); margin-bottom: 234px; } /* #264-#268, #337, #358, #372: mapped "no white space" lower transitions mean adjacent lower blocks touch with 0px outside gap. */ body.dmec-redesign-active.page-id-1511 [data-id="133918c6"] { margin-bottom: -3px; } /* Round-3 #102: the Webinars page-id-1511 pill override (-64px) is gone — the pill follows the global centered -44px straddle like every other page. */ body.dmec-redesign-active.page-id-267 [data-id="7caf9561"], body.dmec-redesign-active.page-id-6070 [data-id=cd9002d] { margin-bottom: 0; } /* #365: benefits content to Become a Member CTA should be 80px; #180 removes the duplicate selector and keeps the later verified value. */ body.dmec-redesign-active.page-id-2118 [data-id="32db2978"] { margin-bottom: 21px; } /* #180: About three-column teal CTA cards should render flush with no internal white gutters and no gap before the Partners region. */ body.dmec-redesign-active:is(.page-id-1213, .page-id-2347) .page-section__cta-3-col-teal-v2, body.dmec-redesign-active.page-id-267 [data-id="7caf9561"] { --margin-bottom: 0px; --margin-block-end: 0px; gap: 0; margin-bottom: 0; padding: 0; } body.dmec-redesign-active:is(.page-id-1213, .page-id-2347) .page-section__cta-3-col-teal-v2 > .e-con, body.dmec-redesign-active.page-id-267 [data-id="7caf9561"] > .e-con { flex: 1 1 0; margin: 0; } body.dmec-redesign-active:is(.page-id-1213, .page-id-2347) .page-section__cta-3-col-teal-v2 > .e-con > .e-con, body.dmec-redesign-active.page-id-267 [data-id="7caf9561"] > .e-con > .e-con { padding: 48px 40px; } /* About partner/tab content pages use 80px content rhythm between the partners band and footer, while other About pages keep the 0px seam. */ body.dmec-redesign-active:is(.page-id-1212, .page-id-16812, .page-id-16817, .page-id-16822, .page-id-16827, .page-id-16991) .dmec-partners { /* BugZap #43/#46 (round-2): the partners band sat flush (0px seam) against the preceding white content panel — Matt's pin shows the colored boxes touching. The band's base margin-top is 0 (dmec-partners.css); add the 80px component gap above it. (Its internal padding-top handles the heading inset.) */ margin-top: 80px; padding-bottom: 20px; } /* BugZap #167 (benchmarking-whitepaper, page 15631): the partners band sits only ~20px below the "Download the Report" panel (its base margin-top is 0). Unlike the About pages above (which start from a 0px seam), this page already carries a 20px trailing gap, so a 60px top margin lands the canonical 80px between the panel and the partners band. */ body.dmec-redesign-active.page-id-15631 .dmec-partners { margin-top: 60px; } /* #180 follow-up: remove the residual white strip before the custom footer on About pages where Partners is the final colored section. */ body.dmec-redesign-active:is(.page-id-1197, .page-id-321, .page-id-1199, .page-id-2347, .page-id-267) .dmec-partners { margin-bottom: 0; } body.dmec-redesign-active:is(.page-id-1197, .page-id-321, .page-id-1199, .page-id-2347, .page-id-267) .dmec-partners ~ #dmec-footer { margin-top: 0; } /* BugZap open batch 2026-06-04: tighten remaining measured staging spacing/card issues without broad Elementor rhythm changes. */ /* #1: State Policy card grid should hand off to Latest News with 80px, not the staged 50px inner padding. */ body.dmec-redesign-active.page-id-15890 .page-section__subpage-grid > .e-con-inner { padding-bottom: 80px; } /* BugZap #115 (emerging-leaders, page 21893) — REDO (round-3). The earlier fix targeted the KEY DATES -> Winner gap, which wasn't the issue (and over-tightened it). Matt's actual ask: 40px between the white winner content and the bottom of the grey wrapper (1829f163, which had 0 bottom padding so the content sat flush), then 80px before Our National Partners (the band sat flush at 0px). */ body.dmec-redesign-active.page-id-21893 .elementor-element-1829f163 { /* This is an `e-con-full` flex element whose `padding-block-end` does NOT read the `--padding-block-end` var (it computes 0 regardless), so the var approach is a no-op here. Force the physical longhand with !important to beat Elementor's generated padding and render 40px of grey below the white winner panel. The 80px to the partners band is preserved (this is internal padding, so the band's margin-top still measures from the new grey bottom). */ padding-bottom: 40px !important; } body.dmec-redesign-active.page-id-21893 .dmec-partners { margin-top: 80px; } /* BugZap #58 (Atlanta Life password page, page 3171): the password form -> partners band measured 132px (live-toggle: 80px section inner padding-bottom on 65dcad43 + 32px form trailing + a 20px EMPTY spacer 740816b3). Drop the empty spacer and trim the section's bottom padding so the field sits the canonical 80px above the partners band. */ body.dmec-redesign-active.page-id-3171 .elementor-element-740816b3 { display: none; } body.dmec-redesign-active.page-id-3171 .elementor-element-65dcad43 > .e-con-inner { padding-bottom: 48px; } /* BugZap #161 (AbsenceExemplar dashboards, page 2191): last content -> partners band measured 200px (live-toggle: 80px gray-section inner padding-bottom + ~60px column trailing + an empty 60px spacer 6067f236). Drop the empty spacer and trim the gray section's inner bottom padding so the content sits the canonical 80px above the partners band. */ body.dmec-redesign-active.page-id-2191 .elementor-element-6067f236 { display: none; } body.dmec-redesign-active.page-id-2191 .elementor-element-e832c69 > .e-con-inner { padding-bottom: 20px; } /* BugZap #170 (re-bounce of #161): after the spacer removal above, the gray inset panel (.elementor-element-a5bf242) ended only 20px above the partners band — too tight. Like page 15631, the panel already carries a 20px trailing gap, so a 60px top margin on the partners band lands the canonical 80px between the gray panel and the partners section. */ body.dmec-redesign-active.page-id-2191 .dmec-partners { margin-top: 60px; } /* #2 REMOVED (BugZap #24/#67/#68): the former -64px straddle for Certification descendants over-dropped the pill — centering an 88px pill on the band edge is -44px, not -64px, which left pill->breadcrumb at 40px instead of the canonical 60px. The canonical -44px straddle in _section-page-header now governs these pages (matches Board of Directors and the Figma spec: blue->row 104, pill overhang 44, pill->row 60). */ /* #3: The LMS SCORM page's unclassed breadcrumb + share sibling rows (797bcdb0 / 4dad2747) are now driven by the canonical `.breadcrumb-container` / `.share-button-container` component (_section-breadcrumb-share + _section-page-header), applied via COMPONENT_CLASS_STAMPS (BugZap #67/#68). The former page-id/data-id overrides here forced a wrong 64px gap and used the forbidden page-id/data-id selector pattern — removed. */ body.dmec-redesign-active.page-id-2321 [data-id=a2161d8] { margin-bottom: 0; } /* #5-#6: empty Elementor spacer rows after teal CTA bands should not create white strips before the partners band. */ body.dmec-redesign-active.page-id-2321 [data-id="022bab5"], body.dmec-redesign-active.page-id-2315 [data-id=f47ceb8], body.dmec-redesign-active.page-id-2315 [data-id=f4a2226] { display: none; min-height: 0; height: 0; } /* #8-#9: Advisory group people-grid image widgets should crop to the card width instead of exposing the tall white portrait canvas. */ body.dmec-redesign-active:is(.page-id-1795, .page-id-1797) .person-grid-item .elementor-widget-image, body.dmec-redesign-active:is(.page-id-1795, .page-id-1797) .person-grid-item .elementor-widget-image .elementor-widget-container { aspect-ratio: 1/1; overflow: hidden; width: 100%; } body.dmec-redesign-active:is(.page-id-1795, .page-id-1797) .person-grid-item .elementor-widget-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } body.dmec-redesign-active.page-id-1795 [data-id="8addbda"] { display: none; } body.dmec-redesign-active:is(.page-id-1795, .page-id-1797) [data-id="6a743521"].page-section__cta-3-col-teal-v2 { margin-top: 80px; padding: 0; gap: 0; } body.dmec-redesign-active .page-section__cta-3-col-teal-v2 > .e-con-full { padding-bottom: 50px; } body.dmec-redesign-active.page-id-1795 [data-id=fcdf868] > .e-con-inner, body.dmec-redesign-active.page-id-1797 [data-id=f51c9fb] > .e-con-inner { padding-bottom: 0; } /* #10: @Work lower resources region should leave only the standard 80px rhythm before the following section. */ body.dmec-redesign-active.page-id-774 [data-id="7be9c721"] { margin-bottom: 80px; } /* #11: AbsenceAuthority disclaimer is on white, so add the requested 80px before the gray partners band. */ body.dmec-redesign-active.page-id-11904 [data-id="64da0e4"] { margin-bottom: 80px; } /* #12: State and Local Leave Law Map spacer before partners should be 80px. */ body.dmec-redesign-active.page-id-2229 [data-id=d34d3f4] { min-height: 80px; } /* BugZap round 2026-06-05: resource/community component follow-ups. */ body.dmec-redesign-active .page-header__blue-section { color: var(--dmec-white); } body.dmec-redesign-active .page-header__blue-section :where(h1, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor p) { color: var(--dmec-white); } body.dmec-redesign-active .page-header__blue-section .elementor-button { border: 1px solid var(--dmec-white); } body.dmec-redesign-active:is(.page-id-570, .page-id-576) .page-section__cta-2-col-blue { margin-top: 80px; } body.dmec-redesign-active .page-header__purple-box-outer-container, body.dmec-redesign-active .page-header__purple-box-outer-container > .e-con-boxed > .e-con-inner { padding-top: 0; padding-bottom: 0; } body.dmec-redesign-active.page-id-2192 [data-id=ebac2ce] { --padding-top: 8px !important; padding-top: 8px !important; padding-bottom: 50px; } body.dmec-redesign-active.page-id-2253 [data-id="3e474241"] { padding-bottom: 0; } body.dmec-redesign-active.page-id-2191 [data-id=e832c69] { margin-bottom: 0; } body.dmec-redesign-active.page-id-2229 [data-id="2765394"] { min-height: 80px; } body.dmec-redesign-active.page-id-2253 [data-id="0470b1d"] { margin-top: 40px; } body.dmec-redesign-active.page-id-21853 .page-section__metrics, body.dmec-redesign-active.page-id-21853 .page-section__metrics :where(h1, h2, h3, h4, h5, h6, p, .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor p) { color: var(--dmec-white); } /* (Removed round-4) page-id-18844 band-dark heading duplicate: it whitened headings WITHOUT the panel-light carve-out and outranked the canonical carved rule in _certification-training.scss, painting "Who Should Participate" white on the white CLMS card. The canonical class-only rule fully covers the band. */ body.dmec-redesign-active.page-id-18844 .page-section__band-dark [data-id="792a9cb"], body.dmec-redesign-active.page-id-18844 .page-section__band-dark [data-id=c9a1194], body.dmec-redesign-active.page-id-18844 .page-section__band-dark [data-id="792a9cb"] :where(h1, h2, h3, h4, h5, h6, p, li, .elementor-heading-title, .elementor-widget-text-editor), body.dmec-redesign-active.page-id-18844 .page-section__band-dark [data-id=c9a1194] :where(h1, h2, h3, h4, h5, h6, p, li, .elementor-heading-title, .elementor-widget-text-editor) { color: var(--dmec-color-text) !important; } body.dmec-redesign-active.parent-pageid-23342 [data-id="1b2ff7d0"] { width: 100%; max-width: 1200px; margin-right: auto; margin-left: auto; } body.dmec-redesign-active.parent-pageid-23342 [data-id="1b2ff7d0"] img { display: block; width: 100%; height: 10px; /* BugZap #106: blue rule between subnav and workshop header is 10px on live (was 16px). */ object-fit: cover; object-position: center; } /* Round-4 #96: agenda day-content wrappers ship `40px 100px` padding; spec is 40px all around. Utility stamped template-wide on the four day wrappers (578d78c5 / 6333914 / 7b53418 / 46aec619). Triple chain + double body = (0,5,0) over the per-element (0,4,0). */ body.dmec-redesign-active.dmec-redesign-active .dmec-pad-40.dmec-pad-40.dmec-pad-40 { padding: 40px; } /* Resources BugZap #154: map section 80px block-axis padding. */ body.dmec-redesign-active.dmec-redesign-active .dmec-pad-80.dmec-pad-80.dmec-pad-80 { padding-block: 80px; } /* Round-4 #80 (final form): the EAC "Current Members" photo row (c7ff101) renders from template content, not the page's own Elementor data, so it can't be stamped directly. Anchor on the stampable section (dmec-people-grid on fcdf868@1795) and open the 40px gap structurally: the row that follows the heading widget. */ body.dmec-redesign-active .dmec-people-grid .elementor-widget-heading + .e-con { margin-top: 40px; }
at 400, shifting breadcrumb links from bold to normal on hover. Specificity here: (1,2,2) — beats the foundation rule. */ font-weight: 700; } body.dmec-redesign-active #breadcrumbs a:focus-visible { outline: 4px solid var(--dmec-focus-ring); outline-offset: 2px; border-radius: 2px; } body.dmec-redesign-active #breadcrumbs strong { font-weight: 700; color: var(--dmec-neutral-warm-900); } /* ================================================================= * Component: Breadcrumb + Share row (single-line treatment) * * Article pages (resources/work-magazine/* etc.) ship from Elementor as * two SIBLING full-bleed rows directly under the page-header band: * * .elementor-element-11033d61 breadcrumb row (h ≈ 38) * .elementor-element-60e48599 share-buttons row (h ≈ 64) * * Stacked vertically by default — breadcrumb on its own line, share * buttons on the next line. Per Figma the canonical treatment is a * SINGLE row with breadcrumbs left-aligned + share buttons right- * aligned, both vertically centered, 120 px L/R gutters, sitting 60 px * below the magenta hero pill. * * Implementation strategy (CSS-only — no DOM restructure): * 1. Stretch the breadcrumb row's inner to 64 px (matches share row * height) and `align-items: center` so the breadcrumb anchors to * vertical mid. * 2. Pull the share row UP by -64 px via `margin-top` so it overlaps * the breadcrumb row's vertical span. Subsequent siblings shift * up by 38 px (= old breadcrumb-row height that's now absorbed), * which is desired — visual gap to the next content block stays * consistent because the breadcrumb-row height is now donated to * the merged row. * 3. Justify the share row's inner to flex-end so icons sit right. * 4. Use the same 1200 px max-width centered layout as the rest of * the page content (= 120 px gutters at Figma's 1440 px frame). * 5. 60 px gap above by raising the breadcrumb row's margin-top from * its current 0 to 40 (current pill→bcRow gap is 20 px; +40 → 60). * 6. Share-button border narrowing handled in `_social-button.scss` * (already 1 px solid Neutral/warm/300). The "perceived 2 px" in * Matt's screenshot was the visual sum of two adjacent borders * across the inter-icon gap; merging icon borders via the same * `-1 px margin-left` trick used for `.share-button-container` * collapses adjacent borders to a single hairline. * ================================================================= */ /* (1)+(2)+(4)+(5) — row-level layout fix */ body.dmec-redesign-active .elementor-element.elementor-element-11033d61 { margin-block-start: 40px; /* (5) → +40 = 60 px from pill */ min-height: 64px; /* (1) → match share row */ } body.dmec-redesign-active .elementor-element.elementor-element-60e48599 { margin-block-start: -64px; /* (2) → overlap breadcrumb row */ position: relative; z-index: 2; pointer-events: none; /* let breadcrumb beneath stay clickable */ } /* Re-enable pointer events on the share buttons themselves (the row * itself is pass-through so the breadcrumb anchors below remain * clickable in their visual half of the row). */ body.dmec-redesign-active .elementor-element.elementor-element-60e48599 .elementor-widget-share-buttons { pointer-events: auto; } /* (1)+(3)+(4) — inner alignment + gutters */ body.dmec-redesign-active .elementor-element.elementor-element-11033d61 > .e-con-inner, body.dmec-redesign-active .elementor-element.elementor-element-60e48599 > .e-con-inner { align-items: center; min-height: 64px; max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; } /* (3) — anchor share buttons to the right. * * Elementor sets `--flex-direction: row-reverse` on this row's e-con-inner * (configured in the page's Elementor data). With `flex-direction: * row-reverse`, the "end" of the main axis is the LEFT — so a naive * `justify-content: flex-end` ends up at the left. Force `flex-direction: * row` to get a normal axis, then flex-end aligns the share widget to * the right. */ body.dmec-redesign-active .elementor-element.elementor-element-60e48599 > .e-con-inner { flex-direction: row; justify-content: flex-end; } /* (6) — strip the grid-item's redundant 1-px border. * * Elementor renders each share button inside a `.elementor-grid-item` * box which itself ships a `1px solid #c7c7c7` border (in addition to * the button's own `1px solid Neutral/warm/300` border from * `_social-button.scss`). Two stacked 1-px borders read visually as * 2 px of gray — the "double border" Matt observed. * * Zero out the grid-item border so only the button's canonical 1-px * border renders. Then collapse adjacent button borders so the * inter-icon dividing line is also a single 1-px hairline (same * negative-margin trick `.share-button-container` uses for the * Calendar of Events share row). */ body.dmec-redesign-active .elementor-widget-share-buttons .elementor-grid-item { border: 0 !important; } body.dmec-redesign-active .elementor-widget-share-buttons .elementor-grid-item + .elementor-grid-item { margin-left: -1px !important; } /* ================================================================= * Generic inner-page breadcrumb + share treatment * * The rules above target article-page-specific Elementor data-ids. * Many other inner pages (Membership children, Certification, etc.) * use the same pattern via semantic classes `.breadcrumb-container` * and `.share-button-container`. These rules provide the canonical * 1200 px max-width centered layout, single-row collapse, and * vertical centering for ANY page carrying those classes. * * The element-specific rules above still win on article pages thanks * to their higher specificity (element-ID selector), so there is no * conflict. * ================================================================= */ /* --- Breadcrumb row: 1200 px centered, consistent height ---------- */ body.dmec-redesign-active .breadcrumb-container { margin-block-start: 40px; min-height: 40px; } /* Specificity must beat `body.dmec-redesign-active .e-con.e-con-boxed > .e-con-inner` (0,3,1) which also sets max-width. Chaining `.e-con-boxed` gives us (0,3,1) and we win by source order (this file loads after the base rule). */ body.dmec-redesign-active .breadcrumb-container.e-con-boxed > .e-con-inner { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 40px; max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; } /* Figma breadcrumbs/section (817:21138): the merged row hugs its content — social buttons are 46px (12px padding + 20px icon + 1px borders), breadcrumbs 28px, both center-aligned, row top 104px below the band. 48px keeps the text within ±1px of the comp; the old 60-64px min-heights were adding ~15px of phantom air that read as the breadcrumbs sitting too low (round-2 QA). */ body.dmec-redesign-active .breadcrumb-container:has(+ .share-button-container) { min-height: 48px; } body.dmec-redesign-active .breadcrumb-container.e-con-boxed:has(+ .share-button-container) > .e-con-inner { min-height: 48px; } /* --- Breadcrumb-row child fixes ---------------------------------- */ /* Some pages (e.g. page-20946 AbsenceExemplar) nest a spacer widget and the breadcrumb widget inside the same `.breadcrumb-container`. The spacer gets `flex: 0 0 auto` at 1200 px from Elementor, stealing the full row and leaving the breadcrumb at 0 px (text renders vertically). Hide the spacer — it's decorative — and let the breadcrumb fill the row. */ body.dmec-redesign-active .breadcrumb-container .elementor-widget-spacer { display: none; } body.dmec-redesign-active .breadcrumb-container .elementor-widget-breadcrumbs { flex: 1 1 100%; width: 100%; min-width: 0; } /* Normal landing-page handoff: breadcrumb row to first content section. */ body.dmec-redesign-active .breadcrumb-container + .e-con:not(.share-button-container) { --padding-top: 32px; padding-top: 32px; } /* Merged-row handoff: when a share row follows the breadcrumb (single merged row), the content sits TWO siblings after the breadcrumb- container, so the rule above (which targets the breadcrumb's immediate sibling — here the share row) misses it. Give the content after the share row the same 32px breadcrumb→content gap. BugZap #67/#68. */ body.dmec-redesign-active .breadcrumb-container + .share-button-container + .e-con { --padding-top: 32px; padding-top: 32px; } /* --- Share-button row: pull up into breadcrumb row, right-align -- */ body.dmec-redesign-active .share-button-container { margin-block-start: -48px; position: relative; z-index: 2; pointer-events: none; } body.dmec-redesign-active .share-button-container.e-con-boxed > .e-con-inner { align-items: center; min-height: 48px; max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; flex-direction: row; justify-content: flex-end; } body.dmec-redesign-active .share-button-container .elementor-widget-shortcode, body.dmec-redesign-active .share-button-container .elementor-widget-share-buttons { pointer-events: auto; } /* ================================================================= * Component: Section intro H2 (canonical) * * The "Read the latest news…", "Explore by topic", "Find what fits" * style H2 lead-ins on subpages all ship from the same Elementor * heading widget template — Elementor data-id `f217016` — and are * meant to render with the canonical Headline 02 token (PT Sans Bold * 32, Primary/700). * * Each per-page file (resources, certification-training, community) * carried its own copy of this rule scoped by `page-id-N` even though * the rule body was byte-identical. Move it here so the data-id alone * is the discriminator — Elementor data-ids are unique to the * template instance and appear with the same value on every host page * that uses this template, so the page-id constraint was redundant. * ================================================================= */ /* SCSS optimization pass 1: class-only selectors. The class is stamped template-wide wherever element id `f217016` appears (TEMPLATE_CLASS_STAMPS), so clones inherit it. */ /* --- Section spacing ------------------------------------------------ */ body.dmec-redesign-active .page-section__h2-intro { padding: 40px 0; } /* Elementor injects varying inline padding on the inner container (pb 40–60 px depending on the page instance). Zero it out so only the section's 40 px padding applies. Gap between children pinned to Figma's 16 px (title → text gap per comment #364). */ body.dmec-redesign-active .page-section__h2-intro > .e-con-inner { padding: 0; gap: 16px; } /* --- Heading typography --------------------------------------------- */ body.dmec-redesign-active.dmec-redesign-active .page-section__h2-intro.page-section__h2-intro .elementor-heading-title { font-family: var(--dmec-font-family-body); font-size: var(--dmec-h02-size); line-height: var(--dmec-h02-lh); font-weight: 700; color: var(--dmec-color-heading); /* BugZap #30: this title style is ALL CAPS everywhere. */ text-transform: uppercase; } /* --- Body text — non-clickable text must be Neutral, not blue ------- */ body.dmec-redesign-active.dmec-redesign-active .page-section__h2-intro.page-section__h2-intro .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__h2-intro.page-section__h2-intro .elementor-widget-text-editor p { color: var(--dmec-color-text); } /* ================================================================= * Component: Subpage 3-card grid (canonical) * * The card grid ("explore by topic" etc.) used on /resources/, * /certification-and-training/, /community/, About DMEC, State * Policy, DMECommunities, and any page cloned from the same * template. * * SCSS optimization pass 1: selectors are CLASS-ONLY. The * `page-section__subpage-grid` class is stamped by the CLI migrate * command — explicitly per page (COMPONENT_CLASS_STAMPS) and * template-wide wherever element id `300e26d` appears * (TEMPLATE_CLASS_STAMPS) — so cloned pages inherit the styling with * no [data-id] coupling. Run `wp dmec migrate-canonical` before * shipping a build of this file. * * Card spec: Figma card/basic (174:5975) — 24px top/side padding, * 40px bottom, Headline 04 title in Primary/700, 32px/12% shadow. * Hover: Figma navy inversion (Primary/900 bg, white text). * * Shell/body/hover background rules are double-chained — Elementor * stores a stale #F0F0F0 per-element background on several pages' * cards at (0,4,0), which beat the single-chain rules (seen on * /about-dmec/ during the Figma re-verify). * ================================================================= */ /* --- Section spacing ------------------------------------------------ */ body.dmec-redesign-active .page-section__subpage-grid { margin-top: 40px; margin-bottom: 0; } /* --- Grid layout --------------------------------------------------- Two host structures exist in content: A) boxed section: the stamped element wraps an .e-con-inner and cards are the inner's children B) flat e-grid (e-con-full): the stamped element IS the grid and cards are its direct children (State Policy 8def9f4, DMECommunities/Partnership 478ec9e3) The stamp must sit on the element whose CHILDREN are the cards — never on an outer wrapper (stamping 12e145e flattened the real grid inside it; regression caught on /dmec-state-policy/). */ body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner, body.dmec-redesign-active .page-section__subpage-grid.e-con-full { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 40px; max-width: 1200px; padding-inline: 0; } /* Card shell — vertical flex column, square corners, shadow. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con { display: flex; flex-direction: column; min-width: 0; background: var(--dmec-white); border-radius: 0; /* position + overflow isolate each card's stretched-link overlay so hover zones never bleed across the grid (formerly a page-id-15890 rule — generic benefit). */ position: relative; overflow: hidden; /* Zero out Elementor's default container padding so card images go full-bleed edge-to-edge (BugZap #139). The text area (.subpage-grid-card-bottom) carries its own 24/24/40 padding. */ padding: 0; /* Figma card/basic default shadow: 32px blur at 12%. */ box-shadow: 0 0 32px 0 rgba(18, 44, 86, 0.12); transition: background-color 200ms ease, box-shadow 200ms ease; } /* Card body container. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom { display: flex; flex: 1 1 auto; flex-direction: column; gap: 16px; /* Figma card/basic (174:5975): 24px top/sides, 40px bottom. */ padding: 24px 24px 40px; background: var(--dmec-white); transition: background-color 200ms ease; } /* Card title — Figma card/basic: Headline 04 (20px) in Primary/700. Confirmed with Matt 2026-06-10 (full card spec, including the 700 title over the 600 link token). */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom h4, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom h4 a { margin: 0; font-family: var(--dmec-font-family-body); font-size: var(--dmec-h04-size); font-weight: 700; line-height: var(--dmec-h04-lh); color: var(--dmec-primary-700); text-decoration: none; text-wrap: pretty; } /* Card body copy — Body text/medium/regular (16px Neutral/warm/800). */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom .elementor-widget-text-editor p { margin: 0; font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--dmec-neutral-warm-800); } /* "More" link area — pinned to bottom, underlined navy with a CSS pseudo-arrow. */ body.dmec-redesign-active .page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child { display: inline-flex; align-items: center; gap: 0; margin-top: auto; } body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child h6 a { margin: 0; font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 700; line-height: 1.24; color: var(--dmec-color-link); text-decoration: underline; text-underline-offset: 0.15em; } body.dmec-redesign-active .page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child h6 a::after { content: " →"; } body.dmec-redesign-active .page-section__subpage-grid .subpage-grid-card-bottom > .e-con:last-child .elementor-icon { display: none; } /* Card hover / focus — Figma navy colour inversion. Uses :has(:focus-visible) instead of :focus-within so the inversion fires only on keyboard navigation, NOT mouse clicks (BugZap #140). */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con:hover, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con:hover, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible), body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) { background: var(--dmec-primary-900, #17386f); box-shadow: 0 8px 24px 0 rgba(18, 44, 86, 0.32); } body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom { background: var(--dmec-primary-900, #17386f); } /* Title → white + underline on hover. */ /* Round-4 #131-family: underline only the anchor — decorating the H4 too paints a second line on hover. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom h4, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom h4, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom h4, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom h4 { color: #ffffff; text-decoration: none; } body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom h4 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom h4 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom h4 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom h4 a { color: #ffffff; text-decoration: underline; text-underline-offset: 0.15em; } /* Body text → near-white on hover. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom .elementor-widget-text-editor p, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom .elementor-widget-text-editor p, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom .elementor-widget-text-editor, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom .elementor-widget-text-editor p, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom .elementor-widget-text-editor p { color: var(--dmec-neutral-warm-100, #fbf7f5); } /* "More" link → white on hover. */ body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:hover .subpage-grid-card-bottom > .e-con:last-child h6 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:hover .subpage-grid-card-bottom > .e-con:last-child h6 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom > .e-con:last-child h6, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con:has(:focus-visible) .subpage-grid-card-bottom > .e-con:last-child h6 a, body.dmec-redesign-active.dmec-redesign-active .page-section__subpage-grid.e-con-full > .e-con:has(:focus-visible) .subpage-grid-card-bottom > .e-con:last-child h6 a { color: #ffffff; } /* Card image (when host page includes one) — full-bleed 16:9 block. */ body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image, body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image .elementor-widget-container, body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image a { display: block; } body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image a:hover, body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image a:focus { color: inherit; text-decoration: none; } body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner > .e-con > .elementor-widget-image img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } /* --- Responsive: 2-col at tablet, 1-col at mobile ----------------- */ @media (max-width: 1100px) { body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner, body.dmec-redesign-active .page-section__subpage-grid.e-con-full { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1101px) { /* About DMEC: a lone 4th card centers under the row of three. */ body.dmec-redesign-active.page-id-107 .page-section__subpage-grid > .e-con-inner > .e-con:last-child:nth-child(3n+1) { grid-column: 2; } } @media (max-width: 767px) { body.dmec-redesign-active .page-section__subpage-grid > .e-con-inner, body.dmec-redesign-active .page-section__subpage-grid.e-con-full { grid-template-columns: 1fr; } } /* ================================================================= * Component: Hero Banner — bare-pill variant (canonical) * * The transparent hero container that sits above the navy page-header * band, overlapping it with a negative top margin. Contains a magenta * Tertiary/700 pill with the page H1. * * Used on Resources, Community, and Membership. Cert & Training uses * the `page-header__*` class variant instead (stamped via CLI * migrate). * * Target class: `.page-section__hero-banner`, stamped onto the hero * section container (Elementor data-id `9b0e196`) by the CLI migrate * command's `run_hero_classes_fix()` step. * * Design tokens used: * --dmec-tertiary-700 pill background * --dmec-white H1 text color * --dmec-font-family-display H1 font (page override to body OK) * ================================================================= */ /* --- Container reset ---------------------------------------------- */ body.dmec-redesign-active .page-section__hero-banner { position: relative; overflow: visible; min-height: 0; padding: 0; background: transparent; } body.dmec-redesign-active .page-section__hero-banner::before { display: none; } /* Hide responsive-visibility wrappers that Elementor ships */ body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-desktop, body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-tablet { display: none; } /* --- Inner container (negative-margin overlap) -------------------- */ body.dmec-redesign-active .page-section__hero-banner > .e-con { position: relative; z-index: 1; width: 100%; max-width: 100%; margin: -80px 0 0; background: transparent; border-radius: 0; padding: 0; box-shadow: none; } /* --- Magenta pill ------------------------------------------------- */ body.dmec-redesign-active .page-section__hero-banner .page-section__hero-pill { width: min(500px, 100% - 48px); min-height: 88px; margin-inline: auto; background: var(--dmec-tertiary-700); border-radius: 3px; } /* --- H1 typography ------------------------------------------------ */ body.dmec-redesign-active .page-section__hero-banner.page-section__hero-banner h1 { margin: 0; font-family: var(--dmec-font-family-display); font-size: 40px; font-weight: 700; line-height: 1.2; color: var(--dmec-white); text-align: center; } /* --- Mobile responsive -------------------------------------------- */ @media (max-width: 767px) { body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-mobile { display: none; } body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-desktop, body.dmec-redesign-active .page-section__hero-banner > .elementor-hidden-tablet { display: block; } body.dmec-redesign-active .page-section__hero-banner > .e-con { margin-top: -72px; } body.dmec-redesign-active .page-section__hero-banner .page-section__hero-pill { width: min(320px, 100% - 32px); min-height: 76px; } body.dmec-redesign-active .page-section__hero-banner.page-section__hero-banner h1 { font-size: 32px; } } /* ================================================================= * Component: Page Header — navy band + magenta pill (canonical) * * Relocated from `05-pages/_calendar-find-job.scss` where these rules * were already class-based (`.page-header__*`) but living in the * wrong architectural layer. No page-id qualifiers — any page * carrying the `page-header__*` classes via CLI migrate gets the * full canonical chrome. * * Used on: Calendar of Events (2177), Find a Job (2367), * Certification & Training (531), Membership (478), State Policy * (15890), About DMEC, and any future page the orchestrator stamps. * * Structural patterns: * Calendar/Find-a-Job: pill outer-container is SIBLING of blue-section * Orchestrator pages: pill outer-container is NESTED inside blue-section * Both are handled via the `:has()` rules below. * ================================================================= */ /* --- Outer container ---------------------------------------------- */ body.dmec-redesign-active .page-header__outer-container { /* The sibling-pattern pill is position:absolute against this wrapper. Without an explicit containing block here, pages whose Elementor data leaves the wrapper static drop the pill to the next positioned ancestor — seen as the pill rendering fully below the band on /education-content/ (regression QA). */ position: relative; overflow: visible; min-height: 204px; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; padding: 0; } /* --- Navy band ---------------------------------------------------- Triple-chained class = (0,4,1) so the canonical navy beats the per-element background Elementor stores for migrated pages (several About subpages shipped with a stale #104B7D band — BugZap hero-mess reports #42/#45/#47/#56/#70/#71). */ body.dmec-redesign-active .page-header__blue-section.page-header__blue-section.page-header__blue-section { position: relative; z-index: 1; min-height: 160px; justify-content: flex-start; align-items: center; padding: 80px 60px; background-color: #1d4689; color: #ffffff; overflow: hidden; } /* Geometric SVG overlay — only on pages WITHOUT a hero photo. Pages with photos carry `.page-header__has-hero-image` on the section; they keep Elementor's stored background-image (the photo) and skip the SVG pattern. */ body.dmec-redesign-active .page-header__blue-section:not(.page-header__has-hero-image) { background-image: url("../img/resources-header-transparent.svg"); background-position: left -324px top -87px; background-repeat: no-repeat; background-size: 1176px 1176px; } body.dmec-redesign-active .page-header__blue-section.page-header__blue-section .elementor-heading-title { font-family: "PT Sans", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.32; letter-spacing: 0; text-transform: uppercase; color: #ffffff; white-space: nowrap; } body.dmec-redesign-active .page-header__blue-section :where(.e-con-inner, .elementor-element, .elementor-widget-container, p, span, li) { color: inherit; } /* --- Legacy image cleanup ----------------------------------------- Hide stale image widgets ONLY on pages WITHOUT a hero photo. Pages carrying `.page-header__has-hero-image` use an Image widget AS the hero photo — it must remain visible. */ body.dmec-redesign-active .page-header__blue-section:not(.page-header__has-hero-image) > .elementor-widget-image, body.dmec-redesign-active .page-header__blue-section:not(.page-header__has-hero-image) > .elementor-element:not([class*=page-header__purple-box-outer-container]):not(.page-header__purple-box-outer-container) > .elementor-widget-image { display: none; } /* Hero photo on pages WITH the modifier — make the image widget fill the blue-section as an absolute-positioned cover layer behind the pill and breadcrumbs. */ body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image { position: absolute; inset: 0; z-index: 0; overflow: hidden; } body.dmec-redesign-active .page-header__blue-section.page-header__blue-section.page-header__blue-section.page-header__has-hero-image { min-height: clamp(240px, 28vw, 360px); background-color: var(--dmec-primary-800); background-position: center center; background-size: cover; } body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image, body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image .elementor-widget-container, body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image picture { width: 100%; height: 100%; } body.dmec-redesign-active .page-header__blue-section.page-header__has-hero-image > .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* --- Pill outer container ----------------------------------------- */ body.dmec-redesign-active .page-header__purple-box-outer-container { position: absolute !important; top: auto !important; left: 0; right: 0; bottom: 0; --margin-top: 0px; margin-top: 0 !important; z-index: 2; align-items: center; justify-content: center; padding-inline: 60px; } body.dmec-redesign-active .page-header__purple-box-outer-container > .elementor-element { width: auto; max-width: 100%; } /* Width-collapse for the pill chain. Two structural patterns: * Calendar/Find-a-Job: outer-container > .elementor-element > .e-con-inner > pill * Orchestrator pages: outer-container > .e-con-inner > pill */ body.dmec-redesign-active .page-header__purple-box-outer-container > .elementor-element, body.dmec-redesign-active .page-header__purple-box-outer-container > .elementor-element > .e-con-inner, body.dmec-redesign-active .page-header__purple-box-outer-container > .e-con-inner { --width: auto; width: auto; max-width: 100%; justify-content: center; } /* --- Magenta pill ------------------------------------------------- */ body.dmec-redesign-active .page-header__purple-box { --width: auto; --display: inline-flex; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: fit-content !important; min-width: min(500px, 100% - 32px); max-width: calc(100% - 32px); min-height: 0; padding: 20px 80px; border-radius: 4px; background: #701471; text-align: center; } body.dmec-redesign-active .page-header__purple-box > .elementor-widget-heading { flex: 0 1 auto; width: max-content !important; max-width: 100%; margin: 0; text-align: center; } /* Specificity (0,4,1) via double-class chain — must beat Elementor's per-post global-typography rule at (0,4,0): .elementor-{pid} .elementor-element.elementor-element-{eid} .elementor-heading-title */ body.dmec-redesign-active .page-header__purple-box.page-header__purple-box .elementor-heading-title { display: block; font-family: "PT Sans", sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; color: #ffffff; text-transform: none; text-align: center; white-space: nowrap; } body.dmec-redesign-active .page-header__purple-box.page-header__pill-title-about .elementor-heading-title { font-size: 0; line-height: 1; } body.dmec-redesign-active .page-header__purple-box.page-header__pill-title-about .elementor-heading-title::after { content: "ABOUT DMEC"; display: inline-block; font-size: clamp(2.25rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; } /* BugZap #29/#38/#54: About subpages show the section name as the band eyebrow (matching the canonical hero eyebrow, e.g. "SURVEYS & BENCHMARKING") with the page's own title in the pill. The pill's `page-header__pill-title-about` class — which forced "ABOUT DMEC" into the pill and hid the real title — is removed by the migrate command (COMPONENT_CLASS_REMOVALS); this adds the "ABOUT DMEC" band eyebrow. Scoped to the three About subpages; the About landing (107) keeps "ABOUT DMEC" in its pill. */ /* Match the canonical About hero (who-we-are, page 1213): a 204px min-height band with the eyebrow at 82px from the band top and the pill straddling the bottom. The three subpages' bands shipped shorter (160px) with extra flow children that pinned a flow-positioned eyebrow to the very top, so the eyebrow is positioned ABSOLUTELY against the (position:relative) band to reproduce who-we-are's placement independent of sibling flow. */ body.dmec-redesign-active:is(.page-id-15890, .page-id-1212, .page-id-16991) .page-header__blue-section.page-header__blue-section.page-header__blue-section { min-height: 204px; } body.dmec-redesign-active:is(.page-id-15890, .page-id-1212, .page-id-16991) .page-header__blue-section::before { content: "ABOUT DMEC"; position: absolute; top: 82px; left: 0; right: 0; margin: 0 auto; font-family: "PT Sans", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.2; color: #ffffff; text-align: center; text-transform: uppercase; } body.dmec-redesign-active .page-header__purple-box .elementor-heading-title br { display: none; } body.dmec-redesign-active .page-header__purple-box .elementor-widget-container { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 !important; margin: 0; text-align: center; } /* --- Nested-pill straddle (orchestrator pages) -------------------- REGRESSION GUARD: the base navy-band rule above runs at (0,4,1) (triple-chained to beat stale Elementor backgrounds). This exception must outrank it or `overflow: hidden` clips the straddling pill mid-band (seen on /certification-and-training/ and /about-dmec/ during round-2 QA). Triple chain + :has() = (0,5,1). */ body.dmec-redesign-active .page-header__blue-section.page-header__blue-section.page-header__blue-section:has(> .page-header__purple-box-outer-container) { overflow: visible; } body.dmec-redesign-active .page-header__blue-section > .page-header__purple-box-outer-container { bottom: -44px !important; } /* Sibling-pill pages use a wrapper around the blue band. Straddle the pill from that wrapper so Certification descendants, Calendar, and Find-a-Job follow the same canonical header geometry. */ body.dmec-redesign-active .page-header__outer-container > .page-header__purple-box-outer-container { bottom: -44px !important; } /* In the sibling pattern the pill is anchored to the WRAPPER, so the band must fill the wrapper's full 204px — otherwise the pill "centers" on an invisible edge 44px below the navy and renders fully detached (education-content regression, round-2 QA). The triple chain keeps parity with the base band rule's specificity. */ body.dmec-redesign-active .page-header__outer-container > .page-header__blue-section.page-header__blue-section.page-header__blue-section { min-height: 204px; } /* BugZap #34: the former About-scoped -64px/-54px pill offsets are gone. The -44px straddle equals half the pill's rendered height, so the pill is vertically centered on the band's bottom edge on every page — exactly the Figma alignment Matt called out on /media/. */ /* Breadcrumb push for nested pattern. BugZap #24/#67/#68: the visual gap between the magenta pill and the breadcrumb row is 60px everywhere. The pill overhangs the band by 44px (half its height), so the row's margin from the band edge is 44 + 60 = 104px. */ body.dmec-redesign-active .page-header__blue-section:has(> .page-header__purple-box-outer-container) ~ .breadcrumb-container { margin-top: 104px; } body.dmec-redesign-active .page-header__outer-container:has(> .page-header__purple-box-outer-container) + .breadcrumb-container { margin-top: 104px; } /* Keep Membership on the same measured hero-to-breadcrumb rhythm. */ body.dmec-redesign-active.page-id-478 .page-header__blue-section.page-header__has-hero-image:has(> .page-header__purple-box-outer-container) ~ .breadcrumb-container { margin-top: 104px; } /* BugZap #162/#70/#71/#159 (round-2): on the resource/thank-you hero pages the breadcrumb is an inline Elementor `breadcrumbs` widget in its own `.e-con` that follows the hero BLOCK (the `.e-con` wrapping the band) — it carries no `.breadcrumb-container` class and isn't a band sibling, so the rules above can't reach it and it tucks under the straddling pill. After the pill-nesting migrate (step 6b) the band's direct child is the pill-outer, so match the nested-hero block + the adjacent breadcrumb `.e-con`. Zero the hero block's 10px bottom padding so the row measures from the band edge, then push it the canonical 104px (44px pill overhang + 60px gap). */ body.dmec-redesign-active .e-con:has(> .page-header__blue-section > .page-header__purple-box-outer-container) { padding-bottom: 0; } body.dmec-redesign-active .e-con:has(> .page-header__blue-section > .page-header__purple-box-outer-container) + .e-con:has(.elementor-widget-breadcrumbs) { margin-top: 104px; } /* BugZap #159 (benchmarking-report, page 15662): this hero's title wraps to two lines, so the pill renders ~136px tall. The canonical -44px overhang centers an 88px (1-line) pill but leaves a tall pill sitting high (92/44) — Matt's "not vertically centered." Center it on the band edge with half-height overhang, then push the breadcrumb to keep the canonical 60px below the taller pill (68 overhang + 60 = 128). Scoped to this page because it is the only two-line hero pill. */ body.dmec-redesign-active.page-id-15662 .page-header__outer-container > .page-header__purple-box-outer-container { bottom: -68px !important; } body.dmec-redesign-active.page-id-15662 .page-header__outer-container:has(> .page-header__purple-box-outer-container) + .breadcrumb-container { margin-top: 128px; } /* BugZap #169 (benchmarking-whitepaper-download, page 15631): the pill title "2024 DMEC Absence Plan Design and Practices Benchmarking Report" is too long for the canonical single line (the global pill rule sets `white-space: nowrap` + heading `width: max-content`, so it overflowed the pill edges). Adopt the two-line treatment: allow the title to wrap, cap the pill width so it breaks onto two balanced lines, then apply the same -68px overhang + 128px breadcrumb offset as the #159 two-line hero so the taller pill stays vertically centered on the band edge. */ body.dmec-redesign-active.page-id-15631 .page-header__purple-box > .elementor-widget-heading { width: auto !important; max-width: 100%; } body.dmec-redesign-active.page-id-15631 .page-header__purple-box.page-header__purple-box .elementor-heading-title { white-space: normal; } body.dmec-redesign-active.page-id-15631 .page-header__purple-box { max-width: 900px !important; padding: 24px 56px; } /* This hero nests the pill straight under `.page-header__blue-section` (not the `.page-header__outer-container` variant #159 uses), so the half-height overhang targets the blue-section child. -68px centers the ~144px two-line pill on the band edge (76/68). The breadcrumb sits in normal flow and is unaffected by the pill's absolute shift, so a small top margin restores the canonical ~60px gap below the lowered pill. */ body.dmec-redesign-active.page-id-15631 .page-header__blue-section > .page-header__purple-box-outer-container { bottom: -68px !important; } body.dmec-redesign-active.page-id-15631 .elementor-widget-breadcrumbs { margin-top: 14px; } /* --- Responsive --------------------------------------------------- */ @media (max-width: 1024px) { body.dmec-redesign-active .page-header__blue-section { padding: 72px 32px; } body.dmec-redesign-active .page-header__purple-box { padding: 20px 48px; } } @media (max-width: 767px) { body.dmec-redesign-active .page-header__blue-section { padding: 64px 20px; } body.dmec-redesign-active .page-header__purple-box-outer-container { padding-inline: 20px; } body.dmec-redesign-active .page-header__purple-box { width: calc(100vw - 40px) !important; min-width: 0; max-width: calc(100vw - 40px) !important; padding: 16px 24px; } body.dmec-redesign-active .page-header__purple-box > .elementor-widget-heading { width: 100% !important; } body.dmec-redesign-active .page-header__purple-box.page-header__purple-box .elementor-heading-title { font-size: 32px; white-space: normal; text-align: center; text-wrap: balance; } } /* ================================================================= * Component: CTA 2-Column Blue Band (canonical) * * Two side-by-side navy panels (Primary/900 left, Primary/1000 right) * with heading, body text, divider, and a white-bordered button. * Used on Resources, Community, Certification & Training, Membership, * Calendar of Events, and Find a Job. * * Previously duplicated in every per-page SCSS file scoped by * `page-id-NNN [data-id="XXXX"]`. Now unified behind the semantic * class `.page-section__cta-2-col-blue`, stamped onto Elementor * containers by the CLI migrate command. * * Design tokens used: * --dmec-primary-700 button bg * --dmec-primary-800 button hover bg * --dmec-primary-900 left panel bg * --dmec-primary-1000 right panel bg * --dmec-white text + button border * --dmec-font-family-body all text * --dmec-h02-size / --dmec-h02-lh heading * --dmec-body-lg-size / --dmec-body-lg-lh body text * --dmec-color-focus-ring focus-visible outline * ================================================================= */ /* --- Section container — zero padding so panels control spacing --- */ body.dmec-redesign-active .page-section__cta-2-col-blue { --gap: 0px; gap: 0; padding: 0; } /* --- Panel layout ------------------------------------------------- */ body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element { flex: 1 1 0; gap: 32px; justify-content: flex-end; padding: 60px 120px; } body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element:first-child { background: var(--dmec-primary-900); } body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element:last-child { background: var(--dmec-primary-1000); } /* --- Divider ------------------------------------------------------ */ body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-divider { padding-block: 0; } body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-divider-separator { width: 120px; border-color: rgba(255, 255, 255, 0.4); } /* --- Heading typography ------------------------------------------- */ body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-heading-title { font-family: var(--dmec-font-family-body); font-size: var(--dmec-h02-size); font-weight: 700; line-height: var(--dmec-h02-lh); color: var(--dmec-white); } body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element:last-child .elementor-widget-heading { width: 540px; max-width: 100%; } body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element:last-child .elementor-heading-title { max-width: 540px; white-space: pre-line; } /* --- Body text ---------------------------------------------------- */ body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-widget-text-editor, body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-widget-text-editor p { font-family: var(--dmec-font-family-body); font-size: var(--dmec-body-lg-size); font-weight: 400; line-height: var(--dmec-body-lg-lh); color: var(--dmec-white); } /* --- Button ------------------------------------------------------- */ body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 16px 24px; border: 1px solid var(--dmec-white); border-radius: 4px; background: var(--dmec-primary-700); font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 700; line-height: 1.24; letter-spacing: 0.01em; box-shadow: none; } body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-button:hover { /* Canonical button hover unified on Primary/900 (BugZap round-2); the 1px white border keeps the button legible on the 900 panel. */ background: var(--dmec-primary-900); } body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-button:focus-visible { outline: 2px solid var(--dmec-color-focus-ring); outline-offset: 2px; } body.dmec-redesign-active .page-section__cta-2-col-blue .elementor-button-content-wrapper { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } body.dmec-redesign-active .page-section__cta-2-col-blue.page-section__cta-2-col-blue .elementor-button-text { font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 700; line-height: 1.24; letter-spacing: 0.01em; color: var(--dmec-white); } /* --- Responsive --------------------------------------------------- */ @media (max-width: 767px) { body.dmec-redesign-active .page-section__cta-2-col-blue > .elementor-element { padding: 48px 24px; } } /* ================================================================= * Component: Content panel (white/gray inset section) * * BugZap round-2 (#39/#48/#55): inset content panels across the About * subtree shipped with assorted Elementor padding (50px, 60px). Per * the Figma component the panel padding is 40px on all sides. * * Applied via the `page-section__content-panel` class stamped by the * CLI migrate command (COMPONENT_CLASS_STAMPS). Triple-chained class * = (0,4,1) so it beats Elementor's per-element padding at (0,4,0) * without `!important`. * ================================================================= */ body.dmec-redesign-active .page-section__content-panel.page-section__content-panel.page-section__content-panel { --padding-top: 40px; --padding-right: 40px; --padding-bottom: 40px; --padding-left: 40px; padding: 40px; } /* The 40px spec is the VISIBLE inset (panel edge → text), so the inner wrapper and edge widgets must not stack their own spacing on top of the panel padding (measured +20px per side on Terms of Use). Covers BOTH the boxed inner wrapper (.e-con-inner) and a full-width direct child container (.e-con-full) — the latter shipped its own 40px Elementor padding on Sponsored Content and Benchmarking Dashboard Full, doubling the inset to 80px (BugZap #153/#157). The panel itself always supplies the 40px, so any direct-child padding is by definition double-counting. */ body.dmec-redesign-active .page-section__content-panel.page-section__content-panel > .e-con-inner, body.dmec-redesign-active .page-section__content-panel.page-section__content-panel > .e-con-full { padding: 0; } /* Elementor stores 20px vertical padding on each widget's container inside these panels — at the panel edges that stacked to a 60px visible inset. Internal rhythm comes from text margins and the container gap, so the widget-container padding contributes nothing but drift. */ body.dmec-redesign-active .page-section__content-panel.page-section__content-panel .elementor-widget > .elementor-widget-container { padding-top: 0; padding-bottom: 0; } /* Long-form copy cap (BugZap #61): readable measure is 720px max per the accessibility direction. Applied via stamp on sections whose body copy ran the full 1200px container. */ body.dmec-redesign-active .page-section__narrow-text.page-section__narrow-text .elementor-widget-text-editor, body.dmec-redesign-active .page-section__narrow-text.page-section__narrow-text .elementor-widget-text-editor .elementor-widget-container, body.dmec-redesign-active .elementor-widget-text-editor.page-section__narrow-text.page-section__narrow-text { max-width: 720px; margin-inline: auto; } /* Background override — force white on sections that shipped with Elementor's default #F0F0F0 / #F4F6FA gray. Triple-chained (0,4,1) to beat the per-element inline background at (0,4,0). Resources BugZap #142, #150. */ body.dmec-redesign-active .page-section__bg-white.page-section__bg-white.page-section__bg-white { --background-color: var( --dmec-white ); background-color: var(--dmec-white); } /* Neutral headings (BugZap #101): some sections' heading widgets carry a per-element Elementor color pointing at the global "Primary" swatch (#104B7D legacy blue), so non-link section/feature titles render blue and read as clickable. Per the design only actual links are blue; titles are Neutral. Stamp this class on the section to force its headings to the canonical heading color. Double class + .elementor-heading-title = (0,4,1), beating Elementor's per-element `.elementor-{pid} .elementor-element-{eid} .elementor-heading-title` color rule at (0,3,0). `!important` is the sanctioned external-layer counter: on Calendar of Events (#98) the blue comes from The Events Calendar plugin stylesheet with its own `!important`, which plain specificity can't beat. */ body.dmec-redesign-active .page-section__neutral-headings.page-section__neutral-headings .elementor-heading-title { color: var(--dmec-color-heading) !important; } /* Margin flush — suppress the 80px bottom-margin Elementor ships on boxed sections that should sit tight against the next band. Resources BugZap #141. */ body.dmec-redesign-active .dmec-no-margin-bottom.dmec-no-margin-bottom.dmec-no-margin-bottom { margin-bottom: 0; } /* Margin-top flush — zero out negative top-margin Elementor ships on sections that pull content up into the breadcrumb band. Resources BugZap #160. */ body.dmec-redesign-active .dmec-no-margin-top.dmec-no-margin-top.dmec-no-margin-top { margin-top: 0; } /* `page-section__panel-light` (BugZap #60) is a MARKER class with no rules of its own. The CLMS dark band hosts a floating light two-panel card (white + Neutral/cold gray, same as production); the issue-#134 band-wide white-text rule in `05-pages/_certification-training.scss` was painting the card's copy white-on-white. That rule now carves out `:not( .page-section__panel-light * )`, letting the panels' own Elementor colors (navy headings, dark body — matching production) show through. The class is stamped by the CLI migrate command. */ /* Full-width 2-col content block (BugZap #62): the cols-2 pattern shipped with a 700px max-width and 320px columns baked into the Elementor data. The canonical block fills its 1200px container with two equal columns. Chained classes give (0,4,1) over Elementor's per-element sizing. */ body.dmec-redesign-active .cols-2-container.cols-2-container.cols-2-container { --width: 100%; width: 100%; max-width: 100%; } body.dmec-redesign-active .cols-2-container.cols-2-container :where(.cols-2-text-column, .cols-2-image-column) { --width: 50%; flex: 1 1 0; min-width: 0; } /* ================================================================= * Component: Metrics band photo wash (round-4 #137, round-3 #119) * * The "Advancing Absence & Disability Management" stats band renders * a photo background (homepage-member.jpg) whose teal tint is baked * into the JPEG — there is no Elementor overlay layer, so a plain * background-color can never darken it (the opaque photo paints over * it). Designer: "green overlay should be darker." * * Treatment: a ::before wash in Secondary/Blue-Green 800 over the * photo, content lifted above it. Applied to both carriers of the * band: `.page-section__metrics` (subpages) and `.dmec-home-stats` * (homepage — supersedes the round-3 #119 background-color attempt). * * Wash strength is eyeballed at 45% pending designer confirmation of * the exact step. * ================================================================= */ body.dmec-redesign-active :is(.page-section__metrics, .elementor-element.dmec-home-stats) { position: relative; isolation: isolate; } body.dmec-redesign-active :is(.page-section__metrics, .elementor-element.dmec-home-stats)::before { content: ""; position: absolute; inset: 0; /* BugZap #177: darker green overlay over the stats photo. Solid fallback first for engines without color-mix; then the tinted wash. Bumped from 45% to 65% so the darker-green overlay reads clearly. */ background-color: rgba(10, 88, 83, 0.65); background-color: color-mix(in srgb, var(--dmec-secondary-bg-800) 65%, transparent); pointer-events: none; z-index: 0; } body.dmec-redesign-active :is(.page-section__metrics, .elementor-element.dmec-home-stats) > .e-con-inner, body.dmec-redesign-active :is(.page-section__metrics, .elementor-element.dmec-home-stats) > .e-con { position: relative; z-index: 1; } /* ================================================================= * Component: Accordion — Figma accordions/basic (334:4381) * * Rewritten round-3 (#83/#105, round-2 #49/#57): the library variant * is a borderless DIVIDER list, not the boxed-card treatment shipped * previously. * * Item no box — border-bottom 1px Neutral/cold/300, no radius * Head 16px padding, 16px gap, 24px leading icon, * Headline 05 bold (16/1.4) in Primary/600 * Hovered bg Primary/100, border-bottom Primary/500, * title Primary/900 (334:4391); expanded matches * Body 8px top / 20px bottom / 56px sides (indented under the * icon), Body medium (16/1.4) in Neutral/cold/800 * * The plus/minus circle GLYPHS are an Elementor widget icon setting * (content, not CSS) — flagged in the round-3 notes for a migrate * patch if pages ship chevrons. * * !important retained where the previous component needed it against * Elementor's widget-level borders/padding. * ================================================================= */ body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion, .elementor-toggle, .e-n-accordion) { display: flex; flex-direction: column; gap: 0; } body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-item, .elementor-toggle-item, .e-n-accordion-item) { overflow: hidden; background: transparent; border: 0 !important; border-bottom: 1px solid var(--dmec-neutral-cold-300) !important; border-radius: 0; box-shadow: none; } body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-title, .e-n-accordion-item-title) { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 16px !important; background: transparent; border: 0 !important; font-family: var(--dmec-font-family-body); font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--dmec-color-link); text-decoration: none; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-title, .e-n-accordion-item-title) :is(.elementor-accordion-title, .elementor-toggle-title, .e-n-accordion-item-title-text) { padding: 0; color: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; text-decoration: none; } /* HOVER ONLY (Figma 334:4391): Primary/100 wash, Primary/500 divider, Primary/900 title. Per Figma the EXPANDED-default state is NOT washed — it stays white bg / Primary/600 title (334:4408). So this treatment is scoped to :hover / :focus-within and must NOT include the open/active state. */ body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-title, .e-n-accordion-item-title):hover, body.dmec-redesign-active :where(#main-container) :is(.elementor-tab-title, .e-n-accordion-item-title):focus-within { background: var(--dmec-primary-100); color: var(--dmec-color-link-hover); } body.dmec-redesign-active :where(#main-container) :is(.elementor-accordion-item, .elementor-toggle-item, .e-n-accordion-item):has(:is(.elementor-tab-title, .e-n-accordion-item-title):hover) { border-bottom-color: var(--dmec-primary-500) !important; } /* Expanded title color (BugZap #57/#49/#83/#105). Elementor's nested- accordion default paints the OPEN title near-black (#1f2124) via `.e-n-accordion-item[open] > .e-n-accordion-item-title` (0,4,0). Per Figma 334:4408 the expanded title stays Primary/600 — the SAME as collapsed; only HOVER darkens to Primary/900. (Earlier this wrongly set link-hover/Primary-900 on the open state.) Override the dark default to Primary/600 at (0,4,1). The title-text `
`: *
* Password: * *