/* * The account chrome (themes lane, 2026-11-04; docs/estate/ACCOUNT_EXPERIENCE_BAR.md, R-088). Loaded with the account frame * and the community pages (nexus_account_enqueue, nexus_community_page). Tokens only: no colour, size or font is a literal * except the geometry of the two cover patterns. Dark by default, Light from the kit's tokens, the accent is the network's. * * It owns what every child theme must agree on, so the community plugin's markup (#nxc-member[data-head][data-nav]) sits the * same in Ohio, BuddyX Pro, Cariera, MyListing, Campoal and the native theme: * 1. the sticky stack variables (the estate header, then the 48 px bar, then the tab bar): --nx-acct-bar-h and friends; * 2. the estate cover patterns (hex, field) for a member with no cover image; * 3. motion: 150 to 200 ms ease-out, reduced motion honoured; * 4. guards: nothing a theme prints may float over the account rail or squeeze its two columns. */ /* 1. The sticky stack. --nxh-visible-bottom is where the estate header's visible edge is (0 once it has scrolled away); the 48 px compact header sticks there, the tab bar under it. A plugin or theme never hard-codes an offset: it uses these. */ :root { --nx-acct-bar-h: 3rem; --nx-acct-tabs-h: 2.75rem; /* the larger of the estate header's visible edge and the WordPress admin bar (fixed above everything, 0 when absent) */ --nx-acct-bar-top: max(var(--nxh-visible-bottom, 0px), var(--wp-admin--admin-bar--height, 0px)); --nx-acct-tabs-top: calc(max(var(--nxh-visible-bottom, 0px), var(--wp-admin--admin-bar--height, 0px)) + var(--nx-acct-bar-h)); --nx-acct-stack-h: calc(var(--nx-acct-bar-h) + var(--nx-acct-tabs-h)); --nx-ease-out: cubic-bezier(.16, .84, .3, 1); } /* An anchor or a focused control never lands under the stack. */ #nxc-member :is([id], :target) { scroll-margin-block-start: calc(var(--nx-acct-bar-top) + var(--nx-acct-stack-h) + .5rem); } /* 3. Motion that explains: one duration pair and one curve for the account chrome; none when the visitor asks for none. */ #nxc-member :is(a, button, summary, [role="tab"], .nxc-cover, .nxc-avatar) { transition-property: color, background-color, border-color, box-shadow, opacity, transform; transition-duration: var(--nx-motion-fast); transition-timing-function: var(--nx-ease-out); } #nxc-member :is(.nxc-head, .nxc-strip, .nxc-main, .nxc-body) { animation-timing-function: var(--nx-ease-out); } @media (prefers-reduced-motion: reduce) { :root { --nx-motion-fast: .01ms; --nx-motion-base: .01ms; } #nxc-member *, #nxc-member *::before, #nxc-member *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* 2. Cover patterns. A cover with no image is never an empty block: .nxc-cover (or any .nx-cover) takes data-pattern="hex" or "field". The pattern is a mask over the network accent, so it follows every accent and both modes; the block under it is the accent's soft tint on the page surface. The pattern fades out toward the bottom edge (a mask layer, not a fill) so the avatar and name stay legible. */ :is(.nxc-cover, .nx-cover)[data-pattern] { position: relative; isolation: isolate; overflow: hidden; background-color: var(--nx-accent-soft, var(--nx-bg-muted)); } :is(.nxc-cover, .nx-cover)[data-pattern]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } :is(.nxc-cover, .nx-cover)[data-pattern]::before { background-color: var(--nx-accent); opacity: .38; -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; } /* hex: a flat-top hexagon grid, one stroke weight */ :is(.nxc-cover, .nx-cover)[data-pattern="hex"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.25'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/%3E%3Cpath d='M28 63v33M55 47.5 83 63M1 47.5-27 63'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, currentColor 25%, transparent 95%); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.25'%3E%3Cpath d='M28 1 55 16.5v31L28 63 1 47.5v-31z'/%3E%3Cpath d='M28 63v33M55 47.5 83 63M1 47.5-27 63'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, currentColor 25%, transparent 95%); -webkit-mask-size: 56px 97px, 100% 100%; mask-size: 56px 97px, 100% 100%; } /* field: contour lines, as a map of a field of values */ :is(.nxc-cover, .nx-cover)[data-pattern="field"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.25'%3E%3Cpath d='M0 20c40-24 80 24 120 0s80 24 120 0'/%3E%3Cpath d='M0 40c40-24 80 24 120 0s80 24 120 0'/%3E%3Cpath d='M0 60c40-24 80 24 120 0s80 24 120 0'/%3E%3Cpath d='M0 80c40-24 80 24 120 0s80 24 120 0'/%3E%3Cpath d='M0 100c40-24 80 24 120 0s80 24 120 0'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, currentColor 25%, transparent 95%); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.25'%3E%3Cpath d='M0 20c40-24 80 24 120 0s80 24 120 0'/%3E%3Cpath d='M0 40c40-24 80 24 120 0s80 24 120 0'/%3E%3Cpath d='M0 60c40-24 80 24 120 0s80 24 120 0'/%3E%3Cpath d='M0 80c40-24 80 24 120 0s80 24 120 0'/%3E%3Cpath d='M0 100c40-24 80 24 120 0s80 24 120 0'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, currentColor 25%, transparent 95%); -webkit-mask-size: 240px 120px, 100% 100%; mask-size: 240px 120px, 100% 100%; } [dir="rtl"] :is(.nxc-cover, .nx-cover)[data-pattern="field"]::before { transform: scaleX(-1); } @media (forced-colors: active) { :is(.nxc-cover, .nx-cover)[data-pattern]::before { background-color: CanvasText; opacity: .2; } } /* 4. Guards. Themes print floating furniture of their own; on an account or community page it sits over the rail and the content, so it steps aside: Ohio's vertical "Scroll to top" bar and its cursor-follow dot (also hidden site-wide where the estate header is drawn, inc/nexus-theme-fit.php), the other themes' fixed back-to-top and cursor effects. The estate's own Back to top and dock remain. */ body:has(#nxc-member) :is(ul.elements-bar > li:has(> .scroll-top), .circle-cursor, .cursor-follower, .mouse-cursor, .cursor-dot, .cursor-outline, .c27-back-to-top, .scroll-to-top, #scroll-to-top, #back-to-top, .back-to-top-theme) { display: none !important; } /* the two columns: no theme rule squeezes the rail or the main column below their floor */ #nxc-member .nxc-layout { min-inline-size: 0; } #nxc-member .nxc-main { min-inline-size: 0; } @media (min-width: 64rem) { #nxc-member .nxc-layout { align-items: start; } } /* BuddyPress's own horizontal-nav rule (".buddypress-wrap.bp-dir-hori-nav nav") puts a 0 2px 12px #fafafa glow on every