/* ============================================================
Alpha — LIQUID GLASS LAYER
Scope: navigation + hero + opt-in JS glass effects.
Per Design System §07 Nav, §08 Nav-over-hero pattern,
§06 Corner concentricity, §06 Chromatic fringe discipline.
Content cards are SOLID (see page CSS files) — never glass.
Advanced JS effects (refract / specular / tilt) are opt-in
via .lg-refract-active on nav, hero-badge, and FAB only.
============================================================ */
/* ------------------------------------------------------------
SVG refraction filter container — injected by liquid-glass.js.
Hidden from layout.
------------------------------------------------------------ */
.lg-filter-host {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
visibility: hidden;
}
/* Displacement lens is wired at the bottom of this file to win
specificity against .hero-badge / .btn-nav-cta / .scroll-to-top. */
/* ------------------------------------------------------------
NAV — floating pill, inset from edges, max 1280px centered.
At rest: transparent (over blue hero on pages where applicable).
On scroll > 10px: glass fill + border + shadow.
On product-detail pages (): starts
in glass state at rest (hero is light, not blue).
------------------------------------------------------------ */
.nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
max-width: none;
margin: 0;
min-height: var(--nav-height);
/* Keynote: flush full-width bar. Content is centred to --nav-max WITHOUT an
inner wrapper (the markup has none) by absorbing the leftover width into
the inline padding — so this needed no HTML change on any of the 25 pages. */
padding-block: 0;
padding-inline: max(var(--space-page-x), calc((100% - var(--nav-max)) / 2));
z-index: var(--nav-z);
/* Always establish a containing block so the fixed mobile drawer
positions relative to the nav on EVERY page. Without this, the nav
is only a containing block when its backdrop-filter is active
(always on pd-page, only-when-scrolled on the home hero), which made
the drawer full-width on the home hero but inset on product pages. */
transform: translateZ(0);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
/* Always filled and blurred, like Apple's bar — it no longer fades out over
the hero, which is what made the old pill read as a separate object. */
border-radius: 0;
background: var(--nav-bg);
-webkit-backdrop-filter: var(--glass-blur-nav);
backdrop-filter: var(--glass-blur-nav);
border: 0;
border-bottom: var(--nav-hairline) solid var(--nav-border);
box-shadow: none;
transition: background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
/* The scrolled + product-page states no longer change the fill (the bar is
always filled now); they only deepen the hairline slightly so the bar still
reads as "attached" once content passes under it. */
.nav.scrolled,
body.pd-page .nav {
border-bottom-color: var(--nav-border-strong);
}
/* ----- Inverted: over a Keynote black section ----- */
.nav.is-invert {
background: var(--nav-bg-invert);
border-bottom-color: var(--nav-border-invert);
color: var(--text-on-invert);
}
.nav.is-invert .nav-links a { color: var(--text-on-invert); }
/* No filter. The mark is gradient-filled, and brightness(0) invert(1) would
flatten it to a shapeless white silhouette. Verified 2026-08-10: the
coloured mark reads cleanly on black and keeps its interlace, so the
inverted nav needs no swap at all. */
.nav.is-invert .mobile-toggle span { background: var(--text-on-invert); }
/* ----- Logo ----- */
.nav-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.nav-logo-img {
height: var(--nav-logo-h);
width: auto;
/* Brand colour by default now: the bar is always light, so the old
white-over-blue-hero inversion no longer applies. */
filter: none;
transition: filter var(--dur) var(--ease);
}
/* ----- Links ----- */
.nav-links {
display: flex;
align-items: center;
gap: 1.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.nav-links a:not(.btn-nav-cta) {
font-family: var(--font-sans);
font-size: var(--nav-link-size);
font-weight: 500;
color: var(--color-text-body);
text-decoration: none;
padding: 0.5rem 0;
text-shadow: 0 0 0 transparent;
transition: color var(--dur) var(--ease),
text-shadow var(--dur) var(--ease);
}
/* One hover treatment now — the bar no longer changes ground under the links.
Colour rather than glow: a text-shadow glow on a solid bar reads as a smudge. */
.nav-links a:not(.btn-nav-cta):hover {
color: var(--color-link);
}
.nav.is-invert .nav-links a:not(.btn-nav-cta):hover {
color: var(--color-white);
}
/* Desktop: roomier padding + link spacing to match the larger
--nav-height / --nav-logo-h / --nav-link-size desktop tokens
(see tokens.css DESKTOP NAV SCALE). Mobile keeps the tight pill.
Must come AFTER the base .nav / .nav-links rules to win the cascade. */
@media (min-width: 769px) {
/* Do NOT re-set the `padding` shorthand here — it would clobber the
padding-inline centring on the base rule. Only the link rhythm changes. */
.nav-links {
gap: 1.85rem;
}
}
/* ----- Call CTA — glass pill at rest, solid blue on scroll ----- */
.btn-nav-cta {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 1rem;
min-height: 40px;
border-radius: var(--r-pill);
font-family: var(--font-sans);
font-size: var(--text-body-sm);
font-weight: 600;
text-decoration: none;
background: var(--glass-hero-pill);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-white-border);
color: var(--color-white);
box-shadow: var(--shadow-1);
transition: background var(--dur) var(--ease),
color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.btn-nav-cta:hover {
background: var(--glass-white-hover-bg);
border-color: var(--glass-white-hover-border);
}
.btn-nav-cta svg {
width: var(--icon-xs);
height: var(--icon-xs);
}
.nav.scrolled .btn-nav-cta,
body.pd-page .nav .btn-nav-cta {
background: var(--color-primary);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-color: var(--color-primary);
color: var(--color-white);
box-shadow: var(--shadow-primary);
}
.nav.scrolled .btn-nav-cta:hover,
body.pd-page .nav .btn-nav-cta:hover {
background: var(--color-primary-deep);
border-color: var(--color-primary-deep);
}
/* ----- Mobile toggle ----- */
.mobile-toggle {
display: none;
width: 44px;
height: 44px;
background: transparent;
border: none;
cursor: pointer;
padding: 10px;
flex-direction: column;
gap: 5px;
align-items: center;
justify-content: center;
}
.mobile-toggle span {
display: block;
width: 20px !important;
height: 2px !important;
background: var(--text-primary);
border-radius: var(--r-hairline);
flex: 0 0 2px;
margin: 0 !important;
transition: background var(--dur) var(--ease),
transform var(--dur) var(--ease),
opacity var(--dur) var(--ease);
}
/* The middle bar collapses faster than the outer bars rotate, so the
hamburger→X morph never momentarily shows all three bars crossed
(which reads as an asterisk). */
.mobile-toggle span:nth-child(2) {
transition: opacity 0.12s var(--ease), transform 0.12s var(--ease);
}
.nav.scrolled .mobile-toggle span,
body.pd-page .nav .mobile-toggle span {
background: var(--text-primary);
}
/* ============================================================
THEME TOGGLE — small glass button in the nav.
Sun shows in dark mode (offers light); moon in light mode.
Inherits nav text color so it tracks scrolled / hero state.
============================================================ */
.theme-toggle {
width: 36px;
height: 36px;
border-radius: var(--r-pill);
background: transparent;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-white);
padding: 0;
margin-right: 0.25rem;
transition: background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
flex-shrink: 0;
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.22);
}
.theme-toggle:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* On scrolled nav (frosted) and product-detail pages where nav is over a
light hero, switch the icon color to ink so it stays readable. */
.nav.scrolled .theme-toggle,
body.pd-page .nav .theme-toggle {
color: var(--text-primary);
}
.nav.scrolled .theme-toggle:hover,
body.pd-page .nav .theme-toggle:hover {
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.10);
}
/* Icon visibility: show moon by default (light mode), sun in dark mode. */
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
:root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}
/* Open hamburger morph — outer bars converge + rotate into an X; the
middle bar fades AND collapses to zero width so it clears out cleanly. */
.nav .mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav .mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav .mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ------------------------------------------------------------
MOBILE — pill stays tighter, links drop into glass drawer
------------------------------------------------------------ */
@media (max-width: 768px) {
.nav {
top: 0;
left: 0;
right: 0;
padding-inline: var(--space-page-x-sm);
}
.mobile-toggle { display: inline-flex; }
/* Hide inline link list; drawer shows on toggle.
Glass drawer with icon-prefixed rows + active/hover states. */
.nav-links {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
z-index: calc(var(--nav-z) + 10); /* Above sticky filter bars etc. */
flex-direction: column;
align-items: stretch;
/* No inter-row gap: the row separators are the li border-tops, and a gap
here left the highlight pill floating short of the separator below it. */
gap: 0;
padding: 0.4rem;
border-radius: var(--r-sheet);
background: var(--lg-nav-mobile);
-webkit-backdrop-filter: blur(28px) saturate(200%);
backdrop-filter: blur(28px) saturate(200%);
border-top: var(--glass-edge-top-bright);
border-left: var(--glass-edge-left);
border-right: var(--glass-edge-right);
border-bottom: var(--hairline);
box-shadow: var(--shadow-mobile-drawer);
opacity: 0;
transform: translateY(-10px) scale(0.97);
transform-origin: top right;
pointer-events: none;
transition: opacity var(--dur) var(--ease),
transform var(--dur) var(--ease-spring);
}
.nav-links.open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Drawer rows — roomy touch targets, icon prefix, hover pill */
.nav-links li {
width: 100%;
position: relative;
}
.nav-links li + li {
border-top: var(--hairline);
}
/* :not(.btn-nav-cta) needed to out-specify the desktop base rule
`.nav-links a:not(.btn-nav-cta)` (line ~107), which otherwise leaks
its 0.5rem 0 padding + font-size into the mobile drawer rows. */
.nav-links li a:not(.btn-nav-cta) {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.7rem 1.35rem;
border-radius: calc(var(--r-sheet) - 10px);
color: var(--text-primary) !important;
font-size: var(--text-body);
font-weight: 500;
letter-spacing: -0.005em;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
position: relative;
}
/* Icon via ::before — matched by href ending */
.nav-links li a::before {
content: '';
flex-shrink: 0;
width: 22px;
height: 22px;
background-color: var(--color-primary);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: background-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.nav-links li a[href*="index.html"]::before,
.nav-links li a[href="./"]::before,
.nav-links li a[href="../"]::before,
.nav-links li a[href="/"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.nav-links li a[href*="products.html"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.nav-links li a[href*="promotions.html"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.nav-links li a[href*="about.html"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.nav-links li a[href*="contact.html"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Active hover — tinted pill bg + icon/text brand blue + nudge */
.nav-links li a:hover,
.nav-links li a:active,
.nav-links li a:focus-visible {
background: var(--color-primary-tint-soft);
color: var(--color-primary-deep) !important;
}
.nav-links li a:hover::before,
.nav-links li a:active::before,
.nav-links li a:focus-visible::before {
transform: scale(1.08);
}
/* Chevron hint on the right of each row */
.nav-links li a::after {
content: '';
margin-left: auto;
width: 16px;
height: 16px;
background-color: var(--text-faint);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: transform var(--dur-fast) var(--ease),
background-color var(--dur-fast) var(--ease);
}
.nav-links li a:hover::after,
.nav-links li a:active::after,
.nav-links li a:focus-visible::after {
background-color: var(--color-primary);
transform: translateX(3px);
}
}
/* ------------------------------------------------------------
HERO — blue gradient base (home + inner pages).
------------------------------------------------------------ */
.hero,
.page-hero,
.about-hero,
.products-hero,
.contact-hero,
.legal-hero,
.blog-hero,
.promo-hero {
position: relative;
overflow: hidden;
background: var(--hero-gradient);
color: var(--color-white);
padding: var(--hero-pad-top) var(--page-x) var(--hero-pad-bottom);
min-height: var(--hero-min-height);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.hero { min-height: 100vh; }
/* Hero h1 sizing — single source of truth.
Home hero uses display scale; all internal page heros use h1 scale. */
.hero h1 {
font-size: var(--text-display);
margin-bottom: var(--space-sm);
}
.page-hero h1,
.about-hero h1,
.products-hero h1,
.contact-hero h1,
.legal-hero h1,
.blog-hero h1,
.promo-hero h1 {
font-size: var(--text-h1);
margin-bottom: var(--space-sm);
}
/* Hero text colors — override legacy page CSS */
.hero h1,
.page-hero h1,
.about-hero h1,
.products-hero h1,
.contact-hero h1,
.legal-hero h1,
.blog-hero h1,
.promo-hero h1,
.hero h2,
.page-hero h2 {
color: var(--lg-hero-text) !important;
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: -0.02em;
line-height: var(--lh-hero);
text-wrap: balance;
opacity: 1 !important;
}
.hero p,
.hero-sub,
.about-hero-sub,
.contact-hero-sub,
.legal-hero-sub,
.legal-hero-date,
.blog-hero-sub,
.promo-hero-sub,
.page-hero p,
.page-hero .section-subtitle,
.hero .hero-badge,
.page-hero .hero-badge,
.about-hero .hero-badge,
.products-hero .hero-badge,
.contact-hero .hero-badge,
.legal-hero .hero-badge,
.blog-hero .hero-badge,
.promo-hero .hero-badge,
.hero-stat,
.hero-buttons,
.hero-stats,
.hero-content,
.page-hero-content,
.about-hero-content,
.contact-hero-content,
.legal-hero-content,
.blog-hero-content,
.promo-hero-content {
opacity: 1 !important;
}
.hero p,
.hero-sub,
.about-hero-sub,
.contact-hero-sub,
.legal-hero-sub,
.legal-hero-date,
.blog-hero-sub,
.promo-hero-sub,
.page-hero p,
.page-hero .section-subtitle {
color: var(--lg-hero-text-sub) !important;
text-wrap: pretty;
}
/* Hero em accent */
.hero h1 em,
.page-hero h1 em {
font-style: normal;
color: var(--lg-hero-text-sub);
position: relative;
display: inline-block;
}
@media (max-width: 768px) {
.hero,
.page-hero,
.about-hero,
.products-hero,
.contact-hero,
.legal-hero,
.blog-hero,
.promo-hero {
padding: var(--hero-pad-top-m) var(--page-x-m) var(--hero-pad-bottom-m);
min-height: var(--hero-min-height-m);
}
}
/* ------------------------------------------------------------
HERO BADGES — real glass over blue hero.
α 0.22 + blur + bright top edge = iOS-style pill that
clearly reads as translucent material.
------------------------------------------------------------ */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-family: var(--font-sans);
font-size: var(--text-body-sm);
font-weight: 500;
color: var(--kn-badge-text);
border-radius: var(--r-pill);
background: var(--kn-badge-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
/* Curved-glass edge: bright inset top + dark inset bottom + atmospheric
outer shadow. No flat 1px border — that's the hairline-outline tell. */
border: none;
box-shadow: var(--shadow-glass-pill);
}
.hero-badge svg {
width: var(--icon-xs);
height: var(--icon-xs);
}
/* ------------------------------------------------------------
HERO WAVE DIVIDER — water drift, bottom of hero only.
------------------------------------------------------------ */
.hero-waves {
position: absolute;
bottom: -2px;
left: 0;
width: 200%;
height: 120px;
pointer-events: none;
z-index: var(--z-base);
}
.hero-waves svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-wave-1 { opacity: 0.15; animation: wave-drift var(--anim-wave-short) ease-in-out infinite alternate; }
.hero-wave-2 { opacity: 0.10; animation: wave-drift var(--anim-wave-long) ease-in-out infinite alternate-reverse; }
.hero-wave-3 { opacity: 0.06; animation: wave-drift var(--anim-wave-med) ease-in-out 1s infinite alternate; }
@keyframes wave-drift {
from { transform: translateX(0); }
to { transform: translateX(-25%); }
}
/* ------------------------------------------------------------
CTA BAND — Keynote: the black stage, matching the home page.
Was --hero-gradient (blue). This rule sits in liquid-glass.css and
was overriding the .cta rule in global.css, which is why repointing
that one alone changed nothing.
------------------------------------------------------------ */
.cta,
.cta-section,
.pd-pricing {
background: var(--surface-invert);
color: var(--text-on-invert);
}
.pd-pricing--warm {
background: var(--warm-gradient);
}
.cta h2,
.cta-section h2,
.pd-pricing h2,
.cta .section-title,
.cta-section .section-title,
.pd-pricing .section-title,
.cta h3,
.pd-pricing h3 {
color: var(--color-white);
}
.cta p,
.cta-section p,
.pd-pricing p,
.cta .section-subtitle,
.cta-section .section-subtitle,
.pd-pricing .section-subtitle {
color: var(--text-on-dark-sub);
}
.cta .section-label,
.cta-section .section-label,
.pd-pricing .section-label {
color: var(--text-on-dark-muted) !important;
}
/* ------------------------------------------------------------
OPT-IN JS GLASS EFFECTS — only on .lg-refract-active
Targets: nav, hero-badge, scroll-top FAB.
------------------------------------------------------------ */
.lg-refract-active {
position: relative;
}
.lg-refract-active::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
circle 180px at var(--lg-mx, 50%) var(--lg-my, 0%),
var(--specular-hotspot) 0%,
var(--specular-falloff) 30%,
transparent 60%
);
mix-blend-mode: overlay;
opacity: 0;
transition: opacity var(--dur) var(--ease);
}
.lg-refract-active.lg-hovering::after {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.hero-wave-1, .hero-wave-2, .hero-wave-3 { animation: none; }
.lg-refract-active::after { display: none; }
}
/* ------------------------------------------------------------
SCROLL-TO-TOP FAB — glass pill, fixed bottom-right.
Appears when scrolled > 400px.
------------------------------------------------------------ */
.scroll-to-top {
position: fixed;
bottom: var(--nav-inset);
right: var(--nav-inset);
width: 44px;
height: 44px;
z-index: var(--z-fab);
border: none;
cursor: pointer;
background: var(--glass-strong);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-top: var(--glass-edge-top);
border-left: var(--glass-edge-left);
border-right: var(--glass-edge-right);
border-bottom: var(--glass-edge-bottom);
border-radius: var(--r-pill);
box-shadow: var(--shadow-glass);
color: var(--color-primary-deep);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity var(--dur) var(--ease),
transform var(--dur) var(--ease),
background var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.scroll-to-top.visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.scroll-to-top:hover {
background: var(--glass-hover);
box-shadow: var(--shadow-glass-raised);
}
.scroll-to-top svg { width: var(--icon-inline); height: var(--icon-inline); }
@media (max-width: 768px) {
/* Sits above the iOS Safari bottom toolbar; nudged down (user 2026-07-07). */
.scroll-to-top { bottom: calc(var(--nav-inset-m) + 30px); }
}
/* ------------------------------------------------------------
Section utility classes (solid bands).
------------------------------------------------------------ */
.section-light { background: var(--color-surface-light); }
.section-white { background: var(--color-surface); }
.section-subtle { background: var(--color-surface-subtle); }
.section-dark { background: var(--color-ink); color: var(--text-on-dark); }
/* ------------------------------------------------------------
DISPLACEMENT LENS — applied by JS to UI-layer glass in Chromium.
Chains url(#lg-refract) into backdrop-filter for subtle edge
warping on nav pill, hero badge, CTA, FAB. Non-Chromium browsers
never receive .lg-lens, so the base glass still renders cleanly.
These rules must live at the end of the file so their single-
class specificity still wins via source order against the base
component backdrop-filter declarations above.
------------------------------------------------------------ */
.nav.lg-lens.scrolled,
body.pd-page .nav.lg-lens {
-webkit-backdrop-filter: var(--glass-blur-nav) url(#lg-refract);
backdrop-filter: var(--glass-blur-nav) url(#lg-refract);
}
.btn-nav-cta.lg-lens,
.hero-badge.lg-lens,
.scroll-to-top.lg-lens {
-webkit-backdrop-filter: var(--glass-blur) url(#lg-refract);
backdrop-filter: var(--glass-blur) url(#lg-refract);
}
/* ------------------------------------------------------------
ACCESSIBILITY & FALLBACK MODES
Reduce Transparency: ALL glass goes flat (including the lens);
surfaces carrying dark text over arbitrary scrolling content bump
to near-opaque (fallback tokens are dark-mode aware). White-text-
over-hero glass (badges, hero buttons) keeps its tint — the blue
hero behind provides the contrast once blur is gone.
------------------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
*,
*::before,
*::after {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.nav.scrolled,
body.pd-page .nav {
background: var(--glass-fallback-nav);
}
.scroll-to-top {
background: var(--glass-fallback-strong);
}
}
@media (prefers-reduced-transparency: reduce) and (max-width: 768px) {
.nav-links {
background: var(--glass-fallback-nav);
}
}
/* Browsers without backdrop-filter support: the translucent fills are
too see-through without blur where dark text sits over scrolling
content — bump those to the near-opaque fallbacks. */
@supports not (backdrop-filter: blur(1px)) {
.nav.scrolled,
body.pd-page .nav {
background: var(--glass-fallback-nav);
}
.scroll-to-top {
background: var(--glass-fallback-strong);
}
@media (max-width: 768px) {
.nav-links { background: var(--glass-fallback-nav); }
}
}
/* Increased Contrast — more opaque material + stronger boundaries,
per Apple HIG guidance for the Increase Contrast setting. */
@media (prefers-contrast: more) {
.nav.scrolled,
body.pd-page .nav {
background: var(--glass-fallback-nav);
border-color: var(--text-muted);
}
.scroll-to-top {
background: var(--glass-fallback-strong);
border-color: var(--text-muted);
}
.hero-badge {
border: 1px solid var(--glass-edge-color-top-bright);
}
}