/* ========================================================================== Chrome state — scroll, nav mode, panel -------------------------------------------------------------------------- 03-chrome.css carries the design's static chrome styling, generated from the source. This file adds the STATEFUL behaviour the design implemented in JavaScript by writing inline styles on scroll. Ported verbatim from the design's onScroll(): solid = y > heroH - 90 header.background = solid ? 'rgba(247,242,230,0.97)' : 'linear-gradient(to bottom,rgba(10,8,6,.6),rgba(10,8,6,0))' header.paddingTop = solid ? '20px' : '34px' header.paddingBottom = solid ? '20px' : '34px' header.boxShadow = solid ? '0 12px 40px -24px rgba(30,22,10,.5)' : 'none' header.backdropFilter = solid ? 'saturate(1.1) blur(4px)' : 'none' logo.src = solid ? logoDark : logoLight navLinks.color = solid ? '#2B2620' : '#F4EDE2' site.js now only toggles the `is-solid` class; every value lives here, so the header is styled by CSS and keeps working if scripts fail. Loaded after 03-chrome.css and before the per-page section styles. ========================================================================== */ /* -------------------------------------------------------------------------- Scrolled state -------------------------------------------------------------------------- */ .cme-chrome__bar { transition: background .5s ease, padding .5s ease, box-shadow .5s ease, backdrop-filter .5s ease; } .cme-chrome__bar.is-solid { background: rgba(247, 242, 230, .97); padding-block: 20px; box-shadow: 0 12px 40px -24px rgba(30, 22, 10, .5); backdrop-filter: saturate(1.1) blur(4px); border-bottom: none; } /* Nav links invert against the light bar. #2B2620 is the design's value. */ .cme-chrome__bar.is-solid .cme-chrome__link-2 { color: var(--cme-ink-soft); } /* * The burger inverts too. * * This was missing, and the gap could not be seen on a desktop: above 900px the * nav links are what inverts and the burger is `display: none`. Below 900px the * burger is the ONLY control in the header, and its bars are drawn in * --cme-off-white for the dark hero — so the moment the bar turned cream on * scroll, the menu button disappeared into it. * * The burger follows the BAR, in every state including open. * * This carried a `:not(.is-open)` guard for exactly one day, on the reasoning * that an open menu puts the X over the near-black panel and a dark X would * disappear into it. That reasoning was wrong, and the mistake is worth writing * down because the stacking is genuinely counter-intuitive: * * the panel is z-index 85 and the header is 90, so the header paints OVER the * panel — and its scrolled background is rgba(247,242,230,.97), i.e. 97% opaque * cream. The X is therefore drawn on the cream bar, not on the dark overlay * behind it. Scroll down, open the menu, and the guard produced precisely the * invisible close button it was added to prevent. * * Tie the colour to the bar and every combination is right on its own: solid * bar means a cream ground and a dark burger, open or closed; at the top of the * page the bar is transparent, the dark panel shows through, and the pale * default stands. */ .cme-chrome__bar.is-solid .cme-chrome__button .cme-chrome__rule-2 { background: var(--cme-ink-soft); } /* -------------------------------------------------------------------------- Logo cross-fade -------------------------------------------------------------------------- The design swapped the img `src` from JavaScript. Rendering both marks and fading between them avoids a network request mid-scroll and the flash of an empty box that comes with it on a slow connection. -------------------------------------------------------------------------- */ .cme-chrome__link { position: relative; display: inline-flex; align-items: center; } .cme-chrome__image { transition: opacity .4s ease; } .cme-chrome__image--dark { position: absolute; inset-block-start: 0; inset-inline-start: 0; opacity: 0; } .cme-chrome__bar.is-solid .cme-chrome__image--light { opacity: 0; } .cme-chrome__bar.is-solid .cme-chrome__image--dark { opacity: 1; } /* -------------------------------------------------------------------------- Nav mode -------------------------------------------------------------------------- was: applyNavMode(), MOBILE_AT = 900 nav.style.display = mob ? 'none' : 'flex' burger.style.display = mob ? 'flex' : 'none' Inverted so the no-JS default is correct: the full nav shows and the burger hides, then they swap below 900px. -------------------------------------------------------------------------- */ .cme-chrome__nav { display: flex; } .cme-chrome__button { display: none; } @media (max-width: 899.98px) { .cme-chrome__nav { display: none; } .cme-chrome__button { display: flex; } } /* -------------------------------------------------------------------------- Burger animation and mobile panel -------------------------------------------------------------------------- */ /* background-color matches the bar's own .5s, so the bars darken WITH the bar turning cream rather than snapping a beat ahead of it. */ .cme-chrome__rule-2 { transition: transform .35s var(--cme-ease), opacity .25s ease, background-color .5s ease; } /* * Burger to X, for THREE bars. * * The travel distance is not a taste value, it is the geometry: bars are 1.5px * tall with a 6px gap, so their centres sit 7.5px apart and the stack is 16.5px * overall. Each outer bar therefore has to move exactly 7.5px to land on the * middle one, where the two rotations cross into an X. * * It was 3.75px when there were two bars — half the distance, because with two * bars the centre of the stack was only 3.75px from each. Adding the third bar * without changing this would have left the X drawn as a shallow chevron with * its strokes not meeting. * * The middle bar cannot simply be hidden: `display: none` would take it out of * the flow and shift the other two mid-animation. It scales to nothing from the * centre instead, so the stack keeps its height while the X forms. */ .cme-chrome__button.is-open .cme-chrome__rule-2:first-child { transform: translateY(7.5px) rotate(45deg); } .cme-chrome__button.is-open .cme-chrome__rule-2:nth-child(2) { opacity: 0; transform: scaleX(.2); } .cme-chrome__button.is-open .cme-chrome__rule-2:last-child { transform: translateY(-7.5px) rotate(-45deg); } .cme-chrome__overlay-2 { opacity: 0; transition: opacity .45s ease; } .cme-chrome__overlay-2.is-open { opacity: 1; } /* * The panel must be laid out once it is no longer `hidden`. * * 03-chrome.css sets `display: none` on this element unconditionally, because * the generated stylesheet captured the design in its CLOSED state — and the * design reopened it by writing `style.display = 'flex'` from JavaScript. The * port replaced that inline write with the `hidden` attribute but only ever * restored `opacity`, so opening the menu faded a `display: none` element from * 0 to 1 and nothing appeared. `flex-direction: column` sitting unused in that * same base rule is the giveaway. * * Keyed off `:not([hidden])` rather than `.is-open` deliberately: `hidden` is * what site.js removes FIRST, before the reflow that starts the fade, so the * element is already laid out when the transition begins. Hanging display off * `.is-open` would apply both in the same frame and there would be no fade. * * This is the second bug of exactly this shape on the project — the lightbox * had it too. Any element the design opened from JavaScript needs its closed * state fully undone, not just the part that is visible in a diff. */ .cme-chrome__overlay-2:not([hidden]) { display: flex; } /* * The