/* iWhisk shared header * * One header across all 38 pages. Before this there were five: the homepage's, * a different one on contact/privacy/terms carrying "Sign in" and "Get the * app", and three variants of the guide masthead. * * The logo is the inline line whisk that inherits currentColor, chosen over * assets/logo-mark.svg (the solid green tile). Two pieces of artwork were in * use and they did not read as the same mark. The tile survives in the favicon * set only. * * Self-contained, own tokens under --hd-, inherits nothing. These pages used to * depend on assets/site.css for the old sage palette. * * Solid is the DEFAULT, deliberately. Only the homepage has a photographic hero * to sit over, and .on-hero is added by script when the page is scrolled to the * top. So with JavaScript off, or anywhere without a hero, the header is the * legible solid version rather than pale text on an unknown background. */ .hd { --hd-ink: #18352A; --hd-ink-soft: #315043; --hd-canvas: #F7F2E9; --hd-lime: #DCEA94; --hd-lime-hot: #E8F5A0; --hd-lime-ink: #26311C; --hd-clay: #BD6041; --hd-line: #DED5C9; --hd-display: 'Literata', Georgia, serif; --hd-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 76px; display: flex; align-items: center; font-family: var(--hd-body); background: rgba(247, 242, 233, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hd-line); transition: background .35s ease, box-shadow .35s ease; } /* Transparent over a photographic hero. Script-applied only. */ .hd.on-hero { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .hd-in { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px); display: flex; align-items: center; gap: clamp(14px, 3vw, 36px); } .hd-logo { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-family: var(--hd-display); font-size: 22px; font-weight: 900; letter-spacing: -.01em; color: var(--hd-ink); text-decoration: none; transition: color .35s ease; } .hd.on-hero .hd-logo { color: var(--hd-canvas) } .hd-mark { display: block; width: 30px; height: 30px; flex-shrink: 0 } .hd-links { display: flex; gap: clamp(14px, 2.4vw, 30px) } /* The vertical padding is a tap target, not decoration. A 14px flex item is 21px tall, under the 24px minimum in WCAG 2.5.8. Padding rather than a fixed height so the text stays vertically centred in the row. */ .hd-links a { font-size: 14px; font-weight: 600; color: var(--hd-ink-soft); text-decoration: none; transition: color .35s ease; white-space: nowrap; padding: 4px 2px; } .hd-links a:hover, .hd-links a:focus-visible { color: var(--hd-clay) } .hd.on-hero .hd-links a { color: rgba(247, 242, 233, .92) } .hd.on-hero .hd-links a:hover, .hd.on-hero .hd-links a:focus-visible { color: var(--hd-lime) } .hd-cta { font-size: 14px; font-weight: 700; padding: 11px 22px; border-radius: 100px; text-decoration: none; white-space: nowrap; background: var(--hd-lime); color: var(--hd-lime-ink); transition: background .18s, transform .18s; } .hd-cta:hover, .hd-cta:focus-visible { background: var(--hd-lime-hot); transform: translateY(-1px) } /* The header is fixed, so it is out of flow and content would start underneath it. Every page gets clearance by default; only a page whose first element is a full-bleed hero designed to sit under the header opts out with . Default-on so a new page cannot forget it. */ body { padding-top: 76px } body.hero-page { padding-top: 0 } /* Below 560px the four items do not fit on one row. Measured at a 375px viewport: logo 119 + nav 153 + CTA 113 + two 14px gaps + 48px of padding = 461px of required row against 375px of viewport. Shrinking all four until they fit leaves about 8px of slack and makes tap targets smaller, so the nav takes a second row instead. The header stays fixed, so body padding below moves in step with the taller header. */ /* Raised from 560 to 640 when Pricing became a fourth nav item. Measured, not guessed: at 561px the single row needed 585px against 561px available, and because .hd-in is nowrap and body is overflow-x:hidden, the CTA was being silently clipped rather than visibly overflowing. Everything inside this block is a fixed pixel value, so the two-row height is width-independent and the 88px below still holds at 640 exactly as it did at 560. */ @media (max-width: 640px) { .hd { height: auto; padding: 8px 0 } .hd-in { flex-wrap: wrap; gap: 12px; row-gap: 2px } .hd-logo { font-size: 19px } .hd-mark { width: 26px; height: 26px } .hd-links { order: 3; width: 100%; gap: 0; justify-content: space-between } .hd-links a { font-size: 13px; padding: 4px 2px } .hd-cta { padding: 10px 16px; font-size: 13px } /* Must clear the two-row header, which measures 87.6px. Rounded up rather than computed: predicting it from font size and padding was wrong by 1.6px. A fixed header is out of flow, so if this number drops below the real height the first content on every non-hero page slides underneath it. */ body { padding-top: 88px } } @media (prefers-reduced-motion: reduce) { .hd, .hd-logo, .hd-links a, .hd-cta { transition: none } }