(currently the hero) sits flush against the viewport top. This neutralizes browser defaults on /, the empty

template part, the .wp-site-blocks wrapper, and any block-gap WP inserts before the first content block. */ html, body { margin: 0 !important; padding: 0 !important; } .wp-site-blocks { padding-top: 0 !important; margin-top: 0 !important; } main.wp-block-group { margin-top: 0 !important; padding-top: 0 !important; } main.wp-block-group > :first-child, main.wp-block-group > .wp-block-group:first-child { margin-top: 0 !important; } /* The empty

from the template-part still renders as a block element with potential default margin. Collapse it entirely while the header content is intentionally empty. */ body > .wp-site-blocks > header:empty, .wp-site-blocks > header:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } /* ----------------------------------------------------------------- Top header. parts/header.html is raw HTML inside a wp:html block (not nested wp:group + wp:navigation). That gives us a plain

with two direct children: the logo anchor on the left and a

on the right. Layout is trivial flexbox with no WP block-layout interference. ----------------------------------------------------------------- */ .ph-header { /* 20px above and below the row. */ padding: 20px 1.5rem; background: #fff; box-sizing: border-box; } .ph-header__row { /* Row hugs its tallest child (the logo). Logo on the left, menu on the right, both vertically centered on the row's midline. */ display: flex; align-items: center; justify-content: space-between; } .ph-header__logo { display: inline-flex; align-items: center; line-height: 0; /* avoid an anchor baseline gap below the img */ color: var(--wp--preset--color--ink); text-decoration: none; } .ph-header__logo img { display: block; } .ph-header__nav { display: flex; align-items: center; gap: 1.75rem; } .ph-nav__link { color: var(--wp--preset--color--ink); text-decoration: none; font-weight: 500; font-size: 1.0625rem; line-height: 1; transition: color 120ms ease-in-out; } .ph-nav__link:hover, .ph-nav__link:focus-visible, .ph-nav__link[aria-current="page"] { color: var(--wp--preset--color--accent); } /* ----------------------------------------------------------------- Mobile hamburger. Below 768px the four nav links collapse behind a hamburger button. Tapping it drops a panel of stacked links directly below the header band. ----------------------------------------------------------------- */ .ph-header__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; } .ph-header__toggle-bar { display: block; width: 22px; height: 2px; background: var(--wp--preset--color--ink); transition: transform 180ms ease-in-out, opacity 120ms ease-in-out; } /* Bars fold into an X when the menu is open. */ .ph-header__toggle.is-open .ph-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ph-header__toggle.is-open .ph-header__toggle-bar:nth-child(2) { opacity: 0; } .ph-header__toggle.is-open .ph-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 767px) { .ph-header__toggle { display: flex; } .ph-header__nav { /* Hidden by default on mobile; revealed by .is-open below. */ display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; padding: 0.5rem 1.5rem 1rem; border-top: 1px solid var(--wp--preset--color--line); z-index: 50; } .ph-header__nav.is-open { display: flex; } .ph-header__nav .ph-nav__link { padding: 0.75rem 0; border-bottom: 1px solid var(--wp--preset--color--line); } .ph-header__nav .ph-nav__link:last-child { border-bottom: 0; } /* The header needs to be a positioning context for the absolutely- positioned mobile menu panel. */ .ph-header { position: relative; } } /* Footer brand lockup keeps the older site-logo classes (footer.html was not rewritten). */ .site-logo-link { display: inline-block; line-height: 0; } .site-logo--footer { display: block; height: 2.5rem; width: auto; } @media (min-width: 1024px) { .site-logo--footer { height: 2.75rem; } } /* ================================================================= Interactive states. The brand pattern: - Default: outlined / plain text. - Hover: fill with brand orange. - Current page: fill with brand orange continuously. Applies to the hero CTA buttons (outlined-on-dark) and to the top nav links (plain-text-on-white). ================================================================= */ /* Hero outlined buttons: orange fill on hover. The hero sits over a dark background image so the outlined buttons start as transparent-with-white-border and flip to solid orange on hover. */ .hero__cta-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover, .hero__cta-buttons .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-on); } /* Top nav links: hover and current-page both go brand orange. WordPress does NOT add .current-menu-item to custom-URL navigation links, so we rely on aria-current="page" injected by the powerhouse_nav_current_page() filter in functions.php. */ .site-header .wp-block-navigation a, .site-header .wp-block-navigation-item__content { transition: color 120ms ease-in-out; } .site-header .wp-block-navigation a:hover, .site-header .wp-block-navigation a:focus-visible, .site-header .wp-block-navigation a[aria-current="page"], .site-header .wp-block-navigation .current-menu-item > a, .site-header .wp-block-navigation .current_page_item > a { color: var(--wp--preset--color--accent) !important; } /* ================================================================= Hero (Home page) styling. The actual background image is set per-block via the Block Editor sidebar (Background panel), backed by a Media Library attachment. The current image was uploaded by tools/seed-pages.sh from theme/assets/hero-twilight.jpg, which is AI-generated (hero_image_ai_generated, founder-confirmed 2026-05-12). Phase 4 swaps it for a commissioned architectural render via the Block Editor (no theme code change needed at swap time). ================================================================= */ .wp-block-group.hero--home { position: relative; /* All hero visual styling lives here so the wp:group block JSON can stay minimal (just align + className) and the block parser cannot find a mismatch with the saved HTML. */ background-color: #0B0B0B; /* fallback while image loads */ background-image: url(/wp-content/themes/powerhouse/assets/hero-twilight.jpg); background-size: cover; background-position: 50% 35%; background-repeat: no-repeat; color: var(--wp--preset--color--accent-on); padding: 6rem 2rem; margin: 0; min-height: 560px; isolation: isolate; } .wp-block-group.hero--home::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 120deg, rgba(11, 11, 11, 0.85) 0%, rgba(11, 11, 11, 0.65) 40%, rgba(11, 11, 11, 0.15) 75%, rgba(11, 11, 11, 0) 100% ); z-index: -1; pointer-events: none; } /* Investors / Builders / Representatives heroes keep the dark gradient look without a photo. Phase 4 may swap with more specific imagery. */ .wp-block-group.hero--investors, .wp-block-group.hero--builders, .wp-block-group.hero--representatives { background-image: linear-gradient(135deg, #0B0B0B 0%, #1A1A1A 100%); } /* Home hero text column on wide viewports. - Default max-width 40rem caps the body paragraph and other text blocks to title-width, so the body paragraph never extends past the title. - The title gets a wider cap (46rem) because at the largest font size, "peace in the world." needs ~45rem to stay on one line as the hard-break
requires. Without this the title wraps to 3+ lines. - The buttons row escapes the cap and sits on a single line. - margin-left shifts the column 260px to the left of where the constrained-1100px-centered layout would normally place it. On wide viewports this clears the house photograph on the right; on narrow viewports the max() clamp keeps it at the hero's 2rem padding edge so nothing goes off-screen. Mobile (<768px) keeps the natural full-width flow. */ @media (min-width: 768px) { main .wp-block-group.hero--home.is-layout-constrained > p, main .wp-block-group.hero--home.is-layout-constrained > h1, main .wp-block-group.hero--home.is-layout-constrained > h2, main .wp-block-group.hero--home.is-layout-constrained > .wp-block-buttons, main .wp-block-group.hero--home > p.wp-block-paragraph, main .wp-block-group.hero--home > h1.wp-block-heading { box-sizing: border-box !important; max-width: 40rem !important; width: 40rem !important; margin-left: max(2rem, calc((100vw - 1100px) / 2 - 260px)) !important; margin-right: auto !important; } main .wp-block-group.hero--home > h1, main .wp-block-group.hero--home > h1.wp-block-heading { max-width: 46rem !important; width: 46rem !important; } main .wp-block-group.hero--home > .wp-block-buttons { max-width: none !important; width: max-content !important; flex-wrap: nowrap !important; } } /* Hero text classes (typography moved out of pattern JSON so block editor stops flagging them as invalid). Inline styles in pattern files have to match WP's serializer order exactly or the block validator throws. Easier to keep typography here. */ .hero--home .hero__eyebrow { color: var(--wp--preset--color--accent); margin: 0 0 1.25rem 0; font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; } .hero--home .hero__h1 { color: var(--wp--preset--color--accent-on); margin: 0 0 1.25rem 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(2.75rem, 5vw + 1rem, 5.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; } .hero--home .hero__motto { color: #FFE5D6; margin: 0 0 1rem 0; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.125rem, 1vw + 0.7rem, 1.5rem); line-height: 1.45; font-style: italic; font-weight: 400; } .hero--home .hero__lead { color: var(--wp--preset--color--accent-on); margin: 0 0 0.75rem 0; font-size: clamp(1.25rem, 1vw + 0.85rem, 1.5rem); line-height: 1.45; font-weight: 600; } .hero--home .hero__sub { color: #D4D4D8; margin: 0 0 2rem 0; font-size: 1.125rem; line-height: 1.55; font-weight: 400; } /* ================================================================= Hero CTA row. Four buttons in the hero: Partner with us (filled primary) + Invest / Represent / Contact (outlined). The founder's 2026-05-19 reading merged the formerly-separate four-button band into the hero and dropped the duplicate first two (Build, Invest) in favor of the original primary CTAs "Partner with us" + "Invest". Layout uses Gutenberg's default flex-wrap so buttons keep natural widths and wrap cleanly on narrow viewports. ================================================================= */ .wp-block-buttons.hero__cta-buttons { gap: 0.75rem; } .wp-block-buttons.hero__cta-buttons .wp-block-button__link { white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; color: var(--wp--preset--color--accent-on); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px; padding: 0.95rem 1.6rem; font-weight: 600; font-size: 1.0625rem; } /* Hover/focus for the outlined CTAs (Invest, Represent, Contact). Fill with the brand orange on interaction. !important is needed because the buttons carry inline border-color and background styles from Gutenberg block attrs, which beat external rules otherwise. */ @media (hover: hover) { .wp-block-buttons.hero__cta-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--accent) !important; border-color: var(--wp--preset--color--accent) !important; color: var(--wp--preset--color--accent-on) !important; } .wp-block-buttons.hero__cta-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: #D7531A !important; } } .wp-block-buttons.hero__cta-buttons .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--accent) !important; border-color: var(--wp--preset--color--accent) !important; color: var(--wp--preset--color--accent-on) !important; outline: 2px solid #FFFFFF; outline-offset: 2px; } .wp-block-buttons.hero__cta-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible { background-color: #D7531A !important; outline: 2px solid #FFFFFF; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .wp-block-buttons.hero__cta-buttons .wp-block-button__link { transition: none; } } /* ================================================================= Page lede (icon + narrative two-column). Used on Builders / Investors / Representatives. ================================================================= */ .page-lede .page-lede__icon { margin: 0; } .page-lede .page-lede__icon img { display: block; width: 100%; max-width: 320px; height: auto; border-radius: 12px; } @media (max-width: 781px) { .page-lede .page-lede__icon img { max-width: 180px; margin: 0 auto 1.5rem; } } /* Checklist bullets in brand orange, lighter weight markers. Used in "Ideal partner" sections across all three pages. */ ul.wp-block-list.checklist { list-style: none; padding-left: 0; margin-left: 0; } ul.wp-block-list.checklist li { position: relative; padding-left: 1.75rem; } ul.wp-block-list.checklist li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; background-color: var(--wp--preset--color--accent); border-radius: 2px; transform: rotate(45deg); } /* Footer mantra. Always renders on a single line; the brand footer column widens to fit it (min-width: max-content claims the natural text width). On narrow viewports (below 781px), the WP block-columns layout already stacks columns to full width, so the mantra fits there naturally. Fallback: if the column truly cannot widen, the text scrolls horizontally rather than wrapping (clipped by overflow on the column container, which no parent currently imposes, so in practice it just stays on one line). */ .footer-mantra { white-space: nowrap; min-width: max-content; } /* Pull quote leans into the geometric brand feel. */ .pull-quote p { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); padding: 2.5rem 0; } /* ================================================================= Motto interlude (home page). Static descriptive-register motto placed between the hero stack and the content sections below. AGENTS.md "Brand and Naming Discipline" defines the motto pool. ================================================================= */ .motto-interlude { position: relative; } .motto-interlude::before { content: ''; display: block; width: 3rem; height: 2px; background-color: var(--wp--preset--color--accent); margin: 0 auto 1rem; } .motto-interlude__line { color: var(--wp--preset--color--ink); max-width: 38ch; margin-left: auto; margin-right: auto; } /* ================================================================= Contact form (Builders / Investors / Representatives). Native HTML stub. Fluent Forms shortcode replaces this once installed. Visual treatment lives here so the swap to Fluent Forms only needs to apply matching class names. ================================================================= */ .ph-form { color: #FFFFFF; } .ph-form__honeypot { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } .ph-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; } @media (max-width: 640px) { .ph-form__grid { grid-template-columns: 1fr; } } .ph-form__row { display: flex; flex-direction: column; gap: 0.4rem; } .ph-form__row--full { margin-top: 1.25rem; } .ph-form label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #D4D4D8; } .ph-form__req { color: var(--wp--preset--color--accent); margin-left: 0.15rem; } .ph-form input[type="text"], .ph-form input[type="email"], .ph-form textarea, .ph-form select { width: 100%; background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; padding: 0.85rem 1rem; color: #FFFFFF; font-family: inherit; font-size: 1rem; line-height: 1.45; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .ph-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; padding-right: 2.5rem; } .ph-form input::placeholder, .ph-form textarea::placeholder { color: rgba(212, 212, 216, 0.55); } .ph-form input:focus, .ph-form textarea:focus, .ph-form select:focus { outline: none; border-color: var(--wp--preset--color--accent); background-color: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.25); } /* Light variant for the Contact page form, which sits on a white band rather than the dark band used on Builders / Investors / Reps. */ .ph-form--light { color: var(--wp--preset--color--ink); } .ph-form--light label { color: var(--wp--preset--color--ink-muted); } .ph-form--light input[type="text"], .ph-form--light input[type="email"], .ph-form--light textarea, .ph-form--light select { background-color: #FFFFFF; border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--ink); } .ph-form--light input::placeholder, .ph-form--light textarea::placeholder { color: rgba(90, 95, 106, 0.55); } .ph-form--light input:focus, .ph-form--light textarea:focus, .ph-form--light select:focus { background-color: #FFFFFF; border-color: var(--wp--preset--color--accent); box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.15); } .ph-form--light .ph-form__note { color: var(--wp--preset--color--ink-muted); } .ph-form--light .ph-form__submit:focus-visible { outline-color: var(--wp--preset--color--ink); } .ph-form textarea { resize: vertical; min-height: 8rem; } .ph-form__submit { margin-top: 1.5rem; background-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-on); border: none; border-radius: 8px; padding: 1rem 1.75rem; font-family: inherit; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.15s ease, transform 0.05s ease; } .ph-form__submit:hover { background-color: #D7531A; } .ph-form__submit:active { transform: translateY(1px); } .ph-form__submit:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } .ph-form__note { margin-top: 1rem; font-size: 0.8125rem; color: rgba(212, 212, 216, 0.7); } @media (prefers-reduced-motion: reduce) { .ph-form input, .ph-form textarea, .ph-form__submit { transition: none; } } /* ================================================================= Section vertical rhythm. Applies on every viewport. Founder feedback (2026-05-19, twice): "too much space between sections" on every page including home. The first pass tightened mobile only; the second introduced clamp() across all viewports; this third pass is the aggressive one: 1. Tighter clamp() ceilings (sections now ~28-44px on desktop). 2. Kills Gutenberg's default block-gap (~24px) between top-level sections inside

. The clamp() padding above is now the ONLY vertical spacing between sibling bands; block-gap was stacking on top of it. 3. Tighter motto-interlude::before margin (handled separately). Gutenberg blocks emit inline padding-* attributes from block attrs, which beat external stylesheets unless we use !important. clamp() lets spacing scale smoothly between mobile and desktop without a media-query cliff. ================================================================= */ /* Kill the block-gap WP injects between top-level sections. Each section's clamp() padding (below) now owns 100% of the space between bands. */ main.wp-block-group > .wp-block-group { margin-block-start: 0 !important; margin-block-end: 0 !important; } .hero { padding-top: clamp(2.5rem, 3.5vw + 0.5rem, 3.5rem) !important; padding-bottom: clamp(1.75rem, 3vw, 2.5rem) !important; } .hero--home { padding-top: clamp(2.75rem, 4.5vw + 0.5rem, 4rem) !important; padding-bottom: clamp(2rem, 3vw + 0.25rem, 2.75rem) !important; } .page-lede { padding-top: clamp(1.5rem, 2.5vw + 0.25rem, 2.25rem) !important; padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem) !important; } .patent-line { padding-top: 0 !important; padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem) !important; } .ideal-band { padding-top: clamp(1.75rem, 2.75vw + 0.5rem, 2.5rem) !important; padding-bottom: clamp(1.75rem, 2.75vw + 0.5rem, 2.5rem) !important; } .pull-quote { padding-top: clamp(1.75rem, 2.75vw + 0.5rem, 2.5rem) !important; padding-bottom: clamp(1.75rem, 2.75vw + 0.5rem, 2.5rem) !important; } .pull-quote p { padding: clamp(1rem, 1.5vw + 0.25rem, 1.5rem) 0; } .contact-form-band { padding-top: clamp(2rem, 3vw + 0.25rem, 2.75rem) !important; padding-bottom: clamp(2rem, 3vw + 0.25rem, 2.75rem) !important; } .facts-band { padding-top: clamp(1.75rem, 2.75vw + 0.5rem, 2.5rem) !important; padding-bottom: clamp(1.75rem, 2.75vw + 0.5rem, 2.5rem) !important; } .page-note { padding-top: clamp(1rem, 2vw + 0.25rem, 1.75rem) !important; padding-bottom: clamp(0.25rem, 1vw, 0.75rem) !important; } .motto-interlude { padding-top: clamp(1.25rem, 2vw + 0.25rem, 2rem) !important; padding-bottom: clamp(1.25rem, 2vw + 0.25rem, 2rem) !important; } .hero-below { padding-top: clamp(1.25rem, 2vw + 0.25rem, 2rem) !important; padding-bottom: clamp(1.5rem, 2.5vw + 0.25rem, 2.25rem) !important; } /* The two inner columns rows inside .facts-band carry inline margin-top:2rem from block attrs. Trim it. */ .facts-band .wp-block-columns + .wp-block-columns { margin-top: clamp(0.75rem, 1.5vw, 1.25rem) !important; }