/* ══ CALYRAEN MOTION — global; APPEAR on scroll-in, DISAPPEAR on scroll-out ══ Gated by the Motion setting (data-motion). Reduce-motion aware. The Custom JS toggles .nv-in as each section enters/leaves the viewport, so sections animate IN and OUT every time you scroll. Grid layout (even/centered) is JS-driven too. Per block, add a class in the builder: nv-fade / nv-sink / nv-left / nv-right / nv-zoom / nv-blur / nv-tilt. Tune with the vars. */ :root{ --nv-dist:28px; --nv-e:cubic-bezier(.16,1,.3,1); --nv-t:.7s; } @media (prefers-reduced-motion:no-preference){ .nv-js body[data-motion="on"] main section{opacity:0;transform:translateY(var(--nv-dist));transition:opacity var(--nv-t) var(--nv-e),transform var(--nv-t) var(--nv-e),filter var(--nv-t) var(--nv-e);} .nv-js body[data-motion="on"] main section.nv-fade{transform:none} .nv-js body[data-motion="on"] main section.nv-sink{transform:translateY(calc(-1*var(--nv-dist)))} .nv-js body[data-motion="on"] main section.nv-left{transform:translateX(calc(-1.4*var(--nv-dist)))} .nv-js body[data-motion="on"] main section.nv-right{transform:translateX(calc(1.4*var(--nv-dist)))} .nv-js body[data-motion="on"] main section.nv-zoom{transform:scale(.94)} .nv-js body[data-motion="on"] main section.nv-blur{filter:blur(14px)} .nv-js body[data-motion="on"] main section.nv-tilt{transform:perspective(1200px) rotateX(9deg) translateY(var(--nv-dist))} .nv-js body[data-motion="on"] main section.nv-in{opacity:1 !important;transform:none !important;filter:none !important;} } /* subtle life on the gradient placeholder that shows in genuinely-empty image slots */ img[src*="placeholder.svg"]{filter:saturate(1.06) contrast(1.02)} /* hover lift on linked cards */ body[data-motion="on"] a>article,body[data-motion="on"] a>.card,body[data-motion="on"] a>figure{transition:transform .3s cubic-bezier(.16,1,.3,1)} body[data-motion="on"] a:hover>article,body[data-motion="on"] a:hover>.card,body[data-motion="on"] a:hover>figure{transform:translateY(-4px)} /* ==== CHROME TOKENS — every surface derives from these, nothing literal ==== The nav, sub-bar, mega panel, dropdowns and search field all read the SAME values, so changing the Glass sliders moves them together. Colours come from the palette (--c-surface / --c-text), never from a hardcoded hue. */ :root{ --nv-plate: var(--c-surface); /* CONSTANT dark plate — menu, sub-bar, mega and account card all read this */ --nv-chrome-ink: 0 0% 100%; --nv-type-size: var(--nv-type-size-s, .9rem); /* links: menu, mega, sub, account */ --nv-type-weight: var(--nv-type-weight-s, 500); --nv-type-track: var(--nv-type-track-s, normal); --nv-label-size: var(--nv-label-size-s, .72rem); /* group headings / eyebrows */ --nv-label-weight: var(--nv-label-weight-s, 600); --nv-label-track: var(--nv-label-track-s, .12em); --nv-label-op: var(--nv-label-op-s, .55); --nv-mega-gap-y: var(--nv-mega-gap-y-s, .55rem); /* between links */ --nv-mega-gap-x: var(--nv-mega-gap-x-s, 2.75rem); /* between columns */ --nv-mega-head-gap:var(--nv-mega-head-gap-s, .85rem); /* heading -> first link */ --nv-mega-pad: var(--nv-mega-pad-s, 2rem); /* panel inset */ --nv-pill-c: var(--nv-pill-c-s, var(--nv-chrome-ink)); --nv-icon-hover: var(--nv-pill-c); --nv-icon-hover-a: var(--pill-fill, .22); /* CONSTANT light ink to match */ /* SINGLE SOURCE OF TRUTH for every hover capsule (nav / mega / dropdown / drawer) */ /* hover + selected capsules — BOTH derive from the Nova Studio knobs: chrome_pill (colour -> --nv-pill-c) + glass_pill_fill (intensity -> --pill-fill). */ --nv-hl-g: linear-gradient(180deg, hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22)*.42)), hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22)*.60))); --nv-hl-sel: linear-gradient(180deg, hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22)*.72)), hsl(var(--nv-pill-c)/var(--pill-fill,.22))); --nv-plate-a1: 0; /* menu overlay removed — was max(--glass-floor,--glass-opacity); pure blur only */ --nv-plate-a2: 0; --nv-plate-blur: calc(var(--glass-blur,22px) * 1.2); --nv-plate-sat: var(--glass-saturate,190%); --nv-shadow-c: 220 45% 4%; /* shadows are dark in BOTH modes — deriving this from --c-text made them white halos in dark mode */ --nv-spec-c: 0 0% 100%; --nv-sheen-a: calc(var(--glass-sheen,.28) * .28); /* white sheen across the pane face — 0 keeps the ends from lifting */ --nv-rim-a: var(--glass-light,.88); /* Surfaces — edge light */ --nv-edge-a: var(--glass-edge,.36); /* Surfaces — shadow edge */ --nv-glow-a: var(--glass-glow,.45); /* Surfaces — glow */ --nv-spec-a: calc(var(--glass-light,.88) * .20); /* specular edge strength — this is the only white on a pane */ /* specular is light, not a theme hue */ --nv-nav-h: 56px; /* pill height */ --nv-nav-top: 16px; /* gap from the top border */ --nv-panel-gap: 10px; /* ONE gap for every panel hung off the chrome */ --nv-panel-top: calc(var(--nv-nav-top) + var(--nv-nav-h) + var(--nv-panel-gap)); } /* ==== GLASSMORPHISM (start) ==== */ /* Driven entirely by the Nova Studio > Glass tab: --glass-blur, --glass-opacity and --glass-saturate are the emitted tokens, and every other value here is a calc() off them, so the three sliders move the whole site. Nothing in the extension is edited — this is one stylesheet in the theme's Custom CSS, so the admin panel and Studio itself are untouched. */ /* ── the ground: glass has nothing to refract on flat paint ─────────────── */ /* ==== GROUND ==== No ambient wash: the page is plain, and colour comes from block imagery. Kept as a rule (not deleted) so it is obvious where the wash used to live. */ body{ background-image:none; } /* ── content glass ────────────────────────────────────────────────────────── The MATERIAL is identical in both colour modes — same blur, same saturation, same fill alpha, same rim. Only the surface colour underneath follows the mode, which is what lets white mode lead while dark stays compatible. */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* EVERY surface gets the blur and the edge — that is what makes it read as glass, and it must reach art tiles too. */ .nv-surface, .nv-glass, .card{ -webkit-backdrop-filter: blur(var(--glass-blur,20px)) saturate(var(--glass-saturate,140%)); backdrop-filter: blur(var(--glass-blur,20px)) saturate(var(--glass-saturate,140%)); border-color: transparent; box-shadow: inset 0 1px 0 0 hsl(0 0% 100%/var(--nv-edge-lit,.42)), inset 1px 0 0 0 hsl(0 0% 100%/calc(var(--nv-edge-lit,.42) * .6)), inset 0 -1px 0 0 hsl(var(--nv-shadow-c)/var(--nv-edge-dark,.18)), 0 0 0 1px hsl(var(--nv-shadow-c)/.07), 0 14px 34px -16px hsl(var(--nv-shadow-c)/.28); } /* the FILL is doubled-class so a block background shorthand cannot wipe it, and skips surfaces carrying their own inline background so art survives. */ .nv-surface.nv-surface:not([style*="background"]), .nv-glass.nv-glass:not([style*="background"]), .card.card:not([style*="background"]){ background: radial-gradient(122% 80% at 18% -14%, hsl(0 0% 100%/var(--nv-sheen,.15)), transparent 58%), linear-gradient(180deg, hsl(0 0% 100%/var(--nv-tint,.20)), hsl(0 0% 100%/calc(var(--nv-tint,.20) * .5))), hsl(var(--c-surface)/calc(var(--glass-opacity,.72) * .86)); -webkit-backdrop-filter: blur(var(--glass-blur,20px)) saturate(var(--glass-saturate,140%)); backdrop-filter: blur(var(--glass-blur,20px)) saturate(var(--glass-saturate,140%)); border-color: transparent; /* two-sided edge at ZERO blur: white on the lit edges, a dark line opposite. A white-only rim is invisible on a white page. */ box-shadow: inset 0 1px 0 0 hsl(0 0% 100%/var(--nv-edge-lit,.42)), inset 1px 0 0 0 hsl(0 0% 100%/calc(var(--nv-edge-lit,.42) * .6)), inset 0 -1px 0 0 hsl(var(--nv-shadow-c)/var(--nv-edge-dark,.18)), 0 0 0 1px hsl(var(--nv-shadow-c)/.07), 0 14px 34px -16px hsl(var(--nv-shadow-c)/.28); } } /* ── chrome: nav pill, search, mega. ONE constant material ───────────────── The plate colour is a literal, not --c-surface, so the light/dark toggle cannot move it. That constant plate IS the underlayer: the ink always sits on the same ground, so it can never blend into whatever scrolls behind — no background-awareness, no detection. Alpha/blur/saturation still come from the Studio sliders. */ header[data-surface="nav"]{ background:none !important; background-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; border:0 !important; border-bottom:0 !important; overflow:visible !important; } header[data-surface="nav"] > .container{ width:max-content; max-width:calc(100% - 2rem); margin-inline:auto; height:56px; padding:0 10px 0 22px; border-radius:999px; gap:.15rem; flex-wrap:nowrap; min-width:0; position:relative; background:none; } /* the glass lives on a pseudo-element: an element carrying backdrop-filter becomes a BACKDROP ROOT, and every nested pane (the mega) then blurs an already-composited surface instead of the page — which is exactly why text read straight through it. Moving it here keeps the look and frees the mega. */ header[data-surface="nav"] > .container::before, footer[data-surface="footer"] > .nv-foot-wrap::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; background: radial-gradient(122% 80% at 20% -16%, hsl(0 0% 100%/var(--nv-sheen-a,0)), transparent 58%), linear-gradient(180deg, hsl(var(--nv-plate)/var(--nv-plate-a1)), hsl(var(--nv-plate)/var(--nv-plate-a2))); -webkit-backdrop-filter: blur(calc(var(--glass-blur,20px) * 1.2)) saturate(var(--glass-saturate,140%)); backdrop-filter: blur(calc(var(--glass-blur,20px) * 1.2)) saturate(var(--glass-saturate,140%)); box-shadow: inset 0 1px 0 0 hsl(0 0% 100%/var(--nv-spec-a,.10)), inset 1px 0 0 0 hsl(0 0% 100%/calc(var(--nv-spec-a,.10) * .5)), inset 0 -1px 0 0 hsl(0 0% 0%/.30), 0 0 0 1px hsl(var(--nv-shadow-c)/.28), 0 12px 34px -10px hsl(var(--nv-shadow-c)/.40); } header[data-surface="nav"] > .container > *{ position:relative; z-index:1; } header[data-surface="nav"] > .container{ text-shadow:none; } header[data-surface="nav"] .nv-hdr-logo, header[data-surface="nav"] .nv-hdr-brand, header[data-surface="nav"] .nv-mega-trigger, header[data-surface="nav"] nav.nv-hdesk a, header[data-surface="nav"] nav.nv-hdesk > * > a, header[data-surface="nav"] button, header[data-surface="nav"] .container > a{ color:hsl(var(--nv-chrome-ink,220 14% 12%)) !important; } header[data-surface="nav"] svg{ color:hsl(var(--nv-chrome-ink,220 14% 12%)) !important; stroke:currentColor; } header[data-surface="nav"] .nv-mega-trigger, header[data-surface="nav"] nav.nv-hdesk > a{ border-radius:999px; padding-left:.7rem; padding-right:.7rem; transition:background-color 180ms cubic-bezier(.32,.72,0,1); } /* ONE selection capsule everywhere. A white overlay vanishes on a light bar, which is why it read oddly against the white theme — this is an ink tint with a light top edge, matching the sub-nav and every other pill. */ header[data-surface="nav"] .nv-mega-trigger:hover, header[data-surface="nav"] nav.nv-hdesk > a:hover{ background:var(--nv-hl-g); transition-duration:260ms; } header[data-surface="nav"] .nv-mega-item.nv-open .nv-mega-trigger{ background:var(--nv-hl-sel); box-shadow:inset 0 1px 0 hsl(0 0% 100%/.22), 0 1px 3px hsl(var(--nv-shadow-c)/.30); transition-duration:260ms; } /* search — the same plate, recessed */ header[data-surface="nav"] .nv-hdr-search input, header[data-surface="nav"] input[type="search"]{ background:hsl(var(--nv-plate)/calc(var(--nv-plate-a1) * 1.25)) !important; color:hsl(var(--nv-chrome-ink,220 14% 12%)) !important; border:0 !important; border-radius:999px !important; padding:.42rem .9rem !important; -webkit-backdrop-filter:blur(calc(var(--glass-blur,20px) * .6)) saturate(var(--glass-saturate,140%)); backdrop-filter:blur(calc(var(--glass-blur,20px) * .6)) saturate(var(--glass-saturate,140%)); box-shadow:inset 0 1px 2px hsl(0 0% 0%/.34), inset 0 0 0 1px hsl(0 0% 100%/.14) !important; } header[data-surface="nav"] input[type="search"]::placeholder{ color:hsl(var(--nv-chrome-ink,220 14% 12%)/.68) !important; opacity:1; } header[data-surface="nav"] input[type="search"]:focus{ outline:none !important; box-shadow:inset 0 1px 2px hsl(0 0% 0%/.34), inset 0 0 0 1px hsl(0 0% 100%/.30), 0 0 0 3px hsl(0 0% 100%/.10) !important; } /* mega + dropdowns — same plate, denser: they carry paragraphs, and a nested backdrop-filter inside the blurred pill cannot sample the page */ header[data-surface="nav"] .nv-mega{ left:0 !important; right:0 !important; margin-inline:auto !important; width:min(94vw, 1040px) !important; max-width:min(94vw, 1040px) !important; top:var(--nv-panel-top) !important; } /* white ink throughout the panel — grey type over glass is what reads as bleed */ header[data-surface="nav"] .nv-mega, header[data-surface="nav"] .nv-mega *{ color:hsl(var(--nv-chrome-ink,220 14% 12%)) !important; text-shadow:var(--nv-ink-glow, none); } header[data-surface="nav"] .nv-mega, header[data-surface="nav"] [data-surface="dropdown"]:not(.nv-acct-pop){ background: radial-gradient(90% 60% at 15% -10%, hsl(0 0% 100%/var(--nv-sheen-a,0)), transparent 60%), linear-gradient(180deg, hsl(var(--nv-plate)/var(--nv-plate-a1)), hsl(var(--nv-plate)/var(--nv-plate-a2))) !important; /* same tint as the bar; the blur is what kills legibility behind it */ -webkit-backdrop-filter:blur(calc(var(--glass-blur,20px) * 2.4)) saturate(var(--glass-saturate,140%)) !important; backdrop-filter:blur(calc(var(--glass-blur,20px) * 2.4)) saturate(var(--glass-saturate,140%)) !important; text-shadow:none; z-index:80; border:0 !important; border-radius:20px !important; box-shadow: inset 0 1px 0 0 hsl(0 0% 100%/var(--nv-spec-a,.10)), inset 0 -1px 0 0 hsl(0 0% 0%/.34), 0 0 0 1px hsl(var(--nv-shadow-c)/.24), 0 26px 60px -18px hsl(var(--nv-shadow-c)/.55) !important; } header[data-surface="nav"] .nv-mega, header[data-surface="nav"] .nv-mega a, header[data-surface="nav"] .nv-mega span, header[data-surface="nav"] .nv-mega p, header[data-surface="nav"] .nv-mega h3, header[data-surface="nav"] [data-surface="dropdown"]:not(.nv-acct-pop), header[data-surface="nav"] [data-surface="dropdown"]:not(.nv-acct-pop) a{ color:hsl(var(--nv-chrome-ink,220 14% 12%)) !important; } /* group headings stay white too: grey type over glass is exactly what reads as "the background is bleeding through". */ header[data-surface="nav"] .nv-mega .nv-mega-group-head{ color:hsl(var(--nv-chrome-ink,220 14% 12%)) !important; opacity:1; text-shadow:var(--nv-ink-glow, none); } header[data-surface="nav"] .nv-mega a{ border-radius:12px; } header[data-surface="nav"] .nv-mega a:hover{ background:var(--nv-hl-g) !important; } /* ── in AND out ────────────────────────────────────────────────────────── The closed state carries the OUT duration; the open state overrides it with the IN duration. A transition declared on one state animates one way only. */ header[data-surface="nav"] .nv-mega, header[data-surface="nav"] [data-surface="dropdown"]{ transform:translateY(-8px); transform-origin:top center; transition:opacity 180ms cubic-bezier(.4,0,1,1), transform 180ms cubic-bezier(.4,0,1,1), visibility 180ms; } header[data-surface="nav"] .nv-mega-item:focus-within .nv-mega, header[data-surface="nav"] .nv-mega-item.nv-open .nv-mega, header[data-surface="nav"] [data-surface="dropdown"][x-show]{ transform:translateY(0); transition:opacity 260ms cubic-bezier(.32,.72,0,1), transform 260ms cubic-bezier(.32,.72,0,1), visibility 260ms; } @media (max-width:768px){ header[data-surface="nav"] > .container{ height:50px; padding:0 12px; border-radius:26px; } } @media (prefers-reduced-motion:reduce){ header[data-surface="nav"] .nv-mega, header[data-surface="nav"] [data-surface="dropdown"]{ transition-duration:.01ms !important; transform:none; } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ header[data-surface="nav"] > .container{ background:hsl(var(--nv-plate)/.96); } } /* ==== GLASSMORPHISM (end) ==== */ /* ==== ACCOUNT CARD — same line as the mega, same selection idiom ==== */ header[data-surface="nav"] .nv-acct-pop, header[data-surface="nav"] [data-surface="dropdown"]{ position: absolute !important; top: calc((var(--nv-nav-h) + 100%) / 2 + var(--nv-panel-gap)) !important; margin-top: 0 !important; left: 50% !important; right: auto !important; transform: translateX(var(--nv-acct-x, -100%)) !important; } header[data-surface="nav"] .nv-acct-pop a, header[data-surface="nav"] .nv-acct-pop button, header[data-surface="nav"] [data-surface="dropdown"] a, header[data-surface="nav"] [data-surface="dropdown"] button{ display:block; border-radius:999px; padding:.44rem .8rem; margin:.1rem .4rem; transition:background-color var(--nv-dur,220ms) var(--nv-ease,cubic-bezier(.32,.72,0,1)); } header[data-surface="nav"] .nv-acct-pop a:hover, header[data-surface="nav"] .nv-acct-pop button:hover, header[data-surface="nav"] [data-surface="dropdown"] a:hover, header[data-surface="nav"] [data-surface="dropdown"] button:hover{ background:var(--nv-hl-g); } header[data-surface="nav"] .nv-acct-pop a[aria-current], header[data-surface="nav"] [data-surface="dropdown"] a[aria-current]{ background:var(--nv-hl-sel); font-weight:600; } /* ==== NO UNDERLAY BAND ==== */ /* Only the pills should be visible — the bar behind them is removed in every layout, including the account area which uses its own header include. */ header[data-surface="nav"], header.nv-surface[data-surface="nav"], nav.nv-surface[data-surface="nav"][aria-label="Page sections"]{ background: none !important; background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; border-bottom: 0 !important; } /* ==== TOP SCRIM ==== The first block's art is anchored ABOVE the viewport (at 50% -8%), so its glow peaks exactly where the menu and sub-bar sit and has faded by the time the mega hangs. That is why the chrome looked like it carried an underlay and the mega did not — same glass, different ground. This levels only the strip behind the chrome and fades out before the hero's bloom, so the artwork keeps its character. Uses --c-bg, so it works in both colour modes. */ main > div:first-of-type > section:first-of-type::after, main > section:first-of-type::after{ content:""; position:absolute; left:0; right:0; top:0; height:var(--nv-scrim-h, 210px); background:linear-gradient(180deg, hsl(var(--c-bg)/0) 0%, hsl(var(--c-bg)/calc(var(--nv-scrim-a, .22) * .45)) 22%, hsl(var(--c-bg)/var(--nv-scrim-a, .22)) 62%, hsl(var(--c-bg)/calc(var(--nv-scrim-a, .22) * .5)) 84%, hsl(var(--c-bg)/0) 100%); pointer-events:none; z-index:0; } main > div:first-of-type > section:first-of-type > *:not(.absolute), main > section:first-of-type > *:not(.absolute){ position:relative; z-index:1; } /* ==== CHROME GROUND ==== The first block's art is anchored at 50% -8%, so its glow rises from 35 to 44 exactly across the strip the menu and sub-bar sit on, then falls away before the mega. Same glass, different ground — which is why only the top chrome looked like it carried an underlay. This levels that strip and nothing else. ONE selector: two would stack and over-darken. */ main > div:first-of-type > section:first-of-type::after{ content:""; position:absolute; left:0; right:0; top:0; height:190px; background:linear-gradient(180deg, hsl(var(--c-bg)/0) 0%, hsl(var(--c-bg)/calc(var(--nv-ground-a,.20) * .35)) 30%, hsl(var(--c-bg)/var(--nv-ground-a,.20)) 58%, hsl(var(--c-bg)/calc(var(--nv-ground-a,.20) * .35)) 82%, hsl(var(--c-bg)/0) 100%); pointer-events:none; z-index:0; } main > div:first-of-type > section:first-of-type > *:not(.absolute){ position:relative; z-index:1; } /* ==== HERO WASH ==== immersive_hero lays a --c-bg gradient over its background photo. At the shipped strength the picture loses most of its colour, so this thins it to a footer fade only — the image keeps its saturation, the block still has somewhere for content to sit. */ main section > .absolute.inset-0[style*="linear-gradient(180deg,hsl(var(--c-bg)"]{ background:linear-gradient(180deg, hsl(var(--c-bg)/0) 0%, hsl(var(--c-bg)/0) 72%, rgba(0,0,0,.30) 88%, rgba(0,0,0,.82) 100%) !important; } /* the block's glow layer also sits over the photo and mutes it */ main section > .absolute.inset-0 > .nv-glow, main section .nv-glow{ opacity:0 !important; } /* the mega's feature card belongs to the chrome, not the page */ header[data-surface="nav"] .nv-mega .nv-surface, header[data-surface="nav"] .nv-mega [class*="card"], header[data-surface="nav"] .nv-mega-featured, header[data-surface="nav"] .nv-acct-pop .nv-surface, header[data-surface="nav"] [data-surface="dropdown"] .nv-surface{ background: linear-gradient(hsl(var(--nv-spec-c)/var(--nv-sheen-a)), hsl(var(--nv-spec-c)/calc(var(--nv-sheen-a) * .45))), hsl(var(--nv-plate)/var(--nv-plate-a1)) !important; border-color:hsl(var(--nv-spec-c)/var(--nv-spec-a)) !important; color:hsl(var(--nv-chrome-ink)) !important; } header[data-surface="nav"] .nv-mega .nv-surface *, header[data-surface="nav"] .nv-acct-pop .nv-surface *{ color:hsl(var(--nv-chrome-ink)) !important; } /* ==== CHROME INK — ONE SOURCE ==== The mega, sub-bar and account card all take --nv-chrome-ink. Nothing inside the chrome may inherit a page text colour, or it shifts with colour mode. */ header[data-surface="nav"] .nv-mega, header[data-surface="nav"] .nv-mega *, header[data-surface="nav"] .nv-acct-pop, header[data-surface="nav"] .nv-acct-pop *, header[data-surface="nav"] [data-surface="dropdown"], header[data-surface="nav"] [data-surface="dropdown"] *, nav[aria-label="Page sections"] .nv-pagetabs, nav[aria-label="Page sections"] .nv-pagetabs *{ color:hsl(var(--nv-chrome-ink)) !important; } /* secondary labels are the same ink at lower opacity — never another hue */ header[data-surface="nav"] .nv-mega .nv-mega-group-head, header[data-surface="nav"] .nv-mega small, header[data-surface="nav"] .nv-mega [class*="muted"], header[data-surface="nav"] .nv-acct-pop [class*="muted"]{ color:hsl(var(--nv-chrome-ink)) !important; opacity:.62; } /* ==== CHROME ACTIONS — login / logout / dividers ==== */ header[data-surface="nav"] [data-surface="dropdown"] button, header[data-surface="nav"] .nv-acct-pop button, header[data-surface="nav"] .nv-acct-pop [type="submit"]{ background: linear-gradient(hsl(var(--nv-spec-c)/calc(var(--nv-sheen-a) * 2.4)), hsl(var(--nv-spec-c)/calc(var(--nv-sheen-a) * 1.1))), hsl(var(--nv-plate)/var(--nv-plate-a1)) !important; color:hsl(var(--nv-chrome-ink)) !important; border:1px solid hsl(var(--nv-spec-c)/var(--nv-spec-a)) !important; border-radius:999px !important; display:flex !important; width:100% !important; margin:0 !important; justify-content:center !important; align-items:center !important; padding:.55rem .9rem !important; transition:background var(--glass-anim-in,260ms) ease; } header[data-surface="nav"] [data-surface="dropdown"] button:hover, header[data-surface="nav"] .nv-acct-pop button:hover{ background:var(--nv-hl-g) !important; } /* the account links' hover ground, and the rules between sections */ header[data-surface="nav"] [data-surface="dropdown"] a:hover{ background:hsl(var(--nv-spec-c)/calc(var(--nv-sheen-a) * 1.6)) !important; } header[data-surface="nav"] [data-surface="dropdown"] [style*="border-top"], header[data-surface="nav"] [data-surface="dropdown"] [style*="border-bottom"], header[data-surface="nav"] .nv-acct-pop [style*="border-"]{ border-color:hsl(var(--nv-spec-c)/var(--nv-spec-a)) !important; } /* ==== PANE RIM — the glass edge, driven by the Studio sliders ==== A bright hairline on the lit edge, a dark one opposite (a white-only rim is invisible on a white page), both at ZERO blur so they read as an edge rather than a halo, plus the drop glow that lifts the pane off the page. */ header[data-surface="nav"] > .container::before, header[data-surface="nav"] .nv-mega, header[data-surface="nav"] .nv-acct-pop, header[data-surface="nav"] [data-surface="dropdown"], nav[aria-label="Page sections"] .nv-pagetabs{ box-shadow: inset 0 1px 0 0 hsl(var(--nv-spec-c)/var(--nv-rim-a)), inset 1px 0 0 0 hsl(var(--nv-spec-c)/calc(var(--nv-rim-a) * .45)), inset -1px 0 0 0 hsl(var(--nv-spec-c)/calc(var(--nv-rim-a) * .22)), inset 0 -1px 0 0 hsl(var(--nv-shadow-c)/var(--nv-edge-a)), 0 1px 0 0 hsl(var(--nv-shadow-c)/calc(var(--nv-edge-a) * .5)), 0 18px 44px -14px hsl(var(--nv-shadow-c)/var(--nv-glow-a)) !important; } /* ==== NAV LAYOUT (start) ==== */ /* Two-point toggle = Nova Studio > Layout & navigation > "Sticky header". It is already emitted on as data-sticky-header, including on CMS pages, so no blade or extension edit is needed. ON (1) -> menu and sub-bar are STICKY (they sit in flow, then stick) OFF (0) -> menu and sub-bar are FIXED (they float over the content) */ :root{ --nv-nav-gap: 16px; /* space from the top border */ --nv-pill-h: 54px; --nv-sub-gap: 9px; --nv-sub-allow: 88px; /* clearance for a two-row sub-bar */ } /* ── the sub-bar becomes a centred pill, same material as the menu ──────── */ nav[aria-label="Page sections"]{ background:none !important; background-color:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important; border:0 !important; overflow:visible !important; } /* an inline box ignores max-width, so the WRAP has to be forced by the parent. Constraining it here is what makes a long bar break into two separate pills instead of one tall two-row pill. */ nav[aria-label="Page sections"] .nv-pagetabs-rel{ overflow:visible !important; text-align:center; max-width:min(94vw, 1040px); margin-inline:auto; /* greedy line-filling is what makes row 1 the longest and row 2 the remainder — the standard shape for every over-long bar. Do NOT set text-wrap:balance (evens the rows) or nowrap (stops wrapping). */ text-wrap:wrap; } nav[aria-label="Page sections"] .nv-pagetabs > *{ display:inline-block; vertical-align:middle; } nav[aria-label="Page sections"] .nv-pagetabs{ display:inline !important; -webkit-box-decoration-break:clone; box-decoration-break:clone; width:auto !important; max-width:none; height:auto !important; padding:.44rem .72rem; border-radius:22px; overflow:visible !important; line-height:2.5; /* IDENTICAL to the menu — same tokens, same blur, no derived multiplier */ -webkit-backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); background: radial-gradient(122% 80% at 20% -16%, hsl(0 0% 100%/var(--nv-sheen-a,0)), transparent 58%), linear-gradient(180deg, hsl(var(--nv-plate)/var(--nv-plate-a1)), hsl(var(--nv-plate)/var(--nv-plate-a2))); text-shadow:none; box-shadow: inset 0 1px 0 0 hsl(0 0% 100%/var(--nv-spec-a,.10)), inset 0 -1px 0 0 hsl(0 0% 0%/.30), 0 0 0 1px hsl(var(--nv-shadow-c)/.24), 0 8px 24px -8px hsl(var(--nv-shadow-c)/.38); } /* when it wraps to two rows the pill radius would look wrong on a tall box */ nav[aria-label="Page sections"] .nv-pagetabs a, nav[aria-label="Page sections"] .nv-pagetabs button, nav[aria-label="Page sections"] .nv-pagetabs span{ color:hsl(var(--nv-chrome-ink,220 14% 12%)) !important; } nav[aria-label="Page sections"] .nv-pagetabs a{ border-radius:999px; padding:.32rem .72rem; white-space:nowrap; transition:background-color 180ms cubic-bezier(.32,.72,0,1); } nav[aria-label="Page sections"] .nv-pagetabs a:hover{ background:var(--nv-hl-g) !important; } /* the scroll arrows are meaningless once it wraps */ nav[aria-label="Page sections"] .nv-pagetabs-arrow{ display:none !important; } /* ── point 1: STICKY ────────────────────────────────────────────────────── */ html[data-sticky-header="1"] header.nv-surface[data-surface="nav"]{ position:sticky !important; top:0 !important; z-index:60; padding-top:var(--nv-nav-gap); } html[data-sticky-header="1"] nav.nv-surface[data-surface="nav"][aria-label="Page sections"]{ position:sticky !important; top:calc(var(--nv-nav-gap) + var(--nv-pill-h) + var(--nv-sub-gap)) !important; z-index:50; } /* ── point 2: FIXED ────────────────────────────────────────────────────── Beats the theme's own html[data-sticky-header="0"] … {position:static!important} (0,3,1) by adding the element type -> (0,3,2). */ html[data-sticky-header="0"] header.nv-surface[data-surface="nav"]{ position:fixed !important; top:var(--nv-nav-gap) !important; left:0; right:0; z-index:60; pointer-events:none; } html[data-sticky-header="0"] header[data-surface="nav"] > .container{ pointer-events:auto; } html[data-sticky-header="0"] nav.nv-surface[data-surface="nav"][aria-label="Page sections"]{ position:fixed !important; top:calc(var(--nv-nav-gap) + var(--nv-pill-h) + var(--nv-sub-gap)) !important; left:0; right:0; z-index:50; pointer-events:none; } html[data-sticky-header="0"] nav[aria-label="Page sections"] .nv-pagetabs{ pointer-events:auto; } /* fixed takes them out of flow, so the page has to get that space back */ /* NO reserved band: the first block reaches the top of the viewport and the chrome floats OVER it. The block keeps its own background (it is painted by an absolute inset-0 child, so padding does not shrink it) while its CONTENT is pushed clear of the pill and sub-bar. */ html[data-sticky-header="0"] body{ padding-top:0 !important; } html[data-sticky-header="0"] main > div:first-of-type > section:first-of-type, html[data-sticky-header="0"] main > section:first-of-type{ padding-top:calc(var(--nv-nav-gap) + var(--nv-pill-h) + 16px) !important; } html[data-sticky-header="0"] body:has(nav[aria-label="Page sections"]) main > div:first-of-type > section:first-of-type, html[data-sticky-header="0"] body:has(nav[aria-label="Page sections"]) main > section:first-of-type{ padding-top:calc(var(--nv-nav-gap) + var(--nv-pill-h) + var(--nv-sub-gap) + var(--nv-sub-allow, 88px)) !important; } html[data-sticky-header="0"]{ scroll-padding-top:calc(var(--nv-nav-gap) + var(--nv-pill-h) + 64px); } @media (max-width:768px){ :root{ --nv-nav-gap:10px; --nv-pill-h:50px; } nav[aria-label="Page sections"] .nv-pagetabs{ max-width:calc(100vw - 1.5rem); } } /* ==== NAV LAYOUT (end) ==== */ /* ==== PILL SELECTION (start) ==== */ /* One selection idiom everywhere: a pill highlight, never an underlying stripe. Applies to the sub-nav tabs, in-page tab bars, filter chips and any aria-pressed / aria-selected control that already renders in a pill form. */ /* ── sub-nav tabs (cms/_tabs.blade -> .nv-subnav-link, cms/_submenu -> a[aria-current]) ── */ nav[aria-label="Page sections"] .nv-subnav-link, nav[aria-label="Page sections"] .nv-pagetabs a, nav[aria-label="Page sections"] .nv-pagetabs button{ border-radius:999px !important; padding:.3rem .8rem !important; line-height:1.5 !important; border-bottom:0 !important; color:hsl(var(--nv-chrome-ink,220 14% 12%)) !important; font-weight:500; transition:background-color 180ms cubic-bezier(.32,.72,0,1), color 180ms; } /* kill any stripe drawn as a pseudo-element or bottom border */ nav[aria-label="Page sections"] .nv-subnav-link::after, nav[aria-label="Page sections"] .nv-subnav-link::before, nav[aria-label="Page sections"] .nv-pagetabs a::after, nav[aria-label="Page sections"] .nv-pagetabs a::before{ display:none !important; content:none !important; } nav[aria-label="Page sections"] .nv-subnav-link:hover, nav[aria-label="Page sections"] .nv-pagetabs a:hover{ background-color:hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22) * .5)) !important; } nav[aria-label="Page sections"] .nv-subnav-link--on, nav[aria-label="Page sections"] .nv-pagetabs a[aria-current], nav[aria-label="Page sections"] .nv-pagetabs a.is-active{ background:linear-gradient(180deg, hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22) * .72)), hsl(var(--nv-pill-c)/var(--pill-fill,.22))) !important; box-shadow:inset 0 1px 0 hsl(var(--nv-spec-c)/calc(var(--pill-fill,.22) * .9)), 0 1px 2px hsl(var(--nv-shadow-c)/calc(var(--pill-fill,.22) * .8)) !important; color:hsl(var(--pill-ink, var(--nv-chrome-ink))) !important; font-weight:600 !important; border-radius:999px !important; border-bottom:0 !important; } /* ── the same idiom for pill controls on the page itself. These sit on light ground in white mode, so the highlight is ink rather than white. ── */ [role="tab"], [role="tab"] , .nv-chip, .nv-filter, .nv-pill, [data-pill] > button, [aria-pressed]{ border-radius:999px; } [role="tab"]::after, .nv-chip::after, .nv-filter::after{ display:none !important; content:none !important; } main [role="tab"][aria-selected="true"], main .nv-chip[aria-pressed="true"], main .nv-chip.is-on, main .nv-filter[aria-pressed="true"], main .nv-filter.is-on, main .nv-pill[aria-pressed="true"], main .nv-pill.is-on, main [aria-pressed="true"]{ background:linear-gradient(180deg, hsl(var(--c-text)/.11), hsl(var(--c-text)/.06)) !important; box-shadow:inset 0 0 0 1px hsl(var(--c-text)/.12) !important; color:hsl(var(--nv-chrome-ink,220 14% 12%)) !important; font-weight:600 !important; border-bottom:0 !important; border-radius:999px !important; } /* and remove the stripe idiom wherever a tab-style bottom border is used */ main [role="tab"][aria-selected="true"], main [role="tab"]{ border-bottom:0 !important; } /* ── the top menu keeps the same shape for its own current item ── */ header[data-surface="nav"] nav.nv-hdesk a[aria-current], header[data-surface="nav"] nav.nv-hdesk a.is-active, nav.fixed.top-0 a.is-active, nav.fixed.top-0 a[aria-current]{ background:linear-gradient(180deg, hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22) * .72)), hsl(var(--nv-pill-c)/var(--pill-fill,.22))) !important; color:hsl(var(--pill-ink, var(--nv-chrome-ink))) !important; box-shadow:inset 0 1px 0 hsl(var(--nv-spec-c)/calc(var(--pill-fill,.22) * .9)) !important; border-radius:999px !important; border-bottom:0 !important; } /* ==== PILL SELECTION (end) ==== */ /* ==== MOTION LIBRARY — driven by Studio > Motion style + speed ==== */ /* Selectors, dropdowns, mega panels and tab changes all use ONE curve, so the whole interface moves the same way. These travel, they do not just fade. */ nav[aria-label="Page sections"] .nv-subnav-link, nav[aria-label="Page sections"] .nv-pagetabs a, header[data-surface="nav"] .nv-mega-trigger, header[data-surface="nav"] nav.nv-hdesk > a, main [role="tab"], main .nv-chip, main .nv-filter, main [aria-pressed]{ transition: background-color var(--nv-dur,260ms) var(--nv-ease,cubic-bezier(.34,1.56,.64,1)), color var(--nv-dur,260ms) var(--nv-ease,cubic-bezier(.34,1.56,.64,1)), box-shadow var(--nv-dur,260ms) var(--nv-ease,cubic-bezier(.34,1.56,.64,1)), transform var(--nv-dur,260ms) var(--nv-ease,cubic-bezier(.34,1.56,.64,1)) !important; } /* the selected pill lifts as it takes the highlight */ nav[aria-label="Page sections"] .nv-subnav-link--on, main [role="tab"][aria-selected="true"], main [aria-pressed="true"]{ transform: translateY(-1px); } /* dropdowns / mega / popovers travel in, then leave a touch faster */ header[data-surface="nav"] .nv-mega, header[data-surface="nav"] [data-surface="dropdown"]{ transition: opacity calc(var(--nv-dur,260ms) * .7) var(--nv-ease,cubic-bezier(.34,1.56,.64,1)), transform calc(var(--nv-dur,260ms) * .7) var(--nv-ease,cubic-bezier(.34,1.56,.64,1)), visibility calc(var(--nv-dur,260ms) * .7) !important; } header[data-surface="nav"] .nv-mega-item:focus-within .nv-mega, header[data-surface="nav"] .nv-mega-item.nv-open .nv-mega{ transition-duration: var(--nv-dur,260ms) !important; } /* changing page / tab: content rises in rather than fading */ main > .nv-reveal, main > div > section, main [x-show]{ transition: opacity var(--nv-dur,260ms) var(--nv-ease,cubic-bezier(.34,1.56,.64,1)), transform var(--nv-dur,260ms) var(--nv-ease,cubic-bezier(.34,1.56,.64,1)); } @media (prefers-reduced-motion:reduce){ nav[aria-label="Page sections"] .nv-subnav-link, header[data-surface="nav"] .nv-mega, main > .nv-reveal{ transition-duration:.01ms !important; transform:none !important; } } /* ==== PILL CENTRING ==== */ /* The capsule sat off-centre: inline-block children align on the BASELINE, so the highlight rode low against the row. Middle alignment + symmetric padding puts the pill around the label. */ nav[aria-label="Page sections"] .nv-subnav-link, nav[aria-label="Page sections"] .nv-pagetabs a, nav[aria-label="Page sections"] .nv-pagetabs button{ display:inline-flex !important; align-items:center; justify-content:center; vertical-align:middle !important; line-height:1.2 !important; padding:.42rem .82rem !important; min-height:32px; } /* ==== SELECTED LABEL — the one inversion in the chrome ==== */ nav[aria-label="Page sections"] .nv-pagetabs .nv-subnav-link--on, nav[aria-label="Page sections"] .nv-pagetabs .nv-subnav-link--on *, nav[aria-label="Page sections"] .nv-pagetabs a[aria-current], nav[aria-label="Page sections"] .nv-pagetabs a[aria-current] *, nav[aria-label="Page sections"] .nv-pagetabs a.is-active, nav[aria-label="Page sections"] .nv-pagetabs a.is-active *{ color:hsl(var(--pill-ink, var(--nv-chrome-ink))) !important; } /* ==== CAPSULE FORM — proportions, not colour ==== Wider horizontal bearing and a fixed thumb height, so the capsule reads as a segmented-control thumb floating in the bar rather than a tinted word. */ nav[aria-label="Page sections"] .nv-pagetabs .nv-subnav-link, nav[aria-label="Page sections"] .nv-pagetabs a{ padding:0 var(--pill-px,16px) !important; height:var(--pill-h,24px) !important; min-height:var(--pill-h,24px) !important; align-items:center !important; border-radius:999px !important; line-height:1.2 !important; display:inline-flex !important; vertical-align:middle; } /* ==== SECOND MENU (account navbar) ==== Paymenter's own navbar, shown wherever the site chrome is not. It ships bg-background-secondary + border-neutral, both page-derived, so it swung with colour mode. Put it on the same plate/ink and give it the pill treatment. */ body > nav.fixed.top-0, nav.fixed.top-0[class*="bg-background-secondary"]{ background: linear-gradient(180deg, hsl(var(--nv-plate)/var(--nv-plate-a1)), hsl(var(--nv-plate)/var(--nv-plate-a2))) !important; -webkit-backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); border-bottom:0 !important; color:hsl(var(--nv-chrome-ink)) !important; width:calc(100% - 2rem) !important; max-width:1440px !important; margin:var(--nv-nav-top,16px) auto 0 !important; left:0 !important; right:0 !important; border-radius:999px !important; box-shadow: inset 0 1px 0 0 hsl(var(--nv-spec-c)/var(--nv-rim-a)), inset 0 -1px 0 0 hsl(var(--nv-shadow-c)/var(--nv-edge-a)), 0 18px 44px -14px hsl(var(--nv-shadow-c)/var(--nv-glow-a)) !important; } body > nav.fixed.top-0 *, nav.fixed.top-0[class*="bg-background-secondary"] *{ color:hsl(var(--nv-chrome-ink)) !important; border-color:transparent !important; } /* selected item takes the same capsule as the sub-bar */ nav.fixed.top-0 a:not(.nv-brand):hover{ background:hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22) * .5)) !important; border-radius:999px; } /* it is fixed, so the page needs the band back */ body:has(> nav.fixed.top-0){ padding-top:calc(var(--nv-nav-top,16px) + 64px + 12px) !important; } /* ==== SECOND MENU — trim to what these pages actually need ==== The sidebar is the navigation on account pages, so the site menu inside this bar was duplicate weight. Leave the wordmark and the account controls. */ /* the bar carries the account links now, so the menu slot stays visible */ nav.fixed.top-0 > div, nav.fixed.top-0 [class*="container"]{ max-width:none !important; } /* reserve the band however the bar is nested */ body:has(nav.fixed.top-0){ padding-top:calc(var(--nv-nav-top,16px) + 64px + 14px) !important; } /* ==== SIDEBAR PANEL — same plate, same rim, same capsule ==== Ships border-neutral + bg-background-secondary, both page-derived. Floated off the edges so it reads as chrome rather than a wall against the content. */ #main-aside{ background: linear-gradient(180deg, hsl(var(--nv-plate)/var(--nv-plate-a1)), hsl(var(--nv-plate)/var(--nv-plate-a2))) !important; -webkit-backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); border:0 !important; color:hsl(var(--nv-chrome-ink)) !important; border-radius:22px !important; margin-top:0 !important; top:calc(var(--nv-nav-top,16px) + 64px + 14px) !important; left:var(--nv-nav-top,16px) !important; height:calc(100vh - (var(--nv-nav-top,16px) * 2) - 78px) !important; overflow-y:auto; overflow-x:hidden; box-shadow: inset 0 1px 0 0 hsl(var(--nv-spec-c)/var(--nv-rim-a)), inset 0 -1px 0 0 hsl(var(--nv-shadow-c)/var(--nv-edge-a)), 0 18px 44px -14px hsl(var(--nv-shadow-c)/var(--nv-glow-a)) !important; } #main-aside *{ color:hsl(var(--nv-chrome-ink)) !important; } #main-aside hr, #main-aside [class*="border"]{ border-color:hsl(var(--nv-spec-c)/var(--nv-spec-a)) !important; } #main-aside a[aria-current], #main-aside a.is-active, #main-aside [aria-current="page"]{ background:linear-gradient(180deg, hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22) * .72)), hsl(var(--nv-pill-c)/var(--pill-fill,.22))) !important; color:hsl(var(--pill-ink, var(--nv-chrome-ink))) !important; border-radius:999px !important; } #main-aside a:hover{ background:hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22) * .5)) !important; border-radius:999px !important; } /* content clears the floated panel */ [class*="md:ml-64"]{ margin-left:calc(16rem + var(--nv-nav-top,16px) + 10px) !important; } /* ==== CHROME ICONS — follow the ink, including the selected swap ==== */ #main-aside svg, nav.fixed.top-0 svg, header[data-surface="nav"] svg, nav[aria-label="Page sections"] svg{ color:inherit !important; opacity:1 !important; } #main-aside svg[fill]:not([fill="none"]), #main-aside svg *[fill]:not([fill="none"]), nav.fixed.top-0 svg[fill]:not([fill="none"]), nav.fixed.top-0 svg *[fill]:not([fill="none"]), header[data-surface="nav"] svg[fill]:not([fill="none"]), header[data-surface="nav"] svg *[fill]:not([fill="none"]), nav[aria-label="Page sections"] svg[fill]:not([fill="none"]), nav[aria-label="Page sections"] svg *[fill]:not([fill="none"]){ fill:currentColor !important; } #main-aside svg[stroke]:not([stroke="none"]), #main-aside svg *[stroke]:not([stroke="none"]), nav.fixed.top-0 svg[stroke]:not([stroke="none"]), nav.fixed.top-0 svg *[stroke]:not([stroke="none"]), header[data-surface="nav"] svg[stroke]:not([stroke="none"]), header[data-surface="nav"] svg *[stroke]:not([stroke="none"]), nav[aria-label="Page sections"] svg[stroke]:not([stroke="none"]), nav[aria-label="Page sections"] svg *[stroke]:not([stroke="none"]){ stroke:currentColor !important; } /* ==== RETURN TO SITE — the way back out of the account area ==== */ nav.fixed.top-0 a.nv-brand:hover, nav.fixed.top-0 a.nv-brand{ background:none !important; } nav.fixed.top-0 .nv-home-btn{ display:inline-flex !important; align-items:center; gap:.45rem; margin-inline-start:auto; height:var(--pill-h,24px) !important; padding:0 var(--pill-px,16px) !important; border-radius:999px !important; font-size:.8125rem; font-weight:600; white-space:nowrap; color:hsl(var(--pill-ink, var(--nv-chrome-ink))) !important; background:linear-gradient(180deg, hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22) * .72)), hsl(var(--nv-pill-c)/var(--pill-fill,.22))) !important; box-shadow:inset 0 1px 0 hsl(var(--nv-spec-c)/calc(var(--pill-fill,.22) * .9)) !important; transition:background var(--glass-anim-in,260ms) ease; } nav.fixed.top-0 .nv-home-btn:hover{ background:linear-gradient(180deg, hsl(var(--nv-chrome-ink)/calc(var(--pill-fill,.22) * 1.15)), hsl(var(--nv-chrome-ink)/calc(var(--pill-fill,.22) * 1.55))) !important; } /* ==== ACCOUNT COLUMN — centred, no rail ==== */ body:has(nav.fixed.top-0) main > *{ max-width:1180px; margin-inline:auto; width:100%; } body:has(nav.fixed.top-0) main{ padding-inline:1.25rem; } /* ==== ACCOUNT POPOVERS — cart, notifications, account menu ==== These panels ship bg-background-* while sitting inside a bar that sets the chrome ink, so light panel + white text = invisible. Same fix as the public mega: the panel takes the plate, so the one ink reads on it. */ nav.fixed.top-0 [class*="bg-background"], nav.fixed.top-0 [class*="bg-white"], nav.fixed.top-0 [role="menu"], nav.fixed.top-0 [data-surface="dropdown"]{ background: linear-gradient(180deg, hsl(var(--nv-plate)/var(--nv-plate-a1)), hsl(var(--nv-plate)/var(--nv-plate-a2))) !important; -webkit-backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); border-color:hsl(var(--nv-spec-c)/var(--nv-spec-a)) !important; border-radius:16px !important; box-shadow: inset 0 1px 0 0 hsl(var(--nv-spec-c)/calc(var(--nv-rim-a) * .7)), inset 0 -1px 0 0 hsl(var(--nv-shadow-c)/var(--nv-edge-a)), 0 18px 44px -14px hsl(var(--nv-shadow-c)/var(--nv-glow-a)) !important; } /* hairlines and hover grounds inside them follow the chrome, not the page */ nav.fixed.top-0 [class*="bg-background"] [class*="border"], nav.fixed.top-0 [role="menu"] [class*="border"]{ border-color:hsl(var(--nv-spec-c)/var(--nv-spec-a)) !important; } nav.fixed.top-0 [class*="bg-background"] a:hover, nav.fixed.top-0 [role="menu"] a:hover{ background:hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22) * .5)) !important; } /* the unread dot is a signal, not chrome — leave it its own colour */ nav.fixed.top-0 [class*="bg-red"], nav.fixed.top-0 [class*="bg-danger"], nav.fixed.top-0 [class*="bg-primary"]{ background:revert !important; color:#fff !important; } /* ==== ACCOUNT COLUMN CLEARANCE ==== Same variables the public pages clear the bar with, so one change moves both. */ .nv-acct-col{ padding-top:calc(var(--nv-nav-gap,16px) + var(--nv-pill-h,56px) + 28px) !important; } /* ==== HEADER POPOVERS — cart + account card on the source tokens ==== These panels ship bg-background-*, so they followed the page instead of the chrome and flipped with colour mode. Same treatment the mega already gets. */ header[data-surface="nav"] [class*="bg-background"], header[data-surface="nav"] [class*="bg-white"], header[data-surface="nav"] [role="menu"]{ background: linear-gradient(180deg, hsl(var(--nv-plate)/var(--nv-plate-a1)), hsl(var(--nv-plate)/var(--nv-plate-a2))) !important; -webkit-backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); border-color:hsl(var(--nv-spec-c)/var(--nv-spec-a)) !important; color:hsl(var(--nv-chrome-ink)) !important; } header[data-surface="nav"] [class*="bg-background"] *, header[data-surface="nav"] [role="menu"] *{ color:hsl(var(--nv-chrome-ink)) !important; } /* the account card hangs off a full-width ancestor; pull it back inside the pill */ /* ==== CART PANEL — same plate, anchor and gap as the account card ==== Its background/border/position ship as an INLINE style attribute, so class rules never reached it and it tracked --c-surface-2 through the mode toggle. Overridden here, and hung off the cart icon like the account card. */ header[data-surface="nav"] .nv-cart-pop{ background: linear-gradient(180deg, hsl(var(--nv-plate)/var(--nv-plate-a1)), hsl(var(--nv-plate)/var(--nv-plate-a2))) !important; -webkit-backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); backdrop-filter:blur(var(--nv-plate-blur)) saturate(var(--nv-plate-sat)); border-color:hsl(var(--nv-spec-c)/var(--nv-spec-a)) !important; color:hsl(var(--nv-chrome-ink)) !important; left:50% !important; right:auto !important; transform:translateX(var(--nv-cart-x, -100%)) !important; top:calc((var(--nv-nav-h) + 100%) / 2 + var(--nv-panel-gap)) !important; box-shadow: inset 0 1px 0 0 hsl(var(--nv-spec-c)/var(--nv-rim-a)), inset 0 -1px 0 0 hsl(var(--nv-shadow-c)/var(--nv-edge-a)), 0 18px 44px -14px hsl(var(--nv-shadow-c)/var(--nv-glow-a)) !important; } header[data-surface="nav"] .nv-cart-pop *{ color:hsl(var(--nv-chrome-ink)) !important; } header[data-surface="nav"] .nv-cart-pop [style*="border"]{ border-color:hsl(var(--nv-spec-c)/var(--nv-spec-a)) !important; } /* ==== SEARCH PANEL — its own anchor ==== It shares [data-surface="dropdown"] with the account card, so it inherited that card's anchor. Told apart by what it contains rather than by adding a class, and it keeps the shared plate and gap. */ header[data-surface="nav"] [data-surface="dropdown"]:has(input[type="search"]){ transform:translateX(var(--nv-search-x, -50%)) !important; } /* ==== ICON BUTTON GROUND — search, cart, mode toggle ==== These ship hover:bg-surface-2, a light PAGE surface, so a white icon sat on a near-white disc and vanished. The disc reads off the plate instead. */ header[data-surface="nav"] button[class*="rounded-full"]:hover, header[data-surface="nav"] button[class*="rounded-lg"]:hover, header[data-surface="nav"] [class*="hover:bg-surface"]:hover, header[data-surface="nav"] [class*="hover:bg-neutral"]:hover, header[data-surface="nav"] button[aria-expanded="true"], header[data-surface="nav"] .nv-cart-pop ~ *:hover{ background:linear-gradient(180deg, hsl(var(--nv-pill-c)/calc(var(--pill-fill,.22) * .72)), hsl(var(--nv-pill-c)/var(--pill-fill,.22))) !important; border-radius:999px !important; } /* ==== CHROME TYPE — one scale everywhere ==== Menu, mega, sub-bar, dropdowns and the account card drew their size, weight, tracking and opacity from whatever markup they happened to carry, so some read lighter than others. All of it now comes off the same tokens. */ header[data-surface="nav"] a, header[data-surface="nav"] button, header[data-surface="nav"] .nv-mega-link, header[data-surface="nav"] [data-surface="dropdown"] a, header[data-surface="nav"] .nv-acct-pop a, nav[aria-label="Page sections"] .nv-subnav-link{ font-size:var(--nv-type-size) !important; font-weight:var(--nv-type-weight) !important; letter-spacing:var(--nv-type-track) !important; } header[data-surface="nav"] .nv-mega-group-head, header[data-surface="nav"] .nv-mega [class*="eyebrow"], header[data-surface="nav"] [data-surface="dropdown"] [class*="text-xs"]{ font-size:var(--nv-label-size) !important; font-weight:var(--nv-label-weight) !important; letter-spacing:var(--nv-label-track) !important; opacity:var(--nv-label-op) !important; } /* ==== MEGA — wider, groups in two columns ==== */ header[data-surface="nav"] .nv-mega .container{ max-width:1240px !important; } header[data-surface="nav"] .nv-mega div:has(> div > .nv-mega-group-head){ display:grid !important; grid-template-columns:repeat(2, minmax(180px, 1fr)); gap:var(--nv-mega-gap-y) var(--nv-mega-gap-x); width:auto !important; flex:1 1 auto; } /* ==== MEGA SPACING + FEATURED CARD ==== */ header[data-surface="nav"] .nv-mega .container{ padding:var(--nv-mega-pad) !important; } header[data-surface="nav"] .nv-mega-link{ display:block; padding-block:calc(var(--nv-mega-gap-y) * .5); } header[data-surface="nav"] .nv-mega-group-head{ margin-bottom:var(--nv-mega-head-gap) !important; } /* ==== FEATURED COLUMN — stop it overflowing the row ==== The card's column is `w-64 shrink-0`: a fixed 256px that cannot give, so once the group columns took their share it ran 36px past the row and sat on the panel's right edge. Let it shrink and it lands inside the panel's own inset. */ header[data-surface="nav"] .nv-mega [class*="gap-10"] > :last-child, header[data-surface="nav"] .nv-mega [class*="gap-16"] > :last-child{ flex:0 1 auto !important; min-width:0 !important; } /* ==== BLOCK GLASS ==== Opt-in per block via the Glass field (data-glass on the wrapper). Blocks consume the SAME surface tokens as everything else — no new tokens here. Unlike the chrome, block glass FOLLOWS the page: these are content surfaces and should read with the page's colour mode. Prose and full-bleed media are deliberately absent. Glass behind body copy is what got the 2026-08-08 overhaul reverted. See reference/DESIGN.md. Keyed on data-block, so no block view is edited. */ [data-glass="subtle"][data-block][data-block="cause_cards"] article, [data-glass="subtle"][data-block][data-block="tile_grid"] .nv-tile.nv-tile, [data-glass="subtle"][data-block][data-block="stats"] .grid > div, [data-glass="subtle"][data-block][data-block="steps"] ol > li, [data-glass="subtle"][data-block][data-block="spec_table"] .nv-spec4__card.nv-spec4__card, [data-glass="subtle"][data-block][data-block="spotlight_bento"] .nv-spb__tile.nv-spb__tile, [data-glass="subtle"][data-block][data-block="download_center"] .nv-dl__tile.nv-dl__tile, [data-glass="subtle"][data-block][data-block="support_search"] .nv-ss__chip.nv-ss__chip, [data-glass="subtle"][data-block][data-block="uptime"] .nv-uptime.nv-uptime{ background:hsl(var(--c-surface)/max(var(--glass-floor,.58), var(--glass-opacity,.62))) !important; -webkit-backdrop-filter:blur(calc(var(--glass-blur,26px) * .6)) saturate(var(--glass-saturate,190%)); backdrop-filter:blur(calc(var(--glass-blur,26px) * .6)) saturate(var(--glass-saturate,190%)); border:1px solid hsl(var(--c-border)) !important; border-radius:var(--r-card,16px); box-shadow: inset 0 1px 0 0 hsl(0 0% 100%/var(--glass-light,.88)), inset 0 -1px 0 0 hsl(225 42% 18%/var(--glass-edge,.36)), 0 14px 34px -16px hsl(var(--nv-shadow-c,220 45% 4%)/var(--glass-glow,.45)); } [data-glass="full"][data-block][data-block="cause_cards"] article, [data-glass="full"][data-block][data-block="tile_grid"] .nv-tile.nv-tile, [data-glass="full"][data-block][data-block="stats"] .grid > div, [data-glass="full"][data-block][data-block="steps"] ol > li, [data-glass="full"][data-block][data-block="spec_table"] .nv-spec4__card.nv-spec4__card, [data-glass="full"][data-block][data-block="spotlight_bento"] .nv-spb__tile.nv-spb__tile, [data-glass="full"][data-block][data-block="download_center"] .nv-dl__tile.nv-dl__tile, [data-glass="full"][data-block][data-block="support_search"] .nv-ss__chip.nv-ss__chip, [data-glass="full"][data-block][data-block="uptime"] .nv-uptime.nv-uptime{ background:hsl(var(--c-surface)/max(var(--glass-floor,.58), calc(var(--glass-opacity,.62) * .8))) !important; -webkit-backdrop-filter:blur(var(--glass-blur,26px)) saturate(var(--glass-saturate,190%)); backdrop-filter:blur(var(--glass-blur,26px)) saturate(var(--glass-saturate,190%)); border:1px solid hsl(var(--c-border)) !important; border-radius:var(--r-card,16px); box-shadow: inset 0 1px 0 0 hsl(0 0% 100%/var(--glass-light,.88)), inset 0 -1px 0 0 hsl(225 42% 18%/var(--glass-edge,.36)), 0 22px 52px -18px hsl(var(--nv-shadow-c,220 45% 4%)/var(--glass-glow,.45)); } /* ==== REGION-AWARE INK — bar stays CLEAR; the LETTERS carry the contrast ==== */ /* White ink over media/dark (bright hero, dark sections). Over a flat-LIGHT page JS adds .nv-chrome-scrim and the ink flips to the page text colour so it reads on white — no bar tint/scrim. `color` transitions => smooth fade. Default .nv-chrome-scrim is ON (header markup) so text is dark-on-white before JS runs. */ header[data-surface="nav"] .container a, header[data-surface="nav"] .container span, header[data-surface="nav"] .container button, header[data-surface="nav"] .container svg, header[data-surface="nav"] .nv-mega a, header[data-surface="nav"] .nv-mega span, header[data-surface="nav"] .nv-mega p, header[data-surface="nav"] .nv-mega svg, header[data-surface="nav"] .nv-m-drawer a, header[data-surface="nav"] .nv-m-drawer span, header[data-surface="nav"] .nv-m-drawer summary, header[data-surface="nav"] .nv-m-drawer svg, header[data-surface="nav"] .nv-hdr-acct, header[data-surface="nav"] .nv-hdr-acct svg { transition: color .34s ease, text-shadow .34s ease; } /* base (over media/dark): a faint dark edge so white letters read on bright sky */ header[data-surface="nav"] .container a, header[data-surface="nav"] .container span, header[data-surface="nav"] .container > a, header[data-surface="nav"] .nv-mega a, header[data-surface="nav"] .nv-mega span, header[data-surface="nav"] .nv-mega p, header[data-surface="nav"] .nv-mega .nv-mega-group-head, header[data-surface="nav"] .nv-m-drawer a, header[data-surface="nav"] .nv-m-drawer span, header[data-surface="nav"] .nv-m-drawer summary { text-shadow: 0 1px 2px hsl(220 45% 6% / .35); } /* over flat-light: ink -> page text colour (dark in light mode) + drop the edge */ header[data-surface="nav"].nv-chrome-scrim, nav[aria-label="Page sections"].nv-chrome-scrim, nav[aria-label="Section pages"].nv-chrome-scrim { --nv-chrome-ink: var(--c-text); --pill-ink: var(--c-text); } header[data-surface="nav"].nv-chrome-scrim .container a, header[data-surface="nav"].nv-chrome-scrim .container span, header[data-surface="nav"].nv-chrome-scrim .container > a, header[data-surface="nav"].nv-chrome-scrim .nv-mega a, header[data-surface="nav"].nv-chrome-scrim .nv-mega span, header[data-surface="nav"].nv-chrome-scrim .nv-mega p, header[data-surface="nav"].nv-chrome-scrim .nv-mega .nv-mega-group-head, header[data-surface="nav"].nv-chrome-scrim .nv-m-drawer a, header[data-surface="nav"].nv-chrome-scrim .nv-m-drawer span, header[data-surface="nav"].nv-chrome-scrim .nv-m-drawer summary { text-shadow: none; } header[data-surface="nav"] .nv-hdr-acct { color: hsl(var(--nv-chrome-ink)) !important; } /* ==== CHROME-GROUND BAND REMOVED ==== The chrome is transparent now, so the --c-bg top band behind the menu (the 'CHROME GROUND' + scrim ::after on the first section) just read as a glow under the bar. Neutralised. Bottom hero-foot fade is untouched. */ main > div:first-of-type > section:first-of-type::after, main > section:first-of-type::after{ background:none !important; } /* ==== NAV NOISE BARS FIX ==== The full-width header noise ::before shows only on the SIDES of the centered pill (pill covers the middle) -> two faint vertical 'bars' flanking the menu over a varied background. The pill doesn't use it, so drop it on the header. */ header[data-surface="nav"]::before{ display:none !important; } /* ==== FORM-FACTOR GLASS PARITY (tablet/mobile popovers) ==== */ /* Search panel was centred on its button (translateX(-50%)) -> overflowed the viewport when the button sits near the right edge (tablet). Right-align + clamp. */ header[data-surface="nav"] [data-surface="dropdown"]:has(input[type="search"]){ left:auto !important; right:0 !important; transform:none !important; max-width:min(24rem, calc(100vw - 1.5rem)) !important; } /* Sign-in popover was OPAQUE and inherited the bar's white ink -> white-on-white in light mode. Join the glass as a legible FROSTED card that reads the source tokens (mode-adaptive) with token-coloured form fields. */ header[data-surface="nav"] .nv-acct-pop{ background: hsl(var(--c-surface) / .80) !important; -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); border:0 !important; box-shadow: 0 0 0 1px hsl(var(--c-border)/.6), 0 26px 60px -18px hsl(var(--nv-shadow-c)/.5) !important; color: hsl(var(--c-text)) !important; } header[data-surface="nav"] .nv-acct-pop .nv-acct-pop__h, header[data-surface="nav"] .nv-acct-pop label, header[data-surface="nav"] .nv-acct-pop p, header[data-surface="nav"] .nv-acct-pop span{ color: hsl(var(--c-text)) !important; } header[data-surface="nav"] .nv-acct-pop input, header[data-surface="nav"] .nv-acct-pop input:-webkit-autofill{ background: hsl(var(--c-surface)) !important; color: hsl(var(--c-text)) !important; -webkit-text-fill-color: hsl(var(--c-text)) !important; border:1px solid hsl(var(--c-border)) !important; } header[data-surface="nav"] .nv-acct-pop input::placeholder{ color: hsl(var(--c-text-muted)) !important; } /* ==== PARITY-SIGNIN-BTN ==== sign-in submit + links token-driven (were white-on-white in light) */ header[data-surface="nav"] .nv-acct-pop form button, header[data-surface="nav"] .nv-acct-pop button[type="submit"]{ background: hsl(var(--c-primary)) !important; color: hsl(var(--c-on-primary)) !important; -webkit-text-fill-color: hsl(var(--c-on-primary)) !important; border:0 !important; } header[data-surface="nav"] .nv-acct-pop a{ color: hsl(var(--c-primary)) !important; -webkit-text-fill-color: hsl(var(--c-primary)) !important; } /* ==== ACCT-CART-PARITY-V2 — sign-in card uses the SAME glass as the menu ==== */ header[data-surface="nav"] .nv-acct-pop{ background: radial-gradient(90% 60% at 15% -10%, hsl(0 0% 100% / var(--nv-sheen-a,.08)), transparent 60%), linear-gradient(180deg, hsl(var(--nv-plate)/var(--nv-plate-a1)), hsl(var(--nv-plate)/var(--nv-plate-a2))) !important; -webkit-backdrop-filter: blur(calc(var(--glass-blur,20px)*2.4)) saturate(var(--glass-saturate,140%)) !important; backdrop-filter: blur(calc(var(--glass-blur,20px)*2.4)) saturate(var(--glass-saturate,140%)) !important; border-radius:20px !important; color: hsl(var(--nv-chrome-ink)) !important; } header[data-surface="nav"] .nv-acct-pop .nv-acct-pop__h, header[data-surface="nav"] .nv-acct-pop label, header[data-surface="nav"] .nv-acct-pop p, header[data-surface="nav"] .nv-acct-pop span:not(a):not(button){ color: hsl(var(--nv-chrome-ink)) !important; text-shadow: 0 1px 2px hsl(220 45% 6% / .40); } /* cart panel: clamp to viewport (same tablet overflow as search) */ header[data-surface="nav"] .nv-cart-pop{ left:auto !important; right:0 !important; transform:none !important; max-width:min(20rem, calc(100vw - 1.5rem)) !important; } /* ==== DRAWER-ITEM-HIGHLIGHT — account links + logout get the same capsule hover as nav items ==== */ header[data-surface="nav"] .nv-m-drawer a:not(.nv-btn):hover, header[data-surface="nav"] .nv-m-drawer button:not([type="submit"]):hover, header[data-surface="nav"] .nv-m-drawer [wire\:click]:hover{ background: var(--nv-hl-g) !important; border-radius: 10px !important; } /* ==== SHARED SIGN-IN WIDGET position (dropdown on desktop, centred sheet on mobile) ==== */ header[data-surface="nav"] .nv-login-shared{ position: fixed !important; z-index: 90 !important; top: calc(var(--nv-nav-gap, 16px) + 56px + 10px) !important; left: var(--nv-login-cx, auto) !important; right: var(--nv-login-r, 1.25rem) !important; transform: var(--nv-login-tf, none) !important; width: min(20rem, calc(100vw - 1.5rem)) !important; max-width: calc(100vw - 1.5rem) !important; } @media (max-width: 1023.98px){ header[data-surface="nav"] .nv-login-shared{ left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } } /* ==== TABLET-NARROW-FIT — shave the last px at 1024-1149 so the account icon fits ==== */ @media (min-width:1024px) and (max-width:1149.98px){ header[data-surface="nav"] .nv-hdr-acct{ width:32px !important; height:32px !important; } header[data-surface="nav"] > .container{ padding-right:2px !important; } header[data-surface="nav"] .nv-hdr-extras{ margin-left:0 !important; gap:0 !important; } } /* ==== LOGIN-CARD-FIT — the embedded auth.login is a FULL-PAGE form (bg-primary-800 dark plate, my-14 giant margins, xl:max-w-[40%] squeeze, its own logo + duplicate title). Strip that page chrome so it reads as a compact form on the glass popover. ==== */ header[data-surface="nav"] .nv-acct-pop #login{ background: transparent !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; gap: .7rem !important; border-radius: 0 !important; } /* redundant logo + duplicate "Sign in" heading (we already show .nv-acct-pop__h) */ header[data-surface="nav"] .nv-acct-pop #login > .flex:first-child{ display: none !important; } /* tighten the remember/forgot row + register footer spacing inside the popover */ header[data-surface="nav"] .nv-acct-pop #login .mt-6, header[data-surface="nav"] .nv-acct-pop #login .my-14{ margin-top:.25rem !important; margin-bottom:.25rem !important; } /* ==== LOGIN-POINTER-EVENTS — the sign-in widget + its backdrop are direct children of
(which is pointer-events:none so the transparent bar doesn't block the page); only header>.container is re-enabled, so these must opt back in explicitly. ==== */ header[data-surface="nav"] .nv-login-shared, header[data-surface="nav"] .nv-login-shared *{ pointer-events:auto !important; } /* ==== SEARCH-ICON-CLEARANCE — the search input's !important padding (line ~202) wiped the left inset that made room for the absolute magnifier icon, so the placeholder ran under it. Restore left clearance on the popover search only (the one carrying the icon). ==== */ header[data-surface="nav"] [data-surface="dropdown"] input[type="search"]{ padding-left:2.1rem !important; } /* ==== ACCOUNT-ICON-PARITY — the account trigger reads the SAME source-of-truth chrome tokens as search / cart / mode: transparent ground, --nv-chrome-ink glyph, and the shared --nv-pill-c / --pill-fill hover capsule. Logged-in avatar disc is flattened to match. ==== */ /* hover capsule for BOTH the logged-out link and the logged-in