/* ============================================================================ fmc-nav-glass.css — public navbar paint/tint module (2026-09-07) ---------------------------------------------------------------------------- ONE paint owner for the header and desktop dropdown: .site-nav the bar (paints on .nav-sheet::before when a sheet exists — index.html — else on .site-nav::before) .nav-dropdown-menu desktop menu (paints on ::after) The mobile drawer continues the header tint; page rules own its geometry. It owns paint and ink only. Geometry, transforms, show/hide choreography, parking (display:none / .is-gone), safe areas and the mobile toggle stay with the pages — nothing here sets width, height, top, transform, display or visibility on .site-nav, and nothing here is a layout property. WHY A PSEUDO-ELEMENT PER SURFACE, AND WHY !important Each surface previously painted on itself: an opaque var(--paper) fill plus backdrop-filter, restated by .on-light / .on-dark / body.day. Two problems. (1) An opaque fill cannot be glass, and a *fixed* warm fill over a page that is not that exact warm colour reads as a differently-coloured bar laid on top. (2) Painting on the element itself means the paint is bound to the element's clip: see THE SQUARE below. So the fill, the film, the blur, the hairline and the shadow move to one isolated layer per surface, the element itself is stripped back to transparent, and the tint is a variable the sampler in fmc-nav-glass.js drives from the computed page surfaces behind it. The !important flags exist because the page-level state rules (.on-light, .on-dark, body.day, .is-scrolled, .menu-open) all still set background / backdrop-filter / box-shadow on these same elements at higher specificity. They keep doing their real job — choosing *when* a surface paints and carrying the class-based choreography — they just no longer choose the colour. One paint owner, no fighting. THE SQUARE (service.html, both engines — confirmed by ablation 2026-09-07) .nav-dropdown-menu opened by animating clip-path from inset(0 0 100% 0) to inset(0). clip-path clips to a *rectangle*: the element's 16px border-radius is not part of it. So both the drop shadow and the backdrop-filter result — which normally feather around, and are bounded by, the rounded outline — were instead cut off dead straight at the border box, painting a hard-edged rectangle around a rounded panel. Removing clip-path alone fixes it; removing only the shadow, or only the backdrop-filter, leaves the other half of the square, and inset(0 round 16px) still clips the shadow flat. The wipe is therefore retired here (clip-path:none) — the menus already carry opacity + pointer-events for their open/closed states, which is what the clip-path was standing in for, and which keeps the submenu links in the tab order. Nothing in this file clips the navbar or any menu. ========================================================================= */ /* This enhancement depends on its sampler. Without scripting, preserve the original page's complete paint/ink fallback (especially the night homepage). Verified in Chromium and WebKit with scripting enabled and disabled. */ @media (scripting: enabled){ /* ---------------------------------------------------------------- tokens -- The sampler supplies --fmc-nav-rgb and contrast-checked ink properties; film and geometry tokens stay here. Attribute state lets QA read the whole state off in the inspector: Films are deliberately light. The bar is meant to be the page seen through glass, so the blur has to carry the variation underneath it; a heavy film plus a big saturate() is exactly what flattened image and gradient sections into a pale stripe before. Menus get a denser film of the *same* colour, for legibility over moving content, not a different colour. Saturation is 100% by default. Over a solid colour there is nothing to keep alive and any saturate() is pure error — measured, saturate(116%) moved a solid #007d71 two levels off the pixel beside it, which is the beginning of a stripe. It is spent only where the sampler found real variation behind the strip (data-fmc-nav-varied="1"), which is the case it exists for. INK IS OWNED BY THE SAMPLER. The values below are startup defaults; when the script runs it writes --fmc-nav-ink / -ink-dim / -accent as inline custom properties on , chosen from a ramp by measured contrast against the surface. A fixed pair of palettes cannot hold AA: on #007d71 the dark scheme's dim ink measured 2.62:1 and on #888888 1.89:1. See fmc-nav-glass.js. The scheme attribute still drives everything that is not ink. */ :root{ --fmc-nav-rgb: 244 242 236; /* sampled backdrop, rgb triplet */ --fmc-nav-film: .52; /* bar film weight */ --fmc-nav-film-menu: .80; /* desktop dropdown menu film weight */ --fmc-nav-film-panel: var(--fmc-nav-film); /* mobile panel: the bar's own */ --fmc-nav-blur: 22px; --fmc-nav-sat: 100%; /* flat backdrop: do not tint it */ --fmc-nav-ink: #101f26; /* wordmark, hover, current page */ --fmc-nav-ink-dim: #4e5c63; /* resting link ink */ --fmc-nav-accent: #0a5f56; /* "Technologies", aria-current */ --fmc-nav-hairline: rgb(14 26 31 / .10); --fmc-nav-hilite: rgb(255 255 255 / .38); --fmc-nav-hover: rgb(14 26 31 / .06); --fmc-nav-current: rgb(10 95 86 / .08); --fmc-nav-shadow: 0 1px 10px rgb(10 40 45 / .06); --fmc-nav-menu-shadow: 0 14px 34px rgb(10 45 45 / .13); } /* Everything here except ink: the sampler sets the attribute, and writes ink separately from its own contrast measurement. */ :root[data-fmc-nav-scheme="dark"]{ --fmc-nav-film: .40; --fmc-nav-film-menu: .74; --fmc-nav-hairline: rgb(255 255 255 / .12); --fmc-nav-hilite: rgb(255 255 255 / .10); --fmc-nav-hover: rgb(255 255 255 / .10); --fmc-nav-current: rgb(255 255 255 / .12); --fmc-nav-shadow: 0 1px 12px rgb(0 0 0 / .22); --fmc-nav-menu-shadow: 0 14px 38px rgb(0 0 0 / .42); } /* The colour behind the strip really does change across it — a resolved gradient steep enough to matter, or panels that differ side to side. Thin the film, widen the blur, and spend a little saturation keeping the content alive through the frost, which is the one case that earns it. */ :root[data-fmc-nav-varied="1"]{ --fmc-nav-film: .34; --fmc-nav-blur: 28px; --fmc-nav-sat: 112%; } :root[data-fmc-nav-varied="1"][data-fmc-nav-scheme="dark"]{ --fmc-nav-film: .30 } /* The sampler could not describe the backdrop honestly — a raster background, an angled/radial gradient, something it will not guess at. Do not wash the bar with an invented colour: drop the film to nothing and let real blur be the entire effect. Desktop menus retain a light film; the mobile drawer continues the best known base shade densely enough to read as one surface. */ :root[data-fmc-nav-unknown="1"][data-fmc-nav-varied]{ --fmc-nav-film: 0; --fmc-nav-film-menu: .58; /* Continue the sampled header shade rather than mixing a pale body fallback with a different part of the hero gradient beneath the taller drawer. */ --fmc-nav-film-panel: .96; --fmc-nav-blur: 30px; --fmc-nav-sat: 100%; } /* ------------------------------------------------------------- the bar -- Strip the bar (and, where it exists, the sheet) back to transparent. Only paint is touched: border-*-color, never border-width, so the box keeps its exact height and nothing shifts. */ .site-nav, .site-nav > .nav-sheet{ background:transparent !important; background-image:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-top-color:transparent !important; border-bottom-color:transparent !important; box-shadow:none !important; } /* The paint layer. .site-nav is position:fixed and .nav-sheet position:absolute, so an inset:0 absolute pseudo-element covers each exactly — including the homepage sheet's deliberate 125% overhang past its 80%-wide fixed parent, which is how the iOS 26 status-bar forehead keeps scrolling. That geometry is inherited, never restated. An absolutely positioned pseudo is not a flex item, so neither flex row is disturbed. */ .site-nav::before, .site-nav > .nav-sheet::before{ content:''; position:absolute; inset:0; pointer-events:none; background:rgb(var(--fmc-nav-rgb) / var(--fmc-nav-film)); -webkit-backdrop-filter:blur(var(--fmc-nav-blur)) saturate(var(--fmc-nav-sat)); backdrop-filter:blur(var(--fmc-nav-blur)) saturate(var(--fmc-nav-sat)); border-bottom:.5px solid var(--fmc-nav-hairline); box-shadow:var(--fmc-nav-shadow); transition:background-color .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease; } /* One layer, never two: where a sheet exists it is the paint owner and the bar itself paints nothing (its box is only 80% of the viewport). */ .site-nav:has(> .nav-sheet)::before{ display:none } /* The bar's contents sit above its own paint layer. position:relative on an already-static, already-full-size box; no geometry changes. */ .site-nav .nav-inner{ position:relative; z-index:1 } /* ------------------------------------------------------ the mobile panel -- The open panel wears exactly the bar's film: the pages paired the two "to the digit" on 2026-08-26 so bar and drawer read as one sheet. When the bar's paint moved into this sheet and became the sampled tint above (2026-09-07), the panel was left wearing the pages' old fixed films - on the homepage's day sky a paler blue at 180% saturation under a bar tinted from the sky itself, which is the lighter, differently-coloured drawer in John's screenshot (2026-09-14). Same recipe, same tokens, same states: the panel is painted here from now on and the pages' own films are overridden, not edited, exactly as the bar's are. Only paint is touched - border-*-color, never border-width - so nothing shifts. The film is the bar's (--fmc-nav-film-panel tracks it) except where the sampler could not describe the backdrop, where a panel full of links keeps its own denser continuation tint. */ .mobile-dropdown{ background:rgb(var(--fmc-nav-rgb) / var(--fmc-nav-film-panel)) !important; background-image:none !important; -webkit-backdrop-filter:blur(var(--fmc-nav-blur)) saturate(var(--fmc-nav-sat)) !important; backdrop-filter:blur(var(--fmc-nav-blur)) saturate(var(--fmc-nav-sat)) !important; border-bottom-color:var(--fmc-nav-hairline) !important; box-shadow:var(--fmc-nav-shadow) !important; } /* Homepage top state: the bar deliberately paints nothing so the hero runs through it and iOS reads body's colour for the forehead. Honour it — fade the layer out rather than removing it, so the handoff to the scrolled / menu-open / on-light films stays continuous. Sheet-only, i.e. homepage-only. */ .site-nav:not(.is-scrolled):not(.menu-open):not(.on-light) > .nav-sheet::before{ opacity:0; } /* ------------------------------------------------------------- bar ink -- :not(.nav-cta) everywhere — the Login pill is a foreground control with its own teal fill and white ink, and is not ours to retint. */ .site-nav .nav-logo, .site-nav .nav-logo-text{ color:var(--fmc-nav-ink) !important } .site-nav .nav-logo-text span{ color:var(--fmc-nav-accent) !important } .site-nav .nav-links > li > a:not(.nav-cta){ color:var(--fmc-nav-ink-dim) !important } .site-nav .nav-links > li > a:not(.nav-cta):hover, .site-nav .nav-links > li > a:not(.nav-cta):focus-visible{ color:var(--fmc-nav-ink) !important } .site-nav .nav-links > li > a:not(.nav-cta)[aria-current="page"]{ color:var(--fmc-nav-accent) !important } .site-nav .mobile-menu-btn{ color:var(--fmc-nav-ink) !important } .site-nav .mobile-menu-btn span{ background:currentColor !important } /* --------------------------------------------------- desktop dropdown -- Element back to transparent and, above all, unclipped. See THE SQUARE. */ .site-nav .nav-dropdown-menu{ background:transparent !important; background-image:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-color:transparent !important; /* colour only — the .5px box stays */ box-shadow:none !important; overflow:visible !important; clip-path:none !important; -webkit-clip-path:none !important; } /* Closed is invisible, not unrendered: the submenu links stay in the tab order, so the first Tab into one trips :focus-within and opens the menu. This is the rule service.html reached for clip-path to get; it is restated here so the other six pages, which used visibility:hidden, behave the same way. opacity is left entirely to the pages — including .is-dismissed, which Escape sets — so the existing state machine is untouched. */ .site-nav .nav-dropdown-menu{ visibility:visible !important; pointer-events:none !important; } .site-nav .nav-dropdown:hover > .nav-dropdown-menu, .site-nav .nav-dropdown:focus-within > .nav-dropdown-menu{ pointer-events:auto !important; } .site-nav .nav-dropdown.is-dismissed > .nav-dropdown-menu{ pointer-events:none !important; } /* The menu's single glass layer. inset:-.5px so it covers the border box exactly, and a 16px radius so fill, hairline, top highlight and shadow all end on the same rounded outline — nothing rectangular is painted anywhere. The pages' own ::after was a top highlight gradient; it is folded in here as the first background layer, because one surface should be one layer. */ .site-nav .nav-dropdown-menu::after{ content:'' !important; position:absolute !important; inset:-.5px !important; top:-.5px !important; right:-.5px !important; bottom:-.5px !important; left:-.5px !important; width:auto !important; height:auto !important; /* the pages set height:40% */ z-index:0 !important; pointer-events:none !important; border-radius:16px !important; background: linear-gradient(180deg, var(--fmc-nav-hilite) 0%, rgb(255 255 255 / 0) 42%), rgb(var(--fmc-nav-rgb) / var(--fmc-nav-film-menu)) !important; box-shadow: 0 0 0 .5px var(--fmc-nav-hairline), var(--fmc-nav-menu-shadow) !important; /* No backdrop-filter while closed: a permanently-live blur layer behind an opacity:0 menu buys nothing and costs a render surface on every page. */ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; transition:background-color .2s ease !important; } .site-nav .nav-dropdown:hover > .nav-dropdown-menu::after, .site-nav .nav-dropdown:focus-within > .nav-dropdown-menu::after{ -webkit-backdrop-filter:blur(var(--fmc-nav-blur)) saturate(var(--fmc-nav-sat)) !important; backdrop-filter:blur(var(--fmc-nav-blur)) saturate(var(--fmc-nav-sat)) !important; } /* The pages' ::before is the 12px hover bridge across the gap between the parent link and the menu. overflow:hidden used to clip it out of existence; with the clip gone it works. It must stay invisible — a filled bridge is the other way a square gets painted around a rounded panel. */ .site-nav .nav-dropdown-menu::before{ background:none !important; box-shadow:none !important; border:0 !important; } .site-nav .nav-dropdown-menu > a{ position:relative; z-index:1 } .site-nav .nav-dropdown-menu a:not(.nav-cta){ color:var(--fmc-nav-ink-dim) !important } .site-nav .nav-dropdown-menu a:not(.nav-cta):hover, .site-nav .nav-dropdown-menu a:not(.nav-cta):focus-visible{ color:var(--fmc-nav-ink) !important; background:var(--fmc-nav-hover) !important; } .site-nav .nav-dropdown-menu a:not(.nav-cta)[aria-current="page"]{ color:var(--fmc-nav-accent) !important; background:var(--fmc-nav-current) !important; } .site-nav .dd-divider{ background:var(--fmc-nav-hairline) !important } /* The mobile drawer paint is owned above; page rules retain its link ink and layout. The denser unknown-backdrop film keeps the menu legible in WebKit. */ /* ------------------------------------------------------------ fallbacks -- */ /* No backdrop-filter: keep the colour match — that is the part that made the bar read as part of the page — and simply stop pretending it is glass. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ :root{ --fmc-nav-film: .95 !important; --fmc-nav-film-menu: .98 !important } :root[data-fmc-nav-scheme="dark"]{ --fmc-nav-film: .92 !important; --fmc-nav-film-menu: .97 !important } :root[data-fmc-nav-varied="1"]{ --fmc-nav-film: .95 !important } /* Blur-only is not an option without a blur: an unknown backdrop has to fall back to the best flat colour the sampler did reach, opaque. */ :root[data-fmc-nav-unknown="1"]{ --fmc-nav-film: .95; --fmc-nav-film-menu: .98 } } @media (prefers-reduced-motion: reduce){ .site-nav::before, .site-nav > .nav-sheet::before, .site-nav .nav-dropdown-menu::after{ transition:none !important } } /* Forced colours: no films, no blur, no shadows — let the UA own it. */ @media (forced-colors: active){ .site-nav::before, .site-nav > .nav-sheet::before{ background:Canvas; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:CanvasText; box-shadow:none; } .site-nav .nav-dropdown-menu::after{ background:Canvas !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 0 0 1px CanvasText !important; } .site-nav .nav-logo, .site-nav .nav-logo-text, .site-nav .nav-logo-text span, .site-nav .nav-links > li > a:not(.nav-cta), .site-nav .nav-dropdown-menu a:not(.nav-cta){ color:LinkText !important } } } /* scripting enhancement */