/* ========================================================================== The Panel — design tokens ========================================================================== */ :root { /* Colour */ --ink: oklch(0.19 0.012 235); --ink-soft: oklch(0.36 0.010 235); --muted: oklch(0.55 0.008 235); --page: oklch(0.985 0.003 235); --surface: #ffffff; --line: oklch(0.92 0.004 235); --accent: oklch(0.72 0.15 155); --accent-ink: oklch(0.52 0.11 165); /* Radius */ --radius-card: 10px; --radius-chip: 999px; --radius-btn: 8px; /* Spacing scale — 4 8 12 16 24 32 48 64, nothing in between */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Fonts */ --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; } /* No shadows, no gradients, anywhere in Panel-owned surfaces. Depth comes from 1px borders only. Scoped to our own theme surfaces rather than the whole DOM, so third-party plugin UI (cookie banner, admin bar, etc.) is untouched. */ body.panel-theme :is(header, footer, main, .site, .ast-container, article, aside) :not(img):not(svg) { box-shadow: none !important; } body.panel-theme :is(header, footer, main, .site, .ast-container, article, aside) { background-image: none; } /* Astra's own CSS puts .ast-container into flexbox (row, on desktop, when a sidebar layout like ast-right-sidebar is the site's default) since it normally expects exactly #primary + #secondary as children. None of our templates use that structure at all - we render our own layout entirely within .ast-container - so that inherited flex-row behaviour was laying our hero and page sections out side by side instead of stacked. Force it back to a plain block container regardless of which Astra layout classes are on . */ body.panel-theme .ast-container { display: block !important; }