, so those classes were missing from entirely. * * App.vue now applies the correct body classes dynamically via watchEffect, * but during SSG / first-paint the body may be classless. The rules below * replicate the most critical scoped CSS so the nav renders correctly even * before JS hydrates. * * The homepage nav (.navigation-bar.homepage without .coloured-nav or * .fixto-fixed) defaults to `color: #fff` (white text) because it is designed * to overlay a dark hero. On this site the hero background is now white * (rgb(255,255,255)), so we must force dark text. We do this by adding * .coloured-nav rules unconditionally for the homepage nav at rest, * matching the behaviour the user would see if they scrolled (fixto-fixed). */ /* Make homepage nav text visible (dark) on the white hero background */ .navigation-bar.homepage ul.dropdown-menu > li, .navigation-bar.homepage ul.dropdown-menu > li > a { color: #000 !important; } /* Hamburger/offcanvas icon on homepage nav — dark to match */ .navigation-bar.homepage .main_menu_col [data-component="offcanvas"] { color: #000 !important; } .navigation-bar.homepage .main_menu_col [data-component="offcanvas"] .bubble { background-color: #000 !important; } /* ─── BODY-CLASS SCOPED RULES: materialis-front-page equivalents ───────────── * * The kirki stylesheet scopes nav font/spacing on .materialis-front-page. * Mirror the key rules here so they apply unconditionally on the homepage * (these are identical to the kirki output for this site's customizer config). */ .navigation-bar.homepage #main_menu > li > a { font-family: Poppins, Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 160%; letter-spacing: 1px; text-transform: uppercase; } /* Dropdown menu item margins — kirki: .materialis-front-page ul.dropdown-menu > li */ .navigation-bar.homepage ul.dropdown-menu > li { margin: 0 4px; } /* ─── INNER PAGE NAV: nav text visible on white header background ──────────── * * Inner pages (merchant, news, etc.) use .header-top WITHOUT the .homepage * modifier. The cached menu style in each page's HTML already sets * `.materialis-inner-page ul.dropdown-menu > li { color: rgb(0,0,0) }` but * that requires the body class to be present. Apply the same rule here * unconditionally using the nav's own classes so it works before hydration. */ .header-top:not(.homepage) ul.dropdown-menu > li, .header-top:not(.homepage) ul.dropdown-menu > li > a { color: #000 !important; } /* Belt-and-suspenders using the body class (always an ancestor of the menu), * mirroring the original inner-page kirki rule * .materialis-inner-page ul.dropdown-menu > li { color: rgb(0,0,0) } * which is NOT in home's baked inline styles, so inner pages need it here. */ body.materialis-inner-page ul.dropdown-menu > li, body.materialis-inner-page ul.dropdown-menu > li > a { color: #000 !important; } /* Inner page nav font — matches kirki: .materialis-inner-page #main_menu > li > a */ body.materialis-inner-page #main_menu > li > a { font-family: Poppins, Helvetica, Arial, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 160%; letter-spacing: 1px; text-transform: uppercase; } /* ─── LOGO SIZE: constrain to original ~70px ───────────────────────────────── * The original constrains the logo via an inline customizer rule * img.logo.dark, img.custom-logo { width:auto; max-height:70px } * placed after the theme stylesheets. In our build a competing theme rule * img.custom-logo, img.logo.dark { max-height:100% } * wins (our inline copy lands in the wrong cascade position), so the logo * rendered full-size (~340px) and pushed the hero down. Re-assert with higher * specificity (scoped to .logo_col) so it wins regardless of cascade order. */ .logo_col img.logo.dark, .logo_col img.custom-logo { width: auto; max-height: 70px; } /* ─── HOMEPAGE HERO TOP SPACING (clears the transparent nav) ───────────────── * The theme JS sets inline padding-top on .header-homepage equal to the navbar * height (~90px) so the hero heading/image sit below the transparent overlay * nav. App.vue re-applies this after hydration (responsive); this CSS fallback * provides the correct desktop value at first paint to avoid a layout jump. */ .header-homepage, body.materialis-inner-page .header-wrapper .header { padding-top: 90px; } /* ─── OVERLAP-FIRST-SECTION: SSG-safe fallback ─────────────────────────────── * The @media rule in kirki CSS reads: * .materialis-front-page.overlap-first-section .header-homepage { padding-bottom: 95px } * .materialis-front-page.overlap-first-section .page-content div[data-overlap]:first-of-type > div { margin-top: -95px } * App.vue applies these body classes, so this is handled at runtime. * No additional override needed. */