/* ========================================================================== 1. SELF-HOSTED FONTS (Catamaran 400/500/600/700, Lora 600) - SIL OFL, latin + latin-ext No Google Fonts requests. Files: assets/fonts/ (see README there). ========================================================================== */ @font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/catamaran-400-latin-ext-v2.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/catamaran-400-latin-v2.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/catamaran-500-latin-ext-v2.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/catamaran-500-latin-v2.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/catamaran-600-latin-ext-v2.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/catamaran-600-latin-v2.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/catamaran-700-latin-ext-v2.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Catamaran'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/catamaran-700-latin-v2.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/lora-600-latin-ext-v2.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/lora-600-latin-v2.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ========================================================================== 2. DESIGN TOKENS (Figma STYLES page + Comp; Matthew copy 3kn13TIURF0TxVEVRiUNGs) ========================================================================== */ :root { --ula-blue: #0F75BC; --ula-light-blue: #A7D0EC; --ula-orange: #F7941D; --ula-burnt-orange: #BA5025; --ula-cream: #FBF0D1; --ula-text: #28373F; --ula-heading: #28373F; --ula-gray: #9EACAA; --ula-white: #fff; --ula-border: #A7D0EC; /* mobile row dividers; dropdown borders use blue/burnt orange explicitly */ --ula-heading-font: 'Lora', Georgia, 'Times New Roman', serif; --ula-body-font: 'Catamaran', 'Helvetica Neue', Helvetica, Arial, sans-serif; --ula-content-width: 1320px; /* content column inside the 1440 comp */ --ula-gutter: 60px; /* side margin at desktop; 30px on mobile */ --ula-utility-height: 70px; --ula-nav-height: 130px; --ula-focus: 3px solid var(--ula-burnt-orange); --ula-slope: clamp(40px, 11vw, 158px); /* newsletter angled top edge */ } @media (max-width: 989px) { :root { --ula-gutter: 30px; --ula-utility-height: 90px; --ula-nav-height: 110px; } } /* ========================================================================== 3. GLOBAL TYPOGRAPHY Heading levels are chosen for semantics (one H1 per page, H2 sections, H3 subsections, H4 nested). Visual styles are set per level here and per container where the comps differ - never via classes on text. H2 Catamaran 500 55/60 (mobile 44/48) - page title (gray in .ula-page-intro); content lead is H1 H2 Lora 600 38/50 (mobile 30/40) - major section headings H3 Lora 600 34/50 (mobile 26/38) - subsections H4 Catamaran 600 28/42 (mobile 22/34) - nested / card titles H5/H6 Catamaran 600 18/28 ========================================================================== */ body, #top, #top .main_color, #top .alternate_color, #top .footer_color, #top .socket_color { font-family: var(--ula-body-font); color: var(--ula-text); } body, #top p, #top li, #top td { font-size: 22px; line-height: 34px; font-weight: 400; } #top h1, #top h2, #top h3, #top h4, #top h5, #top h6, #top .main_color h1, #top .main_color h2, #top .main_color h3, #top .main_color h4, #top .main_color h5, #top .main_color h6, #top .alternate_color h1, #top .alternate_color h2, #top .alternate_color h3, #top .alternate_color h4, #top .footer_color h2, #top .footer_color h3, #top .footer_color h4 { color: var(--ula-heading); text-transform: none; letter-spacing: 0; } #top h1 { font-family: var(--ula-heading-font); font-weight: 600; font-size: 42px; line-height: 55px; margin: 0 0 30px; } /* STYLES H1 Lora SemiBold 42/55 */ #top h2 { font-family: var(--ula-heading-font); font-weight: 600; font-size: 34px; line-height: 50px; margin: 0 0 20px; } /* Dev Mode H3 / section: Lora SemiBold 34/50 */ #top h3 { font-family: var(--ula-heading-font); font-weight: 600; font-size: 34px; line-height: 50px; margin: 0 0 15px; } #top h4 { font-family: var(--ula-body-font); font-weight: 600; font-size: 28px; line-height: 42px; margin: 0 0 10px; } #top h5, #top h6 { font-family: var(--ula-body-font); font-weight: 400; font-size: 18px; line-height: 28px; margin: 0 0 8px; } /* STYLES H5 Catamaran Regular 18/28 */ #top .av-special-heading .av-special-heading-tag { margin: 0; } #top .av-special-heading { margin-top: 0; margin-bottom: 20px; } /* Links */ /* #9 Crystal: text links in body copy = #BA5025 / 600 (not nav, footer, filters, cards, buttons) */ #top .avia_textblock a:not(.avia-button), #top .entry-content > p a, #top .entry-content .avia_textblock a:not(.avia-button), #top.single-post .entry-content a:not(.avia-button), #top.single-ula_event .entry-content a:not(.avia-button) { color: #BA5025; font-weight: 600; } #top .avia_textblock a:not(.avia-button):hover, #top .entry-content > p a:hover, #top.single-post .entry-content a:not(.avia-button):hover, #top.single-ula_event .entry-content a:not(.avia-button):hover { color: #9a4120; } /* Keep Enfold/nav/footer chrome on their own rules; default anchor fallback */ #top a { color: var(--ula-blue); } #top a:hover { color: var(--ula-burnt-orange); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: var(--ula-focus); outline-offset: 2px; } /* Page width: 1320 content, 60px (desktop) / 30px (mobile) side margins */ #top .container { width: calc(100% - (2 * var(--ula-gutter))); max-width: var(--ula-content-width); padding: 0; } .responsive #top .container, .responsive #top #wrap_all .container { width: calc(100% - (2 * var(--ula-gutter))); max-width: var(--ula-content-width); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } @media (max-width: 989px) { body, #top p, #top li, #top td { font-size: 20px; line-height: 34px; } #top h1 { font-size: 32px; line-height: 46px; } /* STYLES H1 mobile 32/46 */ #top h2 { font-size: 26px; line-height: 38px; } /* Dev Mode H3 mobile 26/38 */ #top h3 { font-size: 26px; line-height: 38px; } #top h4 { font-size: 22px; line-height: 34px; } } /* ========================================================================== 4. BUTTONS — Enfold .avia-button (padding/type from STYLES; COLOR from Comp frames) Hug ~56px, Catamaran 600 22/34 desktop (20/34 mobile), padding 12/30/10/30, radius 0. DEFAULT = burnt orange #BA5025 / hover #9a4120 sitewide unless a Figma node is proven blue via get_design_context/Dev Mode (dump alone does not count). Force Enfold theme-color / blue variants to orange. White = inverse (Play Video, Sign up). Hover scale 1.04 kept. Hide Enfold #scroll-top-link. ========================================================================== */ #top .avia-button, #top .avia-button.avia-size-large, #top .avia-button.avia-size-medium, #top .avia-button.avia-size-small, #top .avia-button.avia-size-x-large { display: inline-block; box-sizing: border-box; min-height: 56px; padding: 12px 30px 10px 30px; border: 0; border-radius: 0; font-family: var(--ula-body-font); font-weight: 600; font-size: 22px; line-height: 34px; text-transform: none; letter-spacing: 0; text-shadow: none; box-shadow: none; color: #fff; background: #BA5025; /* DEFAULT orange (Matthew); Comp-blue pages override via section CSS */ transition: background-color .15s ease, color .15s ease, transform .2s ease; } #top .avia-button .avia_iconbox_title, #top .avia-button .avia_button_text { color: inherit; } #top .avia-button .avia_button_background { display: none; } #top .avia-button:hover, #top .avia-button:focus { background: #9a4120; color: #fff; transform: scale(1.04); /* #10 Crystal — keep */ } @media (prefers-reduced-motion: reduce) { #top .avia-button:hover, #top .avia-button:focus { transform: none; } } #top .avia-button.avia-color-red, #top .avia-button.avia-color-red:link { background: #BA5025; color: #fff; } #top .avia-button.avia-color-red:hover, #top .avia-button.avia-color-red:focus { background: #9a4120; color: #fff; transform: scale(1.04); } #top .avia-button.avia-color-white, #top .avia-button.avia-color-white:link { background: #fff; color: var(--ula-burnt-orange); } #top .avia-button.avia-color-white:hover, #top .avia-button.avia-color-white:focus { background: var(--ula-cream); color: var(--ula-burnt-orange); transform: scale(1.04); } #top .avia-button-center, #top .avia-button-left { margin-bottom: 0; } /* Enfold theme-color / blue / teal etc. → site orange (no proven Comp blue without Dev Mode). */ #top .avia-button.avia-color-theme-color, #top .avia-button.avia-color-theme-color:link, #top .avia-button.avia-color-blue, #top .avia-button.avia-color-blue:link, #top .avia-button.avia-color-light, #top .avia-button.avia-color-dark, #top .avia-button.avia-color-grey, #top .avia-button.avia-color-green, #top .avia-button.avia-color-aqua, #top .avia-button.avia-color-teal, #top .avia-button.avia-color-purple, #top .avia-button.avia-color-orange, #top .avia-button.avia-color-silver { background: #BA5025; color: #fff; } #top .avia-button.avia-color-theme-color:hover, #top .avia-button.avia-color-theme-color:focus, #top .avia-button.avia-color-blue:hover, #top .avia-button.avia-color-blue:focus, #top .avia-button.avia-color-light:hover, #top .avia-button.avia-color-light:focus, #top .avia-button.avia-color-dark:hover, #top .avia-button.avia-color-dark:focus, #top .avia-button.avia-color-grey:hover, #top .avia-button.avia-color-grey:focus, #top .avia-button.avia-color-green:hover, #top .avia-button.avia-color-green:focus, #top .avia-button.avia-color-aqua:hover, #top .avia-button.avia-color-aqua:focus, #top .avia-button.avia-color-teal:hover, #top .avia-button.avia-color-teal:focus, #top .avia-button.avia-color-purple:hover, #top .avia-button.avia-color-purple:focus, #top .avia-button.avia-color-orange:hover, #top .avia-button.avia-color-orange:focus, #top .avia-button.avia-color-silver:hover, #top .avia-button.avia-color-silver:focus { background: #9a4120; color: #fff; transform: scale(1.04); } /* Enfold scroll-to-top — hide sitewide */ a#scroll-top-link { display: none; } @media (max-width: 989px) { #top .avia-button, #top .avia-button.avia-size-large, #top .avia-button.avia-size-medium, #top .avia-button.avia-size-small, #top .avia-button.avia-size-x-large { font-size: 20px; line-height: 34px; /* STYLES Button - Mobile: Body Mobile SemiBold 20/34 */ } } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ALB sections render their own .container inside Enfold's outer one: do not apply the gutter twice. */ #top .container .container, .responsive #top #wrap_all .container .container { width: 100%; max-width: none; margin-left: 0; margin-right: 0; } /* ---- Phase 7: touch targets (<=767). Card links (Our Impact, home News, category archives) get a >=44px hit area without moving anything. ---- */ @media (max-width: 767px) { #top .slide-entry .slide-meta-category a, #top .slide-entry-title a { position: relative; } #top .slide-entry .more-link { position: relative; } #top .slide-entry .slide-meta-category a::before, #top .slide-entry-title a::before, #top .slide-entry .more-link::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; } #top .ula-contact a[href^="tel"] { position: relative; } #top .ula-contact a[href^="tel"]::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; } } /* long page-intro titles (e.g. "News/Announcements") must wrap, never run off the band */ #top .ula-page-intro h2 { overflow-wrap: break-word; } /* Phase 7: any long unbroken word in a title (card titles, headings) wraps inside its box instead of spilling past it */ #top :is(h1, h2, h3, h4, h5, h6), #top .slide-entry-title a { overflow-wrap: break-word; } /* very narrow screens (320): slash-joined words such as "Mission/Vision/Values" may break anywhere rather than run off-screen */ @media (max-width: 359px) { #top .ula-page-intro h2, #top :is(h1, h2, h3, h4, h5, h6), #top .slide-entry-title a { overflow-wrap: anywhere; } }