🐞 fix: Update styles for proper background

tests/aura-bg.spec.js

@@ -0,0 +1,58 @@
+const { test, expect } = require('@playwright/test');
+
+test.use({ viewport: { width: 1920, height: 1080 } });
+
+test.describe('aura-bg Carbon Blue gradient (global, fixed background)', () => {
+  test('body carries the dark base color that the aura layers blend against', async ({ page }) => {
+    await page.goto('/');
+
+    // Without the body color, mix-blend-mode on the aura layers has nothing
+    // to composite against and the gradient disappears.
+    const bodyBg = await page.evaluate(() => getComputedStyle(document.body).backgroundColor);
+    // #100e0b = rgb(16, 14, 11)
+    expect(bodyBg).toBe('rgb(16, 14, 11)');
+  });
+
+  test('.aura-bg renders globally as a fixed viewport layer (not a per-template wrapper)', async ({ page }) => {
+    await page.goto('/');
+
+    // aura-bg is rendered once in header.php and must be position:fixed so
+    // it covers the entire viewport behind all content regardless of scroll.
+    const auraBg = page.locator('.aura-bg').first();
+    await expect(auraBg).toBeAttached();
+
+    const position = await auraBg.evaluate((el) => getComputedStyle(el).position);
+    expect(position).toBe('fixed');
+
+    // z-index: -1 puts the gradient behind page content. Content must sit
+    // on top via its own stacking context (which the body and main do not
+    // create, so the negative z-index is safe).
+    const zIndex = await auraBg.evaluate((el) => getComputedStyle(el).zIndex);
+    expect(zIndex).toBe('-1');
+
+    // pointer-events: none so clicks pass through to content underneath.
+    const pointerEvents = await auraBg.evaluate((el) => getComputedStyle(el).pointerEvents);
+    expect(pointerEvents).toBe('none');
+  });
+
+  test('.aura-layer-1 renders the Carbon Blue linear gradient', async ({ page }) => {
+    await page.goto('/');
+
+    const layer1 = page.locator('.aura-layer-1').first();
+    await expect(layer1).toBeAttached();
+
+    const bgImage = await layer1.evaluate((el) => getComputedStyle(el).backgroundImage);
+    expect(bgImage).toMatch(/linear-gradient/);
+  });
+
+  test('.aura-bg is not isolated (no stacking context traps blend modes)', async ({ page }) => {
+    await page.goto('/');
+
+    // isolation: isolate on the .aura-bg parent would trap mix-blend-mode
+    // children inside an empty container, preventing them from blending
+    // with the body's #100e0b beneath. The global fixed layer must let
+    // blend modes reach through to the body.
+    const isolation = await page.locator('.aura-bg').first().evaluate((el) => getComputedStyle(el).isolation);
+    expect(isolation).not.toBe('isolate');
+  });
+});