/* XRA — monochrome override. Loaded last in so it wins over the captured vendor stylesheets without editing their byte-exact bytes. Every colour here is neutral: the palette is black, white, and the greys between them. */ :root[data-domain="marketing"], :root[data-domain="product"], :root { /* The captured theme's violet. Neutralised, not removed — these tokens are referenced with /20 and /30 alpha for chips and hover states, so a light neutral keeps those surfaces reading as subtle grey instead of purple. */ --unveil-accent-color-dark: #ededed; --unveil-accent-color-light: #141414; /* XRA scale — used by the sections and diagrams this reskin adds. */ --xra-ink: #f2f2f2; --xra-ink-subtle: #a1a1a1; --xra-ink-faint: #6b6b6b; --xra-surface: #000000; --xra-surface-raised: #0b0b0b; --xra-surface-sunken: #060606; --xra-line: #232323; --xra-line-bold: #3a3a3a; } /* The display-p3 refinement of the same violet, defined in a @supports block in the vendor sheet — override it in kind or wide-gamut screens keep it. */ @supports (color: color(display-p3 1 1 1)) { :root[data-domain="marketing"], :root[data-domain="product"], :root { --unveil-accent-color-dark: color(display-p3 0.929 0.929 0.929); --unveil-accent-color-light: color(display-p3 0.078 0.078 0.078); } } /* Demoted mockup controls: these are drawings of an interface, so they must not offer a pointer, a focus ring, or a hover state that implies a click. */ [role="presentation"][aria-hidden="true"] { cursor: default; } [role="presentation"][aria-hidden="true"]:hover { opacity: inherit; } /* Mobile nav. The capture's small-screen navigation is a full-height drawer opened by a hamburger. That hamburger opened a menu this clone no longer has, so it was removed — which left the drawer permanently open and pushing ~700px of empty column above the content. Below the desktop breakpoint it becomes a compact static strip instead of an overlay. */ @media (max-width: 1023px) { .xra-navwrap { position: static !important; display: block !important; border-bottom: 0 !important; background: transparent !important; } .xra-navwrap > ul { flex-direction: row !important; flex-wrap: wrap; gap: 2px; padding-top: 0 !important; } .xra-navwrap > ul > li > a, .xra-navwrap > ul > li > span { padding: 6px 10px !important; font-size: 13px !important; } /* the sign-in / start-cloning pair already exists in the header bar itself */ .xra-navwrap > nav[aria-label="account"] { display: none !important; } } /* One of the captured admin illustrations is positioned deliberately outside its frame (right:-25% plus a full translate). On desktop it is absorbed by the layout; at phone widths it pushed the document 57px wider than the viewport and produced a horizontal scrollbar on /admin. Clipping the horizontal axis below the desktop breakpoint contains it. The docs sidebar is the only sticky element and it is static at these widths, so nothing depends on the scroll container this creates. */ @media (max-width: 1023px) { html, body { overflow-x: clip; } }