/* ── Kabiri site chrome ──────────────────────────────────────────────── The public-site header: full-width bar, centred nav, Log in link, Kabiri-blue Get started pill, and the mobile hamburger dropdown. Extracted from index.html's inline \3c style> so pricing.html (and any later public page) wears the same bar instead of growing a second, drifting copy - the floating-pill nav pricing used to carry was exactly that kind of drift. The two bar states (transparent / .wl-header-glass) are switched by js/site-header.js, shared by every page that wears the bar: it starts transparent over the page's photo hero and takes the glass from the headline down. A page with no photo hero can instead render the bar with .wl-header-frost applied statically - the frosted-WHITE variant, which is the right one over a light page. White is the control theme everywhere below, which is right for the six pages that open on a photograph. index.html no longer does - its hero is plain white - so it keeps both bar states and both switching rules and overrides only the RESTING colours to ink, in its own \3c style> block. Nothing here should grow a special case for it. */ /* ── Skip to content ── First focusable thing in on every public page, pointing at the page's #main. Parked above the viewport rather than display:none - a hidden link is not focusable, and the whole point is that it is the first tab stop. z-index clears .wl-header (50), which is fixed over the same corner. */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #fff; color: #1433d2; font-size: 13px; font-weight: 650; line-height: 1; text-decoration: none; box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 8px 24px rgb(3 10 60 / 25%); transform: translateY(calc(-100% - 16px)); transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); outline: 2px solid #1433d2; outline-offset: 2px; } /* ── Site header ── Full-width bar flush to the top edge (no floating pill). Two states, switched in js/site-header.js: • Default (right at the top, above the headline): no background - fully transparent over the hero, WHITE logo + controls. • .wl-header-glass (from the headline down, all the way to the foot of the page): frosted-glass black, WHITE logo + controls - the first section is the dark photo hero, so the bar tints down rather than up. There was a third, .wl-header-blue - solid hero blue past the first section - and it is retired: the glass carries the whole page rather than the bar changing colour halfway down it. White is the default control theme, so both of the photo-hero states keep it; only .wl-header-frost - the frosted-WHITE bar a light page with no hero can apply statically - flips the logo and links dark. The Get Started pill is always white with blue text regardless of state. The hide-on-scroll-down / show-on-scroll-up transform is also driven there. */ .wl-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } .wl-header.wl-header-frost { background: rgb(255 255 255 / 70%); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 1px 0 rgb(0 0 0 / 6%), 0 6px 24px rgb(0 0 0 / 5%); } /* Frosted-glass black. Same blur as .wl-header-frost, inverted: the homepage's first section is the dark photo hero, so a white pane there was a bright slab over black artwork. Because white is the default control theme, this state needs no logo/link overrides - the wordmark and nav stay white, which is the point. */ .wl-header.wl-header-glass { background: rgb(10 10 15 / 55%); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 1px 0 rgb(255 255 255 / 8%), 0 6px 24px rgb(0 0 0 / 28%); } .wl-header.wl-header-hidden { transform: translateY(-100%); } @media (width <= 768px) { .wl-header { padding: 12px 16px; } } .wl-header-logo { height: 40px; display: flex; align-items: center; } .wl-header-logo img { width: 92px; height: auto; /* White wordmark by default (transparent bar over the hero, and again on the blue bar); only the frosted- white bar shows it black. */ filter: brightness(0) invert(1); transition: filter 0.3s ease; } .wl-header-frost .wl-header-logo img { filter: none; } .wl-header-menu { display: flex; align-items: center; gap: 4px; } /* Centred primary nav. Absolutely centred on the header so it stays screen-centred regardless of the logo / right- side widths. Hidden on mobile, where the hamburger dropdown takes over. */ .wl-header-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; } .wl-nav-link { font-size: 13px; font-weight: 550; color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 8px; white-space: nowrap; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .wl-nav-link:hover { color: #fff; background: rgb(255 255 255 / 14%); } .wl-header-frost .wl-nav-link { color: #1a1a1a; } .wl-header-frost .wl-nav-link:hover { color: #000; background: rgb(0 0 0 / 6%); } /* Desktop shows the centred nav and hides the hamburger; mobile does the reverse. */ @media (width <= 768px) { .wl-header-nav { display: none; } } @media (width >= 769px) { /* Higher specificity than the base .wl-hamburger-wrap (display:flex) rule below, which is later in source - without it the hamburger reappears on desktop. */ .wl-header .wl-hamburger-wrap { display: none; } } .wl-login-link { font-size: 13px; font-weight: 550; color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease; } .wl-login-link:hover { color: #fff; background: rgb(255 255 255 / 14%); } .wl-header-frost .wl-login-link { color: #1a1a1a; } .wl-header-frost .wl-login-link:hover { color: #000; background: rgb(0 0 0 / 6%); } /* Kabiri-blue pill with white text, on every bar state. A faint resting shadow keeps it legible on the frosted- white bar; on the solid-blue bar an inset white ring stops it dissolving into the background. */ .wl-signup-btn { font-size: 13px; font-weight: 650; color: #fff; background: #1433d2; text-decoration: none; padding: 8px 16px; border-radius: 9999px; letter-spacing: -0.01em; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .wl-signup-btn:hover { background: #4a66e6; color: #fff; box-shadow: 0 4px 16px rgb(3 10 60 / 25%); transform: scale(1.03); } /* Mobile: nav CTA swap driven by the hero Get Started button's visibility (see js/site-header.js, which toggles .cta-hero-visible on the header). The Log in link is always shown, sitting to the left of the blue Get started pill. When the hero Get Started button is on-screen the pill collapses and Log in slides into its place. Desktop is untouched - these rules live only inside the mobile media query. */ @media (width <= 768px) { .wl-header-menu .wl-signup-btn { overflow: hidden; white-space: nowrap; transition: max-width 0.3s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease; } .wl-header.cta-hero-visible .wl-signup-btn { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; margin: 0; pointer-events: none; } } .wl-hamburger-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: none; background: transparent; color: #fff; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .wl-hamburger-btn:hover { color: #fff; background: rgb(255 255 255 / 14%); } .wl-header-frost .wl-hamburger-btn { color: #1a1a1a; } .wl-header-frost .wl-hamburger-btn:hover { color: #000; background: rgb(0 0 0 / 6%); } .wl-hamburger-btn svg { width: 20px; height: 20px; } /* Wrap around hamburger button + dropdown so the dropdown anchors to the trigger, not the whole header pill. */ .wl-hamburger-wrap { position: relative; display: flex; align-items: center; } .wl-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px; background: rgb(255 255 255 / 82%); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgb(0 0 0 / 8%); border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 6%); transform-origin: top right; animation: wlDropIn 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .wl-dropdown.open { display: block; } @keyframes wlDropIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Two of these rows open a modal rather than navigating, so they are real