/* GENERATED by scripts/build-header-plugin.py from assets/css/icc-header-layer.css. Do not hand-edit — the next build overwrites it, and the verification below runs against the SOURCE. */ /* ========================================================================== ICC HEADER LAYER — source for plugin/icc-header/assets/css/icc-header.css ========================================================================== REVISION 3 — STYLING ONLY. NO LAYOUT. This revision REMOVES things. That is the point of it. Revision 2 rebuilt the header's layout: it made the header wrapper a flex row, gave every Elementor section a width and a flex factor, reordered them with `order`, overrode the container widths, and added a utility bar above everything. It was internally consistent and it measured well. It was also a redesign of a layout that already worked, which is not what was asked for, and it produced a centred composition ICC did not want. So all of that is gone. What is left is a stylesheet that changes how the existing header LOOKS and touches nothing about how it is ARRANGED: NOT SET ANYWHERE IN THIS FILE display on the header, its sections, its columns, its containers flex, flex-basis, flex-grow, order, float, position on any of them width, max-width, min-width on any section, column or container min-height or height on the header or any of its structure justify-content or align-items on any Elementor container display on the menu toggle or on either menu container SET type, colour, spacing inside widgets, borders, radii, the logo's height, the button's appearance, the dropdown panel, focus rings The header stays exactly where Elementor puts it. Large logo on the left, navigation and actions on the right, the existing tagline where it already is - because none of that is this file's business. -------------------------------------------------------------------------- WHY THIS ALSO MAKES THE PLUGIN CORRECT WHEN I AM WRONG This build has never seen ICC's header markup: independentcoach.com refuses automated fetching and there is no hosting access from here. Every previous revision therefore encoded an ASSUMPTION about the structure - one row in revision 1, a flex row of sections in revision 2 - and each assumption failed differently on the real thing. A stylesheet that sets no structural property cannot make that mistake. If the header turns out to be one section or four, columns or flexbox containers, logo-left or logo-centre, this file styles it correctly either way, because it never expresses an opinion about the arrangement. The preview's reproduction of the markup may still be wrong. The plugin no longer depends on it being right. -------------------------------------------------------------------------- THE HAMBURGER, AND WHY THE FIX IS NOW "NOTHING" Revision 1 put a hamburger in the desktop header by writing `display: inline-flex !important` on the toggle to make it a 44px target; Elementor hides its own toggle above the breakpoint with a plain `display: none`, and !important beats normal whatever the media query. Revision 2 fixed it by taking over: hidden above 1000px, shown below. That worked, but it overrode Elementor's own breakpoint setting with a number chosen here, which is one more assumption about a header this build cannot see. Revision 3 fixes it by not participating. This file sets no `display` on the toggle at all, so Elementor's own rules decide - exactly as they do on production today, where there is no hamburger on desktop. The toggle is still given a 46px box and the ICC colours; size and visibility are simply not the same property. scripts/build-header-plugin.py fails the build if a `display` declaration ever appears on the toggle or on either menu container again. -------------------------------------------------------------------------- ⛔ THE QR ANCHOR https://independentcoach.com/jobs/#quick-application This file must never contain `scroll-behavior`, `scroll-margin-top`, or `#quick-application`. The /jobs/ plugin owns that rule and prints it !important at wp_head 999; this plugin raises the VALUE through the `icc_jobs_scroll_offset` filter and touches nothing else. Because this revision declares no header height, there is no constant here for the offset to be derived from. It is derived from the header's MEASURED height instead - see inc/qr-offset.php and the measurement in assets/js/icc-header.js - and until a measurement exists it uses a deliberately generous figure. Too much clearance leaves a gap above the heading; too little hides the heading behind the header. Those failures are not symmetrical, so the default errs at the harmless end. ========================================================================== */ /* -------------------------------------------------------------------------- 0. TOKENS Re-declared rather than imported, because this layer must NOT pull in the design system's base layer. That base sets `* { margin: 0 }`, styles `body`, and restyles bare h1-h5, p and a - which would wreck the footer and the page body this plugin has no business touching. Same values as assets/css/icc.css. -------------------------------------------------------------------------- */ :root { --icc-hdr-navy: #262261; --icc-hdr-navy-deep: #1a1745; --icc-hdr-gold: #fdbf1e; --icc-hdr-gold-deep: #e0a400; --icc-hdr-white: #ffffff; --icc-hdr-n100: #f7f6f3; --icc-hdr-n200: #ecebe7; --icc-hdr-n300: #d8d6d1; --icc-hdr-n600: #5c5a56; --icc-hdr-ink: #1c1b19; --icc-hdr-display: "Barlow", "Helvetica Neue", Arial, sans-serif; /* The logo's height, and the only two numbers in this file that affect how tall the header is. Everything else about its height is Elementor's. REVISION 4: 60px -> 78px, a 30% increase, inside the 25-35% ICC asked for. The compact figure moves with it, 50 -> 64, so the step down when scrolled stays proportionally the same rather than becoming a cliff. ⚠ THIS IS THE ONE CHANGE IN THIS REVISION THAT CAN AFFECT HEADER HEIGHT, and ICC asked for the height not to change. It does not, in the arrangement this build can measure: the header's height there is set by the stacked right-hand column, and 78px of logo still sits inside it. scripts/check-header.js compares the rendered height against the previous revision's and fails if it moved. On a header where the LOGO is the tallest thing, this would push the row down - so if that turns out to be ICC's arrangement, the number to change is this one, here, and the QR offset follows automatically because it is measured rather than derived. */ --icc-hdr-logo: 78px; --icc-hdr-logo-compact: 64px; --icc-hdr-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* -------------------------------------------------------------------------- 1. THE HEADER SHELL Four declarations, and not one of them is layout. `position: sticky` is the exception that has to be here, because "keep the header on screen" is a behaviour ICC asked for and there is no other way to express it. Sticky and not fixed: sticky keeps the header in flow, so the document below needs no compensating top padding - the usual way a fixed header quietly breaks every in-page anchor on a site. -------------------------------------------------------------------------- */ body.icc-hdr [data-elementor-type="header"], body.icc-hdr header.site-header, body.icc-hdr .site-header { position: sticky; top: 0; z-index: 200; background: var(--icc-hdr-white) !important; border-bottom: 1px solid var(--icc-hdr-n300) !important; transition: box-shadow 200ms var(--icc-hdr-ease); } /* Set by assets/js/icc-header.js from an IntersectionObserver on a 1px sentinel - no scroll listener, no per-frame work. The shadow is not elevation, which the design system forbids: it is a 1px hairline doubling the boundary rule so the edge stays readable when content scrolls under it. */ body.icc-hdr.icc-hdr--compact [data-elementor-type="header"], body.icc-hdr.icc-hdr--compact header.site-header, body.icc-hdr.icc-hdr--compact .site-header { box-shadow: 0 1px 0 0 rgba(38, 34, 97, 0.14); } /* -------------------------------------------------------------------------- 2. SLIGHTLY MORE COMPACT — the whole of it "Cleaner and slightly more compact than production, but do not radically reduce its size." Two things do that, and neither is a height: 1. Elementor gives every widget a bottom margin by default. In a header that is dead space under each element, and it is what makes an Elementor header look vertically off-centre no matter how the section padding is tuned. EVERY widget, not `:not(:last-child)`. Elementor's own rule carries that exclusion, and copying it left the last widget in each column with a margin - which made the column, rather than anything intentional, decide the row height. 2. A small trim to the top-level sections' vertical padding, and a smaller one again when scrolled. This is a value, not a structure: it does not move anything, and a section that had no padding to begin with is unaffected. -------------------------------------------------------------------------- */ body.icc-hdr [data-elementor-type="header"] .elementor-widget, body.icc-hdr [data-elementor-type="header"] .elementor-widget:not(:last-child), body.icc-hdr [data-elementor-type="header"] .elementor-widget-container, body.icc-hdr [data-elementor-type="header"] .elementor-widget-wrap > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* ⚠ NO SECTION PADDING RULE HERE, AND THAT IS THE SECOND VERSION OF THIS. The first one set `padding-block: 6px` on the top-level sections, meaning to trim them. Measured against the reproduction it made the header 2px TALLER than the original, because a fixed value can only reduce a section that already has more than 6px and inflates every section that has less. "Slightly more compact" turned into "slightly bigger" on the one arrangement it was tested against. There is no CSS for "reduce this by a bit, whatever it currently is". So compaction here is only ever SUBTRACTIVE: the widget margins above, which can only remove space, and the logo stepping down when scrolled. A header whose sections carry real padding keeps it, which is correct - that padding is part of the layout ICC asked to preserve. */ /* -------------------------------------------------------------------------- 3. THE LOGO — the real one, at its real size ⚠ THE IMAGE IS NEVER TOUCHED. A height, and nothing else: no src, no swap, no background-image, no filter, no content. Whatever image is in the Elementor logo widget today is the image that renders, at the size ICC asked to have back. -------------------------------------------------------------------------- */ body.icc-hdr [data-elementor-type="header"] .elementor-widget-theme-site-logo a, body.icc-hdr [data-elementor-type="header"] .elementor-widget-image a { align-items: center; min-height: 44px !important; } body.icc-hdr [data-elementor-type="header"] .elementor-widget-theme-site-logo img, body.icc-hdr [data-elementor-type="header"] .elementor-widget-image img { height: var(--icc-hdr-logo) !important; width: auto !important; max-width: 100% !important; transition: height 200ms var(--icc-hdr-ease); } body.icc-hdr.icc-hdr--compact [data-elementor-type="header"] .elementor-widget-theme-site-logo img, body.icc-hdr.icc-hdr--compact [data-elementor-type="header"] .elementor-widget-image img { height: var(--icc-hdr-logo-compact) !important; } @media (max-width: 520px) { body.icc-hdr [data-elementor-type="header"] .elementor-widget-theme-site-logo img, body.icc-hdr [data-elementor-type="header"] .elementor-widget-image img, body.icc-hdr.icc-hdr--compact [data-elementor-type="header"] .elementor-widget-theme-site-logo img, body.icc-hdr.icc-hdr--compact [data-elementor-type="header"] .elementor-widget-image img { height: 52px !important; } } /* -------------------------------------------------------------------------- 4. NAVIGATION Barlow, 18px, weight 700, sentence case, navy, with a gold rule for hover and for the current page. REVISION 4: 17px/600 -> 18px/700. CLAUDE.md sets a 17px body floor because district administrators skew older; 18px puts the navigation a step above that floor rather than level with it, and 700 is what makes Barlow read as deliberate at this size - it is a highway-signage face and it wants weight. Sentence case stays: uppercase removes the word shapes readers skim by. Colour and the gold rule are UNCHANGED. Those were approved. The spacing between items is padding on the items, not a gap on the list: padding is part of the target, a gap is dead space between targets. 15px -> 20px each side, so 40px sits between two labels instead of 30 - enough that the row reads as spaced rather than merely not-touching. -------------------------------------------------------------------------- */ body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main .elementor-item { font-family: var(--icc-hdr-display) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: 0.005em !important; line-height: 1.2 !important; color: var(--icc-hdr-navy) !important; fill: var(--icc-hdr-navy) !important; text-decoration: none !important; padding: 10px 20px !important; /* Present but transparent, so nothing shifts by 3px when a pointer arrives. */ border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: transparent !important; min-height: 44px !important; transition: color 150ms var(--icc-hdr-ease), border-color 150ms var(--icc-hdr-ease); } /* A top-level label is a name and does not wrap. */ body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item { white-space: nowrap; } @media (max-width: 1220px) { body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main .elementor-item { padding: 10px 14px !important; } } body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main .elementor-item:hover, body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main .elementor-item:focus-visible, body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main li:hover > .elementor-item { color: var(--icc-hdr-navy-deep) !important; border-bottom-color: var(--icc-hdr-gold) !important; background: transparent !important; } body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main .elementor-item.elementor-item-active, body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main .current-menu-item > .elementor-item, body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main .current-menu-ancestor > .elementor-item, body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main [aria-current="page"] { color: var(--icc-hdr-navy-deep) !important; border-bottom-color: var(--icc-hdr-gold) !important; /* The base weight went to 700 in this revision, so the current page needs 800 to still be distinguishable by weight as well as by the gold rule. Leaving it at 700 would have made the current-page state gold-only — which is a colour-only distinction, and colour alone is not an accessible way to signal state. */ font-weight: 800 !important; } body.icc-hdr [data-elementor-type="header"] .elementor-nav-menu--main .sub-arrow { margin-left: 5px; opacity: 0.6; } /* -------------------------------------------------------------------------- 5. THE ABOUT US DROPDOWN A submenu, not a mega-menu. Elevation by border and background shift, never by shadow - the design system rule, and the reason the site does not look like a template. ⚠ `ul.sub-menu`, and `nav.elementor-nav-menu--dropdown` in section 8. Elementor Pro puts `elementor-nav-menu--dropdown` on BOTH the desktop submenu