/* THE HEADER OWNS ITS OWN LOOK (owner, 2026-09-14). Every value below used to be a token that each page family redefined on `.hdr`: the shop set --hdr-font to Inter and --hdr-accent to forest, the generated pages set them to Schibsted Grotesk and #7FA733 — so the wordmark changed colour, font and position as a shopper moved between families. A shared component cannot be shared if its callers own its variables, so the values live here and the families no longer declare them. Anything that must differ (the page background behind the bar) is still a token. */ .hdr { --hdr-bg: #fcfcf7; --hdr-border: rgba(28,58,19,0.32); --hdr-ink: #1c3a13; /* the wordmark, everywhere */ --hdr-muted: #5d6a56; --hdr-accent: #1c3a13; /* the brand mark, never the light lime */ --hdr-accent-strong: #1c3a13; /* The light lime is a BADGE ground, not the brand mark. Kept as its own token so nobody reaches for --hdr-accent (dark forest) to fill a chip and lands dark-on-dark, which is exactly what happened to the "Request availability" tag in the search suggestions on 2026-09-15. */ --hdr-tag-req-bg: #d3fa99; --hdr-tag-req-ink: #1c3a13; --hdr-on-accent: #fcfcf7; --hdr-hover: #eeeee9; --hdr-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --hdr-font-mono: "IBM Plex Mono", ui-monospace, monospace; } /* ============================================================================ Celio Health — unified sticky header shell (2026-09-12). ONE component, `.hdr`, used by both page families: - the ~31 hand-written shop pages (style.css design system) - the ~830 generated pSEO pages (celio-content.css design system) Colour/font never live here — each stylesheet defines the --hdr-* custom properties once (see the `.hdr{...}` token block near the old nav rules in style.css / celio-content.css) so this file stays a single shared layout, not a second palette to keep in sync. Loaded by EVERY page. On pages without server-rendered `#hdr` markup, app.js's injectChrome() builds it and replaces whatever static nav shipped (#site-header / nav.nav / .cg-navwrap). The pSEO generator's topNav() in pseo/lib/html.js renders the same structure directly for new builds. ============================================================================ */ .hdr { position: sticky; top: 0; z-index: 60; background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-border); font-family: var(--hdr-font); } .hdr__bar { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 20px; } .hdr__menu { display: none; flex: 0 0 auto; background: none; border: 0; font-size: 20px; line-height: 1; color: var(--hdr-ink); cursor: pointer; padding: 8px; border-radius: 999px; } .hdr__menu:hover { background: var(--hdr-hover); } .hdr__brand { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 19px; color: var(--hdr-ink); white-space: nowrap; text-decoration: none; } .hdr__brand:hover { color: var(--hdr-ink); } .hdr__dot { color: var(--hdr-accent); } .hdr__search { flex: 1 1 auto; min-width: 0; max-width: 560px; } .hdr__search-input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 16px; border: 1px solid var(--hdr-border); border-radius: 999px; background: var(--hdr-bg); color: var(--hdr-ink); font-family: var(--hdr-font); font-size: 14.5px; } .hdr__search-input::placeholder { color: var(--hdr-muted); } .hdr__search-input:focus-visible { outline: 2px solid var(--hdr-accent); outline-offset: 1px; } .hdr__links { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; font-size: 14.5px; white-space: nowrap; } .hdr__links a, .hdr__dd-btn { color: var(--hdr-ink); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 6px 2px; } .hdr__links a:hover, .hdr__dd-btn:hover { color: var(--hdr-accent); } .hdr__dd { position: relative; } .hdr__dd-menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px; background: var(--hdr-bg); border: 1px solid var(--hdr-border); border-radius: 14px; padding: 8px; display: none; flex-direction: column; box-shadow: 0 16px 40px -20px rgba(0,0,0,.35); } .hdr__dd:hover .hdr__dd-menu, .hdr__dd:focus-within .hdr__dd-menu { display: flex; } .hdr__dd-menu a { padding: 9px 12px; border-radius: 9px; white-space: nowrap; } .hdr__dd-menu a:hover { background: var(--hdr-hover); } /* margin-left:auto is what makes this a right-hand CLUSTER. On desktop the search field absorbs the slack, but it is display:none on mobile, so without this the controls packed against the wordmark and left ~93px of dead space to their right on a 390px phone. */ .hdr__right { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: auto; } /* The cart is the rightmost control, always, whatever else is present. */ .hdr__right .hdr__state { order: 1; } .hdr__right .hdr__account { order: 2; } .hdr__right .hdr__cart { order: 3; } .hdr__state { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--hdr-border); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13.5px; color: var(--hdr-ink); cursor: pointer; white-space: nowrap; } .hdr__state:hover { border-color: var(--hdr-accent); } .hdr__state--warn { border-color: #b5642f; color: #b5642f; } /* Fixed box so the digit count never reflows the bar around it. */ .hdr__cart { position: relative; flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 18px; color: var(--hdr-ink); text-decoration: none; } .hdr__cart:hover { background: var(--hdr-hover); } .hdr__cart-badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--hdr-accent-strong); color: var(--hdr-on-accent); font-family: var(--hdr-font-mono); font-size: 10px; line-height: 16px; text-align: center; box-sizing: border-box; } .hdr__cart-badge[data-empty="1"] { display: none; } .hdr__account { flex: 0 0 auto; font-size: 14px; white-space: nowrap; } .hdr__account a { color: var(--hdr-ink); } .hdr__mobile-search { display: none; } .hdr__mobilepanel { display: none; } @media (max-width: 900px) { .hdr__links, .hdr__account, .hdr__search { display: none; } .hdr__menu { display: inline-flex; align-items: center; justify-content: center; } .hdr__bar { padding: 8px 12px; gap: 8px; } .hdr__mobile-search { display: block; padding: 0 12px 10px; } .hdr__mobile-search .hdr__search-input { width: 100%; } .hdr__state { padding: 6px 9px; font-size: 12.5px; } .hdr.is-open .hdr__mobilepanel { display: flex; } .hdr__mobilepanel { position: absolute; top: 100%; left: 0; right: 0; background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-border); flex-direction: column; padding: 8px 12px 14px; max-height: calc(100vh - 56px); overflow-y: auto; } .hdr__mobilepanel a, .hdr__mobilepanel button { display: block; width: 100%; text-align: left; padding: 12px 10px; border-radius: 10px; color: var(--hdr-ink); text-decoration: none; background: none; border: 0; font: inherit; font-size: 15px; } .hdr__mobilepanel a:hover, .hdr__mobilepanel button:hover { background: var(--hdr-hover); } .hdr__mp-divider { border-top: 1px solid var(--hdr-border); margin: 6px 0; } } @media (max-width: 360px) { .hdr__brand { font-size: 16px; } .hdr__bar { gap: 6px; padding: 8px 10px; } } /* Below-header notice for a platform-unsupported collection state (NJ/NY/RI only — product-level restrictions stay on the product/cart line). */ /* Glyph-independent marks (2026-09-13). The brand flower and the cart were a ❋ character and a 🛒 emoji: both lay out fine and paint nothing where the font lacks them, which left an empty 40px box where the cart should be. The site already draws the flower as a CSS dot elsewhere; the cart is now an inline SVG that inherits currentColor. */ .hdr__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--color-lime, #d3fa99); font-size: 0; line-height: 0; } .hdr__cart-ico { display: block; pointer-events: none; } /* THE ONE definition of the unsupported-state blocker. It lived in three files — here, style.css and celio-content.css — and this one, loaded last, quietly won: the alert kept a 20px gutter while the bar switched to 12px on a phone, so the two never lined up anywhere the max-width was not the constraint. */ .hdr-notice { background: #fbeceb; border-bottom: 1px solid #d9a29b; color: #8f2f21; font-size: 13.5px; padding: 0; } .hdr-notice__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 20px; } .hdr-notice__icon { flex: 0 0 auto; } .hdr-notice__text { flex: 1 1 260px; min-width: 0; line-height: 1.45; } .hdr-notice__change { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: 500; text-decoration: underline; cursor: pointer; flex: 0 0 auto; } .hdr-notice__change:hover { text-decoration: none; } /* Mirror EVERY step the bar takes, not just the first: the bar narrows again at 360px, and an alert that did not follow sat 2px inside it there. */ @media (max-width: 900px) { .hdr-notice__inner { padding: 8px 12px; } } @media (max-width: 360px) { .hdr-notice__inner { padding: 8px 10px; } } /* One geometry and one type scale, stated absolutely so a page's own base font-size cannot resize the bar underneath the shared component. */ .hdr__bar { min-height: 60px; box-sizing: border-box; } .hdr__brand { font-size: 19px; line-height: 1.2; font-weight: 700; font-family: var(--hdr-font); letter-spacing: -0.01em; color: var(--hdr-ink); } .hdr__dot { background: #d3fa99; } .hdr, .hdr input, .hdr button, .hdr a { font-family: var(--hdr-font); } .hdr__links a, .hdr__dd-btn, .hdr__state, .hdr__search-input { font-size: 14.5px; line-height: 1.3; } /* A page family styling "every anchor" must not reach inside the shared header: `.cg a { color: var(--cg-lime-deep) }` outranks `.hdr__brand` on specificity alone, which is why the wordmark turned light green on generated pages. The header's own rules are scoped through `.hdr` so they win on specificity rather than on !important, and a family can still theme what it owns. */ .hdr .hdr__brand, .hdr .hdr__brand:hover, .hdr .hdr__brand:visited { color: var(--hdr-ink); } .hdr .hdr__links a, .hdr .hdr__dd-menu a, .hdr .hdr__mobilepanel a, .hdr .hdr__account a, .hdr .hdr__cart { color: var(--hdr-ink); } .hdr .hdr__links a:hover, .hdr .hdr__dd-menu a:hover { color: var(--hdr-accent-strong); } .hdr .hdr-notice__change { color: inherit; } /* SEARCH IS ALWAYS VISIBLE ON MOBILE (owner, 2026-09-14). It briefly lived inside the hamburger menu, which produced two search experiences and hid the one people actually reach for. There is now exactly one mobile entry point: the persistent second row below the top bar. The homepage hero search stays, deliberately -- that one is a discovery CTA, not navigation. */ .hdr__mp-search{display:none !important} /* ---------------------------------------------------------------- mobile The active/pressed treatment was the browser default -- Android Chrome paints rgba(51,181,229,.4) over any tapped link, which is a bright cyan that exists nowhere in the Celio palette. Suppressed, and replaced with the cream/green press and selected states the rest of the product uses. */ .hdr a, .hdr button { -webkit-tap-highlight-color: transparent; } .hdr__mobilepanel a:active, .hdr__mobilepanel button:active, .hdr__menu:active, .hdr__state:active, .hdr__cart:active { background: var(--hdr-hover); } /* The page you are on, said in the brand's own colours rather than a browser default: cream ground, forest text, and a forest rule down the leading edge. */ .hdr__mobilepanel a[aria-current="page"], .hdr__links a[aria-current="page"] { background: var(--hdr-hover); color: var(--hdr-ink); font-weight: 700; } .hdr__mobilepanel a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--hdr-accent-strong); } .hdr__mobilepanel a:focus-visible, .hdr__mobilepanel button:focus-visible { outline: 2px solid var(--hdr-accent-strong); outline-offset: -2px; } /* Account actions in the menu read as one group, under the divider. */ #nav-account-m { display: flex; flex-direction: column; } @media (max-width: 900px) { /* The second row: one full-width search field, always present. */ .hdr__mobile-search { display: block; padding: 0 12px 10px; } .hdr__mobile-search .hdr__search-input { width: 100%; } /* The wordmark yields before the action cluster does. */ .hdr__brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* A state button whose label grows ("State" -> "NY ⚠") must not push the cart off the edge; it truncates instead. */ .hdr__state { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 400px) { .hdr__bar { gap: 6px; padding: 8px 10px; } .hdr__mobile-search { padding: 0 10px 9px; } .hdr__state { padding: 6px 8px; font-size: 12px; } .hdr__menu { padding: 6px; } } @media (max-width: 340px) { .hdr__brand { font-size: 15px; } .hdr__state { max-width: 34vw; } } /* The cart and menu controls are inline SVG, not emoji. The emoji versions were invisible anywhere an emoji font is missing -- which is how a cart icon came to be missing from the header in the first place. Sized here so the button box never depends on glyph metrics. */ .hdr__menu svg, .hdr__cart-ico { display: block; } /* ============================== SEARCH SUGGESTIONS ========================== These rules lived in style.css, which only the homepage and the shop pages load. The header -- and therefore the search box and its dropdown -- is on EVERY page, so on authored product pages the suggestion list rendered with no styling at all: transparent, position:static, no z-index, metadata run together. It was not an intermittent glitch; those pages simply never had the stylesheet. header.css is the one file every page loads, so the presentation rules for a global component belong here. ========================================================================== */ /* Self-contained on the HEADER's own tokens. The rules previously leaned on --color-hairline / --color-stone / --color-lime, which are declared in style.css -- so simply moving them here would have left the dropdown borderless and background-less on every page that does not load that file. A global component cannot depend on a page-family stylesheet, for colour any more than for layout. */ .cs-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; } .toolbar .cs-wrap { flex: 1; } .toolbar .cs-wrap .toolbar__search { width: 100%; } .vhero__search .cs-wrap { flex: 1 1 auto; } .vhero__search .cs-wrap .vhero__searchinput { width: 100%; } .cs-suggest { position: absolute; z-index: 900; left: 0; right: 0; top: calc(100% + 6px); background: var(--hdr-bg, #fcfcf7); border: 1px solid var(--hdr-border, #e3e2d3); border-radius: 16px; overflow: hidden auto; max-height: min(60vh, 420px); box-shadow: 0 12px 32px rgba(20,30,20,.12); text-align: left; font-family: var(--hdr-font, inherit); color: var(--hdr-ink, #22381e); } .cs-item, .cs-all { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; padding: 10px 14px; cursor: pointer; font-size: 15px; line-height: 1.35; color: var(--hdr-ink, #22381e); text-decoration: none; } .cs-item + .cs-item, .cs-all { border-top: 1px solid var(--hdr-border, #e3e2d3); } .cs-item.is-active, .cs-all.is-active, .cs-item:hover, .cs-all:hover { background: var(--hdr-hover, #eeeee9); } .cs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The metadata is a row of separate facts, not one run-on string. */ .cs-meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .cs-kind { font-size: 12px; opacity: .6; } .cs-price { font-size: 14px; font-weight: 600; } .cs-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hdr-border, #e3e2d3); white-space: nowrap; } .cs-tag--req { background: var(--hdr-tag-req-bg, #d3fa99); color: var(--hdr-tag-req-ink, #1c3a13); border-color: transparent; } .cs-tag--off { opacity: .65; } .cs-all { font-size: 13.5px; opacity: .85; } /* Non-interactive message row for a no-match search: never active/hoverable, never bordered like the option rows above it. */ .cs-empty { padding: 10px 14px; font-size: 14px; color: var(--hdr-ink, #22381e); opacity: .8; cursor: default; } /* The dropdown must clear the header and the sticky page chrome everywhere. */ .hdr .cs-suggest { z-index: 200; } /* ========================== DIALOGS (state + request) ======================= ONE definition, in the one stylesheet every page loads. There were two -- 16 rules in style.css and 21 in celio-content.css -- so the same dialog had two designs depending on which page family opened it. The crowding was structural, not decorative: the title, the product name, the collection state and the email label were four different typographic treatments stacked with no rhythm, and the email label sat INLINE beside its input so the field was squeezed into what was left of the row. This gives the dialog one vertical rhythm, a labelled row pattern that matches the purchase card, and a stacked field. ========================================================================== */ .celio-modal-open { overflow: hidden; } .celio-statemodal { position: fixed; inset: 0; z-index: 1000; background: rgba(18, 28, 16, .52); display: flex; align-items: center; justify-content: center; padding: 24px; } .celio-statemodal__box { background: #fff; color: var(--hdr-ink, #22381e); border-radius: 20px; padding: 28px 28px 24px; width: 100%; max-width: 420px; box-shadow: 0 24px 60px -16px rgba(12, 24, 10, .45); font-family: var(--hdr-font, inherit); text-align: left; } .celio-statemodal__box h3 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; } /* The product is context for the title, not a second heading. */ .celio-reqmodal__product { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--hdr-muted, #5E6656); } /* The state reads as a fact with a quiet action, the same shape as a row in the purchase card, instead of a sentence with a button wedged into it. */ .celio-reqmodal__state { margin: 20px 0 0; border-top: 1px solid var(--hdr-border, #e3e2d3); border-bottom: 1px solid var(--hdr-border, #e3e2d3); } .celio-reqmodal__known { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 14px; } .celio-reqmodal__known b { font-weight: 600; } .celio-reqmodal__state .btn, .celio-reqmodal__change { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--hdr-accent-strong, #1c3a13); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; flex: none; } /* Stacked label, full-width control. */ .celio-statemodal__field { display: block; margin: 18px 0 0; } .celio-reqmodal__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--hdr-muted, #5E6656); } .celio-statemodal__field input, .celio-statemodal__field select, .celio-statemodal select { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid var(--hdr-border, #e3e2d3); border-radius: 12px; font: inherit; font-size: 15px; background: #fff; color: var(--hdr-ink, #22381e); } /* The dropdown arrow is one of the surfaces we did not draw. The platform one is grey and square in a dialog built out of forest and pills, so it gets the same chevron the purchase card uses. The control stays a native