/* ========================================================================== Home aurora (design test, owner 2026-10-21): a soft aurora glow in the brand colours behind the hero, glass cards for a few home items and a slowly turning glowing border on the key tiles. VISUAL ONLY: no text, order or behaviour changes. Scope: HOME PAGE ONLY. functions.php (region "ds:aurora") enqueues this file on the front page alone and, in the same callback, adds the body class `mhome-aurora`; every rule below starts with body.mhome-aurora, so no other page, panel, the installable app (its own Expo export) or an email can ever match. Brands: MentaYar = teal / mint with a hint of blue and violet (tokens --ds-brand #00A693, --ds-focus-on-dark #5CD6C6, --ds-f-blue-ink #1D4ED8, --ds-f-violet-ink #6D28D9); RavanLine (body.is-ravanline) = green / mint only (--ds-brand, --ds-action, the logo's deep green #0B5D4E; owner 2026-10-21: no warm sand). The glow colours are those token values at low alpha (custom properties below), because rgba() cannot take a hex token. Performance: the aurora is two pseudo-element layers animated with transform/opacity only (compositor), plain radial gradients (no filter: blur, no canvas/WebGL, no image, no request). Section echoes are static. Glass uses backdrop-filter only from 768px up; phones get a lighter translucent fill without blur. The glowing border turns (one registered custom property, @property) for the first ~24 s and on hover, then only breathes with opacity. Accessibility: prefers-reduced-motion = everything still (static glow); prefers-contrast: more and forced-colors = plain solid cards, no aurora, no rings. Text contrast over the glow stays AA (checked by sampling the rendered page). ROLLBACK: delete the `ds:aurora` region in wp-content/themes/mentayar/functions.php (one add_action: it both enqueues this file and adds the body class) and purge the page cache (admin Settings screen). Nothing else refers to this file. ========================================================================== */ @property --mha-angle { syntax: ""; inherits: false; initial-value: 0deg; } body.mhome-aurora { /* glow colours (MentaYar) */ --mha-a: rgba(0, 166, 147, 0.38); /* --ds-brand */ --mha-b: rgba(29, 78, 216, 0.17); /* --ds-f-blue-ink */ --mha-c: rgba(109, 40, 217, 0.13); /* --ds-f-violet-ink */ --mha-d: rgba(92, 214, 198, 0.42); /* --ds-focus-on-dark (mint) */ --mha-e: rgba(0, 122, 106, 0.14); /* --ds-action */ --mha-base: linear-gradient(180deg, #F2FAF8 0%, var(--ds-bg) 100%); --mha-echo-1: rgba(0, 166, 147, 0.10); --mha-echo-2: rgba(29, 78, 216, 0.06); /* glass */ --mha-glass: rgba(255, 255, 255, 0.58); --mha-glass-solid: rgba(255, 255, 255, 0.82); --mha-glass-line: rgba(255, 255, 255, 0.72); --mha-glass-shadow: 0 0 0 1px rgba(23, 43, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 12px 32px -14px rgba(23, 43, 42, 0.24); /* rings: on a dark tile / on a light card */ --mha-ring-dark: conic-gradient(from var(--mha-angle), rgba(92, 214, 198, 0) 0deg, #5CD6C6 70deg, #D9FBF4 115deg, #8FB0FF 160deg, rgba(143, 176, 255, 0) 220deg, rgba(92, 214, 198, 0) 360deg); --mha-ring-light: conic-gradient(from var(--mha-angle), rgba(0, 166, 147, 0) 0deg, #00A693 70deg, #5CD6C6 115deg, #6D8BFF 165deg, rgba(109, 139, 255, 0) 225deg, rgba(0, 166, 147, 0) 360deg); --mha-glow: 0 14px 34px -14px rgba(0, 166, 147, 0.55); } body.mhome-aurora.is-ravanline { /* RavanLine: green and mint only (its logo and button colours), no blue/violet; owner 2026-10-21 did not like the warm sand */ --mha-a: rgba(0, 166, 147, 0.30); /* --ds-brand */ --mha-b: rgba(11, 93, 78, 0.12); /* deep logo green */ --mha-c: rgba(126, 196, 160, 0.16); /* sage */ --mha-d: rgba(92, 214, 198, 0.36); /* mint */ --mha-e: rgba(0, 122, 106, 0.12); /* --ds-action */ --mha-base: linear-gradient(180deg, #F0F8F5 0%, var(--ds-bg) 100%); --mha-echo-1: rgba(0, 166, 147, 0.09); --mha-echo-2: rgba(11, 93, 78, 0.05); --mha-ring-dark: conic-gradient(from var(--mha-angle), rgba(92, 214, 198, 0) 0deg, #5CD6C6 70deg, #D9FBF4 115deg, #A8DCC0 160deg, rgba(168, 220, 192, 0) 220deg, rgba(92, 214, 198, 0) 360deg); --mha-ring-light: conic-gradient(from var(--mha-angle), rgba(0, 166, 147, 0) 0deg, #00A693 70deg, #5CD6C6 115deg, #0B5D4E 165deg, rgba(11, 93, 78, 0) 225deg, rgba(0, 166, 147, 0) 360deg); --mha-glow: 0 14px 34px -14px rgba(0, 166, 147, 0.5); } /* phones and tablets: the text column sits right on the glow, so the two strongest colours step down (AA for the grey lead line) */ @media (max-width: 900px) { body.mhome-aurora { --mha-a: rgba(0, 166, 147, 0.20); --mha-b: rgba(29, 78, 216, 0.11); --mha-d: rgba(92, 214, 198, 0.22); } body.mhome-aurora.is-ravanline { --mha-a: rgba(0, 166, 147, 0.20); --mha-d: rgba(92, 214, 198, 0.24); } } /* ---------- 1. Aurora behind the hero: two slowly drifting layers under the content ---------- */ body.mhome-aurora .home-hero { isolation: isolate; background: var(--mha-base); } /* the hero now isolates its layers, which would surface the accent underline that the old page never showed (it sat under the hero background): keep it hidden so the headline looks exactly as before */ body.mhome-aurora .home-hero__accent::after { display: none; } body.mhome-aurora .home-hero::after, body.mhome-aurora .home-hero__inner::after { content: ""; position: absolute; z-index: -1; pointer-events: none; will-change: transform; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%); } body.mhome-aurora .home-hero::after { inset: -18% -12% -6%; background: radial-gradient(38% 46% at 20% 26%, var(--mha-a), transparent 70%), radial-gradient(34% 40% at 82% 18%, var(--mha-b), transparent 72%), radial-gradient(42% 38% at 58% 70%, var(--mha-c), transparent 72%); animation: mha-drift-a 26s ease-in-out infinite alternate; } body.mhome-aurora .home-hero__inner::after { inset: -30% -20% -10%; background: radial-gradient(55% 22% at 32% 38%, var(--mha-d), transparent 70%), radial-gradient(45% 20% at 74% 58%, var(--mha-e), transparent 72%); animation: mha-drift-b 34s ease-in-out infinite alternate-reverse; } @keyframes mha-drift-a { 0% { transform: translate3d(-3%, -2%, 0) rotate(-4deg) scale(1); } 50% { transform: translate3d(3%, 2%, 0) rotate(3deg) scale(1.08); } 100% { transform: translate3d(-1%, 3%, 0) rotate(-1deg) scale(1.03); } } @keyframes mha-drift-b { 0% { transform: translate3d(4%, 0, 0) rotate(6deg) scale(1.05); opacity: 0.7; } 50% { transform: translate3d(-3%, 3%, 0) rotate(-3deg) scale(1); opacity: 1; } 100% { transform: translate3d(1%, -2%, 0) rotate(2deg) scale(1.1); opacity: 0.8; } } /* faint, still echoes of the glow behind two later sections (how it works, the install band) */ body.mhome-aurora section[aria-labelledby="pub-steps-title"], body.mhome-aurora .mhome-install-wrap { position: relative; isolation: isolate; overflow: hidden; } body.mhome-aurora section[aria-labelledby="pub-steps-title"]::before, body.mhome-aurora .mhome-install-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 70% at 14% 30%, var(--mha-echo-1), transparent 70%), radial-gradient(36% 60% at 86% 76%, var(--mha-echo-2), transparent 70%); } body.mhome-aurora .mhome-install-wrap::before { background: radial-gradient(45% 80% at 78% 40%, var(--mha-echo-1), transparent 70%), radial-gradient(35% 70% at 18% 70%, var(--mha-echo-2), transparent 70%); } /* ---------- 2. Glass cards: translucent fill, white inner highlight, soft shadow ---------- */ body.mhome-aurora .home-hero__eyebrow, body.mhome-aurora .home-hero__trust li, body.mhome-aurora .home-hero__chip, body.mhome-aurora .home-bigtile--soft, body.mhome-aurora .home-spotlight, body.mhome-aurora .home-stats__list, body.mhome-aurora section[aria-labelledby="pub-steps-title"] .ds-step, body.mhome-aurora .mhome-install { background: var(--mha-glass-solid); border-color: var(--mha-glass-line); box-shadow: var(--mha-glass-shadow); } body.mhome-aurora .home-bigtile--soft:hover, body.mhome-aurora .home-bigtile--soft:focus-visible { border-color: var(--mha-glass-line); box-shadow: var(--mha-glass-shadow), var(--mha-glow); } /* a glass card is its own stacking layer (backdrop-filter), so the arrow each step draws into the gap would slip under the next card: earlier cards sit above later ones */ body.mhome-aurora section[aria-labelledby="pub-steps-title"] .ds-step:nth-child(1) { z-index: 3; } body.mhome-aurora section[aria-labelledby="pub-steps-title"] .ds-step:nth-child(2) { z-index: 2; } body.mhome-aurora section[aria-labelledby="pub-steps-title"] .ds-step:nth-child(3) { z-index: 1; } body.mhome-aurora .home-spotlight:hover { box-shadow: var(--mha-glass-shadow), 0 30px 56px -16px rgba(15, 23, 43, 0.22); } @media (min-width: 768px) { @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body.mhome-aurora .home-hero__eyebrow, body.mhome-aurora .home-hero__trust li, body.mhome-aurora .home-hero__chip, body.mhome-aurora .home-bigtile--soft, body.mhome-aurora .home-spotlight, body.mhome-aurora .home-stats__list, body.mhome-aurora section[aria-labelledby="pub-steps-title"] .ds-step, body.mhome-aurora .mhome-install { background: var(--mha-glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } } } /* ---------- 3. Glowing border: a thin ring of light that turns slowly around the key tiles ---------- The turning light repaints the ring (an animated @property angle runs on the main thread), so it turns three times when the page opens (about 24 s), then rests and only "breathes" (opacity: compositor only, no repaint); hovering or focusing a tile turns its light again. */ @supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { body.mhome-aurora .home-bigtile--primary::before, body.mhome-aurora .home-bigtile--soft::before, body.mhome-aurora .mhome-install::after { content: ""; position: absolute; inset: -2px; z-index: 1; pointer-events: none; padding: 2px; border-radius: inherit; --mha-angle: 200deg; background: var(--mha-ring-light); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: mha-ring 8s linear 3, mha-breathe 5s ease-in-out 24s infinite alternate; } body.mhome-aurora .home-bigtile--primary::before { background: var(--mha-ring-dark); } body.mhome-aurora .home-bigtile--soft::before { animation-delay: -3s, 24s; opacity: 0.85; } /* the install card clips its overflow: its ring sits just inside the edge */ body.mhome-aurora .mhome-install::after { inset: 0; animation-delay: -5s, 24s; opacity: 0.8; } body.mhome-aurora .home-bigtile--primary:hover::before, body.mhome-aurora .home-bigtile--primary:focus-visible::before, body.mhome-aurora .home-bigtile--soft:hover::before, body.mhome-aurora .home-bigtile--soft:focus-visible::before { animation: mha-ring 5s linear infinite; opacity: 1; } } body.mhome-aurora .home-bigtile--primary { box-shadow: var(--ds-shadow-card), var(--mha-glow); } @keyframes mha-ring { from { --mha-angle: 200deg; } to { --mha-angle: 560deg; } } @keyframes mha-breathe { from { opacity: 0.5; } to { opacity: 1; } } /* ---------- 4. Less motion, more contrast, print ---------- */ @media (prefers-reduced-motion: reduce) { body.mhome-aurora .home-hero::after, body.mhome-aurora .home-hero__inner::after, body.mhome-aurora .home-bigtile--primary::before, body.mhome-aurora .home-bigtile--soft::before, body.mhome-aurora .mhome-install::after, body.mhome-aurora .home-bigtile--primary:hover::before, body.mhome-aurora .home-bigtile--primary:focus-visible::before, body.mhome-aurora .home-bigtile--soft:hover::before, body.mhome-aurora .home-bigtile--soft:focus-visible::before { animation: none; will-change: auto; } } @media (prefers-contrast: more), (forced-colors: active), print { body.mhome-aurora .home-hero::after, body.mhome-aurora .home-hero__inner::after, body.mhome-aurora section[aria-labelledby="pub-steps-title"]::before, body.mhome-aurora .mhome-install-wrap::before, body.mhome-aurora .home-bigtile--primary::before, body.mhome-aurora .home-bigtile--soft::before, body.mhome-aurora .mhome-install::after { display: none; animation: none; } body.mhome-aurora .home-hero__eyebrow, body.mhome-aurora .home-hero__trust li, body.mhome-aurora .home-hero__chip, body.mhome-aurora .home-bigtile--soft, body.mhome-aurora .home-spotlight, body.mhome-aurora .home-stats__list, body.mhome-aurora section[aria-labelledby="pub-steps-title"] .ds-step, body.mhome-aurora .mhome-install { background: var(--ds-surface); border-color: var(--ds-line); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } body.mhome-aurora .home-bigtile--primary { box-shadow: none; } }