/* * Theme overrides. * * Loaded AFTER the Webflow stylesheets so it wins the cascade. Holds: * 1. The responsive type block that lived inline in the Webflow . * 2. Splide tweaks that were inline in the export. * 3. Reveal states for the interactions re-authored in main.js (the elements * were display:none / max-height:0 and were opened by the dropped runtime). * 4. Gravity Forms styled to match the Webflow form inputs/buttons. */ /* ------------------------------------------------------------------ * * 1. Responsive type (was inline in every Webflow page ) * ------------------------------------------------------------------ */ .menu-link { font-size: clamp(10px, 1.5vw, 16px); } .detail-text { font-size: clamp(10px, 1vw, 14px); } .hero-heading { font-size: clamp(120px, 9vw, 170px); line-height: clamp(120px, 9vw, 180px); } .trump-small { font-size: clamp(30px, 2vw, 50px); line-height: clamp(35px, 2vw, 50px); } .trump-red { font-size: clamp(100px, 12vw, 180px); line-height: clamp(100px, 11vw, 180px); } .trump-blue { font-size: clamp(80px, 7vw, 150px); line-height: clamp(80px, 7vw, 140px); } .white-heading { font-size: clamp(20px, 3vw, 50px); line-height: clamp(30px, 3.5vw, 60px); } .join-team-bold { font-size: clamp(70px, 6vw, 120px); line-height: clamp(80px, 7vw, 130px); } /* ------------------------------------------------------------------ * * 2. Splide (was inline in the export) * ------------------------------------------------------------------ */ .splide__track { overflow: visible; } /* About Abe photo strip (slider2): the thumbnails carry HTML width/height attributes (e.g. 640x410) but the export never set height:auto, so once max-width shrank each image to the column width its height stayed pinned — every photo was stretched into a too-tall, distorted slide. height:auto restores the natural proportion (the strip drops from ~410px to ~185px). */ .about-abe-images .splide__slide.slider2 img { height: auto; } /* ------------------------------------------------------------------ * * Media Hits coverflow (home slider1 + media-page slider10 / slider3) * * Side slides recede (scaled down + dimmed); the centered active slide is * enlarged with a shadow. updateOnMove + a shared easing make the scale * animate together with the track for a smooth coverflow. * ------------------------------------------------------------------ */ :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__list { align-items: center; } :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__slide .slide-video { transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1), opacity .6s ease, box-shadow .6s ease; transform: scale(.8); opacity: .45; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__slide.is-active .slide-video { transform: scale(1.04); opacity: 1; box-shadow: 0 22px 55px rgba(0, 0, 0, .4); } :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__slide .video-title { transition: opacity .6s ease, transform .6s ease; opacity: .35; transform: translateY(-6px); } :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__slide.is-active .video-title { opacity: 1; transform: none; } /* Arrows: centered, subtle, with hover. */ :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__arrows { display: flex; justify-content: center; gap: 24px; margin-top: 18px; } :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__arrow { transition: transform .2s ease, opacity .2s ease; opacity: .85; } :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__arrow:hover { transform: scale(1.18); opacity: 1; } :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__arrow:disabled { opacity: .3; } /* Pagination dots. */ :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__pagination { position: static; margin-top: 22px; gap: 6px; } :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__pagination__page { background: rgba(20, 33, 67, .25); width: 9px; height: 9px; /* No per-dot margin: the container's `gap` already spaces them. Doubling up (margin + gap) overflowed the row on mobile and wrapped the dots. */ margin: 0; transition: transform .2s ease, background-color .2s ease; opacity: 1; } :is(.media-hits, .media-hits-top-page, .media-hits-mobile) .splide__pagination__page.is-active { background: var(--red); transform: scale(1.3); } /* Media Hits video embeds: Webflow's .w-video expects an inline padding-top aspect-ratio that the WP oEmbed output doesn't carry, so give the container a 16:9 box and let the absolutely-positioned iframe fill it. */ .slide-video { position: relative; width: 100%; height: auto; padding-top: 0; aspect-ratio: 16 / 9; overflow: hidden; } .slide-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Click-to-load YouTube facade (loaded instead of 14+ live players). */ .yt-lazy { position: absolute; inset: 0; cursor: pointer; background: #000; } .yt-lazy__thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .yt-lazy__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 50px; padding: 0; border: 0; border-radius: 14px; background: rgba(0, 0, 0, .7); cursor: pointer; transition: background-color .2s ease, transform .2s ease; } .yt-lazy:hover .yt-lazy__play { background: var(--red); transform: translate(-50%, -50%) scale(1.06); } .yt-lazy__play::before { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; } .yt-lazy__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ------------------------------------------------------------------ * * 3. Interaction reveal states (replace the dropped Webflow runtime) * ------------------------------------------------------------------ */ /* Mobile menu panel (base + breakpoint rules set display:none). */ .mobile-dropdown.is-open { display: flex; flex-direction: column; } body.no-scroll { overflow: hidden; } /* Endorsement bio popup (base rule sets display:none). */ .pop-up-block.is-open { display: flex; } /* Accordion: collapsed by default; main.js sets max-height to open. */ .fs_accordion-2_content { max-height: 0; } /* Hamburger -> X animation on open (optional polish). */ .drop-down-holder { transition: transform .2s ease; } .drop-down-holder .line-menu { transition: transform .2s ease, opacity .2s ease; } .drop-down-holder.is-open .line-menu.top { transform: translateY(16px) rotate(45deg); } .drop-down-holder.is-open .line-menu.middle { opacity: 0; } .drop-down-holder.is-open .line-menu.bottom { transform: translateY(-16px) rotate(-45deg); } /* Solid navy fallback so the mobile menu never flashes empty while its background photo (headshot-background.png) is still loading. */ .mobile-dropdown { background-color: #142143; } /* ------------------------------------------------------------------ * * 3b. Collapsing sticky header * * The header sticks to the top of the viewport and shrinks once the page is * scrolled (main.js toggles .is-scrolled). Heights mirror the Webflow header * heights per breakpoint so it only ever gets smaller. * ------------------------------------------------------------------ */ .header { position: sticky; top: 0; z-index: 200; transition: height .3s ease, box-shadow .3s ease; } /* Drive the logo with a single animatable `width` so the shrink is one smooth interpolation locked to the header's height transition. The Webflow sheet sizes the logo as width:5vw + min/max-width; transitioning those two bounds makes the *effective* (clamped) width finish ~2/3 through and kink while the header keeps collapsing — the glitch. Fold the bounds into clamp() on width, neutralise the raw min/max, and transition width alone. Rest and scrolled sizes are unchanged; only the motion is. */ .header .image { width: clamp(120px, 5vw, 160px); min-width: 0; max-width: none; transition: width .3s ease; } .header.is-scrolled { height: 96px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); } .header.is-scrolled .image { width: clamp(60px, 5vw, 92px); } @media screen and (max-width: 991px) { .header.is-scrolled { height: 84px; } } @media screen and (max-width: 767px) { .header.is-scrolled { height: 72px; } .header .image { width: 90px; } /* preserve Webflow's mobile rest size */ } @media screen and (max-width: 479px) { .header.is-scrolled { height: 64px; } } /* Keep modals above the sticky header. */ .pop-up-block { z-index: 1000; } /* ------------------------------------------------------------------ * * 4. Gravity Forms * * GF's own CSS is disabled (see inc/gravityforms.php) and the inputs/selects/ * buttons carry the real Webflow classes (.input-field.w-input, .select-field, * .donate-button ...) so the Webflow stylesheet does the visual styling. This * block only supplies layout: the grid, hidden labels, consent, and the small * structural bits GF's CSS used to provide. * ------------------------------------------------------------------ */ .hero-form .gform_wrapper, .join-abe-content .gform_wrapper, .volunteer-form .gform_wrapper, .contact-us-form .gform_wrapper { width: 100%; } /* 12-column grid built from GF's semantic width classes (half=6, third=4, full=12). */ .hero-form .gform_fields, .join-abe-content .gform_fields, .volunteer-form .gform_fields, .contact-us-form .gform_fields { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 14px; margin: 0; padding: 0; list-style: none; } .gform_wrapper .gfield--width-full { grid-column: span 12; } .gform_wrapper .gfield--width-two-thirds { grid-column: span 8; } .gform_wrapper .gfield--width-half { grid-column: span 6; } .gform_wrapper .gfield--width-third { grid-column: span 4; } .gform_wrapper .gfield--width-quarter { grid-column: span 3; } /* Stack every field on small screens. */ @media screen and (max-width: 767px) { .hero-form .gform_wrapper .gfield, .join-abe-content .gform_wrapper .gfield, .volunteer-form .gform_wrapper .gfield, .contact-us-form .gform_wrapper .gfield { grid-column: 1 / -1; } } /* Kill the doubled bottom margin from .w-input now that the grid gaps space rows. */ .hero-form .gfield .ginput_container, .join-abe-content .gfield .ginput_container, .volunteer-form .gfield .ginput_container, .contact-us-form .gfield .ginput_container { margin: 0; } .hero-form .gfield input, .hero-form .gfield select, .join-abe-content .gfield input, .volunteer-form .gfield input, .volunteer-form .gfield select, .contact-us-form .gfield input, .contact-us-form .gfield textarea { margin-bottom: 0; } /* Sensible control height. Webflow's .input-field (line-height:50px) and .vol-form-enter (large padding) — with height:auto — made the fields oversized; normalize line-height + padding so inputs land around ~55px. */ .hero-form .gform_wrapper input, .hero-form .gform_wrapper select, .join-abe-content .gform_wrapper input, .join-abe-content .gform_wrapper select, .volunteer-form .gform_wrapper input, .volunteer-form .gform_wrapper select, .volunteer-form .gform_wrapper textarea, .contact-us-form .gform_wrapper input, .contact-us-form .gform_wrapper select, .contact-us-form .gform_wrapper textarea { height: auto; line-height: 1.4; padding-top: 15px; padding-bottom: 15px; } /* White placeholders on the dark hero/join forms (Webflow .w-input default is grey). */ .hero-form .gform_wrapper input::placeholder, .join-abe-content .gform_wrapper input::placeholder { color: #fff; opacity: .85; } /* Hide field labels (Webflow used placeholders); keep the volunteer "I can help with" heading. */ .hero-form .gfield_label, .join-abe-content .gfield_label, .volunteer-form .gfield--type-text .gfield_label, .volunteer-form .gfield--type-email .gfield_label, .volunteer-form .gfield--type-phone .gfield_label, .volunteer-form .gfield--type-select .gfield_label, .volunteer-form .gfield--type-checkbox:last-of-type .gfield_label, .contact-us-form .gfield--type-text .gfield_label, .contact-us-form .gfield--type-email .gfield_label, .contact-us-form .gfield--type-phone .gfield_label, .contact-us-form .gfield--type-textarea .gfield_label, .contact-us-form .gfield--type-checkbox .gfield_label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* Submit button: reuse the Webflow .donate-button appearance, centered & sized. */ .hero-form .gform_footer, .join-abe-content .gform_footer, .volunteer-form .gform_footer, .contact-us-form .gform_footer { display: flex; justify-content: center; margin-top: 24px; padding: 0; } .hero-form .gform_footer .donate-button, .join-abe-content .gform_footer .donate-button, .volunteer-form .gform_footer .donate-button, .contact-us-form .gform_footer .donate-button { width: auto; padding: 16px 70px; font-family: Anton, sans-serif; font-size: 22px; line-height: 24px; letter-spacing: 5px; text-transform: uppercase; background-color: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; } .volunteer-form .gform_footer .donate-button, .contact-us-form .gform_footer .donate-button { color: var(--navy); } .hero-form .gform_footer .donate-button, .join-abe-content .gform_footer .donate-button { color: #fff; } .gform_footer .donate-button:hover { background-color: var(--red); color: #fff; } /* The Webflow header rule ".donate-button { display: none }" at <=991px (meant to hide the desktop header CTA on mobile/tablet) also caught the form submit buttons, since they reuse the .donate-button class — so on mobile the campaign forms had no visible submit control. Re-show the submit button on those forms. */ @media screen and (max-width: 991px) { .hero-form .gform_footer .donate-button, .join-abe-content .gform_footer .donate-button, .volunteer-form .gform_footer .donate-button, .contact-us-form .gform_footer .donate-button { display: flex; } } /* Consent checkbox: box on the left, small italic text on the right, divider above. */ .hero-form .gfield--type-checkbox, .join-abe-content .gfield--type-checkbox, .volunteer-form .gfield--type-checkbox:last-of-type, .contact-us-form .gfield--type-checkbox { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 18px; margin-top: 6px; } .volunteer-form .gfield--type-checkbox:last-of-type, .contact-us-form .gfield--type-checkbox { border-top-color: rgba(20, 33, 67, .15); } .hero-form .gfield--type-checkbox .gchoice, .join-abe-content .gfield--type-checkbox .gchoice, .volunteer-form .gfield--type-checkbox:last-of-type .gchoice, .contact-us-form .gfield--type-checkbox .gchoice { display: flex; align-items: flex-start; gap: 12px; text-align: left; margin: 0; list-style: none; } .hero-form .gfield--type-checkbox .gchoice input, .join-abe-content .gfield--type-checkbox .gchoice input, .volunteer-form .gfield--type-checkbox:last-of-type .gchoice input, .contact-us-form .gfield--type-checkbox .gchoice input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; } .hero-form .gfield--type-checkbox .gchoice label, .join-abe-content .gfield--type-checkbox .gchoice label, .volunteer-form .gfield--type-checkbox:last-of-type .gchoice label, .contact-us-form .gfield--type-checkbox .gchoice label { font-family: Roboto, sans-serif; font-style: italic; font-size: .75rem; line-height: 1rem; font-weight: 400; color: #9b9b9b; } /* Volunteer "I CAN HELP WITH..." — bordered box with a 3-column checkbox grid. */ .volunteer-form .gfield--type-checkbox:not(:last-of-type) { border: 2px solid #1421431a; padding: 30px 40px; margin-top: 4px; } .volunteer-form .gfield--type-checkbox:not(:last-of-type) .gfield_label { display: block; font-family: Roboto, sans-serif; font-weight: 900; font-size: 1.5rem; color: var(--navy); text-transform: uppercase; margin-bottom: 24px; } .volunteer-form .gfield--type-checkbox:not(:last-of-type) .gfield_checkbox { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 20px 24px; margin: 0; padding: 0; list-style: none; } .volunteer-form .gfield--type-checkbox:not(:last-of-type) .gchoice { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--navy); } .volunteer-form .gfield--type-checkbox:not(:last-of-type) .gchoice input { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--red); } .volunteer-form .gfield--type-checkbox:not(:last-of-type) .gchoice label { font-family: Roboto, sans-serif; font-weight: 700; font-size: .95rem; line-height: 1.2; text-transform: uppercase; } @media screen and (max-width: 767px) { .volunteer-form .gfield--type-checkbox:not(:last-of-type) .gfield_checkbox { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; } } /* Housekeeping now that GF's own CSS is off. */ .gform_wrapper .gform_validation_container, .gform_wrapper .gfield_visibility_hidden, .gform_wrapper .gform_hidden, .gform_wrapper .gform_required_legend, .gform_wrapper .gfield--type-honeypot { display: none !important; } .gform_wrapper .gfield_required { color: var(--red); } .gform_wrapper .gfield_validation_message, .gform_wrapper .validation_message { color: var(--red); font-family: Roboto, sans-serif; font-size: .75rem; margin-top: 4px; } .gform_confirmation_message { font-family: Roboto, sans-serif; font-size: 1.1rem; text-align: center; padding: 20px 0; } /* Confirmation text is white on the dark hero/join forms (navy bg); the light contact/volunteer forms keep the default dark text. */ .hero-form .gform_confirmation_message, .join-abe-content .gform_confirmation_message { color: var(--white); } /* SMS-consent legal links: inherit the label color, underline to distinguish. */ .hero-form .gfield--type-checkbox .gchoice label a, .join-abe-content .gfield--type-checkbox .gchoice label a, .volunteer-form .gfield--type-checkbox:last-of-type .gchoice label a, .contact-us-form .gfield--type-checkbox .gchoice label a { color: inherit; text-decoration: underline; } /* ------------------------------------------------------------------ * * 5. Motion system (entrance reveals + hover audit) * * The Webflow IX2 runtime was dropped, so the site had no entrance * animations. This block re-introduces them with a tiny, dependency-free * engine and completes the hover states. * * How it works: * - Targets start hidden (opacity:0 + a downward TRANSLATE) only when JS is * on (html.js, set pre-paint in header.php) AND motion is allowed. main.js * (initScrollReveal) adds .is-revealed via IntersectionObserver. * - Reveal uses the `translate` property; hover uses `transform`. They are * independent CSS properties, so card/button hover lifts compose cleanly * with the reveal and never fight it on the cascade. * - Gating the *hidden* rule behind prefers-reduced-motion:no-preference * means reduced-motion users (and no-JS users) always see full content — * nothing can get stuck invisible. * * KEEP THE SELECTOR LISTS BELOW IN SYNC with REVEAL_BLOCKS / REVEAL_GROUPS * in assets/js/main.js (initScrollReveal). * ------------------------------------------------------------------ */ :root { --reveal-dur: .6s; --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); /* matches the media coverflow */ --reveal-shift: 20px; --reveal-stagger: 90ms; --hover-dur: .2s; --hover-ease: ease; } @media (prefers-reduced-motion: no-preference) { /* Hidden state — block targets + staggered group children. */ html.js :is( .hero-content, .link-block, .join-the-team-mobile, .trump-embed-div, .trump-text, .mobile-trump, .mobile-endorse-trump, .tweet-replica.mobile, .abe-header, .text-block-underlay, .join-abe-content, .media-hits-container, .header-with-image-block, .about-abe, .about-abe-mobile, .about-abe-images, .page-heading-contents, .volunteer-page-content, .contact-us-section, .media-hits-top-page, .footer-content, .mobile-footer ), html.js :is( .buttons-grid, .collection-list-2, .collection-list-3 ) > * { opacity: 0; translate: 0 var(--reveal-shift); transition: opacity var(--reveal-dur) var(--reveal-ease), translate var(--reveal-dur) var(--reveal-ease); transition-delay: calc(var(--reveal-index, 0) * var(--reveal-stagger)); } /* Revealed state (added by main.js when the element scrolls into view). */ html.js :is( .hero-content, .link-block, .join-the-team-mobile, .trump-embed-div, .trump-text, .mobile-trump, .mobile-endorse-trump, .tweet-replica.mobile, .abe-header, .text-block-underlay, .join-abe-content, .media-hits-container, .header-with-image-block, .about-abe, .about-abe-mobile, .about-abe-images, .page-heading-contents, .volunteer-page-content, .contact-us-section, .media-hits-top-page, .footer-content, .mobile-footer ).is-revealed, html.js :is( .buttons-grid, .collection-list-2, .collection-list-3 ) > .is-revealed { opacity: 1; /* `none`, not `0 0`: a zero translate still creates a stacking context, which would trap z-indexed children (e.g. the overflowing signature in .link-block) inside the element. `none` clears it after the reveal. */ translate: none; } } /* ---- Hover audit -------------------------------------------------- * * (a) Smooth out the 4 hovers that changed color/opacity abruptly. * theme-overrides.css wins the cascade, so we only add the missing * transition; the Webflow :hover rules still supply the end state. * ------------------------------------------------------------------- */ .footer-link, .mobile-footer-link, .link-2, .link-4 { transition: color var(--hover-dur) var(--hover-ease), opacity var(--hover-dur) var(--hover-ease); } .fs_checkbox-1_field { transition: color var(--hover-dur) var(--hover-ease), border-color var(--hover-dur) var(--hover-ease); } .mobile-menu-link { transition: color var(--hover-dur) var(--hover-ease); } /* (b) Base transitions + affordances for the elements getting NEW hovers * (kept out of the hover media query so cursor/transition always apply). */ .link-3, .text-link-site { transition: color var(--hover-dur) var(--hover-ease), transform var(--hover-dur) var(--hover-ease); } .collection-item-3:not([data-logo="1"]) { cursor: pointer; transition: transform var(--hover-dur) var(--hover-ease), box-shadow var(--hover-dur) var(--hover-ease); } /* Article (news) cards are wide, background-less rows, so a lift + shadow just floats an ugly halo. Instead: zoom the image inside its box, tint the title. */ .collection-item-4 .image-div { overflow: hidden; } .collection-item-4 .image-12 { transition: transform .4s var(--reveal-ease); } .text-block-25 { transition: color var(--hover-dur) var(--hover-ease); } .badge-logo .image-24, .collection-item-3[data-logo="1"] .image-24 { transition: transform var(--hover-dur) var(--hover-ease), opacity var(--hover-dur) var(--hover-ease); } .website-logo .image, .link-block .image-2, .link-block .text-block-2.arrow, .join-the-team-mobile .image-16 { transition: transform var(--hover-dur) var(--hover-ease); } /* (c) The hover motion itself — only on true hover devices, and only when * motion is allowed (so touch never sticks and reduced-motion opts out). */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { /* Endorsement people: gentle lift (compact tiles suit it). */ .collection-item-3:not([data-logo="1"]):hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(20, 33, 67, .14); } /* News cards: zoom the image within its box + tint the headline. */ .collection-item-4:hover .image-12 { transform: scale(1.06); } .collection-item-4:hover .text-block-25 { color: var(--red); } /* Logo tiles brighten + nudge up. */ .collection-item-3[data-logo="1"]:hover .image-24 { transform: scale(1.05); opacity: 1; } /* Text CTAs slide toward their arrow. */ .link-3:hover { transform: translateX(3px); } .text-link-site:hover { transform: translateX(4px); color: var(--red); } /* Arrowed CTAs: nudge the arrow. */ .link-block:hover .image-2, .link-block:hover .text-block-2.arrow, .join-the-team-mobile:hover .image-16 { transform: translateX(5px); } /* Site logo. */ .website-logo:hover .image { transform: scale(1.04); } } /* ------------------------------------------------------------------ * * Client feedback fixes (mobile) * ------------------------------------------------------------------ */ /* (a) About page mobile bio: the Webflow export gave the body copy only a * right margin, so the paragraph sat flush against the left edge. Add a * matching left gutter so the text is inset on both sides. The mobile * bio (.about-abe-mobile) renders at <=991px, so scope the fix there. */ @media screen and (max-width: 991px) { .text-block-8.mobile { margin-left: 20px; } } /* (b) Mobile menu casing: the desktop .menu-link uppercases via CSS, but the * mobile .mobile-menu-link did not — so items rendered with whatever case * each WP menu label was saved in (HOME/MEDIA/VOLUNTEER vs About/Issues). * Uppercase here so the mobile menu is consistent, matching desktop. */ .mobile-menu-link { text-transform: uppercase; } /* (c) Mobile footer menu: the links sit in a 2-column grid and each stretches * to fill its cell, but the export left the text left-aligned so the items * hugged the left of each column. Center the text within each column. */ @media screen and (max-width: 991px) { .mobile-footer-link { text-align: center; } } /* ------------------------------------------------------------------ * * Footer reveal (desktop) * * The footer is pinned to the bottom of the viewport BEHIND the page, and the * content (wrapped in .site-reveal-wrap, an opaque layer) scrolls up to uncover * it at the end of the page. --footer-h is the footer's measured height, set by * initFooterReveal() in main.js so exactly that much space is reserved below the * content and the footer is fully revealed at the bottom. Desktop only (>=992px), * matching the breakpoint where the desktop .footer-content (not .mobile-footer) * shows; below that the footer stays in normal flow. * ------------------------------------------------------------------ */ @media screen and (min-width: 992px) { .footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; } .site-reveal-wrap { position: relative; z-index: 1; background-color: #fff; } /* Reserves the footer's height as real scroll space so the pinned footer can be scrolled into view. A transparent in-flow spacer is used (not a margin on the wrap — that collapses into and adds no scroll height; not padding on the wrap — its opaque background would hide the footer and its box would still intercept clicks). The positioned footer (z-index:0) paints above this non-positioned spacer, so footer links stay clickable. --footer-h is set by initFooterReveal() in main.js; 0 until then / if JS is off. */ .footer-reveal-spacer { height: var(--footer-h, 0px); } }