/* About > Leadership (wp_block 133): card hover outline + bio pop-out. * * Figma Internal_Compass-Precision: * 33668:4718 "Hover Effect" — 3px #1897FF outline on the card * 33668:4703 "Team Member Bio Pop-Out" — 968x638 modal over a dark backdrop * * #1897FF is the same design-specified light blue the comparison table's * highlight column uses (--cmp-cmpn-ring3 in cmp-comparison.css); it is not a * theme.json token, so it is written literally here too. * * Enqueued directly from functions.php rather than @import-ed by index.css — * an @import would inherit index.css's version string and edits here would * never cache-bust. Same reasoning as motion.css / cmp-home-map.css. */ .cmp-about-leadership, .cmp-bio-modal { --cmp-bio-accent: #1897ff; } /* The dialog is appended to , outside the section that scopes the * accent, so it declares the token itself. */ /* --------------------------------------------------------------------- * 1. Card hover — light blue outline around the whole card. * ------------------------------------------------------------------ */ /* The card carries a 1px keyline as an inline border style from its block * markup. Ringing it with `outline` rather than swapping the border width * keeps the 3px state out of the layout, so nothing reflows on hover. * Outlines follow border-radius in every browser the site supports. */ .cmp-about-leadership .cmp-card { outline: 3px solid transparent; outline-offset: 0; transition: outline-color 220ms ease; } .cmp-about-leadership .cmp-card:hover, .cmp-about-leadership .cmp-card:focus-within, .cmp-about-leadership .cmp-card.is-bio-open { outline-color: var(--cmp-bio-accent); } /* Only cards that actually carry bio copy become clickable. */ .cmp-about-leadership .cmp-bio-card { cursor: pointer; } .cmp-about-leadership .cmp-bio-card:focus-visible { outline-color: var(--cmp-bio-accent); } /* The bio copy ships inside the card so it stays editable in the Site Editor * and travels with the block; JS lifts it into the dialog on open. * * Two rules on purpose: the second uses :has(), and a browser without it * would drop a combined selector list, un-hiding the classed group too. * The :has() rule catches a bio pasted into a plain Group under the name * (no cmp-bio-source class), which is how the 2026-09-14 bios arrived. */ .cmp-about-leadership .cmp-bio-source { display: none; } .cmp-about-leadership .cmp-card > .wp-block-group:not(:has(h1, h2, h3, h4)):has(p) { display: none; } /* --------------------------------------------------------------------- * 2. Bio pop-out dialog. * ------------------------------------------------------------------ */ .cmp-bio-modal { position: fixed; width: min(968px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 16px; background: var(--wp--preset--color--theme-04, #112241); color: var(--wp--preset--color--theme-01, #fff); box-shadow: 0 4px 8px rgb(16 24 40 / 10%), 0 2px 4px rgb(16 24 40 / 6%); overflow: visible; } .cmp-bio-modal::backdrop { background: rgb(4 11 32 / 80%); } .cmp-bio-modal__inner { display: flex; gap: 56px; align-items: flex-start; max-height: calc(100vh - 32px); padding: 64px 56px 64px 45px; overflow-y: auto; overscroll-behavior: contain; } .cmp-bio-modal__media { flex: 0 0 298px; width: 298px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 8px rgb(16 24 40 / 10%), 0 2px 4px rgb(16 24 40 / 6%); } .cmp-bio-modal__media img { display: block; width: 100%; height: 337px; object-fit: cover; } .cmp-bio-modal__body { flex: 1 1 auto; min-width: 0; } .cmp-bio-modal__head { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; } .cmp-bio-modal__name { margin: 0; font-family: var(--wp--preset--font-family--dm-sans, "DM Sans", sans-serif); font-size: var(--wp--preset--font-size--xx-large, 33px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--wp--preset--color--theme-01, #fff); } .cmp-bio-modal__role { margin: 8px 0 0; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--wp--preset--color--theme-01, #fff); } /* Icon exported from the Figma pop-out (33668:4712) and committed to the * theme, so it is served as a background rather than plumbed through PHP. */ .cmp-bio-modal__linkedin { flex: 0 0 42px; width: 42px; height: 42px; background: url("../../images/linkedin.svg") no-repeat center / 42px 42px; border-radius: 8px; } /* Core ships .screen-reader-text with the block library only on some screens; * the dialog is built in JS, so the utility is declared here. */ .cmp-bio-modal .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .cmp-bio-modal__linkedin:focus-visible { outline: 2px solid var(--cmp-bio-accent, #1897ff); outline-offset: 2px; } .cmp-bio-modal__copy { max-width: 512px; margin-top: 56px; } .cmp-bio-modal__copy p { margin: 0 0 20px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--wp--preset--color--theme-01, #fff); } .cmp-bio-modal__copy p:last-child { margin-bottom: 0; } /* Close control. Drawn from two rules rather than a glyph so it carries no * font dependency and no non-ASCII character. */ .cmp-bio-modal__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; } .cmp-bio-modal__close::before, .cmp-bio-modal__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background: var(--wp--preset--color--theme-01, #fff); transition: background-color 160ms ease; } .cmp-bio-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); } .cmp-bio-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .cmp-bio-modal__close:hover::before, .cmp-bio-modal__close:hover::after, .cmp-bio-modal__close:focus-visible::before, .cmp-bio-modal__close:focus-visible::after { background: var(--cmp-bio-accent, #1897ff); } .cmp-bio-modal__close:focus-visible { outline: 2px solid var(--cmp-bio-accent, #1897ff); outline-offset: 2px; } /* Stack below the two-column width. The portrait keeps its aspect but spans * the dialog so the copy is not squeezed into a sliver. */ @media (max-width: 900px) { .cmp-bio-modal__inner { flex-direction: column; gap: 32px; padding: 56px 24px 32px; } .cmp-bio-modal__media { flex: 0 0 auto; width: 100%; max-width: 298px; } .cmp-bio-modal__copy { max-width: none; margin-top: 32px; } } @media (prefers-reduced-motion: reduce) { .cmp-about-leadership .cmp-card { transition: none; } }