/* The menu: seven rows inside the hero's own glass card. * * His word of 2026-09-06 on the icon rows: «premium nice menu with just * headlines and sub headlines, but nothing else»; on a white sheet over the * photograph: «make it integral feel of the website but without big icons»; * and his pick, the same evening, on mocks/menu-astra/comparison/ * s3-light-after.png: «this one». site/header.js builds one markup for it — * seven .mega-band, each a linked headline beside the list of what it opens — * and the mechanic in wireMenu is untouched. * * This sheet is the one setting that survived: the shared type rules of the * menu-text lane (branch menu-text, settings a and b) and the s3 rules of the * menu-astra lane (branch menu-astra, s1 and s2 beside it). The unpicked * settings live on those branches, not here; a client surface carries no * rejected menu behind a query string. header.js stamps data-menu-style="s3" * on unconditionally, so the selectors below are the same ones the * pick was measured against. * * Loaded after site/header.css, which owns the panel's box, the veil and the * close button; what stands inside the panel is set here and nowhere else. * Colour, size, radius and duration are tokens; the only numbers here are * rhythm. */ /* --- shared: the type, whichever setting -------------------------------- */ html[data-menu-style] .mega-band { display: block; } /* The headline is the link, and the link is as wide as its word: a pointer resting on air beside it must not light it. */ html[data-menu-style] .mega-head { display: inline-block; color: var(--resurs-ink); font-weight: 600; letter-spacing: -0.012em; line-height: 1.15; transition: color var(--resurs-quick) var(--resurs-ease); } html[data-menu-style] .mega-head:hover { color: var(--resurs-accent); } html[data-menu-style] .mega-sub { font-size: var(--resurs-size-nav); color: var(--resurs-ink-soft); } html[data-menu-style] .mega-sub a { transition: color var(--resurs-quick) var(--resurs-ease); } html[data-menu-style] .mega-sub a:hover { color: var(--resurs-ink); } /* One cascade, on the way in only. Each row arrives a step after the one before it, the step an eighth of the panel's own opening, so the last row lands as the panel does. On the way out the rows go with the panel, which is already fading; a second cascade there would be decoration. In the closed state the panel is hidden, so the reset below is never seen. */ html[data-menu-style] .mega-band { --menu-text-step: calc(var(--resurs-open) / 8); opacity: 0; transform: translateY(6px); transition: opacity var(--resurs-open) var(--resurs-ease), transform var(--resurs-open) var(--resurs-ease); } html[data-menu-style] .mega:is([data-state='opening'], [data-state='open'], [data-state='closing']) .mega-band { opacity: 1; transform: none; } html[data-menu-style] .mega-band:nth-child(2) { transition-delay: var(--menu-text-step); } html[data-menu-style] .mega-band:nth-child(3) { transition-delay: calc(var(--menu-text-step) * 2); } html[data-menu-style] .mega-band:nth-child(4) { transition-delay: calc(var(--menu-text-step) * 3); } html[data-menu-style] .mega-band:nth-child(5) { transition-delay: calc(var(--menu-text-step) * 4); } html[data-menu-style] .mega-band:nth-child(6) { transition-delay: calc(var(--menu-text-step) * 5); } html[data-menu-style] .mega-band:nth-child(7) { transition-delay: calc(var(--menu-text-step) * 6); } /* --- s3: the rows in the glass card ---------------------------------- */ /* s3: seven rows inside the hero's own glass card, including its turned edge. * Ground, radius, blur, border and inner light: site/hero.css + site/light.css * .glass; heading scale: site/act2-financing.css .escrow-name. * Refs: refs/vtb/stills/vtb-04.jpg (name left, detail right), * refs/revolut/business-1440.png (generous single-line hierarchy). */ @media (min-width: 861px) { html[data-menu-style='s3'] .mega { top: calc(var(--resurs-header-height) + 24px); left: clamp(var(--resurs-glass-left-min), var(--resurs-glass-left-vw), var(--resurs-glass-left-max)); right: clamp(var(--resurs-glass-left-min), var(--resurs-glass-left-vw), var(--resurs-glass-left-max)); max-height: calc(100dvh - var(--resurs-header-height) - 48px); padding: 40px 42px; border: 1px solid var(--light-glass-edge, var(--resurs-glass-edge)); border-radius: var(--resurs-radius-panel); background: linear-gradient(158deg, var(--light-glass-cool-top, var(--resurs-glass-fill)), var(--light-glass-cool-bottom, var(--resurs-glass-fill))); backdrop-filter: blur(var(--light-glass-blur, var(--resurs-glass-blur))) saturate(1.1); -webkit-backdrop-filter: blur(var(--light-glass-blur, var(--resurs-glass-blur))) saturate(1.1); box-shadow: inset 0 1.5px 0 var(--light-panel-bevel, var(--resurs-glass-edge)), inset 0 -1.5px 0 var(--light-panel-under, var(--resurs-photo-scrim)), inset 0 0 0 1px var(--light-panel-inner, var(--resurs-glass-edge)), var(--light-glass-cast, var(--resurs-panel-lift)); color: var(--resurs-on-photo); } html[data-menu-style='s3'] .mega::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: radial-gradient(128% 150% at 142% 20%, var(--light-sun-rim, var(--resurs-glass-edge)) 0%, var(--light-sun-rim, var(--resurs-glass-edge)) 26%, var(--light-rim-far, var(--resurs-photo-scrim)) 84%); -webkit-mask: linear-gradient(var(--resurs-ink) 0 0) content-box, linear-gradient(var(--resurs-ink) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--resurs-ink) 0 0) content-box, linear-gradient(var(--resurs-ink) 0 0); mask-composite: exclude; pointer-events: none; } html[data-menu-style='s3'] .mega-inner { width: auto; margin: 0; padding: 0; } html[data-menu-style='s3'] .mega-band { display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 2fr); align-items: baseline; gap: 28px; padding-block: 22px; border-bottom: 1px solid var(--light-glass-edge, var(--resurs-glass-edge)); } html[data-menu-style='s3'] .mega-band:last-child { border-bottom: 0; } html[data-menu-style='s3'] .mega-head { justify-self: start; font-size: var(--resurs-size-title); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; color: inherit; } html[data-menu-style='s3'] .mega-sub { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--resurs-on-photo-dim); font-size: var(--resurs-size-body); line-height: 1.5; } html[data-menu-style='s3'] .mega :is(.mega-head, .mega-sub a):hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; } html[data-menu-style='s3'] .mega-band:first-child .mega-sub { padding-right: 36px; } html[data-menu-style='s3'] .mega .menu-close { top: 12px; right: 12px; background: var(--resurs-glass-fill); border-color: var(--resurs-glass-edge); color: inherit; } html[data-menu-style='s3'] .menu-close svg { width: 18px; height: 18px; } /* Picked h2: separate dark bands preserve glass between the rows. */ html[data-menu-style='s3']:not([data-covered='true']) .mega-band { position: relative; isolation: isolate; border-bottom-color: transparent; } html[data-menu-style='s3']:not([data-covered='true']) .mega-band::before { content: ''; position: absolute; inset: 6px -16px; z-index: -1; background: linear-gradient(var(--resurs-veil), var(--resurs-veil)), var(--resurs-photo-scrim); border: 1px solid var(--light-glass-edge); border-radius: var(--resurs-radius-card); pointer-events: none; } html[data-menu-style='s3']:not([data-covered='true']) .mega .menu-close { background: var(--resurs-ink-muted); border-color: var(--resurs-veil); box-shadow: 0 0 0 4px var(--resurs-veil); } /* On the second act, the card ground sits beneath the glass gradient as an opaque scrim. Page controls cannot show through, while the hero keeps its original translucent surface. Links and edges use the light card tokens. */ html[data-menu-style='s3'][data-covered='true'] .mega { background-color: var(--resurs-surface); border-color: var(--light-hairline, var(--resurs-hairline)); box-shadow: inset 0 1px 0 var(--resurs-ground), inset 0 -1px 0 var(--resurs-hairline), var(--resurs-panel-lift); color: var(--resurs-ink); } html[data-menu-style='s3'][data-covered='true'] .mega::before { padding: 1px; background: linear-gradient(158deg, var(--resurs-ground), var(--resurs-hairline)); } html[data-menu-style='s3'][data-covered='true'] .mega-band { border-bottom-color: var(--light-hairline, var(--resurs-hairline)); } html[data-menu-style='s3'][data-covered='true'] .mega-sub { color: var(--resurs-accent); } html[data-menu-style='s3'][data-covered='true'] .mega .menu-close { background: var(--resurs-surface); border-color: var(--light-hairline, var(--resurs-hairline)); } } @media (min-width: 861px) and (max-width: 1080px) { html[data-menu-style='s3'] .mega { padding: 32px; } html[data-menu-style='s3'] .mega-band { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; padding-block: 18px; } } /* Under reduced motion the mechanic opens the panel in one step (kit.reduced), and the rows are simply there. */ @media (prefers-reduced-motion: reduce) { html[data-menu-style] .mega-band { transition: none; opacity: 1; transform: none; } html[data-menu-style] .mega-head, html[data-menu-style] .mega-sub a { transition: none; } }