/* ========================================================================= VACEI LIQUID GLASS — shared theme overlay ------------------------------------------------------------------------- KEEP THIS FILE BYTE-IDENTICAL IN ALL THREE REPOSITORIES: vacei-client-portal src/styles/vacei-liquid-glass.css vacei-portal-frontend src/styles/vacei-liquid-glass.css w1-books-app src/styles/vacei-liquid-glass.css Commit it to all three in the SAME change. A divergent copy is worse than no shared file at all. Store with LF endings (.gitattributes: eol=lf). WHAT THIS SUPERSEDES - The 2026-09-13 / 2026-09-16 unified presentation (portal-unified.css) in Client and Books, and the canvas era (vacei-canvas.css) in Partner. - BRAND-SPEC 1.6 "MUST NOT redefine" on the warm-neutral glass/neutral ramp: the card surface itself changes, so that ruling is overridden here. - The FROZEN TYPEFACE ruling: the UI face is Google Sans Flex, the Vacei Network face shared with vacei.com (owner ruling 2026-09-24; it was Urbanist from 2026-09-17). - BRAND ALIGNMENT 2026-09-24 (owner: "make sure all our branding in our portals match" the brand kit, the new vacei.com and the new videos exactly). The glass SHELL (layout, radii, sidebar behaviour, hero, cards) is unchanged; its BRAND LAYER now uses vacei.com's own values: Google Sans Flex, ink #173B40, the 112deg teal cover gradient, deep teal #2A545E/#0F2226, sage #EDF2ED, off-white #FAFBF9, lime #E9F16D as a tint under ink (and as the signed-out call to action, with ink text), amber #F2B84B. Source of truth: the site sheets minimal-design.css / network.css / signature-motion.css in vacei-marketing-site and Dropbox Claude/marketing/vacei/brand/. WHY IT IS LOADED LAST AND UNLAYERED - Unlayered rules outrank anything inside @layer (Tailwind v4 theme/base/ components/utilities), whatever their specificity. Do NOT wrap any of this in @layer, and do not move the import. - Tokens are declared at :root:root:root (0,3,0). That beats plain :root (0,1,0) and the :root:root (0,2,0) armour used by portal-unified.css, from ANY position -- including sheets that load after this one and token blocks that sit after the hoisted @import window. Specificity, not source order, is what makes this file safe. UNITS ARE PX ON PURPOSE - Desktop runs at html{font-size:75%} above 1024px. Every rem renders at 0.75x. Radii, control heights and gaps are px so they survive. THIS FILE IS THE UNION OF ALL THREE VOCABULARIES - A custom property nothing references is inert, so every portal can carry every family. Do not "clean up" names that look unused in one repo. ========================================================================= */ /* ------------------------------------------------------------------------- 1. BRAND PRIMITIVES — the only literal colours in the estate. Everything below points at these. Change a brand colour HERE only. ---------------------------------------------------------------------- */ :root:root:root { /* Every value here is a vacei.com value (2026-09-24). Comments give the site token or the contrast that justifies it; "was" is the Glass value. */ --lg-accent: #346A76; /* site --brand: interactive / brand mark */ --lg-accent-read: #346A76; /* accent as TEXT on white: 6.05:1 */ --lg-accent-deep: #2A545E; /* brand deep teal: pressed / deep chrome (was #2A535C) */ --lg-accent-bg: rgba(52, 106, 118, 0.10); --lg-accent-soft: rgba(52, 106, 118, 0.22); /* The two brand fills for big teal surfaces, exactly as the site paints them: the cover (hero, header) and the deep panel. White text clears 5.46:1 at the light end of the cover and 8.3:1 on the deep panel, so neither needs a wash on top. */ --lg-cover: linear-gradient(112deg, #346A76 0%, #376C79 50%, #3B717E 100%); --lg-deep: linear-gradient(120deg, #2A545E 0%, #173B40 100%); --lg-ground: #EDF2ED; /* brand sage: the calm canvas behind all (was #E5E8EA; before that the deep-teal render #00516B) */ --lg-ink: #173B40; /* brand ink: primary text AND the dark primary pill, as on vacei.com (was var(--lg-ink)). 12.1:1 on white. */ --lg-ink-deep: #0F2226; /* ink pressed / hover: the site's button hover (was var(--lg-ink-deep)) */ --lg-ink-2: #465D60; /* site --body: secondary text (was #4E5557). 7.0:1 on white. */ --lg-ink-3: #607174; /* site --muted: muted text, icons at rest (was #5E6565). 5.11:1 on white, 4.92 on #FAFBF9, 4.51 on the #EDF2ED ground -- AA everywhere it sits. */ --lg-page: #FAFBF9; /* brand off-white: opaque page/well fill (was #F8F9F9) */ --lg-inset: #EDF2ED; /* brand sage: inset panel on a card, secondary pill, inactive filter chip (was #F3F4F5). Named so call sites reference it instead of a hex. */ --lg-inset-head: #FAFBF9; /* table header row (was #F6F7F8) */ --lg-white: #FFFFFF; /* solid card, popovers, menus */ --lg-glass: rgba(255, 255, 255, 0.94); /* THE one card surface: reads as solid white, with just enough give for the ground to warm it from beneath */ --lg-glass-soft: rgba(255, 255, 255, 0.78); /* The second and last tier: THIN glass. Chrome that floats on the ground -- inactive tabs, status chips, the ring around the menu and the "Up next" card. 10% white, a bright hairline, the blur. Text on it is white. */ --lg-thin: rgba(255, 255, 255, 0.10); --lg-thin-border: rgba(255, 255, 255, 0.75); --lg-thin-blur: blur(30px) saturate(1.35); /* THIN glass that CARRIES A LABEL (pills, chips) is smoked: a deep-teal tint (brand #0F2226) under the white text, so the label reads wherever the pill lands. Rings that carry no text (menu, "Up next") stay clear. */ --lg-thin-smoke: rgba(15, 34, 38, 0.40); --lg-hairline: #DCE3DE; /* site --line: dividers, table rules, inputs (was #E2E2E2) */ --lg-hairline-strong: #607174; /* input outlines (was #676F70) */ /* Lime is the brand's one accent and it is ALWAYS a fill or a tint with ink on it -- never text on a light surface (1.22:1 on white). Ink on lime is 9.95:1. --lg-highlight is the page's one highlight card (the Glass guide's "yellow card"), now the brand lime tinted over white. */ --lg-lime: #E9F16D; --lg-highlight: linear-gradient(170deg, rgba(233, 241, 109, 0.55) 0%, rgba(233, 241, 109, 0.22) 100%), #FFFFFF; --lg-positive: #246733; /* semantic status inks: unchanged, */ --lg-negative: #A82F31; /* they carry meaning, not brand */ --lg-amber: #F2B84B; /* brand amber "needs your input": dot / fill only (was #FF9500) */ --lg-amber-read: #854F02; /* amber as TEXT, AA on white */ --lg-r-card: 24px; --lg-r-glass: 30px; --lg-r-pill: 999px; --lg-control-h: 40px; --lg-gap: 12px; /* The brand face, as vacei.com sets it: Google Sans Flex with an Arial fallback. var() first: next/font registers a hashed family name that a literal would never match; 'Google Sans Flex Variable' is the name @fontsource-variable/google-sans-flex registers, wherever an app loads it that way. Either loader resolves through this one stack. */ --lg-font: var(--font-google-sans-flex, 'Google Sans Flex Variable'), 'Google Sans Flex', Arial, sans-serif; --lg-blur: blur(30px) saturate(1.4); } /* ------------------------------------------------------------------------- 2. TYPEFACE Declared on ":root:root:root, body" because portal-unified.css declares --portal-font on ":root:root, body"; a root-only override loses on body-descendant resolution. --a4-font-ui is the chain root in Partner. var() first, literal second: next/font registers a HASHED family name, so the literal alone would match nothing self-hosted. ---------------------------------------------------------------------- */ :root:root:root, body { --portal-font: var(--lg-font); --a4-font-ui: var(--lg-font); --a4-font-display: var(--lg-font); --a4-suite-font-sans: var(--lg-font); --bk-font-body: var(--lg-font); --bk-font-display: var(--lg-font); --v-font: var(--lg-font); --vacei-font-sans: var(--lg-font); --font-body: var(--lg-font); --font-display: var(--lg-font); } /* ------------------------------------------------------------------------- 3. --portal-* — canonical in Client and Books. Inert in Partner. CANVAS STAYS OPAQUE. --portal-canvas / --a4-canvas / --vc-canvas / --bk-canvas are used as INNER fills (modal header bars, search inputs, sticky table headers, VAT dialog wells). Transparent there would show the ground image through table headers. Shell transparency is done by selector in section 9, never by blanking the canvas token. ---------------------------------------------------------------------- */ :root:root:root { --portal-canvas: var(--lg-page); --portal-card: var(--lg-glass); --portal-soft: var(--lg-glass-soft); --portal-border: var(--lg-hairline); --portal-border-strong: var(--lg-hairline-strong); --portal-ink: var(--lg-ink); --portal-ink-hover: var(--lg-ink-2); --portal-muted: var(--lg-ink-3); --portal-accent: var(--lg-accent); --portal-accent-text: var(--lg-accent-read); --portal-accent-deep: var(--lg-accent-deep); --portal-accent-bg: var(--lg-accent-bg); --portal-accent-soft: var(--lg-accent-soft); --portal-accent-glow: var(--lg-accent); /* Sidebar / nav = white glass, matching the one card surface. TO SWITCH TO A DEEP-TEAL RAIL: set --portal-nav to var(--lg-ground), --portal-nav-ink and --portal-nav-active to #FFFFFF, --portal-nav-muted to rgba(255,255,255,.72), --portal-nav-active-ink to var(--lg-ground) and --portal-nav-line to rgba(255,255,255,.20). Change it in all three repos at once. See CONFLICTS. */ --portal-nav: var(--lg-glass); --portal-nav-ink: var(--lg-ink); --portal-nav-muted: var(--lg-ink-3); --portal-nav-hover: var(--lg-accent-bg); --portal-nav-active: var(--lg-accent-bg); --portal-nav-active-ink: var(--lg-accent-deep); --portal-nav-line: transparent; --portal-radius: var(--lg-r-card); --portal-radius-pill: var(--lg-r-pill); --portal-stat-bg: var(--lg-glass-soft); --portal-stat-bg-hover: var(--lg-glass); --portal-shadow: none; --portal-header-shadow: none; --portal-header-surface: var(--lg-glass); --portal-hero-surface: var(--lg-glass); --portal-section-surface: var(--lg-glass); } /* ------------------------------------------------------------------------- 4. --a4-* — present in all three. In Client/Books the COLOUR half already aliases --portal-*; restating it is harmless and makes Partner (which has no --portal-*) work from the same file. ---------------------------------------------------------------------- */ :root:root:root { --a4-canvas: var(--lg-page); --a4-surface-page: var(--lg-page); --a4-card: var(--lg-white); /* opaque: popovers/menus sit on it */ --a4-surface: var(--lg-glass); --a4-surface-subtle: var(--lg-glass-soft); --a4-surface-quiet: var(--lg-page); --a4-inverse: var(--lg-ink); /* NOT the ground: that is a pale canvas now */ --a4-inverse-2: var(--lg-accent-deep); --a4-ink: var(--lg-ink); --a4-ink-2: var(--lg-ink-2); --a4-ink-3: var(--lg-ink-3); --a4-ink-muted: var(--lg-ink-3); --a4-mute: var(--lg-ink-3); --a4-body: var(--lg-ink-2); --a4-stone: var(--lg-ink-3); --a4-charcoal: var(--lg-ink-2); --a4-hairline: var(--lg-hairline); --a4-hairline-2: var(--lg-hairline); --a4-hairline-strong: var(--lg-hairline-strong); /* READABLE cyan, not the display cyan. --a4-accent is the primary ACTION colour: `bg-[var(--a4-accent)] text-white` appears 31 times across 18 files in Client alone, including components/ui/button.tsx, and a4-ui.css line 44 explicitly flags this family as "used as TEXT ... must be AA". --lg-accent (#346A76) gives white text only 3.23:1. This gives 4.60. The display cyan is still available as --a4-accent-glow for decoration. */ --a4-accent: var(--lg-accent-read); --a4-accent-deep: var(--lg-accent-deep); --a4-accent-bg: var(--lg-accent-bg); --a4-accent-soft: var(--lg-accent-soft); --a4-accent-glow: var(--lg-accent); --a4-focus: var(--lg-accent); --a4-primary: var(--lg-accent-deep); --a4-primary-bright: var(--lg-accent); --a4-teal: var(--lg-accent); --a4-on-primary: var(--lg-white); --a4-suite-primary: var(--lg-accent-deep); --a4-suite-accent: var(--lg-accent); --a4-suite-accent-hover: var(--lg-accent-read); /* Semantics. Independent of the brand ramp by long-standing ruling -- re-verify contrast if you touch these. */ --a4-positive: var(--lg-positive); --a4-positive-bg: rgba(36, 103, 51, 0.10); --a4-positive-dot: var(--lg-positive); --a4-danger: var(--lg-negative); --a4-danger-bg: rgba(168, 47, 49, 0.10); --a4-danger-dot: var(--lg-negative); --a4-warn: var(--lg-amber-read); --a4-warn-bg: rgba(242, 184, 75, 0.15); /* NOT --lg-amber (#FF9500). That is annotated "dot / fill only" and is 2.20 on white -- it fails even the 3:1 graphical threshold. Pre-existing code in Client and Partner already uses --a4-warn-dot as TEXT and as an icon colour (AlertTriangle, ShieldCheck, trial-balance figures), so this token has to be readable, not just visible. orange-700 is 4.72 on white and 3.94 on its own chip. */ --a4-warn-dot: #A86301; --a4-info: var(--lg-accent-read); /* used as TEXT on --a4-info-bg: --lg-accent was 2.91:1 there */ --a4-info-bg: var(--lg-accent-bg); --a4-info-dot: var(--lg-accent); --a4-neutral: var(--lg-ink-3); --a4-neutral-bg: var(--lg-page); --a4-auto: var(--lg-accent); --a4-auto-bg: var(--lg-accent-bg); --a4-auto-fg: var(--lg-accent-read); /* Geometry. px, never rem. */ --a4-r-nav: var(--lg-r-pill); --a4-r-input: var(--lg-r-card); --a4-r-core: var(--lg-r-card); --a4-r-shell: var(--lg-r-glass); --a4-r-lg: var(--lg-r-card); --a4-r-xl: var(--lg-r-glass); --a4-r-pill: var(--lg-r-pill); --a4-control-h: var(--lg-control-h); --a4-control-h-lg: var(--lg-control-h); --a4-gap: var(--lg-gap); --a4-shell-gap: var(--lg-gap); --a4-shadow-card: none; --a4-shadow-lift: none; --a4-shadow-float: none; --a4-shadow-modal: none; --a4-shadow-accent: none; --a4-shadow-sidebar: none; --a4-shadow-seg: none; /* THE RAIL IS WHITE GLASS, so the whole --a4-sidebar-* family has to move together. --a4-sidebar-text was #ffffff, which was right for the old dark rail and is INVISIBLE on a light one -- re-pointing the ground without the ink is a silent failure. Verified live consumers: var(--a4-sidebar) x2 in Client and x3 in Partner, plus -text/-hover/-fill/-line. */ --a4-sidebar: var(--lg-glass); --a4-sidebar-text: var(--lg-ink); --a4-sidebar-muted: var(--lg-ink-3); --a4-sidebar-hover: var(--lg-accent-bg); --a4-sidebar-active: var(--lg-accent-bg); --a4-sidebar-line: var(--lg-hairline); --a4-sidebar-faint: var(--lg-ink-3); --a4-sidebar-fill: rgba(255, 255, 255, 0.55); --a4-hero-cover-base: var(--lg-accent-deep); --a4-hero-cover-shadow: none; --a4-hero-assist-shadow: none; } /* ------------------------------------------------------------------------- 5. --brand* / --v-* / --vc-* / --vacei-* / --bk-* --brand-hsl is a bare "H S% L%" triple consumed as hsl(var(--x)). A custom property cannot compose a hex var() into an HSL triple, so it is computed by hand. Working for #346A76: R=43 G=155 B=186 -> r=.168627 g=.607843 b=.729412 max=b min=r d=.560784 L=(max+min)/2=.449020 -> 45% L<.5 so S=d/(max+min)=.560784/.898039=.624454 -> 62% max is b so H=4+(r-g)/d=4-.783218=3.216782 x60=193.007 -> 193 check C=(1-|2L-1|)*S=.898039x.624454=.560783=d OK => 193 62% 45% ---------------------------------------------------------------------- */ :root:root:root { --brand: var(--lg-accent); --brand-primary: var(--lg-accent); --brand-hover: var(--lg-accent-read); --brand-glow: var(--lg-accent); --brand-soft: var(--lg-accent-bg); --brand-soft-border: var(--lg-accent-soft); --brand-tint: var(--lg-accent-bg); --brand-focus: var(--lg-accent); --on-brand: var(--lg-white); --shadow-brand: none; --link: var(--lg-accent-read); --link-hover: var(--lg-accent-deep); --ink-teal-900: var(--lg-accent-deep); --ink-teal-800: var(--lg-accent-read); --ink-teal-700: var(--lg-accent); --brand-hsl: 191 39% 33%; --brand-h: 191; --brand-s: 39%; --brand-l: 33%; --vacei-accent-hsl: 191 39% 33%; --vacei-primary-hsl: 191 39% 33%; --vacei-hover-hsl: 192 38% 27%; /* --v-* : the white-glass sidebar skin. In Partner --v-primary is a literal in the vendored sheet, so it MUST be restated here. */ --v-canvas: var(--lg-page); --v-card: var(--lg-white); --v-card-soft: var(--lg-glass-soft); --v-glass: var(--lg-glass); --v-glass-border: transparent; --v-glass-hover: var(--lg-white); --v-glass-blur: var(--lg-blur); --v-hairline: var(--lg-hairline); --v-ink: var(--lg-ink); --v-body: var(--lg-ink-2); --v-mute: var(--lg-ink-3); --v-stone: var(--lg-ink-3); /* -read, not the bright accent: --v-primary is sidebar TEXT and a fill under white (3.23:1 at --lg-accent, 6.30:1 here). */ --v-primary: var(--lg-accent-read); --v-primary-hover: var(--lg-accent-deep); --v-primary-soft: var(--lg-accent-bg); --v-primary-soft-border: var(--lg-accent-soft); --v-primary-tint: var(--lg-accent-bg); --v-focus: var(--lg-accent); --v-teal-1: var(--lg-accent-deep); --v-teal-2: var(--lg-accent-read); --v-teal-3: var(--lg-accent); --v-teal-4: var(--lg-accent-soft); --v-r-shell: var(--lg-r-glass); --v-r-card: var(--lg-r-card); --v-r-item: var(--lg-r-card); --v-r-pill: var(--lg-r-pill); --v-shadow-card: none; --v-shadow-glass: none; /* --vc-* : company chrome + sidebar internals. */ --vc-canvas: var(--lg-page); /* Partner's collapsed-rail count dot: its ONLY consumer hard-codes `color:#fff` on this (#d9a514) = 2.25:1 at 9px. The readable amber carries white at 6.9:1 and still reads as a warning. */ --vc-amber: var(--lg-amber-read); --vc-canvas-alt: var(--lg-page); --vc-paper: var(--lg-white); --vc-card: var(--lg-glass); --vc-fill: var(--lg-page); --vc-hairline: var(--lg-hairline); --vc-heading: var(--lg-ink); --vc-ink: var(--lg-ink); --vc-ink-text: var(--lg-ink-2); /* Real names are --vc-ink-muted / --vc-ink-faint (vacei-canvas.css). This block said --vc-muted / --vc-faint, which nothing reads. */ --vc-ink-muted: var(--lg-ink-3); --vc-ink-faint: var(--lg-ink-3); --vc-danger: var(--lg-negative); /* was #C43C2B: 4.44:1 on its own tint */ --vc-teal: var(--lg-accent-read); /* used as TEXT; --lg-accent is 2.7:1 on a card */ --vc-teal-dark: var(--lg-accent-read); --vc-teal-deep: var(--lg-accent-deep); --vc-btn-ink: var(--lg-accent-deep); --vc-btn-ink-hover: var(--lg-accent-read); --vc-btn-ink-fg: var(--lg-white); --vc-surface-dark: var(--lg-ink); /* -dark-2 / -dark-fg are the real names (vacei-canvas.css:87-88). This block used to say --vc-surface-2 / --vc-surface-fg: that left the real pair on charcoal AND defined a name LiveVisitorsPanel reads as an optional LIGHT strip (`var(--vc-surface-2, transparent)`), painting it deep teal under dark text - 2.07:1 on Support Inbox. */ --vc-surface-dark-2: var(--lg-accent-deep); --vc-surface-dark-fg: var(--lg-white); /* NOT transparent. This token is also a TEXT colour (ComplianceCalendar's "registry changes" stat, MasterOrchestrator's "stages", a4-exact.css:7389) - blanking it to hide the 6px strip made those numbers invisible. The strip itself is cleared by selector in section 9. */ --vc-mint-strip: var(--lg-accent-read); --vc-texture-image: none; --vc-texture-fill: transparent; --vc-r-card: var(--lg-r-card); --vc-r-panel: var(--lg-r-card); --vc-r-chip: var(--lg-r-pill); --vc-shadow-card: none; --vc-shadow-hover: none; --vc-shadow-waiting: none; --vc-sb-bg-open: var(--lg-glass); --vc-sb-text: var(--lg-ink); --vc-sb-muted: var(--lg-ink-3); --vc-sb-hover-bg: var(--lg-accent-bg); --vc-sb-active-bg: var(--lg-accent-bg); --vc-sb-active-fg: var(--lg-accent-deep); --vc-sb-card-bg: var(--lg-glass); --vc-sb-card-border: transparent; --vc-sb-divider: var(--lg-hairline); --vc-sb-shadow-open: none; --vc-sb-active-shadow: none; /* --vacei-* : legacy bridge + the glass recipe. */ /* Partner: --vacei-primary -> --primary-color -> --color-primary, i.e. every `bg-primary text-white` (~490 sites). Must clear AA under white. */ --vacei-primary: var(--lg-accent-read); --vacei-primary-hover: var(--lg-accent-deep); --vacei-accent: var(--lg-accent); --vacei-glass-bg: var(--lg-glass); --vacei-glass-border: transparent; --vacei-glass-shadow: none; --vacei-glass-blur: var(--lg-blur); --vacei-teal-1: var(--lg-accent-deep); --vacei-teal-2: var(--lg-accent-read); --vacei-teal-3: var(--lg-accent); --vacei-teal-4: var(--lg-accent-soft); --vacei-radius-sm: 12px; --vacei-radius-md: var(--lg-r-card); --vacei-radius-lg: var(--lg-r-card); --vacei-radius-xl: var(--lg-r-glass); /* --bk-* : Books palette + the VEE dock skin. */ --bk-canvas: var(--lg-page); --bk-canvas-grad: var(--lg-page); --bk-card: var(--lg-glass); --bk-card-soft: var(--lg-glass-soft); --bk-glass: var(--lg-glass); --bk-glass-border: transparent; --bk-hairline: var(--lg-hairline); --bk-hairline-soft: var(--lg-hairline); --bk-ink: var(--lg-ink); --bk-body: var(--lg-ink-2); --bk-mute: var(--lg-ink-3); --bk-primary: var(--lg-accent-deep); --bk-primary-hover: var(--lg-accent-read); --bk-primary-tint: var(--lg-accent-bg); --bk-primary-glow: var(--lg-accent); --bk-primary-focus: var(--lg-accent); --bk-ai-dark: var(--lg-ink); /* 19 solid buttons with white labels */ --bk-ai-dark-hover: var(--lg-ink-deep); /* black lifts to charcoal, never to teal */ --bk-dc-teal: var(--lg-accent); --bk-dc-teal-deep: var(--lg-accent-deep); --bk-dc-mint: var(--lg-accent-soft); --bk-dc-hero-light: var(--lg-accent-read); --bk-cover-base: var(--lg-accent-deep); /* The Books login/cover ramp, dark -> light like the original. unified froze it to charcoal (#121214...#43434F), so Books' login disagreed with Client's (whose twin ramp --vacei-teal-* is re-pointed above). -4 is the LIGHT end and is also TEXT ON DARK: the eyebrows in AccountingHeroCard / EngagementA4Hero sit on bg-black, and --bk-scene-badge-on-dark aliases it. So it is the bright accent (6.5:1 on black, 5.3:1 on #0F2226) — not -read (3.1:1 there) and not the 22%-alpha -soft that Client's ramp ends on, which is unreadable as text. */ --bk-teal-1: var(--lg-accent-deep); --bk-teal-2: var(--lg-accent-deep); --bk-teal-3: var(--lg-accent-read); --bk-teal-4: var(--lg-accent); /* portal-unified.css re-points --bk-cover-grad to the CARD colour. Heroes in its hero-list are forced to a card with dark ink, so that is harmless there — but the `.bk-on-dark` covers outside that list (landing Hero, global-dashboard greeting) paint this as an overlay under WHITE text: it was white-on-white before this sheet and white-on-90%-white with it. Keep the overlay on the ground. White clears 5.2:1 at its lightest point under the bloom, 6.3:1+ elsewhere. */ --bk-cover-grad: linear-gradient(112deg, var(--lg-accent-deep) 0%, var(--lg-accent-deep) 60%, var(--lg-accent-read) 100%); --bk-radius-card: var(--lg-r-card); /* was --bk-r-card: no such token */ --bk-shadow-card: none; --bk-shadow-glass: none; --bk-shadow-topbar: none; --bk-shadow-primary: none; --bk-shadow-askbar: none; --bk-shadow-popover: none; --bk-shadow-dial: none; --bk-shadow-stack: none; /* --vf-* / --c-* : flow surfaces and the short glass aliases. */ /* --vf-teal is TEXT in ~47 places and the .vf-primary-btn hover fill under white, so it takes the readable accent (6.30:1), not the bright one. */ --vf-teal: var(--lg-accent-read); /* vacei-flow.css hard-codes these three as grey-green literals (#16211f, #2f5d59…#5c8b84) — the last off-palette surfaces on signup/register and the company picker. White text sits on all of them: 6.3:1 worst case. */ --vf-fill: var(--lg-accent-deep); --vf-sweep: var(--lg-cover); --vf-hero: var(--lg-cover); --vf-teal-deep: var(--lg-accent-deep); --vf-mint: var(--lg-accent-soft); --vf-canvas: var(--lg-page); --vf-card: var(--lg-glass); --vf-field-bg: var(--lg-page); --vf-arrow-bg: var(--lg-accent-bg); --vf-surface-hover: var(--lg-glass); --vf-ink: var(--lg-ink); --vf-ok-ink: var(--lg-positive); --vf-ok-bg: rgba(36, 103, 51, 0.10); --vf-warn-ink: var(--lg-amber-read); --vf-warn-bg: rgba(242, 184, 75, 0.15); --vf-alert: var(--lg-negative); --vf-alert-bg: rgba(168, 47, 49, 0.10); --vf-shadow-card: none; --vf-shadow-quote: none; --vf-shadow-soft: none; --vf-shadow-row: none; --vf-shadow-row-hover: none; --c-glass: var(--lg-glass); --c-glass-border: transparent; --c-glass-shadow: none; --c-ink: var(--lg-ink); --c-body: var(--lg-ink-2); --c-mute: var(--lg-ink-3); --c-teal: var(--lg-accent); } /* ------------------------------------------------------------------------- 6. shadcn / Radix bridge — bare "H S% L%" triples consumed as hsl(var(--x)). Pre-computed; a var() holding a hex cannot be composed into a triple. Present in all three; inert names are harmless. ---------------------------------------------------------------------- */ :root:root:root { --background: 90 20% 98%; /* #FAFBF9 */ --foreground: 187 47% 17%; /* #173B40 */ --card: 0 0% 100%; --card-foreground: 187 47% 17%; --popover: 0 0% 100%; --popover-foreground: 187 47% 17%; /* Every token below that carries a WHITE foreground uses --lg-accent-read (#346A76 = 191 39% 33%, 6.30:1), never --lg-accent (#346A76 = 3.23:1). `bg-primary text-primary-foreground` is ~900 call sites across the three apps; at 45% lightness every one of them failed AA. Same correction, for the same reason, as --a4-accent in section 3. --ring/--info keep the bright accent: they are graphical (3:1), not text carriers. Hover = --lg-accent-deep #2A545E = 192 38% 27%. */ --primary: 191 39% 33%; --primary-foreground: 0 0% 100%; --primary-hover: 192 38% 27%; --secondary: 187 16% 33%; /* #465D60 */ --secondary-foreground: 0 0% 100%; --muted: 120 16% 94%; /* #EDF2ED */ --muted-foreground: 189 9% 41%; /* #5F6F72 ~ --lg-ink-3 #607174, one step darker so the rounded triple stays AA (4.6:1) on --muted #EDF2ED */ --accent: 191 39% 33%; --accent-foreground: 0 0% 100%; --success: 133 48% 27%; --warning: 39 87% 62%; /* #F2B84B */ --warning-foreground: 187 47% 17%; --destructive: 359 56% 42%; --destructive-foreground: 0 0% 100%; --info: 191 39% 33%; --border: 137 11% 88%; /* #DCE3DE */ --input: 137 11% 88%; --ring: 191 39% 33%; --radius: 20px; --sidebar-background: 0 0% 100%; --sidebar-foreground: 187 47% 17%; --sidebar-primary: 191 39% 33%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 191 39% 33%; --sidebar-accent-foreground: 0 0% 100%; --sidebar-border: 137 11% 88%; --sidebar-ring: 191 39% 33%; --sidebar-hover: 191 39% 33%; --sidebar-active: 191 39% 33%; --sidebar-logo-bg: 187 47% 17%; /* Flattens the named shadow utilities in any repo that redefines .shadow-* as box-shadow:var(--shadow-). "0 0 #0000", never "none": Tailwind composes these into a comma list with the ring channels, and "none" inside that list invalidates the whole declaration -- which would take the focus ring with it. */ --shadow-xs: 0 0 #0000; --shadow-sm: 0 0 #0000; --shadow-md: 0 0 #0000; --shadow-lg: 0 0 #0000; --shadow-xl: 0 0 #0000; --shadow: 0 0 #0000; } /* ------------------------------------------------------------------------- 7. THE ONE CARD SURFACE Borders are removed BY SELECTOR, never by blanking --portal-border / --a4-hairline -- those tokens are also every table rule, input outline and divider in all three portals. !important is required: portal-unified.css forces border and box-shadow with !important on this same class list at equal specificity. Class names absent from a given repo are inert. ---------------------------------------------------------------------- */ :is(.vacei-card, .vacei-section-card, .vacei-feature-card, .a4-glass-tile, .a4-solid-card, .a4-core, .vc-card, .bk-card, .bk-glass-card, .cdv2-card, .cdv2-panel, .vp-svc-card, .vp-band, .portal-card, .vfw-card, .vgd-svccard, .vacei-glass) { /* SOLID (owner, 2026-09-20). The guide's table reads "Card | #fff (solid)" and section 6 says glass lives only on the hero and the sidebar. At 94% these cards picked up whatever was behind them, which is how a card on the old glass pane ended up invisible. */ background: var(--lg-white) !important; border: 0 !important; border-radius: var(--lg-r-card) !important; box-shadow: none !important; /* !important, like every other line here. Without it portal-unified.css's `.vc-card.vc-card { backdrop-filter: none }` (0,2,0) beat this (0,1,0) and NOTHING in any portal blurred: translucent without blur reads as washed out, not as glass. */ backdrop-filter: var(--lg-blur) !important; } /* Shell and rail geometry. The 24px radius and the blur on .vc-sb are literals inside the vendored sidebar sheet, so they can only be reached by an override at equal specificity and later source order. */ .a4-shell { background: transparent !important; box-shadow: none !important; border-radius: var(--lg-r-glass); } .vc-sb { background: var(--lg-glass) !important; border: 0 !important; border-radius: var(--lg-r-glass) !important; box-shadow: none !important; /* !important, like every other line here. Without it portal-unified.css's `.vc-card.vc-card { backdrop-filter: none }` (0,2,0) beat this (0,1,0) and NOTHING in any portal blurred: translucent without blur reads as washed out, not as glass. */ backdrop-filter: var(--lg-blur) !important; } /* Kills a dead-era shadow that is a literal inside the guarded a4 sheet. */ .a4-nav-item--active, .a4-nav-item--active:hover { box-shadow: none !important; } /* Ring-safe flattening for the utilities no repo redefines. Sets only the shadow channel, leaving var(--tw-ring-shadow) intact so focus survives. */ .shadow-2xl, .shadow-inner, .shadow-2xs { --tw-shadow: 0 0 #0000; } /* ------------------------------------------------------------------------- 8. THE GROUND A fixed pseudo-element, NOT background-attachment:fixed -- iOS Safari ignores fixed attachment and Client ships Capacitor iOS/Android. z-index:-1 sits behind content wherever body establishes a containing block. body is transparent so the layer shows through. ---------------------------------------------------------------------- */ body { background: transparent !important; color: var(--lg-ink); } /* THE GROUND IS A CALM CANVAS (owner, 2026-09-18: Payrix's layout in Santorini's colouring). The render no longer covers the page; it fills the hero panel of a composed page (section 11b, .lg-hero / .lg-cover) and the page itself is a quiet neutral grey, so every piece of wording outside the hero is dark ink on light -- readable by construction. The full-bleed grounds (public/brand/ground-*.jpg, vacei-books-app/tools/glass/render_ground.py) are still generated and still used by the auth screens' own cover panels. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--lg-ground); } /* ------------------------------------------------------------------------- 9. SHELL TRANSPARENCY Author !important beats an inline style attribute, so the shells that paint via style={{...}} are reachable here as long as they carry a class. The ones that do not carry a class need a TSX edit -- see the per-portal notes. ---------------------------------------------------------------------- */ .vc-shell, .bk-mint-strip, .bk-admin, .m-shell, .a4-global-dashboard { background: transparent !important; } .vc-shell { gap: var(--lg-gap); } /* ------------------------------------------------------------------------- 9c. THE PAGE PANE Partner's scroll pane (.portal-page) and Client's company hub painted an OPAQUE canvas over the whole viewport, so the ground never showed on any signed-in screen. Simply clearing them is not safe: most pages are authored as content-on-a-canvas, not cards-on-a-render. A live trial with the pane transparent left page titles, sub-tabs, table heads and "+ Add" tiles as dark ink on the bare render at 1.3-2.2:1. So by default the pane IS the one card surface: 90% white, radius 20. A list page reads as one big glass card, the way the artboard frames its tables. A page that has been composed for the ground -- white title on the render, everything else in cards -- opts out by carrying `.lg-bare` anywhere inside the pane, and the pane clears. Client's wrapper carries no class of its own: CompanyShell.tsx adds `lg-shell` (the one TSX edit section 9 said these shells would need). */ .lg-shell { background: transparent !important; } /* The strip --vc-mint-strip used to draw (see the token's note in section 5). */ .vc-mint-strip { border-top-color: transparent !important; } /* Heroes that were DARK pass `color:'#fff'` inline for their neutral stat; portal-unified.css has since made every hero a white card, so that number is white on white (MBR compliance "companies", calendar "upcoming"). Author !important outranks the inline style. Scoped to the stat values: a white ICON on a coloured chip inside a hero must stay white. */ [class*="hero__stat-value"][style*="color: rgb(255, 255, 255)"], [class*="hero__stat-value"][style*="#fff"] { color: var(--lg-ink) !important; } .portal-page, .lg-shell .vfc-main-scroll { /* Partner and Client KEEP the pane as a card surface for now. Their pages really are authored as content-on-a-canvas (62 page files / 10 with a card class in Partner; 207 / 41 in Client), so clearing this would leave most of their content loose on the ground. Books, which cards everything through BooksTopbar + SectionCard/TableCard, is cleared in section 12. The other two follow once each has had the same route-by-route audit. */ background: var(--lg-glass) !important; /* NO blur on the pane, deliberately. `backdrop-filter` makes an element the containing block of every position:fixed descendant, so an inline (not portalled) modal, toast or dock inside a blurred pane is positioned against the pane instead of the viewport. The pane wraps whole pages; at 90% white the blur is barely perceptible anyway. Small cards on the ground keep it. */ backdrop-filter: none !important; border-radius: var(--lg-r-card); } .lg-pane--padded { padding: 22px 24px 28px; } @media (max-width: 640px) { .lg-pane--padded { padding: 14px 12px 20px; } } .lg-pane--padded:has(.lg-bare) { padding: 0; } :is(.portal-page, .lg-shell .vfc-main-scroll, .lg-pane):has(.lg-bare) { background: transparent !important; backdrop-filter: none !important; } /* A card ON the pane must not blur again: the pane already did, a second pass changes nothing visible, and a list page has 90+ cards. Cards on the bare ground (composed dashboards, Books admin, auth screens) keep theirs. */ :is(.portal-page, .lg-shell .vfc-main-scroll, .lg-pane):not(:has(.lg-bare)) :is(.vacei-card, .vacei-section-card, .vacei-feature-card, .a4-glass-tile, .a4-solid-card, .a4-core, .vc-card, .bk-card, .bk-glass-card, .cdv2-card, .cdv2-panel, .vp-svc-card, .vp-band, .portal-card, .vfw-card, .vgd-svccard, .vacei-glass) { backdrop-filter: none !important; } /* ------------------------------------------------------------------------- 9b. TEXT ON THE GROUND White text placed directly on the render is the single most common way to fail contrast in this system, because the ground is a gradient, not a flat colour. Measured across the four shipped backgrounds, white clears 3:1 on only about half the canvas and 4.5:1 on 11-25% of it. A text-shadow is NOT a contrast mechanism -- WCAG measures the text against its background, and a shadow does not change that background. Anything smaller than 24px on the ground therefore needs a real scrim. .lg-on-render wraps a small block of text in its own local scrim. .lg-ground-scrim is a full-width band, for a header row. Display type of 24px+ (the page H1) may sit on the ground unscrimmed: at that size WCAG's large-text threshold is 3:1, which the calm areas of every background clear. ---------------------------------------------------------------------- */ /* An drawn as a solid primary button. Client and Books colour every anchor from an UNLAYERED `a { color: var(--portal-accent-text) }` in globals.css, which outranks Tailwind's layered `text-white` / `text-primary-foreground`. Under this sheet the link colour and the primary fill are the same teal, so those labels vanish (offline "Retry", ServiceEngagement, OrganizationCard). `~=` matches the bare token only — not `bg-primary/5` or `hover:bg-primary`, which are tints that keep dark text. */ :root a[class~="bg-primary"], :root a[class~="bg-primary"]:hover { color: var(--lg-white); } /* A solid STATUS fill keeps its white label even inside a header. Reds only: unified also repaints a header's `bg-primary` buttons to soft glass, so forcing white there makes the label vanish (seen on Partner's Back button). portal-unified.css forces every `.text-white` under its hero/header list to `--portal-ink !important` (its covers became white cards). That also caught the notification count in Partner's top bar: dark ink on the red `bg-a4-danger` badge = 2.80:1. White there is 5.7:1. */ :root:root :is([class~="bg-a4-danger"], [class~="bg-destructive"], [class~="bg-red-500"], [class~="bg-red-600"]):is(.text-white, .text-destructive-foreground) { color: var(--lg-white) !important; } .lg-on-render { position: relative; isolation: isolate; color: #FFFFFF; } .lg-on-render::before { content: ""; position: absolute; inset: -6px -12px; z-index: -1; border-radius: 12px; background: rgba(15, 34, 38, 0.58); } .lg-ground-scrim { position: relative; isolation: isolate; color: #FFFFFF; } .lg-ground-scrim::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 34, 38, 0.62) 0%, rgba(15, 34, 38, 0) 100%); pointer-events: none; } /* ------------------------------------------------------------------------- 11. THE PORTAL CHROME (artboard: "Portal Dashboard Clean") No sidebar and no header bar. The chrome floats on the ground: [=] VACEI ( Tab )( Tab )( Active ) (AV) Two tiers only. CARD = --lg-glass (the hamburger tile, the active tab, the menu's inner card). THIN = --lg-thin + bright hairline + blur (inactive tabs, chips, the ring round the menu and the "Up next" card). Text on THIN is white and relies on the wash in section 8. The top bars deliberately do NOT carry .vacei-header-bar / .vc-header / .vacei-topbar any more: portal-unified.css repaints every button inside those to a white-card skin at (0,7,0) !important. ---------------------------------------------------------------------- */ /* Every app ships a border-box reset; stated here so the chrome does not depend on it (the brand-kit preview has none). */ :is(.lg-frame, .lg-topbar, .lg-menu, .lg-hero, .lg-upnext, .lg-grid, .lg-stat, .lg-panel, .lg-pane), :is(.lg-frame, .lg-topbar, .lg-menu, .lg-hero, .lg-upnext, .lg-grid, .lg-stat, .lg-panel, .lg-pane) * { box-sizing: border-box; } .lg-thin { background: var(--lg-thin); border: 1px solid var(--lg-thin-border); backdrop-filter: var(--lg-thin-blur); color: var(--lg-white); } /* --- the frame ---------------------------------------------------------- */ /* The artboard's page padding. The custom properties are read by the fixed hamburger so it lands exactly on the frame's top-left corner. */ .lg-frame { --lg-shell-pad-y: 30px; --lg-shell-pad-x: 32px; padding: var(--lg-shell-pad-y) var(--lg-shell-pad-x) 0 !important; gap: 0 !important; background: transparent !important; } @media (max-width: 1023px) { .lg-frame { --lg-shell-pad-y: 14px; --lg-shell-pad-x: 14px; } } /* Window-scrolling shells (Client, Books) end the page with the same air. */ .lg-frame--page, .lg-shell.lg-frame { padding-bottom: var(--lg-shell-pad-y) !important; } /* A scroll pane that runs to the bottom edge of the viewport keeps square bottom corners; rounding them would show as two notches of bare render. */ .lg-frame .portal-page { border-radius: var(--lg-r-card) var(--lg-r-card) 0 0; } .lg-frame .portal-page:has(.lg-bare) { padding: 0 0 44px; } /* The pane scrolls; its scrollbar is not part of the design (the reference has none). Still scrolls by wheel, touch, keyboard and drag-select. */ .lg-frame .portal-page { scrollbar-width: none; } .lg-frame .portal-page::-webkit-scrollbar { display: none; } /* --- top bar ------------------------------------------------------------ */ .lg-topbar { margin-bottom: 18px; position: relative; /* 60 = the layer the three old bars held (Books APP_BAR_Z, Client's sticky bar): the account / notification / search popovers hang off this stacking context and must clear a page's own sticky sub-headers. The menu is 65. */ z-index: 60; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 46px; flex-shrink: 0; color: var(--lg-white); font-family: var(--lg-font); } /* Desktop: the hamburger is position:fixed at the shell's top-left corner (see .lg-menu--fixed), so the bar starts one tile + one gap further in. */ @media (min-width: 1024px) { .lg-topbar--with-menu { padding-left: 60px; } } /* No frame around it (Client /companies): the bar pads itself. */ .lg-topbar--standalone { width: auto; margin: 0; padding: 30px 32px 0; } @media (max-width: 1023px) { .lg-topbar--standalone { padding: 14px 14px 0; } } .lg-topbar__spacer { flex: 1 1 auto; min-width: 0; } .lg-topbar__group { display: flex; align-items: center; gap: 8px; min-width: 0; } .lg-lockup { display: block; height: 34px; width: auto; flex-shrink: 0; } /* --- pills -------------------------------------------------------------- */ :root .lg-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 0; padding: 0 22px; border-radius: 20px; border: 1px solid var(--lg-thin-border); background: var(--lg-thin-smoke); backdrop-filter: var(--lg-thin-blur); color: var(--lg-white); font: 500 14px/1 var(--lg-font); white-space: nowrap; text-decoration: none; cursor: pointer; /* Never squeeze a label out of its pill; a pill that must truncate sets its own max-width and wraps its text in a `truncate` span. */ flex-shrink: 0; transition: background 0.18s ease, color 0.18s ease; } :root .lg-pill:hover { background: rgba(15, 34, 38, 0.58); color: var(--lg-white); } :root .lg-pill :is(svg, span) { color: inherit; } :root .lg-pill.is-active, :root .lg-pill[aria-current="page"], :root .lg-pill--card { padding: 0 24px; border-color: transparent; background: var(--lg-glass); backdrop-filter: none; color: var(--lg-ink); font-weight: 600; } :root .lg-pill--card:hover, :root .lg-pill.is-active:hover { background: var(--lg-white); color: var(--lg-ink); } :root .lg-pill--solid { border-color: transparent; background: var(--lg-accent-read); backdrop-filter: none; color: var(--lg-white); font-weight: 600; } :root .lg-pill--solid:hover { background: var(--lg-accent-deep); } :root .lg-pill--icon { position: relative; width: 40px; padding: 0; flex-shrink: 0; } :root .lg-pill__count { position: absolute; top: -4px; right: -4px; display: flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--lg-negative); color: var(--lg-white); font: 600 9.5px/1 var(--lg-font); } :root .lg-avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--lg-accent-read); color: var(--lg-white); font: 600 13px/1 var(--lg-font); text-decoration: none; } /* A search field drawn as a CARD pill. */ :root .lg-search { height: 40px; border: 0 !important; border-radius: 20px !important; background: var(--lg-glass) !important; color: var(--lg-ink) !important; font: 500 14px/1 var(--lg-font); } :root .lg-search::placeholder { color: var(--lg-ink-3); } /* The ground is bright now, as the owner's reference has it, so the white chrome takes the same help the reference's does: a soft deep-teal shadow under on-ground text and icons. It is a legibility aid, not a contrast measure -- WCAG ignores shadows. */ :root :is(.lg-pill:not(.lg-pill--card):not(.is-active):not([aria-current="page"]), .lg-chip, .lg-title, .lg-section-title, .lg-cover__sub) { text-shadow: 0 1px 2px rgba(15, 34, 38, 0.45), 0 0 14px rgba(15, 34, 38, 0.30); } :root .lg-pill:not(.lg-pill--card):not(.is-active) svg, .lg-lockup { filter: drop-shadow(0 1px 2px rgba(15, 34, 38, 0.45)); } /* --- status chip -------------------------------------------------------- */ .lg-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px; border-radius: 17px; border: 1px solid var(--lg-thin-border); background: var(--lg-thin-smoke); backdrop-filter: var(--lg-thin-blur); color: var(--lg-white); font: 600 12.5px/1 var(--lg-font); white-space: nowrap; } .lg-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: #45C461; } .lg-chip__dot--amber { background: var(--lg-amber); } .lg-chip__dot--red { background: #FF6B6B; } /* --- the hamburger and its flyout --------------------------------------- */ .lg-menu { position: relative; /* Above the top bar (60), BELOW every overlay: Partner's scale puts scrims at 70, dialogs at 80, popovers at 90. At 90 the hamburger floated over an open dialog's scrim and stayed clickable. */ z-index: 65; flex-shrink: 0; width: 46px; height: 46px; font-family: var(--lg-font); } @media (min-width: 1024px) { .lg-menu--fixed { position: fixed; top: var(--lg-shell-pad-y, 30px); left: var(--lg-shell-pad-x, 32px); } } /* "Only opens when you get close": a halo round the tile while closed; while open, the artboard's 330x680 zone so the pointer can travel to the panel and drift a little without losing it. Invisible, and part of .lg-menu, so the host's pointerenter / pointerleave see it. */ .lg-menu::before { content: ""; position: absolute; inset: -22px -10px -22px -22px; } .lg-menu.is-open::before { inset: -22px auto auto -22px; width: 330px; height: min(720px, 100vh); } :root .lg-menu__tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 13px; border: 0; border-radius: 14px; background: var(--lg-glass); backdrop-filter: blur(24px); cursor: pointer; } .lg-menu__tile > span { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--lg-ink); transition: width 0.2s ease; } /* "Something in here is waiting on you" — visible with the menu closed. */ .lg-menu__dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--lg-amber); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92); } .lg-menu__tile > span:nth-child(2) { width: 14px; } .lg-menu.is-open .lg-menu__tile > span:nth-child(2) { width: 20px; } .lg-menu__ring { position: absolute; top: 66px; left: 0; width: 286px; padding: 14px; border-radius: 30px; border: 1px solid var(--lg-thin-border); background: var(--lg-thin); backdrop-filter: var(--lg-thin-blur); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(0.97); transform-origin: top left; transition: opacity 0.26s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.36s; } .lg-menu.is-open .lg-menu__ring { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.26s ease, transform 0.36s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; } @media (prefers-reduced-motion: reduce) { .lg-menu__ring, .lg-menu.is-open .lg-menu__ring { transform: none; transition: opacity 0.12s linear, visibility 0s; } } /* The panel is each portal's EXISTING nav element (Partner .vc-sb, Books'