/* ThinkPark — header and navigation. Its own layer on purpose: the nav is the part of this build that has broken most often, and it has no business sharing a file with the ACF section layout. GeneratePress owns the header's COLOUR; this file owns its structure. Base rules first, then every media query, widest to narrowest. Keep it that way: a @media block sitting above an unconditional rule is how a correct-looking rule silently loses. */ /* NOT SET HERE, on purpose — GeneratePress Customizer owns these, and this file used to re-declare or override them, which is why the menu kept breaking: header background Colours > Header (#FFFFFF) nav background Colours > Primary Navigation (#FFFFFF) nav link / hover / current colours same panel nav link height Layout > Primary Navigation (96px) header padding Layout > Header (0 40px) logo width Site Identity (180px) If one of those is wrong, change it in the Customizer. Adding a rule here to force it means two sources of truth, and the other one wins half the time. Check with: python3 bin/css-who.py site-header background */ .site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); } /* Horizontal padding is GP's: Customizer → Layout → Header (80px, and 20px mobile, which GP applies at 768px — the same point --pad-x steps down). It was set here as well and won on specificity, so the Customizer's header padding did nothing. */ .site-header .inside-header { width: 100%; max-width: var(--container); margin: 0 auto; min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; } .site-header .site-description { display: none; } .tp-logo { display: block; height: auto; } .tp-header-actions { display: flex; align-items: center; gap: 1rem; margin-left: 1.5rem; } .tp-header-phone { color: var(--ink); text-decoration: none; white-space: nowrap; font-family: var(--font-head); font-size: 21px; font-weight: var(--weight-bold); letter-spacing: -.01em; } .tp-header-phone__short { display: none; } /* Phone and address stacked in one column, Contact beside them spanning both. A grid rather than a wrapper div, because the markup is three siblings emitted by a GeneratePress hook and nesting them would mean fighting the theme for no gain. The --stacked class is only present when BOTH exist, so the second row can never sit empty and shove the number off centre. */ .tp-header-actions--stacked { display: grid; grid-template-columns: auto auto; grid-template-areas: "phone cta" "email cta"; align-items: center; column-gap: 1.5rem; row-gap: 1px; } .tp-header-actions--stacked .tp-header-phone { grid-area: phone; align-self: end; } .tp-header-actions--stacked .tp-header-email { grid-area: email; align-self: start; } .tp-header-actions--stacked .tp-header-cta { grid-area: cta; } /* Plain text, not a third button: the number and Contact are the two actions, and a row of three equals is no choice at all. */ .tp-header-email { color: var(--ink); text-decoration: none; white-space: nowrap; font-size: 14px; line-height: 1.2; opacity: .75; } .tp-header-email:hover, .tp-header-email:focus-visible { opacity: 1; text-decoration: underline; } .tp-header-email__short { display: none; } .tp-header-cta { min-height: 48px; padding: 16px 28px; font-size: 15px; } .main-navigation .main-nav > ul > li > a { font-weight: var(--weight-medium); } .site-header .tp-header-actions .tp-btn--primary, .site-header .tp-header-actions .tp-btn--primary:visited { background: var(--green-rich); border-color: var(--green-rich); color: var(--white); } .site-header .tp-header-actions .tp-btn--primary:hover, .site-header .tp-header-actions .tp-btn--primary:focus { background: var(--ink); border-color: var(--ink); color: var(--white); } /* Logo SIZE is GeneratePress's: Customizer → Site Identity → Logo Width. This file used to set height:38px;width:auto, which beat GP's `.site-header .header-image{width:…}` on specificity and left the Customizer setting doing nothing. Width is also the right property to control it with — setting height and width together distorts the image. What stays here is the one thing GP core gets wrong: it ships `.site-logo{margin-bottom:20px}` in its own stylesheet. Flexbox centres an item's MARGIN box, so a 30px logo with 20px below it centres as a 50px block and the logo itself sits ~10px high. That is the logo "moving" on resize — it was never centred, the error just grew with the header. Margin zeroed; alignment then comes from align-items alone. */ /* Inlined as a mask so the glyph takes currentColor and needs no HTTP request. Used by the icon-only phone button under 480px. */ :root { --tp-icon-phone: url('data:image/svg+xml;utf8,'); } .site-header .site-logo img, .tp-logo { height: auto; max-width: none; } .site-header .inside-header { padding-top: 0; padding-bottom: 0; } .site-header .site-branding .main-title, .site-header .site-branding .site-description, .site-header p.main-title { display: none !important; } .site-header .site-branding-container { display: flex; align-items: center; } /* Hidden above the breakpoint: on desktop these two actions live in the header bar, not in the menu. (It is a
now, not an
  • , so list-style is gone with it — see functions.php.) */ .tp-menu-cta { display: none; } .site-header .inside-header { flex-wrap: nowrap; gap: 16px; min-height: var(--header-h); } /* The landing template used to size its logo as a percentage of the header (42%, with width:auto on the image), which overrode GP's logo width and rendered it 470x106 instead of 169x38 — a different logo size on one template, and a header 10px taller than every other page. Removed: the logo is the logo. GP's Site Identity width applies here too. */ /* ── Breakpoints ─────────────────────────────────────────── */ /* 1280 MUST match TP_NAV_BREAKPOINT in functions.php, which drives GeneratePress's own mobile-menu media query. If the two disagree, the hamburger appears at one width and this layout switches at another, and the header overflows in the gap between them. bin/audit.py checks it. */ @media (max-width: 1280px) { /* Scroll lock for the open menu. Lived in the layout stylesheet, where it was the only header rule left and could drift out of step with this breakpoint. */ html.mobile-menu-open, html.mobile-menu-open body { overflow: hidden; } /* Dim the page behind the open menu. This is what tells you where the menu ends and the page begins — more honestly than a line, because the page is genuinely out of reach while the menu is open, and the scrim says so. A pseudo-element rather than markup: there is nothing to insert, remove or keep in sync, and it cannot end up orphaned in the DOM if the menu state changes in a way the JS did not anticipate. z-index 90 puts it over the page but under the header (100), so the bar and the panel stay lit. Tapping it closes the menu — see the handler in functions.php; the hit area is the whole dimmed region. */ html.mobile-menu-open body::after { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(7, 7, 7, .45); animation: tp-scrim-in .18s ease-out both; } @keyframes tp-scrim-in { from { opacity: 0 } to { opacity: 1 } } @media (prefers-reduced-motion: reduce) { html.mobile-menu-open body::after { animation: none; } } .tp-header-phone__full { display: none; } .tp-header-phone__short { display: inline; } /* Second deliberate GP override, same reason as the nav height below: GP free has a single Logo Width with no mobile variant. Width, not height, so the aspect ratio is the browser's problem and not ours. */ .site-header .site-logo img, .tp-logo { width: 133px; height: auto; } .site-header .inside-header { gap: 0; } .site-header .site-logo { order: 1; flex: 0 1 auto; min-width: 0; } /* GeneratePress's mobile header STACKS its items, so mobile.min.css gives each one 20px below it: @media (max-width:768px){ .inside-header > :not(:last-child):not(.main-navigation){margin-bottom:20px} } That rule is correct for GP's layout. It is wrong for ours only because the rules above turn .inside-header into a horizontal row — so the spacing for a stack survives into a layout that has no stack. Cancelled here, against GP's own selector, because this is the block that opted out of stacking. Flexbox centres an item's MARGIN box, so left in place it pushed the logo (the only child the selector can match) 10px above centre, which is the logo "moving" on resize. */ .site-header .inside-header > :not(:last-child):not(.main-navigation) { margin-bottom: 0; } .site-header .tp-header-actions { order: 2; margin-left: auto; gap: 10px; } .site-header .main-navigation { order: 3; width: auto; flex: 0 0 auto; margin-left: 10px; } /* The ONE place this layer legitimately overrides GeneratePress. GP's "Primary Navigation" height (96px) is emitted as a flat line-height with no mobile variant — the free theme has no mobile equivalent of the setting, so there is nothing to change in the Customizer. Left alone, a 96px-tall toggle sits inside a 72px header and pushes the whole bar out of square. Tied to --header-h so the header height stays a single number. The toggle itself is NOT in this rule. It is a 44px square button a few lines down, with its own line-height:1, which won this anyway — so naming it here only made it look as though the header height set its line-height when nothing of the sort was happening. */ .main-navigation .mobile-bar-items a { line-height: var(--header-h); } .site-header .tp-header-actions .tp-header-phone, .site-header .tp-header-actions .tp-header-phone:visited { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; background: transparent; color: var(--green-rich); border: 2px solid var(--green-rich); font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-semi); letter-spacing: 0; text-decoration: none; } .site-header .tp-header-actions .tp-header-phone:hover, .site-header .tp-header-actions .tp-header-phone:focus-visible { background: var(--green-rich); color: var(--white); } /* Narrow: the stack unwinds and the address becomes an Email button beside Call. There is no room for an address here, and plain small text next to two buttons would read as a caption rather than something to tap — and would miss the 44px target besides. */ .site-header .tp-header-actions--stacked { display: flex; align-items: center; } .tp-header-email__full { display: none; } .tp-header-email__short { display: inline; } .site-header .tp-header-actions .tp-header-email, .site-header .tp-header-actions .tp-header-email:visited { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; opacity: 1; background: transparent; color: var(--green-rich); border: 2px solid var(--green-rich); font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-semi); letter-spacing: 0; text-decoration: none; } .site-header .tp-header-actions .tp-header-email:hover, .site-header .tp-header-actions .tp-header-email:focus-visible { background: var(--green-rich); color: var(--white); text-decoration: none; } .site-header .tp-header-actions .tp-header-cta { align-items: center; justify-content: center; min-height: 44px; height: 44px; padding: 0 18px; font-size: 14px; border-width: 2px; } .main-navigation .menu-toggle { width: 44px; height: 44px; padding: 0; margin: 0; line-height: 1; border: 2px solid var(--green-rich); background: transparent; color: var(--green-rich); } .main-navigation .menu-toggle .mobile-menu { display: none; } .main-navigation .menu-toggle .gp-icon { margin: 0; } .site-header .main-navigation, .site-header .inside-navigation { position: static; } /* The panel hangs from the bottom of the header, border included. The header is --header-h tall PLUS its 1px bottom border, so topping the panel at --header-h alone laid it over that border by exactly 1px. */ /* Anchored to the header, not to the viewport. This was position:fixed with top set to the header's height, which is only the same thing when the header starts at y=0. Logged into WordPress it does not: the admin bar is 32px (46px on a phone) and WP pushes the document down with html{margin-top}, so a viewport-relative panel opened 32px too high and sat over the bar. position:absolute + top:100% means "directly below the header" whatever is above it — admin bar, future notice banner, anything. The containing block is .site-header, which is positioned because it is sticky. */ .main-navigation .main-nav { position: absolute; top: 100%; left: 0; right: 0; bottom: auto; background: var(--white); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: none; } /* Sized to its contents, not to the viewport. It used to be a full-height sheet whose (generate_after_primary_menu), so GP's menu-link rules never match it. See the note in functions.php. */ .main-nav .tp-menu-cta .tp-btn--primary, .main-nav .tp-menu-cta .tp-btn--primary:visited { background: var(--green-rich); border-color: var(--green-rich); color: var(--white); } .main-nav .tp-menu-cta .tp-btn--primary:hover, .main-nav .tp-menu-cta .tp-btn--primary:active, .main-nav .tp-menu-cta .tp-btn--primary:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--white); } .main-nav .tp-menu-cta .tp-btn--outline, .main-nav .tp-menu-cta .tp-btn--outline:visited { background: transparent; border-color: var(--green-rich); color: var(--green-rich); } /* :active matters more than :hover here. This button is only ever shown on a touch screen, where there is no hover state to speak of — without it the number gave no feedback at all when tapped, which on a tel: link is exactly the moment you want confirmation that the tap registered. border-color is restated so the outline does not stay green against the now-green fill. */ .main-nav .tp-menu-cta .tp-btn--outline:hover, .main-nav .tp-menu-cta .tp-btn--outline:active, .main-nav .tp-menu-cta .tp-btn--outline:focus-visible { background: var(--green-rich); border-color: var(--green-rich); color: var(--white); } /* Suppress the grey flash Chrome paints over the tap, which would otherwise muddy the inversion above. */ .main-nav .tp-menu-cta .tp-btn { -webkit-tap-highlight-color: transparent; } .main-navigation .main-nav .sub-menu { position: static; width: 100%; box-shadow: none; background: var(--grey-light); } .main-navigation .main-nav .sub-menu > li > a { padding-left: calc(var(--pad-x) + 18px); font-size: 16px; background: transparent; } .main-navigation .main-nav .menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; } .main-navigation .main-nav .dropdown-menu-toggle { padding: 0 var(--pad-x); line-height: 56px; } /* No margin-top:auto. Paired with the stretching