/* Theme Name: Mi Poder Theme URI: https://mi-poder.org Author: Brand Robear Author URI: https://brandrobear.com Description: Custom block theme for Mi Poder, a Latinx-led civic power organization in Michigan. Bilingual (EN/ES), built for Full Site Editing with locked section patterns. Version: 0.1.0 Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: mi-poder Tags: full-site-editing, block-patterns, translation-ready */ /* Almost everything lives in theme.json. This file is for the few things theme.json cannot express yet. Keep it short. No raw brand hex values, use the CSS custom properties WordPress generates from theme.json (for example var(--wp--preset--color--terracota-deep)). */ /* Skip link, visible only when focused. Accessibility floor requirement. */ .skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 100000; padding: 0.75rem 1.25rem; background: var(--wp--preset--color--ceramic-tan); color: var(--wp--preset--color--blue-ink); border-radius: var(--wp--custom--radius--pill); outline: 3px solid var(--wp--preset--color--terracota-deep); outline-offset: 2px; } /* ========================================================================== Section furniture used by patterns. These live here rather than as inline block styles so the client cannot break them from the editor, and so a change lands in one place instead of in every page that uses the pattern. ========================================================================== */ /* Bands sit flush against each other with no gap, exactly as in the mockup. WordPress's default 24px block gap would otherwise show a white stripe between every colored section. */ :where(.entry-content, main) > .alignfull { margin-block: 0; } /* The same default gap exists at the ROOT level: between the header part and main, and between main and the footer part. Under the header it reads as a white strip below the orange rule. Above the footer it eats 24px of the papel divider's upward pull, which is why a white sliver shows behind the footer scallops on every page. */ .wp-site-blocks > header, .wp-site-blocks > main, .wp-site-blocks > footer { margin-block: 0; } /* Typography: long-form paragraphs cap at a readable measure. Without this, intro paragraphs (candidates description, holding pages) run the full 1240px column, which is far past a comfortable line length. Constrained layouts center the box, so centered sections keep their alignment. */ main p.has-body-font-size { max-width: 68ch; } /* The measure cap must not float a LEFT-ALIGNED paragraph away from its own heading: constrained layouts center every capped box with !important, which left "Building power that lasts" at x=24 and its paragraph 180px to the right. Left-aligned capped paragraphs pin to the column's left edge; centered text (holding pages, hotline cards) declares has-text-align-center and keeps its auto margins. margin-left is computed, not 0: when the paragraph sits inside a column the calc resolves to 0 (same as before), but when it is a DIRECT child of a full-width constrained band, 0 would pin it to the band's 24px padding edge instead of the content column (found on Home vision, Voter Hub hotlines and closing CTA, Candidates intro). The calc is the leftover half-space between the containing block and the 1240px content column, which lands exactly on the column edge in both cases. The eyebrow pill needs the same pin when it is a direct band child (Donate, Candidates heroes): it is display:inline-block, and auto margins compute to 0 on inline-blocks, so WP's constrained centering silently fails for it. */ main p.has-body-font-size:not(.has-text-align-center), .is-layout-constrained > .mp-eyebrow-pill { margin-right: 0 !important; margin-left: calc((100% - min(100%, var(--wp--style--global--content-size))) / 2) !important; } /* Typography: multi-line headings break evenly instead of leaving orphans. */ h1, h2, h3 { text-wrap: balance; } /* Cards inside columns fill the column, so a row of cards shares one bottom edge no matter how much text each card holds. Fixes the ragged card rows on About (partner cards) and the Voter Hub (hotlines). */ .wp-block-column > .wp-block-group.has-background { height: 100%; box-sizing: border-box; } /* Voter Hub task links. The page's five civic links render as ONE buttons block with this class; the grid gives every task the same footprint instead of five self-sized pills wrapping raggedly. */ .mp-voter-links { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; align-items: stretch; } .mp-voter-links .wp-block-button { display: grid; } .mp-voter-links .wp-block-button__link { display: grid; place-items: center; width: 100%; height: 100%; min-height: 86px; text-align: center; line-height: 1.25; box-sizing: border-box; } /* Rhythm: a display heading followed directly by a button row (the closing CTAs on About, Home, and the holding pages) gets a fuller beat of air than the default 24px block gap, so the button reads as its own act. */ main h2 + .wp-block-buttons, main h3 + .wp-block-buttons { margin-top: 36px; } /* Election Protection hotline cards. The dialable vanity number is the point of the card, so it reads big, blue, and tappable; the card carries a terracota crown to match the papel language of the rest of the site. The :has() hook keys off the tel: link so no page content needs new classes. Also fixes the launch-week bug where the links inherited the blue band's ceramic-tan link color and vanished into the tan card. */ main .wp-block-group.has-ceramic-tan-background-color:has(a[href^="tel:"]) { border-top: 8px solid var(--wp--preset--color--terracota); } main .wp-block-group.has-ceramic-tan-background-color:has(a[href^="tel:"]) > p:first-child { color: var(--wp--preset--color--terracota-deep); font-weight: 700; } main .has-ceramic-tan-background-color a[href^="tel:"] { color: var(--wp--preset--color--electric-blue); text-decoration: none; } main .has-ceramic-tan-background-color a[href^="tel:"]:hover { color: var(--wp--preset--color--terracota-deep); text-decoration: underline; text-underline-offset: 4px; } main .has-ceramic-tan-background-color a[href^="tel:"]:focus-visible { outline: 2px solid var(--wp--preset--color--terracota); outline-offset: 3px; border-radius: 2px; } /* --- Brand textures: real p21 panels (Method C) -------------------- Opaque tiles that carry their own color. Apply to a full-width band that already has the matching has-*-background-color (kept as the load fallback). Add .mp-cover for a single non-repeating hero fill. */ .mp-tex-electric-blue, .mp-tex-terracota, .mp-tex-ceramic-tan { background-repeat: repeat; background-size: 440px; /* width only; height stays proportional */ background-position: center; } .mp-tex-electric-blue { background-image: url(assets/images/textures/mp-tex-electric-blue.webp); /* White grain on blue carries the most contrast of the three panels, so it renders finer to sit at the reference's subtlety (p21). */ background-size: 320px; } .mp-tex-terracota { background-image: url(assets/images/textures/mp-tex-terracota.webp); } .mp-tex-ceramic-tan { background-image: url(assets/images/textures/mp-tex-ceramic-tan.webp); } .mp-cover { background-repeat: no-repeat; background-size: cover; } @media print { .mp-tex-electric-blue, .mp-tex-terracota, .mp-tex-ceramic-tan { background-image: none; } } /* Papel picado divider. A decorative strip that joins two colored bands. The cut-paper artwork is transparent between the flags. In the mockup the page sits on ceramic tan, so those gaps read tan. This theme's page background is white, so the tan is set here instead. Without it the divider reads as a white stripe cutting the two bands apart. */ .mp-papel { height: clamp(26px, 3.5vw, 42px); background-repeat: repeat-x; background-size: auto 100%; background-color: var(--wp--preset--color--ceramic-tan); } .mp-papel--blue-down { background-image: url(assets/images/dividers/papel-blue-down.png); background-position: top center; } .mp-papel--blue-up { background-image: url(assets/images/dividers/papel-blue.png); background-position: bottom center; } .mp-papel--orange-down{ background-image: url(assets/images/dividers/papel-orange-down.png); background-position: top center; } .mp-papel--orange-up { background-image: url(assets/images/dividers/papel-orange.png); background-position: bottom center; } /* The papel height is a fluid clamp, so at fractional heights and retina scaling the tile can round short of the band it attaches to, leaking the tan ground as a hairline across the page (caught on Voter Hub, Jul 23). One pixel of overlap lets the adjacent band paint over the seam: the tile's attached edge is solid band color, so the covered pixel is invisible. */ .mp-papel--blue-up, .mp-papel--orange-up { margin-bottom: -1px; } .mp-papel--blue-down, .mp-papel--orange-down { margin-top: -1px; } /* An up-divider's crowns rise out of the band BELOW, so the gaps between them show the band ABOVE. The default ceramic-tan ground is right everywhere the divider follows a ceramic-tan band, but on the Voter Hub the orange-up papel follows the tan-soft voter-links band, and the darker ground read as an off-color stripe (Robear, Jul 23). The divider inherits the color of whatever tan-soft band it directly follows. */ .has-tan-soft-background-color + .mp-papel { background-color: var(--wp--preset--color--tan-soft); } /* The footer's papel rises out of the blue footer and overlaps whatever band sits above it, so it needs no ground color of its own. Matches the mockup, which pulls it up by its own height. */ .wp-block-template-part > .mp-papel--blue-up { background-color: transparent; position: relative; z-index: 1; margin-top: calc(-1 * clamp(26px, 3.5vw, 42px)); } /* Framed photo. The brand frame sits BEHIND the photo, not on top of it. The round frame is an opaque sunburst medallion, so layering it over the image would hide the image completely. The photo is inset so the medallion's serrated edge shows around it, which is how the mockup builds it. */ .mp-framed { position: relative; width: min(440px, 92%); margin-inline: auto; aspect-ratio: 1; } /* The medallion or arch artwork, behind the photo. */ .mp-framed::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; } .mp-framed .wp-block-image { position: absolute; left: 13.5%; top: 13.5%; width: 73%; height: 73%; margin: 0; z-index: 2; } .mp-framed .wp-block-image img { width: 100%; height: 100%; object-fit: cover; } .mp-framed--round .wp-block-image img { border-radius: 50%; } .mp-framed--round::before { background-image: url(assets/images/frames/frame-round.png); } /* The round medallion runs larger than the base frame, home hero only (the arch keeps the 440px base). Client direction, July 21. */ .mp-framed--round { width: min(480px, 92%); } /* Motion: the medallion turns slowly behind the hero photo. Scoped to .home so only the live front page animates, never the editor canvas or the hub arch. 90 seconds per revolution reads as ambient presence, not a spinner. The medallion is the ::before artwork, so this touches no markup and no content. */ @media (prefers-reduced-motion: no-preference) { .home .mp-framed--round::before { /* Two revolutions, then rest. Bounded per WCAG 2.2.2 (Robear's call, July 22): ambient on arrival without motion that never ends. The rotation ends at 360 degrees, which is home position, so there is no visual jump when it stops. */ animation: mp-medallion-turn 120s linear 2; } } @keyframes mp-medallion-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Motion: the hero headline arrives sentence by sentence. Each sentence is wrapped in a .mp-h1-beat span in the page content (both languages); sentence one rises first, sentence two follows on a 0.4s stagger. Each sentence moves as one unit, colored marks included. Spans go inline-block only inside the media query, because inline elements cannot carry transforms. If a future edit strips the spans, the headline simply renders static. Scoped to .home: no other page, and never the editor, animates. */ @media (prefers-reduced-motion: no-preference) { .home h1 .mp-h1-beat { display: inline-block; animation: mp-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .home h1 .mp-h1-beat:nth-of-type(2) { animation-delay: 0.4s; } } @keyframes mp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* V1 review (Jul 23): the client's team called the hero headline too large on landing. Both languages now share the 85% scale that previously applied only to the longer Spanish copy; the preset variable resolves to the fluid clamp, so the scale holds at every viewport. WordPress emits the has-heading-lg-font-size utility with !important, so this override must carry it too, same as the mp-card margin case above. */ .home h1 { font-size: calc(var(--wp--preset--font-size--heading-lg) * 0.85) !important; } /* Each headline sentence breaks its lines evenly instead of stranding one short word on the last line. The beats are inline-block, so the global h1 balance rule cannot reach inside them; balance the spans themselves. */ .mp-h1-beat { text-wrap: balance; } /* About hero: the arch holds the heart-in-hand motif on an electric blue ground instead of a photo. Contain, not cover, so the motif never crops. */ .mp-framed--motif .wp-block-image { background: var(--wp--preset--color--electric-blue); border-radius: var(--wp--custom--radius--arch); } .mp-framed--motif .wp-block-image img { object-fit: contain; /* Robear (Jul 23): the motif should fill the arch more; 16% left it small. */ padding: 4%; box-sizing: border-box; } /* The arch frame is taller than it is wide, and insets differently. */ .mp-framed--arch { aspect-ratio: 712 / 760; } .mp-framed--arch .wp-block-image { left: 9.5%; top: 10.5%; width: 81%; height: 85%; } .mp-framed--arch .wp-block-image img { border-radius: var(--wp--custom--radius--arch); } .mp-framed--arch::before { background-image: url(assets/images/frames/frame-arch.png); } /* Full-bleed photo band. Fixed viewport-relative height with the photo cropping to fill, so the band keeps its proportion at every width. */ .mp-photo-band .wp-block-image, .mp-photo-band figure { margin: 0; } .mp-photo-band img { display: block; width: 100%; height: clamp(240px, 38vw, 440px); object-fit: cover; } /* Michigan burst motif beside the 600,000 stat. Sits in a flex row, so it needs flex:none or it collapses to almost nothing. */ .mp-burst { flex: none; width: clamp(110px, 14vw, 170px); margin: 0; } .mp-burst img { width: 100%; height: auto; } /* Voter Hub countdown chip. Rendered by the [mp_countdown] shortcode. */ .mp-countdown { display: inline-block; background: var(--wp--preset--color--michigan-dusk); color: var(--wp--preset--color--blue-ink); border-radius: var(--wp--custom--radius--pill); padding: 11px 22px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase; } /* Voter Hub key dates band. Rendered by the [mp_key_dates] shortcode. Scrolls sideways on small screens, which is how the mockup behaves. */ .mp-dates { list-style: none; margin: 0; padding: 4px 2px 18px; display: flex; gap: clamp(14px, 2vw, 20px); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .mp-date { flex: none; width: clamp(208px, 23vw, 236px); aspect-ratio: 1; scroll-snap-align: start; border-radius: 10px; padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; gap: 2px; } .mp-date--electric-blue { background: var(--wp--preset--color--electric-blue); color: var(--wp--preset--color--ceramic-tan); } .mp-date--terracota { background: var(--wp--preset--color--terracota); color: var(--wp--preset--color--blue-ink); } .mp-date__month { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 19px; letter-spacing: 0.12em; text-transform: uppercase; } .mp-date__day { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: clamp(64px, 7vw, 84px); line-height: 0.95; letter-spacing: -0.02em; } .mp-date__desc { margin-top: auto; font-family: var(--wp--preset--font-family--body); font-size: 16px; line-height: 1.42; letter-spacing: 0.02em; text-wrap: pretty; } /* Big square action links on the Voter Hub. */ .mp-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 2vw, 20px); } .mp-action-grid .wp-block-button__link { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 110px; width: 100%; border-radius: var(--wp--custom--radius--lg); font-size: clamp(22px, 2.2vw, 26px); font-weight: 900; line-height: 1.15; text-wrap: pretty; } /* Dashed slot reserved for the third-party voter registration embed. */ .mp-embed-slot { border: 3px dashed var(--wp--preset--color--electric-blue); border-radius: var(--wp--custom--radius--lg); } /* ========================================================================== Candidate archive. Rendered by inc/candidates.php. ========================================================================== */ .mp-cand-section { padding: clamp(48px, 6vw, 80px) 0; } .mp-cand-inner { max-width: var(--wp--style--global--content-size); margin-inline: auto; padding-inline: var(--wp--preset--spacing--50); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px); } .mp-cand-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .mp-cand-head img { width: 56px; height: 56px; flex: none; } .mp-cand-head h2 { margin: 0; font-size: var(--wp--preset--font-size--heading-sm); } .mp-cand-rule { flex: 1; min-width: 80px; height: 3px; background: var(--wp--preset--color--terracota); } .mp-cand-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(18px, 2.5vw, 28px); } .mp-cand-card { position: relative; background: var(--wp--preset--color--tan-soft); border-radius: var(--wp--custom--radius--lg); overflow: hidden; box-shadow: 0 6px 18px rgba(5, 12, 59, 0.12); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 22px 28px; } /* Sections and cards share tan tones; on the tan-ground sections the cards stay the softer tone so they read as cards. */ .mp-cand-section.has-ceramic-tan-background-color .mp-cand-card { background: var(--wp--preset--color--tan-soft); } .mp-cand-card__papel { width: calc(100% + 44px); height: 16px; background: url(assets/images/dividers/papel-orange-down.png) repeat-x top center; background-size: auto 100%; } /* Headshot in the round seal, 186px, or blue initials when no photo yet. */ .mp-cand-photo { position: relative; width: 186px; aspect-ratio: 1; margin-top: 20px; } .mp-cand-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url(assets/images/frames/frame-round.png) no-repeat center / contain; } .mp-cand-photo img, .mp-cand-photo__initials { position: absolute; left: 13.5%; top: 13.5%; width: 73%; height: 73%; z-index: 2; border-radius: 50%; object-fit: cover; } .mp-cand-photo__initials { background: var(--wp--preset--color--electric-blue); color: var(--wp--preset--color--ceramic-tan); display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: 46px; } .mp-cand-name { margin-top: 16px; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: 26px; line-height: 1.05; text-transform: uppercase; color: var(--wp--preset--color--blue-ink); } .mp-cand-office { margin-top: 6px; font-family: var(--wp--preset--font-family--body); font-style: italic; font-size: 17px; line-height: 1.4; letter-spacing: 0.02em; color: var(--wp--preset--color--blue-ink); } /* The endorsement ribbon with notched ends. */ .mp-cand-ribbon { margin-top: 14px; background: var(--wp--preset--color--corazon-red); color: var(--wp--preset--color--blue-ink); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; padding: 9px 30px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%); } .mp-cand-blurb { margin: 14px 0 0; font-family: var(--wp--preset--font-family--body); font-size: 16px; line-height: 1.55; letter-spacing: 0.02em; color: var(--wp--preset--color--blue-ink); max-width: 34ch; } /* Campaign link on a candidate card. A quiet text link, not a second button. Pushed to the bottom so cards with and without a blurb line up. */ .mp-cand-link { margin-top: auto; padding-top: 12px; font-family: var(--wp--preset--font-family--body); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--wp--preset--color--electric-blue); text-decoration: underline; text-underline-offset: 3px; } .mp-cand-link:hover { color: var(--wp--preset--color--terracota-deep); } .mp-cand-link:focus-visible { outline: 2px solid var(--wp--preset--color--terracota); outline-offset: 3px; border-radius: 2px; } /* Eyebrow pill. The outlined chip above a headline. */ .mp-eyebrow-pill { display: inline-block; border: 2px solid var(--wp--preset--color--terracota); border-radius: var(--wp--custom--radius--pill); padding: 7px 16px; white-space: nowrap; } /* Header: sticky, per the mockup, with the nav in display type. Sticky must sit on the template-part wrapper: the inner .mp-header fills its parent exactly, and a sticky element can never move within a same-height parent, so pinning the inner element was a silent no-op (caught Jul 23 during the a11y pass). */ header.wp-block-template-part { position: sticky; top: 0; z-index: 80; } .mp-header { transition: padding 0.25s ease, box-shadow 0.25s ease; } /* Motion: the sticky header tightens once the page scrolls, toggled by assets/js/header-motion.js. The block writes its padding as an inline style, so the override needs !important. Deliberately quiet: less padding and a soft shadow as the terracotta rule settles, nothing more. */ .mp-header.is-scrolled { padding-top: 10px !important; padding-bottom: 10px !important; box-shadow: 0 4px 18px rgba(5, 12, 59, 0.14); } @media (prefers-reduced-motion: reduce) { .mp-header { transition: none; } } /* CTA labels never break mid-word into vertical pillars. */ .mp-header .wp-block-button__link { white-space: nowrap; } /* A11y review (Jul 23): the standalone ESPAÑOL / ENGLISH links measured ~21px tall against WCAG 2.5.8's 24px minimum for standalone targets. Vertical padding lifts the hit area without moving the rendered text line. */ .mp-header .wp-block-polylang-language-switcher a { display: inline-block; padding-top: 4px; padding-bottom: 4px; } /* Header contents stay on one line rather than wrapping into stacked rows. */ .mp-header > .wp-block-group { flex-wrap: nowrap; gap: clamp(12px, 2vw, 24px); } .mp-header .wp-block-navigation { flex-wrap: nowrap; } /* Nav labels stay on one line. Two-word items must not stack. */ .mp-header .wp-block-navigation .wp-block-navigation-item__content { white-space: nowrap; } .mp-header .wp-block-navigation__container { gap: clamp(10px, 1.3vw, 18px); } /* The mockup switches to a hamburger below 1240px, not at WordPress's default 600px. Below that width the full nav, the Donate button, and the member button all come off; the logo, language switcher, and hamburger remain. Both CTAs stay reachable in the page bands and the footer. */ @media (max-width: 1239px) { .mp-header .wp-block-buttons { display: none; } .mp-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .mp-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } .mp-header .wp-block-navigation a { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--blue-ink); text-decoration: none; padding-bottom: 4px; border-bottom: 3px solid transparent; transition: color 0.2s ease, border-bottom-color 0.2s ease; } .mp-header .wp-block-navigation a:hover, .mp-header .wp-block-navigation a:focus-visible { color: var(--wp--preset--color--electric-blue); border-bottom-color: var(--wp--preset--color--terracota); } /* The page you are on gets the terracota underline. */ .mp-header .wp-block-navigation .current-menu-item > a { border-bottom-color: var(--wp--preset--color--terracota); } /* ========================================================================== Mobile menu overlay. The bare core overlay is three small links floating in tan space. This makes it a place: display-scale links with terracota hairlines, the site's actions along for the ride (cloned in by header-motion.js), and the papel picado grounding the bottom edge. ========================================================================== */ .mp-header .wp-block-navigation__responsive-container.is-menu-open { width: 100%; box-sizing: border-box; overflow-x: hidden; padding: 16px 24px calc(clamp(26px, 6vw, 42px) + 24px); background-image: url(assets/images/dividers/papel-blue.png); background-repeat: repeat-x; background-position: bottom center; background-size: auto clamp(26px, 6vw, 42px); } .mp-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 36px; align-items: stretch; gap: 30px; overflow-y: auto; } .mp-header .is-menu-open .wp-block-navigation__container { display: block !important; width: 100%; } .mp-header .is-menu-open .wp-block-navigation-item { display: block; width: 100%; border: none; } .mp-header .is-menu-open .wp-block-navigation-item a { display: block; width: 100%; font-size: clamp(1.8rem, 7.5vw, 2.6rem); line-height: 1.15; padding: 18px 4px !important; border-top: 0 !important; border-bottom: 1px solid var(--wp--preset--color--terracota) !important; white-space: normal; } .mp-header .is-menu-open .current-menu-item > a { color: var(--wp--preset--color--terracota-deep); } /* The close control gets a finger-sized target. */ .mp-header .wp-block-navigation__responsive-container-close { padding: 12px; } .mp-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; } /* Core only turns the open menu into a fixed overlay below its own 600px breakpoint. This theme hamburgers at 1239px, so between 600 and 1239 the menu opened INLINE and shoved the header tall. Recreate the fixed overlay across the whole hamburger range. */ @media (max-width: 1239px) { .mp-header .wp-block-navigation__responsive-container.is-menu-open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100000; background-color: var(--wp--preset--color--ceramic-tan); overflow-y: auto; } .mp-header .is-menu-open .wp-block-navigation__responsive-close, .mp-header .is-menu-open .wp-block-navigation__responsive-dialog { display: flex; flex-direction: column; width: 100%; height: 100%; } .mp-header .is-menu-open .wp-block-navigation__responsive-container-close { display: flex; align-self: flex-end; } } /* The cloned utility cluster: full-width actions under the links. Hidden everywhere except inside the OPEN overlay, otherwise it renders inline in the desktop header as a duplicate. The clone keeps the bar's layout classes, so the stacking needs to outrank the generated flex-row styles. */ .mp-overlay-utility { display: none !important; } .mp-header .is-menu-open .mp-overlay-utility { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 18px; width: 100%; } .mp-header .is-menu-open .mp-overlay-utility .wp-block-buttons { display: flex !important; flex-direction: column; gap: 12px; width: 100%; } .mp-header .is-menu-open .mp-overlay-utility .wp-block-button { width: 100%; } .mp-header .is-menu-open .mp-overlay-utility .wp-block-button .wp-block-button__link { display: block; width: 100%; text-align: center; padding: 16px 20px; font-size: 1rem; } /* Language toggle, larger and centered in the overlay. */ .mp-header .is-menu-open .mp-overlay-utility ul { display: flex; justify-content: center; gap: 22px; font-size: 1.05rem; margin: 0; } /* Footer: five columns that wrap down to one on phones. */ .mp-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(32px, 5vw, 56px); } .mp-footer-label { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .mp-footer-nav a { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--ceramic-tan); text-decoration: none; } .mp-footer-nav a:hover { color: var(--wp--preset--color--white); text-decoration: underline; } /* Footer links and mail on the blue ground stay tan, not link blue. */ .wp-block-group.has-electric-blue-background-color a, .wp-block-group.has-blue-ink-background-color a { color: var(--wp--preset--color--ceramic-tan); } /* The compliance disclaimer placeholder: visibly unfinished on purpose. */ .mp-disclaimer { border: 2px dashed rgba(252, 224, 186, 0.45); border-radius: var(--wp--custom--radius--md); padding: 8px 14px; max-width: 62ch; } /* Round social chips. */ .mp-social-chip a, .mp-social-chip { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 3px solid var(--wp--preset--color--blue-ink); border-radius: 50%; text-decoration: none; font-family: var(--wp--preset--font-family--display); font-weight: 700; } .mp-social-chip a:hover { background: var(--wp--preset--color--blue-ink); color: var(--wp--preset--color--michigan-dusk); } /* Tan-outline variant for the blue footer ground. */ .mp-social-chip--tan a, .mp-social-chip--tan { border-color: var(--wp--preset--color--ceramic-tan); color: var(--wp--preset--color--ceramic-tan); } .mp-social-chip--tan a:hover { background: var(--wp--preset--color--ceramic-tan); color: var(--wp--preset--color--electric-blue); } /* The signup card sitting on a colored band. */ .mp-card { border: 3px solid var(--wp--preset--color--blue-ink); border-radius: var(--wp--custom--radius--lg); } /* Language switcher. Polylang outputs a bare