/* ========================================================================== HOMEPAGE (Phase 5) - loaded on the front page only (includes/enqueue.php). Every rule hangs off a CONTAINER class set on an ALB Color Section / hero slider: .ula-hero .ula-cta-panels .ula-section-why .ula-stats .ula-section-why-copy .ula-about .ula-news Text elements carry no classes/IDs/inline styles. Figma refs: HP 1440x4035, HP Mobile 393x7348. ========================================================================== */ /* ---------- shared: the home sections manage their own width/padding ---------- */ #top .ula-cta-panels .container, #top .ula-stats .container { max-width: none; } #top .ula-hero ~ .avia-section { border: 0; } #top .ula-section-why, #top .ula-stats, #top .ula-section-why-copy, #top .ula-about, #top .ula-news { background: #fff; position: relative; } /* ========================================================================== 5.1 HERO (Fullwidth Easy Slider, 1440x600, gradient 0 -> 70% black over bottom 400px) ========================================================================== */ #top .ula-hero { position: relative; border: 0; background: #1a1a1e; } #top .ula-hero .avia-slideshow { margin: 0; } #top .ula-hero .avia-slideshow-inner { height: max(41.667vw, 480px); padding-bottom: 0 !important; /* overrides Enfold's inline aspect-ratio padding */ } #top .ula-hero .avia-slideshow-inner > li, #top .ula-hero .avia-slide-wrap { height: 100%; } #top .ula-hero .avia-slide-wrap img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; max-width: none; } /* bottom gradient */ #top .ula-hero .avia-slide-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 400px; max-height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7)); pointer-events: none; } /* caption block sits above the gradient */ #top .ula-hero .av-slideshow-caption { position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 5; width: 100%; height: auto; padding: 0 0 60px; background: none; border: 0; text-align: left; } #top .ula-hero .caption_container, #top .ula-hero .slideshow_caption, #top .ula-hero .slideshow_inner_caption, #top .ula-hero .slideshow_align_caption { height: auto; position: static; display: block; width: auto; max-width: none; padding: 0; margin: 0; } #top .ula-hero .caption_container { width: calc(100% - (2 * var(--ula-gutter))); max-width: var(--ula-content-width); margin: 0 auto; } #top .ula-hero .slideshow_align_caption { color: #fff; } #top .ula-hero .avia-caption-title, #top .ula-hero .avia-caption-title a { font-family: var(--ula-heading-font); font-weight: 600; color: #fff; text-shadow: none; margin: 0; text-transform: none; letter-spacing: 0; } #top .ula-hero .avia-caption-content, #top .ula-hero .avia-caption-content p { font: 500 22px/34px var(--ula-body-font); color: #fff; margin: 0; } #top .ula-hero .slideshow_align_caption br { display: none; } /* Slide with title + button only (slide 1): centred headline 34/50, button below */ #top .ula-hero .slideshow_align_caption { text-align: center; } #top .ula-hero .avia-caption-title { font-size: 34px; line-height: 50px; max-width: 660px; margin: 0 auto 24px; } /* Slide with title + text + button (slide 2): left text block (660), button bottom-right */ #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) { text-align: left; position: relative; min-height: 121px; } #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) .avia-caption-title { font-size: 42px; line-height: 55px; max-width: 660px; margin: 0 0 5px; } #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) .avia-caption-content { max-width: 660px; } #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) .avia-slideshow-button { position: absolute; right: 0; bottom: 0; margin: 0; } /* Hero buttons: white, burnt-orange label (Play Video 28/42 + play icon; Learn More 30/42) */ #top .ula-hero .avia-slideshow-button.avia-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; height: 56px; min-height: 56px; box-sizing: border-box; padding: 5px 30px 5px 30px; margin: 0; background: #fff; color: var(--ula-burnt-orange); font: 600 28px/42px var(--ula-body-font); border: 0; border-radius: 0; box-shadow: none; text-shadow: none; text-decoration: none; } #top .ula-hero .avia-slideshow-button.avia-button[href*="vimeo.com"]::before { content: ""; flex: 0 0 26px; width: 26px; height: 30px; background: url('../images/icons/play.svg') no-repeat center / contain; } #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) .avia-slideshow-button.avia-button { font-size: 30px; } #top .ula-hero .avia-slideshow-button.avia-button:hover, #top .ula-hero .avia-slideshow-button.avia-button:focus-visible { background: var(--ula-cream); color: var(--ula-burnt-orange); } #top .ula-hero .avia-slideshow-button.avia-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* Arrows: Figma SVG icons only (43px, white, no box/border), vertically centred, icon 60px from the edges. Enfold paints a 2px white border + dark box on a.avia-svg-icon (av-control-minimal) and sets width/margin; beat it with the same class chain. */ #top .ula-hero .avia-slideshow-arrows { position: static; } #top .ula-hero.av-control-minimal .avia-slideshow-arrows a, #top .ula-hero.av-control-minimal .avia-slideshow-arrows a.avia-svg-icon { position: absolute; top: 50%; z-index: 10; width: 56px !important; height: 56px; margin: -28px 0 0; display: block; opacity: 1; visibility: visible; background: transparent center / 45px 46px no-repeat; border: 0; border-radius: 0; box-shadow: none; text-indent: 0; font-size: 0; line-height: 0; } #top .ula-hero .avia-slideshow-arrows a svg { display: none; } #top .ula-hero.av-control-minimal .avia-slideshow-arrows a.prev-slide { left: calc(var(--ula-gutter) - 6px); background-image: url('../images/icons/slider-arrow-left.svg'); } #top .ula-hero.av-control-minimal .avia-slideshow-arrows a.next-slide { right: calc(var(--ula-gutter) - 6px); left: auto; background-image: url('../images/icons/slider-arrow-right.svg'); } #top .ula-hero.av-control-minimal .avia-slideshow-arrows a:hover { background-color: transparent; opacity: .75; } /* keyboard focus = outline ring only (no box fill) */ #top .ula-hero.av-control-minimal .avia-slideshow-arrows a:focus-visible { outline: 3px solid #fff !important; outline-offset: 0; box-shadow: 0 0 0 5px var(--ula-burnt-orange); background-color: transparent; } #top .ula-hero .avia_hidden_link_text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ========================================================================== 5.2 CTA PANELS - 4 x 353x141 full-bleed strip, 10px gaps; phone shows a different 4th set ========================================================================== */ #top .ula-cta-panels { background: #fff; border: 0; margin-top: 10px; margin-bottom: -1px; } /* Figma: hotkeys end at y951, the Why band starts at y950 (1px overlap) */ #top .ula-cta-panels .container { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } #top .ula-cta-panels .container .main_color, #top .ula-cta-panels .entry-content-wrapper { padding: 0; } #top .ula-cta-panels .entry-content-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } #top .ula-cta-panels .entry-content-wrapper::before, #top .ula-cta-panels .entry-content-wrapper::after { display: none; } #top .ula-cta-panels .flex_column { width: auto; float: none; margin: 0; min-height: 141px; padding: 30px 20px 8px; box-sizing: border-box; text-align: center; position: relative; cursor: pointer; transition: filter .15s ease; } #top .ula-cta-panels .flex_column:hover { filter: brightness(.92); } #top .ula-cta-panels .flex_column:focus-within { outline: 3px solid var(--ula-text); outline-offset: -6px; } #top .ula-cta-panels .av_textblock_section, #top .ula-cta-panels .avia_textblock { margin: 0; } #top .ula-cta-panels h4 { font: 600 28px/42px var(--ula-body-font); color: #fff; margin: 0 0 5px; } /* Figma CTA titles = theme H4 Catamaran 600 28/42 */ #top .ula-cta-panels p { font: 500 22px/34px var(--ula-body-font); color: #fff; margin: 0; } #top .ula-cta-panels .av-screen-reader-only:focus { color: #fff; } /* the phone-only 4th panel ("Workplace Literacy") lives in its own section, hidden >=768 by ALB visibility */ #top .ula-cta-panels--mobile .entry-content-wrapper { grid-template-columns: 1fr; } /* ========================================================================== 5.3 / 5.4 WHY ADULT LITERACY MATTERS: heading, stat cards, copy + button ========================================================================== */ #top .ula-section-why { padding: 120px 0 24px; overflow: visible; } #top .ula-section-why .container, #top .ula-stats .container, #top .ula-section-why-copy .container { position: relative; z-index: 1; } /* Figma: Lora SemiBold 42/55 #28373F — Matthew: bare H1 (theme H1 token is Catamaran 55/60 for stats; override here). */ #top .ula-section-why h1 { font-family: var(--ula-heading-font); font-weight: 600; font-size: 42px; line-height: 55px; text-align: center; margin: 0; color: var(--ula-heading); } #top .ula-section-why .av-special-heading { margin: 0; } #top .ula-section-why .special-heading-border { display: none; } #top .ula-section-why::before { /* line art, top (Figma: 340x240 @ x=340,y=0) */ content: ""; position: absolute; top: 0; left: 0; width: clamp(220px, 23.6vw, 340px); aspect-ratio: 340 / 240; height: auto; background: url('../images/graphics/squiggle-burnt-orange.svg') no-repeat 0 0 / 100% 100%; z-index: 2; /* tail runs down over the (white) stats section below, as in Figma */ transform: scaleX(-1); /* Figma: mirrored copy of ULA-Graphics-1 - the line leaves the bottom-right corner of the 'Learn to READ' panel and sweeps left */ pointer-events: none; } /* stats */ #top .ula-stats { padding: 0 0 34px; } #top .ula-stats .entry-content-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 10px; justify-content: center; /* Phase 7: shrink below 800px instead of running off both edges at 768 */ } #top .ula-stats .entry-content-wrapper::before, #top .ula-stats .entry-content-wrapper::after { display: none; } #top .ula-stats .flex_column { width: auto; float: none; margin: 0; min-height: 164px; box-sizing: border-box; height: 164px; padding: 18px 26px 0; background: var(--ula-cream); text-align: center; display: flex; flex-direction: column; justify-content: flex-start; /* Figma: header y=18 (62 tall), number y=90 */ } #top .ula-stats .av_textblock_section, #top .ula-stats .avia_textblock { margin: 0; } #top .ula-stats p { margin: 0; } #top .ula-stats p:first-child { font: 600 22px/34px var(--ula-body-font); color: var(--ula-text); margin-bottom: 12px; } /* eyebrow — Dev Mode Catamaran SemiBold 22/34 */ /* Figma: Catamaran Medium 55/60 #BA5025 — Matthew: H2 (matches theme H1 size token; keep as H2 per instruction). */ #top .ula-stats h2 { font-family: var(--ula-body-font); font-weight: 500; font-size: 55px; line-height: 60px; color: var(--ula-burnt-orange); margin: 0; } /* copy + button */ #top .ula-section-why-copy { padding: 0 0 113px; } #top .ula-section-why-copy .avia_textblock { max-width: 800px; margin: 0 auto; text-align: center; } #top .ula-section-why-copy p { margin: 0; } /* Figma: bold lead-in = Paragraph SemiBold 600, fill #BA5025 (CTA colour) */ #top .ula-section-why-copy strong, #top .ula-section-why-copy b { color: var(--ula-burnt-orange); font-weight: 600; } #top .ula-section-why-copy .avia-button-wrap { margin-top: 33px; } #top .ula-section-why-copy::after { /* line art, bottom-right */ content: ""; position: absolute; right: 0; bottom: 0; width: 340px; height: 240px; background: url('../images/graphics/squiggle-burnt-orange.svg') no-repeat 100% 100% / 340px 240px; transform: scaleY(-1); /* Figma: flipped vertically */ pointer-events: none; } /* ========================================================================== 5.5 ABOUT ULA (#A7D0EC band; 640px text | 550x405 illustration; gap 100) ========================================================================== */ #top .ula-about { background: var(--ula-light-blue); padding: 40px 0; } #top .ula-about .entry-content-wrapper { display: grid; grid-template-columns: 640px 550px; column-gap: 100px; align-items: center; justify-content: start; } #top .ula-about .entry-content-wrapper::before, #top .ula-about .entry-content-wrapper::after { display: none; } #top .ula-about .flex_column { width: auto; float: none; margin: 0; } #top .ula-about h3 { font-size: 34px; line-height: 50px; margin: 0 0 20px; } /* Figma Lora 34/50 = theme H3 */ #top .ula-about .av-special-heading { margin: 0; } #top .ula-about .special-heading-border { display: none; } #top .ula-about p { margin: 0 0 20px; } #top .ula-about .avia-button-wrap { margin: 0; } /* HP Why/About CTAs: default orange (dump blue not Dev Mode–proven). */ #top .ula-about .avia-image-container, #top .ula-about .avia_image { margin: 0; display: block; } #top .ula-about img { display: block; width: 550px; max-width: 100%; height: auto; } /* ========================================================================== 5.6 LATEST / FEATURED NEWS & STORIES (Blog Posts grid, dynamic) Card: orange shape 320x395 behind a cream 356x444 box (rounded top-left 26) ========================================================================== */ #top .ula-news { padding: 120px 0 92px; } #top .ula-news h3 { font-size: 34px; line-height: 50px; text-align: center; margin: 0 0 55px; } /* Figma Lora 34/50 = theme H3 */ #top .ula-news .av-special-heading { margin: 0; } /* Figma: cards start 105px below the heading top. The h2 is no longer floated (wrapper is 50px tall), and Enfold's per-page ALB CSS (post-144.css) sets margin-bottom:70px on this heading which would make the gap 120. 50 + 55 = 105. !important + attribute selector beat the ALB unique-class rule that loads after us. */ @media (min-width: 768px) { #top .ula-news .av-special-heading[class*="av-ula"] { margin-bottom: 55px !important; } } /* Mobile: ALB shortcode margin 0,0,70,0 (post-144.css) must not add gap — Figma wants 60px via h2 padding-bottom only */ @media (max-width: 767px) { #top .ula-news .av-special-heading[class*="av-ula"] { margin-bottom: 0 !important; } } /* Enfold wraps the '&' in span.special_amp (italic Baskerville 1.3em, link blue). Figma: one text run, Lora 600 / #28373F. */ #top .ula-news .special_amp { font: inherit; font-style: normal; color: inherit; line-height: inherit; letter-spacing: inherit; } #top .ula-news .special-heading-border { display: none; } #top .ula-news .avia-content-slider, #top .ula-news .avia-content-slider-inner { overflow: visible; padding: 0; margin: 0; } #top .ula-news .slide-entry-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 59px; margin: 0; } #top .ula-news .slide-entry-wrap::before, #top .ula-news .slide-entry-wrap::after { display: none; } #top .ula-news .slide-entry { position: relative; width: auto; float: none; margin: 0; padding: 50px 0 0 47px; min-height: 494px; box-sizing: border-box; background: none; border: 0; box-shadow: none; display: block; clear: none; transition: transform 0.2s ease; /* lifts cream card + orange ::before graphic together */ } #top .ula-news .slide-entry::before { /* orange folded-paper shape */ content: ""; display: block; visibility: visible; overflow: visible; position: absolute; left: 0; top: 0; width: 320px; max-width: 80%; height: 395px; max-height: 80%; background: url('../images/graphics/squiggle-orange.svg') no-repeat 0 0 / 100% 100%; } #top .ula-news .slide-entry .slide-image, #top .ula-news .slide-entry .slide-meta, #top .ula-news .slide-entry .av-vertical-delimiter { display: none; } /* Figma card = title + excerpt + Read more only */ #top .ula-news .slide-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; min-height: 444px; padding: 30px; background: var(--ula-cream); border-radius: 26px 0 0 0; transition: box-shadow 0.2s ease; } /* Lift matches Impact/Programs: card + orange graphic move as one; shadow on cream card; no arrow. */ #top .ula-news .slide-entry:hover, #top .ula-news .slide-entry:focus-within { transform: translateY(-8px); } #top .ula-news .slide-entry:hover .slide-content, #top .ula-news .slide-entry:focus-within .slide-content { box-shadow: 0 10px 28px rgba(40, 55, 63, 0.14); } #top .ula-news .entry-content-header { margin: 0 0 10px; padding: 0; } #top .ula-news .slide-entry-title { font: 600 28px/42px var(--ula-body-font); margin: 0; padding: 0; } #top .ula-news .slide-entry-title a, #top .ula-news .slide-entry-title a:hover { color: var(--ula-text); text-decoration: none; } #top .ula-news .slide-entry-excerpt { margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; font-size: 22px; line-height: 34px; color: var(--ula-text); } #top .ula-news .slide-entry-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; flex: 0 0 auto; } #top .ula-news .read-more-link { position: absolute; left: 30px; bottom: 30px; margin: 0; } #top .ula-news .read-more-link a.more-link { 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-news .read-more-link a.more-link:hover { color: #9a4120; } #top .ula-news .more-link-arrow { display: none; } #top .ula-news .read-more-link a.more-link::after { content: ""; width: 25px; height: 14px; background: url('../images/icons/read-more-arrow.svg') no-repeat center / contain; } /* ========================================================================== RESPONSIVE ========================================================================== */ /* Phase 7: 640 + 100 + 550 = 1290px of columns need a 1410px viewport (60px gutters); below that the two columns share the width in the same 640:550 ratio */ @media (min-width: 1200px) and (max-width: 1409px) { #top .ula-about .entry-content-wrapper { grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr); column-gap: 60px; } } @media (max-width: 1199px) { #top .ula-news .slide-entry-wrap { grid-template-columns: minmax(0, 460px); justify-content: center; gap: 60px; } #top .ula-about .entry-content-wrapper { grid-template-columns: 1fr 1fr; column-gap: 50px; } } /* Phase 7: 990-1239 the four hotkey panels are 240-302px wide: scale the copy so each panel keeps a one-line heading and one-line blurb (141px, as the 1440 comp) */ @media (min-width: 990px) and (max-width: 1239px) { #top .ula-cta-panels .flex_column { padding: 30px 12px 8px; } #top .ula-cta-panels h4 { font-size: 24px; line-height: 34px; } #top .ula-cta-panels p { font-size: 18px; line-height: 28px; } } @media (min-width: 768px) and (max-width: 989px) { #top .ula-section-why::before { left: calc(50% - 238px); width: 220px; } /* 2-col CTA grid: swirl sits on the right edge of the first (Learn to READ) panel */ } @media (max-width: 989px) { #top .ula-cta-panels .entry-content-wrapper { grid-template-columns: repeat(2, 1fr); } #top .ula-cta-panels { margin-bottom: 0; } html.responsive #top .ula-cta-panels .entry-content-wrapper > .flex_column { width: auto; min-width: 0; } /* Enfold's responsive .av_one_fourth width (50%) was shrinking the panels inside their grid cells at 768-989 */ #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) .avia-caption-title { font-size: 34px; line-height: 46px; } } @media (max-width: 767px) { /* hero: 393x600 crop, smaller arrows */ #top .ula-hero .avia-slideshow-inner { height: 600px; } /* * Mobile slider image crop (Figma HP - Mobile Slider 393×600). * Source home-hero.webp = 2560×1067 (same aspect as uploads/home-hero.webp 1600×667). * Cover into 390×600 is height-limited (scale = 600/1067 ≈ 0.562 → scaled W ≈ 1440); * only X overflows (~1050px), so object-position-x shifts the window: * left = (posX/100) × (scaledW − 390). * Striped-shirt woman's face sits at ~80% X / ~30% Y in the source (guides on * hero1-guides.png); older woman is left of ~50%. object-position: 80% 32% places * that face point at 80%/32% of the box (upper-right), matching Figma framing. * Slide 2: pair mid-point ~48% X / ~38% Y (tutor interaction). Desktop unchanged. */ #top .ula-hero .avia-slideshow-inner > li.slide-1 .avia-slide-wrap img { object-fit: cover; object-position: 80% 32%; } #top .ula-hero .avia-slideshow-inner > li.slide-2 .avia-slide-wrap img { object-fit: cover; object-position: 48% 38%; } #top .ula-hero .av-slideshow-caption { padding-bottom: 60px; } #top .ula-hero .avia-caption-title { font-size: 26px; line-height: 38px; } /* Dev Mode HP Mobile Welcome Lora 26/38 */ /* #45 Crystal: both slide layout 1 and 2 stack centered on mobile */ #top .ula-hero .slideshow_align_caption, #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) { text-align: center; position: static; min-height: 0; } #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) .avia-caption-title { font-size: 26px; line-height: 38px; max-width: none; margin: 0 auto 16px; } #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) .avia-caption-content { max-width: none; margin: 0 auto 20px; } #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) .avia-slideshow-button { position: static; margin: 0 auto; display: inline-block; } #top .ula-hero .slideshow_align_caption:has(.avia-caption-content:not(:empty)) .avia-slideshow-button { position: static; margin-top: 20px; } #top .ula-hero .avia-slideshow-button.avia-button { font-size: 22px; line-height: 34px; padding: 5px 20px; } /* Dev Mode Play Video 22/34 */ #top .ula-hero.av-control-minimal .avia-slideshow-arrows a { width: 44px !important; height: 44px; margin-top: -22px; background-size: 25px 25px; } #top .ula-hero.av-control-minimal .avia-slideshow-arrows a.prev-slide { left: 4px; } #top .ula-hero.av-control-minimal .avia-slideshow-arrows a.next-slide { right: 4px; } /* CTA: stacked full-bleed, 393x130, 10px gaps; ALB hides Become a Tutor here and shows Workplace Literacy */ #top .ula-cta-panels .entry-content-wrapper { grid-template-columns: 1fr; } #top .ula-cta-panels .flex_column { min-height: 130px; padding: 30px; } .responsive #top #wrap_all .ula-cta-panels .entry-content-wrapper > .flex_column { margin: 0; } /* Enfold's responsive 20px column margin was making the gaps 30px */ #top .ula-cta-panels h4 { font-size: 22px; line-height: 34px; margin-bottom: 0; } /* Dev Mode HP Mobile CTA Catamaran SemiBold 22/34 */ /* Figma HP Mobile hotkeys: Donation #F7941D, Workplace #BA5025 (desktop keeps brick Donation + orange Tutor) */ /* ALB injects