/* Theme Name: GeneratePress Child Theme URI: https://generatepress.com Description: Default GeneratePress child theme Author: Tom Usborne Author URI: https://tomusborne.com Template: generatepress Version: 0.3 */ /* ============================================================================ GLOBAL BASE COLORS ---------------------------------------------------------------------------- The GeneratePress Global Color palette (Customize → Colors → Global Colors), defined here as CSS custom properties. Values mirror GeneratePress's stock defaults. Note: functions.php injects an inline :root after this stylesheet that remaps --accent to the brand accent, so --accent below may be overridden at runtime. ============================================================================ */ :root { /* ---------- Brand colors (placeholders — overridden per-site by functions.php's trm_shell_brand_css() / the XML import) ---------- */ --brand-primary: #aa0202; --brand-primary-dk: #7a0101; --brand-accent: #ed4250; --brand-cta_primary: #aa0202; --brand-cta_primary-dk: #7a0101; --brand-cta_secondary_bg: #f2f4f7; --brand-display_font: Oswald; --brand-body_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Body Text Color; also Link Color Hover & Navigation text */ --contrast: #222222; /* Entry meta text (post date/author) */ --contrast-2: #575760; /* Lightest contrast — muted text / subtle borders */ --contrast-3: #b2b2be; /* Sub-navigation (dropdown) background */ --base: #f0f0f0; /* Body Background Color */ --base-2: #f7f8f9; /* Header, Navigation, Content, Sidebar & Footer widget backgrounds */ --base-3: #ffffff; /* Link Color */ --accent: #1e73be; /* ---------- Header color knob ---------------------------------------------- Drives the header bar independently of the rest of the palette. Defaults to the accent color with white text; override either per-site (or via the XML import) to recolor the header on its own. The --hdr-* tokens below read from these. */ --header-bg: var(--brand-primary); --header-text: var(--base-3); } /* ============================================================================ HEADER / NAV SUPPORT TOKENS ---------------------------------------------------------------------------- The header + nav rules below rely on these. Recoded standalone so the old DESIGN TOKENS / FOUNDATION blocks could be removed. Colors map to the global palette; spacing/type are GeneratePress-friendly defaults. (functions.php injects live per-site font values over the --font-* fallbacks below.) ============================================================================ */ :root { /* Fonts */ --font-body: var(--brand-body_font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); --font-display: var(--brand-display_font, "Oswald"), var(--font-body); /* Type scale (only the sizes the header uses) */ --text-sm: 0.9rem; --text-base: 1rem; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --content-padding-x: 30px; /* header content L/R gutter — matches .inside-header so the top bar lines up */ /* Layout */ --content-max-width: 1280px; /* = GeneratePress container width (Customize → Layout → Container) */ --container-radius: 5px; /* Colors the slideout / mobile nav use — mapped to the global palette */ --color-text-body: var(--contrast); --color-border-soft: var(--contrast-3); --color-bg-elevated: var(--base-2); } /* ============================================================================ FONT LOADING ---------------------------------------------------------------------------- Oswald loaded from theme assets, not from upload directory. This keeps the stylesheet portable — fonts travel with the theme, not with a given site's uploads folder. ============================================================================ */ @font-face { font-display: swap; font-family: "Oswald"; font-style: normal; font-weight: 400; src: url("assets/fonts/oswald-v57-latin-regular.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Oswald"; font-style: normal; font-weight: 500; src: url("assets/fonts/oswald-v57-latin-500.woff2") format("woff2"); } @font-face { font-display: swap; font-family: "Oswald"; font-style: normal; font-weight: 700; src: url("assets/fonts/oswald-v57-latin-700.woff2") format("woff2"); } /* ============================================================================ MAIN NAVIGATION ---------------------------------------------------------------------------- Clean, minimal main menu — white header, dark text, thin underline that slides in on hover/focus. Multi-level dropdowns on desktop with full keyboard support. On mobile (<1025px) collapses into a slide-out drawer from the right with accordion submenus. Markup expected from WordPress / GeneratePress: .site-header .main-navigation .menu-toggle (GP's mobile hamburger — we hijack it) .main-nav ul.menu li.menu-item li.menu-item.menu-item-has-children a + button.submenu-toggle (button injected by main-menu.js) ul.sub-menu li.menu-item ... The submenu-toggle button is injected by assets/js/main-menu.js. The .menu-drawer-backdrop element is also injected by that script. Per-site customization happens via the design tokens at the top of this file (brand color, fonts) or by overriding the --nav-* tokens below. ============================================================================ */ :root { /* ---------- Header tokens ---------------------------------------------- The header now derives from the GeneratePress global color palette (Customize → Colors → Global Colors / the :root at the top of this file). Change a global color and the header recolors with it. To decouple the header on a given site, override any --hdr-* directly in a later stylesheet or pick one of the body.header-* variants below. */ --hdr-height: 60px; --hdr-bg: var(--header-bg); /* main header band (header color knob) */ --hdr-text: var(--header-text); /* wordmark + nav text */ --hdr-accent: var(--brand-accent); /* header link / hover / underline (brand accent) */ --hdr-top-bg: var(--brand-primary-dk); /* top-bar strip (dark brand) */ --hdr-top-text: var(--header-text); /* top-bar text (light) */ /* Menu pipe-separator color. Derives from the header text color so it stays readable on any header background; the header-* variants override as needed. */ --hdr-divider: color-mix(in srgb, var(--header-text) 30%, transparent); /* Gap between top-level menu items, and link weight. */ --hdr-link-spacing: 24px; --hdr-link-weight: 500; /* Dropdown panel */ --dropdown-bg: var(--base-3); --dropdown-shadow: 0 8px 24px -6px rgba(20, 30, 50, 0.18), 0 4px 8px -2px rgba(20, 30, 50, 0.06); --dropdown-radius: 6px; --dropdown-min-width: 200px; /* Mobile drawer (Menu Plus slideout — not part of the header redesign) */ --drawer-bg: var(--base-3); --drawer-width: min(86vw, 380px); --drawer-shadow: -10px 0 30px -6px rgba(20, 30, 50, 0.18); /* ---- Back-compat aliases ---------------------------------------------- The old --nav-* names now map to the new --hdr-* tokens, so any Tier-2 vertical stylesheet that referenced them keeps working. The retained slideout/mobile rules below also still read --nav-height / --nav-text through these. New code should use the --hdr-* tokens above. */ --nav-height: var(--hdr-height); --nav-bg: var(--hdr-bg); --nav-text: var(--hdr-text); --nav-text-hover: var(--hdr-accent); --nav-underline: var(--hdr-accent); --nav-border: transparent; --nav-link-spacing: var(--hdr-link-spacing); --nav-link-weight: var(--hdr-link-weight); } /* ---------- Header shell ----------------------------------------------- IMPORTANT: !important is used here intentionally. GeneratePress emits inline CSS for .site-header / .main-navigation backgrounds from the Customizer Colors panel (see css-output.php :: header_background_color), and that inline block always loads after our stylesheet — so without forcing the cascade here, any pre-existing Customizer color (including GP's stock var(--base-3)) wins and the brand primary doesn't show. The generate_option_defaults filter in functions.php points the defaults at the brand var for new installs; this rule is the fallback for installs whose theme_mods have already been saved. */ .site-header, body .site-header { background-color: var(--nav-bg) !important; border-bottom: 1px solid var(--nav-border); } .main-navigation:not(.slideout-navigation), body .main-navigation:not(.slideout-navigation) { background-color: var(--nav-bg) !important; } /* ---------- Header color variants (body.header-) ---------------- Set by the "Header style" Customizer picker (functions.php). Default `header-brand` needs no rules — the header uses --hdr-bg/--hdr-text straight from the brand palette. These three override the MAIN bar to a fixed surface; the slim top bar stays the brand strip. Both --hdr-* and the --nav-* aliases are set so the override holds regardless of which the underlying rule reads. On the light surfaces the wordmark/nav text flip to the brand color, the header gains a hairline bottom border, and the fallback logo-mark glyph goes dark so it reads on the gold square. */ body.header-black { --hdr-top-bg: #000000; /* pure black top bar */ --hdr-bg: #1a1a1a; /* slightly lighter black for the main bar */ --nav-bg: #1a1a1a; --hdr-text: #ffffff; --nav-text: #ffffff; --hdr-divider: color-mix(in srgb, #ffffff 30%, transparent); /* light divider on dark header */ } body.header-white { --hdr-bg: #ffffff; --nav-bg: #ffffff; --hdr-text: var(--brand-primary); --nav-text: var(--brand-primary); } body.header-grey { --hdr-bg: #f1f1f1; --nav-bg: #f1f1f1; --hdr-text: var(--brand-primary); --nav-text: var(--brand-primary); } body.header-white .site-header, body.header-grey .site-header { border-bottom: 1px solid color-mix(in srgb, var(--hdr-text) 15%, transparent); } body.header-white .trm-logo-mark, body.header-grey .trm-logo-mark { color: var(--brand-primary); } /* Light headers get a dark menu pipe-divider. (The default is now dark to suit the light GP header; header-black flips it back to light.) */ body.header-white, body.header-grey { --hdr-divider: color-mix(in srgb, #000000 30%, transparent); } /* ---------- Logo container — fixed width across all viewports ---------- Pinning the logo wrapper to 300px keeps every site built from this shell visually consistent regardless of the logo's intrinsic image dimensions. The logo image inside scales proportionally to fit. flex: 0 0 300px = no grow, no shrink, basis 300px. The !important beats GP's css-output and any prior media-query rule. max-width: 100% is a safety net for viewports under 300px (very narrow phones) where overflowing the row would be worse than shrinking. */ .inside-header .site-branding, .inside-header .site-logo, .site-header .site-branding, .site-header .site-logo, .has-inline-mobile-toggle .inside-header .site-branding, .has-inline-mobile-toggle .inside-header .site-logo { flex: 0 0 300px !important; width: 300px !important; max-width: 100%; } .inside-header .site-logo img, .site-header .site-logo img, .inside-header .header-image, .site-header .header-image { max-width: 100%; height: auto; display: block; } /* A little vertical breathing room above/below the logo so the header feels less cramped (applies to both the image logo and the fallback mark+wordmark). */ .inside-header .site-branding, .inside-header .site-logo, .site-header .site-branding, .site-header .site-logo { padding-top: 10px; padding-bottom: 10px; } /* ---------- Fallback logo mark ----------------------------------------- Shown only when no image logo is set (body.trm-no-logo, set in functions.php). A large brand-accent rounded square with the site's initial on the left, and a text column on the right holding the site name over the tagline. As soon as a logo image is added in Customize → Site Identity, the whole fallback disappears and GP's logo shows instead. */ .trm-logo-mark { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 10px; background: var(--hdr-accent); color: var(--hdr-bg); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; } body.trm-no-logo .site-branding { display: flex; align-items: center; gap: var(--space-3); } body.trm-no-logo .trm-brand-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.15; } body.trm-no-logo .main-title { margin: 0; line-height: 1.1; } body.trm-no-logo .main-title a, body.trm-no-logo .main-title a:hover { color: var(--hdr-text); } body.trm-no-logo .trm-brand-tagline { display: block; font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.2; color: var(--hdr-text); opacity: 0.7; } /* ---------- Desktop nav layout ----------------------------------------- */ .main-navigation { background: transparent; min-height: var(--nav-height); } .main-navigation .inside-navigation { display: flex; align-items: center; min-height: var(--nav-height); } .main-navigation .main-nav { margin-left: auto; } .main-navigation .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; /* never wrap to a second row */ align-items: center; gap: var(--nav-link-spacing); } .main-navigation .menu-item { position: relative; flex: 0 0 auto; /* each item is as wide as its content, no shrink */ } .main-navigation .menu-item > a { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) 0; font-size: 15px; font-weight: var(--nav-link-weight); /* Top-level desktop menu items are hard-coded white. !important is necessary because GP's css-output emits an inline rule `.main-navigation .main-nav ul li a { color: }` which has higher specificity than this selector. The slideout panel uses its own selectors below and is unaffected. The value is the header text token so it follows the brand palette. */ color: var(--hdr-text) !important; letter-spacing: 0.01em; white-space: nowrap; /* a multi-word label never breaks mid-text */ position: relative; transition: color 160ms ease; background: none; text-decoration: none; } /* Subtle underline that slides in on hover/focus. Rendered on the .menu-item itself (not the inner ) so it spans the full row including the .submenu-toggle button next to the link text on parent items with dropdowns. Scoped to top-level items only via the `.menu >` direct-child combinator — sub-menu items don't use .menu as their immediate parent (they sit under .sub-menu) so they're skipped. */ .main-navigation .menu > .menu-item::after { content: ""; position: absolute; left: 0; right: 0; /* Anchor ~10px below the (vertically centered) link text instead of the bottom of the full-height nav item, so the gap stays constant if --nav-height changes. 0.7em ≈ half the text line-height. */ top: calc(50% + 0.7em + 10px); height: 2px; background: var(--nav-underline); transform: scaleX(0); /* Center origin = the default "center-out underline" hover. The picker can swap this whole treatment for another via the body.nav-hover-* variants at the end of this section. */ transform-origin: center; transition: transform 220ms ease; pointer-events: none; } .main-navigation .menu > .menu-item:hover::after, .main-navigation .menu > .menu-item:focus-within::after, .main-navigation .menu > .menu-item.current-menu-item::after, .main-navigation .menu > .menu-item.current-menu-ancestor::after { transform: scaleX(1); } .main-navigation .menu-item:hover > a, .main-navigation .menu-item:focus-within > a, .main-navigation .menu-item.current-menu-item > a, .main-navigation .menu-item.current-menu-ancestor > a { color: var(--nav-text-hover); } /* ---------- Injected submenu toggle (button after parent ) ---------- */ .main-navigation .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: var(--space-1); padding: 0; background: transparent; border: 0; color: var(--nav-text); cursor: pointer; transition: color 160ms ease; } .main-navigation .submenu-toggle .caret { width: 10px; height: 10px; transition: transform 220ms ease; } .main-navigation .menu-item.is-open > .submenu-toggle .caret, .main-navigation .submenu-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); } .main-navigation .menu-item:hover > .submenu-toggle, .main-navigation .menu-item:focus-within > .submenu-toggle { color: var(--nav-text-hover); } /* ---------- Dropdown panels ------------------------------------------- */ .main-navigation .sub-menu { list-style: none; margin: 0; padding: var(--space-2) 0; position: absolute; /* Pin flush to the bottom of the parent — any visual gap causes the :hover state to drop when the mouse crosses it. Anything that looks like padding/spacing between the parent and the dropdown should be created with internal padding inside the dropdown, not with a gap. */ top: 100%; left: 0; min-width: var(--dropdown-min-width); background: var(--dropdown-bg); border: 1px solid var(--nav-border); border-radius: var(--dropdown-radius); box-shadow: var(--dropdown-shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms; z-index: 50; } .main-navigation .menu-item-has-children:hover > .sub-menu, .main-navigation .menu-item-has-children:focus-within > .sub-menu, .main-navigation .menu-item-has-children.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 160ms ease, transform 160ms ease, visibility 0s; } .main-navigation .sub-menu .menu-item { width: 100%; } .main-navigation .sub-menu .menu-item > a { display: flex; width: 100%; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 400; /* Hard-coded black on the white dropdown panel background. !important beats GP's inline rule (.main-navigation .main-nav ul ul li a { color: ... }) which would otherwise apply the header_link_color Customizer value. */ color: #000000 !important; white-space: nowrap; justify-content: space-between; align-items: center; } .main-navigation .sub-menu .menu-item > a::after { display: none; } .main-navigation .sub-menu .menu-item:hover > a, .main-navigation .sub-menu .menu-item:focus-within > a { color: #000 !important; background: var(--hdr-accent); } /* Nested submenu (level 2+) flies out to the right */ .main-navigation .sub-menu .sub-menu { top: -1px; left: 100%; margin-left: 2px; } .main-navigation .sub-menu .submenu-toggle .caret { transform: rotate(-90deg); } .main-navigation .sub-menu .menu-item.is-open > .submenu-toggle .caret { transform: rotate(90deg); } /* Right-edge collision: flip rightward submenus to the left */ .main-navigation .sub-menu.flip-left { left: auto; right: 100%; margin-left: 0; margin-right: 2px; } /* ---------- Focus styles (keyboard only) ------------------------------ */ .main-navigation .menu-item > a:focus-visible, .main-navigation .submenu-toggle:focus-visible, .menu-toggle:focus-visible, .menu-drawer-close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: 2px; } /* ---------- Top bar (rendered in functions.php :: generate_before_header) --- Slim strip ABOVE the main header band. Holds a placeholder text blurb and a region marker for now; both are filterable (trm_topbar_blurb / trm_topbar_region). Colors follow the brand palette via the header tokens. */ .trm-topbar { background: var(--hdr-top-bg); color: var(--hdr-top-text); font-size: 12px; } .trm-topbar-inner { max-width: var(--content-max-width); margin: 0 auto; /* Left padding pulled in 15px so the left blurb lines up with the logo's edge; right stays on the gutter. */ padding: var(--space-2) var(--content-padding-x) var(--space-2) calc(var(--content-padding-x) - 15px); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .trm-topbar a { color: var(--hdr-top-text); text-decoration: none; } .trm-topbar a:hover { color: var(--hdr-accent); } .trm-topbar-placeholder { opacity: 0.8; font-style: italic; padding: 0 var(--space-2); } .trm-topbar-region { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } /* ---------- Sticky + condense on scroll -------------------------------- The header sticks to the top; the top bar (which sits ABOVE .site-header) scrolls away on its own. main-menu.js toggles body.header-condensed past a scroll threshold to tighten the bar and shrink the logo. */ .site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 100; transition: box-shadow 200ms ease; } body.header-condensed .site-header { box-shadow: 0 6px 18px rgba(8, 15, 38, 0.28); } body.header-condensed .main-navigation, body.header-condensed .main-navigation .inside-navigation { min-height: calc(var(--hdr-height) - 12px); } body.header-condensed .inside-header .site-logo img, body.header-condensed .site-header .site-logo img { max-height: 40px; transition: max-height 220ms ease; } /* ===================================================================== NAV HOVER VARIANTS (body.nav-hover-