/* ========================================================================== ULA INNER PAGES (Phase 6) - loaded on every page except the front page. Rules key off CONTAINER classes only (Color Sections), never classes on text: .ula-split-intro 600px text | 550px picture (Our Programs, Become a Student, About Us, Become a Tutor) .ula-program-overview / .ula-program-cards Our Programs / Become a Student .ula-about-mission cream band with 5 value icons - desktop hover pop-ups, mobile tap accordion .ula-text-section H2 + full-width copy (About history/work, Donate more ways, Tutor why/requirements) .ula-tutor-testimonials / .ula-tutor-cta Become a Tutor .ula-donate-intro / .ula-donate-options Donate Spacing values are the Figma frame distances at 1440 (see docs/PHASE6.md). ========================================================================== */ /* ---- shared Enfold resets inside our grid sections ---- */ #top :is(.ula-split-intro, .ula-program-overview, .ula-program-cards, .ula-about-mission, .ula-text-section, .ula-tutor-testimonials, .ula-tutor-cta, .ula-donate-intro, .ula-impact-intro, .ula-donate-options) .entry-content-wrapper::before, #top :is(.ula-split-intro, .ula-program-overview, .ula-program-cards, .ula-text-section, .ula-donate-options, .ula-two-col-text) .entry-content-wrapper::after { display: none; } #top :is(.ula-split-intro, .ula-program-overview, .ula-program-cards, .ula-about-mission, .ula-text-section, .ula-tutor-testimonials, .ula-tutor-cta, .ula-donate-intro, .ula-impact-intro, .ula-donate-options) :is(.avia_textblock, .av-special-heading, .avia-button-wrap, .avia-image-container, .avia_image) { margin: 0; } #top :is(.ula-split-intro, .ula-program-overview, .ula-about-mission, .ula-text-section, .ula-tutor-testimonials, .ula-tutor-cta, .ula-donate-intro, .ula-impact-intro) .special-heading-border { display: none; } #top :is(.ula-split-intro, .ula-program-overview, .ula-program-cards, .ula-about-mission, .ula-text-section, .ula-tutor-testimonials, .ula-tutor-cta, .ula-donate-intro, .ula-impact-intro, .ula-donate-options) .flex_column { margin: 0; float: none; } /* Enfold floats the heading text, so the wrapper has no height of its own: make it contain its heading */ #top :is(.ula-split-intro, .ula-program-overview, .ula-about-mission, .ula-text-section, .ula-tutor-testimonials, .ula-tutor-cta, .ula-donate-intro, .ula-impact-intro) .av-special-heading { display: flow-root; } #top :is(.ula-split-intro, .ula-text-section, .ula-donate-options, .ula-tutor-cta) .avia-button-wrap { display: block; line-height: 0; } #top :is(.ula-split-intro, .ula-text-section, .ula-donate-options, .ula-tutor-cta) .avia-button { margin: 0; } #top :is(.ula-split-intro, .ula-program-overview, .ula-text-section, .ula-donate-intro, .ula-impact-intro, .ula-donate-options, .ula-program-cards) p { margin: 0 0 26px; } #top :is(.ula-split-intro, .ula-program-overview, .ula-text-section, .ula-donate-intro, .ula-impact-intro, .ula-donate-options, .ula-program-cards) p:last-child { margin-bottom: 0; } #top :is(.ula-split-intro, .ula-program-overview, .ula-text-section, .ula-donate-intro, .ula-impact-intro, .ula-donate-options, .ula-program-cards, .ula-about-mission, .ula-tutor-testimonials, .ula-tutor-cta) :is(h1, h2), #top .ula-program-cards h3, #top .ula-donate-options h3, #top .ula-involve-cards h3 { margin: 0; padding: 0; } /* Page content LEADS (first headline under page-intro): Matthew — H1 Lora SemiBold 600 42/55 #28373F (same as homepage Why); mobile 32/46 (Dev Mode 2481:1791). Figma figjson merged lead nodes read Catamaran SemiBold 40/45; Matthew override wins sitewide. program-overview H2 = Lora 34/50 per Dev Mode 2481:1399 (not a page lead). */ #top :is(.ula-split-intro, .ula-donate-intro, .ula-impact-intro, .ula-involve-intro, .ula-contact-info, .ula-page-lead) h1, #top :is(.ula-split-intro, .ula-donate-intro, .ula-impact-intro, .ula-involve-intro, .ula-contact-info, .ula-page-lead) h1.av-special-heading-tag, #top :is(.ula-split-intro, .ula-donate-intro, .ula-impact-intro, .ula-involve-intro, .ula-contact-info, .ula-page-lead) .av-special-heading-tag { font-family: Lora, Georgia, "Times New Roman", serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 42px !important; line-height: 55px !important; color: var(--ula-heading, #28373F); margin: 0; } /* about-detail pages: only the lead is promoted to H1 in content; subsequent H2s keep text-section Lora 38/50 */ #top .ula-about-detail h1, #top .ula-about-detail h1.av-special-heading-tag { font-family: Lora, Georgia, "Times New Roman", serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 42px !important; line-height: 55px !important; color: var(--ula-heading, #28373F); margin: 0; } /* Program overview H2: Dev Mode node 2481:1399 = Lora SemiBold 34/50 (was Catamaran 40/45 from bad JSON dump). Mobile 2481:1793 = Lora SemiBold 26/38. Theme H3 token is Lora 34/50 — matches. */ #top .ula-program-overview h2, #top .ula-program-overview h2.av-special-heading-tag, #top .ula-program-overview .av-special-heading-tag { font-family: Lora, Georgia, "Times New Roman", serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 34px !important; line-height: 50px !important; color: var(--ula-heading); } /* Tan-background CARD titles: Catamaran SemiBold 600 28/42 (mobile 22/34). Program / donate / involve cards — NOT Lora (Matthew). */ #top .ula-program-cards h3, #top .ula-donate-options h3, #top .ula-involve-cards h3 { font-family: Catamaran, "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 600 !important; font-style: normal !important; font-size: 28px !important; line-height: 42px !important; color: var(--ula-heading); } #top .ula-program-cards h3, #top .ula-donate-options h3, #top .ula-involve-cards h3 { margin-bottom: 7px; } #top :is(.ula-split-intro, .ula-program-cards, .ula-tutor-testimonials, .ula-donate-intro, .ula-impact-intro, .ula-donate-options) :is(.avia-image-container-inner, .avia-image-overlay-wrap) { display: block; line-height: 0; } /* Space under headings is set on Enfold's .av-special-heading wrapper (the h2 itself is reset by ula-main.css) */ #top :is(.ula-split-intro, .ula-program-overview, .ula-donate-intro, .ula-impact-intro) .av-special-heading { margin-bottom: 7px; } #top .ula-text-section .av-special-heading, #top .ula-two-col-text .av-special-heading { margin-bottom: 21px; } #top .ula-about-mission .av-special-heading { margin-bottom: 25px; } #top .ula-tutor-testimonials .av-special-heading { margin-bottom: 29px; } #top .ula-tutor-cta .av-special-heading { margin-bottom: 31px; } /* ---- split intro ---- */ #top .ula-split-intro { padding: 56px 0 90px; } #top .ula-split-intro .entry-content-wrapper { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 550px); justify-content: space-between; column-gap: 50px; align-items: center; } #top .ula-split-intro .flex_column { width: auto; min-width: 0; } #top .ula-split-intro .avia-button-wrap { margin-top: 50px; } /* Split-intro CTAs: default orange (no Dev Mode–proven blue). */ #top .ula-split-intro img { display: block; width: 100%; max-width: 550px; height: auto; margin: 0 0 0 auto; } #top .ula-split-intro .avia-image-container, #top .ula-split-intro .avia-image-container .avia-image-overlay-wrap { display: block; width: 100%; } /* About intro media column: Vimeo in the 550px Figma slot, 16:9, no overflow. Enfold emits class avia-video-16:9 but its CSS targets .avia-video-16-9 — set ratio here. Placeholder ID: ULA_ABOUT_VIMEO_ID / docs/PHASE6.md (swap Video src on About Us when client delivers). */ #top .ula-about-intro .avia-video { width: 100%; max-width: 550px; margin: 0 0 0 auto; position: relative; aspect-ratio: 16 / 9; height: auto; overflow: hidden; } #top .ula-about-intro .avia-video .avia-iframe-wrap { position: absolute; inset: 0; width: 100%; height: 100% !important; padding-bottom: 0 !important; max-width: none; } #top .ula-about-intro .avia-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; } /* ---- Our Programs / Become a Student ---- */ #top .ula-program-overview { padding: 0 0 87px; } #top .ula-program-cards { padding: 0 0 60px; } #top .ula-program-cards .entry-content-wrapper { display: flex; flex-direction: column; gap: 60px; } #top .ula-program-cards .flex_column { position: relative; width: auto; box-sizing: border-box; display: grid; grid-template-columns: 150px minmax(0, 880px); column-gap: 40px; align-items: start; align-content: start; min-height: 253px; padding: 49px 120px 49px 60px; /* right pad matches Involve hotkey clearance */ background: var(--ula-cream); cursor: pointer; } #top .ula-program-cards .flex_column > * { min-width: 0; } #top .ula-program-cards .flex_column::before { display: none; } /* Enfold clearfix pseudo would become a grid item */ #top .ula-program-cards .avia-image-container, #top .ula-program-cards .av-image-caption-overlay { display: block; margin-top: 3px; } #top .ula-program-cards img { display: block; width: 150px; height: 150px; max-width: none; } #top .ula-program-cards .flex_column::after { /* hotkey arrow — same pattern as Get Involved */ /* Enfold grid.css .flex_column:after clearfix (visibility:hidden; 0×0) — override fully */ content: ""; position: absolute; right: 52px; top: 50%; bottom: auto; margin-top: -22px; width: 43px; height: 43px; visibility: visible; overflow: visible; z-index: 2; background: url('../images/icons/program-arrow.svg') no-repeat center / contain; pointer-events: none; transition: transform 0.2s ease; } /* Whole card is Enfold link-column (SR link + data-link-column-url). Hover/focus: slight raise + title accent. */ #top .ula-program-cards .flex_column { transition: transform 0.2s ease, box-shadow 0.2s ease; } #top .ula-program-cards .flex_column:hover, #top .ula-program-cards .flex_column:focus-within { transform: translateY(-8px); box-shadow: 0 10px 28px rgba(40, 55, 63, 0.14); } #top .ula-program-cards .flex_column:hover h3, #top .ula-program-cards .flex_column:focus-within h3 { color: var(--ula-burnt-orange); } #top .ula-program-cards .flex_column:hover::after, #top .ula-program-cards .flex_column:focus-within::after { transform: translateX(4px); } #top .ula-program-cards .flex_column:focus-within { outline: 2px solid var(--ula-blue); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { #top .ula-program-cards .flex_column, #top .ula-program-cards .flex_column::after { transition: none; } #top .ula-program-cards .flex_column:hover, #top .ula-program-cards .flex_column:focus-within { transform: none; } #top .ula-program-cards .flex_column:hover::after, #top .ula-program-cards .flex_column:focus-within::after { transform: none; } } /* ---- generic text section (H2 Lora 38/50 + copy) ---- */ #top .ula-text-section { padding: 120px 0 0; } #top .ula-text-section p { margin-bottom: 14px; } #top .ula-text-section .avia-button-wrap { margin-top: 50px; } #top .ula-about-history { padding-top: 120px; } #top .ula-about-work { padding-bottom: 60px; } /* About Annual Report: Matthew lock 7c95196 orange (dump blue not proven). */ #top .ula-about-work .avia-button, #top .ula-about-work .avia-button:link { background: var(--ula-burnt-orange); color: #fff; } #top .ula-about-work .avia-button:hover, #top .ula-about-work .avia-button:focus { background: #9a4120; color: #fff; } #top .ula-donate-more { padding-bottom: 60px; } /* ---- About Us ---- */ #top .ula-about-intro { padding: 47px 0 165px; } #top .ula-about-intro .entry-content-wrapper { align-items: start; } #top .ula-about-intro .av-special-heading-tag { max-width: 540px; } /* comp wraps the title after 'Literacy' */ #top .ula-about-mission { position: relative; z-index: 5; background: var(--ula-cream); padding: 50px 0 57px; overflow: visible; } #top .ula-about-mission .entry-content-wrapper { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; overflow: visible; } #top .ula-about-mission::before { /* line art, top-right (Figma ULA-Graphics-1 340x240 at x=1100,y=0) */ content: ""; position: absolute; right: 0; top: 0; width: 340px; height: 240px; background: url('../images/graphics/squiggle-burnt-orange.svg') no-repeat 100% 0 / 340px 240px; pointer-events: none; z-index: 0; } /* Desktop About (2481-1495) mission band crop shows top-right swirl only — no bottom-left in that frame. Mobile Group 66 adds ::after (see <=767). */ #top .ula-about-mission h2 { text-align: center; } #top .ula-about-mission .avia_textblock { text-align: center; } #top .ula-about-mission .avia_textblock p { margin: 0; } #top .ula-about-mission .togglecontainer { /* Figma Frame 34 heart row = 650px; keep grid that wide so 600px bubble offsets (--ula-m) match the comp */ display: grid; grid-template-columns: repeat(5, 106px); column-gap: 30px; width: 650px; max-width: 100%; margin: 50px auto 0; border: 0; position: relative; align-items: end; /* bottom-align icons */ justify-content: start; } /* display:contents so icons + 600px Figma bubble share one grid (comp Group 65 / Frame 74 = 600×225) */ #top .ula-about-mission :is(.av_toggle_section, .single_toggle) { display: contents; border: 0; overflow: visible !important; } #top .ula-about-mission .toggler { grid-row: 1; box-sizing: border-box; width: 106px; margin: 0; padding: 70px 0 3px; border: 0; background: transparent none no-repeat center top / 70px 60px; font: 600 22px/34px var(--ula-body-font); color: var(--ula-text); text-align: center; /* Dev Mode Catamaran SemiBold 22/34 */ cursor: pointer; position: relative; transform-origin: center bottom; transition: transform 0.2s ease; } #top .ula-about-mission .toggler .toggle_icon { display: none; } #top .ula-about-mission .av_toggle_section:nth-of-type(odd) .toggler { background-image: url('../images/icons/heart-orange.svg'); } #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggler { background-image: url('../images/icons/heart-red.svg'); } #top .ula-about-mission .toggler.activeTitle { margin: 0; padding: 70px 0 3px; background-size: 70px 60px; color: var(--ula-text); } #top .ula-about-mission .toggler:hover, #top .ula-about-mission .toggler:focus-visible { transform: scale(1.1); outline: none; } #top .ula-about-mission .toggler:focus-visible { box-shadow: 0 0 0 3px rgba(15, 117, 188, 0.45); border-radius: 4px; } /* Figma Frame 74 / Group 65 = 600px. Absolute overlay — tan band height must not grow on hover. */ #top .ula-about-mission .toggle_wrap { position: absolute; top: calc(100% + 28px); z-index: 20; box-sizing: border-box; width: 600px; max-width: none; margin: 0; left: calc(var(--ula-m) + var(--ula-shift)); padding: 0; border: 0; display: none !important; pointer-events: auto; --ula-m: -247px; /* Figma: popup x148 under heart1 center 448 on 650px row at x395 */ --ula-abs: calc(50vw - 325px + var(--ula-m)); --ula-shift: calc(max(0px, 24px - var(--ula-abs)) - max(0px, var(--ula-abs) + 600px - 100vw + 40px)); } #top .ula-about-mission .toggler:hover + .toggle_wrap, #top .ula-about-mission .toggler:focus-visible + .toggle_wrap, #top .ula-about-mission .toggler.is-hover + .toggle_wrap, #top .ula-about-mission .toggle_wrap.is-open { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; opacity: 1 !important; } #top .ula-about-mission .toggler:hover + .toggle_wrap .toggle_content, #top .ula-about-mission .toggler:focus-visible + .toggle_wrap .toggle_content, #top .ula-about-mission .toggler.is-hover + .toggle_wrap .toggle_content, #top .ula-about-mission .toggle_wrap.is-open .toggle_content { visibility: visible !important; opacity: 1 !important; } #top .ula-about-mission .toggle_wrap::before { /* speech-bubble tail (Figma ~23×20) */ content: ""; position: absolute; top: -20px; left: calc(288px - var(--ula-shift)); width: 23px; height: 20px; background: inherit; clip-path: polygon(0 100%, 50% 0, 100% 100%); } #top .ula-about-mission .av_toggle_section:nth-of-type(1) .toggle_wrap { --ula-m: -247px; } #top .ula-about-mission .av_toggle_section:nth-of-type(2) .toggle_wrap { --ula-m: -111px; } #top .ula-about-mission .av_toggle_section:nth-of-type(3) .toggle_wrap { --ula-m: 25px; } #top .ula-about-mission .av_toggle_section:nth-of-type(4) .toggle_wrap { --ula-m: 161px; } #top .ula-about-mission .av_toggle_section:nth-of-type(5) .toggle_wrap { --ula-m: 297px; } #top .ula-about-mission .av_toggle_section:nth-of-type(odd) .toggle_wrap { background: #F7941D; } #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggle_wrap { background: #BA5025; } /* Figma text inset: 30/30/25 inside 600×225 frame */ #top .ula-about-mission .toggle_content { padding: 30px 30px 25px; margin: 0; background: transparent; border: 0; text-align: left; } #top .ula-about-mission .toggle_content p { margin: 0; font-size: 22px; line-height: 34px; } #top .ula-about-mission .av_toggle_section:nth-of-type(odd) .toggle_content, #top .ula-about-mission .av_toggle_section:nth-of-type(odd) .toggle_content p { color: #28373F; } #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggle_content, #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggle_content p { color: #fff; } @media (prefers-reduced-motion: reduce) { #top .ula-about-mission .toggler { transition: none; } #top .ula-about-mission .toggler:hover, #top .ula-about-mission .toggler:focus-visible { transform: none; } } /* ---- Become a Tutor ---- */ #top .ula-tutor-intro { padding: 47px 0 122px; } #top .ula-tutor-intro .avia-image-container img { height: 523px; object-fit: cover; } /* comp stretches the 850x800 photo to 550x523 */ #top .ula-tutor-intro .avia-button-wrap { margin-top: 60px; } #top .ula-two-col-text { padding: 0 0 120px; } #top .ula-two-col-text .entry-content-wrapper { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 640px); column-gap: 40px; justify-content: start; } #top .ula-two-col-text .av_one_full { grid-column: 1 / -1; } #top .ula-two-col-text .flex_column { width: auto; min-width: 0; } #top .ula-two-col-text p { margin-bottom: 11px; } #top .ula-tutor-requirements p { margin-bottom: 16px; } #top .ula-two-col-text p:last-child { margin-bottom: 0; } /* Why Volunteer / Tutor Requirements: real lists (framework disc + body 22/34). Spacing kept from prior p rhythm. */ #top .ula-why-volunteer .avia_textblock ul, #top .ula-tutor-requirements .avia_textblock ul { list-style: disc; list-style-position: outside; margin: 0; padding: 0 0 0 1.15em; font: 400 22px/34px var(--ula-body-font); color: var(--ula-text); } #top .ula-why-volunteer .avia_textblock li, #top .ula-tutor-requirements .avia_textblock li { padding: 0; } #top .ula-why-volunteer .avia_textblock li { margin: 0 0 11px; } #top .ula-tutor-requirements .avia_textblock li { margin: 0 0 16px; } #top .ula-why-volunteer .avia_textblock li:last-child, #top .ula-tutor-requirements .avia_textblock li:last-child { margin-bottom: 0; } #top .ula-tutor-testimonials { padding: 8px 0 129px; } #top .ula-tutor-testimonials h2 { text-align: center; } /* Testimonial slider (Enfold av_testimonials, slider_large): quote left-aligned 1080px wide with the author inline, arrows from the comp */ #top .ula-tutor-testimonials .avia-testimonial_inner { min-height: 150px; width: 1080px; max-width: 100%; margin: 0 auto; text-align: left; } #top .ula-tutor-testimonials :is(.avia-testimonial-content, .avia-testimonial-meta, .avia-testimonial-meta-mini, .avia-testimonial-markup-entry-content) { display: inline; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; font: 400 22px/34px var(--ula-body-font); color: var(--ula-text); } #top .ula-tutor-testimonials .avia-testimonial-content p { display: inline; margin: 0; } #top .ula-tutor-testimonials .avia-testimonial-name { font-weight: 400; margin-left: 4px; } #top .ula-tutor-testimonials .avia-testimonial-arrow-wrap { display: none; } #top .ula-tutor-testimonials .avia-slideshow-arrows a.prev-slide, #top .ula-tutor-testimonials .avia-slideshow-arrows a.next-slide { position: absolute; width: 43px !important; height: 43px !important; margin: 0; padding: 0; border: 0; background: transparent no-repeat center / contain; opacity: 1; font-size: 0; overflow: hidden; } #top .ula-tutor-testimonials .avia-slideshow-arrows a svg { display: none; } #top .ula-tutor-testimonials .avia-testimonial-wrapper { overflow: visible; } /* Phase 7: Figma puts the right arrow 13px outside the 60px gutters (x1350-1393 at 1440) and it was clipped / pushed off-screen below 1410 */ #top .ula-tutor-testimonials .avia-slideshow-arrows a.prev-slide { left: 30px; top: 53px; background-image: url("../images/icons/tutor-arrow-left.svg"); } #top .ula-tutor-testimonials .avia-slideshow-arrows a.next-slide { left: auto; right: -13px; top: 96px; background-image: url("../images/icons/tutor-arrow-right.svg"); } /* Matthew override: angled bottom edge via newsletter slope — CTA extends under .ula-newsletter by --ula-slope (Figma CTA/newsletter overlap ~158px at 1440). Swirls must paint ON TOP of the dark-blue newsletter (Figma: left swirl crosses the diagonal). CTA sits above .ula-newsletter; light-blue fill is clipped to the slope so the dark-blue triangle still shows; swirls live on ::after (unclipped). Right swirl = right:0 (Figma x1050+390=1440); left:calc(50%+330px) left a gap above 1440. */ #top .ula-tutor-cta { position: relative; z-index: 2; /* above .ula-newsletter so swirls show on dark blue */ overflow: visible; background: transparent; /* fill moved to clipped ::before */ min-height: 392px; padding: 87px 0 0; margin-bottom: calc(-1 * var(--ula-slope)); box-sizing: border-box; pointer-events: none; /* overlap must not block newsletter clicks */ } #top .ula-tutor-cta .entry-content-wrapper { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; pointer-events: auto; } #top .ula-tutor-cta h2 { text-align: center; } #top .ula-tutor-cta::before { /* light-blue band only above the newsletter diagonal */ content: ""; position: absolute; inset: 0; z-index: 0; background: var(--ula-light-blue); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ula-slope)), 0 100%); pointer-events: none; } #top .ula-tutor-cta::after { /* both swirls — left stays lower (crosses newsletter diagonal). Right = Figma ULA-Graphics-7 at CTA top-right (y2358=CTA top, x1050+390=1440): top:0 right:0 / 390x148; stroke #0A4D7A. */ content: ""; position: absolute; inset: 0; z-index: 0; background: url('../images/graphics/squiggle-blue-wide.svg') no-repeat 0 165px / 551px 218px, url('../images/graphics/squiggle-blue.svg') no-repeat right 0 top 0 / 390px 148px; pointer-events: none; } /* Matthew lock 0aa4a8c: Tutor CTA Apply Now = #BA5025 / white, hover #9a4120 (override dump fill #FFFFFF). */ #top .ula-tutor-cta .avia-button, #top .ula-tutor-cta .avia-button:link { background: var(--ula-burnt-orange); color: #fff; } #top .ula-tutor-cta .avia-button:hover, #top .ula-tutor-cta .avia-button:focus { background: #9a4120; color: #fff; } /* ---- Donate ---- */ #top .ula-donate-intro { padding: 47px 0 107px; } #top .ula-donate-intro .entry-content-wrapper { max-width: 800px; margin: 0 auto; text-align: center; } #top .ula-donate-options { padding: 0; } #top .ula-donate-options .entry-content-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 573px)); column-gap: 127px; justify-content: end; } #top .ula-donate-options .flex_column { width: auto; box-sizing: border-box; min-height: 371px; padding: 30px; background: var(--ula-cream); border-radius: 28px 0 0 0; } #top .ula-donate-options .avia-button-wrap { margin-top: 30px; } #top .ula-donate-options .avia-button { min-height: 59px; box-sizing: border-box; } /* Donate option CTAs: Matthew lock fa23373 orange (dump blue not proven). */ #top .ula-donate-options .avia-button, #top .ula-donate-options .avia-button:link { background: var(--ula-burnt-orange); color: #fff; } #top .ula-donate-options .avia-button:hover, #top .ula-donate-options .avia-button:focus { background: #9a4120; color: #fff; } #top .ula-donate-options .flex_column.first .avia-button { width: 130px; min-width: 130px; padding-left: 0; padding-right: 0; text-align: center; } /* Figma 'Donate' button is 130x59 (Chrome's text is 9px wider than Figma's) */ /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1199px) { /* testimonial slider: quote full width, arrows under the quote at the edges */ #top .ula-tutor-testimonials .avia-testimonial-wrapper { position: relative; padding-bottom: 70px; } #top .ula-tutor-testimonials :is(.avia-testimonial, .avia-testimonial_inner) { padding-left: 0 !important; padding-right: 0 !important; } #top .ula-tutor-testimonials .avia-testimonial_inner { min-height: 0; } #top .ula-tutor-testimonials .avia-slideshow-arrows a.prev-slide { left: 0; top: auto; bottom: 0; } #top .ula-tutor-testimonials .avia-slideshow-arrows a.next-slide { left: auto; right: 0; top: auto; bottom: 0; } #top .ula-donate-options .entry-content-wrapper { column-gap: 40px; justify-content: stretch; } } @media (max-width: 989px) { /* Tablet: keep Catamaran lead/card tokens (!important; include .av-special-heading-tag — higher specificity than h2 alone) */ #top .ula-program-overview h2, #top .ula-program-overview h2.av-special-heading-tag, #top .ula-program-overview .av-special-heading-tag { font-size: 34px !important; line-height: 50px !important; } #top .ula-program-cards h3, #top .ula-donate-options h3, #top .ula-involve-cards h3 { font-size: 28px !important; line-height: 42px !important; } #top .ula-split-intro .entry-content-wrapper { column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #top .ula-split-intro { padding-bottom: 70px; } #top .ula-about-intro { padding-bottom: 90px; } #top .ula-text-section, #top .ula-about-history { padding-top: 90px; } #top .ula-two-col-text { padding-bottom: 90px; } #top .ula-program-cards .flex_column { grid-template-columns: 120px minmax(0, 1fr); padding: 40px 80px 40px 30px; column-gap: 30px; } #top .ula-program-cards img { width: 120px; height: 120px; } #top .ula-about-mission .entry-content-wrapper { max-width: 700px; } #top .ula-tutor-testimonials { padding-bottom: 100px; } } @media (max-width: 767px) { .responsive #top :is(.ula-split-intro, .ula-program-overview, .ula-program-cards, .ula-about-mission, .ula-text-section, .ula-tutor-testimonials, .ula-tutor-cta, .ula-donate-intro, .ula-impact-intro, .ula-donate-options) .flex_column { margin: 0 !important; } /* Enfold adds a 20px column margin on mobile */ /* Mobile: Dev Mode overview Lora 26/38 (2481:1793); card titles H4 22/34 */ /* split intro: picture first, text below (mobile comps) */ #top .ula-split-intro { padding: 30px 0 78px; } #top .ula-split-intro .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); row-gap: 30px; } #top .ula-split-intro .av_one_half:last-child { order: -1; } #top .ula-split-intro img { max-width: none; margin: 0; } #top .ula-split-intro .avia-button-wrap { margin-top: 30px; } #top .ula-program-overview { padding-bottom: 50px; } #top .ula-program-overview h2, #top .ula-program-overview h2.av-special-heading-tag, #top .ula-program-overview .av-special-heading-tag { font-size: 26px !important; line-height: 38px !important; } /* Dev Mode 2481:1793 — match base selector specificity */ #top .ula-program-cards { padding-bottom: 69px; } #top .ula-program-cards .entry-content-wrapper { gap: 30px; } /* Figma Program Hotkeys: 333 wide, gap 30, centered icon/title/body/arrow */ #top .ula-program-cards .flex_column { display: block; padding: 40px 30px 113px; min-height: 0; text-align: center; width: 100%; max-width: 333px; margin-left: auto; margin-right: auto; } #top .ula-program-cards .avia-image-container, #top .ula-program-cards .av-image-caption-overlay { margin: 0 auto 30px; width: 150px; } #top .ula-program-cards h3, #top .ula-donate-options h3, #top .ula-involve-cards h3 { font-size: 22px !important; line-height: 34px !important; text-align: center; } #top .ula-program-cards p { text-align: center; } #top .ula-program-cards img { width: 150px; height: 150px; margin-left: auto; margin-right: auto; } #top .ula-program-cards .flex_column::after { left: 50%; right: auto; bottom: 40px; top: auto; margin-top: 0; transform: translateX(-50%); } #top .ula-program-cards .flex_column:hover::after, #top .ula-program-cards .flex_column:focus-within::after { transform: translateX(calc(-50% + 4px)); } #top .ula-text-section, #top .ula-about-history { padding-top: 60px; } #top .ula-text-section .av-special-heading { margin-bottom: 15px; } #top .ula-text-section h2, #top .ula-about-history h2 { text-align: left; } #top .ula-text-section .avia-button-wrap, #top .ula-about-history .avia-button-wrap { text-align: left; } #top .ula-text-section .avia-button, #top .ula-about-history .avia-button { width: auto; max-width: 100%; } /* hug, not full-bleed */ #top .ula-about-intro { padding-bottom: 52px; } /* Figma About Mobile intro: content 323 wide at left 30 (not full 333) */ #top .ula-about-intro .entry-content-wrapper { max-width: 323px; } #top .ula-about-intro .entry-content-wrapper > .flex_column { max-width: 323px; } /* Page leads mobile = Figma Dev Mode 2481:1791 (Lora SemiBold 32/46); desktop stays 42/55 */ #top :is(.ula-split-intro, .ula-donate-intro, .ula-impact-intro, .ula-involve-intro, .ula-contact-info, .ula-page-lead, .ula-about-detail) h1, #top :is(.ula-split-intro, .ula-donate-intro, .ula-impact-intro, .ula-involve-intro, .ula-contact-info, .ula-page-lead, .ula-about-detail) h1.av-special-heading-tag, #top :is(.ula-split-intro, .ula-donate-intro, .ula-impact-intro, .ula-involve-intro, .ula-contact-info, .ula-page-lead, .ula-about-detail) .av-special-heading-tag { font-size: 32px !important; line-height: 46px !important; } /* about: mission values — Figma Group 66 / comments #48 #52 (mobile only; desktop bubbles unchanged) */ #top .ula-about-mission { padding: 157px 0 182px; overflow: hidden; } #top .ula-about-mission::before { width: 200px; height: 147px; background-size: 200px 147px; } /* Figma Group 66: ULA-Squiggle-17 bottom-left below Value #5 — same burnt-orange art as ::before, rotated 180° (matches HP Why bottom swirl). */ #top .ula-about-mission::after { content: ""; position: absolute; left: 0; bottom: 0; width: 200px; height: 147px; background: url('../images/graphics/squiggle-burnt-orange.svg') no-repeat 0 100% / 200px 147px; transform: rotate(180deg); pointer-events: none; z-index: 0; } #top .ula-about-mission .entry-content-wrapper { max-width: none; padding: 0; } #top .ula-about-mission h2 { text-align: left; font-size: 26px; line-height: 38px; font-weight: 600; color: var(--ula-text); } /* H3M Lora 26/38 */ #top .ula-about-mission .avia_textblock { text-align: left; } #top .ula-about-mission .avia_textblock p { font-size: 20px; line-height: 34px; color: var(--ula-text); } /* Accordion full-bleed: cancel .container --ula-gutter (30px) so rows are edge-to-edge */ #top .ula-about-mission .togglecontainer { display: block; width: auto; max-width: none; margin: 13px calc(-1 * var(--ula-gutter)) 0; position: relative; align-items: stretch; border: 0; } #top .ula-about-mission .av_toggle_section { display: block; margin: 0; border: 0; } #top .ula-about-mission .single_toggle { display: block; align-items: stretch; margin: 0; border: 0; } /* COLLAPSED headers: alternate #FFF / #FBF0D1 — never orange/red. Open header keeps that fill. */ #top .ula-about-mission .toggler { display: flex; align-items: center; box-sizing: border-box; width: 100%; margin: 0; min-height: 60px; height: 60px; padding: 15px 30px 15px 75px; /* 30 edge + 30 heart + 15 gap */ text-align: left; font: 600 22px/34px var(--ula-body-font); color: #28373F; transform: none; border: 0; border-radius: 0; background-color: #fff; background-repeat: no-repeat; background-position: 30px 50%; background-size: 30px 30px; position: relative; } #top .ula-about-mission .toggler:hover, #top .ula-about-mission .toggler:focus-visible { transform: none; box-shadow: none; } #top .ula-about-mission .toggler.activeTitle { margin: 0; padding: 15px 30px 15px 75px; background-size: 30px 30px; color: #28373F; } /* Header fills: 1/3/5 white, 2/4 cream (incl. when open) */ #top .ula-about-mission .av_toggle_section:nth-of-type(odd) .toggler, #top .ula-about-mission .av_toggle_section:nth-of-type(odd) .toggler.activeTitle { background-color: #FFFFFF; color: #28373F; } #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggler, #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggler.activeTitle { background-color: #FBF0D1; color: #28373F; } /* Hearts: orange on 1,3,4,5; brick on item 2 only */ #top .ula-about-mission .av_toggle_section .toggler { background-image: url('../images/icons/heart-orange.svg'); } #top .ula-about-mission .av_toggle_section:nth-of-type(2) .toggler { background-image: url('../images/icons/heart-red.svg'); } /* Chevron always dark #28373F; down closed, up (180) open */ #top .ula-about-mission .toggler::after { content: ""; position: absolute; right: 30px; top: 50%; width: 20px; height: 10px; margin-top: -5px; background: url('../images/icons/chevron-dark.svg') no-repeat center / contain; filter: none; transform: none; } #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggler::after { filter: none; } #top .ula-about-mission .toggler.activeTitle::after, #top .ula-about-mission .single_toggle.is-open .toggler::after { transform: rotate(180deg); } #top .ula-about-mission .toggle_wrap { position: static; top: auto; left: auto; right: auto; transform: none; z-index: auto; width: auto; max-width: none; display: none !important; margin: 0 !important; border: 0; } #top .ula-about-mission .toggle_wrap::before { display: none; } /* Kill desktop hover sibling show on touch widths */ #top .ula-about-mission .toggler:hover + .toggle_wrap, #top .ula-about-mission .toggler:focus-visible + .toggle_wrap, #top .ula-about-mission .toggler.is-hover + .toggle_wrap { display: none !important; } #top .ula-about-mission .single_toggle.is-open .toggle_wrap, #top .ula-about-mission .toggle_wrap.is-open { display: block !important; visibility: visible !important; height: auto !important; overflow: visible !important; opacity: 1 !important; } #top .ula-about-mission .single_toggle.is-open .toggle_wrap .toggle_content, #top .ula-about-mission .toggle_wrap.is-open .toggle_content { visibility: visible !important; opacity: 1 !important; } /* OPEN body panel (#48/#52): odd orange+#28373F, even brick+#FFF; header stays white/cream above */ #top .ula-about-mission .av_toggle_section:nth-of-type(odd) .toggle_wrap { background: #F7941D; } #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggle_wrap { background: #BA5025; } #top .ula-about-mission .toggle_content { padding: 30px; } #top .ula-about-mission .toggle_content, #top .ula-about-mission .toggle_content p { margin: 0; font: 500 20px/34px var(--ula-body-font); } #top .ula-about-mission .av_toggle_section:nth-of-type(odd) .toggle_content, #top .ula-about-mission .av_toggle_section:nth-of-type(odd) .toggle_content p { color: #28373F; } #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggle_content, #top .ula-about-mission .av_toggle_section:nth-of-type(even) .toggle_content p { color: #fff; } /* tutor */ #top .ula-tutor-intro { padding-bottom: 60px; } #top .ula-two-col-text .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); row-gap: 0; } #top .ula-two-col-text { padding-bottom: 60px; } #top .ula-two-col-text .av_one_half + .av_one_half { margin-top: 11px; } #top .ula-tutor-testimonials { padding-bottom: 80px; } #top .ula-tutor-cta { padding-top: 70px; min-height: 0; padding-bottom: 150px; } #top .ula-tutor-cta::after { background: url('../images/graphics/squiggle-blue-wide.svg') no-repeat 0 bottom / 275px 109px, url('../images/graphics/squiggle-blue.svg') no-repeat right 0 top 0 / 195px 74px; } /* donate */ #top .ula-donate-intro { padding-bottom: 60px; } #top .ula-donate-options .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); row-gap: 30px; } #top .ula-donate-options .flex_column { min-height: 0; } } /* ========================================================================== OUR IMPACT (ALB page) + CATEGORY ARCHIVES (Enfold archive.php, blog-grid) Container classes: .ula-impact-intro, .ula-impact-filter, .ula-impact-grid (the archive's
gets .ula-impact-grid via the avf_custom_main_classes filter). ========================================================================== */ #top .ula-impact-intro { padding: 39px 0 0; } #top .ula-impact-intro .entry-content-wrapper { max-width: 803px; margin: 0 auto; text-align: center; } /* category selector: inline links without JS; Figma dropdown (300x50) with JS. Matthew lock a21af27: Post Category + Load More = burnt orange (dump showed #0F75BC). Dropdown item hover/active stay Crystal #30. */ #top .ula-impact-filter { padding: 85px 0 0; position: relative; z-index: 20; } /* Figma: category button at y703 (it was y704 under the old 199px header) */ #top .ula-impact-filter .entry-content-wrapper::before, #top .ula-impact-filter .entry-content-wrapper::after { display: none; } #top .ula-impact-filter .entry-content-wrapper { display: flex; justify-content: flex-end; } #top .ula-impact-filter .flex_column { margin: 0; float: none; width: auto; position: relative; } #top .ula-impact-filter .av-list-menu-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 30px; margin: 0; padding: 0; list-style: none; } #top .ula-impact-filter .av-list-menu-list li { margin: 0; padding: 0; } #top .ula-impact-filter .av-list-menu-list a { font: 600 18px/28px var(--ula-body-font); color: var(--ula-text); text-decoration: none; display: block; padding: 8px 12px; } #top .ula-impact-filter .av-list-menu-list a:hover, #top .ula-impact-filter .av-list-menu-list a:focus-visible { background: #F7941D; color: #28373F; /* #30 Crystal */ } #top .ula-impact-filter .av-list-menu-list a:active, #top .ula-impact-filter .av-list-menu-list .current-menu-item > a { background: #BA5025; color: #fff; /* #30 Crystal */ } html.ula-js #top .ula-impact-filter .flex_column { width: 300px; } html.ula-js #top .ula-impact-filter .av-list-menu-wrap { position: relative; } #top .ula-filter-toggle { display: block; width: 300px; height: 50px; margin: 0; padding: 11px 50px 11px 20px; border: 0; border-radius: 0; box-sizing: border-box; cursor: pointer; background: var(--ula-burnt-orange); color: #fff; text-align: left; font: 600 22px/28px var(--ula-body-font); position: relative; } #top .ula-filter-toggle::after { content: ""; position: absolute; right: 24px; top: 16px; width: 10px; height: 10px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); transition: transform .15s, top .15s; } #top .ula-filter-toggle[aria-expanded="true"]::after { transform: rotate(225deg); top: 21px; } #top .ula-filter-toggle:hover, #top .ula-filter-toggle:focus-visible { background: #9a4120; } html.ula-js #top .ula-impact-filter .av-list-menu-list { display: none; position: absolute; top: 50px; left: 0; width: 300px; box-sizing: border-box; flex-direction: column; flex-wrap: nowrap; gap: 8px; padding: 22px 22px 11px; background: #fff; border: 2px solid var(--ula-burnt-orange); border-top: 0; justify-content: flex-start; } html.ula-js #top .ula-impact-filter .av-list-menu-list.is-open { display: flex; } /* post cards */ #top .ula-impact-grid { padding: 64px 0 0; } #top .ula-impact-grid .container { max-width: 1320px; } #top .ula-impact-grid .category-term-description { text-align: center; margin: 0 0 40px; } #top .ula-impact-grid .slide-entry-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 630px)); gap: 60px; justify-content: space-between; margin: 0 0 60px; } /* Enfold prints one .slide-entry-wrap per row */ #top .ula-impact-grid .slide-entry-wrap::before, #top .ula-impact-grid .slide-entry-wrap::after { display: none; } #top .ula-impact-grid .slide-entry { position: relative; width: auto; float: none; margin: 0; padding: 40px 40px 92px; min-height: 369px; box-sizing: border-box; background: var(--ula-cream); border: 0; box-shadow: none; clear: none; display: block; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } /* Figma 'Frame 90' (first card) is #D9D9D9 while the PDF comp shows all cards cream: treated as the hover/focus state. Lift matches .ula-program-cards / Get Involved (translateY -8px + shadow); no right arrow. */ #top .ula-impact-grid .slide-entry:hover, #top .ula-impact-grid .slide-entry:focus-within { background: #D9D9D9; transform: translateY(-8px); box-shadow: 0 10px 28px rgba(40, 55, 63, 0.14); } @media (prefers-reduced-motion: reduce) { #top .ula-impact-grid .slide-entry { transition: none; } #top .ula-impact-grid .slide-entry:hover, #top .ula-impact-grid .slide-entry:focus-within { transform: none; } } #top .ula-impact-grid .slide-entry .slide-image, #top .ula-impact-grid .slide-entry .av-vertical-delimiter { display: none; } #top .ula-impact-grid .slide-content { padding: 0; margin: 0; display: flex; flex-direction: column; background: none; } #top .ula-impact-grid .entry-content-header { margin: 0; padding: 0; } #top .ula-impact-grid .slide-entry-title { font: 600 34px/50px var(--ula-heading-font, Lora, Georgia, serif); margin: 0; padding: 0; } /* Figma Our Impact Frame 90 (first card): Lora SemiBold 42/55; remaining cards 34/50 */ #top .ula-impact-grid .slide-entry-wrap:first-child .slide-entry:first-child .slide-entry-title { font-size: 42px; line-height: 55px; } #top .ula-impact-grid .slide-entry-title a, #top .ula-impact-grid .slide-entry-title a:hover { color: var(--ula-text); text-decoration: none; } #top .ula-impact-grid .slide-meta { order: 2; min-height: 36px; display: flex; flex-wrap: wrap; margin: 0 0 15px; padding: 0; font: 600 22px/34px var(--ula-body-font); color: var(--ula-text); } /* Figma Frame 90 first card: meta blue #0F75BC; remaining cards keep --ula-text */ #top .ula-impact-grid .slide-entry-wrap:first-child .slide-entry:first-child .slide-meta { color: #0F75BC; } #top .ula-impact-grid .slide-meta > * { margin: 0; padding: 0; } #top .ula-impact-grid .slide-meta-del { padding: 0 .35em; } #top .ula-impact-grid .slide-meta a, #top .ula-impact-grid .slide-meta time { color: inherit; text-decoration: none; font: inherit; } #top .ula-impact-grid .slide-meta a:hover { color: var(--ula-burnt-orange); } #top .ula-impact-grid .slide-entry-excerpt { order: 3; margin: 0; padding: 0; font-size: 22px; line-height: 34px; color: var(--ula-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } #top .ula-impact-grid .read-more-link { position: absolute; left: 40px; bottom: 40px; margin: 0; } /* out of the clamped excerpt so it is never cut off */ #top .ula-impact-grid .read-more-link a.more-link { display: inline-flex; align-items: center; gap: 10px; min-height: 35px; font: 600 22px/34px var(--ula-body-font); color: var(--ula-burnt-orange); text-decoration: none; } #top .ula-impact-grid .read-more-link a.more-link:hover { color: #9a4120; } #top .ula-impact-grid .more-link-arrow { display: none; } #top .ula-impact-grid .read-more-link a.more-link::after { content: ""; width: 25px; height: 14px; background: url('../images/icons/read-more-arrow.svg') no-repeat center / contain; } /* pagination / Load More Posts */ #top .ula-impact-grid .pagination-wrap { margin: 0; padding: 0; text-align: center; } #top .ula-impact-grid .pagination { display: flex; justify-content: center; gap: 12px; align-items: center; font: 600 22px/34px var(--ula-body-font); } #top .ula-impact-grid .pagination .pagination-meta { display: none; } #top .ula-impact-grid .pagination a, #top .ula-impact-grid .pagination .current { padding: 6px 14px; border: 2px solid var(--ula-blue); color: var(--ula-blue); text-decoration: none; background: none; } #top .ula-impact-grid .pagination .current { background: var(--ula-blue); color: #fff; } html.ula-js #top .ula-impact-grid .pagination-wrap { display: none; } #top .ula-load-more { margin: 0; text-align: center; } #top .ula-load-more button { display: inline-block; margin: 0; padding: 11px 30px; border: 0; border-radius: 0; cursor: pointer; background: var(--ula-burnt-orange); color: #fff; font: 600 22px/34px var(--ula-body-font); min-height: 56px; box-sizing: border-box; } #top .ula-load-more button:hover, #top .ula-load-more button:focus-visible { background: #9a4120; color: #fff; } #top .ula-load-more button[disabled] { opacity: .6; cursor: progress; } #top .ula-impact-grid { padding-bottom: 120px; } @media (max-width: 989px) { .responsive #top .ula-impact-grid .slide-entry { width: auto !important; margin: 0 !important; float: none; } /* Enfold sizes .av_one_half cards at 50% on tablet/mobile */ #top .ula-impact-grid .slide-entry-wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-bottom: 30px; } #top .ula-impact-grid .slide-entry { padding: 30px 30px 80px; min-height: 0; } #top .ula-impact-grid .read-more-link { left: 30px; bottom: 30px; } #top .ula-impact-grid .slide-entry-title { font-size: 28px; line-height: 40px; } #top .ula-impact-filter { padding-top: 40px; } #top .ula-impact-grid { padding-top: 40px; } } @media (max-width: 767px) { #top .ula-impact-intro { padding-top: 30px; } #top .ula-impact-intro .entry-content-wrapper { text-align: left; } html.ula-js #top .ula-impact-filter .flex_column, #top .ula-filter-toggle, html.ula-js #top .ula-impact-filter .av-list-menu-list { width: 100%; } #top .ula-impact-filter .entry-content-wrapper { justify-content: stretch; } #top .ula-impact-filter .av-list-menu-list { justify-content: flex-start; } } /* ========================================================================== SINGLE POST (Enfold single.php, styled to the Figma "News/Stories Post") Order: title, date / category, featured image 900x400, content, "View All Posts". Enfold prints image -> header -> content; the entry wrapper is flattened with display: contents so the pieces can be re-ordered without a custom template. ========================================================================== */ .responsive #top:is(.single-post, .single-ula_event) #wrap_all .container.template-single-blog { max-width: 900px; padding-top: 68px; padding-bottom: 70px; } #top:is(.single-post, .single-ula_event) .template-single-blog main.content { width: 100%; float: none; margin: 0; padding: 0; border: 0; } #top:is(.single-post, .single-ula_event) .entry-content-header { text-align: left; } /* Beat Enfold blog.min.css `#top .fullsize .template-blog .post-title { text-align:center }` */ #top.single-post .fullsize .template-blog h1.post-title, #top.single-post h1.post-title.entry-title, #top:is(.single-post, .single-ula_event) h1.post-title { text-align: left; width: 100%; max-width: none !important; } #top:is(.single-post, .single-ula_event) article.post-entry { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; } #top:is(.single-post, .single-ula_event) article.post-entry .entry-content-wrapper { display: contents; } #top:is(.single-post, .single-ula_event) article.post-entry .entry-content-wrapper::before, #top:is(.single-post, .single-ula_event) article.post-entry .entry-content-wrapper::after { display: none; } #top:is(.single-post, .single-ula_event) .entry-content-header { order: 1; width: 100%; margin: 0 !important; padding: 0; } #top:is(.single-post, .single-ula_event) .big-preview { order: 2; margin: 25px 0 60px; padding: 0 !important; } #top:is(.single-post, .single-ula_event) .entry-content { order: 3; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0; font-size: 22px; line-height: 34px; color: var(--ula-text); } #top:is(.single-post, .single-ula_event) .blog-meta, #top:is(.single-post, .single-ula_event) .entry-footer, #top:is(.single-post, .single-ula_event) .post_delimiter, #top:is(.single-post, .single-ula_event) .post_author_timeline, #top:is(.single-post, .single-ula_event) .comment-entry, #top:is(.single-post, .single-ula_event) .single-big:empty, #top:is(.single-post, .single-ula_event) .big-preview .image-overlay { display: none; } /* Beat Enfold blog.min.css `#top .fullsize .template-blog .post-title { font-size:30px }` (0,1,3,0). #top has single-post / single-ula_event; .fullsize is on an ancestor container, not #top. */ #top.single-post .fullsize .template-blog h1.post-title, #top.single-post h1.post-title.entry-title { font: 600 40px/45px var(--ula-body-font); /* Figma News/Stories Post title: Catamaran SemiBold 40/45 */ color: var(--ula-heading); margin: 0 !important; max-width: none; padding: 0 !important; } #top.single-ula_event .fullsize .template-blog h1.post-title, #top.single-ula_event h1.post-title.entry-title { font: 600 42px/55px var(--ula-heading-font); /* Figma Comp__2543-1057 Event Title: Lora SemiBold 42/55 #28373F */ color: var(--ula-heading); margin: 0 !important; max-width: none; padding: 0 !important; text-align: left; /* beat Enfold `#top .fullsize .template-blog .post-title { text-align:center }` */ } #top:is(.single-post, .single-ula_event) .post-format-icon { display: none; } /* Meta under title: same pattern as Our Impact .slide-meta — left-aligned flex, "Month D, YYYY / Category" with .35em padding on the slash. Blue 22/34 (Matthew). */ #top.single-post .fullsize .template-blog .post-meta-infos, #top.single-post .post-meta-infos { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; position: static; margin: 6px 0 0; padding: 0; text-align: left; font: 600 22px/34px var(--ula-body-font); color: var(--ula-blue); } #top.single-ula_event .post-meta-infos { display: none; } /* Event Post Figma: no blog-style date/author meta under title */ /* Keep date + first slash + categories; hide author / comments / extra seps */ #top.single-post .post-meta-infos .blog-author, #top.single-post .post-meta-infos .blog-comments, #top.single-post .post-meta-infos .blog-tags, #top.single-post .post-meta-infos .text-sep + .blog-author, #top.single-post .post-meta-infos .blog-categories + .text-sep { display: none; } #top.single-post .post-meta-infos .date-container, #top.single-post .post-meta-infos .text-sep, #top.single-post .post-meta-infos .blog-categories { margin: 0; padding: 0; font: inherit; color: inherit; } /* Match .ula-impact-grid .slide-meta-del */ #top.single-post .post-meta-infos .text-sep { padding: 0 .35em; } /* font-size:0 collapses Enfold's "in " without leaving a gap (visibility:hidden still reserved space) */ #top.single-post .post-meta-infos .blog-categories { font-size: 0; } #top.single-post .post-meta-infos .blog-categories a { font: 600 22px/34px var(--ula-body-font); color: inherit; text-decoration: none; } #top.single-post .post-meta-infos .blog-categories a:hover { color: var(--ula-burnt-orange); } #top:is(.single-post, .single-ula_event) .big-preview img { display: block; width: 100%; height: 400px; object-fit: cover; } /* Event featured: full photo, natural aspect (no fixed 400px / contain letterboxing). Posts keep cover. */ #top.single-ula_event .big-preview img { width: 100%; max-width: 900px; height: auto; background: transparent; } #top:is(.single-post, .single-ula_event) .entry-content p { margin: 0 0 34px; } #top:is(.single-post, .single-ula_event) .entry-content p:last-child { margin-bottom: 0; } /* Beat Enfold `#top .fullsize .template-blog .post .entry-content-wrapper { text-align:justify }` + html_content_align_center */ #top.single-post .fullsize .template-blog .post .entry-content-wrapper, #top.single-post .entry-content, #top.single-post .entry-content :is(p, li, ul, ol, blockquote), #top.single-ula_event .fullsize .template-blog .post .entry-content-wrapper, #top.single-ula_event .entry-content, #top.single-ula_event .entry-content :is(p, li, ul, ol, blockquote), #top.single-ula_event .ula-event-main :is(p, li, ul, ol) { text-align: left; } /* In-content heading: bare

using theme/Figma H4 — Catamaran SemiBold 600 28/42 #28373F (ula-main.css H4 token; ARCHITECTURE.md; Figma Catamaran SemiBold 28/42 e.g. Comp__2496-684 news titles). Image→heading gap 60px from .big-preview margin-bottom. */ #top.single-post .entry-content h4, #top.single-ula_event .entry-content h4, #top.single-ula_event .ula-event-main h4 { font: 600 28px/42px var(--ula-body-font); color: var(--ula-heading); text-align: left; margin: 0 0 15px; padding: 0; } #top.single-post .entry-content h4 + p, #top.single-ula_event .entry-content h4 + p, #top.single-ula_event .ula-event-main h4 + p { margin-top: 0; } #top.single-post .entry-content h2, #top.single-post .entry-content h3 { margin: 40px 0 15px; text-align: left; } /* Pull quote: Matthew wants Figma blue text + border (comp text fill is #28373F; no border rect in figjson). */ #top:is(.single-post, .single-ula_event) .entry-content blockquote { margin: 0 0 34px 68px; max-width: 765px; padding: 0 0 0 24px; border: 0; border-left: 4px solid var(--ula-blue); background: none; font: inherit; font-style: normal; color: var(--ula-blue); text-align: left; } #top:is(.single-post, .single-ula_event) .entry-content blockquote p { margin: 0; font: inherit; color: inherit; text-align: left; } #top:is(.single-post, .single-ula_event) .ula-post-back { order: 4; margin: 89px 0 0; text-align: center; } #top:is(.single-post, .single-ula_event) .ula-post-back a { display: inline-flex; align-items: center; gap: 25px; font: 500 38px/50px var(--ula-body-font); color: var(--ula-burnt-orange); text-decoration: none; /* Matthew: match arrow #BA5025 (Figma text was #000) */ } #top:is(.single-post, .single-ula_event) .ula-post-back a::before { content: ""; width: 41px; height: 22px; background: url('../images/icons/back-arrow.svg') no-repeat center / contain; } #top:is(.single-post, .single-ula_event) .ula-post-back a:hover, #top:is(.single-post, .single-ula_event) .ula-post-back a:focus-visible { color: #9a4120; } @media (max-width: 989px) { .responsive #top:is(.single-post, .single-ula_event) #wrap_all .container.template-single-blog { padding-top: 40px; padding-bottom: 60px; max-width: none; } #top.single-post h1.post-title.entry-title { font-size: 40px; line-height: 45px; } #top.single-ula_event h1.post-title.entry-title { font-size: 34px; line-height: 44px; } #top:is(.single-post, .single-ula_event) .big-preview img { height: auto; aspect-ratio: 9 / 4; } #top:is(.single-post, .single-ula_event) .big-preview { margin: 20px 0 40px; } #top:is(.single-post, .single-ula_event) .entry-content blockquote { margin-left: 24px; } #top:is(.single-post, .single-ula_event) .ula-post-back { margin-top: 60px; } #top:is(.single-post, .single-ula_event) .ula-post-back a { font-size: 28px; line-height: 40px; gap: 16px; } } @media (max-width: 767px) { #top.single-post .entry-content h4, #top.single-ula_event .entry-content h4, #top.single-ula_event .ula-event-main h4 { font-size: 22px; line-height: 34px; } /* theme H4 mobile */ } /* ========================================================================== BATCH B - placeholder pages (program sub-pages, Get Involved, About sub-pages, Resources, Contact) Containers only; the text elements carry no classes. Re-uses the sections above (.ula-split-intro, .ula-text-section, .ula-program-cards ...) and adds the pieces below. ========================================================================== */ /* removable "Placeholder page" notice (Color Section labelled Placeholder Notice) */ #top .ula-placeholder-notice { padding: 28px 0 0; } #top .ula-placeholder-notice .entry-content-wrapper::before, #top .ula-placeholder-notice .entry-content-wrapper::after { display: none; } #top .ula-placeholder-notice .flex_column { margin: 0; float: none; box-sizing: border-box; padding: 14px 24px; background: var(--ula-cream); border-left: 6px solid var(--ula-orange); } #top .ula-placeholder-notice .avia_textblock { margin: 0; } #top .ula-placeholder-notice p { margin: 0; font: 400 18px/28px var(--ula-body-font); color: var(--ula-text); } #top .ula-placeholder-notice strong { font-weight: 700; } /* program sub-pages */ #top .ula-program-detail { padding-top: 70px; } #top .ula-program-detail + .ula-program-overview { padding-top: 90px; padding-bottom: 50px; } /* ---- Get Involved / Our Supporters: linked cards without icon (same hotkey arrow + lift as program cards; section also has .ula-program-cards) ---- */ #top .ula-involve-cards { padding-top: 70px; } #top .ula-involve-cards .flex_column { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 49px 120px 49px 60px; } #top .ula-involve-cards h3 { margin-bottom: 0; } #top .ula-involve-cards p { margin-top: 7px; } /* Involve cards share .ula-program-cards ::after hotkey (top:50% / margin-top:-22px); no extra override needed */ #top .ula-involve-intro, #top .ula-about-detail { padding-top: 70px; } #top .ula-involve-way { padding-top: 60px; } #top .ula-involve-way + .ula-involve-way { padding-top: 50px; } #top .ula-involve-way:last-child, #top .ula-about-detail:last-child { padding-bottom: 20px; } /* ---- team + logo grids (editable: duplicate / delete a column) ---- */ #top :is(.ula-team-grid, .ula-logo-grid) .entry-content-wrapper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 50px 40px; align-items: start; } #top :is(.ula-team-grid, .ula-logo-grid) .av_one_full { grid-column: 1 / -1; } #top :is(.ula-team-grid, .ula-logo-grid) .flex_column { width: auto; min-width: 0; } #top :is(.ula-team-grid, .ula-logo-grid) .av_one_fourth::before { display: none; } #top :is(.ula-team-grid, .ula-logo-grid) :is(.avia-image-container, .avia-image-overlay-wrap, .av-image-caption-overlay) { display: block; } #top :is(.ula-team-grid, .ula-logo-grid) img { display: block; width: 100%; height: auto; max-width: none; } #top .ula-team-grid { padding-bottom: 20px; } #top .ula-team-grid .av_one_fourth .avia_textblock { margin-top: 18px; } #top .ula-team-grid h3 { margin: 0; padding: 0; font: 600 24px/34px var(--ula-body-font); color: var(--ula-text); } #top .ula-team-grid p { margin: 0; font: 400 20px/30px var(--ula-body-font); color: var(--ula-text); } #top .ula-logo-grid { padding-bottom: 20px; } #top .ula-logo-grid img { border: 2px solid var(--ula-light-blue); box-sizing: border-box; } /* ---- resource / download rows ---- */ #top .ula-resource-section { padding-top: 70px; padding-bottom: 20px; } #top .ula-resource-section ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ula-light-blue); } #top .ula-resource-section li { margin: 0; padding: 0; border-bottom: 2px solid var(--ula-light-blue); } #top .ula-resource-section li a { position: relative; display: block; padding: 18px 70px 18px 0; font: 600 22px/34px var(--ula-body-font); color: var(--ula-text); text-decoration: none; } #top .ula-resource-section li a::after { content: ""; position: absolute; right: 10px; top: 50%; width: 27px; height: 17px; margin-top: -8px; background: url('../images/icons/read-more-arrow.svg') no-repeat center / contain; } #top .ula-resource-section li a:hover, #top .ula-resource-section li a:focus-visible { color: var(--ula-burnt-orange); } #top .ula-resource-section .special-heading-border, #top .ula-team-grid .special-heading-border, #top .ula-logo-grid .special-heading-border { display: none; } @media (max-width: 989px) { #top :is(.ula-team-grid, .ula-logo-grid) .entry-content-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; } .responsive #top :is(.ula-team-grid, .ula-logo-grid) .entry-content-wrapper > .flex_column { width: auto; margin: 0; } /* beat Enfold's tablet column widths */ #top .ula-involve-cards .flex_column { padding: 40px 80px 40px 30px; } } @media (max-width: 767px) { #top :is(.ula-team-grid, .ula-logo-grid) .entry-content-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; } #top .ula-team-grid h3 { font-size: 20px; line-height: 28px; } #top .ula-team-grid p { font-size: 18px; line-height: 26px; } #top .ula-involve-cards { padding-top: 50px; } #top .ula-involve-cards .flex_column { padding: 40px 30px 113px; } #top .ula-involve-intro, #top .ula-about-detail { padding-top: 50px; } #top .ula-resource-section li a { font-size: 20px; padding: 14px 50px 14px 0; } } #top .ula-resource-section + .ula-resource-section { padding-top: 60px; } #top .ula-resource-section:last-child { padding-bottom: 20px; } /* ---- Contact Us (no on-site form: info column + link Button(s) to the third-party form) ---- */ #top .ula-contact { padding-bottom: 20px; } #top .ula-contact .entry-content-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 100px; align-items: start; } #top .ula-contact .flex_column { width: auto; min-width: 0; margin: 0; float: none; } #top .ula-contact .flex_column::before, #top .ula-contact .entry-content-wrapper::before, #top .ula-contact .entry-content-wrapper::after { display: none; } #top .ula-contact .av-special-heading { margin: 0 0 21px; display: flow-root; } #top .ula-contact .special-heading-border { display: none; } #top .ula-contact .avia_textblock { margin: 0; } #top .ula-contact-info p { margin: 0 0 14px; } #top .ula-contact-info a { color: var(--ula-burnt-orange); text-decoration: none; font-weight: 600; } #top .ula-contact-info a:hover, #top .ula-contact-info a:focus-visible { text-decoration: underline; } #top .ula-contact-message p { margin: 0 0 26px; } @media (max-width: 989px) { #top .ula-contact .entry-content-wrapper { grid-template-columns: minmax(0, 1fr); row-gap: 50px; } } /* ========================================================================== Events (Join an Event listing /events/ + single event /events//) Listing = ALB page: Page Intro, .ula-impact-intro, .ula-events-section (Text Block with [ula_events]). Single = Enfold single.php: shares the News post rules above (title, 900px column, 900x400 image) + .ula-event-* markup printed by includes/events.php (details box, CTA button, "View All Events"). Comps: Join an Event 1440x2783, Event Post 1440x4230. ========================================================================== */ #top .ula-events-intro { padding-top: 47px; } /* Join an Event comp: intro copy starts 47px under the band, heading-to-text gap 21px */ #top .ula-events-intro .av-special-heading { margin-bottom: 21px; } #top .ula-events-section { padding: 75px 0 66px; } /* comp: list ends 132px above the newsletter band (66 here + 30 + the 36px 'View past events' link) */ #top .ula-events-section .entry-content-wrapper::before, #top .ula-events-section .entry-content-wrapper::after { display: none; } #top .ula-events-section .flex_column { margin: 0; float: none; } #top .ula-events-section .avia_textblock { margin: 0; } #top .ula-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 60px; } #top .ula-events > li { list-style: none; margin: 0; padding: 0; } #top .ula-events > .ula-event { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 40px; box-sizing: border-box; min-height: 256px; padding: 40px 60px 31px 30px; background: var(--ula-cream); transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Matthew: every card date burnt orange (Figma first card Frame 99 was #000 — override). */ #top .ula-event .ula-event-date { margin: 5px 0 0; padding: 0; text-align: right; color: var(--ula-burnt-orange); } #top .ula-event-month { display: block; font: 600 22px/34px var(--ula-body-font); color: inherit; } #top .ula-event-day { display: block; font: 500 55px/60px var(--ula-body-font); color: inherit; } #top .ula-event-info { min-width: 0; } #top .ula-event-info .ula-event-title { margin: 0 0 15px; padding: 0; font: 600 34px/50px var(--ula-heading-font, Lora, Georgia, serif); color: var(--ula-text); } #top .ula-event-title a, #top .ula-event-title a:hover { color: var(--ula-text); text-decoration: none; } /* Whole-card hit target (stretched title link) — same pattern as program/impact cards; no arrow. */ #top .ula-event-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } #top .ula-events > .ula-event:hover, #top .ula-events > .ula-event:focus-within { transform: translateY(-8px); box-shadow: 0 10px 28px rgba(40, 55, 63, 0.14); } @media (prefers-reduced-motion: reduce) { #top .ula-events > .ula-event { transition: none; } #top .ula-events > .ula-event:hover, #top .ula-events > .ula-event:focus-within { transform: none; } } #top .ula-event-info .ula-event-excerpt { margin: 0 0 17px; padding: 0; font: 400 22px/34px var(--ula-body-font); color: var(--ula-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } #top .ula-event-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 40px; min-height: 35px; } #top .ula-event-more { display: inline-flex; align-items: center; gap: 10px; font: 600 22px/34px var(--ula-body-font); color: var(--ula-burnt-orange); text-decoration: none; } #top .ula-event-more::after { content: ""; width: 25px; height: 14px; background: url('../images/icons/read-more-arrow.svg') no-repeat center / contain; } #top .ula-event-more:hover { color: #9a4120; } #top .ula-event-meta { font: 400 22px/34px var(--ula-body-font); color: var(--ula-text); } #top .ula-events-empty { margin: 0; padding: 60px 30px; text-align: center; background: var(--ula-cream); font: 600 24px/34px var(--ula-body-font); color: var(--ula-text); } #top .ula-events-switch { margin: 30px 0 0; text-align: center; font: 600 22px/34px var(--ula-body-font); } #top .ula-events-switch a { color: var(--ula-burnt-orange); text-decoration: none; } #top .ula-events-switch a:hover, #top .ula-events-switch a:focus-visible { text-decoration: underline; } #top .ula-events-pager { display: flex; justify-content: center; gap: 12px; margin: 50px 0 0; font: 600 22px/34px var(--ula-body-font); } #top .ula-events-pager a, #top .ula-events-pager .current { padding: 6px 14px; border: 2px solid var(--ula-blue); color: var(--ula-blue); text-decoration: none; } #top .ula-events-pager .current { background: var(--ula-blue); color: #fff; } /* single event */ #top.single-ula_event .post-meta-infos, #top.single-ula_event .post-format-icon { display: none; } #top.single-ula_event .big-preview { margin: 34px 0 51px; } #top.single-ula_event .ula-event-layout { display: grid; grid-template-columns: minmax(0, 560px) 280px; column-gap: 60px; align-items: start; } #top.single-ula_event .ula-event-main { grid-column: 1; grid-row: 1; min-width: 0; } #top.single-ula_event .ula-event-details { grid-column: 2; grid-row: 1; margin-top: -17px; box-sizing: border-box; padding: 38px 30px 40px; background: var(--ula-cream); } /* Panel labels: Figma Comp__2543-1057 paints When/Where as Catamaran Regular 22/34 (same as body) — no separate heading style. Matthew: real heading elements; scoped to panel as SemiBold 22/34 for hierarchy. */ #top.single-ula_event .ula-event-details h4 { margin: 0; padding: 0; font: 600 22px/34px var(--ula-body-font); color: var(--ula-text); text-align: left; } #top.single-ula_event .ula-event-details p { margin: 0 0 30px; padding: 0; font: 400 22px/34px var(--ula-body-font); color: var(--ula-text); overflow-wrap: anywhere; text-align: left; } #top.single-ula_event .ula-event-details p:last-child { margin-bottom: 0; } /* Figma Comp__2543-1057 Event Details text fill #28373F (= --ula-text). Beat Enfold .main_color strong (primary blue). */ #top.single-ula_event .ula-event-details strong, #top.single-ula_event .ula-event-details strong a { font-weight: 600; color: var(--ula-text); /* #28373F */ } #top.single-ula_event .ula-event-details strong a:hover, #top.single-ula_event .ula-event-details strong a:focus-visible { color: var(--ula-burnt-orange); } #top.single-ula_event .ula-event-main > :first-child { margin-top: 0; } /* In-content image: full photo, natural aspect; max 560 wide (Figma content column). */ #top.single-ula_event .ula-event-main img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 0 34px; background: transparent; } #top.single-ula_event .ula-event-cta { margin-top: 60px; } /* Tickets/RSVP heading: bare H4 → theme H4 (Catamaran 600 28/42; mobile 22/34). Not in tan panel. */ #top.single-ula_event .ula-event-cta h4 { margin: 0 0 15px; } #top.single-ula_event .ula-event-cta p { margin: 0 0 34px; } #top.single-ula_event .ula-event-cta .avia-button-wrap { display: block; margin: 0; line-height: 0; } #top.single-ula_event .ula-event-cta .avia-button { margin: 0; } /* Event single buttons: burnt orange (Matthew); Figma button INSTANCE is blue #0F75BC — brand override. */ /* Matthew lock 41baef2: event CTAs burnt orange (dump showed Button #0F75BC). */ #top.single-ula_event .avia-button, #top.single-ula_event .avia-button:link, #top.single-ula_event a.avia-button { background: var(--ula-burnt-orange); /* #BA5025 */ color: #fff; } #top.single-ula_event .avia-button:hover, #top.single-ula_event .avia-button:focus, #top.single-ula_event .avia-button:focus-visible { background: #9a4120; color: #fff; } .responsive #top.single-ula_event #wrap_all .container.template-single-blog { padding-top: 68px; } /* event comp: title at y268 (69 under the old 199px header) */ /* Optional sponsors (Figma Comp__2543-1057 'Event Sponsors (Optional)'): 900 wide, centered text (align=CENTER), 160px tiles, 60px gaps, tile fill #D9D9D9. */ #top.single-ula_event .ula-event-sponsors { margin: 120px 0 0; text-align: center; } #top.single-ula_event .ula-event-sponsors > * { margin-left: 0; margin-right: 0; } #top.single-ula_event .ula-event-sponsors h2, #top.single-ula_event .ula-event-sponsors p { margin: 0; text-align: center; /* Figma Group 31 / Group 70: align=CENTER */ } #top.single-ula_event .ula-event-sponsors h2 { margin-bottom: 11px; } #top.single-ula_event .ula-event-sponsors p + p { margin-top: 25px; } #top.single-ula_event .ula-event-sponsors .avia-button-wrap { display: block; margin: 31px 0 0; text-align: center; line-height: 0; } #top.single-ula_event .ula-event-sponsors .avia-button { margin: 0; } #top.single-ula_event .ula-event-sponsors__logos { display: grid; grid-template-columns: repeat(4, 160px); gap: 60px; justify-content: center; list-style: none; margin: 60px 0 0; padding: 0; } #top.single-ula_event .ula-event-sponsors__logos li { margin: 0; padding: 0; width: 160px; height: 160px; aspect-ratio: 1; overflow: hidden; background: #D9D9D9; /* Figma Rectangle 21–24 fill — never tan */ } #top.single-ula_event .ula-event-sponsors__logos a { display: block; width: 100%; height: 100%; } #top.single-ula_event .ula-event-sponsors__logos img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; box-sizing: border-box; padding: 12px; /* real logos of any ratio sit intentionally inside the tile */ background: transparent; border: 0; margin: 0; } #top.single-ula_event .ula-event-back { margin: 90px 0 0; text-align: center; } #top.single-ula_event .ula-event-back a { display: inline-flex; align-items: center; gap: 25px; font: 600 34px/50px var(--ula-heading-font, Lora, Georgia, serif); color: var(--ula-burnt-orange); text-decoration: none; } #top.single-ula_event .ula-event-back a::before { content: ""; width: 41px; height: 22px; background: url('../images/icons/back-arrow.svg') no-repeat center / contain; } #top.single-ula_event .ula-event-back a:hover { color: #9a4120; } @media (max-width: 989px) { #top .ula-events-section { padding-top: 50px; } #top .ula-events > .ula-event { grid-template-columns: 110px minmax(0, 1fr); column-gap: 30px; padding-right: 30px; } /* same specificity as the desktop rule (it used to lose, so tablet/mobile kept the 150px date column) */ #top .ula-event-day { font-size: 44px; line-height: 50px; } #top .ula-event-info .ula-event-title { font-size: 28px; line-height: 40px; } #top.single-ula_event .ula-event-layout { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } #top.single-ula_event .ula-event-main, #top.single-ula_event .ula-event-details { grid-column: 1; } #top.single-ula_event .ula-event-details { grid-row: 1; margin-top: 0; } #top.single-ula_event .ula-event-main { grid-row: 2; } #top.single-ula_event .big-preview { margin: 20px 0 30px; } #top.single-ula_event .big-preview img { height: auto; aspect-ratio: auto; } /* beat shared 9/4 crop on <=989 */ #top.single-ula_event .ula-event-back { margin-top: 60px; } #top.single-ula_event .ula-event-sponsors { margin-top: 70px; } #top.single-ula_event .ula-event-sponsors__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; } #top.single-ula_event .ula-event-sponsors__logos li { width: auto; height: auto; } #top.single-ula_event .ula-event-back a { font-size: 28px; line-height: 40px; gap: 16px; } } @media (max-width: 767px) { #top .ula-events > .ula-event { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding: 30px; } #top .ula-event .ula-event-date { margin: 0; text-align: left; } #top .ula-event-month, #top .ula-event-day { display: inline; } #top .ula-event-day { margin-left: .3em; font-size: 34px; line-height: 40px; } #top .ula-events { gap: 30px; } #top.single-ula_event .ula-event-sponsors__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } #top.single-ula_event .ula-event-sponsors__logos li { width: auto; height: auto; } #top .ula-event-foot { flex-direction: column; align-items: flex-start; } } /* ---- Phase 7: touch targets (<=767) - bigger hit areas, no layout change ---- */ @media (max-width: 767px) { #top .ula-event-more, #top .ula-events-switch a, #top .ula-events-pager a { position: relative; } #top .ula-event-more::before, #top .ula-events-switch a::before, #top .ula-events-pager a::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; } #top .ula-post-back a, #top.single-ula_event .ula-event-back a { min-height: 44px; } } /* ---- Phase 7: grey hover card contrast + search results ------------------------------------------------------------------------ Burnt orange #BA5025 on the #D9D9D9 hover/focus card is 3.49:1; the links on that state use #9E3F1D (4.67:1). Look otherwise unchanged. */ #top .ula-impact-grid .slide-entry:is(:hover, :focus-within) .read-more-link a.more-link, #top .ula-impact-grid .slide-entry:is(:hover, :focus-within) .slide-meta a:hover { color: #9E3F1D; } /* Search results (Enfold template): the byline repeated the login name (and was empty on pages) at 10.5px - hidden; counter and pager text raised to a readable size. */ #top.search .post-meta-infos { display: none; } #top.search .search-result-counter { font-size: 18px; } #top.search .pagination .pagination-meta { font-size: 16px; } @media (max-width: 767px) { #top.search .av_disable_ajax_search .button { width: 44px; } }