/* ============================================================ Site header + lean menu overlay Self-contained: does not depend on br-market-group.br.css ============================================================ */ :root { --site-header-h: 72px; --site-bg: var(--bg-primary); --site-fg: var(--text-colors--main); --site-fg-dim: var(--text-colors--muted); --site-accent: var(--text-colors--dividers-lines); } /* Top sticky nav bar -------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; pointer-events: none; } .site-header > * { pointer-events: auto; } .site-nav { position: relative; z-index: 110; /* Sit above the overlay so the X is clickable */ display: flex; align-items: center; justify-content: space-between; gap: 16px; /* Inline padding clears a landscape notch; the bar keeps its 24px gutter everywhere the inset is zero, which is every device without one. */ padding: 10px max(24px, env(safe-area-inset-right)) 10px max(24px, env(safe-area-inset-left)); height: var(--site-header-h); box-sizing: border-box; } .site-nav__brand { display: inline-flex; align-items: center; text-decoration: none; } .site-nav__brand img { display: block; height: 44px; width: auto; } /* ---- Light-background mode ------------------------------------------------- Set data-theme="light" on for pages with a light background (e.g. the blog) so the one shared menu adapts instead of needing a second menu. Scoped to the *closed* nav; the open overlay (body.menu-open) keeps its dark styling so it stays correct over its dark panel. NOTE: logo recolor uses filter:brightness(0) because logo-left.svg is pure white. If a currentColor SVG is supplied, switch to `color:#121212` instead. */ body[data-theme="light"]:not(.menu-open) .site-nav__brand img, body[data-nav-over-light]:not(.menu-open) .site-nav__brand img { filter: brightness(0); } body[data-theme="light"]:not(.menu-open) .site-nav__cta, body[data-nav-over-light]:not(.menu-open) .site-nav__cta { color: #121212; border-color: rgba(18, 18, 18, 0.22); } body[data-theme="light"]:not(.menu-open) .site-nav__cta:hover, body[data-theme="light"]:not(.menu-open) .site-nav__cta:focus-visible, body[data-nav-over-light]:not(.menu-open) .site-nav__cta:hover, body[data-nav-over-light]:not(.menu-open) .site-nav__cta:focus-visible { border-color: #121212; } body[data-theme="light"]:not(.menu-open) .site-nav__burger, body[data-nav-over-light]:not(.menu-open) .site-nav__burger { color: #121212; border-color: rgba(18, 18, 18, 0.25); } /* `data-nav-over-light` is the scrolling counterpart to `data-theme`, set by /src/nav/nav-contrast.js while a light section is under the header. A page that is light end to end still uses data-theme; this one only ever touches the header, so the footer and cookie banner keep their own treatment. The colours cross-fade so the flip reads as the bar responding to what is behind it rather than as a repaint. */ .site-nav__brand img, .site-nav__burger { transition: filter 220ms ease, color 220ms ease, border-color 220ms ease; } @media (prefers-reduced-motion: reduce) { .site-nav__brand img, .site-nav__burger { transition: none; } } .site-nav__actions { display: flex; align-items: center; gap: 12px; } .site-nav__cta { --cta-ease: cubic-bezier(0.65, 0.05, 0.36, 1); --cta-duration: 450ms; display: inline-flex; align-items: center; /* Block padding holds the pill at the burger's 44px so the two nav controls share a baseline. It came down from 14px when the label's line box grew to 1.5em to stop clipping descenders. */ padding: 11px 22px; border-radius: 999px; background: transparent; border: 1.5px solid var(--text-colors--dividers-lines); color: var(--text-colors--main); font-family: 'Satoshi', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: lowercase; text-decoration: none; overflow: hidden; transition: border-color var(--cta-duration) var(--cta-ease), color 220ms ease; } /* The label is a mask: two copies of the word stacked, the pair rolling up by exactly one line on hover. At height 1em the mask cut the descender off the g in "campaign" — the roll needs a full line box, not an em. 1.5 gives the descender room, and the block padding comes down to hold the pill at 44px. */ .site-nav__cta-label { display: inline-flex; flex-direction: column; height: 1.5em; line-height: 1.5; overflow: hidden; } .site-nav__cta-text { display: block; line-height: 1.5; transform: translateY(0); transition: transform var(--cta-duration) var(--cta-ease); } .site-nav__cta:hover .site-nav__cta-text, .site-nav__cta:focus-visible .site-nav__cta-text, .site-nav__cta:active .site-nav__cta-text { transform: translateY(-100%); } .site-nav__cta:hover, .site-nav__cta:focus-visible { background: transparent; border-color: var(--text-colors--main); outline: none; } /* Burger ------------------------------------------------------------------- */ .site-nav__burger { --burger-size: 44px; position: relative; /* Do not let the flex row squeeze the only way into the menu: at 320px the CTA beside it was shaving the burger down to 40px. */ flex: 0 0 var(--burger-size); width: var(--burger-size); height: var(--burger-size); padding: 0; background: transparent; border: 1px solid rgba(245, 245, 245, 0.25); border-radius: 999px; cursor: pointer; color: var(--site-fg); } .site-nav__burger:hover, .site-nav__burger:focus-visible { border-color: var(--site-fg); outline: none; } /* The two bars are a tonearm, not a pair of dashes. They pivot from the left end rather than their own centre, so opening reads as one arm swinging down onto the record instead of two lines meeting in the middle. The upper bar is the arm and travels the full 45 degrees; the lower is the counterweight and answers a beat later, which is what keeps it from looking mechanical. The pivot stays at centre: rotating the bars about their left end swung them both to the same side and closed the icon into a chevron instead of an X. The character lives in the timing and the width lag, not in the origin. */ .site-nav__burger-line { position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: currentColor; transform-origin: center; transition: transform var(--motion-base, 420ms) var(--motion-settle, cubic-bezier(0.16, 1, 0.3, 1)), width var(--motion-base, 420ms) var(--motion-settle, cubic-bezier(0.16, 1, 0.3, 1)); } .site-nav__burger-line:nth-child(1) { transform: translate(-50%, -5px); } .site-nav__burger-line:nth-child(2) { transform: translate(-50%, 5px); /* Shorter, like the counterweight end, and it lags the arm by 60ms. */ width: 12px; transition-delay: 60ms; } .site-nav__burger:hover .site-nav__burger-line:nth-child(2), .site-nav__burger:focus-visible .site-nav__burger-line:nth-child(2) { width: 18px; } .site-nav__burger[aria-expanded="true"] { background: var(--site-fg); color: var(--site-bg); border-color: var(--site-fg); } .site-nav__burger[aria-expanded="true"] .site-nav__burger-line:nth-child(2) { width: 18px; } .site-nav__burger[aria-expanded="true"] .site-nav__burger-line:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); } .site-nav__burger[aria-expanded="true"] .site-nav__burger-line:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); } /* Overlay ------------------------------------------------------------------ */ .site-menu-overlay { position: fixed; inset: 0; z-index: 90; isolation: isolate; opacity: 0; visibility: hidden; pointer-events: none; /* Closing. Exits go faster than entrances, and this one only has to get out of the way. */ transition: opacity 180ms cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 180ms; } .site-menu-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; /* Opening. Short and decelerating, so the surface is established before the rows start rising into it. The old 320ms ease-in-out was still fading while the cascade ran, and rows arriving through a half-there backdrop is most of what read as mushy. */ transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s; } .site-menu-overlay__backdrop { position: absolute; inset: 0; background: var(--site-bg); opacity: 0.96; } /* The panel is the scroll container, never the page. Same rule the tier-page spine and the /vault matrix follow: overflow belongs to the thing that overflowed. Body scroll stays locked, so if this did not scroll the tail of the list would simply be unreachable. */ .site-menu-overlay__panel { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: calc(var(--site-header-h) + clamp(16px, 3vh, 32px)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); box-sizing: border-box; max-width: 1280px; margin: 0 auto; overflow-y: auto; /* Hover spreads letter-spacing; clip the extra rather than growing a horizontal scrollbar on the narrowest phones. */ overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(245, 245, 245, 0.18) transparent; } .site-menu-overlay__panel::-webkit-scrollbar { width: 5px; } .site-menu-overlay__panel::-webkit-scrollbar-track { background: transparent; } .site-menu-overlay__panel::-webkit-scrollbar-thumb { background: rgba(245, 245, 245, 0.18); border-radius: 3px; } .site-menu-overlay__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0px, 0.5vh, 6px); } /* The mask the rows rise out of. Without it the reveal is a free-floating slide and has to lean on opacity to hide its start. */ /* The row is a mask: the link rises out of it on open, so it clips. Clipping at exactly the line box cuts the descenders off the rows that have them — "start a campaign" lost the tails of its p and g. The padding gives the descender somewhere to live and the negative margin gives the space straight back, so the cascade still masks and the rhythm is unchanged. `scrollHeight` cannot see this: glyphs painting outside their line box are not layout overflow, so it has to be caught by looking. */ .site-menu-overlay__list li { overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; } .site-menu-overlay__link { display: flex; align-items: baseline; gap: clamp(12px, 2vw, 24px); padding: clamp(4px, 0.7vh, 10px) 0; text-decoration: none; color: var(--site-fg); font-family: 'Satoshi', sans-serif; font-weight: 300; /* Satoshi Light — closest to "thin" we have on disk */ /* Height matters as much as width here: eleven rows at 40px need 877px, so a short laptop window has to shrink the type, not just a narrow phone. */ font-size: clamp(18px, min(3.4vw, 4.1vh), 40px); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.08em; transition: opacity 200ms ease, letter-spacing 280ms cubic-bezier(0.65, 0, 0.35, 1); } .site-menu-overlay__text { text-wrap: balance; } .site-menu-overlay__link:hover, .site-menu-overlay__link:focus-visible { opacity: 0.65; letter-spacing: 0.12em; outline: none; } .site-menu-overlay__link--cta { text-transform: lowercase; letter-spacing: 0.06em; } /* Touch: hold every row at a 44px target once the type shrinks. Padding rather than min-height so the row grows around the text and keeps the number on the same baseline. */ @media (pointer: coarse) { .site-menu-overlay__link { padding-block: max(clamp(4px, 0.7vh, 10px), calc((44px - 1.1em) / 2)); } } .site-menu-overlay__link[aria-current="page"] { color: var(--site-accent); } .site-menu-overlay__link[aria-current="page"]::after { content: " ↳ here"; /* 0.28em alone drops to 8px once a short window shrinks the row. */ font-size: max(10px, 0.28em); letter-spacing: 0.04em; font-weight: 400; text-transform: none; opacity: 0.6; } .site-menu-overlay__num { font-size: max(10px, 0.3em); font-variant-numeric: tabular-nums; color: var(--site-fg-dim); font-weight: 400; letter-spacing: 0.04em; min-width: 2ch; /* inline-block so GSAP rotate applies; pivot from the digit's center */ display: inline-block; transform-origin: 50% 50%; } /* Only promote the digits while the cascade can actually run. Eleven permanent compositor layers on every page is a cost the closed menu never earns. */ .site-menu-overlay.is-revealing .site-menu-overlay__link { will-change: transform; } .site-menu-overlay.is-revealing .site-menu-overlay__num { will-change: opacity; } .site-menu-overlay__social { list-style: none; /* auto pins the row to the bottom when the list fits and collapses to the padding when it does not, so nothing gets pushed off either end. */ margin: auto 0 0; padding: clamp(16px, 3.5vh, 40px) 0 0; display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 28px); } .site-menu-overlay__social a { color: var(--site-fg-dim); text-decoration: none; font-size: 14px; letter-spacing: 0.04em; transition: color 180ms ease; /* 14px text in an 18px box is a mouse-sized target. Grow the box, not the type, so the row reads the same and a thumb still lands on it. */ display: inline-flex; align-items: center; min-height: 44px; } .site-menu-overlay__social a:hover, .site-menu-overlay__social a:focus-visible { color: var(--site-fg); outline: none; } /* Scroll edges ------------------------------------------------------------- Two jobs. The top veil stops rows sliding visibly under the logo and the burger, which sit above the overlay. The bottom veil is the only thing that says the list continues; without it the cut is indistinguishable from the end. Both are driven by data-overflow, set from the panel's scroll position. */ .site-menu-overlay__veil { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1); } .site-menu-overlay__veil--top { top: 0; height: calc(var(--site-header-h) + 24px); background: linear-gradient(to bottom, var(--site-bg) 45%, transparent); } .site-menu-overlay__veil--bottom { bottom: 0; height: clamp(56px, 13vh, 120px); background: linear-gradient(to top, var(--site-bg) 22%, transparent); display: flex; align-items: flex-end; justify-content: center; padding-bottom: max(10px, env(safe-area-inset-bottom)); box-sizing: border-box; } .site-menu-overlay[data-overflow~="top"] .site-menu-overlay__veil--top, .site-menu-overlay[data-overflow~="bottom"] .site-menu-overlay__veil--bottom { opacity: 1; } .site-menu-overlay__more { width: 22px; height: 22px; color: var(--site-fg-dim); } /* One two-beat nudge when the menu opens already overflowing, then it rests. Enough to read as "there is more", not enough to keep asking for attention. */ .site-menu-overlay.is-open[data-overflow~="bottom"] .site-menu-overlay__more { animation: site-menu-more-nudge 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2; } @keyframes site-menu-more-nudge { 0%, 55%, 100% { transform: translateY(0); opacity: 0.55; } 72% { transform: translateY(4px); opacity: 1; } } /* Body scroll lock while menu open ----------------------------------------- */ body.menu-open { overflow: hidden; } /* Reduced motion ----------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .site-nav__burger-line, .site-menu-overlay__backdrop, .site-menu-overlay__link, .site-nav__cta, .site-nav__cta-text { transition: none !important; } .site-nav__cta:hover .site-nav__cta-text, .site-nav__cta:focus-visible .site-nav__cta-text { transform: translateY(0); } /* The veils keep fading: they report state rather than move anything. Only the chevron's travel is dropped. */ .site-menu-overlay.is-open[data-overflow~="bottom"] .site-menu-overlay__more { animation: none; opacity: 0.8; } } /* ============================================================ Browser surfaces The parts nobody draws still ship with the design. Selection, the caret, the scrollbar and the focus ring arrive belonging to no design system unless they are given one, and a page that leaves them at their defaults reads as assembled rather than built. ============================================================ */ ::selection { background: var(--text-colors--main, whitesmoke); color: var(--bg-primary, #121212); } [data-theme="light"] ::selection, [data-nav-over-light] ::selection { background: var(--bg-primary, #121212); color: var(--text-colors--main, whitesmoke); } html { scrollbar-color: rgba(245, 245, 245, 0.24) transparent; scrollbar-width: thin; } input, textarea, select { caret-color: var(--teal, #00b3b3); } /* One focus ring for the whole site, drawn in the brand's own accent rather than the platform's blue. `:focus-visible` so a pointer press never shows it. */ :focus-visible { outline: 2px solid var(--teal, #00b3b3); outline-offset: 3px; border-radius: 2px; } /* Figures in the hero's now-playing list and any data readout line up when the numerals share a width; the default proportional figures jitter as they tick. */ .vinyl-hero__meta dd, .knob-value, [data-meta-title], [data-meta-artist], [data-meta-album] { font-variant-numeric: tabular-nums; }