/* Theme Name: Agility Web Theme URI: https://agilityweb.io Author: Agility Web LLC Author URI: https://agilityweb.io Description: Custom ACF-driven theme for Agility Web Consulting. Listen. Adjust. Deliver. Version: 1.0.0 Requires at least: 6.4 Requires PHP: 8.0 Text Domain: agility-web */ /* -------------------- Variables -------------------- */ :root { /* The 12-color brand palette: Primary/Secondary/Tertiary/Grey, each a dark base + generated Light/Lightest tint (white text is assumed to read fine against every *base* color - see agility_brand_color_tints() in inc/color-utils.php). These are static fallbacks only - the real, live values (recomputed from whatever's actually set in Theme Settings > Colors) are injected as a :root override appended after this stylesheet, see agility_theme_settings_style_overrides() in inc/enqueue.php. */ --color-brandPrimary: #16263b; --color-brandPrimaryLight: #7f8893; --color-brandPrimaryLightest: #d5d8dc; --color-brandSecondary: #2c8c99; --color-brandSecondaryLight: #8bc0c7; --color-brandSecondaryLightest: #d9eaed; --color-brandTertiary: #e8a33d; --color-brandTertiaryLight: #f2cc94; --color-brandTertiaryLightest: #fbeedc; --color-brandGrey: #4a4a4a; --color-brandGreyLight: #9b9b9b; --color-brandGreyLightest: #dedede; --color-white: #ffffff; --color-bg: #f6f8fa; --color-card-bg: #dedede; --color-icon: #e8a33d; --color-border: #e1e6eb; --color-text: #2c3540; --color-text-muted: #5b6b7a; --color-breadcrumb: #9aa4ae; --color-hero-heading: #ffffff; --color-heading-safe: #16263b; --color-header-bg: #ffffff; --color-header-text: #16263b; --color-footer-bg: #16263b; --color-footer-text: #ffffff; --color-cta-banner-bg: #2c8c99; --color-cta-banner-text: #ffffff; --color-brandTertiary-text: #16263b; --color-brandTertiary-hover-text: #16263b; /* Theme Settings > Accents - static fallbacks only, same as the brand palette above; the real, live values are injected as a :root override, see agility_theme_settings_style_overrides() in inc/enqueue.php. */ --color-interactive-accent: #16263b; --color-stats-bg: #16263b; --color-stats-text: #ffffff; --color-stats-accent: #d9eaed; --color-stats-accent-light: #eaf3f5; --color-stats-accent-dark: #b8c7c9; --color-stats-icon: #e8a33d; --color-stats-value: #2c8c99; --color-stats-subtext: #2c8c99; --color-testimonials-bg: #dedede; --color-project-client-label: #e8a33d; --color-case-study-marker: #e8a33d; --color-case-study-marker-light: #fbe9d1; --color-case-study-marker-darkest: #e8a33d; --color-case-study-marker-family-light: #f2cc94; --color-faq-answer: #e8a33d; --color-social-icon: #d9eaed; --color-process-number: #16263b; --logo-max-width: 15.625rem; --fallback-logo-border-width: 10; --header-border-width: 0px; --header-border-color: transparent; --corner-radius: 28px; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Single shared value, not two close-but-different ones (was 71.25rem/ 68.75rem) - every section's content edges (header, footer, and every .container-wrapped section alike) should align with one another exactly, not just approximately. Both variables are kept, rather than collapsing to one, since they still serve distinct roles: --container-width is what .container itself uses (nearly everything on the site); --content-width is for the handful of text-heavy blocks that opt into it on top of that (.section-heading's intro copy, .hero__inner, .faq) - genuinely narrower than this would read as long, hard-to-scan lines for those specifically, this just stops it from ALSO being narrower than the rest of the page's own edges. 1600px (100rem) here is only the DEFAULT for a brand-new site/before Theme Settings has ever been saved - Container Width (Theme Settings > Accents) overrides both to the same admin-picked value from a fixed set of choices (1200/1400/1600/1800/1900px, see agility_theme_settings_style_overrides(), inc/enqueue.php) once it has been. */ --container-width: 100rem; --content-width: 100rem; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --radius: 0.5rem; --section-padding-block: 2.8125rem; } /* -------------------- Reset -------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-white); line-height: 1.6; font-size: 1.0625rem; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-heading-safe); text-decoration: none; } a:hover { opacity: 0.8; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { color: #000000; line-height: 1.25; margin: 0 0 var(--space-2); } h1 { font-size: 3.2rem; } h2 { font-size: 2.4rem; } h3 { font-size: 1.4rem; } h4 { font-size: 1.4rem; } p { margin: 0 0 var(--space-2); } button { font-family: inherit; } /* Standard visually-hidden-but-still-announced utility (same technique/ values WordPress core itself uses under this exact class name) - content present for screen readers/heading structure without taking up visible space. First used by the Case Study tabs' per-panel

(see single-project.php and .case-study-tabs below) - each panel keeps its own real heading for screen-reader navigation even though its visible label already lives on the tab itself. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------- Layout -------------------- */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-3); } .section { padding-block: var(--section-padding-block); } .section--muted { background: var(--color-bg); } /* "What Clients Say" specifically (see template-parts/flexible/testimonials.php) - uses the same configurable Slider Background Color (Theme Settings > Accents, defaults to Primary) as the Stats/"Trusted By" band and the single Work page's Gallery slider - see --color-stats-bg below. Text color isn't overridden here - unlike Stats below, this stays light enough by design that the default dark text/heading colors keep reading fine against it with no separate contrast handling needed. */ .section--brandGrey { background: var(--color-testimonials-bg); } /* Stats/"Trusted By" band (template-parts/flexible/stats.php) - background is Theme Settings > Accents > Slider Background Color (defaults to Primary, matching the original hardcoded look); text color is auto-picked for real contrast against whatever that resolves to (agility_best_text_color(), inc/enqueue.php), same treatment as the Header/Footer/CTA Banner above - a fixed white assumption stopped being safe once the background became configurable. */ .section--brandPrimary { background: var(--color-stats-bg); color: var(--color-stats-text); } /* Re-uses --color-cta-banner-bg/-text (inc/enqueue.php) rather than raw --color-brandSecondary directly - those are already computed to stay readable against the Secondary brand color no matter what it's set to, and the CTA banner is the other section already using that same background, so this keeps the two in sync automatically. */ .section--brandSecondary { background: var(--color-cta-banner-bg); color: var(--color-cta-banner-text); } /* Equal top/bottom whitespace: the section's own padding is symmetric, so the first/last content element must never add its own leading/trailing margin on top of that, or the two sides drift out of sync. */ .section > .container > *:first-child { margin-top: 0; } .section > .container > *:last-child { margin-bottom: 0; } .section--brandPrimary h1, .section--brandPrimary h2, .section--brandPrimary h3 { color: var(--color-stats-text); } .section--brandSecondary h1, .section--brandSecondary h2, .section--brandSecondary h3 { color: var(--color-cta-banner-text); } .section-heading { text-align: center; max-width: var(--content-width); margin: 0 auto; display: flow-root; } .section-heading + .grid { margin-top: var(--space-3); } .section-heading p { color: var(--color-text-muted); } /* Insights archive's "Filter by" Category dropdown (archive.php - see agility_render_insight_category_filter() in inc/insights.php), sitting between .section-heading and the card grid - carries its own spacing rather than relying on .section-heading + .grid above, since that sibling selector no longer matches once this form sits between them. */ .insight-filter { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin: var(--space-3) 0 var(--space-4); text-align: center; } .insight-filter label { font-weight: 600; } .insight-filter select { font: inherit; padding: 0.4em 0.8em; border: 0.0625rem solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-heading-safe); } .grid { display: grid; gap: var(--space-3); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } /* Contact page: extra breathing room between the info column and the form column specifically, on top of the base .grid gap. */ .contact-grid { column-gap: 6rem; } /* About page: same idea, between the bio text and the headshot/highlight column - 60px rather than the base .grid gap's 24px. */ .about-intro { column-gap: 3.75rem; } /* Single Technology/Service page: a primary (left) column paired with a sidebar (right) column - FAQs take the primary column whenever present (the Pie Chart takes it instead when there are no FAQs); the Pie Chart is first priority for the sidebar, Related Services/Work second - see single-technology.php/single-service.php for the full priority logic (which of the two columns each piece of content lands in, and when Related Services/Work is bumped out of this layout entirely into its own full-width section instead). 60/40 rather than the base .grid--2's even 1fr/1fr split - a list of FAQ questions (or, when there are none, a centered chart) reads fine with the extra room; whatever's sharing the row with it doesn't need as much. align-items: start rather than the base .grid's stretch - the two sides are different heights, and stretching the shorter one to match would just leave awkward empty space in it. */ .tech-related-grid, .service-faq-grid { grid-template-columns: 60fr 40fr; align-items: start; } /* Sidebar column - its own left padding (on top of the grid's own column-gap) to visually separate it from the column beside it, and its Related Services/Work heading centered above the card stack rather than left-aligned. Holds exactly one thing at a time (the Pie Chart, or Related Services/Work's own heading + list) - never both, so there's no need for a shared margin between them the way earlier versions of this layout needed. */ .tech-related-grid__aside-col, .service-faq-grid__aside-col { padding-left: 45px; } .tech-related-grid__aside-col h2, .service-faq-grid__aside-col h2 { text-align: center; } /* Related Services/Work, 2 per row here in the sidebar rather than the 3-across grid it gets in its own full-width section - still reads as a compact grid rather than one long single-file list, just narrower to fit this column. */ .related-cards-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } /* Every Related Services/Work card on a single Technology/Service page - both here in the sidebar (.related-cards-stack above) and in its own full-width section elsewhere on the same two templates (.related-cards-grid, added alongside .grid--3 in single-technology.php/ single-service.php) - shown at roughly half the size a normal .card--service/.card--work gets everywhere else on the site (the Services/Work archives, Home page teasers, etc., all untouched). These are secondary, "you might also be interested in" links here, not the main content of the page, so they don't need full card-sized real estate to do their job. */ /* Shortened to a 16:9 box (by request - matches how these read before the padding/icon/font reductions further down made them noticeably taller than wide) rather than letting height follow content - flex + overflow:hidden so the icon/heading/caption stack centers inside that fixed shape instead of stretching it. height:auto overrides the base .card's own height:100% (meant for stretching to a taller grid-row sibling elsewhere on the site); min-height:0 overrides .card--work's own 17.5rem min-height the same way - both would otherwise force this box taller than the ratio calls for, which (since the width was still only auto/stretched) made the browser solve the ratio by widening the card instead of shrinking it, well past its actual grid/flex track and overlapping its neighbors. */ .related-cards-stack .card, .related-cards-grid .card { aspect-ratio: 16 / 9; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 0.75rem; } .related-cards-stack .card__icon, .related-cards-grid .card__icon { width: 1.5rem; height: 1.5rem; margin-bottom: var(--space-1); } /* Text sizing here is deliberately NOT scaled down anywhere near as far as the padding/icon above - literally halving font-size (0.7rem/ 0.6rem, an earlier version of this rule) made both unreadable. The icon + padding reduction alone already reads as "smaller card"; these two just stop short of illegible while still sitting below the normal 1.4rem/1.0625rem a full .card--service/.card--work gets. */ .related-cards-stack .card h3, .related-cards-grid .card h3 { font-size: 1rem; } .related-cards-stack .card p, .related-cards-grid .card p { font-size: 0.85rem; /* Clamped rather than left to wrap freely - the fixed 16:9 height above doesn't grow for a longer caption, so this keeps overflow text from spilling past the card's own edge instead of just getting cut off mid-line by overflow:hidden alone. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Related Services/Work's own full-width section (as opposed to .related-cards-stack in the sidebar, 2 per row) - 6 per row by request, rather than the 3 every other .grid--3 on the site uses; these compact cards have the room for it. */ .related-cards-grid { grid-template-columns: repeat(6, 1fr); } @media (max-width: 64.0625rem) /* Bootstrap lg: 1025px - matches .grid--3's own column-count breakpoints in spirit, chosen so 6 compact cards don't get uncomfortably narrow before wrapping */ { .related-cards-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 48rem) /* Bootstrap md: 768px */ { .grid--2, .grid--3 { grid-template-columns: 1fr; } .related-cards-stack, .related-cards-grid { grid-template-columns: repeat(2, 1fr); } .tech-related-grid__aside-col, .service-faq-grid__aside-col { padding-left: 0; } } /* Fewer than 3 cards: center them with even spacing instead of leaving an empty grid column */ .grid--3:not(:has(> :nth-child(3))) { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .grid--3:not(:has(> :nth-child(3))) > * { flex: 0 1 21.25rem; } /* .related-cards-grid's own version of the same idea, further up - fewer than 6 (its own full row) rather than fewer than 3, and its own smaller flex-basis matching its compact card size. Comes after the .grid--3 fallback above so it wins the cascade on the 1-2 card overlap between both selectors (same specificity; source order decides), not the 21.25rem basis meant for full-size cards. */ .related-cards-grid:not(:has(> :nth-child(6))) { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .related-cards-grid:not(:has(> :nth-child(6))) > * { flex: 0 1 11.25rem; } /* -------------------- Buttons -------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.5em; /* Theme Settings > Accents > Corner Roundness (--corner-radius), not the site's usual fixed var(--radius) - every CTA button (.btn- -secondary/--tertiary/--outline/--view-all included, none of which redeclare their own border-radius) shares this one value, same as Service/Work cards, Case Study tabs, skill pills, team photos, and slider arrows already do (see agility_theme_settings_style_overrides() in inc/enqueue.php for the full list). */ border-radius: var(--corner-radius); font-weight: 600; background: var(--color-brandPrimary); color: var(--color-white); border: 0.125rem solid var(--color-brandPrimary); } /* Hover softens to the color's own Lightest tint rather than flipping all the way to solid white - reads as "this same button, brightened" instead of a full invert. The border stays the full-strength base color as a crisp, readable edge. */ .btn:hover { background: var(--color-brandPrimaryLightest); color: var(--color-brandPrimary); border-color: var(--color-brandPrimary); } /* Secondary's own Light tint, not the raw base color - the base is assumed dark (Theme Settings > Colors), and this button's text is a fixed black rather than auto-contrast, so a dark base here would read as black-on-black. Hover steps one tier lighter still (Lightest), same progression as .btn/.btn--tertiary above. */ .btn--secondary { background: var(--color-brandSecondaryLight); color: #000000; border: 0.125rem solid transparent; } .btn--secondary:hover { background: var(--color-brandSecondaryLightest); color: #000000; border-color: var(--color-brandSecondary); } /* "View All Services"/"View All Work" (Home page teasers, template-parts/flexible/services_teaser.php and work_teaser.php) - still carries .btn--secondary for the shared padding/border-radius/ font-weight, but overrides its color progression rather than changing .btn--secondary itself, which is also used elsewhere (the "All Services"/"All Work" back-links on the archive pages, untouched here). Centered on the raw Secondary base color at rest - white text, same "assumed dark, white reads fine on it" convention .btn--tertiary above already uses for its own base color, rather than a live contrast check just for this one button. Hover softens to Secondary's own Lightest tint (same "hover softens" direction .btn/.btn--tertiary use), so text switches to --color-heading-safe there - the same safe-dark-text variable .card--add:hover already reaches for on that same pale a background. Active nudges one step darker than the resting base color via a live color-mix (no tier past "base" exists to step to otherwise). Border stays genuinely transparent at rest, and focus-visible gets its own explicit outline - neither .btn nor .btn--secondary style that state at all today, left to the browser default. */ .btn--view-all { background: var(--color-brandSecondary); color: var(--color-white); border: 0.125rem solid transparent; } .btn--view-all:hover { background: var(--color-brandSecondaryLightest); color: var(--color-heading-safe); border-color: var(--color-brandSecondary); } .btn--view-all:focus-visible { outline: 0.125rem solid var(--color-brandSecondary); outline-offset: 0.125rem; } .btn--view-all:active { background: color-mix(in srgb, var(--color-brandSecondary) 85%, black); color: var(--color-white); border-color: var(--color-brandSecondary); } .btn--tertiary { background: var(--color-brandTertiary); border: 0.125rem solid var(--color-brandTertiary); color: var(--color-white); } /* Hover softens to Tertiary's own Lightest tint (not solid white), so white text would still nearly vanish - keeps its own auto-contrast color (already distinct from the resting state's forced white) rather than reusing it. */ .btn--tertiary:hover { background: var(--color-brandTertiaryLightest); border-color: var(--color-brandTertiary); color: var(--color-brandTertiary-hover-text); } .btn--outline { background: transparent; color: var(--color-white); border-color: var(--color-white); } .btn--outline:hover { background: var(--color-white); color: var(--color-brandPrimary); } /* -------------------- Site Sub Navigation -------------------- */ /* Optional slim bar above the main .site-header (template-parts/header/ site-subnav.php) - only rendered at all once an admin assigns a menu to the "Header Sub Navigation" location (inc/setup.php). Deliberately plain/neutral (not tied to Header Background Color/Image, --color-bg instead) rather than trying to coordinate with whatever the header below it is configured to look like - a thin border-bottom is enough to visually separate the two without needing to match them. Sits in normal document flow (not sticky, unlike .site-header itself) - a utility strip like this scrolling away is expected. */ .site-subnav { background: var(--color-bg); border-bottom: 0.0625rem solid var(--color-border); font-size: 0.75rem; } .site-subnav__inner { display: flex; justify-content: flex-end; padding-block: 0.5rem; } /* Centered to match the two "Centered" Style choices (Theme Settings > Header) instead of the default right-alignment every "standard*" choice keeps - see agility_header_is_centered_style(), inc/setup.php, for why. */ .site-subnav--centered .site-subnav__inner { justify-content: center; } .site-subnav__nav ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; } /* Padding enlarges the actual clickable/tappable area beyond just the text itself; the matching negative margin cancels that same padding back out of the surrounding layout, so the links still sit as close together (and the bar reads just as thin) as they would with no padding at all - only the hit area grows, not the visible spacing. */ .site-subnav__nav a { display: inline-block; padding: 0.5rem; margin: -0.5rem; color: var(--color-text-muted); text-decoration: none; } .site-subnav__nav a:hover, .site-subnav__nav a:focus-visible { color: var(--color-interactive-accent); text-decoration: underline; } /* -------------------- Site Header -------------------- */ /* Bottom Border Size/Color (Theme Settings > Header, right under Logo Size) - a plain, always-on border-bottom driven directly by those two fields (--header-border-width/--header-border-color, inc/enqueue.php), not tied to scroll position or the header's own background color the way an earlier version of this border was. Width defaults to 0 above in :root, which alone already renders nothing (a 0-width border is invisible regardless of color), so there's no separate on/off class to maintain - .is-scrolled (assets/js/main.js) and site-header--white-bg (template-parts/header/site-header.php) are both still toggled but no longer read by anything here; left in place only because removing either is its own separate cleanup, not because this rule needs them. */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-header-bg); border-bottom: var(--header-border-width) solid var(--header-border-color); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2); } .site-logo { display: flex; align-items: center; gap: var(--space-1); } /* Wraps just the logo+controls row for the Centered (main nav underneath) layout (Theme Settings > Header > Style) - .site-logo and .site-header__controls are its only two children there (the nav itself is a separate, later sibling of THIS wrapper, not of it - see template-parts/header/site-header.php). A plain flex row unconditionally (not just at the desktop breakpoint below) so mobile still lays logo and controls out side by side exactly like every other layout's mobile header does - only .site-header--nav-below's own desktop rule further down changes this to center the logo and pull controls out via position: absolute. */ .site-header__top-row { display: flex; align-items: center; justify-content: space-between; width: 100%; } .site-logo__info { padding-left: 0.9375rem; } .site-logo img, .site-logo svg { display: block; width: 100%; max-width: var(--logo-max-width); aspect-ratio: 1 / 1; object-fit: cover; } /* Fallback logo only (agility_fallback_logo_svg(), inc/fallback-logo.php - a Custom Logo upload has no .agility-logo-ring at all, so this simply doesn't match then). Scales Border Width (Theme Settings > Fallback Logo, --fallback-logo-border-width below) down proportionally to Logo Size (--logo-max-width) instead of applying it unmodified - the ring's stroke-width is drawn with vector-effect="non-scaling-stroke", so it renders at a constant PIXEL thickness regardless of how small the circle itself is displayed; left at a wider Border Width, it would look disproportionately chunky against a ring this small. The ratio is Logo Size / 100px, capped at 1 via min() - at Logo Size 100px and up this reduces to exactly Border Width itself (its "true" configured value, unmodified), and below 100px it tapers down continuously (e.g. a Border Width of 10 reads as ~8.5 at a 85px logo, 3 at 30px, 0 at 0px) rather than snapping at a fixed threshold. Both custom properties are unitless/px so this same rule needs no separate size-gated class the way earlier fixed-value attempts did. */ .site-logo .agility-logo-ring { stroke-width: calc(var(--fallback-logo-border-width) * min(var(--logo-max-width), 100px) / 100px); } .site-logo__text { font-weight: 700; color: var(--color-header-text); font-size: 1.5rem; line-height: 1.1; } .site-footer__brand { color: var(--color-footer-text); } /* Muted via opacity on the same --color-header-text, not a separate fixed grey (--color-text-muted assumes a white/light background, and Header Background Color - Theme Settings > Header - might not be) - this way it's always readable against whatever the header background actually is, just visually secondary to the main logo text next to it. */ .site-logo__tagline { display: block; font-size: 0.85rem; font-weight: 400; color: var(--color-header-text); opacity: 0.65; letter-spacing: 0.04em; text-transform: uppercase; } /* Logo (left aligned + Tagline) - Header Style choice with no Company Name, so .site-logo__tagline is the only thing in .site-logo__info (:only-child, rather than a dedicated class - matches whenever the Tagline shows without the Name next to it, regardless of which header layout produces that). Standing in for the company name line there, not a small subtitle under it, so it gets that line's own 1.5rem size instead of its usual small-caps one. */ .site-logo__tagline:only-child { font-size: 1.5rem; } @media (max-width: 48rem) /* 768px */ { .site-logo__text { font-size: 1.2rem; } .site-logo__tagline { font-size: 0.7rem; } .site-logo__tagline:only-child { font-size: 1.2rem; } } .site-header__controls { display: flex; align-items: center; gap: var(--space-2); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-1); } .nav-toggle span { display: block; width: 3.25rem; height: 0.25rem; background: var(--color-header-text); margin: 0.625rem 0; } .primary-nav ul { display: flex; } .primary-nav a { display: inline-block; color: var(--color-header-text); font-weight: 500; font-size: 1.6rem; padding-inline: 20px; } .primary-nav a:hover { opacity: 0.8; } /* Hover/focus fill - only once Logo Size (Theme Settings > Header) drops below 100px (.site-header--compact-logo, set in template-parts/header/site-header.php), and only for the nav that actually lives inside .site-header__controls (every Logo (left aligned...) Style choice - the Centered split-nav and nav-below layouts have their own separate