/* ========================================================================== J3 -> J4 MIGRATION FIXES (added 2026-08-11, iSonic) -------------------------------------------------------------------------- Corrects differences introduced by the YOOtheme Pro 2.4.1 -> 4.5.33 upgrade. The customizer variables are IDENTICAL to the live site; the differences all come from YOOtheme 4 shipping new DEFAULTS for values the customizer left unset, so theme.19.css compiles differently. custom.css loads after theme.19.css, so these overrides win and survive a customizer re-save. Target values were measured off the live site (maaa.asn.au) on 2026-08-11: header height 205px = logo row 128px + nav row 58px + 15px margin nav row 58px = menu 34px + social icons 24px (no gap between) top-level link = Open Sans 18px/700 uppercase #2A8FDD, pad 10px 14px dropdown link = Open Sans 18px/400 #000, pad 10px 0 10px 14px headings h1/h2/h3 = Bebas Neue 400 Remove a block only once the same value has been set in the YOOtheme customizer AND theme.19.css has been recompiled by saving the style. ========================================================================== */ /* -------------------------------------------------------------------------- 1. HEADING FONT (was Open Sans, should be Bebas Neue) -------------------------------------------------------------------------- YOOtheme 2 defaulted h1/h2/h3 font-family to @base-heading-font-family ('Bebas Neue'). YOOtheme 4 falls back to @global-font-family ('Open Sans'), and no @base-h1/h2/h3-font-family variable was ever set for this site. h4/h5/h6 were unaffected because they have explicit variables. Visible on: footer column headings, secondary headings on Contact and other pages, and anywhere the .uk-h1/.uk-h2/.uk-h3 helper classes are used. -------------------------------------------------------------------------- */ .h1, .uk-h1, h1, .h2, .uk-h2, h2, .h3, .uk-h3, h3 { font-family: 'Bebas Neue'; font-weight: 400; } /* -------------------------------------------------------------------------- 2. NAVBAR ROW GAP (the cause of the "huge gap" under the menu) -------------------------------------------------------------------------- YOOtheme 4 added a 50px flex gap to the navbar containers. The menu (1305px) plus the social icons (90px) plus a 50px gap exceeds the 1425px container, so the social icons wrapped to their own row and the 50px row-gap went with them, making the nav row 116px instead of 58px. Live wraps the icons the same way but with no gap. -------------------------------------------------------------------------- */ .tm-header .uk-navbar-left, .tm-header .uk-navbar-right, .tm-header .uk-navbar-center, .tm-header .uk-navbar-nav { gap: 0; } @media (min-width: 960px) { .tm-header .uk-navbar-left, .tm-header .uk-navbar-right, .tm-header .uk-navbar-center, .tm-header .uk-navbar-nav { gap: 0; } } /* -------------------------------------------------------------------------- 3. DESKTOP NAVBAR LINKS (match the live ARI Ext Menu appearance) -------------------------------------------------------------------------- Live used mod_ariextmenu, whose markup never picked up any UIkit navbar styling. The J4 build uses mod_menu rendered as a real UIkit navbar, so it inherits YOOtheme 4's navbar defaults (100px item height, 15px/600 near black). The .tm-header prefix is needed on the active-item rules to outrank theme.19.css's equally specific ".uk-navbar-nav > li.uk-active > a". -------------------------------------------------------------------------- */ /* Scoped to .tm-header on purpose. ".tm-header" does not match class="tm-header-mobile" (class selectors match whole tokens), so the mobile header keeps YOOtheme's 100px item height, which is what live uses. */ .tm-header .uk-navbar-item, .tm-header .uk-navbar-nav > li > a, .tm-header .uk-navbar-toggle { min-height: 0; } .tm-header .uk-navbar-nav > li > a, .tm-header .uk-navbar-nav > li.uk-active > a { font-family: 'Open Sans'; font-size: 18px; font-weight: 700; line-height: 12px; text-transform: uppercase; letter-spacing: normal; color: #2A8FDD; padding: 10px 14px; } @media (min-width: 960px) { .tm-header .uk-navbar-nav > li > a, .tm-header .uk-navbar-nav > li.uk-active > a { padding: 10px 14px; } } /* Live fills the item on hover rather than showing an underline bar. */ .tm-header .uk-navbar-nav > li:hover > a, .tm-header .uk-navbar-nav > li > a:focus, .tm-header .uk-navbar-nav > li > a[aria-expanded="true"], .tm-header .uk-navbar-nav > li.uk-active:hover > a, .tm-header .uk-navbar-nav > li.uk-active > a:focus { background-color: #2A8FDD; color: #ffffff; } /* YOOtheme 4's ::before indicator bar is positioned for a 100px-tall item (bottom: 25px), so on a 34px item it floats across the middle of the text. Live has no indicator at all. Suppress it, and give the ACTIVE item a slim underline instead so the current page is still identifiable. */ .tm-header .uk-navbar-nav > li > a::before { display: none; } .tm-header .uk-navbar-nav > li.uk-active > a::before { display: block; left: 14px !important; right: 14px !important; bottom: 2px; height: 3px; background-color: #2A8FDD; background-image: none; } .tm-header .uk-navbar-nav > li.uk-active:hover > a::before { background-color: #ffffff; } /* -------------------------------------------------------------------------- 4. NAVBAR DROPDOWNS (match live) -------------------------------------------------------------------------- Live: Open Sans 18px/400, #000, padding 10px 0 10px 14px, not uppercase. The left-border hover treatment earlier in this file assumes a 14px left padding, which these rules preserve. -------------------------------------------------------------------------- */ .uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown-nav > li.uk-active > a { font-family: 'Open Sans'; font-size: 18px; font-weight: 400; line-height: 1.5; color: #000000; padding: 10px 0 10px 14px; text-transform: none; } .uk-navbar-dropdown-nav .uk-nav-sub a { font-size: 17px; color: #303030; } /* -------------------------------------------------------------------------- 5. FOOTER LINK HOVER -------------------------------------------------------------------------- New behaviour requested 2026-08-11: footer text links fade slightly on hover. Live has no hover state on these at all. -------------------------------------------------------------------------- */ .footer-grid a { transition: opacity 0.2s ease-in-out; } .footer-grid a:hover, .footer-grid a:focus { opacity: 0.7; text-decoration: none; } /* -------------------------------------------------------------------------- 6. MOBILE HEADER (match live) -------------------------------------------------------------------------- Live @375px: header 100px tall, toggle flush left with a 34px hit area, centred logo rendering 296px wide. YOOtheme 4 insets the toggle by 15px, gives it a 20px hit area, and lets the logo fill the 330px max-width set earlier in this file. -------------------------------------------------------------------------- */ /* Live's toggle sits flush against the viewport edge (x=0) and carries its own 17px internal padding, so the icon reads 17px in. YOOtheme 4 leaves the toggle inside the container's 15px gutter, pushing the icon ~15px right. Cancel just the gutter on the left-hand navbar group. */ .tm-header-mobile .uk-navbar-toggle { padding: 0 17px; min-width: 0; } .tm-header-mobile .uk-navbar-left { margin-left: -15px; } .tm-header-mobile .uk-logo img { max-width: 296px; } /* -------------------------------------------------------------------------- 7. DROPDOWN PARENT ARROWS (live has them, the J4 build had none) -------------------------------------------------------------------------- Live's ARI menu printed on every parent: an 8x6px down triangle (menu-arrow-down.png), with the parent link carrying 24px of right padding to make room for it. YOOtheme only prints its own parent icon when the customizer's Navbar > Parent Icon option is on, which was never set for this site, so the J4 menu had no arrows at all. Rather than switch that option on (it renders a larger UIkit chevron that does not match), the arrow is drawn in CSS at live's exact geometry. One deliberate improvement: the triangle uses currentColor, so it turns white with the text on hover. Live's PNG stayed dark against the blue hover fill. -------------------------------------------------------------------------- */ .tm-header .uk-navbar-nav > li.uk-parent > a { position: relative; padding-right: 24px; } .tm-header .uk-navbar-nav > li.uk-parent > a::after { content: ""; position: absolute; right: 9px; top: 50%; margin-top: -3px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; } /* Sub-level parents inside a dropdown get the same arrow, pointing right. */ .uk-navbar-dropdown-nav > li.uk-parent > a { position: relative; padding-right: 20px; } .uk-navbar-dropdown-nav > li.uk-parent > a::after { content: ""; position: absolute; right: 8px; top: 50%; margin-top: -4px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid currentColor; } /* -------------------------------------------------------------------------- 8. DROPDOWN PANEL GEOMETRY (match live) -------------------------------------------------------------------------- Live: 299px wide, no horizontal padding (so link text sits 14px from the panel edge), soft even shadow. YOOtheme 4 compiled 350px wide, 20px padding all round and a heavier offset shadow from @navbar-dropdown-* variables that the live site never actually used, because the ARI menu ignored them. Vertical padding is kept so the first and last links are not flush against the panel edge, and horizontal padding is removed so the -14px hover margin set earlier in custom.css lands the accent border on the panel edge instead of overflowing it. -------------------------------------------------------------------------- */ .tm-header .uk-navbar-dropdown { width: 299px; padding: 20px 0; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); } /* -------------------------------------------------------------------------- 9. 15/10/26 FIXES (iSonic; moved here from a temporary