/* * Post-snapshot layout fixes. * * site/ is a 1:1 mirror of filmins.com, so layout bugs that exist on the live * WordPress site are mirrored here too - every fix below reproduces on * filmins.com itself. Fixes live in this file rather than in the mirrored CSS: * `node tools/clone.mjs process` rewrites site/ from the raw mirror, this file * survives. build.mjs links it last in of every page, so it wins over * the theme, the plugins and the inline UberMenu customizer CSS without * needing !important. * * Layout only - no copy changes. Re-check with tools/audit.html (see README). */ /* --------------------------------------------------------------------------- * 1. Mega menu headings were broken mid-word. * * "Specia|l Events Insura|nce", "Movie & Film Produ|ction", "Other * Progr|ams" in the PROGRAMS panel. * * UberMenu is configured with bound submenus, so a "full width" mega panel * is only as wide as the menu bar itself (~470px). Split into three 1/3 * columns that leaves ~140px per column, and the 60px icon gutter leaves * ~105px for the heading - too narrow for "Insurance" or "Production", * which UberMenu's own `overflow-wrap: anywhere` on menu labels then chops * mid-word. The tall result also overflowed the panel's 600px max-height, * adding an inner scrollbar. * * Give the panel room for three readable columns, centred under the bar. * ------------------------------------------------------------------------- */ @media screen and (min-width: 960px) { .ubermenu.ubermenu-main.ubermenu-horizontal .ubermenu-submenu-drop.ubermenu-submenu-align-full_width { left: 50%; right: auto; width: 780px; max-width: calc(100vw - 60px); transform: translateX(-50%); } } /* Belt and braces: a menu label should wrap between words or overflow, never break inside a word, at any width. */ .ubermenu .ubermenu-target-title, .ubermenu .ubermenu-target-text { overflow-wrap: normal; } /* --------------------------------------------------------------------------- * 2. The mobile menu could not be opened. * * Below Astra's 768px breakpoint the theme swaps in its own mobile header: * it shows a hamburger button and hides .ast-mobile-header-content, which * is where the (working) UberMenu nav and its own "Menu" toggle live. * Nothing binds a click handler to that hamburger - tapping it does * nothing, aria-expanded stays "false" and the body never gets * .ast-main-header-nav-open - so there was no way to reach any page but the * one you landed on. * * Drop the dead hamburger and show UberMenu's own toggle instead; its JS is * already wired up and it is styled in the brand blue by the UberMenu * customizer CSS. The below-header bar holds nothing but that hamburger at * this breakpoint, so the whole band goes rather than leaving a 60px gap. * ------------------------------------------------------------------------- */ .ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content { display: block; } .ast-header-break-point .ast-mobile-header-wrap .ast-below-header-wrap { display: none; } /* --------------------------------------------------------------------------- * 3. Home page carrier-logo carousel overflowed the viewport. * * The carousel pulls itself 25px wider than its column on each side. On * desktop that puts the slick arrows (left/right: -20px, translated by half * their width) ~7px outside the viewport, so the "previous" arrow was cut * in half at the left edge; on phones the track itself hangs ~5px off both * edges. Either way the page picks up a few pixels of horizontal scroll, * which the theme's `overflow-x: hidden` then clips. * * Bring the arrows inside the module (25px, matching the other carousel on * the site) and clip the negative gutter on small screens - clipping rather * than zeroing the margins, so the slides keep their width and the logo * captions underneath are not cut off in turn. * ------------------------------------------------------------------------- */ #f-logo-carousel .uabb-image-carousel .slick-prev, #f-logo-carousel .uabb-image-carousel .slick-prev:hover { left: 25px; } #f-logo-carousel .uabb-image-carousel .slick-next, #f-logo-carousel .uabb-image-carousel .slick-next:hover { right: 25px; } @media screen and (max-width: 768px) { #f-logo-carousel { overflow-x: clip; } }