/* * Universal header styles. * * Uses --wp--preset--* custom properties provided by the R2C_Universal_Header_Presets * class on non-Ollie pages, or by the active Ollie child theme on Ollie pages. * * ============================================================================ * SYNC CHECKLIST — run through this when updating styles from the child theme. * ============================================================================ * * 1. SCSS partials (compile and copy): * - assets/scss/partials/_header.scss * - assets/scss/partials/_mobile-overlay.scss * - assets/scss/partials/_buttons.scss * The --wp--preset--* var names work as-is — no renaming needed. * * 2. Block style variations (manual port): * JSON files in ollie-child-r2c/styles/blocks/ are NOT captured by SCSS * compilation. Check for new or changed JSON files and port separately. * Currently ported: styles/blocks/button/button-light.json * * 3. Ollie core-navigation.css (manual port — rarely changes): * The parent Ollie theme's assets/styles/core-navigation.css provides * structural nav styles that classic themes don't load. These are ported * manually into the mobile overlay section below: * - Submenu visibility (display: none / display: flex on aria-expanded) * - li width: 100% inside open menu * - Submenu icon positioning, sizing, display: block * - Link border-radius, transition, -webkit-tap-highlight-color * If Ollie updates core-navigation.css, diff it and port relevant changes. * * 4. NOT synced (migration-era, remove when Elementor is retired): * - Layout shift prevention section (flex stabilization, :where() rules) * - .r2c-universal-header typography override (font-family, font-size, line-height) * - .header-mobile line-height: 0 (neutralizes Elementor kit inflation) * - Hardcoded font-size values: nav 1.165rem, buttons 1.05rem, toggle inherit * (revert to var(--wp--preset--font-size--base) and --small respectively) * - OMD toggle-icon duplication (.wp-block-ollie-mega-menu__toggle-icon span + svg) * NOTE: also in _header.scss — remove from both places * - Toggle icon SVG margin-top: 1.4px (revert to .075em) * - Elementor kit isolation rules (link reset, button overrides) * - Elementor reset blanket rule (*:not(svg)... font-size: inherit, etc.) * * 5. PHP (road2college-universal-header.php — not part of CSS sync): * - Core block stylesheets enqueued in enqueue_block_styles() * - Interactivity API + navigation view script enqueued for classic themes * - If new block types are added to the header pattern, add their style * handles to the $blocks array in enqueue_block_styles(). * - strip_layout_rules() in R2C_Universal_Header_Presets — strips alignment * rules from presets output; remove when Elementor is retired * - print_layout_css() at wp_head priority 12 — outputs wp-container CSS * after presets; revert to wp_print_styles enqueue when Elementor is retired * - print_critical_css() :root variable fallbacks — remove when Elementor * is retired */ /* --------------------------------------------------------------------------- * Layout shift prevention (migration-era) * * On classic theme pages the is ~192KB. The browser progressively * renders with partial CSS, causing layout shifts as stylesheets arrive. * * Flex overrides: global-styles sets .is-layout-flex { flex-wrap: * wrap } and gap: 24px, overriding the block-specific wp-container * rules. The .r2c-universal-header prefix gives specificity (0,2,0) * which beats the global (0,1,0) rules regardless of cascade order. * ------------------------------------------------------------------------- */ /* General flex defaults — :where() keeps specificity at (0,1,0) so presets and wp-container rules can override gap/margins later. */ :where(.r2c-universal-header) .is-layout-flex { align-items: center; display: flex; flex-wrap: wrap; } :where(.r2c-universal-header) .is-layout-flex > * { margin: 0; } /* Nowrap overrides — full specificity (0,2,0+) survives global-styles and presets which both re-emit flex-wrap: wrap at (0,1,0). */ .r2c-universal-header .is-nowrap, .r2c-universal-header .wp-block-columns.is-layout-flex { flex-wrap: nowrap; } /* Navigation gap — must survive presets' gap rule. */ .r2c-universal-header .wp-block-navigation.is-layout-flex { gap: 0; } /* Override Elementor kit's font-family ("Source Sans Pro") which wins the cascade on body via .elementor-kit-##### specificity (0,1,0) over the presets' body selector (0,0,1). Setting it on the wrapper ensures all header descendants inherit the correct font. TODO: Remove after Elementor retirement. */ .r2c-universal-header { font-family: 'Source Sans 3', sans-serif; } /* Neutralize the Elementor kit's line-height: 1.45em on the mobile header. The height should be exactly 25px icon + 2 × .5rem padding = 41px. The kit's line-height at 18px font creates a 26.1px line box that inflates the header. The inner flex group's align-items: center handles vertical centering, so line-height: 0 is safe here — it only affects the constrained layout wrapper, not the flex children. TODO: Remove after Elementor retirement. */ /* --------------------------------------------------------------------------- * Desktop / mobile breakpoint swap * ------------------------------------------------------------------------- */ .r2c-universal-header .header-desktop { @media screen and (max-width: 1300px) { display: none; } } .r2c-universal-header .header-desktop .wp-block-group.alignfull:last-of-type { box-shadow: rgba(0, 0, 0, 0.1) 0 2px 8px, rgba(0, 0, 0, 0.06) 0 1px 2px; position: relative; /* lifted above
so box-shadow renders over its background */ z-index: 1; } .r2c-universal-header .header-mobile { box-shadow: rgba(0, 0, 0, 0.1) 0 2px 8px, rgba(0, 0, 0, 0.06) 0 1px 2px; display: none; /* Neutralize Elementor kit's line-height: 1.45em. Mobile header height = 25px icon + 2 × .5rem padding = 41px. The kit's line-height creates a 26.1px line box that inflates it. TODO: Remove after Elementor retirement. */ line-height: 0; padding-left: var(--wp--preset--spacing--medium); padding-right: var(--wp--preset--spacing--medium); position: relative; /* lifted above
so box-shadow renders over its background */ z-index: 1; } .r2c-universal-header .header-mobile img { height: auto; width: 110px; } @media screen and (max-width: 1300px) { .r2c-universal-header .header-mobile { display: block; } } /* --------------------------------------------------------------------------- * Primary nav bar (desktop) * ------------------------------------------------------------------------- */ .r2c-universal-header .primary-nav-bar .wp-block-navigation { /* Clamp max from theme.json --wp--preset--font-size--base. Hardcoded because the variable isn't defined until the presets load, and the desktop header only shows above 1300px where the clamp is already at its maximum. TODO: Revert to var(--wp--preset--font-size--base) after Elementor retirement. */ font-size: 1.165rem; position: relative; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu { position: static; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu button.wp-block-ollie-mega-menu__toggle { padding: var(--wp--preset--spacing--x-small) var(--wp--preset--spacing--small); } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu button.wp-block-ollie-mega-menu__toggle:hover { color: var(--wp--preset--color--primary-alt); text-decoration: underline; text-underline-offset: 0.2em; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu button.wp-block-ollie-mega-menu__toggle[aria-expanded='true'], .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu button.wp-block-ollie-mega-menu__toggle[aria-expanded='true']:hover { background-color: var(--wp--preset--color--primary-alt); color: var(--wp--preset--color--base); } /* Duplicates OMD mega-menu block styles so the toggle icon renders correctly from the first byte of inline CSS, before the OMD external stylesheet loads. TODO: Remove after Elementor retirement — on block theme pages the OMD stylesheet loads early enough. */ .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__toggle-icon { align-self: center; display: inline-block; font-size: inherit; height: .6em; line-height: 0; margin-left: .25em; padding: 0; width: .8em; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__toggle-icon svg { display: inline-block; height: inherit; /* Hardcoded to match Ollie computed value (1.398px at ~18.64px parent font). The OMD block uses .075em which resolves differently per inherited font-size. TODO: Revert to margin-top: .075em after Elementor retirement. */ margin-top: 1.4px; stroke: currentcolor; width: inherit; } /* Mega menus */ .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container { background-color: var(--wp--preset--color--base); left: 140px; max-width: max-content; top: 51px; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container:not(:has(.wp-block-columns)) ul.wp-block-list { display: flex; flex-direction: row; gap: var(--wp--preset--spacing--x-small); } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container .wp-block-columns .wp-block-column { min-width: max-content; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container .wp-block-columns ul.wp-block-list li { margin-bottom: var(--wp--preset--spacing--x-small); } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container li { border-radius: 8px; line-height: 1; padding: var(--wp--preset--spacing--x-small) 0; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container li:hover { background-color: var(--wp--preset--color--main-accent); } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container li a { font-size: var(--wp--preset--font-size--small); font-weight: 400; padding: 0 var(--wp--preset--spacing--small); } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container li a:hover { color: var(--wp--preset--color--primary-alt); text-decoration: none; } /* Menu item with submenu indicator. */ .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container li.has-child a { padding-right: 0; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container li.has-child button.wp-block-navigation__submenu-icon { margin-right: var(--wp--preset--spacing--small); } /* Submenu. */ .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container li ul.wp-block-navigation__submenu-container { border: unset; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container li ul.wp-block-navigation__submenu-container::before { border-top: 2px solid var(--wp--preset--color--primary-alt); content: ''; margin-top: calc(var(--wp--preset--spacing--x-small) / 2); } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container li ul.wp-block-navigation__submenu-container li:hover { background-color: unset; } .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container .menu-container__close-button { top: 0; } @media (min-width: 1300px) { .r2c-universal-header .primary-nav-bar .wp-block-ollie-mega-menu__menu-container .menu-container__close-button { display: none; } } /* Centers the icon in the header within its container. */ .r2c-universal-header .primary-nav-bar figure { align-items: center; display: flex !important; justify-content: center; } /* --------------------------------------------------------------------------- * Elementor kit isolation * * Elementor's global kit styles target `button` and link elements with * class-based selectors (e.g. .elementor-kit-28897 button). These overrides * explicitly reset each header button context to block-theme values. * This section is migration-era only — remove when Elementor is retired. * ------------------------------------------------------------------------- */ /* Links — kit applies font-family, color, and text-decoration via .elementor-kit-##### a. Double class specificity to win. Excludes .wp-block-button__link so button colors aren't overridden. */ .r2c-universal-header.r2c-universal-header a:not(.wp-block-button__link) { color: inherit; font-family: inherit; text-decoration: none; } /* Mega menu toggle buttons */ .r2c-universal-header .primary-nav-bar button.wp-block-ollie-mega-menu__toggle { background-color: transparent; border: none; border-radius: 0; color: inherit; font-family: inherit; /* Inherits from the nav's hardcoded 1.165rem so the OMD toggle icon (.6em × .8em) resolves consistently. TODO: Revert to font-size: inherit after Elementor retirement. */ font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: inherit; text-transform: inherit; } /* Mobile hamburger open button */ .r2c-universal-header.r2c-universal-header button.wp-block-navigation__responsive-container-open, .r2c-universal-header.r2c-universal-header button.wp-block-navigation__responsive-container-open:hover { background-color: transparent; border: none; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; padding: 0; } /* CTA / wp-block-button links */ .r2c-universal-header.r2c-universal-header a.wp-block-button__link { border-radius: 80px; color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--primary); /* Clamp max from theme.json --wp--preset--font-size--small. Hardcoded because the variable isn't defined until the presets load, and the desktop header only shows above 1300px where the clamp is already at its maximum. TODO: Revert to var(--wp--preset--font-size--small) after Elementor retirement. */ font-size: 1.05rem; font-weight: 700; letter-spacing: normal; line-height: inherit; text-decoration: none; text-transform: uppercase; } /* --------------------------------------------------------------------------- * Block style variations * * WP only loads these from the active theme. Since the child theme isn't * active on Elementor pages, we replicate the variation styles here. * Source: ollie-child-r2c/styles/blocks/button/button-light.json * ------------------------------------------------------------------------- */ .r2c-universal-header .wp-block-button.is-style-button-light .wp-block-button__link { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--primary-alt-accent); } /* Button hover overrides (higher specificity than theme.json :where() output). * Source: ollie-child-r2c/assets/scss/partials/_buttons.scss */ .r2c-universal-header .wp-block-button.is-style-fill-accent .wp-block-button__link:hover { background-color: var(--wp--preset--color--primary-alt); } .r2c-universal-header .wp-block-button.is-style-button-light .wp-block-button__link:hover { background-color: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent); } /* --------------------------------------------------------------------------- * Mobile overlay (unscoped) * * WP renders the Navigation responsive container outside the * .r2c-universal-header wrapper, at the end of . * The absurd specificity here is required to override WP Core. * ------------------------------------------------------------------------- */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open { padding: 0 !important; } /* Elementor kit / reset isolation for mobile overlay. Elementor's normalize sets font-size: 100%, border: 0, outline: 0, etc. on all elements. This blanket rule undoes those resets for everything inside the nav container so block styles apply cleanly. */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content *:not(svg):not(path):not(button) { font-size: inherit; margin-block-end: revert; margin-block-start: revert; outline: revert; vertical-align: revert; } /* Kit typography overrides — re-declare explicitly since the kit's .elementor-kit-##### selector beats WP's :where() global styles. */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content { font-family: var(--wp--preset--font-family--primary); font-size: var(--wp--preset--font-size--base); gap: var(--wp--preset--spacing--medium); line-height: var(--wp--custom--line-height--body); } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container { font-size: var(--wp--preset--font-size--base); gap: 5px !important; row-gap: 0 !important; width: 100%; } /* Submenu visibility — Ollie's core-navigation.css hides submenus by default and shows them when the toggle's aria-expanded is true. Not loaded on classic themes. */ .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container { display: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { display: flex; } /* All nav list items need full width (Ollie's core-navigation.css provides this on block themes but it's not loaded on classic themes). */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li { width: 100%; } /* Top-level nav items only. */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li { border-bottom: 1px solid var(--wp--preset--color--border-dark); } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li > .wp-block-navigation-item__content { padding: calc(var(--wp--preset--spacing--small) * 1.5); padding-left: var(--wp--preset--spacing--medium); } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li.open-on-click > button { background: var(--wp--preset--color--base) !important; } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li .wp-block-navigation__submenu-container { align-items: flex-start; background-color: var(--wp--preset--color--border-light) !important; flex-direction: column; gap: 0; padding: 0; width: 100%; } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li .wp-block-navigation__submenu-container a { border-radius: 0; padding: 0; } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li .wp-block-navigation__submenu-container .wp-block-navigation-item__label { padding: calc(var(--wp--preset--spacing--small) * 1.5); padding-left: var(--wp--preset--spacing--x-large); } /* Submenu item with submenu (nested submenu). */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li .wp-block-navigation__submenu-container li.has-child ul.wp-block-navigation__submenu-container { padding-left: var(--wp--preset--spacing--large); } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li .wp-block-navigation__submenu-container li.has-child button { padding: 0; } /* Submenu icon — Ollie's core-navigation.css provides display, position, and sizing. Not loaded on classic themes. */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li .wp-block-navigation__submenu-icon { background: transparent; display: block; height: auto; margin: 0; padding: 12px 0; position: absolute; right: 0; -webkit-tap-highlight-color: transparent; top: 5px; width: 60px; z-index: 10; } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li .wp-block-navigation__submenu-icon svg { height: 16px; margin: 0; padding-right: 14px; } /* Translate the chevron when the parent button is expanded. The SVG lives in a sibling span next to .wp-block-navigation-item__content, so we use the adjacent-sibling combinator (+). */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li .wp-block-navigation-item__content[aria-expanded='true'] + .wp-block-navigation__submenu-icon svg { translate: -14px; } /* Shared styles for all nav items (top-level and submenu). Includes properties from Ollie's core-navigation.css that aren't loaded on classic themes. */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation-item__content { border-radius: 5px; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: .3s ease; width: 100%; } /* Top-level links only — display: block. Submenu links use display: flex via core's .has-child .wp-block-navigation__submenu-container > ... rule. Migration-era Elementor fix (added in 2b0140b7 to prevent desktop layout shifts on Elementor pages). Intentionally not in SCSS — falls under "NOT synced" per Section 4 of this file's sync checklist. Remove when Elementor is retired. */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container > li > a.wp-block-navigation-item__content { display: block; } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item .wp-block-navigation-item__content:hover { background-color: var(--wp--preset--color--main-accent) !important; text-decoration: none; } .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-buttons { width: 100%; } /* Mobile menu toggles. */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { background: transparent; } /* Mobile submenu toggle button (e.g. "About Us") — doubled class beats .elementor-kit-##### button specificity (overrides background-color, font-family, font-size set by the kit). */ .wp-block-navigation__responsive-container.is-menu-open.has-modal-open button.wp-block-navigation-submenu__toggle.wp-block-navigation-submenu__toggle, .wp-block-navigation__responsive-container.is-menu-open.has-modal-open button.wp-block-navigation-submenu__toggle.wp-block-navigation-submenu__toggle:hover { background-color: transparent; font-family: inherit; font-size: inherit; } /* Close button — doubled class beats .elementor-kit-##### button */ button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close, button.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close:hover { background-color: transparent; border: none; border-radius: 0; color: inherit; padding: 0; right: 24px; top: 6px; }