/* ========================================================================== WyoHS home-page framework Row / column / module classes are set in Beaver Builder (Advanced > Class): .wyohs-hero hero row (slideshow bg) -> curved bottom edge .wyohs-hero__title

in the hero HTML module -> typing animation (home.js) .wyohs-hero__sub Text Editor module under the title .wyohs-hero__info (i) image-credit button, injected by home.js (desktop only) .wyohs-cards 3-column row that overlaps the hero -> tabs on mobile (home.js) .wyohs-card--learn / --explore / --support per-card colours Sizes are em/px on purpose (BB theme sets html font-size to 62.5%). ========================================================================== */ :root { --wyohs-cream: #fff8e7; --wyohs-navy: #1b3a5c; --wyohs-sand: #d2a56c; --wyohs-green: #4e9553; --wyohs-peach: #f6d7b3; --wyohs-lime: #e2ecb2; --wyohs-ink: #1a1a1a; --wyohs-display: 'Special Gothic Condensed One', 'Arial Narrow', sans-serif; --wyohs-serif: 'Young Serif', Georgia, serif; --wyohs-sans: 'Special Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* ---------- hero ------------------------------------------------------- */ .wyohs-hero { --hero-curve-h: 140px; /* depth of the curved bottom edge */ --hero-curve-color: var(--wyohs-cream); position: relative; overflow: hidden; color: #fff; } /* Curved bottom edge: a wide cream ellipse peeking up from below the row. (Beaver Builder's own Shape Layers threw a PHP error on this install, so the curve is done here instead. Delete this block if you switch back.) */ .wyohs-hero::after { content: ''; position: absolute; left: 50%; bottom: calc(-1 * var(--hero-curve-h) * 1.15); width: 160vw; height: calc(var(--hero-curve-h) * 2.3); transform: translateX(-50%); border-radius: 50%; background: var(--hero-curve-color); z-index: 2; pointer-events: none; } .wyohs-hero .fl-row-content-wrap { z-index: 1; } @media (max-width: 991px) { .wyohs-hero::after { display: none; } /* straight bottom edge on tablet / phone */ .wyohs-hero { --hero-curve-h: 0px; } } .wyohs-hero .wyohs-hero__title, .wyohs-hero__title { margin: 0; font-family: var(--wyohs-serif); font-weight: 400; font-size: clamp(2.6em, 6vw, 6.4em); line-height: 1.05; text-align: center; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); min-height: 1.1em; } .wyohs-hero__title .wyohs-caret { display: inline-block; width: .05em; margin-left: .04em; background: currentColor; animation: wyohs-blink 1s steps(1) infinite; vertical-align: -.05em; height: .9em; } @media (max-width: 767px) { .wyohs-hero .wyohs-hero__title, .wyohs-hero__title { font-size: 3.4em; line-height: 1.1; } .wyohs-hero__sub, .wyohs-hero__sub p { font-size: 1.05em; } } @keyframes wyohs-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .wyohs-hero__title .wyohs-caret { animation: none; } } .wyohs-hero__sub, .wyohs-hero__sub p { margin: 1.2em auto 0; max-width: 46em; text-align: center; font-size: 1.15em; line-height: 1.5; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.4); } .wyohs-hero__sub a { color: var(--wyohs-peach); text-decoration: underline; text-underline-offset: .15em; } .wyohs-hero__sub a:hover { color: #fff; } /* (i) image-credit button: bottom-right of the hero, desktop only */ .wyohs-hero__info { display: none; } @media (min-width: 992px) { .wyohs-hero__info { display: block; position: absolute; right: 28px; bottom: calc(var(--hero-curve-h) + 30px); /* clear of the curve, on the image */ z-index: 4; } .wyohs-hero__info.is-empty { display: none; } .wyohs-hero__info-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(27,58,92,.55); color: rgba(255,255,255,.9); cursor: pointer; backdrop-filter: blur(4px); transition: background .15s ease, color .15s ease; } .wyohs-hero__info-glyph { font-family: 'Helvetica Neue', Arial, sans-serif; /* plain lowercase i */ font-style: normal; font-weight: 700; font-size: 18px; line-height: 1; text-transform: lowercase; border: 1.6px solid currentColor; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding-bottom: 1px; padding-left: 3px; /* optical centring: the i's dot sits left of its stem */ } .wyohs-hero__info-btn:hover, .wyohs-hero__info-btn:focus-visible { background: var(--wyohs-cream); color: var(--wyohs-navy); outline: none; } .wyohs-hero__info-panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: 32em; max-width: 60vw; padding: 20px 22px 22px; background: rgba(255,248,231,.96); color: var(--wyohs-ink); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 1.05em; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; } .wyohs-hero__info.is-open .wyohs-hero__info-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .wyohs-hero__info-title { margin: 0 0 .3em; font-family: var(--wyohs-display); font-size: 1.35em; letter-spacing: 1px; text-transform: uppercase; } .wyohs-hero__info-caption { margin: 0; } .wyohs-hero__info-caption p { margin: 0; } } /* ---------- header row: logo + nav align top while transparent, centre once scrolled ---- */ .fl-theme-builder-header-scrolled .wyohs-header-main .fl-col-group-equal-height.fl-col-group-align-top .fl-col-content { justify-content: center; } /* Learn/Explore/Support row keeps a 16px em base regardless of BB's global body text size. */ .wyohs-cards { font-size: 16px; } /* ---------- transparent header at the top of the page -------------------- Beaver Themer "Overlay: Yes / Transparent" makes the header sit over the hero with its row backgrounds removed until you scroll; BB then adds .fl-theme-builder-header-scrolled and the row backgrounds return (BB already transitions them over .4s). Below: swap the logo and lighten the nav while at the top. */ header.fl-builder-content .wyohs-logo--light { display: none; } header.fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled) .wyohs-logo--light { display: block; } header.fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled) .wyohs-logo--dark { display: none; } header.fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled) .wyohs-mega__toplink, header.fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled) .wyohs-mega__toggle { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); } header.fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled) .wyohs-mega__item:hover > .wyohs-mega__toplink, header.fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled) .wyohs-mega__item.is-open > .wyohs-mega__toplink, header.fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled) .wyohs-mega__item:focus-within > .wyohs-mega__toplink { color: var(--mega-text); text-shadow: none; } header.fl-builder-content .wyohs-mega__toplink, header.fl-builder-content .wyohs-logo img { transition: color .4s ease-in-out, opacity .4s ease-in-out; } /* utility bar keeps a 50% navy tint while the header is transparent at the top */ header.fl-builder-content[data-overlay="1"]:not(.fl-theme-builder-header-scrolled) .wyohs-header-utility > .fl-row-content-wrap { background-color: rgba(27,58,92,.5) !important; } /* while editing in Beaver Builder, show both logos so editors can find them */ .fl-builder-edit header.fl-builder-content .wyohs-logo--light, .fl-builder-edit header.fl-builder-content .wyohs-logo--dark { display: block; } /* ---------- hairline under the header once it leaves the top ----------- The border sits in the box at all times so the header height never jumps; only its colour changes, on the same .4s BB uses for the row backgrounds. Transparent while the header is overlaid on a hero, sand once BB adds .fl-theme-builder-header-scrolled. */ header.fl-builder-content { border-bottom: 2px solid transparent; transition: border-color .4s ease-in-out; } header.fl-builder-content.fl-theme-builder-header-scrolled { border-bottom-color: rgb(218, 205, 175); } /* ---------- cards row -------------------------------------------------- */ .wyohs-cards { --cards-overlap: 180px; /* how far the cards climb into the hero */ position: relative; z-index: 3; /* above the hero curve */ margin-top: calc(-1 * var(--cards-overlap)); /* on the row itself, not the BB margin field: BB puts row margins on the inner wrap, which lets the footer slide up over the card bottoms */ } @media (max-width: 991px) { .wyohs-cards { --cards-overlap: 150px; } } /* tabs overlap the hero image */ @media (max-width: 767px) { .wyohs-cards { --cards-overlap: 120px; } } .wyohs-cards .fl-col-group { align-items: stretch; } .wyohs-cards > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col { padding: 0 14px; } .wyohs-cards > .fl-row-content-wrap > .fl-row-content > .fl-col-group > .fl-col > .fl-col-content { height: 100%; display: flex; flex-direction: column; box-shadow: 0 18px 40px rgba(0,0,0,.18); } .wyohs-cards .fl-module { margin: 0; } .wyohs-cards .wyohs-card__media { padding: 0; } .wyohs-cards .fl-col-group-nested, .wyohs-cards .fl-col-group.fl-col-group-nested { margin: 0; } /* In BB 2.10 the Heading module element *is* the

, so target it directly. */ .wyohs-card .wyohs-card__title, .wyohs-card__title .fl-heading { margin: 0; padding: 28px 28px 22px; font-family: var(--wyohs-serif); font-weight: 400; font-size: 2.4em; letter-spacing: 0; text-transform: none; line-height: 1.05; text-align: left; } /* nested media column: bg photo set in BB, summary text sits on top */ .wyohs-card__media .fl-col-content { min-height: 260px; } .wyohs-cards .wyohs-card__media > .fl-col-content { padding-left: 28px; padding-right: 28px; } /* lines up with the links below */ .wyohs-card__summary p { margin: 0; font-size: 1.15em; line-height: 1.45; max-width: 22em; } .wyohs-card__links { padding: 26px 28px 30px; margin-top: auto; /* pins links to the card bottom */ } .wyohs-card__links p { margin: 0 0 .5em; } .wyohs-card__links a { font-family: var(--wyohs-display); font-size: 1.7em; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; line-height: 1.2; } .wyohs-card__links a:hover .wyohs-card__chev { transform: translateX(4px); } .wyohs-card__chev { display: inline-block; transition: transform .15s ease; font-size: .85em; } /* per-card colours (bg colour itself is set on the column in BB) */ .wyohs-card--learn { --card-fg: var(--wyohs-ink); --card-accent: var(--wyohs-ink); } .wyohs-card--explore { --card-fg: var(--wyohs-lime); --card-accent: var(--wyohs-lime); } .wyohs-card--support { --card-fg: var(--wyohs-peach); --card-accent: var(--wyohs-peach); } .wyohs-card .fl-heading, .wyohs-card .wyohs-card__links a { color: var(--card-fg); } .wyohs-card--learn .wyohs-card__summary { color: #fff; } .wyohs-card--explore .wyohs-card__summary { color: var(--wyohs-lime); } .wyohs-card--support .wyohs-card__summary { color: #fff; } /* ---------- tablet + mobile: cards become tabs (home.js builds the tab bar) ------- */ .wyohs-cards__tabs { display: none; } @media (max-width: 991px) { .wyohs-cards__tabs { display: flex; gap: 4px; margin: 0 14px 0; position: relative; z-index: 4; } .wyohs-cards__tab { flex: 1 1 0; min-width: 0; border: 0; border-radius: 14px 14px 0 0; /* tab-shaped: round on top, square where it meets the card */ padding: 14px 6px 12px; font-family: var(--wyohs-serif); font-size: clamp(2em, 6vw, 2.8em); letter-spacing: 0; line-height: 1; white-space: nowrap; text-transform: none; background: var(--tab-bg, #ddd); color: var(--tab-fg, #111); opacity: .55; cursor: pointer; } .wyohs-cards__tab[aria-selected="true"] { opacity: 1; } .wyohs-cards.is-tabbed .fl-col-group { display: block; } .wyohs-cards.is-tabbed .fl-col { width: 100% !important; max-width: 100%; } .wyohs-cards.is-tabbed .fl-col[hidden] { display: none; } .wyohs-cards.is-tabbed .wyohs-card__title { display: none; } /* tab already shows it */ } /* ---- Hero slideshow: gentle Ken Burns drift ---- */ .wyohs-hero .fl-slideshow-image img.wyohs-kb { transform-origin: 50% 50%; will-change: transform; animation-duration: 18s; animation-timing-function: linear; animation-fill-mode: forwards; animation-iteration-count: 1; } .wyohs-hero .fl-slideshow-image img.wyohs-kb--in { animation-name: wyohs-kb-in; } .wyohs-hero .fl-slideshow-image img.wyohs-kb--out { animation-name: wyohs-kb-out; } .wyohs-hero .fl-slideshow-image img.wyohs-kb--left { animation-name: wyohs-kb-left; } .wyohs-hero .fl-slideshow-image img.wyohs-kb--right { animation-name: wyohs-kb-right; } .wyohs-hero .fl-slideshow-image img.wyohs-kb--up { animation-name: wyohs-kb-up; } .wyohs-hero .fl-slideshow-image img.wyohs-kb--down { animation-name: wyohs-kb-down; } @keyframes wyohs-kb-in { from { transform: scale(1); } to { transform: scale(1.06); } } @keyframes wyohs-kb-out { from { transform: scale(1.06); } to { transform: scale(1); } } @keyframes wyohs-kb-left { from { transform: scale(1.06) translateX(1.5%); } to { transform: scale(1.06) translateX(-1.5%); } } @keyframes wyohs-kb-right { from { transform: scale(1.06) translateX(-1.5%); } to { transform: scale(1.06) translateX(1.5%); } } @keyframes wyohs-kb-up { from { transform: scale(1.06) translateY(1.5%); } to { transform: scale(1.06) translateY(-1.5%); } } @keyframes wyohs-kb-down { from { transform: scale(1.06) translateY(-1.5%); } to { transform: scale(1.06) translateY(1.5%); } } @media (prefers-reduced-motion: reduce) { .wyohs-hero .fl-slideshow-image img.wyohs-kb { animation: none; } } /* ========================================================================== Interior pages: compact page hero (saved row "WHS Page Hero"), prose, FAQ accordions, navy CTA band. ========================================================================== */ /* Site-wide cream canvas (the homepage sets it per-page in BB; interior pages inherit it here). */ body, .fl-page, .fl-page-content { background-color: var(--wyohs-cream); } /* --- Page hero: same row recipe as the homepage hero, but ~25vh, static image, h1 only. Padding-top in the row settings clears the transparent overlay header. --- */ /* Interior page heroes are flat: only the homepage hero keeps the curved bottom. */ .wyohs-hero--page { --hero-curve-h: 0px; } .wyohs-hero--page::after { display: none; } .wyohs-hero .wyohs-hero__title--page, .wyohs-hero__title--page { font-size: clamp(2.4em, 4vw, 4em); min-height: 0; } @media (max-width: 767px) { .wyohs-hero .wyohs-hero__title--page, .wyohs-hero__title--page { font-size: 2.6em; } } /* --- Prose blocks --- */ .wyohs-prose, .wyohs-prose p { font-size: 16px; line-height: 1.6; color: var(--wyohs-ink); } .wyohs-prose { max-width: 44em; margin-left: auto; margin-right: auto; } .wyohs-prose--lead, .wyohs-prose--lead p { font-size: 18px; text-align: center; } /* Long-form legal copy (Terms of Use, Privacy Policy). A Text Editor module carrying `wyohs-prose wyohs-legal`, sibling of the intro box. The measure sits on the children because the intro column zeroes module margins. */ .wyohs-legal > * { max-width: 760px; margin-left: auto; margin-right: auto; } .fl-builder-content .wyohs-legal { padding-top: 16px; padding-bottom: 110px; } .fl-builder-content .wyohs-legal h2 { font-size: 34px; line-height: 1.18; font-weight: 400; color: var(--wyohs-ink); margin-top: 48px; margin-bottom: 14px; } .fl-builder-content .wyohs-legal h2:first-child { margin-top: 0; } .wyohs-legal p { margin-top: 0; margin-bottom: 14px; } .wyohs-legal ul { margin-top: 0; margin-bottom: 14px; padding-left: 1.25em; } .wyohs-legal li { margin-bottom: 6px; font-size: 16px; line-height: 1.6; } @media (max-width: 767px) { .fl-builder-content .wyohs-legal h2 { font-size: 28px; margin-top: 36px; } } /* Beaver Builder's own layout stylesheet strips the underline off every link inside a layout with `.fl-builder-content a:not(.fl-builder-submenu-link)`, which out-specifies a plain `.wyohs-prose a` and left every inline link in prose across the site looking like body text. Matching its shape and adding one class is what it takes to hand the underline back. Scoped to `p` and to `li` with no class of its own, so it reaches text-editor body copy and nothing else. Headings, buttons and component links keep whatever their own stylesheet gives them: a component always puts a class on its list item, body copy never does. */ .fl-builder-content .wyohs-prose p a:not(.fl-builder-submenu-link), .fl-builder-content .wyohs-prose li:not([class]) a:not(.fl-builder-submenu-link), .fl-builder-content .wyohs-faq__accordion .fl-accordion-content p a, .fl-builder-content .wyohs-faq__accordion .fl-accordion-content li:not([class]) a, .fl-builder-content .wyohs-cta p a, .fl-builder-content .wyohs-cta li:not([class]) a { color: var(--wyohs-navy); text-decoration: underline; text-decoration-color: var(--wyohs-sand); text-underline-offset: 3px; text-decoration-thickness: 2px; } .fl-builder-content .wyohs-prose p a:not(.fl-builder-submenu-link):hover, .fl-builder-content .wyohs-prose li:not([class]) a:not(.fl-builder-submenu-link):hover, .fl-builder-content .wyohs-faq__accordion .fl-accordion-content p a:hover, .fl-builder-content .wyohs-faq__accordion .fl-accordion-content li:not([class]) a:hover { color: var(--wyohs-green); text-decoration-color: currentColor; } /* --- FAQ --- */ .wyohs-faq .fl-col-content { max-width: none; margin: 0; } /* FAQ block runs the full 1440px content width */ /* Two FAQ groups side by side; stack at BB's medium breakpoint and below. */ .wyohs-faq .fl-col-group { display: flex; flex-wrap: wrap; gap: 0 48px; } .wyohs-faq .fl-col-group::before, .wyohs-faq .fl-col-group::after { display: none; } /* BB clearfix pseudo-elements would otherwise count as flex items */ .wyohs-faq .fl-col { flex: 1 1 0; min-width: 0; } @media (max-width: 992px) { .wyohs-faq .fl-col { flex: 1 1 100%; width: 100% !important; max-width: 100%; } .wyohs-faq .fl-col + .fl-col { margin-top: 40px; } } .wyohs-faq .fl-module, .wyohs-faq .fl-module-content, .wyohs-page-intro .fl-module, .wyohs-page-intro .fl-module-content { margin-left: 0 !important; margin-right: 0 !important; } /* module edges on the content edge */ .wyohs-page-intro .wyohs-prose { max-width: none; } /* Intro copy takes the Intro Copy Row measure: 75% of the width of the block beneath it (the 1160px section index), centred. A cap rather than a percentage, so a lead that already sits in a 75% box is not narrowed twice. */ .wyohs-page-intro .wyohs-prose--lead > p { max-width: 870px; margin-left: auto; margin-right: auto; } /* The lead is a flex item inside a Box module. Without this it shrink-wraps to the capped paragraph and pins itself to the left, taking the section index with it. */ .wyohs-page-intro .wyohs-prose--lead { width: 100%; } .wyohs-faq .wyohs-faq__heading, .wyohs-faq__heading { font-family: var(--wyohs-display); /* H3 style: Special Gothic Condensed, all caps, 2px tracking */ font-weight: 400; font-size: 2.4em; letter-spacing: 2px; text-transform: uppercase; color: var(--wyohs-navy); margin: 0 0 .6em; padding-bottom: .35em; border-bottom: 2px solid var(--wyohs-sand); } .wyohs-faq__accordion .fl-accordion-item { background: #fff; border: 0 !important; border-radius: 0; overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; } .wyohs-faq__accordion .fl-accordion-item:hover, .wyohs-faq__accordion .fl-accordion-item-active { box-shadow: 0 6px 22px rgba(27,58,92,.08); } .wyohs-faq__accordion .fl-accordion-button { padding: 18px 22px; } .wyohs-faq__accordion .fl-accordion-button-label { font-family: var(--wyohs-serif); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.5em; line-height: 1.3; color: var(--wyohs-navy); } .wyohs-faq__accordion .fl-accordion-button-icon, .wyohs-faq__accordion .fl-accordion-button:hover .fl-accordion-button-icon { color: var(--wyohs-sand); font-size: 24px !important; } /* fixed px so hover/nesting can't change it */ .wyohs-faq__accordion .fl-accordion-item-active .fl-accordion-button-icon { color: var(--wyohs-green); } .wyohs-faq__accordion .fl-accordion-content { padding: 0 22px 22px; } .wyohs-faq__accordion .fl-accordion-content, .wyohs-faq__accordion .fl-accordion-content p, .wyohs-faq__accordion .fl-accordion-content li { font-size: 1.1em; line-height: 1.6; color: var(--wyohs-ink); } .wyohs-faq__accordion .fl-accordion-content p:last-child { margin-bottom: 0; } .wyohs-faq__accordion .fl-accordion-content ul { margin: .4em 0 1em 1.2em; } /* --- CTA band --- */ /* (CTA band bottom spacing is set on the row itself in Beaver Builder: Advanced > Margins.) */ .wyohs-cta .fl-cta-title, .wyohs-cta h2 { font-family: var(--wyohs-serif); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 2.6em; color: #fff; margin-bottom: .4em; } .wyohs-cta .fl-cta-text, .wyohs-cta .fl-cta-text p { font-size: 1.15em; line-height: 1.6; color: var(--wyohs-peach); max-width: 40em; margin-left: auto; margin-right: auto; } .wyohs-cta a { color: #fff; text-decoration: underline; text-decoration-color: var(--wyohs-sand); text-underline-offset: 3px; } .wyohs-cta .fl-button { font-family: var(--wyohs-display); font-size: 1.6em; letter-spacing: 2px; text-transform: uppercase; padding: 14px 36px; border-radius: 6px; } .wyohs-cta .fl-button, .wyohs-cta .fl-button * { text-decoration: none; } /* ---- Hero slideshow: no jolt on the first frame ---- */ /* The images sit at scale(1) until home.js adds a wyohs-kb--* class. Five of the six moves used to begin at scale(1.06) with a translate, so the class landing snapped the background a few pixels. Every move below now starts from exactly the resting transform, so nothing jumps. */ .wyohs-hero .fl-slideshow-image img, .wyohs-hero .fl-slideshow-image img.wyohs-kb { transform: scale(1.06); transform-origin: 50% 50%; backface-visibility: hidden; } @keyframes wyohs-kb-in { from { transform: scale(1.06); } to { transform: scale(1.12); } } @keyframes wyohs-kb-out { from { transform: scale(1.06); } to { transform: scale(1); } } @keyframes wyohs-kb-left { from { transform: scale(1.06) translateX(0); } to { transform: scale(1.06) translateX(-1.5%); } } @keyframes wyohs-kb-right { from { transform: scale(1.06) translateX(0); } to { transform: scale(1.06) translateX(1.5%); } } @keyframes wyohs-kb-up { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.06) translateY(-1.5%); } } @keyframes wyohs-kb-down { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.06) translateY(1.5%); } } @media (prefers-reduced-motion: reduce) { .wyohs-hero .fl-slideshow-image img { transform: scale(1.06); } } /* -------------------------------------------------------------------------- Tab strip, phone refinements — 28 Aug 2026 Three things the theme was deciding for us. The Beaver Builder theme styles every bare