/* ------------------------------------------------------------------ site-fixes.css Overrides for content-rendering defects in the base theme. Loaded after styles.min.css on every page. ------------------------------------------------------------------ */ /* 1. Homepage hero rendered at 50% width. .slider_slide is display:flex and holds two children that both ask for full width (.slider_media-wrap = 100vw, .slider_content = 100%). Both are shrinkable flex items, so each collapsed to ~50% and the right half of the banner rendered blank. The media wrap is a backdrop, so take it out of flow entirely and let .slider_content be the only in-flow item. */ .slider_slide > .slider_media-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; } .slider_slide > .slider_content { position: relative; flex: 1 1 100%; width: 100%; } /* 2. [data-fade-up] ships as opacity:0 / translateY(8rem) and is only revealed by scripts.min.js, which the interior pages do not load. js/loadmenu.js adds .fade-up-ready to once it has taken over the reveal; until then keep the pre-animation state so the intended animation still plays where JS is available. */ html.fade-up-ready [data-fade-up].is-revealed { opacity: 1; transform: none; } /* No JS at all: never leave the page copy invisible. */ .no-js [data-fade-up] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.fade-up-ready [data-fade-up] { opacity: 1; transform: none; transition: none; } } /* 3. The crest hung out of the header and over the hero. logo.png is 200x238, and .header.transparent forces it to 108px wide, so it renders 129px tall inside a 9.1rem (91px) bar -- a 46px overhang. The logo size is deliberate, so the bar grows to fit it instead. 9.1rem is hard-coded in several places that must move with it. */ @media (min-width: 551px) { .header { height: 15rem; padding-top: 1rem; padding-bottom: 1rem; } .header .block-wrap { align-items: center; } .header img.header_logo-img, .header.transparent img.header_logo-img { margin-top: 0; } /* panels and offsets that were pinned to the old 9.1rem header */ .main-nav, .news-nav, .main-search-box { top: 15rem; } .three-page .section { padding-top: 15rem; } } /* The burger sat flush against the screen edge on phones. */ @media (max-width: 550px) { .header { padding-left: 1.2rem; padding-right: 1.2rem; } } /* 4. The homepage top nav carries 10 items needing ~1334px, but the header offers only ~1162px at 1440 and less below, so the last links AND the burger were pushed off-screen entirely (the burger sat at x=1467). js/loadmenu.js tags any nav with 8+ items as .is-long. Wide screens get tighter spacing; below 1280 the inline links give way to the burger, which already contains every one of them. */ @media (min-width: 1280px) and (max-width: 1619px) { .header_links-list.is-long { gap: 0.2rem; } .header_links-list.is-long .header_links-link { padding: 8px 9px; } .header_links-list.is-long .header_links-link span { font-size: 14px; } } @media (max-width: 1279px) { .header_links-list.is-long > .header_links-item:not(:last-child) { display: none; } } /* 5. .contact-page_container is a grid with a `1fr` track, whose automatic minimum is min-content. Long unbreakable copy pushed that track to 519px inside a 365px viewport, forcing horizontal scroll on phones. Used by 48 pages, so this was site-wide. */ .contact-page_container.grid-1, .contact-page_container.grid-2 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 992px) { .contact-page_container.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .contact-page_details, .contact-page_details-wrap { min-width: 0; } .contact-page_list, .contact-page_details p { overflow-wrap: anywhere; } /* 6. 100vw counts the scrollbar, so these full-bleed blocks rendered ~10px wider than the content area and left every interior page with a small horizontal scrollbar. 100% measures the content area instead. */ .hero-static, .hero_media-wrap, .footer, .footer_wrap { width: 100%; max-width: 100%; } /* 6b. Interior heroes keep a 12rem top padding to hold their copy clear of the header, but the media sat inside that padding, so the top of the page was a white band instead of video and the transparent header had nothing to show through. Let the media cover the whole section - as it does on the home page - while the copy stays inside the padding. */ .hero-static > .hero_media-wrap { position: absolute; top: 0; left: 0; height: 100%; } /* 6c. The breadcrumb separator is the last thing still asking for the Pro font: styles.min.css sets `font-family:"Font Awesome 6 Pro"` with `font-weight:400` on .breadcrumb-item::before, so it rendered as a tofu box. Point it at the Free family, and at weight 900 - \f054 (chevron-right) only ships in the Solid face of Font Awesome Free. */ .breadcrumb .breadcrumb-item + .breadcrumb-item::before { font-family: "Font Awesome 6 Free"; font-weight: 900; } /* 7. The youtube-background plugin injects its mute toggle at the top-right of the hero, where it landed inside the header band and sat out of line with the social column. The bottom-right corner is unusable too: the chatbot bubble is fixed there at z-index 10000 and swallows the click. Park it in the free stretch of the right gutter between the socials (which end ~358px) and the chatbot (which starts ~711px), aligned to the same 8rem column the socials use. The plugin writes position/top/right as an inline style, so these need !important; height must stay auto, or setting both top and bottom would stretch the block down the whole hero. */ .video-background-controls { top: 39rem !important; bottom: auto !important; right: 2rem !important; height: auto !important; }